/* =====================================================================
   2engros — design system
   Référence structurelle : AdminLTE (sidebar + topbar + contenu)
   Identité : univers « import / colis » — étiquette à coin entaillé.
   ===================================================================== */

/* Polices de l’identité (auto-hébergées, sous-ensemble latin) : Poppins = titres, boutons, chiffres ; Inter = texte */
@font-face { font-family: "Poppins Local"; src: url("../fonts/Poppins-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins Local"; src: url("../fonts/Poppins-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins Local"; src: url("../fonts/Poppins-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins Local"; src: url("../fonts/Poppins-BoldItalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Local"; src: url("../fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Local"; src: url("../fonts/Inter-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Local"; src: url("../fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Local"; src: url("../fonts/Inter-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Palette — identité 2engros */
  --carbon:     #111318;   /* principal */
  --graphite:   #292D35;   /* surfaces sombres */
  --lime:       #C8FF32;   /* signature */
  --lime-600:   #B4EC17;
  --lime-50:    #F2FCD8;
  --lime-ink:   #4C6600;   /* lime lisible sur fond clair */
  --orange:     #FF6B35;   /* promotion, arrivage */
  --orange-50:  #FFEDE5;
  --orange-ink: #C2410C;

  --ink:        var(--carbon);
  --ink-2:      #1B1E25;
  --ink-3:      var(--graphite);
  --ink-text:   #A3A8B3;
  --cobalt:     var(--carbon);   /* action / lien (historique : ancien bleu) */
  --cobalt-600: #000000;
  --cobalt-50:  var(--lime-50);
  --saffron:    var(--orange);
  --saffron-50: var(--orange-50);
  --mint:       #128A5C;
  --mint-50:    #E2F5EC;
  --pomegranate:#D92D44;
  --pome-50:    #FDE8EB;

  --bg:         #F5F5EF;   /* Off White */
  --surface:    #FFFFFF;
  --surface-2:  #F8F8F4;
  --line:       #E4E7EC;   /* Gris clair */
  --line-2:     #ECEEF1;
  --text:       #111318;
  --text-2:     #4B505C;
  --text-3:     #8A8F9B;

  /* Typo */
  --font: "Inter Local", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Poppins Local", "Poppins", "Inter Local", system-ui, sans-serif;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem; --fs-lg: 1.125rem;
  --fs-xl: 1.5rem; --fs-2xl: 2rem;

  /* Formes — rayon décroissant avec la taille de l'élément */
  --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --notch: 10px;

  --shadow-pop: 0 1px 2px rgba(17,19,24,.06), 0 12px 32px -8px rgba(17,19,24,.18);
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* l'attribut hidden l'emporte toujours sur les classes */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-md); line-height: 1.5;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { color: var(--cobalt-600); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.015em; font-weight: 600; }
p { margin: 0; }
.num, .tabnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }
.show-sm { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 16px; height: 16px; }
.ic.lg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------------
   L'étiquette (signature) : coin supérieur gauche entaillé + œillet
   --------------------------------------------------------------------- */
.tag {
  --tag-bg: var(--surface-2); --tag-fg: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 14px; font-size: var(--fs-xs); font-weight: 500; line-height: 1.5;
  color: var(--tag-fg); background: var(--tag-bg);
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
  border-radius: 0 4px 4px 4px; white-space: nowrap;
  position: relative;
}
.tag::before { /* œillet */
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .55; margin-left: -4px;
}
.tag.is-ok      { --tag-bg: var(--mint-50);   --tag-fg: var(--mint); }
.tag.is-incoming{ --tag-bg: var(--saffron-50);--tag-fg: var(--orange-ink); }
.tag.is-danger  { --tag-bg: var(--pome-50);   --tag-fg: var(--pomegranate); }
.tag.is-info    { --tag-bg: var(--cobalt-50); --tag-fg: var(--cobalt); }
.tag.is-muted   { --tag-bg: var(--line-2);    --tag-fg: var(--text-3); }

/* Marque */
.brand { display: inline-flex; align-items: center; gap: 10px; line-height: 1; color: inherit; font-weight: 700; letter-spacing: -.03em; font-size: 1.25rem; }
.brand-mark { width: 34px; height: 34px; flex: none; display: block; }
.brand-name { font-weight: 700; }
.brand b { font-weight: 300; opacity: .7; margin-left: -4px; }

/* ---------------------------------------------------------------------
   Boutons & champs
   --------------------------------------------------------------------- */
.btn {
  --b-bg: var(--surface); --b-fg: var(--text); --b-bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: var(--r-sm);
  font: 500 var(--fs-md)/1 var(--font); color: var(--b-fg); background: var(--b-bg);
  border: 1px solid var(--b-bd); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { --b-bd: #CDD1D8; color: var(--b-fg); }
.btn:active { transform: translateY(1px); }
.btn-primary { --b-bg: var(--cobalt); --b-fg: #fff; --b-bd: var(--cobalt); }
.btn-primary:hover { --b-bg: var(--cobalt-600); --b-bd: var(--cobalt-600); }
.btn-ghost { --b-bg: transparent; --b-bd: transparent; }
.btn-ghost:hover { --b-bg: var(--line-2); --b-bd: transparent; }
.btn-danger { --b-fg: var(--pomegranate); }
.btn-block { width: 100%; }
.btn-lg { height: 50px; font-size: 1rem; }
.btn-sm { height: 34px; padding: 0 12px; font-size: var(--fs-sm); }
.btn-icon { width: 42px; padding: 0; }
.btn[disabled] { opacity: .55; pointer-events: none; }

.field { display: grid; gap: 6px; margin-bottom: 18px; align-content: start; } /* jamais étiré par son voisin de grille */
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); display: flex; justify-content: space-between; }
.field label a { font-weight: 400; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .ic { position: absolute; left: 14px; color: var(--text-3); pointer-events: none; }
.input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: 400 var(--fs-md) var(--font); transition: border-color .15s, box-shadow .15s;
}
.input-wrap > .ic + .input { padding-left: 44px; }
.input:hover { border-color: #CDD1D8; }
.input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-50); }
.input::placeholder { color: var(--text-3); }
.input-action { position: absolute; right: 6px; }
.hint { font-size: var(--fs-xs); color: var(--text-3); }

.check { display: inline-flex; gap: 10px; align-items: center; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--cobalt); }

/* Alertes inline */
.alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--r-sm); font-size: var(--fs-sm); margin-bottom: 18px;
  background: var(--pome-50); color: #8E1F2D;
}
.alert .ic { margin-top: 1px; }
.alert.is-ok { background: var(--mint-50); color: #0A5E45; }
.alert.is-info { background: var(--cobalt-50); color: var(--cobalt-600); }

/* =====================================================================
   PAGE DE CONNEXION
   ===================================================================== */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--surface); }
.auth-side {
  position: relative; overflow: hidden; background: var(--ink); color: #fff;
  padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-side::after { /* trame « carton » très discrète */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background-image: repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 56px),
                    repeating-linear-gradient(0deg,  #fff 0 1px, transparent 1px 56px);
}
.auth-side > * { position: relative; z-index: 1; }
.auth-pitch { max-width: 460px; }
.auth-pitch h1 { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; }
.auth-pitch h1 strong { font-weight: 700; display: block; }
.auth-pitch p { margin-top: 16px; color: var(--ink-text); max-width: 380px; }

/* Pile d'étiquettes d'arrivage */
.manifest { display: grid; gap: 12px; max-width: 440px; margin: 40px 0; }
.manifest-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 14px 18px 14px 22px; background: var(--ink-2);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  border-radius: 0 12px 12px 12px; position: relative;
}
.manifest-item:nth-child(2) { margin-left: 28px; }
.manifest-item:nth-child(3) { margin-left: 56px; background: var(--ink-3); }
.manifest-item .hole { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.manifest-item .route { font-size: var(--fs-sm); font-weight: 500; }
.manifest-item .route small { display: block; color: var(--ink-text); font-weight: 400; font-size: var(--fs-xs); }
.manifest-item .eta { font-size: var(--fs-xs); color: var(--saffron); font-variant-numeric: tabular-nums; text-align: right; }
.manifest-item .eta b { display: block; font-size: var(--fs-md); color: #fff; font-weight: 600; }
.auth-foot { font-size: var(--fs-xs); color: var(--ink-text); display: flex; gap: 20px; flex-wrap: wrap; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .brand { display: none; margin-bottom: 40px; }
.auth-card h2 { font-size: var(--fs-xl); }
.auth-card .lead { color: var(--text-2); margin: 8px 0 32px; font-size: var(--fs-md); }
.auth-switch { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: var(--fs-sm); color: var(--text-3); }
.auth-secure { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: var(--fs-xs); color: var(--text-3); }

/* Espace partenaire : panneau cobalt au lieu d'encre */
.auth.is-partner .auth-side { background: var(--cobalt); }
.auth.is-partner .manifest-item { background: rgba(255,255,255,.1); }
.auth.is-partner .manifest-item:nth-child(3) { background: rgba(255,255,255,.16); }
.auth.is-partner .manifest-item .hole { background: var(--cobalt); }
.auth.is-partner .auth-pitch p, .auth.is-partner .auth-foot, .auth.is-partner .manifest-item small { color: #C9D2FF; }

@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-side { display: none; }
  .auth-card .brand { display: inline-flex; }
  .auth-main { align-items: flex-start; padding-top: 56px; }
}

/* =====================================================================
   APPLICATION — sidebar / topbar / contenu
   ===================================================================== */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--ink); color: var(--ink-text);
  display: flex; flex-direction: column; padding: 18px 14px;
}
.sidebar .brand { color: #fff; padding: 4px 10px 22px; }
.nav-group { margin-top: 18px; }
.nav-group > span { display: block; padding: 0 12px 8px; font-size: var(--fs-xs); color: #6B707C; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0;
  color: var(--ink-text); border-radius: var(--r-sm); font-size: var(--fs-md); position: relative;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--ink-2); color: #fff; }
.nav a.is-active { background: var(--ink-3); color: #fff; }
.nav a.is-active::before { /* repère étiquette */
  content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 4px;
  background: var(--saffron); border-radius: 0 3px 3px 0;
}
.nav a .count { margin-left: auto; font-size: var(--fs-xs); color: var(--ink); background: var(--saffron); padding: 1px 7px; border-radius: 6px; font-weight: 600; }
.nav a.is-soon { opacity: .45; pointer-events: none; }
.nav a.is-soon::after { content: "bientôt"; margin-left: auto; font-size: 10px; border: 1px solid var(--ink-3); padding: 0 6px; border-radius: 5px; }
.sidebar-foot { margin-top: auto; padding-top: 16px; }
.install-card {
  background: var(--ink-2); border-radius: var(--r-md); padding: 14px; color: #fff; font-size: var(--fs-sm);
}
.install-card p { color: var(--ink-text); font-size: var(--fs-xs); margin: 4px 0 12px; }
.install-card .btn { --b-bg: var(--saffron); --b-bd: var(--saffron); --b-fg: var(--ink); height: 36px; font-size: var(--fs-sm); width: 100%; }

.main { min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 28px;
  background: rgba(245,245,239,.86); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
}
.topbar.is-scrolled { border-bottom-color: var(--line); }
.topbar .menu-btn { display: none; }
.search {
  flex: 1; max-width: 460px; position: relative; display: flex; align-items: center;
}
.search .ic { position: absolute; left: 14px; color: var(--text-3); }
.search input {
  width: 100%; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); padding: 0 56px 0 42px; font: inherit; color: var(--text);
}
.search input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-50); }
.search kbd { position: absolute; right: 10px; font: 500 11px var(--font); color: var(--text-3); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; background: var(--surface-2); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bell { position: relative; }
.bell .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; background: var(--pomegranate); border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }

.avatar {
  width: 38px; height: 38px; border-radius: 11px; flex: none; overflow: hidden;
  display: grid; place-items: center; font-weight: 600; font-size: var(--fs-sm);
  background: var(--cobalt-50); color: var(--cobalt);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 72px; height: 72px; border-radius: 20px; font-size: 1.4rem; }

.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 12px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--text); }
.user-btn:hover { background: var(--line-2); }
.user-btn .who { text-align: left; line-height: 1.25; }
.user-btn .who small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 6px;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-pop); border: 1px solid var(--line-2);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s var(--ease);
}
.dropdown.is-open { opacity: 1; transform: none; pointer-events: auto; }
.dropdown a, .dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r-sm);
  color: var(--text); font: inherit; font-size: var(--fs-sm); background: none; border: 0; cursor: pointer; text-align: left;
}
.dropdown a:hover, .dropdown button:hover { background: var(--surface-2); }
.dropdown hr { border: 0; border-top: 1px solid var(--line-2); margin: 6px 0; }
.dropdown .danger { color: var(--pomegranate); }

.content { padding: 8px 28px 48px; width: 100%; max-width: 1360px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 24px; }
.page-head h1 { font-size: var(--fs-2xl); font-weight: 600; }
.page-head p { color: var(--text-2); margin-top: 4px; }
.page-head .actions { display: flex; gap: 8px; }

/* Panneaux */
.panel { background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line-2); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.panel-head h2 { font-size: var(--fs-lg); }
.panel-body { padding: 22px; }
.grid { display: grid; gap: 20px; }
.grid-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* Ligne de chiffres du jour — une seule bande, pas quatre cartes */
.ledger {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); margin-bottom: 20px;
}
.ledger > div { padding: 20px 22px; border-left: 1px solid var(--line-2); }
.ledger > div:first-child { border-left: 0; }
.ledger dt { font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.ledger dd { margin: 8px 0 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ledger dd small { font-size: var(--fs-sm); font-weight: 400; color: var(--text-3); margin-left: 6px; letter-spacing: 0; }

/* Listes / journal */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 22px; border-top: 1px solid var(--line-2); }
.feed li:first-child { border-top: 0; }
.feed .f-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.feed .f-ic.ok { background: var(--mint-50); color: var(--mint); }
.feed .f-ic.bad { background: var(--pome-50); color: var(--pomegranate); }
.feed .f-txt { font-size: var(--fs-sm); min-width: 0; }
.feed .f-txt small { display: block; color: var(--text-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed time { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }

/* Chantier : prochaines étapes */
.roadmap { list-style: none; margin: 0; padding: 6px 0; counter-reset: step; }
.roadmap li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 22px; font-size: var(--fs-sm); counter-increment: step; }
.roadmap li::before {
  content: counter(step); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 600; background: var(--surface-2); color: var(--text-2);
}
.roadmap li.done::before { content: "✓"; background: var(--mint-50); color: var(--mint); }
.roadmap li small { display: block; color: var(--text-3); }

.empty { text-align: center; padding: 40px 22px; color: var(--text-2); font-size: var(--fs-sm); }
.empty .ic { margin: 0 auto 10px; color: var(--text-3); width: 28px; height: 28px; }

/* Toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 8px; }
.toast {
  display: flex; gap: 10px; align-items: center; padding: 12px 16px; min-width: 260px; max-width: 380px;
  background: var(--ink); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-pop); font-size: var(--fs-sm);
  animation: toast-in .3s var(--ease);
}
.toast.is-ok .ic { color: #5FD3A9; }
.toast.is-error .ic { color: #FF8A97; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Barre d'onglets mobile (style app) */
.tabbar { display: none; }
.scrim { display: none; }

@media (max-width: 1100px) {
  .grid-main { grid-template-columns: minmax(0, 1fr); }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger > div:nth-child(3) { border-left: 0; }
  .ledger > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 60; left: 0; top: 0; width: min(300px, 86vw);
    transform: translateX(-100%); transition: transform .25s var(--ease);
  }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(17,19,24,.45); }
  .topbar { padding: 0 16px; }
  .topbar .menu-btn { display: inline-flex; }
  .topbar .search { display: none; }
  .user-btn .who { display: none; }
  .content { padding: 4px 16px calc(88px + env(safe-area-inset-bottom)); }
  .page-head h1 { font-size: var(--fs-xl); }
  .toasts { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); }

  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 0; font-size: 11px; color: var(--text-3); border-radius: var(--r-sm); }
  .tabbar a.is-active { color: var(--cobalt); }
  .tabbar a.is-active .ic { stroke-width: 2.1; }
}

@media (max-width: 560px) {
  .hide-sm { display: none; }
  .show-sm { display: inline; }
  .page-head .actions { width: 100%; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ledger dd { font-size: 1.4rem; }
  .ledger > div { padding: 16px; }
  .feed li, .roadmap li { padding-left: 16px; padding-right: 16px; }
  .panel-head, .panel-body { padding-left: 16px; padding-right: 16px; }
}


/* =====================================================================
   ÉTAPE 2 — Mon compte, appareils, historique, application
   ===================================================================== */
.muted { color: var(--text-2); font-size: var(--fs-sm); }
.stack { display: grid; gap: 20px; align-content: start; }
.grid-aside { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.split { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.wrap { white-space: normal !important; }

/* Onglets de section : une règle sous l'onglet actif, rappel de l'étiquette en safran */
.subnav {
  display: flex; gap: 4px; margin: -4px 0 24px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 12px; white-space: nowrap;
  color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; position: relative;
}
.subnav a:hover { color: var(--text); }
.subnav a.is-active { color: var(--text); }
.subnav a.is-active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px;
  background: var(--cobalt); border-radius: 3px 3px 0 0;
}

/* Panneaux : pied, sous-titre, note */
.panel-head.is-sub { border-top: 1px solid var(--line-2); padding-top: 16px; padding-bottom: 0; border-bottom: 0; }
.panel-head.is-sub h2 { font-size: var(--fs-md); color: var(--text-2); font-weight: 500; }
.panel-head.is-sub + .panel-body { padding-top: 14px; }
.panel-foot { padding: 16px 22px; border-top: 1px solid var(--line-2); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.panel-foot.split { justify-content: space-between; }
.panel-note { padding: 14px 22px; border-top: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--text-3); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.panel-body.narrow { max-width: 460px; }

/* Formulaires */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
.form-grid .span-2 { grid-column: 1 / -1; }
.field .opt { font-weight: 400; color: var(--text-3); font-size: var(--fs-xs); }
.field.has-error .input { border-color: var(--pomegranate); }
.field.has-error .input:focus { box-shadow: 0 0 0 4px var(--pome-50); }
.field-error { font-size: var(--fs-xs); color: var(--pomegranate); }
select.input {
  appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A90AB' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
}

/* Jauge de mot de passe : 4 segments */
.meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.meter i { height: 4px; border-radius: 2px; background: var(--line-2); transition: background .2s; }
.meter[data-score="1"] i:nth-child(-n+1) { background: var(--pomegranate); }
.meter[data-score="2"] i:nth-child(-n+2) { background: var(--saffron); }
.meter[data-score="3"] i:nth-child(-n+3) { background: var(--mint); }
.meter[data-score="4"] i { background: var(--mint); }

/* Photo de profil */
.photo-row { display: flex; gap: 20px; align-items: center; }
.avatar.xl { width: 96px; height: 96px; border-radius: 26px; font-size: 1.8rem; position: relative; }
.avatar.xl::before { /* entaille de l'étiquette sur l'avatar */
  content: ""; position: absolute; top: -1px; left: -1px; width: 22px; height: 22px; z-index: 1;
  background: linear-gradient(135deg, var(--surface) 50%, transparent 50%);
}
.avatar.is-loading img { opacity: .5; }
.photo-txt h2 { font-size: var(--fs-lg); }
.photo-txt p { color: var(--text-3); font-size: var(--fs-sm); margin: 4px 0 12px; }
.photo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-actions label.btn { cursor: pointer; }

/* Faits (colonne de droite) */
.facts { margin: 0; padding: 6px 0; }
.facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 22px; font-size: var(--fs-sm); }
.facts > div + div { border-top: 1px dashed var(--line-2); }
.facts dt { color: var(--text-3); }
.facts dd { margin: 0; text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.facts dd.tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.big-figure { font-size: 2.5rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; }
.tip { background: var(--surface-2); }
.tip h2 { font-size: var(--fs-md); display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.tip ul { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--text-2); display: grid; gap: 6px; }

/* Appareils */
.devices { list-style: none; margin: 0; padding: 0; }
.device { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 20px 22px; border-top: 1px solid var(--line-2); }
.device:first-child { border-top: 0; }
.device-ic {
  width: 52px; height: 52px; display: grid; place-items: center; color: var(--text-2);
  background: var(--surface-2); border-radius: 14px;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}
.device.is-current .device-ic { background: var(--cobalt-50); color: var(--cobalt); }
.device-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.device-name strong { font-weight: 600; }
.device-name .tag .ic { width: 12px; height: 12px; }
.device-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 8px 0 0; font-size: var(--fs-sm); }
.device-meta dt { color: var(--text-3); font-size: var(--fs-xs); }
.device-meta dd { margin: 0; }
.device-actions { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.rename { position: relative; }
.rename summary { list-style: none; }
.rename summary::-webkit-details-marker { display: none; }
.rename-form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: flex; gap: 6px; width: 300px;
  padding: 8px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-pop); border: 1px solid var(--line-2);
}
.rename-form .input { height: 34px; font-size: var(--fs-sm); }

/* Historique */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 6px 12px; border-radius: 999px; font-size: var(--fs-sm); color: var(--text-2);
  border: 1px solid var(--line); background: var(--surface);
}
.chip:hover { color: var(--text); border-color: #CDD1D8; }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.day-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); padding: 14px 22px 6px; background: var(--surface-2); border-top: 1px solid var(--line-2); }
.day-label + .feed li:first-child { border-top: 0; }
.feed .f-txt .tag { margin-left: 6px; vertical-align: 1px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line-2); font-size: var(--fs-sm); color: var(--text-2); }
.btn.is-disabled { opacity: .45; pointer-events: none; }

/* Notifications */
.bell.is-active { color: var(--cobalt); background: var(--cobalt-50); }
.notif-list li.is-unread { background: linear-gradient(90deg, var(--cobalt-50), transparent 60%); }
.notif-list li.is-unread .f-txt strong::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--cobalt); vertical-align: 2px; }
.notif-list .f-txt a { color: var(--text); }
.empty p + p { margin-top: 6px; }
.empty .btn { margin-top: 10px; }

/* Page Application */
.app-hero { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.app-hero img { border-radius: 16px; flex: none; }
.app-hero strong { font-size: var(--fs-lg); }
.state { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); margin-bottom: 16px; }
.state.is-ok { background: var(--mint-50); color: #0A5E45; }
.state.is-danger { background: var(--pome-50); color: #8E1F2D; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; position: relative; padding: 4px 0 0 40px; min-height: 28px; font-size: var(--fs-sm); color: var(--text-2); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--ink); color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.steps strong { color: var(--text); font-weight: 600; }
.kbd-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--cobalt-50); color: var(--cobalt); vertical-align: -6px; }
.push-actions { margin-bottom: 4px; }
.push-actions .split .btn { flex: 1; }
.list-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin: 22px 0 10px; }
.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.alert-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; font-size: var(--fs-sm); }
.alert-list .f-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.alert-list small { display: block; color: var(--text-3); font-size: var(--fs-xs); }

/* Page hors connexion */
.offline { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 32px 24px; max-width: 420px; margin: 0 auto; }
.offline .brand { margin-bottom: 24px; }
.offline-ic { width: 48px; height: 48px; color: var(--text-3); }
.offline h1 { font-size: var(--fs-xl); }
.offline p { color: var(--text-2); }

@media (max-width: 1100px) {
  .grid-aside, .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .device { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; }
  .device-ic { width: 44px; height: 44px; }
  .device-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 60px; }
  .rename-form { left: 0; right: auto; width: min(300px, 80vw); }
  .photo-row { gap: 16px; }
  .avatar.xl { width: 80px; height: 80px; border-radius: 22px; }
  .facts > div, .day-label, .pager, .panel-note, .panel-foot { padding-left: 16px; padding-right: 16px; }
  .panel-head { flex-wrap: wrap; }
  .panel-foot .btn-primary { width: 100%; }
  /* onglets défilants : fondu à droite pour signaler la suite */
  .subnav { margin-right: -16px; padding-right: 32px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .notif-list li { grid-template-columns: 36px minmax(0, 1fr); align-items: start; }
  .notif-list time { grid-column: 2; margin-top: -6px; }
}


/* =====================================================================
   CONNEXION COMMERÇANT — numéro + pavé PIN
   ===================================================================== */
.phone-input { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.phone-input:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-50); }
.phone-prefix { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; font-weight: 500; color: var(--text-2); border-right: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.flag { width: 20px; height: 14px; border-radius: 3px; background: #E70013; position: relative; }
.flag::after { content: ""; position: absolute; inset: 3px 6px; border-radius: 50%; background: #fff; }
.phone-input .input { border: 0; box-shadow: none !important; height: 56px; font-size: 1.25rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.phone-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; margin-bottom: 18px;
  border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); border: 1px solid var(--line-2);
}
.phone-chip .ic { color: var(--mint); }
.phone-chip .edit { color: var(--cobalt); padding: 2px 8px; border-radius: 999px; background: var(--surface); font-size: var(--fs-xs); }
.pin-form { margin-top: 20px; }

.pin-ui { display: none; }
.pin-ready .pin-fields { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pin-ready .pin-ui { display: grid; justify-items: center; gap: 22px; }
.pin-label { font-size: var(--fs-sm); color: var(--text-2); min-height: 1.5em; text-align: center; }
.pin-label.is-error { color: var(--pomegranate); font-weight: 500; }
.pin-dots { display: flex; gap: 14px; }
.pin-dots i {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line);
  transition: background .12s, border-color .12s, transform .12s;
}
.pin-dots i.is-on { background: var(--cobalt); border-color: var(--cobalt); transform: scale(1.08); }
.pin-dots.is-ok i { background: var(--mint); border-color: var(--mint); }
.pin-dots.is-shake { animation: pin-shake .4s; }
.pin-dots.is-shake i { border-color: var(--pomegranate); }
@keyframes pin-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.pin-keys { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px 22px; }
.pin-key {
  height: 76px; border-radius: 22px; border: 0; background: var(--surface-2); color: var(--text);
  font: 500 1.75rem/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .1s, transform .08s; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  display: grid; place-items: center;
}
.pin-key:hover { background: var(--line-2); }
.pin-key:active, .pin-key.is-pressed { background: var(--cobalt-50); color: var(--cobalt); transform: scale(.94); }
.pin-key.is-fn { background: transparent; color: var(--text-2); }
.pin-help { margin-top: 24px; text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
.pin-hint { margin-top: 10px; }
.input.pin-field, .pin-input { letter-spacing: .5em; font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.locked { display: grid; gap: 14px; }
.locked-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--pome-50); color: var(--pomegranate); clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
.locked .lead { margin: 0; }

@media (max-width: 900px) {
  .auth.is-partner .auth-main { padding-top: 40px; }
  .auth.is-partner .auth-card .brand { margin-bottom: 32px; }
}
@media (max-width: 380px) {
  .pin-keys { grid-template-columns: repeat(3, 68px); gap: 12px 18px; }
  .pin-key { height: 68px; }
}


/* =====================================================================
   ÉTAPE 3 — Groupes de commerçants
   ===================================================================== */
.tag-lg { font-size: var(--fs-sm); padding: 5px 14px 5px 18px; clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px); }
.btn-xs { width: 28px; height: 28px; padding: 0; border-radius: 7px; }
.btn[disabled] { opacity: .3; }
.rot180 { transform: rotate(180deg); }
.avatar.xs { width: 28px; height: 28px; border-radius: 9px; font-size: 10px; }
.avatar.sm { width: 34px; height: 34px; border-radius: 10px; font-size: var(--fs-xs); }
.inline-note { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); margin: -8px 0 20px; }
.inline-note .ic { margin-top: 2px; color: var(--text-3); }

/* Fil d'Ariane */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--text-3); margin: 14px 0 -6px; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--cobalt); }

/* Grille des groupes : chaque carte porte la couleur de son groupe sur l'arête gauche */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.group-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 16px 24px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  transition: border-color .15s, box-shadow .15s;
}
.group-card::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--g); }
.group-card:hover { border-color: color-mix(in srgb, var(--g) 35%, var(--line-2)); box-shadow: var(--shadow-pop); }
.group-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.group-link:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.group-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-btns { display: flex; gap: 2px; position: relative; z-index: 2; }
.group-desc { font-size: var(--fs-sm); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.group-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px dashed var(--line-2); border-bottom: 1px dashed var(--line-2); }
.group-stats > div { padding: 10px 16px 10px 0; }
.group-stats > div + div { padding-left: 16px; border-left: 1px dashed var(--line-2); }
.group-stats dt { font-size: var(--fs-xs); color: var(--text-3); }
.group-stats dd { margin: 2px 0 0; font-weight: 600; font-size: var(--fs-md); }
.group-stats dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-discount { color: var(--mint); }
.group-card footer { display: flex; align-items: center; justify-content: space-between; }
.faces { display: flex; align-items: center; }
.faces .avatar { box-shadow: 0 0 0 2px var(--surface); }
.faces .avatar + .avatar { margin-left: -5px; }
.faces .avatar.more { background: var(--surface-2); color: var(--text-2); }
.faces .muted { font-size: var(--fs-xs); }
.group-open { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 500; color: var(--g); }
.group-card.is-new {
  align-items: center; justify-content: center; min-height: 220px; color: var(--text-2); font-weight: 500;
  background: transparent; border: 2px dashed var(--line);
}
.group-card.is-new::before { display: none; }
.group-card.is-new:hover { color: var(--cobalt); border-color: var(--cobalt); box-shadow: none; }

/* Premier lancement : suggestions de groupes */
.onboarding { overflow: hidden; }
.onboarding-txt { padding: 32px 28px 8px; max-width: 620px; }
.onboarding-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--cobalt-50); color: var(--cobalt); margin-bottom: 16px; clip-path: polygon(13px 0, 100% 0, 100% 100%, 0 100%, 0 13px); }
.onboarding-txt h2 { font-size: var(--fs-xl); }
.onboarding-txt p { color: var(--text-2); margin-top: 8px; }
.suggest { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; padding: 20px 28px 28px; }
.suggest-item button {
  width: 100%; height: 100%; display: grid; gap: 8px; justify-items: start; text-align: left; padding: 16px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md); cursor: pointer; font: inherit; color: var(--text);
  transition: border-color .15s, background .15s;
}
.suggest-item button:hover { border-color: var(--cobalt); background: var(--surface); }
.suggest-desc { font-size: var(--fs-sm); color: var(--text-2); }
.suggest-meta { font-size: var(--fs-xs); color: var(--text-3); }
.suggest-add { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--cobalt); margin-top: 4px; }

/* En-tête de groupe */
.group-head h1 { display: flex; align-items: center; gap: 12px; }
.group-head h1::before {
  content: ""; width: 14px; height: 14px; flex: none; background: var(--g);
  clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px); border-radius: 0 3px 3px 3px;
}
.subnav .count { font-size: var(--fs-xs); background: var(--line-2); color: var(--text-2); padding: 0 7px; border-radius: 6px; }
.subnav a.is-active .count { background: var(--cobalt-50); color: var(--cobalt); }

/* Listes de personnes */
.search.mini { max-width: 220px; }
.search.mini input { height: 36px; font-size: var(--fs-sm); padding: 0 12px 0 36px; }
.search.mini .ic { left: 12px; }
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--line-2); }
.people li:first-child { border-top: 0; }
.people-main { min-width: 0; display: grid; gap: 2px; }
.people-main strong { font-weight: 600; font-size: var(--fs-md); }
.people-main strong + .tag { justify-self: start; }
.people-main small { color: var(--text-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.people-tags .tag { font-size: 11px; padding: 1px 8px 1px 12px; }
.people-side { display: flex; align-items: center; gap: 12px; }
.people-side time { font-size: var(--fs-xs); white-space: nowrap; }

/* Sélecteur de commerçants */
.picker { display: flex; flex-direction: column; max-height: calc(100vh - 180px); position: sticky; top: calc(var(--topbar-h) + 12px); }
.picker-search { padding-bottom: 8px; }
.picker-search .search { max-width: none; }
.pick-list { list-style: none; margin: 0; padding: 4px 10px 10px; overflow-y: auto; flex: 1; min-height: 120px; }
.pick-list label { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; }
.pick-list label:hover { background: var(--surface-2); }
.pick-list input { position: absolute; opacity: 0; pointer-events: none; }
.pick-txt { min-width: 0; display: grid; }
.pick-txt strong { font-weight: 500; font-size: var(--fs-sm); }
.pick-txt small { font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; transition: all .12s; }
.pick-list input:checked + .avatar + .pick-txt + .pick-check { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.pick-list input:checked ~ .pick-txt strong { color: var(--cobalt); }
.pick-list input:focus-visible ~ .pick-check { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.picker-foot { justify-content: space-between; align-items: center; }

/* Réglages */
fieldset.field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
fieldset.field legend { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); padding: 0; margin-bottom: 8px; }
textarea.input { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; width: 36px; height: 36px; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; }
.swatch::before {
  content: ""; position: absolute; inset: 0; background: var(--sw); border-radius: 0 10px 10px 10px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); transition: transform .12s;
}
.swatch:hover::before { transform: scale(1.08); }
.swatch::after {
  content: ""; position: absolute; inset: -5px; border: 2px solid transparent; border-radius: 0 13px 13px 13px;
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 0 100%, 0 13px);
}
.swatch:has(input:checked)::after { border-color: var(--sw); }
.swatch:has(input:checked)::before { box-shadow: inset 0 0 0 3px var(--surface); }
.swatch:has(input:focus-visible)::after { border-color: var(--text); }
.preview-tag { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface-2); }
.preview-tag .muted { font-size: var(--fs-xs); }

.segmented { display: inline-flex; padding: 4px; background: var(--surface-2); border-radius: 10px; gap: 2px; margin-bottom: 16px; flex-wrap: wrap; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: block; padding: 8px 16px; border-radius: 7px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); cursor: pointer; transition: background .12s, color .12s; }
.segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(17,19,24,.08), 0 0 0 1px var(--line-2); }
.segmented input:focus-visible + span { outline: 2px solid var(--cobalt); }
.input-suffix { display: flex; align-items: center; max-width: 160px; position: relative; }
.input-suffix .input { padding-right: 40px; font-size: 1.125rem; }
.input-suffix span { position: absolute; right: 14px; color: var(--text-3); font-weight: 500; }
.price-example { font-size: var(--fs-sm); color: var(--text-2); padding: 12px 14px; border-left: 3px solid var(--saffron); background: var(--saffron-50); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 10px; }
.price-example b { color: var(--text); }
.price-example b.is-discount { color: var(--mint); }

.danger-zone { border-color: #F3C7CD; }
.danger-zone .panel-head h2 { color: var(--pomegranate); }
.danger-zone p { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 16px; }
.btn-danger:not([disabled]):hover { --b-bg: var(--pome-50); --b-bd: #F3C7CD; }

.timeline { list-style: none; margin: 0; padding: 12px 22px 18px; }
.timeline li { position: relative; padding: 0 0 16px 22px; font-size: var(--fs-sm); display: grid; gap: 2px; }
.timeline li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 3px var(--surface); z-index: 1; }
.timeline li::after { content: ""; position: absolute; left: 6px; top: 10px; bottom: -4px; width: 2px; background: var(--line-2); }
.timeline li:last-child::after { display: none; }
.timeline li:first-child::before { background: var(--cobalt); }
.timeline small { color: var(--text-3); font-size: var(--fs-xs); }

@media (max-width: 1100px) {
  .picker { position: static; max-height: none; }
  .pick-list { max-height: 360px; }
}
@media (max-width: 720px) {
  .group-grid { grid-template-columns: minmax(0, 1fr); }
  .people li { grid-template-columns: 38px minmax(0, 1fr); padding: 14px 16px; }
  .people-side { grid-column: 2; justify-content: space-between; }
  .suggest, .onboarding-txt { padding-left: 16px; padding-right: 16px; }
  .search.mini { max-width: none; flex: 1 1 100%; }
  
}


/* =====================================================================
   ÉTAPE 4 — Commerçants
   ===================================================================== */
.nowrap { white-space: nowrap; }
.scroll-x { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.scroll-x::-webkit-scrollbar { display: none; }
.quick-filters { margin: -6px 0 16px; }
.scroll-x .chip { flex: none; white-space: nowrap; }
.chip .num { margin-left: 4px; opacity: .6; font-size: var(--fs-xs); }
.chip.is-attention:not(.is-active) { border-color: #FFD0BC; background: var(--saffron-50); color: var(--orange-ink); }
.empty.big { padding: 56px 24px; display: grid; justify-items: center; gap: 10px; }
.empty.big h2 { font-size: var(--fs-xl); color: var(--text); }
.empty.big p { max-width: 440px; }
.empty.big .onboarding-ic { margin: 0 0 6px; }
.small-link { font-size: var(--fs-sm); }

/* Barre de filtres */
.filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line-2); align-items: center; }
.filters .search.grow { flex: 1 1 260px; max-width: none; }
.filters select.input { width: auto; height: 42px; flex: 0 1 200px; font-size: var(--fs-sm); }

/* Tableau */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: 500; font-size: var(--fs-xs); color: var(--text-3); padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.table th:first-child, .table td:first-child { padding-left: 22px; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[data-href] { cursor: pointer; transition: background .1s; }
.table tbody tr[data-href]:hover { background: var(--surface-2); }
.cell-person { display: flex; align-items: center; gap: 12px; color: var(--text); min-width: 220px; }
.cell-person strong { display: block; font-weight: 600; font-size: var(--fs-md); }
.cell-person small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.wa-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.wa-link .ic { color: #1DA851; }
.wa-link:hover { color: #1DA851; }
.tags-cell { display: flex; gap: 4px; flex-wrap: wrap; max-width: 260px; }
.tags-cell .tag { font-size: 11px; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions .btn { margin-left: 4px; }
.pager-btns { display: flex; gap: 6px; }

/* En-tête de fiche */
.merchant-head .mh-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.merchant-head .avatar.lg { border-radius: 20px; }
.merchant-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.dot-attn { width: 8px; height: 8px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 3px var(--saffron-50); }

/* Formulaire */
.type-switch { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 20px; }
.type-switch span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; }
.legal-rule { margin-top: -4px; }
.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check input, .group-check input { position: absolute; opacity: 0; }
.chip-check span {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: var(--fs-sm);
  border: 1px solid var(--line); color: var(--text-2); cursor: pointer; transition: all .12s;
}
.chip-check span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line); transition: all .12s; }
.chip-check input:checked + span { border-color: var(--cobalt); background: var(--cobalt-50); color: var(--cobalt); }
.chip-check input:checked + span::before { background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat; border-color: var(--cobalt); }
.chip-check input:focus-visible + span, .group-check input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }

.photo-pick { display: flex; align-items: center; gap: 18px; }
.photo-pick .avatar.xl { color: var(--text-3); background: var(--surface-2); }
.photo-pick label.btn { cursor: pointer; }
.photo-pick .hint, .photo-pick .field-error { margin-top: 8px; }

.status-pick { display: grid; gap: 8px; }
.status-opt { position: relative; cursor: pointer; }
.status-opt input { position: absolute; opacity: 0; }
.status-opt span { display: grid; gap: 2px; padding: 12px 14px 12px 40px; border: 1px solid var(--line); border-radius: var(--r-sm); transition: all .12s; position: relative; }
.status-opt span::before { content: ""; position: absolute; left: 14px; top: 15px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); }
.status-opt strong { font-size: var(--fs-sm); font-weight: 600; }
.status-opt small { font-size: var(--fs-xs); color: var(--text-3); }
.status-opt.is-active { --st: var(--mint); --st-bg: var(--mint-50); }
.status-opt.is-pending { --st: #B87400; --st-bg: var(--saffron-50); }
.status-opt.is-suspended { --st: var(--pomegranate); --st-bg: var(--pome-50); }
.status-opt input:checked + span { border-color: var(--st); background: var(--st-bg); }
.status-opt input:checked + span::before { border-color: var(--st); background: var(--st); box-shadow: inset 0 0 0 3px var(--st-bg); }
.status-opt input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }

.group-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.group-check { position: relative; cursor: pointer; }
.group-check span {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 8px; font-size: var(--fs-sm);
  border: 1px solid var(--line); color: var(--text-2); transition: all .12s;
}
.group-check span::before { content: ""; width: 10px; height: 10px; background: var(--g); clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px); border-radius: 0 2px 2px 2px; opacity: .45; }
.group-check input:checked + span { border-color: var(--g); background: color-mix(in srgb, var(--g) 10%, transparent); color: var(--g); font-weight: 500; }
.group-check input:checked + span::before { opacity: 1; }

.save-bar { display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 16px; z-index: 5; }
.save-bar .btn-primary { flex: 1; box-shadow: var(--shadow-pop); }

/* Onglet accès */
.link-ready { border: 2px solid #1DA851; background: linear-gradient(180deg, #EAF8EF, var(--surface) 70%); }
.lr-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.lr-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: #1DA851; color: #fff; }
.lr-head h2 { font-size: var(--fs-lg); }
.lr-msg { margin: 0 0 16px; padding: 14px 16px; border-radius: 4px 14px 14px 14px; background: #DCF8C6; color: #1F2C21; font-size: var(--fs-sm); line-height: 1.55; overflow-wrap: anywhere; position: relative; max-width: 560px; }
.lr-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wa-btn { --b-bg: #1DA851; --b-bd: #1DA851; }
.wa-btn:hover { --b-bg: #168A42; --b-bd: #168A42; }
.access-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 0; }
.access-steps li { position: relative; padding: 0 0 18px 38px; display: grid; gap: 2px; }
.access-steps li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--line); background: var(--surface); z-index: 1;
}
.access-steps li::after { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--line-2); }
.access-steps li:last-child { padding-bottom: 0; }
.access-steps li:last-child::after { display: none; }
.access-steps li.done::before { background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--mint); }
.access-steps li.done::after { background: var(--mint); opacity: .35; }
.access-steps strong { font-size: var(--fs-sm); font-weight: 600; }
.access-steps small { font-size: var(--fs-xs); color: var(--text-3); }
.access-cta { display: grid; gap: 8px; justify-items: start; }

@media (max-width: 900px) {
  .filters select.input { flex: 1 1 calc(50% - 5px); }
}
@media (max-width: 720px) {
  .filters { padding: 12px 16px; }
  /* Tableau → cartes empilées */
  .merchants-table thead { display: none; }
  .merchants-table, .merchants-table tbody, .merchants-table tr, .merchants-table td { display: block; }
  .merchants-table tr { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  .merchants-table tr:last-child { border-bottom: 0; }
  .merchants-table td { border: 0; padding: 0 !important; }
  .merchants-table td:nth-child(2) { margin: 8px 0 0 52px; font-size: var(--fs-xs); }
  .merchants-table td:nth-child(3) { margin: 6px 0 0 52px; }
  .merchants-table td:nth-child(4) { margin: 8px 0 0 52px; display: flex; gap: 4px; flex-wrap: wrap; }
  .merchants-table td:nth-child(5) { display: none; }
  .merchants-table td.row-actions { margin: 10px 0 0 52px; text-align: left; }
  .merchants-table td.row-actions .btn-icon { display: none; }
  .merchants-table .cell-person { min-width: 0; }
  .merchant-head .mh-id { gap: 14px; }
  .merchant-head .avatar.lg { width: 56px; height: 56px; border-radius: 16px; }
  .merchant-head .actions { width: auto; display: flex; }
  .type-switch span { padding: 10px 6px; font-size: var(--fs-xs); }
  .save-bar { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .lr-actions .btn { flex: 1 1 100%; }
}


/* =====================================================================
   FICHE COMMERÇANT v2 — sections colorées, aperçu vivant
   ===================================================================== */
.fsec { overflow: hidden; }
.fsec-head { display: flex; gap: 14px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.fsec-ic {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; color: var(--sec); background: var(--sec-bg);
  border-radius: 0 12px 12px 12px; clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px);
}
.fsec-head h2 { font-size: var(--fs-lg); }
.fsec-head p { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.fsec-body { padding: 20px 22px 6px; }
.fsec.has-error { border-color: #F3C7CD; }
.fsec.has-error .fsec-ic { background: var(--pome-50); color: var(--pomegranate); }

.type-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
.type-card { position: relative; cursor: pointer; }
.type-card input { position: absolute; opacity: 0; }
.type-card > span:not(.tc-ic):not(.tc-txt) { display: none; }
.type-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-md); transition: all .15s; }
.type-card:hover { border-color: #CDD1D8; }
.type-card .tc-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--text-3); transition: all .15s; }
.type-card .tc-txt { display: grid; gap: 2px; min-width: 0; }
.type-card strong { font-size: var(--fs-md); font-weight: 600; }
.type-card small { font-size: var(--fs-xs); color: var(--text-3); }
.type-card:has(input:checked) { border-color: var(--cobalt); background: var(--cobalt-50); box-shadow: 0 0 0 3px var(--cobalt-50); }
.type-card:has(input:checked) .tc-ic { background: var(--cobalt); color: #fff; }
.type-card:has(input:focus-visible) { outline: 2px solid var(--cobalt); outline-offset: 2px; }

.channel-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.channel-pick { position: relative; cursor: pointer; }
.channel-pick input { position: absolute; opacity: 0; }
.channel-pick span {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px;
  border: 1.5px solid var(--line); font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); transition: all .15s;
}
.channel-pick .ic { color: var(--ch); }
.channel-pick:hover span { border-color: var(--ch); }
.channel-pick input:checked + span { background: var(--ch); border-color: var(--ch); color: #fff; }
.channel-pick input:checked + span .ic { color: #fff; }
.channel-pick input:focus-visible + span { outline: 2px solid var(--ch); outline-offset: 2px; }

.group-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px; margin-bottom: 14px; }
.group-pick { position: relative; cursor: pointer; }
.group-pick input { position: absolute; opacity: 0; }
.group-pick span {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 500; transition: all .15s;
}
.group-pick i { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 2px solid var(--g); position: relative; transition: all .15s; }
.group-pick small { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.group-pick:hover span { border-color: var(--g); }
.group-pick input:checked + span { border-color: var(--g); background: color-mix(in srgb, var(--g) 8%, var(--surface)); color: var(--g); }
.group-pick input:checked + span i { background: var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.group-pick input:focus-visible + span { outline: 2px solid var(--g); outline-offset: 2px; }

/* Carte d'aperçu */
.mside { position: sticky; top: calc(var(--topbar-h) + 12px); }
.pv-card { position: relative; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; text-align: center; }
.pv-band {
  height: 84px; background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--g) 55%, #fff) 0, transparent 60%),
    linear-gradient(135deg, var(--g), color-mix(in srgb, var(--g) 60%, var(--ink)));
  transition: background .3s;
}
.pv-photo { position: relative; display: inline-block; margin-top: -48px; cursor: pointer; }
.pv-photo .avatar.xl { width: 96px; height: 96px; border-radius: 28px; box-shadow: 0 0 0 5px var(--surface); background: var(--surface-2); color: var(--text-2); font-size: 1.8rem; }
.pv-photo .avatar.xl::before { display: none; }
.pv-cam { position: absolute; right: -4px; bottom: -4px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: 0 0 0 3px var(--surface); transition: transform .15s; }
.pv-photo:hover .pv-cam { transform: scale(1.1); }
.pv-body { display: grid; justify-items: center; gap: 6px; padding: 12px 20px 22px; }
.pv-name { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.pv-brand { font-size: var(--fs-sm); color: var(--text-2); min-height: 1.2em; }
.pv-loc { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-3); }
.pv-channels { display: flex; gap: 6px; min-height: 0; }
.pv-ch { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--ch); color: #fff; }
.pv-groups { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mside .save-bar { position: static; }

@media (max-width: 1100px) { .mside { position: static; } }
@media (max-width: 720px) {
  .type-cards { grid-template-columns: minmax(0, 1fr); }
  .fsec-head, .fsec-body { padding-left: 16px; padding-right: 16px; }
  .mside .save-bar { position: sticky; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .group-picks { grid-template-columns: minmax(0, 1fr); }
}


/* =====================================================================
   NAVIGATION SANS RECHARGEMENT
   ===================================================================== */
.nav-progress {
  position: fixed; top: 0; left: 0; z-index: 200; height: 3px; width: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--cobalt), var(--saffron)); border-radius: 0 3px 3px 0; opacity: 0;
}
.nav-progress.is-active { opacity: 1; width: 75%; transition: width 6s cubic-bezier(.1,.6,.2,1), opacity .1s; }
.nav-progress.is-done { opacity: 0; width: 100%; transition: width .2s ease-out, opacity .3s .15s; }
.toast { transition: opacity .35s, transform .35s var(--ease); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); }
body > .toasts { position: fixed; right: 20px; bottom: 20px; z-index: 150; display: grid; gap: 8px; }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy .ic { opacity: 0; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--b-fg, #fff) transparent var(--b-fg, #fff) var(--b-fg, #fff);
  animation: spin .7s linear infinite;
}
.btn-primary.is-busy::after { border-color: #fff transparent #fff #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
[aria-busy="true"] { cursor: progress; }
#content { animation: content-in .22s var(--ease); }
@keyframes content-in { from { opacity: .4; } }
@media (max-width: 900px) { body > .toasts { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); } }


/* Page du lien d'accès : étapes visuelles */
.welcome h2 { font-size: 1.6rem; letter-spacing: -.02em; }
.welcome .lead { margin-bottom: 22px; }
.steps-visual { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; position: relative; }
.steps-visual::before { content: ""; position: absolute; top: 22px; left: 16%; right: 16%; height: 2px; background: var(--line-2); }
.steps-visual li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.sv-ic {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 0 13px 13px 13px; z-index: 1;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
  background: var(--surface-2); color: var(--text-3); transition: all .25s var(--ease);
}
.sv-txt { display: grid; gap: 2px; }
.sv-txt strong { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); transition: color .2s; }
.sv-txt small { font-size: 12px; color: var(--text-3); font-family: system-ui, "Segoe UI", Tahoma, sans-serif; }
.steps-visual li.is-current .sv-ic { background: var(--cobalt); color: #fff; transform: scale(1.08); box-shadow: 0 8px 18px -6px rgba(47,75,216,.6); }
.steps-visual li.is-current strong { color: var(--text); }
.steps-visual li.is-done .sv-ic { background: var(--mint); color: #fff; }
.steps-visual li.is-done strong { color: var(--mint); }
.pin-ready .pin-label { font-size: var(--fs-md); color: var(--text); font-weight: 500; }

.why { margin-top: 24px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
.why summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--cobalt); list-style: none; }
.why summary::-webkit-details-marker { display: none; }
.why summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; font-weight: 400; color: var(--text-3); }
.why[open] summary::after { content: "−"; }
.why ul { list-style: none; margin: 0; padding: 0 16px 14px; display: grid; gap: 12px; }
.why li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: var(--fs-sm); color: var(--text-2); }
.why li .ic { color: var(--cobalt); margin-top: 2px; }
.why strong { color: var(--text); }


/* =====================================================================
   ÉTAPE 5 — Catalogue
   ===================================================================== */
html { scroll-behavior: smooth; }
.fsec, .panel[id] { scroll-margin-top: calc(var(--topbar-h) + 64px); }
.rot90 { transform: rotate(90deg); } .rot270 { transform: rotate(-90deg); }
.input-lg { height: 54px; font-size: 1.125rem; font-weight: 500; }
.input-sm { height: 36px; font-size: var(--fs-sm); padding: 0 10px; }
.input-suffix.wide { max-width: none; }
.req { font-weight: 400; font-size: var(--fs-xs); color: var(--pomegranate); margin-left: 6px; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--cobalt); font: 500 var(--fs-xs) var(--font); cursor: pointer; padding: 0; }
.opt.is-near, [data-count-for].is-near { color: var(--saffron); }
.sub-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin: 8px 0 12px; display: flex; gap: 8px; align-items: baseline; }
.sub-title small { font-weight: 400; color: var(--text-3); font-size: var(--fs-xs); }
.sub-title:not(:first-child) { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.file-input { padding: 10px; height: auto; font-size: var(--fs-sm); }

/* Navigation de sections */
.section-nav { display: flex; gap: 6px; margin: -6px 0 18px; position: sticky; top: var(--topbar-h); z-index: 20; padding: 8px 0; background: var(--bg); }
.section-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; flex: none; }
.section-nav a:hover { color: var(--cobalt); border-color: var(--cobalt); }
.product-head .pthumb.lg { width: 72px; height: 72px; border-radius: 18px; }

/* Vignettes produits */
.pthumb { width: 44px; height: 44px; flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); border: 1px solid var(--line-2); }
.pthumb img { width: 100%; height: 100%; object-fit: cover; }
.view-toggle { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.view-toggle .btn { --b-bg: transparent; --b-bd: transparent; height: 34px; width: 36px; }
.view-toggle .btn.is-on { --b-bg: var(--surface); --b-bd: var(--line-2); color: var(--cobalt); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; padding: 20px 22px; }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; color: var(--text); background: var(--surface); transition: border-color .15s, box-shadow .15s, transform .15s; }
.pcard:hover { border-color: #CDD1D8; box-shadow: var(--shadow-pop); color: var(--text); transform: translateY(-2px); }
.pcard-img { position: relative; aspect-ratio: 1; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pcard-flags { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; flex-wrap: wrap; }
.pcard-flags .tag { box-shadow: 0 1px 3px rgba(17,19,24,.12); }
.pcard-flags .tag.is-muted { --tag-bg: #fff; }
.pcard-video { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 8px; background: rgba(17,19,24,.75); color: #fff; display: grid; place-items: center; }
.pcard-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.pcard-cat { font-size: var(--fs-xs); color: var(--text-3); }
.pcard-name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.pcard-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pcard-price b { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.pcard-price small { font-size: var(--fs-xs); color: var(--text-3); }
.pcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; }
.pcard-foot .tag { font-size: 11px; }
.margin { font-size: var(--fs-xs); font-weight: 600; color: var(--mint); background: var(--mint-50); padding: 2px 7px; border-radius: 6px; }
.margin.is-low { color: var(--pomegranate); background: var(--pome-50); }

/* Médias */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
.media-item { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-2); }
.media-item img, .media-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-item.is-cover { box-shadow: 0 0 0 3px var(--cobalt); border-color: var(--cobalt); }
.media-badge { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--cobalt); color: #fff; }
.media-badge.is-lock { left: auto; right: 8px; background: rgba(17,19,24,.75); padding: 3px; display: grid; }
.media-badge.is-video { background: rgba(17,19,24,.8); }
.media-item .play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(0,0,0,.25); pointer-events: none; }
.media-item .play::after { content: ""; position: absolute; left: 16px; top: 12px; border-left: 12px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.video-ph { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--graphite), var(--ink)); }
.video-ph.src-tiktok { background: linear-gradient(135deg, #25F4EE33, #161823 40%, #FE2C5533); }
.video-ph.src-alibaba { background: linear-gradient(135deg, #FF6A00, #E14800); }
.video-ph.src-instagram { background: linear-gradient(135deg, #FEDA75, #D62976 50%, #4F5BD5); }
.media-actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 4px; padding: 8px; background: linear-gradient(transparent, rgba(17,19,24,.75)); opacity: 0; transition: opacity .15s; }
.media-item:hover .media-actions, .media-item:focus-within .media-actions { opacity: 1; }
@media (hover: none) { .media-actions { opacity: 1; } }
.mbtn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255,255,255,.95); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.mbtn:hover { background: #fff; color: var(--cobalt); }
.mbtn.is-danger:hover { color: var(--pomegranate); }
.mbtn[disabled] { opacity: .35; cursor: default; }
.drop-zone {
  position: relative; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; padding: 12px;
  border: 2px dashed var(--line); border-radius: var(--r-md); color: var(--text-2); cursor: pointer; transition: border-color .15s, background .15s;
}
.drop-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-zone:hover, .drop-zone:focus-within, .drop-zone.has-files { border-color: #C2407A; background: #FBEAF2; color: #9C2F60; }
.drop-zone strong { font-size: var(--fs-sm); }
.drop-zone small { font-size: 11px; color: var(--text-3); }
.dz-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #FBEAF2; color: #C2407A; margin-bottom: 4px; }
.drop-zone.wide { aspect-ratio: auto; min-height: 150px; margin-bottom: 18px; }
.video-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.video-add .grow { flex: 1 1 280px; }
.video-add label.btn { cursor: pointer; }

/* Prix & coûts */
.buy-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.calc-line { margin: -8px 0 4px; }
.calc-line b { color: var(--text); }
.costs { display: grid; gap: 8px; }
.cost-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 90px 36px; gap: 8px; align-items: center; }
.cost-row .input { height: 40px; font-size: var(--fs-sm); }
.cost-row .input-suffix { max-width: none; }
.cost-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 6px; }
.cost-add .chip { cursor: pointer; font: inherit; font-size: var(--fs-xs); }

/* Disponibilité, visibilité */
.avail-cards, .vis-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.vis-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.avail-card, .vis-card { position: relative; cursor: pointer; }
.avail-card input, .vis-card input { position: absolute; opacity: 0; }
.avail-card span, .vis-card span { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; text-align: center; border: 1.5px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-2); transition: all .15s; }
.avail-card.is-ok { --c: var(--mint); --cb: var(--mint-50); }
.avail-card.is-incoming { --c: #B87400; --cb: var(--saffron-50); }
.avail-card.is-muted { --c: var(--text-2); --cb: var(--surface-2); }
.avail-card.is-danger { --c: var(--pomegranate); --cb: var(--pome-50); }
.avail-card input:checked + span { border-color: var(--c); background: var(--cb); color: var(--c); }
.avail-card strong, .vis-card span { font-weight: 600; }
.vis-card span { grid-auto-flow: column; justify-content: center; align-items: center; }
.vis-card input:checked + span { border-color: #0E7F92; background: #E3F4F7; color: #0E7F92; }
.avail-card input:focus-visible + span, .vis-card input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.gprice-table td { padding-top: 8px; padding-bottom: 8px; }
.gprice-table tr.is-off td { opacity: .45; }
.gprice-table .input-suffix { max-width: 130px; }
.gp-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.gp-check input { width: 18px; height: 18px; accent-color: #0E7F92; }
.flag-row { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 18px 0 12px; padding-top: 16px; border-top: 1px dashed var(--line-2); }

/* Interrupteurs */
.switch-row { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: var(--fs-sm); font-weight: 500; margin-bottom: 4px; }
.switch-row input { position: absolute; opacity: 0; }
.switch { width: 40px; height: 24px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
.switch-row input:checked + .switch { background: var(--cobalt); }
.switch-row input:checked + .switch::after { transform: translateX(16px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.mini-switch { position: relative; display: inline-block; cursor: pointer; }
.mini-switch input { position: absolute; opacity: 0; }
.mini-switch span { display: block; width: 32px; height: 18px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; }
.mini-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.mini-switch input:checked + span { background: var(--mint); }
.mini-switch input:checked + span::after { transform: translateX(14px); }

/* Variantes */
.variants-box { margin-top: 16px; }
.opt-defs { display: grid; gap: 8px; }
.opt-def { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) 36px; gap: 8px; }
.variants-table { margin-top: 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.variants-table td { padding: 8px 10px; }
.variants-table th:first-child, .variants-table td:first-child { padding-left: 12px; }
.variants-table .input-sm { max-width: 130px; }

/* Panneau de droite */
.pside { position: sticky; top: calc(var(--topbar-h) + 64px); }
.status-seg { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 8px; }
.status-seg span { text-align: center; padding: 8px 4px; }
.pside .hint { margin-bottom: 14px; min-height: 1.4em; }
.profit-list { margin: 0; padding: 8px 22px 4px; }
.profit-list > div { display: flex; justify-content: space-between; padding: 7px 0; font-size: var(--fs-sm); }
.profit-list dt { color: var(--text-2); }
.profit-list dd { margin: 0; font-weight: 500; }
.profit-list .is-total { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 10px; }
.profit-list .is-total dt, .profit-list .is-total dd { font-weight: 600; color: var(--text); }
.margin-box { margin: 10px 16px 16px; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); display: grid; gap: 6px; --mc: var(--text-3); }
.margin-box[data-level="good"] { --mc: var(--mint); background: var(--mint-50); }
.margin-box[data-level="ok"] { --mc: #0E7F92; background: #E3F4F7; }
.margin-box[data-level="low"] { --mc: #B87400; background: var(--saffron-50); }
.margin-box[data-level="loss"] { --mc: var(--pomegranate); background: var(--pome-50); }
.mb-label { font-size: var(--fs-xs); color: var(--text-2); }
.margin-box strong { font-size: 1.6rem; letter-spacing: -.02em; color: var(--mc); }
.mb-bar { height: 6px; border-radius: 3px; background: rgba(17,19,24,.08); overflow: hidden; }
.mb-bar i { display: block; height: 100%; width: 0; background: var(--mc); border-radius: 3px; transition: width .3s var(--ease); }
.margin-box small { font-size: var(--fs-xs); color: var(--text-2); }
.merchant-gain { display: flex; gap: 8px; align-items: flex-start; margin: 0 16px 16px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px dashed var(--line); font-size: var(--fs-xs); color: var(--text-2); }
.merchant-gain .ic { color: var(--mint); margin-top: 1px; }
.merchant-gain b { color: var(--text); }
.copy-field label .ic { color: var(--cobalt); margin-right: 4px; }
.copy-field label { justify-content: flex-start; gap: 0; }
.copy-field label .opt { margin-left: auto; }
.product-actions { margin-top: 20px; }

/* Catégories */
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line-2); }
.cat-list li:first-child { border-top: 0; }
.cat-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cobalt-50); color: var(--cobalt); flex: none; }
.cat-main { flex: 1; min-width: 0; display: grid; }
.cat-main strong { font-weight: 600; }
.cat-main small { font-size: var(--fs-xs); color: var(--text-3); }
.suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.suggest-chips .chip { cursor: pointer; font: inherit; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 1100px) { .pside { position: static; } }
@media (max-width: 720px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
  .pcard-body { padding: 10px; }
  .pcard-price b { font-size: var(--fs-md); }
  .buy-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .buy-row .field:first-child { grid-column: 1 / -1; }
  .cost-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .cost-row > :nth-child(1) { grid-column: 1 / 3; }
  .cost-row > :nth-child(5) { grid-row: 1; grid-column: 3; }
  .avail-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vis-cards { grid-template-columns: minmax(0, 1fr); }
  .opt-def { grid-template-columns: minmax(0, 1fr) 36px; }
  .opt-def > :nth-child(2) { grid-column: 1; }
  .opt-def > :nth-child(3) { grid-row: 1; grid-column: 2; }
  .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .section-nav { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .products-table td:nth-child(n+3) { white-space: nowrap; }
  .cat-list li { padding: 12px 16px; flex-wrap: wrap; row-gap: 4px; }
  .cat-list .cat-main { flex: 1 1 calc(100% - 50px); }
  .cat-list li > .btn:first-of-type { margin-left: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.danger-zone .field label { display: block; }
.panel-head h2 { display: flex; align-items: center; gap: 8px; }
.margin { white-space: nowrap; }
@media (max-width: 720px) {
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-row > :nth-child(4) { grid-column: 1 / 3; }
  .pcard-foot { flex-wrap: wrap; }
}

/* État du serveur */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line-2); }
.checks li:first-child { border-top: 0; }
.ck-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.checks .is-ok .ck-ic { background: var(--mint-50); color: var(--mint); }
.checks .is-bad .ck-ic { background: var(--pome-50); color: var(--pomegranate); }
.ck-txt { display: grid; gap: 3px; font-size: var(--fs-sm); }
.ck-txt small { color: var(--text-3); font-size: var(--fs-xs); }
.ck-txt code { display: block; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--ink); color: #E6E8F5; font-size: 12px; overflow-x: auto; white-space: pre; }

/* Vente & conditionnement */
.mode-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.mode-card { position: relative; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); transition: all .15s; }
.mode-card input { position: absolute; opacity: 0; }
.mode-card:hover { border-color: #CDD1D8; }
.mc-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--surface-2); color: var(--text-3); transition: all .15s; }
.mc-txt { display: grid; gap: 2px; min-width: 0; }
.mc-txt strong { font-size: var(--fs-sm); font-weight: 600; }
.mc-txt small { font-size: 11.5px; color: var(--text-3); line-height: 1.35; }
.mode-card:has(input:checked) { border-color: var(--orange-ink); background: #F6EDE6; box-shadow: 0 0 0 3px #F6EDE6; }
.mode-card:has(input:checked) .mc-ic { background: var(--orange-ink); color: #fff; }
.mode-card:has(input:focus-visible) { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.mix-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.mix-card { position: relative; cursor: pointer; }
.mix-card input { position: absolute; opacity: 0; }
.mix-card span { display: grid; gap: 4px; height: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); transition: all .15s; }
.mix-card strong { font-size: var(--fs-sm); }
.mix-card small { font-size: var(--fs-xs); color: var(--text-3); }
.mix-card input:checked + span { border-color: #7048C6; background: #F0EBFB; }
.mix-card input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.sale-preview { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; padding: 14px 16px; border-radius: var(--r-md); background: var(--ink); color: #fff; }
.sp-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--saffron); color: var(--ink); }
.sale-preview small { font-size: var(--fs-xs); color: var(--ink-text); }
.sale-preview p { font-size: var(--fs-sm); line-height: 1.5; margin-top: 2px; }
.variants-table .pack-col { display: none; }
.variants-table.show-pack .pack-col { display: table-cell; }
.vequiv { display: block; font-size: 11px; color: var(--text-3); margin-top: 3px; white-space: nowrap; }
.equiv { color: var(--orange-ink); font-weight: 500; }
.pack-col-hint.is-ok { color: var(--mint); font-weight: 500; }
.pack-col-hint.is-warn { color: #B87400; font-weight: 500; }
.carton-line { display: flex; gap: 8px; align-items: flex-start; margin: 0 16px 10px; padding: 10px 14px; border-radius: var(--r-sm); background: #F6EDE6; font-size: var(--fs-xs); color: var(--text-2); }
.carton-line .ic { color: var(--orange-ink); margin-top: 1px; }
.carton-line b { color: var(--text); }
@media (max-width: 720px) {
  .mode-cards, .mix-cards { grid-template-columns: minmax(0, 1fr); }
}
.pack-chip { display: inline-flex; align-items: center; gap: 3px; color: var(--orange-ink) !important; font-weight: 600; }
.pack-chip .ic { width: 13px; height: 13px; }
/* Portée d'un article, diagnostic commerçant, tableau de bord */
.reach { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 22px; border-top: 1px solid var(--line-2); font-size: var(--fs-sm); }
.panel-body .reach { padding: 0; border: 0; }
.reach > span:last-child { display: grid; gap: 2px; }
.reach small { color: var(--text-2); font-size: var(--fs-xs); }
.reach-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.reach.is-ok .reach-ic { background: var(--mint-50); color: var(--mint); }
.reach.is-off { background: var(--pome-50); }
.reach.is-off .reach-ic { background: #fff; color: var(--pomegranate); }
.reach.is-off strong { color: var(--pomegranate); }
.checks .is-warn .ck-ic { background: var(--saffron-50); color: var(--orange-ink); }
.ck-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.text-ok { color: var(--mint); font-weight: 600; }
.text-warn { color: var(--orange-ink); font-weight: 600; }
.fav-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--pome-50); color: var(--pomegranate); margin-left: 4px; }
.fav-mark .ic { fill: currentColor; }
.fav-mark.is-alert { background: var(--saffron-50); color: var(--orange-ink); }
.callout { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 18px; border-radius: var(--r-md); background: var(--cobalt-50); color: var(--cobalt); font-size: var(--fs-sm); }
.callout > span { flex: 1; }
.callout.is-warn { background: var(--saffron-50); color: var(--orange-ink); border: 1px solid #FFD0BC; }
.callout:hover { filter: brightness(.98); }
.demand { list-style: none; margin: 0; padding: 4px 0; }
.demand li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 22px; border-top: 1px solid var(--line-2); }
.demand li:first-child { border-top: 0; }
.dm-img { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); }
.dm-img img { width: 100%; height: 100%; object-fit: cover; }
.dm-txt { display: grid; gap: 3px; min-width: 0; color: var(--text); font-size: var(--fs-sm); }
.dm-txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-txt .tag { font-size: 11px; }
.dm-stats { display: flex; gap: 10px; font-size: var(--fs-xs); color: var(--text-2); }
.dm-stats span { display: inline-flex; align-items: center; gap: 3px; }
.dm-stats .is-alert { color: var(--orange-ink); font-weight: 600; }
.dm-stats .ic { width: 14px; height: 14px; }
@media (max-width: 560px) { .demand li { padding: 10px 16px; grid-template-columns: auto minmax(0, 1fr); } .dm-stats { grid-column: 2; } }

/* =====================================================================
   Espace partenaire — catalogue (v2)
   Principe : surfaces blanches et calmes, encre pour le texte et l'action,
   une seule couleur d'accent par information (menthe = gain, safran = arrivage).
   ===================================================================== */

/* ---------- En-tête du catalogue ---------- */
.cx-hero { position: relative; display: grid; gap: 24px; margin: 12px 0 22px; padding: 32px 34px; border-radius: 24px; color: #fff; overflow: hidden;
  background: var(--carbon); }
.cx-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: linear-gradient(30deg, #fff 1px, transparent 1px), linear-gradient(150deg, #fff 1px, transparent 1px); background-size: 34px 20px; mask-image: linear-gradient(90deg, transparent 30%, #000); }
.cx-hero.has-spot { grid-template-columns: minmax(0, 1fr) 320px; align-items: center; }
.cx-hero-main { position: relative; z-index: 1; display: grid; gap: 16px; }
.cx-eyebrow { font-size: var(--fs-sm); color: #F7C35C; font-weight: 500; letter-spacing: .01em; }
.cx-hero h1 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin-top: -8px; }
.cx-search { position: relative; display: flex; align-items: center; max-width: 620px; }
.cx-search .ic { position: absolute; left: 18px; color: var(--text-3); }
.cx-search input { width: 100%; height: 54px; border: 0; border-radius: 14px; padding: 0 18px 0 50px; font: 400 var(--fs-md) var(--font); color: var(--text); background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.cx-search input:focus { outline: 3px solid rgba(200,255,50,.7); outline-offset: 0; }
.cx-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-stats a { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: #C9CDEA; font-size: var(--fs-sm); transition: background .15s; }
.cx-stats a:hover { background: rgba(255,255,255,.14); color: #fff; }
.cx-stats b { color: #fff; font-size: var(--fs-md); font-weight: 600; }
.cx-spot { position: relative; z-index: 1; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.96); color: var(--text); box-shadow: 0 16px 40px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.cx-spot:hover { transform: translateY(-2px); color: var(--text); }
.cx-spot-img { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.cx-spot-img img { width: 100%; height: 100%; object-fit: cover; }
.cx-spot-txt { display: grid; gap: 4px; min-width: 0; }
.cx-spot-txt small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--orange-ink); text-transform: uppercase; letter-spacing: .06em; }
.cx-spot-txt small .ic { width: 12px; height: 12px; fill: var(--saffron); stroke: var(--saffron); }
.cx-spot-txt strong { font-size: var(--fs-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-spot-txt .num { font-weight: 700; font-size: var(--fs-md); }
.cx-spot-txt em { font-style: normal; font-weight: 400; font-size: var(--fs-xs); color: var(--text-3); }
.cx-spot-go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }

/* ---------- Catégories (onglets) ---------- */
.cx-cats { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.cx-cats a { flex: none; position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 0 13px; color: var(--text-2); font-weight: 500; font-size: var(--fs-md); white-space: nowrap; }
.cx-cats a small { font-size: 11px; color: var(--text-3); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.cx-cats a:hover { color: var(--text); }
.cx-cats a.is-active { color: var(--ink); }
.cx-cats a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--ink); }
.cx-cats a.is-active small { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Filtres et tri ---------- */
.cx-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.cx-filters { display: flex; gap: 8px; min-width: 0; }
.cx-filter { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; transition: all .15s; }
.cx-filter .ic { width: 15px; height: 15px; color: var(--text-3); }
.cx-filter:hover { border-color: #CDD1D8; color: var(--text); }
.cx-filter.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cx-filter.is-on .ic { color: #fff; }
.cx-sort label { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-3); }
.cx-sort .ic { position: absolute; right: 12px; pointer-events: none; color: var(--text-2); }
.cx-sort select { height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 0 36px 0 14px; font: 500 var(--fs-sm) var(--font); color: var(--text); appearance: none; cursor: pointer; }
.cx-sort select:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-50); }
.cx-results { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 16px; font-size: var(--fs-sm); color: var(--text-2); }
.cx-results strong { color: var(--text); }
.cx-results a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-weight: 500; }
.cx-results a:hover { color: var(--pomegranate); }

/* ---------- Grille d'articles ---------- */
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); gap: 22px 18px; }
.cx-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.cx-media { position: relative; display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #ECEDE8; }
.cx-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cx-card:hover .cx-media img { transform: scale(1.035); }
.cx-card.is-out .cx-media img { filter: grayscale(.8); opacity: .7; }
.cx-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.cx-badge { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 600; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(17,19,24,.12); }
.cx-badge.is-new { background: var(--ink); color: #fff; }
.cx-badge.is-star { background: #fff; color: var(--orange-ink); }
.cx-badge.is-soon { background: var(--orange-50); color: var(--orange-ink); }
.cx-badge.is-out { background: #fff; color: var(--pomegranate); }
.cx-vid { position: absolute; left: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(17,19,24,.7); color: #fff; backdrop-filter: blur(4px); }
.cx-vid .ic { width: 13px; height: 13px; fill: currentColor; stroke: none; margin-left: 2px; }
.cx-fav { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.94); color: var(--text-2); box-shadow: 0 2px 8px rgba(17,19,24,.14); transition: transform .15s, color .15s; }
.cx-fav:hover { color: var(--pomegranate); }
.cx-fav:active { transform: scale(.9); }
.fav-btn.is-on { color: var(--pomegranate); }
.fav-btn.is-on .ic { fill: currentColor; }
.fav-btn.pop .ic { animation: fav-pop .35s var(--ease); }
@keyframes fav-pop { 40% { transform: scale(1.35); } }
.cx-info { display: grid; gap: 3px; padding: 12px 4px 0; color: var(--text); }
.cx-info:hover { color: var(--text); }
.cx-cat { font-size: 11.5px; color: var(--text-3); letter-spacing: .01em; }
.cx-name { font-size: var(--fs-md); font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-card:hover .cx-name { color: var(--cobalt); }
.cx-price { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.cx-price b { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.cx-price b small { font-size: .8rem; font-weight: 600; letter-spacing: 0; }
.cx-price > span { font-size: var(--fs-xs); color: var(--text-3); }
.cx-sub { font-size: var(--fs-xs); color: var(--text-2); }
.cx-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--line-2); font-size: var(--fs-xs); }
.cx-stock { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.cx-stock::before, .px-dot { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.cx-stock.is-ok::before, .px-dot.is-ok { background: var(--mint); box-shadow: 0 0 0 3px var(--mint-50); }
.cx-stock.is-soon::before, .px-dot.is-soon { background: var(--saffron); box-shadow: 0 0 0 3px var(--saffron-50); }
.cx-stock.is-out::before, .px-dot.is-out { background: var(--pomegranate); box-shadow: 0 0 0 3px var(--pome-50); }
.cx-margin { font-weight: 600; color: var(--mint); white-space: nowrap; }
.more-wrap { display: flex; justify-content: center; padding: 30px 0 8px; }
.more-wrap .btn { min-width: 220px; border-radius: 999px; }
.cx-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 64px 24px; background: var(--surface); border-radius: 24px; }
.cx-empty.is-small { padding: 44px 24px; }
.cx-empty h2 { font-size: var(--fs-xl); }
.cx-empty p { color: var(--text-2); max-width: 420px; }
.cx-empty-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--cobalt-50); color: var(--cobalt); }

/* ---------- Fiche article ---------- */
.px-crumbs { display: flex; align-items: center; gap: 8px; margin: 10px 0 18px; font-size: var(--fs-sm); color: var(--text-3); }
.px-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 500; }
.px-crumbs a:hover { color: var(--ink); }
.px { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 44px; align-items: start; }

/* Galerie : hauteur fixe, photos entières quel que soit leur format */
.px-gallery { position: sticky; top: calc(var(--topbar-h) + 14px); display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; min-width: 0; }
.px-gallery:not(:has(.px-thumbs)) { grid-template-columns: minmax(0, 1fr); }
.px-thumbs { display: flex; flex-direction: column; gap: 10px; max-height: min(66vh, 600px); overflow-y: auto; scrollbar-width: none; padding: 2px; }
.px-thumbs::-webkit-scrollbar { display: none; }
.px-thumb { flex: none; width: 64px; height: 64px; padding: 0; border-radius: 12px; overflow: hidden; border: 0; cursor: pointer; background: #ECEDE8; display: grid; place-items: center; color: var(--text-2); opacity: .55; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .15s, outline-color .15s; }
.px-thumb img { width: 100%; height: 100%; object-fit: cover; }
.px-thumb:hover { opacity: .9; }
.px-thumb.is-on { opacity: 1; outline-color: var(--ink); }
.px-thumb.is-video { background: var(--ink); color: #fff; }
.px-thumb.is-video .ic { fill: currentColor; stroke: none; }
.px-stage-wrap { position: relative; min-width: 0; }
.px-stage { display: flex; height: min(66vh, 600px); border-radius: 22px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; background: #ECEDE8; }
.px-stage::-webkit-scrollbar { display: none; }
.px-slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; display: grid; place-items: center; overflow: hidden; }
.px-slide::before { content: ""; position: absolute; inset: -40px; background: var(--img) center / cover no-repeat; filter: blur(36px) saturate(1.1); opacity: .45; }
.px-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.px-slide.is-video { background: var(--ink); }
.px-slide.is-video video, .px-slide.is-video iframe { position: relative; width: 100%; height: 100%; border: 0; background: #000; }
.px-slide.is-empty { color: var(--text-3); gap: 8px; align-content: center; font-size: var(--fs-sm); }
.video-poster { position: absolute; inset: 0; border: 0; padding: 0; background: var(--ink); cursor: pointer; display: grid; place-items: center; }
.video-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.px-slide .play { position: relative; width: 74px; height: 74px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .2s; }
.video-poster:hover .play { transform: scale(1.07); }
.px-slide .play .ic { width: 28px; height: 28px; fill: currentColor; stroke: none; margin-left: 4px; }
.video-link { position: relative; display: grid; justify-items: center; gap: 8px; color: #fff; text-align: center; }
.video-link small { color: var(--ink-text); }
.video-link .play .ic { fill: none; stroke: currentColor; margin: 0; }
.px-nav { position: absolute; top: 50%; translate: 0 -50%; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px rgba(17,19,24,.16); opacity: 0; transition: opacity .2s; }
.px-stage-wrap:hover .px-nav { opacity: 1; }
.px-nav[disabled] { opacity: 0 !important; pointer-events: none; }
.px-nav.is-prev { left: 14px; } .px-nav.is-next { right: 14px; }
.px-count { position: absolute; left: 14px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(17,19,24,.7); color: #fff; font-size: var(--fs-xs); backdrop-filter: blur(4px); }
.px-fav { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #fff; color: var(--text-2); cursor: pointer; box-shadow: 0 4px 14px rgba(17,19,24,.14); }
.px-fav:hover { color: var(--pomegranate); }

/* Infos */
.px-info { display: grid; gap: 18px; min-width: 0; padding-top: 4px; }
.px-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .02em; }
.px-meta > span + span::before { content: "·"; margin-right: 10px; }
.px-new { color: var(--ink); font-weight: 600; }
.px-info h1 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); font-weight: 600; line-height: 1.18; letter-spacing: -.025em; margin-top: -8px; }
.px-lead { color: var(--text-2); font-size: var(--fs-md); line-height: 1.6; margin-top: -6px; }
.px-buy { display: grid; gap: 14px; padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 1px 2px rgba(17,19,24,.04), 0 16px 40px -24px rgba(17,19,24,.25); }
.px-price { display: grid; }
.px-label { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }
.px-amount { font-size: 2.7rem; font-weight: 700; letter-spacing: -.035em; color: var(--ink); line-height: 1.1; }
.px-amount small { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.px-per { font-size: var(--fs-sm); color: var(--text-2); }
.px-pack { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.px-pack-ic { width: 38px; height: 38px; border-radius: 11px; background: #fff; display: grid; place-items: center; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.px-pack-txt { display: grid; gap: 1px; font-size: var(--fs-sm); }
.px-pack-txt small { color: var(--text-2); font-size: var(--fs-xs); }
.px-pack-txt em { font-style: normal; color: var(--mint); font-weight: 700; }
.px-pack > b { font-size: var(--fs-md); color: var(--ink); }
.px-gain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.px-gain > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); }
.px-gain small { font-size: var(--fs-xs); color: var(--text-3); }
.px-gain b { font-size: var(--fs-md); color: var(--text); }
.px-gain .is-margin { background: var(--mint-50); border-color: transparent; }
.px-gain .is-margin small { color: #2C7A5F; }
.px-gain .is-margin b { color: #0B6E50; }
.px-gain em { font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--mint); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 2px; }
.px-cta { display: grid; gap: 10px; }
.px-order { --b-bg: var(--ink); --b-fg: #fff; --b-bd: var(--ink); border-radius: 14px; }
.px-order:hover { --b-bg: var(--graphite); --b-bd: var(--graphite); color: #fff; }
.px-order .ic { color: #3FD07A; }
.notify-toggle { border-radius: 14px; }
.notify-toggle.is-on { --b-bg: var(--saffron-50); --b-bd: #FFD0BC; --b-fg: var(--orange-ink); }
.notify-toggle.is-on .ic { fill: currentColor; }
.px-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.px-facts li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.px-facts li > span:last-child { display: grid; }
.px-facts strong { color: var(--text); font-weight: 600; }
.px-facts small { color: var(--text-3); font-size: var(--fs-xs); }
.px-facts .ic { color: var(--text-3); margin-top: 2px; flex: none; }
.px-facts .px-dot { margin: 7px 4px 0 4px; }

/* Onglets de section */
.px-tabs { position: sticky; top: var(--topbar-h); z-index: 5; display: flex; gap: 28px; margin: 44px 0 0; padding: 0 2px; border-bottom: 1px solid var(--line); background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.px-tabs a { position: relative; flex: none; padding: 14px 0; color: var(--text-2); font-weight: 500; }
.px-tabs a small { font-size: 11px; color: var(--text-3); margin-left: 3px; }
.px-tabs a.is-on, .px-tabs a:hover { color: var(--ink); }
.px-tabs a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--ink); }
.px-section { padding: 34px 0 6px; scroll-margin-top: calc(var(--topbar-h) + 60px); }
.px-section > header { margin-bottom: 18px; }
.px-section h2 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em; }
.px-section > header p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 4px; }

/* Variantes */
.px-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.px-var { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); }
.px-var.is-out { opacity: .5; }
.px-sw { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(17,19,24,.12); }
.px-var-txt { display: grid; flex: 1; min-width: 0; }
.px-var-txt strong { font-size: var(--fs-sm); font-weight: 600; }
.px-var-txt small { font-size: var(--fs-xs); color: var(--text-2); }
.px-var > b { font-size: var(--fs-sm); }

/* Kit de vente */
.px-kit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.px-kit-card { display: grid; align-content: start; gap: 16px; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-2); }
.px-kit-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.px-kit-head small { grid-column: 2; font-size: var(--fs-xs); color: var(--text-3); }
.px-step { grid-row: span 2; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 600; font-size: var(--fs-sm); }
.px-kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(92px, 100%), 1fr)); gap: 8px; }
.px-kit-ph { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #ECEDE8; }
.px-kit-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.px-kit-ph span { position: absolute; inset: auto 6px 6px auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(17,19,24,.18); }
.px-kit-ph:hover img { transform: scale(1.05); }
.px-kit-ph:hover span { background: var(--ink); color: #fff; }
.px-kit-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.px-copy { padding: 16px 18px; border-radius: 14px; background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.7; color: var(--text); max-height: 260px; overflow: auto; }

/* Détails */
.px-details { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.px-desc { color: var(--text-2); line-height: 1.75; }
.px-specs { margin: 0; padding: 6px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); }
.px-specs div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: var(--fs-sm); }
.px-specs div:first-child { border-top: 0; }
.px-specs dt { color: var(--text-3); }
.px-specs dd { margin: 0; font-weight: 500; text-align: right; }

/* Barre d'achat mobile */
.buy-bar { display: none; }
.gallery-dots { display: none; justify-content: center; gap: 6px; margin-top: 12px; }
.gallery-dots i { width: 6px; height: 6px; border-radius: 3px; background: #C9CEDA; transition: all .2s; }
.gallery-dots i.is-on { width: 18px; background: var(--ink); }

@media (max-width: 1100px) {
  .px { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .px-gallery { position: static; }
  .px-kit, .px-details { grid-template-columns: minmax(0, 1fr); }
  .cx-hero.has-spot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .buy-bar { display: flex; position: fixed; z-index: 39; left: 10px; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 18px; border-radius: 18px; background: rgba(255,255,255,.97); border: 1px solid var(--line-2); box-shadow: 0 12px 30px rgba(17,19,24,.18); backdrop-filter: blur(8px); }
  .buy-bar span { display: grid; line-height: 1.2; }
  .buy-bar b { font-size: var(--fs-lg); color: var(--ink); }
  .buy-bar small { color: var(--text-3); font-size: var(--fs-xs); }
  .content:has(.buy-bar) { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  body:has(.buy-bar) .toasts { bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
  .cx-hero { margin: 6px -16px 18px; padding: 24px 16px 20px; border-radius: 0 0 24px 24px; }
  .cx-search input { height: 50px; }
  .cx-cats { gap: 22px; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .cx-toolbar { gap: 8px; margin-right: -4px; }
  .cx-filters { margin-left: -16px; padding-left: 16px; flex: 1; }
  .cx-sort select { width: 40px; padding: 0; color: transparent; }
  .cx-sort select option { color: var(--text); }
  .cx-sort .ic { right: 12px; }
  .cx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .cx-media { border-radius: 14px; }
  .cx-fav { width: 32px; height: 32px; top: 8px; right: 8px; }
  .cx-badge { left: 8px; top: 8px; font-size: 10.5px; padding: 4px 8px; }
  .cx-name { font-size: var(--fs-sm); }
  .cx-price b { font-size: 1.1rem; }
  .cx-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  .px-crumbs { margin-bottom: 12px; }
  .px-gallery { grid-template-columns: minmax(0, 1fr); margin: 0 -16px; }
  .px-thumbs { display: none; }
  .px-stage { height: auto; aspect-ratio: 1; border-radius: 0; }
  .px-nav { display: none; }
  .gallery-dots { display: flex; }
  .px-count { left: auto; right: 14px; bottom: 14px; }
  .px-buy { padding: 18px; border-radius: 18px; }
  .px-amount { font-size: 2.25rem; }
  .px-tabs { margin: 30px -16px 0; padding: 0 16px; gap: 22px; }
  .px-section h2 { font-size: var(--fs-lg); }
  .px-variants { grid-template-columns: minmax(0, 1fr); }
  .px-kit-card { padding: 18px; }
}
.arrivals { display: grid; gap: 26px; }
.arr-head { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); margin-bottom: 12px; }
.arr-head small { font-size: var(--fs-xs); color: var(--text-3); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 8px; }
.arr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 4px var(--saffron-50); }
.arr-list { list-style: none; margin: 0; padding: 0 0 0 5px; display: grid; gap: 10px; border-left: 2px dashed #FFD0BC; }
.arr-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-left: 16px; padding: 10px 14px 10px 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); }
.arr-img { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); }
.arr-img img { width: 100%; height: 100%; object-fit: cover; }
.arr-txt { display: grid; gap: 3px; color: var(--text); min-width: 0; justify-items: start; }
.arr-txt strong { font-size: var(--fs-sm); }
.arr-txt small { color: var(--text-3); font-size: var(--fs-xs); }
.arr-txt .tag { font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.arr-txt .tag .ic { width: 12px; height: 12px; }
.onboarding-ic.is-pome { background: var(--pome-50); color: var(--pomegranate); }
.onboarding-ic.is-saffron { background: var(--saffron-50); color: var(--orange-ink); }
@media (max-width: 720px) { .arr-item { grid-template-columns: auto minmax(0, 1fr); } .arr-item .notify-toggle { grid-column: 1 / -1; } }
.px-pack-txt em, .px-gain em, .px-gain b { white-space: nowrap; }
@media (max-width: 900px) {
  .buy-bar { transition: transform .25s var(--ease), opacity .25s; }
  .buy-bar.is-hidden { transform: translateY(20px); opacity: 0; pointer-events: none; }
}
@media (max-width: 720px) {
  .px-pack { grid-template-columns: auto minmax(0, 1fr); }
  .px-pack > b { grid-column: 2; }
  .px-gain b { font-size: var(--fs-sm); }
}


/* =====================================================================
   IDENTITÉ 2ENGROS — Carbon / Lime / Orange, Poppins + Inter
   (surcouche : prend le pas sur les règles précédentes)
   ===================================================================== */
:root { --logo-text: var(--carbon); --logo-face: var(--graphite); }
body { font-family: var(--font); }
h1, h2, h3, h4, .btn, .num, .ledger dd, .chip, .tabbar a, .brand-space, .cx-filter, .cx-cats a, .px-tabs a, .subnav a, .tag-lg, .pin-key { font-family: var(--font-display); }
h1 { font-weight: 700; letter-spacing: -.025em; }
h2, h3 { font-weight: 600; letter-spacing: -.015em; }
a { color: var(--carbon); }
a:hover { color: var(--lime-ink); }
:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }
::selection { background: var(--lime); color: var(--carbon); }
.ic { stroke-width: 1.8; }

/* Logo */
.brand { gap: 10px; align-items: center; }
.brand-logo { height: 30px; width: auto; display: block; flex: none; }
.brand-space { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; padding: 4px 8px; border-radius: 6px; background: var(--lime); color: var(--carbon); line-height: 1; }
.sidebar, .auth-side, .cx-hero, .offline-dark { --logo-text: #F5F5EF; --logo-face: #F5F5EF; }
.sidebar .brand { padding: 6px 10px 20px; }

/* Boutons */
.btn { font-weight: 500; border-radius: 12px; }
.btn-primary { --b-bg: var(--lime); --b-fg: var(--carbon); --b-bd: var(--lime); font-weight: 600; }
.btn-primary:hover { --b-bg: var(--lime-600); --b-bd: var(--lime-600); color: var(--carbon); }
.btn-dark { --b-bg: var(--carbon); --b-fg: #fff; --b-bd: var(--carbon); }
.btn-dark:hover { --b-bg: var(--graphite); --b-bd: var(--graphite); color: #fff; }
.btn-promo { --b-bg: var(--orange); --b-fg: #fff; --b-bd: var(--orange); font-weight: 600; }
.btn:hover { --b-bd: #CDD1D8; }
.btn-primary:hover, .btn-dark:hover, .btn-promo:hover { --b-bd: var(--b-bg); }

/* Navigation */
.sidebar { background: var(--carbon); }
.nav-group > span { color: #6B707C; letter-spacing: .02em; }
.nav a { border-radius: 12px; font-weight: 500; }
.nav a:hover { background: var(--ink-2); color: #fff; }
.nav a.is-active { background: var(--lime); color: var(--carbon); font-weight: 600; }
.nav a.is-active::before { display: none; }
.nav a.is-active .ic { stroke-width: 2.1; }
.nav a .count { background: var(--orange); color: #fff; border-radius: 999px; }
.install-card { background: var(--graphite); }
.install-card .btn { --b-bg: var(--lime); --b-bd: var(--lime); --b-fg: var(--carbon); }
.tabbar a.is-active { color: var(--carbon); position: relative; }
.tabbar a.is-active::before { content: ""; position: absolute; top: -7px; left: 32%; right: 32%; height: 3px; border-radius: 0 0 3px 3px; background: var(--lime); }
.tabbar a.is-active .ic { stroke-width: 2.2; }
.nav-progress { background: var(--lime) !important; }
.subnav a.is-active { color: var(--carbon); }
.subnav a.is-active::after { background: var(--lime) !important; height: 3px !important; }

/* Étiquettes : pastilles arrondies */
.tag, .tag-lg { clip-path: none; border-radius: 999px; padding: 3px 10px; }
.tag-lg { padding: 5px 14px; }
.tag::before { margin-left: 0; }
.tag.is-info { --tag-bg: var(--lime-50); --tag-fg: var(--lime-ink); }
.tag.is-incoming { --tag-bg: var(--orange-50); --tag-fg: var(--orange-ink); }

/* Cartes, panneaux, chiffres */
.panel { border-radius: 20px; border-color: #ECEEF1; box-shadow: 0 1px 2px rgba(17,19,24,.03); }
.onboarding-ic, .cx-empty-ic { clip-path: none; border-radius: 16px; background: var(--lime); color: var(--carbon); }
.ledger { background: transparent; border: 0; gap: 14px; }
.ledger > div { background: var(--surface); border: 1px solid #ECEEF1 !important; border-radius: 18px; padding: 18px 20px; }
.ledger dt { gap: 12px; font-weight: 500; }
.ledger dt .ic { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--lime); color: var(--carbon); }
.ledger > div:nth-child(2) dt .ic { background: var(--orange-50); color: var(--orange-ink); }
.ledger > div:nth-child(3) dt .ic { background: var(--carbon); color: var(--lime); }
.ledger > div:nth-child(4) dt .ic { background: var(--pome-50); color: var(--pomegranate); }
.ledger dd { font-weight: 700; margin-top: 12px; }
.chip.is-active { background: var(--carbon); border-color: var(--carbon); }
.avatar { background: var(--lime); color: var(--carbon); }
.callout { background: var(--lime-50); color: var(--carbon); }
.callout.is-warn { background: var(--orange-50); color: var(--orange-ink); border-color: #FFD0BC; }

/* Connexion */
.auth-side { background: var(--carbon); }
.auth-side::before { content: ""; position: absolute; right: 0; bottom: 0; width: 46%; height: 44%; background: var(--lime); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: .95; z-index: 0; }
.auth-side::after { opacity: .04; }
.auth-pitch h1 strong { color: var(--lime); }
.manifest-item { clip-path: none; border-radius: 14px; background: var(--ink-2); }
.manifest-item:nth-child(3) { background: var(--graphite); }
.manifest-item .eta { color: var(--lime); }
.pin-dots i.is-on { background: var(--carbon); border-color: var(--carbon); }
.pin-key:active, .pin-key.is-pressed { background: var(--lime); color: var(--carbon); }

/* Catalogue commerçant */
.cx-hero::before { content: ""; position: absolute; right: 0; bottom: 0; width: 34%; height: 70%; background: var(--lime); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.cx-hero::after { opacity: .05; }
.cx-hero.has-spot::before { width: 30%; height: 62%; }
.cx-eyebrow { color: var(--lime); }
.cx-hero h1 strong { color: var(--lime); }
.cx-stats a { background: rgba(255,255,255,.07); }
.cx-stats b { color: var(--lime); }
.cx-spot { box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.cx-spot-go { background: var(--lime); color: var(--carbon); }
.cx-spot-txt small { color: var(--orange-ink); }
.cx-spot-txt small .ic { fill: var(--orange); stroke: var(--orange); }
.cx-cats a.is-active::after { background: var(--lime); height: 3px; }
.cx-cats a.is-active small { background: var(--lime); border-color: var(--lime); color: var(--carbon); }
.cx-badge.is-new { background: var(--lime); color: var(--carbon); }
.cx-badge.is-star { background: var(--orange); color: #fff; }
.cx-badge.is-soon { background: var(--orange-50); color: var(--orange-ink); }
.cx-margin { color: var(--lime-ink); }
.cx-card:hover .cx-name { color: var(--carbon); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cx-price b { font-family: var(--font-display); }
.cx-media, .px-stage, .px-thumb, .px-kit-ph { background: #ECEDE8; }

/* Fiche article */
.px-new { color: var(--lime-ink); }
.px-amount { font-family: var(--font-display); }
.px-order { --b-bg: var(--lime); --b-fg: var(--carbon); --b-bd: var(--lime); font-weight: 600; }
.px-order:hover { --b-bg: var(--lime-600); --b-bd: var(--lime-600); color: var(--carbon); }
.px-order .ic { color: var(--carbon); }
.px-pack-ic { color: var(--orange-ink); }
.px-pack-txt em { color: var(--orange-ink); }
.px-gain .is-margin { background: var(--lime-50); }
.px-gain .is-margin small { color: var(--lime-ink); }
.px-gain .is-margin b { color: var(--carbon); }
.px-gain em { background: var(--lime); color: var(--carbon); }
.px-step { background: var(--lime); color: var(--carbon); }
.px-tabs a.is-on::after { background: var(--lime); height: 3px; }
.px-thumb.is-on { outline-color: var(--carbon); }
.gallery-dots i.is-on { background: var(--carbon); }
.notify-toggle.is-on { --b-bg: var(--orange-50); --b-bd: #FFD0BC; --b-fg: var(--orange-ink); }
.arr-dot { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-50); }
.arr-list { border-left-color: #FFD0BC; }
.pv-band { background: var(--carbon); position: relative; overflow: hidden; }
.pv-band::after { content: ""; position: absolute; right: 0; bottom: 0; width: 45%; height: 100%; background: var(--g, var(--lime)); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.steps-visual li.is-current .sv-ic { background: var(--lime); color: var(--carbon); box-shadow: 0 8px 18px -6px rgba(17,19,24,.35); }
.notif-list li.is-unread { background: linear-gradient(90deg, var(--lime-50), transparent 60%); }

/* =====================================================================
   CATALOGUE COMMERÇANT — v3 (en-tête sobre, filtres latéraux, vignettes éditoriales)
   ===================================================================== */
.sh-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 460px); gap: 24px; align-items: end; padding: 14px 0 26px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.sh-kicker { font-size: var(--fs-sm); color: var(--text-3); font-weight: 500; }
.sh-kicker .sep, .sh-sub .sep { margin: 0 6px; opacity: .6; }
.sh-title h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.05; letter-spacing: -.035em; margin: 6px 0 8px; }
.sh-sub { color: var(--text-2); font-size: var(--fs-md); }
.sh-sub a { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sh-search { position: relative; display: flex; align-items: center; }
.sh-search .ic { position: absolute; left: 18px; color: var(--text-3); pointer-events: none; }
.sh-search input { width: 100%; height: 52px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 22px 0 50px; font: 400 var(--fs-md) var(--font); color: var(--text); transition: border-color .15s, box-shadow .15s; }
.sh-search input:focus { outline: none; border-color: var(--carbon); box-shadow: 0 0 0 4px var(--lime-50); }

/* Étagère « Sélection 2engros » */
.sh-shelf { margin-bottom: 40px; }
.sh-shelf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 16px; }
.sh-shelf-head h2 { font-size: var(--fs-lg); }
.sh-shelf-head p { color: var(--text-3); font-size: var(--fs-sm); margin-top: 2px; }
.sh-arrows { display: flex; gap: 8px; }
.sh-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--carbon); display: grid; place-items: center; cursor: pointer; transition: all .15s; }
.sh-arrow:hover { background: var(--carbon); border-color: var(--carbon); color: #fff; }
.sh-arrow[disabled] { opacity: .35; pointer-events: none; }
.sh-shelf-row { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.sh-shelf-row::-webkit-scrollbar { display: none; }
.sh-shelf-row .pc { flex: 0 0 232px; scroll-snap-align: start; }

/* Mise en page : filtres + résultats */
.sh-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 44px; align-items: start; }
.sh-filters { position: sticky; top: calc(var(--topbar-h) + 18px); max-height: calc(100vh - var(--topbar-h) - 36px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.sf-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; }
.sf-head strong { font: 700 var(--fs-md) var(--font-display); margin-right: auto; }
.sf-head a { font-size: var(--fs-sm); color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.sf-close, .sf-apply { display: none; }
.sf-group { border: 0; margin: 0; padding: 18px 0 20px; border-top: 1px solid var(--line); min-width: 0; }
.sf-group legend { float: left; width: 100%; padding: 0; margin-bottom: 12px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.sf-group legend + * { clear: both; }
.sf-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; margin: 0 -12px; border-radius: 10px; cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); transition: background .12s, color .12s; }
.sf-opt input, .sf-seg input, .sf-check input { position: absolute; opacity: 0; pointer-events: none; }
.sf-opt:hover { background: rgba(17,19,24,.04); color: var(--text); }
.sf-opt small { font-size: 12px; color: var(--text-3); }
.sf-opt:has(input:checked) { background: var(--surface); color: var(--carbon); font-weight: 600; box-shadow: inset 3px 0 0 var(--lime), 0 1px 3px rgba(17,19,24,.06); }
.sf-opt:has(input:focus-visible), .sf-seg label:has(input:focus-visible), .sf-check:has(input:focus-visible) { outline: 2px solid var(--carbon); outline-offset: 1px; }
.sf-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; border-radius: 12px; background: #EAEAE3; }
.sf-seg label { cursor: pointer; }
.sf-seg span { display: block; text-align: center; padding: 8px 4px; border-radius: 9px; font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: all .15s; }
.sf-seg label:hover span { color: var(--text); }
.sf-seg input:checked + span { background: var(--surface); color: var(--carbon); font-weight: 600; box-shadow: 0 1px 3px rgba(17,19,24,.1); }
.sf-range { display: grid; grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr); gap: 8px; align-items: center; }
.sf-range label { position: relative; display: block; }
.sf-range .input { height: 42px; padding: 0 34px 0 12px; border-radius: 10px; font-size: var(--fs-sm); }
.sf-range em { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font-style: normal; font-size: 11px; color: var(--text-3); pointer-events: none; }
.sf-dash { height: 1.5px; background: var(--line); }
.sf-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); }
.sf-check:hover { color: var(--text); }
.sf-check small { font-size: 12px; color: var(--text-3); }
.sf-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #C9CDD5; background: var(--surface); display: grid; place-items: center; color: transparent; transition: all .12s; }
.sf-box .ic { width: 13px; height: 13px; stroke-width: 3; }
.sf-check input:checked ~ .sf-box { background: var(--lime); border-color: var(--lime); color: var(--carbon); }
.sf-check input:checked ~ .sf-lbl { color: var(--carbon); font-weight: 600; }

/* Barre de résultats */
.sh-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; min-height: 40px; }
.sh-filter-btn { display: none; border-radius: 999px; }
.sh-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--lime); color: var(--carbon); font-size: 11px; font-weight: 700; }
.sh-total { margin-right: auto; color: var(--text-2); font-size: var(--fs-sm); }
.sh-total strong { color: var(--text); }
.sh-sort label { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--text-3); }
.sh-select { position: relative; display: inline-flex; align-items: center; }
.sh-select select { height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 0 40px 0 16px; font: 500 var(--fs-sm) var(--font); color: var(--text); appearance: none; cursor: pointer; }
.sh-select select:focus { outline: none; border-color: var(--carbon); box-shadow: 0 0 0 3px var(--lime-50); }
.sh-select .ic { position: absolute; right: 14px; pointer-events: none; color: var(--text-2); }
.sh-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 22px; }
.sh-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--carbon); color: #fff; font-size: var(--fs-sm); font-weight: 500; }
.sh-pill:hover { background: var(--graphite); color: #fff; }
.sh-pill .ic { width: 14px; height: 14px; opacity: .7; }
.sh-clear { font-size: var(--fs-sm); color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }

/* Grille et vignettes */
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(228px, 100%), 1fr)); gap: 36px 22px; }
.pc { position: relative; display: flex; flex-direction: column; min-width: 0; }
.pc-media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #EEEEE8; isolation: isolate; }
.pc-img, .pc-img2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease), transform .9s var(--ease); }
.pc-img2 { opacity: 0; }
.pc:hover .pc-img, .pc:hover .pc-img2 { transform: scale(1.035); }
.pc.has-alt:hover .pc-img2 { opacity: 1; }
.pc.is-out .pc-img { filter: grayscale(.85); opacity: .7; }
.pc-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.pc-badges { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 1; }
.pc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font: 600 11px/1 var(--font-display); letter-spacing: .01em; background: rgba(255,255,255,.95); color: var(--carbon); box-shadow: 0 2px 8px rgba(17,19,24,.1); }
.pc-badge .ic { width: 11px; height: 11px; }
.pc-badge.is-new { background: var(--lime); }
.pc-badge.is-star { background: var(--carbon); color: #fff; }
.pc-badge.is-star .ic { fill: var(--lime); stroke: var(--lime); }
.pc-badge.is-soon { color: var(--orange-ink); }
.pc-badge.is-out { background: var(--carbon); color: #fff; }
.pc-media-tags { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 1; transition: opacity .2s; }
.pc-media-tags span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(17,19,24,.72); color: var(--lime); backdrop-filter: blur(6px); }
.pc-media-tags span .ic { width: 14px; height: 14px; }
.pc-media-tags .is-video { color: #fff; }
.pc-media-tags .is-video .ic { fill: currentColor; stroke: none; margin-left: 2px; }
.pc-cta { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.96); color: var(--carbon); font: 600 13px var(--font-display); box-shadow: 0 6px 18px rgba(17,19,24,.14); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease); }
.pc:hover .pc-cta { opacity: 1; transform: none; }
.pc:hover .pc-media-tags { opacity: 0; }
@media (hover: none) { .pc-cta { display: none; } .pc:hover .pc-media-tags { opacity: 1; } }
.pc-fav { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.95); color: var(--text-2); box-shadow: 0 2px 8px rgba(17,19,24,.12); transition: transform .15s, color .15s; }
.pc-fav:hover { color: var(--pomegranate); }
.pc-fav:active { transform: scale(.9); }
.pc-body { display: grid; gap: 5px; padding: 14px 2px 0; color: var(--text); }
.pc-body:hover { color: var(--text); }
.pc-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-3); min-width: 0; }
.pc-meta > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-stock { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
.pc-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.pc-stock.is-ok::before { background: var(--mint); }
.pc-stock.is-soon::before { background: var(--orange); }
.pc-stock.is-out::before { background: var(--pomegranate); }
.pc-name { font: 500 15px/1.38 var(--font); letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.76em; }
.pc:hover .pc-name { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pc-price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.pc-price b { font: 700 1.3rem var(--font-display); letter-spacing: -.02em; color: var(--carbon); }
.pc-price b small { font-size: .72em; font-weight: 600; letter-spacing: 0; }
.pc-price > span { font-size: 12px; color: var(--text-3); }
.pc-margin { margin-left: auto; align-self: center; font: 600 11.5px var(--font-display); font-style: normal; color: var(--lime-ink); background: var(--lime-50); padding: 3px 8px; border-radius: 999px; }
.pc-sub { font-size: 12.5px; color: var(--text-2); }

/* Plus de résultats */
.sh-more { display: grid; justify-items: center; gap: 12px; padding: 44px 0 10px; color: var(--text-2); font-size: var(--fs-sm); }
.sh-progress { width: 180px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sh-progress i { display: block; height: 100%; background: var(--carbon); border-radius: 3px; transition: width .4s; }
.sh-more .btn { border-radius: 999px; min-width: 240px; }

.sh-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 72px 24px; background: var(--surface); border-radius: 24px; border: 1px solid var(--line-2); }
.sh-empty.is-small { padding: 56px 24px; }
.sh-empty h2 { font-size: var(--fs-xl); }
.sh-empty p { color: var(--text-2); max-width: 400px; }
.sh-empty-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--lime); color: var(--carbon); }
.sh-scrim { display: none; }

@media (max-width: 1100px) {
  .sh-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
  .sh-layout { grid-template-columns: minmax(0, 1fr); }
  .sh-filter-btn { display: inline-flex; }
  .sh-filters { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; top: auto; max-height: 88vh; max-height: 88dvh; padding: 0 20px; border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: 0 -12px 40px rgba(17,19,24,.25); transform: translateY(105%); transition: transform .3s var(--ease); overflow-y: auto; }
  .sh-filters.is-open { transform: none; }
  .sf-head { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 18px 0 14px; }
  .sf-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--line); }
  .sf-close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text); cursor: pointer; }
  .sf-apply { display: block; position: sticky; bottom: 0; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line-2); }
  body.sheet-open { overflow: hidden; }
  body.sheet-open .sh-scrim { display: block; position: fixed; inset: 0; z-index: 75; background: rgba(17,19,24,.5); }
}
@media (max-width: 720px) {
  .sh-head { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 8px 0 18px; margin-bottom: 22px; }
  .sh-title h1 { font-size: 1.9rem; }
  .sh-shelf-row .pc { flex-basis: 64%; }
  .sh-arrows { display: none; }
  .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .pc-media { border-radius: 14px; }
  .pc-fav { width: 32px; height: 32px; top: 8px; right: 8px; }
  .pc-badges { left: 8px; top: 8px; }
  .pc-media-tags { left: 8px; bottom: 8px; }
  .pc-meta > span:first-child { display: none; }
  .pc-name { font-size: 14px; }
  .pc-price { flex-wrap: wrap; row-gap: 2px; }
  .pc-price b { font-size: 1.1rem; }
  .pc-margin { margin-left: 0; }
  .pc-sub { font-size: 12px; }
  .sh-sort label { gap: 0; }
}

/* =====================================================================
   NOTES VOCALES
   ===================================================================== */
.vn { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 20px 16px 16px; border-radius: 22px; background: var(--carbon); color: #fff; overflow: hidden; isolation: isolate; }
.vn::before { content: ""; position: absolute; z-index: -1; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(200,255,50,.18), transparent 65%); }
.vn-play { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--lime); color: var(--carbon); cursor: pointer; transition: transform .15s; }
.vn-play:hover { transform: scale(1.05); }
.vn-play svg { width: 24px; height: 24px; fill: currentColor; }
.vn-play .vn-i-pause, .vn.is-playing .vn-i-play { display: none; }
.vn.is-playing .vn-i-pause { display: block; }
.vn-play::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--lime); opacity: 0; }
.vn.is-playing .vn-play::after { animation: vn-ring 1.6s ease-out infinite; }
@keyframes vn-ring { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.3); opacity: 0; } }
.vn-body { display: grid; gap: 8px; min-width: 0; }
.vn-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vn-title { font: 600 var(--fs-sm) var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-by { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-text); text-transform: uppercase; letter-spacing: .08em; flex: none; }
.vn-live { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.vn-live i { width: 2.5px; height: 4px; border-radius: 2px; background: var(--lime); }
.vn.is-playing .vn-live i { animation: vn-eq .9s ease-in-out infinite; }
.vn.is-playing .vn-live i:nth-child(2) { animation-delay: .2s; }
.vn.is-playing .vn-live i:nth-child(3) { animation-delay: .4s; }
@keyframes vn-eq { 0%, 100% { height: 3px; } 50% { height: 11px; } }
.vn-wave { display: flex; align-items: center; gap: 2px; height: 40px; cursor: pointer; }
.vn-wave:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 4px; }
.vn-wave i { flex: 1; min-width: 2px; height: var(--h, 30%); min-height: 3px; border-radius: 3px; background: #3A3F4A; transition: background .12s; }
.vn-wave i.is-on { background: var(--lime); }
.vn-wave:hover i:not(.is-on) { background: #4A505C; }
.vn-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-text); }
.vn-meta .num { font-family: var(--font-display); }
.vn-sep { opacity: .5; }
.vn-speed { margin-left: auto; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff; font: 600 11px var(--font-display); cursor: pointer; }
.vn-speed:hover { border-color: var(--lime); color: var(--lime); }
.vn-admin { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.vn-rename { display: flex; gap: 8px; flex: 1; }
.vn-rename .input { height: 36px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; font-size: var(--fs-sm); }
.vn-rename .input:focus { border-color: var(--lime); box-shadow: none; outline: none; }
.vn-admin .btn { --b-bg: rgba(255,255,255,.08); --b-fg: #fff; --b-bd: transparent; }
.vn-admin .btn-danger { --b-fg: #FF8A97; --b-bg: transparent; }
.vn-list { display: grid; gap: 12px; margin-bottom: 18px; }

.px-voice { display: grid; gap: 12px; }
.px-voice-head { display: flex; align-items: center; gap: 12px; }
.px-voice-head > span:last-child { display: grid; }
.px-voice-head strong { font: 600 var(--fs-md) var(--font-display); }
.px-voice-head small { font-size: var(--fs-xs); color: var(--text-3); }
.px-voice-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--carbon); }

/* Enregistreur (équipe) */
.fsec-ic.is-lime { background: var(--lime) !important; color: var(--carbon) !important; }
.rec { border: 1.5px dashed #D2D6DC; border-radius: 22px; padding: 22px; background: var(--surface-2); }
.rec-step[data-rec-step="idle"], .rec-step[data-rec-step="recording"] { display: flex; align-items: center; gap: 22px; }
.rec-step[hidden] { display: none !important; }
.rec-btn { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--orange); box-shadow: 0 10px 24px -8px rgba(255,107,53,.7); transition: transform .15s; }
.rec-btn:hover { transform: scale(1.04); }
.rec-btn span { width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: all .2s; }
.rec-btn.is-on { background: var(--carbon); box-shadow: none; }
.rec-btn.is-on span { border-radius: 6px; background: var(--lime); width: 22px; height: 22px; }
.rec-btn.is-on::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--orange); animation: vn-ring 1.4s ease-out infinite; }
.rec-txt { display: grid; gap: 4px; justify-items: start; }
.rec-txt strong { font: 600 var(--fs-lg) var(--font-display); }
.rec-txt small { color: var(--text-2); font-size: var(--fs-sm); max-width: 520px; }
.rec-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-sm); color: var(--text); font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rec-live { flex: 1; display: grid; gap: 10px; min-width: 0; }
.rec-meter { display: flex; align-items: center; gap: 3px; height: 54px; }
.rec-meter i { flex: 1; height: var(--h, 8%); min-height: 4px; border-radius: 3px; background: var(--carbon); transition: height .08s linear; }
.rec-clock { display: flex; align-items: center; gap: 10px; }
.rec-clock .num { font: 700 1.35rem var(--font-display); }
.rec-clock small { color: var(--text-3); font-size: var(--fs-xs); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); animation: rec-blink 1s steps(2) infinite; }
@keyframes rec-blink { 50% { opacity: .2; } }
.rec-step[data-rec-step="review"] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.rec-save { display: grid; gap: 10px; }
.rec-save label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.rec-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-sugg .chip { cursor: pointer; font-size: 12px; }
.rec-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.rec-error { margin-top: 14px; color: var(--pomegranate); font-size: var(--fs-sm); font-weight: 500; }
@media (max-width: 720px) {
  .rec-step[data-rec-step="review"] { grid-template-columns: minmax(0, 1fr); }
  .rec-step[data-rec-step="idle"], .rec-step[data-rec-step="recording"] { gap: 16px; }
  .rec-btn { width: 64px; height: 64px; }
  .vn { padding: 14px 16px 14px 14px; gap: 12px; }
  .vn-play { width: 50px; height: 50px; }
}

/* Vignette vidéo jouable + fenêtre de lecture */
.media-play { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.media-item .media-actions { z-index: 2; }
.play.is-link { opacity: .5; }
dialog.player { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
dialog.player::backdrop { background: rgba(17,19,24,.88); backdrop-filter: blur(6px); }
.player-frame { width: min(92vw, 1100px); aspect-ratio: 16 / 9; max-height: 82vh; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
dialog.player.is-vertical .player-frame { width: min(92vw, 400px); aspect-ratio: 9 / 16; max-height: 86vh; }
.player-frame video, .player-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.player-close { position: fixed; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--carbon); display: grid; place-items: center; cursor: pointer; }
.section-nav .count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--lime); color: var(--carbon); font-size: 10.5px; font-weight: 700; }

.app:has(.sh-head) .topbar .search { visibility: hidden; }
.sh-shelf .pc-badge.is-star { display: none; }
.sh-shelf-row .pc { flex: 0 0 calc((100% - 4 * 20px) / 5); min-width: 200px; }
@media (max-width: 720px) { .sh-shelf-row .pc { flex-basis: 64%; min-width: 0; } }
.px-voice { margin-top: 2px; }

/* =====================================================================
   VARIANTES — modèles, saisie rapide, grille
   ===================================================================== */
.opt-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; font-size: var(--fs-xs); color: var(--text-3); }
.opt-presets .chip { cursor: pointer; font-size: 12px; }
.combo-preview { margin-left: auto; align-self: center; font: 600 var(--fs-sm) var(--font-display); color: var(--carbon); }
.opt-warn { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--orange-50); color: var(--orange-ink); font-size: var(--fs-sm); font-weight: 500; }
.vtools { margin: 18px 0 12px; display: grid; gap: 10px; }
.vt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vt-view { display: inline-flex; padding: 3px; border-radius: 10px; background: #EAEAE3; }
.vt-view button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: 500 var(--fs-sm) var(--font); cursor: pointer; }
.vt-view button.is-on { background: var(--surface); color: var(--carbon); font-weight: 600; box-shadow: 0 1px 3px rgba(17,19,24,.1); }
.vt-fill { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; justify-content: flex-end; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); transition: box-shadow .3s; }
.vt-fill.is-flash { box-shadow: 0 0 0 3px var(--lime); }
.vt-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; margin-right: auto; }
.vt-fill .input-sm { height: 34px; width: auto; min-width: 0; }
.vt-fill [data-fill-value] { width: 90px; }
.vt-fill select.input-sm { padding-right: 28px; max-width: 200px; }
.vt-compo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--orange-50); font-size: var(--fs-sm); }
.vt-compo > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--orange-ink); margin-right: 4px; }
.vt-compo .chip { cursor: pointer; background: var(--surface); }
.vt-compo small { margin-left: auto; font: 600 var(--fs-sm) var(--font-display); color: var(--carbon); }
.field.is-derived .input { background: var(--surface-2); color: var(--carbon); font-weight: 600; }
.field.is-derived label::after { content: "calculé depuis la composition"; margin-left: auto; font-size: 11px; font-weight: 500; color: var(--orange-ink); }

.vgrid-wrap { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--surface); }
.vg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.vg-head small { color: var(--text-3); font-size: var(--fs-xs); }
.vg-fields { display: inline-flex; padding: 3px; border-radius: 10px; background: #EAEAE3; }
.vg-fields button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: 500 13px var(--font); color: var(--text-2); cursor: pointer; }
.vg-fields button.is-on { background: var(--carbon); color: #fff; }
.vg-scroll { overflow-x: auto; }
table.vg { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-sm); }
.vg th, .vg td { padding: 6px; border-bottom: 1px solid var(--line-2); text-align: center; }
.vg thead th { background: var(--surface-2); font-weight: 600; }
.vg-corner { text-align: left !important; font-size: 11px; color: var(--text-3); font-weight: 500 !important; white-space: nowrap; padding-left: 14px !important; }
.vg th button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; font: 600 13px var(--font-display); color: var(--carbon); padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.vg th button:hover { background: var(--lime-50); }
.vg tbody th { text-align: left; padding-left: 8px; }
.vg-sw { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(17,19,24,.18); }
.vg-in { width: 64px; height: 36px; text-align: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font: 500 14px var(--font-display); color: var(--text); }
.vg-in:focus { outline: none; border-color: var(--carbon); box-shadow: 0 0 0 3px var(--lime-50); }
.vg-in:placeholder-shown { background: var(--surface-2); }
.vg td.is-off { opacity: .4; }
.vg-none { color: var(--text-3); }
.vg-tot { font: 600 13px var(--font-display); color: var(--text-2); background: var(--surface-2); }
.vg-foot th, .vg-foot td { font: 600 13px var(--font-display); background: var(--surface-2); border-bottom: 0; }
.vg-grand { color: var(--carbon) !important; background: var(--lime-50) !important; }
@media (max-width: 720px) { .vt-fill { justify-content: flex-start; } .vt-label { width: 100%; } .combo-preview { margin-left: 0; width: 100%; } }

/* =====================================================================
   VIDÉOS DE LA FICHE — affiche, format 9:16 / 16:9, lecture sur place
   ===================================================================== */
.px-slide.is-video { background: #0D0F13; }
.px-slide.is-video::before { opacity: .35; filter: blur(40px) saturate(1.2) brightness(.8); }
.pv-box { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; max-height: 100%; border-radius: 0; overflow: hidden; background: #000; }
.px-slide.is-vertical .pv-box { width: auto; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.pv-box iframe, .pv-box video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.pv-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: #111318; cursor: pointer; display: grid; place-items: center; }
.pv-poster img, .pv-poster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pv-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55)); }
.pv-play { position: relative; z-index: 1; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--carbon); box-shadow: 0 12px 34px rgba(0,0,0,.4); transition: transform .2s var(--ease); }
.pv-poster:hover .pv-play { transform: scale(1.08); }
.pv-play .ic { width: 30px; height: 30px; fill: currentColor; stroke: none; margin-left: 4px; }
.pv-out .pv-play .ic { fill: none; stroke: currentColor; margin: 0; }
.pv-label { position: absolute; z-index: 1; left: 14px; bottom: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(17,19,24,.7); color: #fff; font: 600 11px var(--font-display); backdrop-filter: blur(6px); }
.pv-src { position: relative; z-index: 1; color: rgba(255,255,255,.18); }
.pv-src .ic { width: 120px; height: 120px; stroke-width: 1; }
.pv-out { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; color: #fff; text-align: center; }
.pv-out small { color: var(--ink-text); }
.px-slide.is-video.is-playing .px-nav { opacity: 1; }

.px-thumb.is-video { position: relative; background: #111318; opacity: .7; }
.px-thumb.is-video img, .px-thumb.is-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.px-thumb.is-video .pt-play { position: absolute; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--carbon); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.px-thumb.is-video .pt-play .ic { width: 11px; height: 11px; fill: currentColor; stroke: none; margin-left: 1px; }
.px-thumb.is-video .pt-src { color: rgba(255,255,255,.35); }
.px-thumb.is-video.is-on, .px-thumb.is-video:hover { opacity: 1; }

/* =====================================================================
   ONGLETS DE LA FICHE + GRILLE DES VARIANTES (commerçant)
   ===================================================================== */
.tabs { margin-top: 44px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.tabs-list { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: #EAEAE3; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs-list::-webkit-scrollbar { display: none; }
.tabs-list [role=tab] { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2); font: 600 var(--fs-sm) var(--font-display); cursor: pointer; transition: background .15s, color .15s; }
.tabs-list [role=tab]:hover { color: var(--carbon); }
.tabs-list [role=tab][aria-selected=true] { background: var(--surface); color: var(--carbon); box-shadow: 0 1px 3px rgba(17,19,24,.1); }
.tabs-list [role=tab] small { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(17,19,24,.07); font-size: 11px; }
.tabs-list [role=tab][aria-selected=true] small { background: var(--lime); color: var(--carbon); }
.tab-panel { margin-top: 18px; padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line-2); animation: tab-in .25s var(--ease); }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } }
.tab-panel .px-kit-card { border: 1px solid var(--line-2); background: var(--surface-2); }
.tab-panel .px-specs { background: var(--surface-2); border: 0; }

.vx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vx-count { font-size: var(--fs-md); color: var(--text-2); }
.vx-count strong { color: var(--carbon); }
.vx-sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 3px; max-width: 640px; }
.vx-legend { display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--text-3); }
.vx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vx-legend i { width: 10px; height: 10px; border-radius: 3px; background: #ECEDE8; }
.vx-legend i.is-ok { background: var(--lime); }
.vx-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table.vx { border-collapse: separate; border-spacing: 6px; min-width: 100%; }
.vx thead th { font: 600 12px var(--font-display); color: var(--text-3); padding: 0 4px 2px; text-align: center; white-space: nowrap; }
.vx tbody th { text-align: left; white-space: nowrap; font: 600 var(--fs-sm) var(--font-display); padding-right: 10px; }
.vx tbody th .px-sw { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; margin-right: 8px; }
.vx td { height: 54px; min-width: 76px; border-radius: 12px; text-align: center; background: #F2F2EE; color: var(--text-3); }
.vx td.is-ok { background: var(--lime-50); color: var(--carbon); box-shadow: inset 0 0 0 1.5px var(--lime); }
.vx td.is-none { background: transparent; }
.vx-cell { display: grid; gap: 1px; }
.vx-cell b { font: 600 13px var(--font-display); }
.vx td.is-out b { font-weight: 500; }
.vx-cell small { font-size: 10.5px; color: var(--orange-ink); font-weight: 600; }
.vx-out { margin-top: 16px; }
.vx-out summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; padding: 8px 0; }
.vx-out[open] summary { margin-bottom: 10px; }
@media (max-width: 720px) {
  .tabs { margin-top: 30px; }
  .tabs-list { width: 100%; }
  .tabs-list [role=tab] { flex: 1; padding: 0 12px; justify-content: center; }
  .tab-panel { padding: 16px; margin-left: -4px; margin-right: -4px; }
  .vx td { min-width: 58px; height: 48px; }
}

/* =====================================================================
   CATALOGUE COMMERÇANT — v4
   En-tête net · univers illustrés · barre d'outils collante (recherche, menus de filtres, tri) · grille pleine largeur
   ===================================================================== */
.ct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 18px 0 26px; }
.ct-hello { font-size: var(--fs-sm); color: var(--text-3); font-weight: 500; margin-bottom: 6px; }
.ct-head h1 { display: flex; align-items: flex-start; gap: 10px; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -.04em; }
.ct-total { font: 600 13px var(--font-display); letter-spacing: 0; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; margin-top: 4px; }
.ct-new { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: var(--fs-sm); transition: border-color .15s, box-shadow .15s; }
.ct-new:hover { border-color: var(--carbon); color: var(--text); box-shadow: 0 4px 14px rgba(17,19,24,.08); }
.ct-new strong { font-family: var(--font-display); }
.ct-new-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255,107,53,.5); animation: ct-pulse 2s infinite; }
@keyframes ct-pulse { 70% { box-shadow: 0 0 0 8px rgba(255,107,53,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,53,0); } }

.ct-univers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 14px; margin-bottom: 34px; }
.ct-uni { position: relative; display: block; height: 140px; border-radius: 18px; overflow: hidden; background: var(--carbon); color: #fff; isolation: isolate; }
.ct-uni-img { position: absolute; inset: 0; z-index: -1; }
.ct-uni-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ct-uni::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17,19,24,0) 30%, rgba(17,19,24,.78)); }
.ct-uni:hover { color: #fff; }
.ct-uni:hover .ct-uni-img img { transform: scale(1.06); }
.ct-uni-txt { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 2px; }
.ct-uni-txt strong { font: 600 15px var(--font-display); }
.ct-uni-txt small { font-size: 12px; color: rgba(255,255,255,.75); }

.ct-bar { position: sticky; top: var(--topbar-h); z-index: 25; display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; margin-bottom: 22px; background: var(--bg); border-bottom: 1px solid var(--line); }
.ct-search { position: relative; display: flex; align-items: center; }
.ct-search .ic { position: absolute; left: 15px; color: var(--text-3); pointer-events: none; }
.ct-search input { width: 100%; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 16px 0 44px; font: 400 var(--fs-sm) var(--font); color: var(--text); }
.ct-search input:focus { outline: none; border-color: var(--carbon); box-shadow: 0 0 0 3px var(--lime-50); }
.ct-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
details.fx { position: relative; }
details.fx > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 13.5px var(--font); cursor: pointer; white-space: nowrap; user-select: none; transition: border-color .15s, background .15s; }
details.fx > summary::-webkit-details-marker { display: none; }
details.fx > summary:hover { border-color: #C6CAD2; }
details.fx > summary > .ic:last-child { color: var(--text-3); transition: transform .2s; }
details.fx[open] > summary { border-color: var(--carbon); }
details.fx[open] > summary > .ic:last-child { transform: rotate(180deg); }
details.fx.is-set > summary { background: var(--carbon); border-color: var(--carbon); color: #fff; }
details.fx.is-set > summary .ic { color: var(--lime) !important; }
.fx-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 270px; max-height: min(420px, 60vh); overflow: auto; padding: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 2px 4px rgba(17,19,24,.04), 0 22px 50px -12px rgba(17,19,24,.28); animation: fx-in .16s var(--ease); }
@keyframes fx-in { from { opacity: 0; transform: translateY(-4px); } }
.fx-title { padding: 8px 12px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); }
.fx-opt, .fx-check { display: grid; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); }
.fx-opt { grid-template-columns: minmax(0, 1fr) auto; }
.fx-check { grid-template-columns: auto minmax(0, 1fr) auto; }
.fx-opt:hover, .fx-check:hover { background: var(--surface-2); color: var(--text); }
.fx-opt input, .fx-check input { position: absolute; opacity: 0; pointer-events: none; }
.fx-opt small, .fx-check small { font-size: 12px; color: var(--text-3); }
.fx-opt:has(input:checked) { background: var(--lime-50); color: var(--carbon); font-weight: 600; }
.fx-opt:has(input:checked) small { color: var(--lime-ink); }
.fx-opt:has(input:focus-visible), .fx-check:has(input:focus-visible) { outline: 2px solid var(--carbon); }
.fx-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #C9CDD5; display: grid; place-items: center; color: transparent; }
.fx-box .ic { width: 13px; height: 13px; stroke-width: 3; }
.fx-check input:checked ~ .fx-box { background: var(--lime); border-color: var(--lime); color: var(--carbon); }
.fx-check input:checked ~ .fx-lbl { color: var(--carbon); font-weight: 600; }
.fx-lbl { display: inline-flex; align-items: center; gap: 8px; }
.fx-lbl .ic { color: var(--text-3); }
.fx-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 4px 12px 0; }
.fx-range label { position: relative; display: grid; gap: 5px; }
.fx-range small { font-size: 11.5px; color: var(--text-3); }
.fx-range .input { height: 44px; padding: 0 36px 0 12px; border-radius: 11px; }
.fx-range em { position: absolute; right: 12px; bottom: 13px; font-style: normal; font-size: 11px; color: var(--text-3); }
.fx-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 12px 6px; }
.ct-reset { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 6px; font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; white-space: nowrap; }
.ct-reset:hover { color: var(--pomegranate); }
.ct-sort { position: relative; display: inline-flex; align-items: center; }
.ct-sort .ic { position: absolute; left: 14px; pointer-events: none; color: var(--text-2); }
.ct-sort select { height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 16px 0 38px; font: 500 13.5px var(--font); color: var(--text); appearance: none; cursor: pointer; }
.ct-sort select:focus { outline: none; border-color: var(--carbon); }
.ct-count { margin: -6px 0 18px; font-size: var(--fs-sm); color: var(--text-2); }
.ct-count strong { color: var(--text); }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(236px, 100%), 1fr)); gap: 38px 22px; }
.ct-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 72px 24px; background: var(--surface); border-radius: 24px; border: 1px solid var(--line-2); }
.ct-empty.is-small { padding: 56px 24px; }
.ct-empty h2 { font-size: var(--fs-xl); }
.ct-empty p { color: var(--text-2); max-width: 400px; }
.ct-empty-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--lime); color: var(--carbon); }

@media (max-width: 1100px) {
  .ct-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .ct-search { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .ct-head { margin: 8px 0 18px; }
  .ct-univers { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 26px; padding: 0 16px; }
  .ct-univers::-webkit-scrollbar { display: none; }
  .ct-uni { height: 120px; }
  .ct-bar { margin-left: -16px; margin-right: -16px; padding: 10px 16px; gap: 10px; }
  .ct-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -4px; }
  .ct-pills::-webkit-scrollbar { display: none; }
  details.fx > summary { height: 38px; padding: 0 10px 0 14px; font-size: 13px; }
  .ct-sort select { width: 40px; padding: 0; color: transparent; }
  .ct-sort select option { color: var(--text); }
  .ct-sort .ic { left: 12px; }
  body.fx-open { overflow: hidden; }
  details.fx[open]::before { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(17,19,24,.5); }
  .fx-panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 95; min-width: 0; max-height: 78vh; max-height: 78dvh; padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; animation: fx-up .25s var(--ease); }
  .fx-panel::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: var(--line); }
  .fx-opt, .fx-check { padding: 13px 12px; font-size: var(--fs-md); }
  .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
}
@keyframes fx-up { from { transform: translateY(100%); } }
.app:has(.ct-head) .topbar .search { visibility: hidden; }
body.fx-open .ct-bar { z-index: 100; }
.ct-univers { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ct-univers::-webkit-scrollbar { display: none; }
.vt-fill { justify-content: flex-start; }
.vt-label { margin-right: 6px; }
.vt-fill select.input-sm[data-fill-scope] { max-width: 190px; }

/* =====================================================================
   CATALOGUE — barre d'une ligne, catégories en onglets, panneau de filtres, cartes teintées
   ===================================================================== */
.cb { position: sticky; top: var(--topbar-h); z-index: 25; background: var(--bg); margin: 0 0 18px; padding: 12px 0 0; border-bottom: 1px solid var(--line); }
.cb-row { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.cb-search { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.cb-search .ic { position: absolute; left: 16px; color: var(--text-3); pointer-events: none; }
.cb-search input { width: 100%; height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); padding: 0 16px 0 46px; font: 400 var(--fs-md) var(--font); color: var(--text); }
.cb-search input:focus { outline: none; border-color: var(--carbon); box-shadow: 0 0 0 3px var(--lime-50); }
.cb-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--carbon); font: 600 var(--fs-sm) var(--font-display); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.cb-btn:hover { border-color: var(--carbon); }
.cb-btn.is-set { background: var(--carbon); border-color: var(--carbon); color: #fff; }
.cb-btn b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--lime); color: var(--carbon); font-size: 11px; }
.cb-sort { position: relative; display: inline-flex; align-items: center; }
.cb-sort > .ic:first-child { position: absolute; left: 14px; pointer-events: none; color: var(--text-2); }
.cb-sort > .ic:last-child { position: absolute; right: 12px; pointer-events: none; color: var(--text-3); }
.cb-sort select { height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); padding: 0 34px 0 40px; font: 500 var(--fs-sm) var(--font); color: var(--text); appearance: none; cursor: pointer; }
.cb-sort select:focus { outline: none; border-color: var(--carbon); }
.cb-cats { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.cb-cats::-webkit-scrollbar { display: none; }
.cb-cats a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 4px 0 13px; color: var(--text-2); font: 500 var(--fs-sm) var(--font); white-space: nowrap; }
.cb-cats a small { font-size: 11px; color: var(--text-3); }
.cb-cats a:hover { color: var(--carbon); }
.cb-cats a.is-on { color: var(--carbon); font-weight: 600; }
.cb-cats a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--carbon); }
.cb-cats a.is-on small { color: var(--lime-ink); }
.cb-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 0 20px; }
.cb-total { font-size: var(--fs-sm); color: var(--text-2); margin-right: 6px; }
.cb-total strong { color: var(--text); }
.cb-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px 0 12px; border-radius: 999px; background: var(--lime-50); border: 1px solid #DDF3A8; color: var(--carbon); font-size: 12.5px; font-weight: 500; }
.cb-chip .ic { width: 13px; height: 13px; color: var(--lime-ink); }
.cb-chip:hover { background: var(--lime); color: var(--carbon); }
.cb-clear { font-size: var(--fs-sm); color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }

/* Panneau des filtres */
.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(17,19,24,.45); opacity: 0; transition: opacity .25s; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--surface); box-shadow: -20px 0 60px rgba(17,19,24,.2); transform: translateX(100%); transition: transform .28s var(--ease); }
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
body.drawer-on { overflow: hidden; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 14px; }
.drawer-head h2 { font-size: var(--fs-xl); }
.drawer-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--carbon); display: grid; place-items: center; cursor: pointer; }
.drawer-x:hover { background: var(--line-2); }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 24px 12px; }
.dg { padding: 18px 0 20px; border-top: 1px solid var(--line-2); }
.dg h3 { font: 600 var(--fs-sm) var(--font-display); margin-bottom: 12px; }
.dg-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 4px; border-radius: 14px; background: #EFEFEA; }
.dg-seg input, .dg-switch input { position: absolute; opacity: 0; pointer-events: none; }
.dg-seg span { display: grid; justify-items: center; gap: 1px; padding: 9px 4px; border-radius: 11px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; text-align: center; transition: all .15s; }
.dg-seg small { font-size: 11px; color: var(--text-3); font-weight: 400; }
.dg-seg input:checked + span { background: var(--surface); color: var(--carbon); font-weight: 600; box-shadow: 0 1px 4px rgba(17,19,24,.12); }
.dg-seg input:focus-visible + span { outline: 2px solid var(--carbon); }
.dg-range { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); gap: 8px; align-items: end; }
.dg-range > span { height: 1.5px; background: var(--line); margin-bottom: 22px; }
.dg-range label { position: relative; display: grid; gap: 6px; }
.dg-range small { font-size: 12px; color: var(--text-3); }
.dg-range .input { height: 46px; padding: 0 38px 0 14px; border-radius: 12px; }
.dg-range em { position: absolute; right: 14px; bottom: 15px; font-style: normal; font-size: 12px; color: var(--text-3); }
.dg-switch { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; cursor: pointer; }
.dg-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.dg-lbl { display: grid; font-size: var(--fs-sm); font-weight: 500; }
.dg-lbl small { font-size: 12px; color: var(--text-3); font-weight: 400; }
.dg-toggle { width: 44px; height: 26px; border-radius: 999px; background: #D7DAE0; position: relative; transition: background .2s; }
.dg-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
.dg-switch input:checked ~ .dg-toggle { background: var(--carbon); }
.dg-switch input:checked ~ .dg-toggle::after { transform: translateX(18px); background: var(--lime); }
.dg-switch input:checked ~ .dg-lbl { color: var(--carbon); }
.dg-switch:has(input:checked) .dg-ic { background: var(--lime); color: var(--carbon); }
.dg-switch input:focus-visible ~ .dg-toggle { outline: 2px solid var(--carbon); outline-offset: 2px; }
.drawer-foot { display: flex; gap: 10px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); background: var(--surface); }
.drawer-foot .btn-primary { flex: 1; }

/* Cartes article : fond blanc, cadre photo neutre, prix en italique (comme le logo) */
.pc { padding: 7px 7px 0; border-radius: 20px; background: #fff; border: 1px solid #E8EAEE; box-shadow: 0 1px 2px rgba(17,19,24,.04); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.pc:hover { transform: translateY(-3px); border-color: #D9DCE2; box-shadow: 0 22px 40px -22px rgba(17,19,24,.32), 0 2px 6px rgba(17,19,24,.04); }
.pc .pc-media { border-radius: 14px; background: #F3F4F0; }
.pc .pc-img, .pc .pc-img2 { mix-blend-mode: multiply; }   /* les fonds blancs des photos se fondent dans le cadre */
.pc .pc-fav { top: 15px; right: 15px; }
.pc .pc-badges { left: 12px; top: 12px; }
.pc .pc-body { display: flex; flex-direction: column; gap: 0; padding: 12px 8px 0; flex: 1; }
.pc-cat { font: 600 10.5px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .pc-name { margin-top: 5px; font: 500 14.5px/1.38 var(--font); }
.pc:hover .pc-name { text-decoration: none; }
.pc .pc-price { margin-top: 10px; align-items: baseline; gap: 5px; flex-wrap: nowrap; }
.pc .pc-price b { font: italic 700 1.38rem/1 var(--font-display); letter-spacing: -.03em; }
.pc .pc-price b small { font-size: .66em; font-weight: 700; }
.pc .pc-price > span { font-size: 11.5px; white-space: nowrap; }
.pc .pc-margin { margin-left: auto; white-space: nowrap; flex: none; font: italic 700 11px var(--font-display); color: var(--carbon); background: var(--lime); padding: 4px 8px; border-radius: 8px; }
.pc-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 12px -8px 0; padding: 11px 8px 12px; border-top: 1px dashed #E4E7EC; font-size: 12px; color: var(--text-2); min-width: 0; margin-top: auto; }
.pc .pc-price + .pc-foot { margin-top: 12px; }
.pc-foot .pc-sub { max-width: 100%; min-width: 0; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.pc-foot .pc-stock { font-size: 11.5px; color: var(--text-3); }
.pc.is-out { background: #FBFBF9; }
.pc.is-out .pc-price b { color: var(--text-3); }
.ct-grid, .sh-grid { gap: 22px 18px; }

@media (max-width: 720px) {
  .cb { margin-left: -16px; margin-right: -16px; padding: 10px 16px 0; }
  .cb-row { gap: 8px; padding-bottom: 10px; }
  .cb-search input, .cb-btn, .cb-sort select { height: 44px; }
  .cb-btn { padding: 0 14px; }
  .cb-btn span { display: none; }
  .cb-sort select { width: 44px; padding: 0; color: transparent; }
  .cb-sort select option { color: var(--text); }
  .cb-sort > .ic:last-child { display: none; }
  .cb-cats { gap: 20px; }
  .drawer-panel { top: auto; left: 0; width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 26px 26px 0 0; transform: translateY(100%); }
  .drawer-head::before { content: ""; position: absolute; top: 8px; left: 50%; margin-left: -20px; width: 40px; height: 4px; border-radius: 4px; background: var(--line); }
  .drawer-head { position: relative; padding-top: 24px; }
  .pc { padding: 5px 5px 0; border-radius: 16px; }
  .pc .pc-media { border-radius: 12px; }
  .pc .pc-body { padding: 10px 6px 0; }
  .pc .pc-fav { top: 11px; right: 11px; }
  .pc .pc-name { font-size: 13.5px; }
  .pc .pc-price { flex-wrap: wrap; }
  .pc .pc-price b { font-size: 1.15rem; }
  .pc .pc-price > span { font-size: 10.5px; }
  .pc .pc-margin { margin-left: 0; }
  .pc-foot { flex-direction: column; align-items: flex-start; gap: 3px; margin-left: -6px; margin-right: -6px; padding: 9px 6px 10px; }
  .pc-foot .pc-sub { max-width: 100%; }
  .ct-grid, .sh-grid { gap: 12px 10px; }
}
.variants-table.hide-price .price-col { display: none; }
.th-hint { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: var(--line); color: var(--text-2); font-size: 10px; cursor: help; vertical-align: 1px; }
.pc-from, .px-from { font-style: normal; font: 500 12px var(--font); color: var(--text-3); margin-right: 2px; align-self: baseline; }
.px-from { font-size: 14px; margin-right: 6px; vertical-align: 8px; }
.vx-cell em { font-style: normal; font: 600 11px var(--font-display); color: var(--text-2); }
[data-grid] { transition: opacity .2s; }
[data-grid].is-loading { opacity: .45; pointer-events: none; }
[data-grid].is-fresh > * { animation: grid-in .35s var(--ease) both; }
[data-grid].is-fresh > *:nth-child(2) { animation-delay: .03s; } [data-grid].is-fresh > *:nth-child(3) { animation-delay: .06s; }
[data-grid].is-fresh > *:nth-child(4) { animation-delay: .09s; } [data-grid].is-fresh > *:nth-child(n+5) { animation-delay: .12s; }
@keyframes grid-in { from { opacity: 0; transform: translateY(8px); } }

/* =====================================================================
   COQUE v2 — menu compact, barre du haut, italique de la marque
   L'italique reprend le « 2engros » du logo : réservé aux chiffres clés,
   aux libellés de rubrique et aux mots mis en avant (<em> dans un titre).
   ===================================================================== */
@font-face { font-family: "Poppins Local"; src: url("../fonts/Poppins-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins Local"; src: url("../fonts/Poppins-MediumItalic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; }
:root { --sidebar-w: 232px; --topbar-h: 60px; }

/* ---- Menu latéral ---- */
.sidebar { padding: 16px 12px 14px; background: var(--carbon); scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sidebar:hover { scrollbar-color: rgba(255,255,255,.14) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
.sidebar .brand { padding: 4px 8px 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar .brand-logo { height: 25px; }
.brand-space { font: italic 700 9.5px/1 var(--font-display); letter-spacing: .08em; padding: 4px 7px 3px; border-radius: 5px; transform: skewX(-6deg); }
.nav-group { margin-top: 14px; }
.nav-group > .nav-label { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; font: italic 500 11px/1 var(--font-display); letter-spacing: .01em; color: #6E7380; }
.nav-group > .nav-label::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.06); }
.nav a { gap: 10px; padding: 7px 10px; margin: 1px 0; min-height: 36px; border-radius: 9px; font: 500 13.5px/1.2 var(--font); color: #A9AEB8; }
.nav a .ic { width: 18px; height: 18px; flex: none; color: #7D828D; transition: color .15s; }
.nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav a:hover .ic { color: #fff; }
.nav a.is-active { background: rgba(255,255,255,.08); color: #fff; font-weight: 600; }
.nav a.is-active .ic { color: var(--lime); stroke-width: 2; }
.nav a.is-active::before { display: block; content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lime); }
.nav a.is-soon::after { font: italic 500 10px var(--font-display); border: 0; background: rgba(255,255,255,.06); padding: 2px 7px; border-radius: 6px; color: #8A8F9B; }
.install-card { padding: 12px; border-radius: 12px; background: #1B1E25; border: 1px solid rgba(255,255,255,.06); }
.install-card strong { font: italic 700 13px var(--font-display); }
.install-card .btn { height: 34px; }

/* ---- Barre du haut ---- */
.topbar { padding: 0 28px; gap: 14px; background: rgba(255,255,255,.88); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid #ECEEF1; }
.topbar.is-scrolled { border-bottom-color: #E4E7EC; box-shadow: 0 6px 20px -16px rgba(17,19,24,.35); }
.search { max-width: 400px; }
.search .ic { left: 13px; width: 17px; height: 17px; }
.search input { height: 38px; border-radius: 10px; background: #F4F5F1; border-color: transparent; padding: 0 44px 0 38px; font-size: 13.5px; transition: background .15s, border-color .15s, box-shadow .15s; }
.search input::placeholder { color: #8A8F9B; }
.search input:hover { background: #EFF0EB; }
.search input:focus { background: #fff; border-color: var(--carbon); box-shadow: 0 0 0 4px rgba(200,255,50,.35); }
.search kbd { right: 9px; background: #fff; border-color: #E4E7EC; font-size: 10.5px; }
.topbar-actions { gap: 4px; }
.tb-date { margin-right: 10px; padding-right: 14px; border-right: 1px solid #E4E7EC; font: italic 400 13px/1 var(--font-display); color: var(--text-3); white-space: nowrap; }
.tb-date b { font-weight: 700; color: var(--carbon); }
.tb-add { height: 36px; padding: 0 14px 0 11px; gap: 6px; font-size: 13px; border-radius: 10px; margin-right: 6px; }
.tb-add span { font-style: italic; font-weight: 700; }
.topbar .bell { width: 38px; height: 38px; border-radius: 10px; }
.topbar .bell .dot { top: 8px; right: 9px; background: var(--orange); box-shadow: 0 0 0 2px #fff; }
.user-btn { gap: 9px; padding: 3px 8px 3px 3px; border-radius: 12px; border: 1px solid transparent; }
.user-btn:hover { background: #F4F5F1; border-color: #ECEEF1; }
.user-btn .avatar { width: 34px; height: 34px; border-radius: 50%; font: 600 12px var(--font-display); background: var(--lime); color: var(--carbon); }
.user-btn .who { font: 600 13px/1.2 var(--font); }
.user-btn .who small { font: italic 500 11px/1.3 var(--font-display); color: var(--text-3); }
.content { padding-top: 6px; }
@media (max-width: 1180px) { .tb-date { display: none; } }
@media (max-width: 900px) {
  .sidebar { width: min(280px, 84vw); }
  .tb-add span { display: none; }
  .tb-add { width: 38px; padding: 0; justify-content: center; margin-right: 0; }
  .topbar { background: rgba(255,255,255,.92); }
}

/* ---- Italique de marque ---- */
h1 em, h2 em, .page-head h1 em { font: inherit; font-style: italic; font-weight: 700; color: inherit; background: linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%); padding: 0 .08em; }
.ledger dd, .ledger dd.num { font-style: italic; letter-spacing: -.03em; }
.px-price b, .px-price .num { font-style: italic; }
.ct-total { font-style: italic; }
.page-head h1 + p, .panel-head h2 small { font-style: normal; }

/* =====================================================================
   Réseaux du commerçant (fiche admin)
   ===================================================================== */
.social-grid { gap: 10px 14px; }
.social-field { margin: 0; }
.social-input { position: relative; display: flex; align-items: center; }
.social-ic { position: absolute; left: 6px; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--ch) 12%, #fff); color: var(--ch); pointer-events: none; }
.social-input .input { padding-left: 46px; padding-right: 40px; }
.social-open { position: absolute; right: 6px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
.social-open:hover { background: var(--surface-2); color: var(--carbon); }
.pv-links { display: grid; gap: 6px; width: 100%; margin-top: 4px; }
.pv-links a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text); min-width: 0; }
.pv-links a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-links a:hover { border-color: var(--carbon); color: var(--carbon); }

/* =====================================================================
   Texte riche : éditeur (admin) + rendu (.rt, fiche commerçant)
   ===================================================================== */
.rt { font-size: 15px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.rt > * + * { margin-top: .85em; }
.rt h2 { font: 700 1.3rem/1.3 var(--font-display); letter-spacing: -.02em; margin-top: 1.5em; }
.rt h3 { font: 600 1.08rem/1.35 var(--font-display); margin-top: 1.3em; }
.rt h4 { font: 600 1rem/1.4 var(--font-display); }
.rt > :first-child { margin-top: 0; }
.rt strong { font-weight: 650; }
.rt a { color: var(--carbon); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rt ul, .rt ol { padding-left: 1.4em; }
.rt ul { list-style: none; padding-left: 1.3em; }
.rt ul > li { position: relative; }
.rt ul > li::before { content: ""; position: absolute; left: -1.05em; top: .68em; width: 7px; height: 7px; border-radius: 2px; background: var(--lime); box-shadow: inset 0 0 0 1px rgba(17,19,24,.12); transform: rotate(45deg); }
.rt ol > li::marker { font: italic 700 .95em var(--font-display); color: var(--carbon); }
.rt li + li { margin-top: .3em; }
.rt blockquote { position: relative; padding: 14px 18px 14px 20px; border-radius: 14px; background: #F4F6EE; border-left: 4px solid var(--lime); font-style: normal; }
.rt hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, #D9DCE2 15%, #D9DCE2 85%, transparent); margin: 1.6em 0; }
.rt figure { margin: 1.2em 0; }
.rt img { display: block; max-width: 100%; max-height: 560px; width: auto; height: auto; margin: 0 auto; object-fit: contain; border-radius: 14px; background: #F3F4F0; }
.rt figcaption { margin-top: 8px; font: italic 400 13px var(--font-display); color: var(--text-3); text-align: center; }
.rt figcaption:empty { display: none; }
.rt table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.45; border: 1px solid #E4E7EC; border-radius: 12px; overflow: hidden; }
.rt th, .rt td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #ECEEF1; }
.rt th + th, .rt td + td { border-left: 1px solid #ECEEF1; }
.rt tr:last-child > td { border-bottom: 0; }
.rt thead th { background: var(--carbon); color: #fff; font: 600 12.5px var(--font-display); letter-spacing: .01em; border-bottom: 0; }
.rt thead th + th { border-left-color: rgba(255,255,255,.12); }
.rt tbody tr:nth-child(even) td { background: #FAFAF7; }
.rt tbody td:first-child { font-weight: 600; }
.rt-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.rt-table table { min-width: 460px; }
.px-desc.rt { max-width: 760px; }
@media (max-width: 560px) { .rt { font-size: 14.5px; } .rt th, .rt td { padding: 9px 11px; } }

.rte { contain: inline-size; min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: visible; transition: border-color .15s, box-shadow .15s; position: relative; }
.rte.is-focus { border-color: var(--carbon); box-shadow: 0 0 0 4px rgba(200,255,50,.3); }
.rte-bar { position: sticky; top: calc(var(--topbar-h) + 52px); z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line-2); background: rgba(250,250,247,.96); backdrop-filter: blur(8px); border-radius: 16px 16px 0 0; }
.rte-grp { position: relative; display: flex; align-items: center; gap: 1px; padding-right: 4px; margin-right: 1px; border-right: 1px solid #E8EAEE; }
.rte-grp:last-child, .rte-grp.rte-end { border-right: 0; }
.rte-end { margin-left: auto; }
.rte-btn { width: 34px; height: 34px; border-radius: 9px; border: 0; background: none; display: grid; place-items: center; color: var(--text-2); cursor: pointer; position: relative; transition: background .12s, color .12s; }
.rte-btn:hover { background: #EDEEE8; color: var(--carbon); }
.rte-btn.is-on { background: var(--carbon); color: var(--lime); }
.rte-btn .ic { width: 18px; height: 18px; }
.rte-btn[data-tip]:hover::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 5px 8px; border-radius: 7px; background: var(--carbon); color: #fff; font: 500 11.5px var(--font); white-space: nowrap; pointer-events: none; z-index: 6; }
.rte.is-code .rte-bar .rte-btn:not([data-cmd=code]):not([data-cmd=full]) { opacity: .35; pointer-events: none; }
.rte-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 8; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); }
.rte-linkpop { display: flex; gap: 6px; align-items: center; width: 380px; max-width: calc(100vw - 48px); }
.rte-linkpop[hidden], .rte-pop[hidden] { display: none; }
.rte-linkpop .input { height: 38px; flex: 1; min-width: 0; }
.rte-tablepop { left: 34px; }
.rte-grid { display: grid; grid-template-columns: repeat(8, 20px); gap: 3px; }
.rte-grid button { width: 20px; height: 20px; border-radius: 4px; border: 1px solid #DDE0E5; background: #fff; cursor: pointer; padding: 0; }
.rte-grid button.is-on { background: var(--lime); border-color: #A6D51F; }
.rte-grid-out { margin-top: 10px; font: italic 500 12px var(--font-display); color: var(--text-2); text-align: center; }
.rte-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--line-2); background: var(--carbon); }
.rte-tbar[hidden] { display: none; }
.rte-tbar-l { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font: italic 700 12px var(--font-display); color: var(--lime); }
.rte-tbar button { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; border-radius: 7px; border: 0; background: rgba(255,255,255,.08); color: #fff; font: 500 12px var(--font); cursor: pointer; }
.rte-tbar button:hover { background: rgba(255,255,255,.16); }
.rte-tbar button.is-del { background: none; color: #FF9C7A; }
.rte-tbar button.is-del:hover { background: rgba(255,107,53,.16); }
.rte-tbar .ic { width: 14px; height: 14px; }
.rte-area { min-height: 220px; max-height: 70vh; overflow-y: auto; overflow-x: auto; padding: 20px 22px; outline: none; caret-color: var(--carbon); }
.rte.is-empty .rte-area::before { content: attr(data-placeholder); position: absolute; color: var(--text-3); pointer-events: none; max-width: calc(100% - 44px); font-size: 14.5px; line-height: 1.6; }
.rte-area table td, .rte-area table th { min-width: 60px; }
.rte-area table { min-width: 0; }
.rte-area img { cursor: pointer; }
.rte-area img.is-sel { outline: 3px solid var(--lime); outline-offset: 2px; }
.rte-area figcaption:empty::before, .rte-area figcaption:has(> br:only-child)::before { content: "Légende (facultatif)"; color: #B5B9C2; }
.rte-area figcaption:empty, .rte-area figcaption:has(> br:only-child) { display: block; }
.rte.is-drop .rte-area { background: repeating-linear-gradient(45deg, #FAFFF0, #FAFFF0 12px, #F3FCDD 12px, #F3FCDD 24px); }
.rte-src { display: block; width: 100%; min-height: 260px; border: 0; border-radius: 0; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 18px 20px; resize: vertical; background: #FBFBF8; }
.rte-src[hidden] { display: none; }
.rte-src:focus { outline: none; box-shadow: none; }
.rte-foot { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--text-3); border-radius: 0 0 16px 16px; background: #FCFCFA; }
.rte-foot [data-rte-count] { font: italic 600 12px var(--font-display); color: var(--text-2); }
.rte-hint { margin-left: auto; }
.rte-busy { display: none; align-items: center; gap: 6px; color: var(--carbon); font-weight: 500; }
.rte.is-busy .rte-busy { display: inline-flex; }
.rte-busy .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--carbon); animation: rte-spin .7s linear infinite; }
@keyframes rte-spin { to { transform: rotate(360deg); } }
.rte.is-full { position: fixed; inset: 16px; z-index: 120; display: flex; flex-direction: column; box-shadow: 0 30px 80px -20px rgba(17,19,24,.5); }
.rte.is-full .rte-bar { position: static; }
.rte.is-full .rte-area { flex: 1; max-height: none; padding: 36px max(24px, calc(50% - 400px)); }
.rte.is-full .rte-src { flex: 1; }
body.rte-full-on::after { content: ""; position: fixed; inset: 0; z-index: 110; background: rgba(17,19,24,.55); backdrop-filter: blur(3px); }
@media (max-width: 720px) {
  .rte-bar { top: var(--topbar-h); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .rte-bar::-webkit-scrollbar { display: none; }
  .rte-grp { flex: none; }
  .rte-end { margin-left: 0; }
  .rte-btn[data-tip]:hover::after { display: none; }
  .rte-pop { position: fixed; left: 16px !important; right: 16px; top: auto; bottom: calc(90px + env(safe-area-inset-bottom)); width: auto; }
  .rte-hint { display: none; }
  .rte-area { padding: 16px; }
  .rte.is-full { inset: 0; border-radius: 0; }
}

/* =====================================================================
   PAGES DE CONNEXION v2
   ===================================================================== */
.auth-pitch h1 em { font-style: italic; font-weight: 700; }
.auth-pitch h1 strong { margin-top: 2px; }
.auth-points { list-style: none; margin: 40px 0; padding: 0; display: grid; gap: 10px; max-width: 440px; }
.auth-points li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(4px); }
.auth-points li:nth-child(2) { margin-left: 24px; }
.auth-points li:nth-child(3) { margin-left: 48px; background: rgba(200,255,50,.08); border-color: rgba(200,255,50,.22); }
.ap-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--lime); color: var(--carbon); }
.auth-points strong { display: block; font: italic 700 14px/1.3 var(--font-display); color: #fff; }
.auth-points small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: #A9AEB8; }
.auth-card h2 em { font-style: italic; font-weight: 700; background: linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%); padding: 0 .06em; }
.auth-join { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.auth-join a { font-weight: 600; color: var(--carbon); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* =====================================================================
   LE LABO
   ===================================================================== */
.tag.is-lab { --tag-bg: var(--carbon); --tag-fg: var(--lime); display: inline-flex; align-items: center; gap: 5px; }
.tag.is-lab .ic { width: 12px; height: 12px; }
.tag.is-lab::before { display: none; }
.status-seg.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.status-seg.is-4 span { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 2px; font-size: 12.5px; }
.status-seg .is-lab .ic { width: 13px; height: 13px; }
.status-seg .is-lab input:checked + span { background: var(--carbon); color: var(--lime); box-shadow: none; }
.lab-fields { margin: 4px 0 16px; padding: 14px; border-radius: 14px; background: #F4F6EE; border: 1px solid #E2E8CF; }
.lab-fields[hidden] { display: none; }
.lab-fields .field { margin-bottom: 12px; }
.lab-fields .form-grid { gap: 10px; }
.lab-fields-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.lab-fields-head > .ic { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--carbon); color: var(--lime); }
.lab-fields-head strong { display: block; font: italic 700 14px var(--font-display); }
.lab-fields-head small { color: var(--text-3); font-size: 12px; }
.lab-fields-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--carbon); color: #fff; font-size: 13px; }
.lab-fields-link:hover { color: var(--lime); }

/* Barre de progression de l'objectif */
.lab-bar { display: flex; height: 10px; border-radius: 99px; background: #E9ECE3; overflow: hidden; }
.lab-bar > span { display: block; height: 100%; background: var(--lime); box-shadow: inset 0 0 0 1px rgba(17,19,24,.08); transition: width .6s var(--ease); }
.lab-bar > span + span { border-radius: 0; }
.lab-bar > span.is-maybe { background: repeating-linear-gradient(45deg, #E4F7B0, #E4F7B0 4px, #D2EE8A 4px, #D2EE8A 8px); }
.lab-bar.is-sm { height: 6px; }

/* Verdicts */
.lab-verdict { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font: 600 12px var(--font-display); white-space: nowrap; }
.lab-verdict .ic { width: 13px; height: 13px; }
.lab-verdict.is-go { background: var(--lime); color: var(--carbon); }
.lab-verdict.is-maybe { background: #FFF1D6; color: #8A5A00; }
.lab-verdict.is-no { background: #F1F1EE; color: var(--text-2); }
.lab-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 12px; color: var(--text-2); }
.lab-chip b { color: var(--carbon); font-family: var(--font-display); font-style: italic; }
.lab-chip.pv-good { background: var(--mint-50); color: var(--mint); border-color: transparent; }
.lab-chip.pv-high { background: var(--orange-50); color: var(--orange-ink); border-color: transparent; }

/* ---- Équipe : liste ---- */
.lab-section { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; font-size: 1.05rem; }
.lab-section .num { font: italic 700 13px var(--font-display); padding: 2px 9px; border-radius: 99px; background: var(--carbon); color: var(--lime); }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 18px; margin-bottom: 32px; }
.lab-tile { display: flex; flex-direction: column; border-radius: 20px; background: #fff; border: 1px solid #E8EAEE; overflow: hidden; color: var(--text); transition: transform .2s var(--ease), box-shadow .2s; }
.lab-tile:hover { transform: translateY(-2px); color: var(--text); box-shadow: 0 18px 36px -22px rgba(17,19,24,.35); }
.lab-tile-img { position: relative; aspect-ratio: 16 / 10; background: #F3F4F0; display: grid; place-items: center; color: var(--text-3); }
.lab-tile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.lab-when-chip, .lab-pc-when { position: absolute; top: 12px; right: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.95); font: italic 600 11.5px var(--font-display); color: var(--carbon); box-shadow: 0 2px 8px rgba(17,19,24,.1); }
.lab-when-chip.is-urgent, .lab-pc-when.is-urgent { background: var(--orange); color: #fff; }
.lab-tile-body { display: grid; gap: 8px; padding: 14px 16px 16px; }
.lab-tile-body strong { font-size: 15px; font-weight: 600; }
.lab-tile-goal { font-size: 12.5px; color: var(--text-3); }
.lab-tile-goal b { font: italic 700 1.35rem var(--font-display); color: var(--carbon); margin-right: 2px; }
.lab-tile-meta { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); }
.lab-tile-meta span { display: inline-flex; align-items: center; gap: 5px; }
.lab-closed { list-style: none; margin: 0; padding: 0; }
.lab-closed li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line-2); }
.lab-closed li:first-child { border-top: 0; }
.lab-closed a { flex: 1; min-width: 0; color: var(--text); }
.lab-closed a small { display: block; color: var(--text-3); font-size: 12px; }
.lab-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; padding: 32px; align-items: center; }
.lab-intro-txt h2 { margin: 16px 0 8px; font-size: 1.5rem; }
.lab-intro-txt p { color: var(--text-2); margin-bottom: 18px; max-width: 520px; }
.lab-intro-txt .hint { margin: 12px 0 0; }
.lab-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lab-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-2); }
.lab-steps li > span { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--carbon); color: var(--lime); font: italic 700 18px var(--font-display); }
.lab-steps small { color: var(--text-2); font-size: 13px; }
@media (max-width: 900px) { .lab-intro { grid-template-columns: minmax(0, 1fr); padding: 22px; } }

/* ---- Équipe : détail ---- */
.lab-id { display: flex; gap: 16px; align-items: center; }
.lab-thumb { width: 72px; height: 72px; flex: none; border-radius: 18px; overflow: hidden; background: #F3F4F0; display: grid; place-items: center; color: var(--text-3); border: 1px solid var(--line-2); }
.lab-thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.lab-head p { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lab-when { font: italic 500 13px var(--font-display); color: var(--text-2); }
.lab-score { padding: 22px; }
.lab-goal-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.lab-big { font: italic 700 3rem/1 var(--font-display); letter-spacing: -.04em; }
.lab-goal-txt strong { display: block; font-size: 15px; }
.lab-goal-txt small { color: var(--text-3); font-size: 13px; }
.lab-reached { margin-left: auto; }
.lab-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; }
.lab-kpis > div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); }
.lab-kpis dt { font-size: 12px; color: var(--text-3); }
.lab-kpis dd { margin-top: 4px; font: italic 700 1.4rem var(--font-display); }
.lab-kpis dd small { display: block; font: 400 11.5px var(--font); color: var(--text-3); font-style: normal; }
.lab-price { display: grid; gap: 2px; font: 500 12px var(--font) !important; font-style: normal !important; }
.lab-price span { display: flex; gap: 6px; align-items: baseline; color: var(--text-2); }
.lab-price b { font: italic 700 14px var(--font-display); color: var(--carbon); min-width: 14px; }
.lab-price .pv-high b { color: var(--orange-ink); }
.lab-split { display: flex; gap: 4px; margin-top: 16px; }
.lab-split span { min-width: 0; padding: 8px 10px; border-radius: 10px; font: 600 12px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-split .is-go { background: var(--lime); }
.lab-split .is-maybe { background: #FFF1D6; color: #8A5A00; }
.lab-split .is-no { background: #EEEEEA; color: var(--text-2); }
.lab-fb { list-style: none; margin: 0; padding: 0; }
.lab-fb li { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line-2); align-items: start; }
.lab-fb li:first-child { border-top: 0; }
.lab-fb-who { display: flex; gap: 10px; align-items: center; color: var(--text); min-width: 0; }
.lab-fb-who strong { display: block; font-size: 14px; }
.lab-fb-who small { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-fb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-fb-comment { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; color: var(--text); }
.lab-fb-side { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.lab-brief { color: var(--text); white-space: normal; }
.lab-decide .stack { gap: 18px; }
.lab-decide-txt { font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.lab-decide-txt strong { display: block; font: italic 700 16px var(--font-display); color: var(--carbon); margin-bottom: 2px; }
.lab-launch { padding: 16px; border-radius: 16px; background: #F4F6EE; border: 1px solid #E2E8CF; }
.lab-launch .field { margin-bottom: 10px; }
.lab-launch .check { margin-bottom: 14px; }
.lab-extend label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.lab-extend-row { display: flex; gap: 8px; }
.lab-extend-row .input { flex: 1; min-width: 0; }
.lab-drop { color: var(--pomegranate); }
.lab-silent { list-style: none; margin: 0; padding: 0; }
.lab-silent li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line-2); }
.lab-silent li:first-child { border-top: 0; }
.lab-silent strong { display: block; font-size: 13.5px; }
.lab-silent small { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .lab-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-fb li { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
  .lab-fb-side { justify-content: space-between; }
  .lab-big { font-size: 2.4rem; }
}

/* ---- Commerçant : Le Labo ---- */
.lab-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: center; margin: 14px 0 30px; padding: 30px; border-radius: 26px; background: var(--carbon); color: #fff; position: relative; overflow: hidden; }
.lab-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(200,255,50,.28), transparent 70%); pointer-events: none; }
.lab-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--lime); color: var(--carbon); font: italic 700 11.5px var(--font-display); letter-spacing: .02em; }
.lab-eyebrow .ic { width: 13px; height: 13px; }
.lab-hero h1 { margin: 14px 0 8px; font-size: 2.4rem; color: #fff; }
.lab-hero h1 em { background: none; color: var(--lime); padding: 0; }
.lab-hero p { color: #B9BEC8; max-width: 460px; font-size: 14.5px; }
.lab-hero p strong { color: #fff; font-weight: 600; }
.lab-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; position: relative; z-index: 1; }
.lab-how li { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.lab-how li > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--lime); color: var(--carbon); font: italic 700 15px var(--font-display); margin-bottom: 10px; }
.lab-how strong { display: block; font: italic 700 14px var(--font-display); }
.lab-how small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: #A9AEB8; }
.lab-bar-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lab-bar-head h2 { font-size: 1.1rem; }
.lab-todo { padding: 4px 11px; border-radius: 999px; background: var(--orange); color: #fff; font: italic 700 12px var(--font-display); }
.lab-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 20px; margin-bottom: 32px; }
.lab-pc { display: flex; flex-direction: column; padding: 7px; border-radius: 20px; background: #fff; border: 1px solid #E8EAEE; color: var(--text); transition: transform .25s var(--ease), box-shadow .25s; }
.lab-pc:hover { color: var(--text); transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(17,19,24,.32); }
.lab-pc-img { position: relative; aspect-ratio: 4 / 4.2; border-radius: 14px; overflow: hidden; background: #F3F4F0; display: grid; place-items: center; color: var(--text-3); }
.lab-pc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.lab-pc-badge { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--carbon); color: var(--lime); font: italic 700 11px var(--font-display); }
.lab-pc-badge .ic { width: 12px; height: 12px; }
.lab-pc-when { top: 10px; right: 10px; }
.lab-pc-play { position: absolute; left: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(17,19,24,.72); color: #fff; }
.lab-pc-play .ic { fill: currentColor; stroke: none; width: 12px; height: 12px; margin-left: 2px; }
.lab-pc-body { display: flex; flex-direction: column; padding: 12px 8px 4px; flex: 1; }
.lab-pc-name { margin-top: 5px; font: 500 15px/1.35 var(--font); }
.lab-pc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin-top: 10px; }
.lab-pc-price > small { flex-basis: 100%; font-size: 11.5px; color: var(--text-3); }
.lab-pc-price b { font: italic 700 1.4rem/1 var(--font-display); letter-spacing: -.03em; }
.lab-pc-price b small { font-size: .66em; }
.lab-pc-price > span { font-size: 11.5px; color: var(--text-3); }
.lab-pc-goal { display: grid; gap: 5px; margin-top: 12px; }
.lab-pc-goal small { font-size: 11.5px; color: var(--text-2); }
.lab-pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px -8px 0; padding: 11px 8px 6px; border-top: 1px dashed #E4E7EC; margin-top: auto; }
.lab-pc-goal + .lab-pc-foot, .lab-pc-price + .lab-pc-foot { margin-top: 14px; }
.lab-pc-cta { display: inline-flex; align-items: center; gap: 6px; font: italic 700 13px var(--font-display); color: var(--carbon); }
.lab-pc:hover .lab-pc-cta { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.lab-pc-edit { font-size: 12px; color: var(--text-3); }
.lab-past ul { list-style: none; margin: 0; padding: 0; }
.lab-past li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line-2); }
.lab-past li:first-child { border-top: 0; }
.lab-past strong { display: block; font-size: 14px; }
.lab-past small { color: var(--text-3); font-size: 12px; }
.lab-past-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #EEEEEA; color: var(--text-2); }
.lab-past-ic.is-ok { background: var(--lime); color: var(--carbon); }
@media (max-width: 900px) {
  .lab-hero { grid-template-columns: minmax(0, 1fr); padding: 22px; margin-left: -4px; margin-right: -4px; }
  .lab-hero h1 { font-size: 2rem; }
  .lab-how { grid-template-columns: minmax(0, 1fr); }
  .lab-how li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 12px; }
  .lab-how li > span { grid-row: span 2; margin: 0; }
  .lab-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lab-pc { padding: 5px; border-radius: 16px; }
  .lab-pc-name { font-size: 13.5px; }
  .lab-pc-price b { font-size: 1.15rem; }
  .lab-pc-when { font-size: 10.5px; padding: 4px 8px; top: auto; bottom: 8px; right: 8px; }
  .lab-pc-badge { font-size: 10px; padding: 4px 8px; left: 8px; top: 8px; }
  .lab-pc-foot { flex-direction: column; align-items: flex-start; gap: 4px; margin-left: -6px; margin-right: -6px; padding: 9px 6px 4px; }
  .lab-pc-cta { font-size: 12px; }
}

/* ---- Commerçant : fiche d'un article au Labo ---- */
.px-lab { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--carbon); color: var(--lime); font: italic 700 11.5px var(--font-display); }
.px-lab .ic { width: 12px; height: 12px; }
.px-order.is-lab { --b-bg: var(--carbon); --b-bd: var(--carbon); --b-fg: var(--lime); background: var(--carbon); border-color: var(--carbon); color: var(--lime); }
.px-order.is-lab:hover { background: var(--graphite); color: var(--lime); }
.lab-box { margin-top: 22px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid #E8EAEE; box-shadow: 0 1px 2px rgba(17,19,24,.04); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.lab-box-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.lab-box-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--carbon); color: var(--lime); }
.lab-box-head strong { display: block; font: italic 700 18px var(--font-display); }
.lab-box-head small { font-size: 12.5px; color: var(--text-3); }
.lab-brief-box { padding: 12px 14px; border-radius: 14px; background: #F4F6EE; border-left: 4px solid var(--lime); margin-bottom: 14px; }
.lab-brief-box > span { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--lime-ink); }
.lab-brief-box p { margin-top: 4px; font-size: 14px; }
.lab-together { display: grid; gap: 8px; margin-bottom: 18px; font-size: 13.5px; }
.lab-together strong { font: italic 700 15px var(--font-display); }
.lab-together small { display: block; color: var(--text-3); font-size: 12px; }
.lab-verdicts { border: 0; padding: 0; margin: 0 0 16px; }
.lab-verdicts legend { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.lab-verdicts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lab-verdicts legend { grid-column: 1 / -1; }
.lab-vopt { position: relative; }
.lab-vopt input { position: absolute; opacity: 0; }
.lab-vopt span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font: 600 13px var(--font-display); text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.lab-vopt span .ic { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--surface-2); }
.lab-vopt:hover span { border-color: #C9CDD4; }
.lab-vopt input:checked + span { transform: translateY(-1px); }
.lab-vopt.is-go input:checked + span { border-color: var(--carbon); background: var(--lime); }
.lab-vopt.is-go input:checked + span .ic { background: var(--carbon); color: var(--lime); }
.lab-vopt.is-maybe input:checked + span { border-color: #E3A21A; background: #FFF6E2; }
.lab-vopt.is-no input:checked + span { border-color: var(--text-2); background: #F1F1EE; }
.lab-vopt input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }
.lab-fields-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.lab-fields-grid .field[hidden] { display: none; }
.lab-fields-grid .input-suffix { max-width: none; }
.lab-form .field { margin-bottom: 14px; }
.lab-form fieldset.field { border: 0; padding: 0; }
.lab-form fieldset.field legend { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.lab-price-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 0; }
.lab-price-seg span { text-align: center; }
.lab-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.lab-note .ic { flex: none; margin-top: 2px; }
.lab-mine { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lab-mine p { flex-basis: 100%; margin-top: 6px; font-size: 13px; }
@media (max-width: 560px) {
  .lab-fields-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-box { padding: 16px; border-radius: 18px; }
  .lab-vopt span { padding: 12px 4px; font-size: 12px; }
}
.lab-form fieldset.field legend { display: flex; justify-content: space-between; gap: 8px; width: 100%; }
.lab-kpis dd { text-align: left; }
.auth-pitch h1 em { background: none; padding: 0; color: var(--lime); }
.auth-foot { max-width: 56%; }
.auth-foot { row-gap: 4px; }

/* =====================================================================
   CONNEXION — panneau gauche v3 (éditorial, sobre)
   ===================================================================== */
.auth-side { padding: 44px clamp(40px, 5vw, 72px); }
.auth-side::before { width: 30%; height: 26%; opacity: .9; }
.auth-body { max-width: 470px; }
.auth-pitch { max-width: none; }
.auth-pitch h1 { font: 600 clamp(2.1rem, 3.2vw, 2.85rem)/1.08 var(--font-display); letter-spacing: -.035em; color: #F5F5EF; }
.auth-pitch h1 strong { display: block; font-weight: 600; font-style: normal; color: var(--lime); }
.auth-pitch p { margin-top: 20px; max-width: 420px; font-size: 15px; line-height: 1.65; color: #A3A8B3; }
.auth-features { list-style: none; margin: 44px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.08); }
.auth-features li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.af-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--lime); border: 1px solid rgba(200,255,50,.28); background: rgba(200,255,50,.05); }
.af-ic .ic { width: 17px; height: 17px; stroke-width: 1.7; }
.auth-features strong { display: block; font: 500 15px/1.35 var(--font-display); color: #F5F5EF; letter-spacing: -.005em; }
.auth-features small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: #8F949F; }
.auth-foot { max-width: 62%; display: flex; justify-content: space-between; gap: 6px 20px; font-size: 12px; color: #7D828D; letter-spacing: .01em; }
@media (max-height: 760px) { .auth-features { margin-top: 30px; } .auth-features li { padding: 13px 0; } .auth-pitch p { margin-top: 14px; } }
.auth-body { max-width: 520px; }
.auth-pitch h1 { font-size: clamp(2rem, 2.9vw, 2.6rem); }
.auth.is-partner .auth-pitch p { color: #A3A8B3; }
.auth.is-partner .auth-foot { color: #7D828D; }

/* =====================================================================
   ESPACE DÉVELOPPEUR — équipe, journaux
   ===================================================================== */
.tag.is-bad { --tag-bg: var(--pome-50); --tag-fg: var(--pomegranate); }
.is-bad { color: var(--pomegranate); font-weight: 600; }
.temp-pw { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; margin-bottom: 20px; background: var(--carbon); color: #fff; border: 0; }
.temp-pw-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--lime); color: var(--carbon); }
.temp-pw strong { font: 600 16px var(--font-display); }
.temp-pw p { color: #A9AEB8; font-size: 13.5px; margin: 4px 0 12px; }
.temp-pw-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.temp-pw code { padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(200,255,50,.35); color: var(--lime); font: 600 18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; user-select: all; }
.temp-pw .btn { --b-bg: rgba(255,255,255,.08); --b-bd: rgba(255,255,255,.14); --b-fg: #fff; }
.role-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.role-pick { position: relative; }
.role-pick input { position: absolute; opacity: 0; }
.role-pick span { display: block; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s; }
.role-pick strong { display: block; font-size: 14px; }
.role-pick small { color: var(--text-3); font-size: 12px; }
.role-pick input:checked + span { border-color: var(--carbon); background: var(--lime-50); }
.role-pick.is-dev input:checked + span { background: var(--carbon); color: #fff; }
.role-pick.is-dev input:checked + span small { color: var(--lime); }
.role-pick input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }
.dev-facts { margin: 0; }
.dev-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 22px; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.dev-facts > div:first-child { border-top: 0; }
.dev-facts dt { color: var(--text-3); }
.dev-facts dd { text-align: right; }
.dev-actions { display: grid; gap: 8px; }
.dev-actions .btn { justify-content: flex-start; }
.dev-danger { color: var(--pomegranate); }
.dev-danger:hover { --b-bd: var(--pomegranate); color: var(--pomegranate); }
.dev-delete summary { display: flex; align-items: center; gap: 8px; padding: 14px 22px; cursor: pointer; color: var(--text-2); font-size: 13.5px; list-style: none; }
.dev-delete summary::-webkit-details-marker { display: none; }
.dev-delete .panel-body { display: grid; gap: 10px; padding-top: 0; }
.dev-list { list-style: none; margin: 0; padding: 0; }
.dev-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 22px; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.dev-list li:first-child { border-top: 0; }
.dev-list small { display: block; color: var(--text-3); font-size: 12px; }
.dev-list time { font-size: 12px; color: var(--text-3); }
.dev-table td { vertical-align: middle; }
.dev-table tr.is-off td { opacity: .55; }
.dev-who { display: flex; gap: 10px; align-items: center; color: var(--text); }
.dev-who small { display: block; font-size: 12px; color: var(--text-3); }
.dev-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (max-width: 720px) { .role-picks { grid-template-columns: minmax(0, 1fr); } }
.role-pick { display: block; } .role-pick span { height: 100%; }

/* =====================================================================
   ORDRE DU CATALOGUE
   ===================================================================== */
.strat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px; }
.strat-card { position: relative; display: block; }
.strat-card input { position: absolute; opacity: 0; }
.strat-card > span { display: grid; gap: 4px; height: 100%; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.strat-card:hover > span { border-color: #C9CDD4; }
.strat-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); margin-bottom: 4px; }
.strat-card strong { font: 600 14px var(--font-display); }
.strat-card small { font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.strat-card input:checked + span { border-color: var(--carbon); box-shadow: 0 0 0 3px rgba(200,255,50,.45); }
.strat-card input:checked + span .strat-ic { background: var(--carbon); color: var(--lime); }
.strat-card input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }
.strat-out { margin-top: 14px; }
.ord-list { list-style: none; margin: 0; padding: 0; }
.ord-list.is-full { max-height: 70vh; overflow-y: auto; }
.ord-item { display: grid; grid-template-columns: auto auto 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 18px 8px 10px; border-top: 1px solid var(--line-2); background: #fff; transition: background .3s, box-shadow .2s; }
.ord-list:not(.is-full) .ord-item, .ord-item.is-pinned { grid-template-columns: auto 44px minmax(0, 1fr) auto; }
.ord-item:first-child { border-top: 0; }
.ord-item.is-out { opacity: .6; }
.ord-item.is-dragging { position: relative; z-index: 2; background: #FBFFF0; box-shadow: 0 12px 30px -12px rgba(17,19,24,.35), 0 0 0 2px var(--lime); border-radius: 12px; }
.ord-item.is-moved { background: var(--lime-50); }
.ord-list.is-sorting { user-select: none; cursor: grabbing; }
.ord-list.is-saving { opacity: .85; }
.ord-grip { width: 30px; height: 36px; border: 0; background: none; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); cursor: grab; touch-action: none; }
.ord-grip:hover, .ord-grip:focus-visible { background: var(--surface-2); color: var(--carbon); }
.ord-pos { min-width: 26px; text-align: right; font: italic 700 13px var(--font-display); color: var(--text-3); }
.ord-img { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #F3F4F0; display: block; }
.ord-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.ord-name { min-width: 0; color: var(--text); }
.ord-name strong { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-name small { display: block; font-size: 12px; color: var(--text-3); }
.ord-name small b { color: var(--carbon); }
.ord-name small em { font-style: normal; color: var(--lime-ink); font-weight: 600; }
.ord-moves { display: flex; gap: 2px; }
.ord-item.is-pinned .ord-name small { color: var(--lime-ink); }
.ord-add { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line-2); background: var(--surface-2); border-radius: 0 0 20px 20px; }
.ord-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(118px, 100%), 1fr)); gap: 14px; padding: 18px; }
.ord-tile { display: grid; gap: 6px; color: var(--text); font-size: 12.5px; }
.ord-tile-img { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #F3F4F0; border: 1px solid var(--line-2); }
.ord-tile-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.ord-tile-img b { position: absolute; left: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: #fff; font: italic 700 11px var(--font-display); box-shadow: 0 1px 4px rgba(17,19,24,.15); }
.ord-tile-img i { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--carbon); color: var(--lime); }
.ord-tile-img i .ic { width: 12px; height: 12px; }
.ord-tile.is-out { opacity: .55; }
.ord-tile-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.ord-hint { padding: 0 18px 16px; margin: 0; }
.ord-sleep-hint { padding: 0 18px; margin: 0 0 6px; }
.ord-sleep { list-style: none; margin: 0; padding: 0; }
.ord-sleep li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line-2); }
.ord-help ol { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-2); display: grid; gap: 4px; }
.ord-help strong { font: 600 14px var(--font-display); }
@media (max-width: 720px) {
  .ord-item { grid-template-columns: auto 40px minmax(0, 1fr) auto; padding: 8px 12px 8px 6px; gap: 8px; }
  .ord-pos { display: none; }
  .ord-moves .btn:last-child { display: none; }
  .ord-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ord-add .combo { grid-column: 1 / -1; }
}

/* Liste de choix avec recherche et création */
.combo { position: relative; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-pop); }
.combo-list[hidden] { display: none; }
.combo-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 14px; cursor: pointer; }
.combo-list li small { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.combo-list li:hover, .combo-list li.is-active { background: var(--surface-2); }
.combo-list .combo-create { color: var(--lime-ink); font-weight: 600; border-top: 1px dashed var(--line); margin-top: 4px; }
.combo-list .combo-create.is-active, .combo-list .combo-create:hover { background: var(--lime-50); }
.combo-list .combo-empty { color: var(--text-3); cursor: default; }

/* Fiche article : fournisseur, dépôt, remontée */
.sub-title .ic { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--text-2); }
.supply { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px dashed var(--line); }
.supply-card { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); }
.supply-card[hidden] { display: none; }
.supply-card .form-grid { gap: 10px 14px; }
.supply-card .field { margin-bottom: 0; }
.supply-card .hint { margin: 10px 0 0; }
.supply-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 12.5px; }
.supply-actions:not(:has(a:not([hidden]), span:not(:empty))) { display: none; }
.depot { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--line); }
.depot-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.depot-chip { position: relative; }
.depot-chip input { position: absolute; opacity: 0; }
.depot-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s; }
.depot-chip span small { font-size: 11px; color: var(--text-3); background: var(--surface-2); padding: 1px 6px; border-radius: 99px; }
.depot-chip input:checked + span { border-color: var(--carbon); background: var(--carbon); color: #fff; }
.depot-chip input:checked + span small { background: rgba(255,255,255,.14); color: var(--lime); }
.depot-chip input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }
.depot-chip.is-none span { color: var(--text-3); }
.depot-chip.is-add span { border-style: dashed; color: var(--lime-ink); }
.depot-chip.is-add input:checked + span { background: var(--lime); color: var(--carbon); border-color: var(--carbon); border-style: solid; }
.depot [data-depot-new][hidden] { display: none; }
.pin-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); margin-top: 6px; }
.pin-row-txt { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.pin-row-txt > .ic { margin-top: 3px; flex: none; }
.pin-row-txt strong { display: block; font-size: 14px; font-weight: 500; }
.pin-row-txt small { display: block; font-size: 12px; color: var(--text-3); }
.pin-row-txt small a { color: var(--carbon); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 2px; }
.pin-row select { width: auto; min-width: 150px; }
@media (max-width: 560px) { .pin-row { flex-direction: column; align-items: stretch; } }

/* =====================================================================
   CODE INTERNE (dépôt · fournisseur · référence) — back-office uniquement
   ===================================================================== */
.iref { display: inline-flex; align-items: stretch; border-radius: 8px; overflow: hidden; border: 1px solid #DCDFE5; font: 600 12px/1 var(--font-display); vertical-align: middle; background: #fff; white-space: nowrap; }
.iref > * { display: inline-flex; align-items: center; padding: 5px 7px; }
.iref-w { background: var(--carbon); color: var(--lime); letter-spacing: .04em; }
.iref-s { background: #E9F0FF; color: #2442A8; letter-spacing: .04em; border-right: 1px solid #DCDFE5; }
.iref-w.is-empty, .iref-s.is-empty { background: #F1F1EE; color: #B5B9C2; }
.iref-ref { color: var(--text); font-weight: 600; }
.iref.is-sm { font-size: 10.5px; border-radius: 6px; }
.iref.is-sm > * { padding: 3px 5px; }
.pcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.pcard-top .pcard-cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iref-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.iref-hint small { color: var(--text-3); }
.supply-code input, [data-depot-code] { text-transform: uppercase; letter-spacing: .06em; }
.depot-chip b { font: 700 10.5px var(--font-display); letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; background: var(--carbon); color: var(--lime); }
.depot-chip input:checked + span b { background: var(--lime); color: var(--carbon); }
.depot-chip-wrap { position: relative; display: inline-flex; }
.depot-del { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--text-3); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s; padding: 0; }
.depot-del .ic { width: 11px; height: 11px; }
.depot-chip-wrap:hover .depot-del, .depot-del:focus-visible { opacity: 1; }
.depot-del:hover { color: var(--pomegranate); border-color: var(--pomegranate); }
@media (hover: none) { .depot-del { opacity: 1; } }
.combo-list li { position: relative; }
.combo-del { margin-left: 4px; width: 22px; height: 22px; flex: none; border-radius: 6px; border: 0; background: none; color: var(--text-3); font-size: 16px; line-height: 1; cursor: pointer; }
.combo-del:hover { background: var(--pome-50); color: var(--pomegranate); }
.combo-list li > span { flex: 1; min-width: 0; }

/* Médias : glisser-déposer */
.media-grid[data-sortable] .media-item { cursor: grab; touch-action: auto; }
.media-grid[data-sortable] .media-item img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.media-grid .media-item.is-dragging { cursor: grabbing; transform: scale(1.04) rotate(-1deg); box-shadow: 0 18px 36px -14px rgba(17,19,24,.45), 0 0 0 3px var(--lime); z-index: 3; }
.media-grid .media-item.is-moved { box-shadow: 0 0 0 3px var(--lime); }
.media-grid.is-sorting .media-item:not(.is-dragging) { transition: transform .15s; }
.media-grip { position: absolute; left: 8px; bottom: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--carbon); box-shadow: 0 2px 8px rgba(17,19,24,.18); touch-action: none; opacity: 0; transition: opacity .15s; }
.media-item:hover .media-grip { opacity: 1; }
@media (hover: none) { .media-grip { opacity: 1; } }

/* Cartes article v2.1 : une seule photo à la fois au survol, prix mis en évidence */
.pc .pc-img, .pc .pc-img2, .lab-pc-img img { mix-blend-mode: normal; }
.pc .pc-media { background: #fff; }
.pc.has-alt:hover .pc-img { opacity: 0; }            /* la 2e photo remplace la 1re, sans superposition */
.pc .pc-price { align-items: center; gap: 6px; }
.pc .pc-price b { display: inline-block; padding: 4px 9px 3px; border-radius: 8px; background: var(--lime); color: var(--carbon); line-height: 1.1; box-shadow: inset 0 -2px 0 rgba(17,19,24,.12); }
.pc .pc-from { margin-right: 0; }
.pc .pc-margin { background: var(--carbon); color: var(--lime); }
.pc.is-out .pc-price b { background: #ECEDE8; color: var(--text-3); box-shadow: none; }
.lab-pc-price b { padding: 3px 8px 2px; border-radius: 8px; background: var(--lime); color: var(--carbon); }

/* =====================================================================
   LOGO PLUS GRAND + CONNEXION MOBILE (bandeau carbone)
   ===================================================================== */
.sidebar .brand { padding: 8px 8px 18px; }
.sidebar .brand-logo { height: 32px; }
.sidebar .brand-space { font-size: 10px; padding: 4px 8px 3px; }
.auth-side > .brand .brand-logo { height: 40px; }
.auth-side > .brand .brand-space { font-size: 11px; padding: 5px 9px 4px; }
@media (max-width: 900px) {
  .sidebar .brand-logo { height: 30px; }
  /* Connexion sur téléphone : le panneau de marque devient un bandeau en haut, la carte de connexion en dessous */
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-side { display: flex; gap: 26px; justify-content: flex-start; padding: calc(26px + env(safe-area-inset-top)) 22px 34px; border-radius: 0 0 28px 28px; }
  .auth-side::before { width: 34%; height: 46%; }
  .auth-side > .brand .brand-logo { height: 36px; }
  .auth-body { max-width: none; }
  .auth-pitch h1 { font-size: 1.85rem; line-height: 1.12; }
  .auth-pitch p, .auth-features, .auth-foot { display: none; }
  .auth-card .brand { display: none !important; }
  .auth-main { align-items: flex-start; padding: 28px 22px 40px; }
  .auth-card h2 { font-size: 1.35rem; }
  .auth-card .lead { margin-bottom: 24px; }
}

/* =====================================================================
   COMMANDES
   ===================================================================== */
/* Barre du haut : panier du commerçant */
.tb-cart { position: relative; width: 38px; height: 38px; border-radius: 10px; }
.tb-cart-n { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; background: var(--lime); color: var(--carbon); font: italic 700 10.5px var(--font-display); box-shadow: 0 0 0 2px #fff; }
.tb-cart-n[hidden] { display: none; }
.tb-cart-n.is-pop { animation: pop .45s var(--ease); }
@keyframes pop { 40% { transform: scale(1.45); } }
.toast-act { margin-left: 10px; padding: 5px 10px; border-radius: 8px; background: var(--lime); color: var(--carbon) !important; font: 600 12.5px var(--font-display); white-space: nowrap; }

/* Compteur +/− */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.stepper button { width: 32px; height: 34px; border: 0; background: none; display: grid; place-items: center; color: var(--text-2); cursor: pointer; }
.stepper button:hover { background: var(--surface-2); color: var(--carbon); }
.stepper input { width: 46px; height: 34px; border: 0; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); text-align: center; font: 600 14px var(--font-display); -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; background: var(--lime-50); }
.stepper.is-lg button { width: 42px; height: 44px; }
.stepper.is-lg input { width: 64px; height: 44px; font-size: 16px; }

/* Ajout à la commande (fiche article) */
.buy { display: grid; gap: 12px; width: 100%; scroll-margin-top: calc(var(--topbar-h) + 20px); }
.buy-units { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; margin: 0; }
.buy-units span { text-align: center; }
.buy-units em { font-style: normal; font-weight: 700; color: var(--lime-ink); }
.buy-vars { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; padding-right: 2px; }
.buy-var { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 6px 6px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; }
.buy-var.is-out { opacity: .5; }
.buy-var-txt strong { display: block; font-size: 13.5px; font-weight: 500; }
.buy-var-txt small { font-size: 12px; color: var(--text-3); }
.buy-one { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.buy-one-lbl { font-size: 13.5px; color: var(--text-2); font-weight: 500; }
.buy-foot { display: flex; align-items: center; gap: 12px; }
.buy-sum { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.buy-sum b { font: italic 700 1.15rem var(--font-display); }
.buy-sum small { font-size: 12px; color: var(--text-3); }
.buy-add { flex: none; }
.buy-add.is-loading { opacity: .7; }
.buy-ask { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); justify-self: start; }
.buy-ask:hover { color: #1DA851; }
.px-cta:has(.buy) { display: block; }

/* Panier */
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 110px auto; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line-2); }
.cart-line:first-child { border-top: 0; }
.cart-line.has-issue { background: #FFFBF5; }
.cart-img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #F3F4F0; display: grid; place-items: center; color: var(--text-3); }
.cart-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { min-width: 0; display: grid; gap: 2px; }
.cart-info strong { font-size: 14.5px; font-weight: 500; }
.cart-info small { font-size: 12.5px; color: var(--text-3); }
.cart-issue { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--orange-ink); font-weight: 500; }
.cart-qty { display: grid; justify-items: center; gap: 3px; }
.cart-qty small { font-size: 11px; color: var(--text-3); }
.cart-total { text-align: right; font: italic 700 15px var(--font-display); }
.cart-clear { padding: 8px 14px 12px; border-top: 1px solid var(--line-2); text-align: right; }
.sum { margin: 0; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; }
.sum dt { color: var(--text-2); }
.sum .is-sub { padding-top: 0; font-size: 12.5px; }
.sum .is-sub dt, .sum .is-sub dd { color: var(--text-3); }
.sum .is-total { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--carbon); color: #fff; }
.sum .is-total dt { color: #fff; font-weight: 600; }
.sum .is-total dd { font: italic 700 1.15rem var(--font-display); color: var(--lime); }
.cart-pay { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 18px; padding: 10px 12px; border-radius: 12px; background: var(--lime-50); font-size: 13px; }
.cart-pay .ic { flex: none; margin-top: 2px; }
.cart-send .form-grid { gap: 10px; }
.cart-send .field { margin-bottom: 0; }
.cart-send .btn-block { margin-top: 14px; }
.cart-after { margin-top: 10px; text-align: center; }
@media (max-width: 720px) {
  .cart-line { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img info rm" "img qty total"; gap: 8px 12px; padding: 14px 14px; }
  .cart-img { grid-area: img; width: 56px; height: 56px; }
  .cart-info { grid-area: info; } .cart-qty { grid-area: qty; justify-items: start; } .cart-total { grid-area: total; align-self: center; } .cart-rm { grid-area: rm; }
}

/* Frise d'avancement */
.steps { list-style: none; margin: 0; padding: 22px 22px 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: s; }
.steps li { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; color: var(--text-3); }
.steps li::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.steps li:first-child::before { display: none; }
.steps li.is-done::before, .steps li.is-now::before { background: var(--carbon); }
.steps-dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); color: var(--carbon); }
.steps li.is-done .steps-dot { background: var(--carbon); border-color: var(--carbon); color: var(--lime); }
.steps li.is-now .steps-dot { background: var(--lime); border-color: var(--carbon); box-shadow: 0 0 0 5px rgba(200,255,50,.35); }
.steps strong { font: 600 13px var(--font-display); color: var(--text-2); }
.steps li.is-done strong, .steps li.is-now strong { color: var(--carbon); }
.steps small { font-size: 11.5px; }
.ord-closed { display: flex; gap: 12px; align-items: flex-start; padding: 18px 22px; color: var(--pomegranate); }
.ord-closed strong { display: block; color: var(--carbon); }
.ord-closed p { color: var(--text-2); margin-top: 2px; }
.ord-closed small { color: var(--text-3); }
.ord-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line-2); background: var(--surface-2); border-radius: 0 0 20px 20px; font-size: 14px; }
.ord-steps-panel { margin-bottom: 20px; }

/* Listes de commandes */
.olist { display: grid; gap: 10px; }
.ocard { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto 18px; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 18px; background: #fff; border: 1px solid #E8EAEE; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.ocard:hover { color: var(--text); border-color: #D2D5DB; box-shadow: 0 12px 24px -18px rgba(17,19,24,.35); }
.ocard-img { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: #F3F4F0; display: grid; place-items: center; color: var(--text-3); }
.ocard-img img { width: 100%; height: 100%; object-fit: cover; }
.ocard-main strong { display: block; font: 600 15px var(--font-display); }
.ocard-main small { font-size: 12.5px; color: var(--text-3); }
.ocard-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ocard-total { font: italic 700 16px var(--font-display); }
@media (max-width: 720px) { .ocard { grid-template-columns: 48px minmax(0, 1fr) auto; } .ocard-tags { grid-column: 2 / -1; justify-content: flex-start; order: 5; } .ocard > .ic { display: none; } }
.balance { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 18px; border-radius: 18px; background: var(--carbon); color: #fff; }
.balance-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--lime); color: var(--carbon); }
.balance small { display: block; font-size: 12px; color: #A9AEB8; }
.balance strong { font: italic 700 1.3rem var(--font-display); color: var(--lime); }
.balance-late { margin-left: auto; text-align: right; }
.balance-late strong { color: #FF9C7A; }
.orders-table td small { display: block; font-size: 12px; color: var(--text-3); }
.orders-table tr.is-link { cursor: pointer; }
.orders-table tr.is-link:hover td { background: var(--surface-2); }

/* Détail */
.ord-table td small { display: block; font-size: 12px; color: var(--text-3); }
.ord-table .num-col { text-align: right; white-space: nowrap; }
.ord-table .ord-qty { display: inline-block; }
.ord-sum { padding: 6px 22px 20px; max-width: 360px; margin-left: auto; }
.docs { display: grid; gap: 8px; }
.doc-btn { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--text); }
.doc-btn:hover { border-color: var(--carbon); color: var(--text); }
.doc-btn > .ic { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--carbon); color: var(--lime); flex: none; }
.doc-btn strong { display: block; font-size: 13.5px; font-weight: 600; }
.doc-btn small { font-size: 12px; color: var(--text-3); }
.pay-sum { padding: 4px 22px 14px; }
.pay-list { list-style: none; margin: 0; padding: 0 0 6px; }
.pay-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 9px 22px; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.pay-list li small { display: block; font-size: 11.5px; color: var(--text-3); }
.pay-form { display: grid; gap: 8px; padding: 14px 22px 20px; border-top: 1px solid var(--line-2); background: var(--surface-2); border-radius: 0 0 20px 20px; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ord-ship { display: grid; gap: 2px; font-size: 13.5px; }
.ord-ship strong { font-size: 14px; }
.ord-ship .sub-title { margin: 14px 0 4px; }
.ord-note { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.ord-bal { margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.ord-bal.is-late { color: var(--pomegranate); font-weight: 600; }
.next-step { margin-bottom: 20px; }
.next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line-2); background: var(--surface-2); }
.next-step .alert { margin: 0 22px 14px; }
.next-hint { padding: 0 22px 16px; margin: 0; background: var(--surface-2); border-radius: 0 0 20px 20px; }
.next-hint form.inline { display: inline; }
.next-hint .link-btn { color: var(--pomegranate); }
.ship-form .input { width: auto; flex: 1; min-width: 160px; }
.refuse { position: relative; }
.refuse summary { list-style: none; }
.refuse summary::-webkit-details-marker { display: none; }
.refuse[open] summary { background: var(--pome-50); color: var(--pomegranate); }
.refuse-form { display: flex; gap: 8px; margin-top: 10px; min-width: min(460px, 80vw); }
.refuse-form .input { flex: 1; }
.callout.is-order { background: var(--carbon); color: #fff; border: 0; }
.callout.is-order strong { color: var(--lime); }
.vat-cards { display: grid; gap: 8px; }
.vat-example { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.vat-example small { font-size: 12px; color: var(--text-3); }
@media (max-width: 720px) {
  .steps { padding: 18px 10px 14px; }
  .steps small { display: none; }
  .steps strong { font-size: 11.5px; }
  .ship-form .btn { width: 100%; }
  .refuse-form { flex-direction: column; min-width: 0; }
}
.grid-aside > * { min-width: 0; }
.cart-send .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cart-send .form-grid .span-2 { grid-column: 1 / -1; }
.cart-send .input { min-width: 0; }
.stack > * { min-width: 0; }
.cart-send .btn-block { white-space: normal; height: auto; min-height: 52px; padding-top: 10px; padding-bottom: 10px; }

/* ===== Étape 17 : numérotation, logo des documents, exonération ===== */
.series-legend { margin: 0 0 12px; font-size: 12.5px; color: var(--text-3); line-height: 1.9; }
.series-legend code { font: 600 11.5px/1 var(--font-mono, ui-monospace, monospace); padding: 3px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text); margin-right: 2px; }
.series-legend span { font-style: italic; }
.series { display: grid; gap: 0; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
.series-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 118px minmax(150px, .9fr); gap: 8px 12px; align-items: center; padding: 12px 14px; }
.series-row + .series-row { border-top: 1px solid var(--line-2); }
.series-row.has-error { background: #FFF6F4; }
.series-name { font-weight: 600; font-size: 13.5px; }
.series-row .input { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; letter-spacing: .01em; }
.series-next { display: grid; gap: 2px; }
.series-next span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.series-next .input { height: 34px; }
.series-out { display: grid; gap: 1px; min-width: 0; }
.series-out b { font-size: 15px; letter-spacing: .02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-out b.is-bad { color: var(--danger, #C2361B); font-size: 12.5px; font-weight: 500; }
.series-out small { font-size: 11.5px; color: var(--text-3); font-style: italic; }
.series-chips { grid-column: 2 / -1; }
.series-chips .chip { cursor: pointer; font: inherit; font-size: 11.5px; padding: 3px 9px; font-family: var(--font-mono, ui-monospace, monospace); }
.series-row .field-error { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) {
  .series-row { grid-template-columns: minmax(0, 1fr) 104px; }
  .series-name, .series-out, .series-chips { grid-column: 1 / -1; }
}
.doc-logo { display: grid; gap: 10px; justify-items: start; }
.doc-logo-prev { width: 100%; height: 96px; display: grid; place-items: center; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; background: #fff; }
.doc-logo-prev img { max-width: 100%; max-height: 68px; object-fit: contain; }
.doc-logo-prev .brand-logo { height: 34px; width: auto; }
.doc-logo .btn { cursor: pointer; }
.vat-ex { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.vat-ex .hint { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) { .vat-ex { grid-template-columns: minmax(0, 1fr); } }
.dev-purge .panel-head h2 { display: flex; align-items: center; gap: 8px; }
.dev-purge .dev-tag { background: #1B1F27; color: #fff; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.dev-purge .panel-body { display: grid; gap: 10px; }
.dev-purge .panel-body > p { margin: 0; }
.purge-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.purge-list li { display: flex; gap: 8px; }
.purge-list li::before { content: "—"; color: var(--pomegranate); }
.purge-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #FFF4EC; color: var(--orange-ink, #8A3B12); font-size: 12.5px; margin: 0 !important; }
.purge-note .ic { flex: none; margin-top: 1px; }
.dev-purge .field { margin: 0; }

/* ===== Étape 18 : console développeur ===== */
.checks .is-warn .ck-ic { background: var(--saffron-50, #FFF4E0); color: var(--orange-ink, #8A3B12); }
.dc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.dc-kpi { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); min-width: 0; }
.dc-kpi small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dc-kpi strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-kpi span { font-size: 12px; color: var(--text-3); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .dc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dc-kpis { grid-template-columns: minmax(0, 1fr); } }
.dc-howto p { margin: 0 0 10px; font-size: 13.5px; }
.dc-howto code, .dc-import code, .dc-missing code { font-size: 11.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; word-break: break-all; }
.dc-import { display: grid; gap: 10px; }
.dc-import .hint { margin: 0; }
.dc-old { display: grid; gap: 8px; }
.dc-old .strat-card strong { font-size: 12px; word-break: break-all; }
.dc-missing { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; }
.dc-missing li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 22px; border-top: 1px solid var(--line-2); font-size: 13px; }
.dc-missing li span { display: grid; gap: 3px; min-width: 0; }
.dc-dl { margin: 0; padding: 6px 22px 14px; display: grid; }
.dc-dl > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.dc-dl > div:first-child { border-top: 0; }
.dc-dl dt { color: var(--text-3); }
.dc-dl dd { margin: 0; word-break: break-all; }
.dc-dl dd small { display: block; font-size: 11.5px; color: var(--text-3); font-style: italic; word-break: normal; }
@media (max-width: 560px) { .dc-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.dc-bad { color: var(--pomegranate); }
.dc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dc-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 10px 22px; font-weight: 600; }
.dc-table td { padding: 8px 22px; border-top: 1px solid var(--line-2); }
.dc-table .num { text-align: right; }
.dc-migr li { padding: 10px 22px; }
.dc-log { margin: 0; padding: 14px 22px; max-height: 360px; overflow: auto; font-size: 11.5px; line-height: 1.5; background: var(--ink); color: #E6E8F5; border-radius: 0 0 20px 20px; white-space: pre-wrap; word-break: break-all; }

/* ===== Étape 18 : guide application & notifications ===== */
.guide { display: grid; gap: 16px; max-width: 860px; }
.g-step { overflow: hidden; }
.g-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 20px 22px 6px; }
.g-head h2 { margin: 2px 0 2px; font-size: 18px; }
.g-head p { margin: 0; font-size: 13.5px; color: var(--text-3); }
.g-num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: #fff; font: italic 700 18px/1 var(--font-display, inherit); }
.g-step.is-done .g-num { background: var(--mint); }
.g-body { padding: 14px 22px 22px 76px; display: grid; gap: 14px; }
@media (max-width: 640px) { .g-head { grid-template-columns: 34px minmax(0, 1fr); padding: 18px 16px 4px; } .g-head .tag { grid-column: 2; justify-self: start; } .g-num { width: 34px; height: 34px; font-size: 16px; } .g-body { padding: 12px 16px 18px; } }
.g-body .state { margin: 0; }
.g-quick { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.g-quick img { border-radius: 14px; }
.g-quick small { display: block; font-size: 12.5px; color: var(--text-3); }
@media (max-width: 520px) { .g-quick { grid-template-columns: 48px minmax(0, 1fr); } .g-quick .btn { grid-column: 1 / -1; } .g-quick img { width: 48px; height: 48px; } }
.g-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); margin-bottom: 4px; flex-wrap: wrap; }
.g-tabs button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); padding: 7px 12px; border-radius: 9px; cursor: pointer; }
.g-tabs button.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.g-steps { list-style: none; margin: 0; padding: 0; counter-reset: g; display: grid; gap: 0; }
.g-steps li { counter-increment: g; position: relative; display: grid; gap: 3px; padding: 10px 0 12px 44px; font-size: 14px; }
.g-steps li::before { content: counter(g); position: absolute; left: 0; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; z-index: 1; }
.g-steps li + li::after { content: ""; position: absolute; left: 14px; top: -14px; height: 22px; width: 1.5px; background: var(--line-2); }
.g-steps li small { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.g-steps strong { font-weight: 600; line-height: 1.7; }
.g-steps.is-compact li { padding-top: 7px; padding-bottom: 8px; }
.g-key { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 8px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; vertical-align: 1px; }
.g-key .ic { width: 14px; height: 14px; color: var(--cobalt); }
.g-tip { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); font-style: italic; }
.g-ask { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: center; }
@media (max-width: 640px) { .g-ask { grid-template-columns: minmax(0, 1fr); } }
.g-mock { padding: 16px; border-radius: 18px; background: linear-gradient(160deg, #1B1F27, #2B3140); }
.g-mock-card { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; font-size: 12.5px; }
.g-mock-card b { font-weight: 600; line-height: 1.35; }
.g-mock-card span { display: flex; justify-content: flex-end; gap: 14px; }
.g-mock-card i { font-style: normal; font-weight: 600; color: var(--text-3); }
.g-mock-card i.is-yes { color: #fff; background: var(--cobalt); padding: 3px 10px; border-radius: 999px; box-shadow: 0 0 0 4px rgba(47,75,216,.18); }
.g-denied { display: grid; gap: 10px; }
.g-foot { margin: 0; font-size: 12.5px; color: var(--text-3); }
.g-prefs { list-style: none; margin: 0; padding: 4px 0 8px; }
.g-prefs li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 22px 12px 76px; border-top: 1px solid var(--line-2); font-size: 14px; }
.g-prefs li:first-child { border-top: 0; }
.g-prefs .f-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.g-prefs small { display: block; font-size: 12.5px; color: var(--text-3); }
.g-prefs .switch-row { margin: 0; }
.g-prefs .switch-row em { font-style: italic; font-size: 12px; color: var(--text-3); min-width: 46px; }
.g-prefs input:disabled + .switch { opacity: .55; }
@media (max-width: 640px) { .g-prefs li { padding: 12px 16px; grid-template-columns: 32px minmax(0, 1fr) auto; } .g-prefs .switch-row em { display: none; } }

/* Rappel discret (installer / activer) */
.nag { position: fixed; z-index: 70; left: 50%; bottom: 18px; width: min(560px, calc(100% - 24px)); transform: translate(-50%, 140%); transition: transform .45s var(--ease, cubic-bezier(.2,.8,.2,1)); display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; border-radius: 18px; background: #14171D; color: #fff; box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); }
.nag.is-in { transform: translate(-50%, 0); }
.nag-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--lime, #D4FF3A); color: #14171D; }
.nag-txt { display: grid; gap: 2px; min-width: 0; }
.nag-txt strong { font-size: 14px; }
.nag-txt small { font-size: 12px; color: rgba(255,255,255,.66); font-style: italic; }
.nag-act { display: flex; gap: 4px; }
.nag .btn-ghost { color: rgba(255,255,255,.7); --b-bg: transparent; --b-bd: transparent; }
@media (max-width: 900px) {
  .nag { bottom: calc(76px + env(safe-area-inset-bottom)); grid-template-columns: 38px minmax(0, 1fr); }
  .nag-ic { width: 38px; height: 38px; }
  .nag-act { grid-column: 1 / -1; justify-content: flex-end; }
}
.dc-howto .g-steps li { font-size: 13.5px; }

/* ===== Étape 19 : commandes ===== */
.ord-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ord-kpi { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); transition: border-color .15s, transform .15s; }
.ord-kpi:hover { border-color: var(--carbon); color: var(--text); transform: translateY(-1px); }
.ord-kpi > span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.ord-kpi strong { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ord-kpi strong small { font-size: 13px; font-weight: 500; color: var(--text-3); }
.ord-kpi > small { font-size: 12px; color: var(--text-3); font-style: italic; }
.ord-kpi .is-late { color: var(--pomegranate); font-weight: 600; font-style: normal; }
.ord-kpi.is-hot { background: var(--carbon); border-color: var(--carbon); color: #fff; }
.ord-kpi.is-hot > span, .ord-kpi.is-hot > small { color: rgba(255,255,255,.7); }
.ord-kpi.is-hot strong { color: var(--lime); }
@media (max-width: 1000px) { .ord-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.orders-table td small { display: block; font-size: 11.5px; color: var(--text-3); }
.ot-docs { white-space: nowrap; }
.doc-chip { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; margin-right: 3px; border-radius: 6px; border: 1px solid var(--line); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-2); background: #fff; }
.doc-chip:hover { border-color: var(--carbon); color: var(--text); }
.doc-chip.is-fac { background: var(--carbon); border-color: var(--carbon); color: var(--lime); }
.doc-chip.is-av { background: var(--pome-50); border-color: #F3C7CD; color: var(--pomegranate); }
.ot-act { text-align: right; white-space: nowrap; }
.ot-act form { display: inline; }
.ord-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-end; padding: 12px 22px; border-top: 1px solid var(--line-2); background: var(--surface-2); border-radius: 0 0 20px 20px; font-size: 13px; color: var(--text-2); }
.ord-foot b { color: var(--text); margin-left: 4px; }
@media (max-width: 760px) {
  .orders-table thead { display: none; }
  .orders-table, .orders-table tbody { display: block; }
  .orders-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  .orders-table td { display: block; padding: 0 !important; border: 0; }
  .orders-table .ot-no { grid-column: 1; }
  .orders-table .ot-total { grid-column: 2; grid-row: 1; text-align: right; }
  .orders-table .ot-client { grid-column: 1 / -1; }
  .orders-table .ot-state { grid-column: 1; grid-row: 3; }
  .orders-table .ot-pay { grid-column: 2; grid-row: 3; text-align: right; }
  .orders-table .ot-docs { grid-column: 1; grid-row: 4; align-self: center; }
  .orders-table .ot-act { grid-column: 2; grid-row: 4; }
  .page-head .actions > * { min-width: 0; } .page-head .actions .btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-content: center; }
}
/* Fiche commande */
.moves .panel-head .muted { font-size: 12px; font-style: italic; }
.move-list { list-style: none; margin: 0; padding: 0; }
.move-list > li { border-top: 1px solid var(--line-2); }
.move-list > li:first-child { border-top: 0; }
.move summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 22px; cursor: pointer; list-style: none; }
.move summary::-webkit-details-marker { display: none; }
.move summary:hover { background: var(--surface-2); }
.move summary strong { display: block; font-size: 14px; font-weight: 600; }
.move summary small { display: block; font-size: 12.5px; color: var(--text-3); }
.move summary > .ic { color: var(--text-3); transition: transform .2s; }
.move[open] summary > .ic { transform: rotate(180deg); }
.mv-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.is-danger .mv-ic { background: var(--pome-50); color: var(--pomegranate); }
.move-form { display: grid; gap: 10px; padding: 4px 22px 16px 68px; }
.move-form .btn { justify-self: start; }
@media (max-width: 560px) { .move-form { padding-left: 22px; } }
.ord-hist { list-style: none; margin: 0; padding: 8px 22px 16px; display: grid; }
.ord-hist li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 8px 0; font-size: 13.5px; }
.ord-hist li + li::before { content: ""; position: absolute; left: 14px; top: -10px; height: 18px; width: 1.5px; background: var(--line-2); }
.oh-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.oh-dot.is-ok, .ord-hist .is-pay .oh-dot { background: var(--mint-50); color: var(--mint); }
.oh-dot.is-danger { background: var(--pome-50); color: var(--pomegranate); }
.oh-dot.is-info, .oh-dot.is-lab { background: var(--cobalt-50); color: var(--cobalt); }
.oh-dot.is-incoming { background: var(--saffron-50, #FFF4E0); color: var(--orange-ink, #8A3B12); }
.ord-hist small { display: block; font-size: 12px; color: var(--text-3); }
.ord-hist time { font-size: 12px; color: var(--text-3); white-space: nowrap; padding-top: 5px; }
.due-edit summary { cursor: pointer; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.due-edit summary::-webkit-details-marker { display: none; }
.due-edit summary .ic { color: var(--text-3); width: 14px; height: 14px; }
.due-edit form { display: flex; gap: 6px; margin-top: 6px; }
.due-edit .input { height: 34px; font-size: 13px; }
.doc-btn.is-credit > .ic { background: var(--pomegranate); color: #fff; }
/* Documents comptables */
.dc-period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dc-month label { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.dc-month select { height: 38px; font-size: 13.5px; }
.acc-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); overflow: hidden; }
.acc-sum > div { display: grid; gap: 3px; padding: 16px 18px; border-left: 1px solid var(--line-2); min-width: 0; }
.acc-sum > div:first-child { border-left: 0; }
.acc-sum small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.acc-sum strong { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.acc-sum span { font-size: 12px; color: var(--text-3); font-style: italic; }
.acc-sum .is-net { background: var(--carbon); color: #fff; }
.acc-sum .is-net strong { color: var(--lime); }
.acc-sum .is-net small, .acc-sum .is-net span { color: rgba(255,255,255,.65); }
@media (max-width: 1100px) { .acc-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acc-sum > div { border-top: 1px solid var(--line-2); } .acc-sum .is-net { grid-column: 1 / -1; grid-row: 1; } }
.subnav a b { margin-left: 4px; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-3); }
.subnav a.is-active b { background: var(--carbon); color: var(--lime); }
.acc-table td, .acc-table th { white-space: nowrap; }
.acc-no { font-weight: 600; color: var(--text); border-bottom: 1px dashed var(--line); }
.acc-act { text-align: right; }
.acc-table tfoot td { padding: 12px 16px; font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--line); }
.acc-table tfoot td:first-child { padding-left: 22px; }


/* =====================================================================
   FILET RESPONSIVE (étape 20)
   Une colonne de grille implicite prend la largeur de son contenu le plus large
   (bouton, référence…) et fait déborder la page sur petit écran, surtout quand le
   téléphone grossit le texte. Ces grilles reçoivent une colonne qui peut rétrécir ;
   :where() garde une spécificité nulle, donc toute règle qui fixe des colonnes l'emporte.
   ===================================================================== */
:where(.field, .auth, .manifest, .manifest-item, .app, .avatar, .grid, .ledger, .feed li, .feed .f-ic, .roadmap li, .toasts, .tabbar a, .page-head .actions, .stack, .form-grid, .meter, .tip ul, .device, .device-ic, .steps, .alert-list, .alert-list li, .alert-list .f-ic, .offline, .pin-ready .pin-ui, .pin-keys, .pin-key, .locked, .locked-ic, .group-grid, .group-stats, .onboarding-ic, .suggest, .suggest-item button, .people li, .people-main, .pick-list label, .pick-txt, .pick-check, .timeline li, .empty.big, .type-switch, .status-pick, .status-opt span, .lr-ic, .access-steps, .access-steps li, .access-cta, .fsec-ic, .type-cards, .type-card .tc-ic, .type-card .tc-txt, .group-picks, .pv-cam, .pv-body, .pv-ch, .steps-visual, .steps-visual li, .sv-ic, .sv-txt, .why ul, .why li, .pthumb, .pgrid, .pcard-img, .pcard-video, .pcard-body, .media-grid, .media-badge.is-lock, .video-ph, .mbtn, .drop-zone, .dz-ic, .buy-row, .costs, .cost-row, .avail-cards, .vis-cards, .avail-card span, .opt-defs, .opt-def, .status-seg, .margin-box, .cat-ic, .cat-main, .checks li, .ck-ic, .ck-txt, .mode-cards, .mc-ic, .mc-txt, .mix-cards, .mix-card span, .sp-ic, .reach > span:last-child, .reach-ic, .demand li, .dm-img, .dm-txt, .cx-hero, .cx-hero-main, .cx-spot, .cx-spot-txt, .cx-spot-go, .cx-grid, .cx-noimg, .cx-vid, .cx-fav, .cx-info, .cx-empty, .cx-empty-ic, .px, .px-gallery, .px-thumb, .px-slide, .video-poster, .px-slide .play, .video-link, .px-nav, .px-fav, .px-info, .px-buy, .px-price, .px-pack, .px-pack-ic, .px-pack-txt, .px-gain, .px-gain > div, .px-cta, .px-facts, .px-facts li > span:last-child, .px-variants, .px-var-txt, .px-kit, .px-kit-card, .px-kit-head, .px-step, .px-kit-grid, .px-kit-ph span, .px-details, .buy-bar span, .arrivals, .arr-list, .arr-item, .arr-img, .arr-txt, .sh-head, .sh-arrow, .sh-layout, .sf-opt, .sf-range, .sf-check, .sf-box, .sh-grid, .pc-noimg, .pc-media-tags span, .pc-fav, .pc-body, .sh-more, .sh-empty, .sh-empty-ic, .sf-close, .vn, .vn-play, .vn-body, .vn-list, .px-voice, .px-voice-head > span:last-child, .px-voice-ic, .rec-btn, .rec-txt, .rec-live, .rec-step[data-rec-step="review"], .rec-save, .media-play, .player-close, .vtools, .pv-poster, .pv-play, .pv-out, .px-thumb.is-video .pt-play, .vx-cell, .ct-uni-txt, .ct-bar, .fx-opt, .fx-check, .fx-box, .fx-range, .fx-range label, .ct-grid, .ct-empty, .ct-empty-ic, .drawer-x, .dg-seg span, .dg-range, .dg-range label, .dg-switch, .dg-ic, .dg-lbl, .social-ic, .social-open, .pv-links, .rte-btn, .rte-grid, .auth-points, .ap-ic, .lab-grid, .lab-tile-img, .lab-tile-body, .lab-intro, .lab-steps, .lab-steps li, .lab-steps li > span, .lab-thumb, .lab-kpis, .lab-price, .lab-fb li, .lab-silent li, .lab-hero, .lab-how, .lab-how li > span, .lab-pgrid, .lab-pc-img, .lab-pc-play, .lab-pc-goal, .lab-past li, .lab-past-ic, .lab-how li, .lab-box-ic, .lab-together, .lab-verdicts, .lab-fields-grid, .lab-price-seg, .auth-features li, .af-ic, .temp-pw-ic, .role-picks, .dev-actions, .dev-delete .panel-body, .dev-list li, .strat-cards, .strat-card > span, .strat-ic, .ord-item, .ord-grip, .ord-add, .ord-preview, .ord-tile, .ord-tile-img b, .ord-tile-img i, .ord-sleep li, .ord-help ol, .depot-del, .media-grip, .tb-cart-n, .stepper button, .buy, .buy-units, .buy-vars, .buy-var, .buy-sum, .cart-line, .cart-img, .cart-info, .cart-qty, .steps li, .steps-dot, .olist, .ocard, .ocard-img, .balance-ic, .docs, .pay-list li, .pay-form, .pay-row, .ord-ship, .vat-cards, .series, .series-row, .series-next, .series-out, .doc-logo, .doc-logo-prev, .vat-ex, .dev-purge .panel-body, .purge-list, .dc-kpis, .dc-kpi, .dc-import, .dc-old, .dc-missing li span, .dc-dl, .dc-dl > div, .guide, .g-head, .g-num, .g-body, .g-quick, .g-steps, .g-steps li, .g-ask, .g-mock-card, .g-denied, .g-prefs li, .g-prefs .f-ic, .nag, .nag-ic, .nag-txt, .ord-kpis, .ord-kpi, .orders-table tr, .move summary, .mv-ic, .move-form, .ord-hist, .ord-hist li, .oh-dot, .acc-sum, .acc-sum > div) { grid-template-columns: minmax(0, 1fr); }

/* Corrections ciblées : petits écrans et texte agrandi par le téléphone */
h1, h2, h3, .page-head p, .hint, .ck-txt small, .feed .f-txt { overflow-wrap: break-word; }
.ck-txt small, .dc-missing li span { overflow-wrap: anywhere; }
.group-card { min-width: 0; }
.pcard-top { flex-wrap: wrap; row-gap: 6px; }
.pcard-top .iref { flex: none; }
.tabbar a > span, .tabbar a { min-width: 0; max-width: 100%; }
.tabbar a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps strong { overflow-wrap: normal; hyphens: manual; }
@media (max-width: 420px) { .steps strong { font-size: 11px; letter-spacing: -.01em; } .steps li { padding: 0 2px; } }
.filters select.input, .filters .search { min-width: 0; max-width: 100%; }
@media (max-width: 720px) {
  /* les boutons passent à la ligne au lieu de pousser la page */
  .btn:not(.btn-icon):not(.btn-xs) { white-space: normal; height: auto; min-height: 42px; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; text-align: center; max-width: 100%; }
  .btn-lg:not(.btn-icon) { min-height: 50px; }
  .btn-sm:not(.btn-icon):not(.btn-xs) { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  .pager { flex-wrap: wrap; }
  .pager-btns { flex-wrap: wrap; }
  /* renommer un appareil / une catégorie : barre posée en bas de l'écran */
  .rename-form { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); width: auto; z-index: 60; }
  /* achat : le total et le bouton se partagent la ligne, puis s'empilent si besoin */
  .buy-foot { flex-wrap: wrap; }
  .buy-sum { flex: 1 1 110px; }
  .buy-add { flex: 1 1 190px; min-width: 0; }
  /* historique d'une commande : l'heure passe sous le texte */
  .ord-hist li { grid-template-columns: 30px minmax(0, 1fr); }
  .ord-hist time { grid-column: 2; padding-top: 0; margin-top: -6px; white-space: normal; }
  .steps { padding-left: 6px; padding-right: 6px; }
  .steps li::before { top: 14px; }
}
/* lignes de commande : une carte par article sur téléphone */
@media (max-width: 600px) {
  .ord-table thead { display: none; }
  .ord-table, .ord-table tbody { display: block; width: 100%; }
  .ord-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: end; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  .ord-table td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; }
  .ord-table td:first-child { grid-column: 1 / -1; margin-bottom: 6px; }
  .ord-table tr:has(td:nth-child(5)) td:first-child { grid-column: 1; }
  .ord-table td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  .ord-table td:nth-child(2) { grid-column: 1; color: var(--text-2); font-size: 13px; }
  .ord-table td:nth-child(2)::after { content: " / pc"; color: var(--text-3); }
  .ord-table td:nth-child(3) { grid-column: 1; }
  .ord-table td:nth-child(3) small { display: inline; }
  .ord-table td:nth-child(4) { grid-column: 2; grid-row: 2 / span 2; align-self: center; text-align: right !important; font-size: 15px; }
  .ord-table .ord-qty { display: inline-flex; vertical-align: middle; margin-right: 6px; }
  .table-wrap:has(> .ord-table) { overflow: visible; }
}
.group-card header { min-width: 0; }
.group-card header .tag { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-card .order-btns { flex: none; }
.vn-wave { overflow: hidden; min-width: 0; }
.due-edit form { flex-wrap: wrap; justify-content: flex-end; }
.due-edit .input { width: auto; min-width: 0; flex: 1 1 140px; }
.due-row dd { min-width: 0; }
@media (max-width: 720px) {
  .people-side { flex-wrap: wrap; row-gap: 6px; }
  .people-side form { margin-left: auto; }
}
.group-card header .tag { display: block; }
.group-card header .tag::before { display: inline-block; vertical-align: 2px; margin-right: 6px; }

/* Filtre « du … au … » */
.date-range { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
.date-range label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-3); min-width: 0; }
.date-range .input { height: 42px; width: 150px; max-width: 100%; padding: 0 10px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.date-range-x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-3); }
.date-range-x:hover { background: var(--surface-2); color: var(--text); }
.dc-month { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .date-range { flex: 1 1 100%; flex-wrap: nowrap; }
  .date-range label { flex: 1 1 0; }
  .date-range .input { width: 100%; flex: 1; min-width: 0; padding: 0 6px; }
  .dc-month { width: 100%; }
}

/* =====================================================================
   APERÇU RAPIDE DES MÉDIAS (catalogue commerçant)
   ===================================================================== */
.pc-shot { position: relative; }
.pc-quick { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px 0 10px; border: 0; border-radius: 999px; background: rgba(17,19,24,.78); color: #fff; font: 600 12.5px var(--font-display); cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(17,19,24,.18); transition: background .15s, transform .15s; }
.pc-quick .ic { width: 15px; height: 15px; color: var(--lime); }
.pc-quick:hover { background: var(--carbon); transform: scale(1.04); }
.pc-quick:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.pc-quick.is-busy { opacity: .6; pointer-events: none; }
.pc.has-quick .pc-cta { right: 72px; }
.pc.has-quick .pc-media-tags { bottom: 12px; }
.pc.has-quick:hover .pc-quick { height: 42px; bottom: 12px; right: 12px; border-radius: 12px; }

html.has-qv { overflow: hidden; }
dialog.qv { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; display: grid; place-items: center; }
dialog.qv::backdrop { background: rgba(10,11,14,.82); backdrop-filter: blur(3px); }
.qv-box { width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.qv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 12px 20px; }
.qv-title { min-width: 0; display: grid; }
.qv-title strong { font: 600 15px/1.3 var(--font-display); color: var(--carbon); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qv-title small { font-size: 12.5px; color: var(--text-3); }
.qv-close { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--carbon); display: grid; place-items: center; cursor: pointer; }
.qv-close:hover { background: var(--line-2); }
.qv-view { position: relative; min-height: 0; background: #ECEDE8; }
.qv-stage { display: flex; height: min(68dvh, 620px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.qv-stage::-webkit-scrollbar { display: none; }
.qv-slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; overflow: hidden; }
.qv-slide img { width: 100%; height: 100%; object-fit: contain; }
.qv-slide.is-video { background: var(--carbon); }
.qv-slide video, .qv-slide iframe { width: 100%; height: 100%; border: 0; background: #000; }
.qv-slide.is-vertical iframe { width: min(100%, calc(min(68dvh, 620px) * 9 / 16)); }
.qv-slide.is-empty { color: var(--text-3); font-size: var(--fs-sm); }
.qv-play { width: 100%; height: 100%; border: 0; cursor: pointer; display: grid; place-content: center; justify-items: center; gap: 10px; color: #fff; font: 600 14px var(--font-display); background: var(--carbon) var(--img, none) center / contain no-repeat; }
.qv-play .ic { width: 64px; height: 64px; padding: 20px; border-radius: 50%; background: var(--lime); color: var(--carbon); fill: currentColor; stroke: none; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.qv-play span { padding: 4px 10px; border-radius: 999px; background: rgba(17,19,24,.7); }
.qv-out { display: grid; justify-items: center; gap: 10px; color: #fff; text-align: center; padding: 20px; }
.qv-out .ic { width: 40px; height: 40px; color: var(--lime); }
.qv-nav { position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--carbon); cursor: pointer; box-shadow: 0 4px 14px rgba(17,19,24,.18); }
.qv-nav.is-prev { left: 12px; } .qv-nav.is-next { right: 12px; }
.qv-nav[disabled] { opacity: 0; pointer-events: none; }
.qv-count { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(17,19,24,.72); color: #fff; font-size: 12px; pointer-events: none; }
.qv-thumbs { display: flex; gap: 8px; padding: 12px 16px 2px; overflow-x: auto; scrollbar-width: none; }
.qv-thumbs::-webkit-scrollbar { display: none; }
.qv-thumb { position: relative; flex: none; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #ECEDE8; cursor: pointer; opacity: .55; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .15s, outline-color .15s; margin: 2px; }
.qv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qv-thumb.is-video { background: var(--carbon); }
.qv-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.qv-thumb-play .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.qv-thumb.is-on { opacity: 1; outline-color: var(--carbon); }
.qv-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; }
@media (max-width: 720px) {
  dialog.qv { place-items: end stretch; }
  .qv-box { width: 100%; max-height: 100dvh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .qv-stage { height: min(62dvh, 560px); }
  .qv-nav { display: none; }
  .qv-foot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .qv-foot .btn { width: 100%; }
}
@media (hover: none) { .pc.has-quick:hover .pc-quick { height: 34px; bottom: 10px; right: 10px; border-radius: 999px; } .pc.has-quick .pc-cta { display: none; } }
.group-stats > div { min-width: 0; }
.group-stats dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .group-stats > div { padding-right: 10px; } .group-stats > div + div { padding-left: 10px; } .group-stats dd { font-size: var(--fs-sm); } }
@media (max-width: 560px) {
  .ledger dt { gap: 8px; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
  .ledger dt .ic { width: 34px; height: 34px; padding: 8px; flex: none; }
  .ledger > div { padding: 14px; min-width: 0; }
  .ledger dd small { display: block; margin: 2px 0 0; }
  /* fils d'activité : l'heure passe sous le texte */
  .feed li { grid-template-columns: 36px minmax(0, 1fr); align-items: start; }
  .feed li > time, .feed li > .f-side { grid-column: 2; margin-top: -6px; }
  .lab-closed li { flex-wrap: wrap; row-gap: 4px; }
  .lab-closed a { flex: 1 1 100%; }
  .people-tags { min-width: 0; max-width: 100%; }
  .people-tags .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
}
.tags-cell { min-width: 0; max-width: 100%; }
.tags-cell .tag, .people-tags .tag { max-width: 100%; }
.tags-cell .tag { overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.tags-cell .tag::before { display: inline-block; vertical-align: 2px; margin-right: 6px; }
.people-tags .tag::before { display: inline-block; vertical-align: 2px; margin-right: 6px; }
.vn-admin { flex-wrap: wrap; }
.vn-admin .vn-rename { flex: 1 1 200px; min-width: 0; }
.vn-admin .vn-rename .input { min-width: 0; }
.dc-howto .g-steps li { display: block; line-height: 1.55; }
.dc-howto .g-steps li code { white-space: normal; overflow-wrap: anywhere; }
.ck-txt code, .dc-howto code, .panel-body pre { max-width: 100%; overflow-x: auto; }
.ck-txt code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Tableaux « is-stack » : une carte par ligne sur téléphone */
@media (max-width: 600px) {
  .table.is-stack thead { display: none; }
  .table.is-stack, .table.is-stack tbody, .table.is-stack tfoot { display: block; width: 100%; }
  .table.is-stack tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
  .table.is-stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0 !important; border: 0 !important; text-align: right !important; white-space: normal; min-width: 0; }
  .table.is-stack td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; font-size: 12px; color: var(--text-3); }
  .table.is-stack td:not([data-label])::before, .table.is-stack td[data-label=""]::before { content: none; }
  .table.is-stack td:first-child { justify-content: flex-start; text-align: left !important; padding-bottom: 6px !important; font-weight: 600; }
  .table.is-stack td:first-child::before { content: none; }
  .table.is-stack td:empty { display: none; }
  .table.is-stack .acc-act, .table.is-stack td:last-child:has(> .btn) { justify-content: flex-end; }
  .table.is-stack .acc-act::before { content: none; }
  .table.is-stack tfoot tr { background: var(--surface-2); }
  .table-wrap:has(> .table.is-stack) { overflow: visible; }
}
@media (max-width: 560px) {
  .lab-past li { grid-template-columns: auto minmax(0, 1fr); padding: 12px 16px; }
  .lab-past li > .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 400px) { .tabbar a { font-size: 10.5px; letter-spacing: -.01em; } }
.pc-foot .pc-stock { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pc-body, .pc-price { min-width: 0; max-width: 100%; }
.pc-price { flex-wrap: wrap; }
.ocard-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) {
  .ocard { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
  .ocard-img { width: 44px; height: 44px; grid-row: span 3; }
  .ocard-total { grid-column: 2; justify-self: start; }
  .ocard-tags { grid-column: 2; }
}
@media (max-width: 420px) { .ledger dt { flex-direction: column; align-items: flex-start; overflow-wrap: break-word; } }
.sum dd, .sum .is-total dd { white-space: nowrap; }
.sum .is-total dt { min-width: 0; }
@media (max-width: 720px) {
  .cart-line { grid-template-columns: 56px minmax(0, 1fr) auto 32px; grid-template-areas: "img info info rm" "img qty total total"; }
  .cart-total { justify-self: end; white-space: nowrap; }
}
.auth-remember { margin: 2px 0 16px; align-items: flex-start; line-height: 1.35; }
.auth-remember input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--carbon); flex: none; }
.auth-remember small { color: var(--text-3); }
.f-ic.f-photo { padding: 0; overflow: hidden; background: #EEEEE8; }
.f-ic.f-photo img { width: 100%; height: 100%; object-fit: cover; }

.cart-alert { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; margin-bottom: 18px; border-radius: 18px; background: #FFF4EC; border: 1px solid #FFD6BF; color: var(--orange-ink); }
.cart-alert-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--orange); }
.cart-alert strong { display: block; font: 600 15px var(--font-display); color: var(--carbon); }
.cart-alert p { margin: 2px 0 0; font-size: 13px; color: #7A3A12; }
@media (max-width: 640px) { .cart-alert { grid-template-columns: 40px minmax(0, 1fr); } .cart-alert form { grid-column: 1 / -1; } .cart-alert .btn { width: 100%; } }
.cart-issue { align-items: flex-start; }
.cart-issue .ic { flex: none; margin-top: 2px; }
.cart-note { font-size: 12px; color: var(--text-3); }
.cart-fix { margin-top: 6px; }
.field-error .ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* Modifier une commande */
.add-line { display: grid; gap: 10px; }
.add-line-lbl { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--font-display); color: var(--carbon); }
.add-line-opts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.add-line-opts select.input { width: auto; flex: 1 1 160px; min-width: 0; height: 42px; }
.add-line-opts .btn { flex: 0 0 auto; }
.add-line .combo-list li small { display: block; }
.ship-edit { border: 1px solid var(--line-2); border-radius: 14px; }
.ship-edit > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; }
.ship-edit > summary::-webkit-details-marker { display: none; }
.ship-edit > summary > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.ship-edit > summary small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.ship-edit[open] > summary > .ic { transform: rotate(180deg); }
.ship-edit-form { display: grid; gap: 12px; padding: 4px 14px 14px; }
.ship-edit-form .btn { justify-self: start; }
.ord-hist .is-edit strong { font-weight: 500; }
@media (max-width: 560px) { .add-line-opts .btn { flex: 1 1 100%; } .ship-edit-form .btn { justify-self: stretch; } }
.add-line .combo-list li { display: block; }
.add-line .combo-list li small { white-space: normal; margin-top: 2px; }
.add-line-unit { font-size: 13px; color: var(--text-3); }

/* =====================================================================
   COMPTE CLIENT (fiche commerçant, et « Mon compte » côté commerçant)
   ===================================================================== */
.client-sum { margin-bottom: 14px; }
.client-sum .is-late strong { color: #FFB4A8; }
.client-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--saffron-50, #FFF4E0); color: var(--orange-ink, #8A3B12); font-size: 13px; }
.client-note .ic { width: 15px; height: 15px; }
.due-list { list-style: none; margin: 0; padding: 0; }
.due-list li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 22px; border-top: 1px solid var(--line-2); }
.due-list li:first-child { border-top: 0; }
.due-main { display: grid; min-width: 0; color: var(--text); }
.due-main small, .due-when small, .due-amt small { display: block; font-size: 12px; color: var(--text-3); }
.due-when { font-size: 13px; color: var(--text-2); }
.due-list .is-late .due-when { color: var(--pomegranate); font-weight: 600; }
.due-list .is-soon .due-when { color: var(--orange-ink, #8A3B12); font-weight: 600; }
.due-list .is-late { background: linear-gradient(90deg, var(--pome-50), transparent 40%); }
.due-amt { text-align: right; }
.due-amt b { font-size: 15px; }
.due-act { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.actions-inline { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.led-hint { font-size: 12.5px; }
.led-table td { vertical-align: top; }
.led-ref { font-weight: 600; white-space: nowrap; }
.led-table .led-fac td:nth-child(4) { font-weight: 600; }
.led-table .led-rec td:nth-child(5), .led-table .led-av td:nth-child(5) { color: var(--mint); font-weight: 600; }
.led-table .led-open td { background: var(--surface-2); font-style: italic; }
.led-table tfoot td { font-weight: 600; background: var(--surface-2); }
.mini-orders { list-style: none; margin: 0; padding: 0; }
.mini-orders li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 18px; border-top: 1px solid var(--line-2); }
.mini-orders li:first-child { border-top: 0; }
.mo-main { display: grid; min-width: 0; color: var(--text); }
.mo-main small { font-size: 12px; color: var(--text-3); }
.mo-total { align-self: start; font-size: 14px; }
.mo-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mini-orders .ot-docs { justify-self: end; }
.doc-chip.is-av { background: var(--pome-50); color: var(--pomegranate); border-color: transparent; }
@media (max-width: 760px) {
  .due-list li { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; gap: 6px 12px; }
  .due-when { grid-column: 1; }
  .due-amt { grid-row: 1; grid-column: 2; }
  .due-act { grid-column: 2; }
}
.led-table .num-col { white-space: nowrap; }
/* Relevé sur téléphone : une ligne compacte par mouvement */
@media (max-width: 600px) {
  .led-table thead { display: none; }
  .led-table, .led-table tbody, .led-table tfoot { display: block; width: 100%; }
  .led-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
  .led-table td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; font-size: 13px; }
  .led-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 12px; color: var(--text-3); }
  .led-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .led-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; font-size: 12px; color: var(--text-3); }
  .led-table td:nth-child(4), .led-table td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right !important; font-size: 14px; }
  .led-table td:nth-child(4):empty, .led-table td:nth-child(5):empty { display: none; }
  .led-table td:nth-child(5):not(:empty)::before { content: "− "; }
  .led-table td:nth-child(4):not(:empty)::before { content: "+ "; }
  .led-table td:nth-child(6) { grid-column: 2; grid-row: 2; text-align: right !important; font-size: 12px; color: var(--text-3); }
  .led-table td:nth-child(6)::before { content: "solde "; }
  .led-table tfoot tr { grid-template-columns: minmax(0, 1fr) auto; background: var(--surface-2); }
  .led-table tfoot td { grid-row: 1 !important; font-size: 13px; }
  .led-table tfoot td::before { content: none !important; }
  .led-table tfoot td:nth-child(1) { grid-column: 1 !important; color: var(--text); }
  .led-table tfoot td:nth-child(2), .led-table tfoot td:nth-child(3) { display: none; }
  .led-table tfoot td:nth-child(4) { grid-column: 2 !important; text-align: right !important; font-size: 14px; }
  .table-wrap:has(> .led-table) { overflow: visible; }
}

/* Côté commerçant : rappel de paiement discret */
.pay-nudge { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 16px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line-2); color: var(--text); transition: border-color .15s, box-shadow .15s; }
.pay-nudge:hover { color: var(--text); border-color: #D2D5DB; box-shadow: 0 12px 24px -18px rgba(17,19,24,.35); }
.pn-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--carbon); }
.pay-nudge.is-soon .pn-ic { background: var(--lime-50); }
.pay-nudge.is-late { background: #FFFAF3; border-color: #F6DDBB; }
.pay-nudge.is-late .pn-ic { background: #FFF0DA; color: #9A5B13; }
.pn-txt { display: grid; gap: 2px; min-width: 0; }
.pn-txt strong { font: 600 14.5px var(--font-display); }
.pn-txt small { font-size: 12.5px; color: var(--text-3); }
.pn-go { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--carbon); white-space: nowrap; }
@media (max-width: 560px) { .pay-nudge { grid-template-columns: 40px minmax(0, 1fr); } .pn-go { grid-column: 2; } .pn-ic { width: 40px; height: 40px; } }
.dot-attn.is-soft { background: #E8A13A; box-shadow: 0 0 0 3px #FFF0DA; }
.ocard-due { font-size: 11.5px; color: var(--text-3); align-self: center; }
.pa-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; margin-bottom: 18px; }
.pa-card { display: grid; gap: 4px; padding: 20px 22px; border-radius: 20px; background: var(--carbon); color: #fff; }
.pa-card small { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #A3A8B3; }
.pa-card strong { font: italic 700 28px var(--font-display); color: var(--lime); letter-spacing: -.02em; }
.pa-card span { font-size: 13px; color: #C9CDD5; }
.pa-card.is-clear strong { color: #fff; }
.pa-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px; }
.pa-facts > div { padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line-2); min-width: 0; }
.pa-facts dt { font-size: 12px; color: var(--text-3); }
.pa-facts dd { margin: 4px 0 0; font: 700 16px var(--font-display); }
.pa-facts small { font-size: 11.5px; color: var(--text-3); }
.due-list .is-late.is-soft { background: linear-gradient(90deg, #FFF6EA, transparent 45%); }
.due-list .is-late.is-soft .due-when { color: #9A5B13; }
.pa-how { display: grid; gap: 12px; }
.pa-rib { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.pa-rib small { font-size: 12px; color: var(--text-3); }
.pa-rib strong { font-size: 15px; letter-spacing: .03em; overflow-wrap: anywhere; }
.pa-rib .btn { justify-self: start; }
.pa-note { font-size: 12.5px; color: var(--text-3); margin: 0; padding: 0 4px; }
@media (max-width: 760px) { .pa-top { grid-template-columns: minmax(0, 1fr); } }
.search-note { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 22px; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); background: var(--lime-50); }
.cb-smart { display: block; font-size: 12px; color: var(--text-3); font-weight: 400; }

/* =====================================================================
   RECHERCHE INSTANTANÉE
   ===================================================================== */
.tb-search { display: none; }
@media (max-width: 900px) { .tb-search { display: inline-grid; } }
.topbar form.search { position: relative; }
.qs-drop { position: absolute; left: 0; top: calc(100% + 8px); width: min(560px, 80vw); max-height: min(70vh, 640px); overflow-y: auto; z-index: 70; background: #fff; border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(17,19,24,.35); padding: 6px; overscroll-behavior: contain; }
.qs-drop[hidden] { display: none; }
.qs-group { padding: 4px 0; }
.qs-group + .qs-group { border-top: 1px solid var(--line-2); }
.qs-title { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 4px; font: 600 11px var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.qs-clear { border: 0; background: none; color: var(--text-3); font: 500 12px var(--font); cursor: pointer; text-transform: none; letter-spacing: 0; }
.qs-clear:hover { color: var(--carbon); text-decoration: underline; }
.qs-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; color: var(--text); }
.qs-item:hover, .qs-item.is-active { background: var(--surface-2); color: var(--text); }
.qs-item.is-active { box-shadow: inset 0 0 0 1.5px var(--carbon); }
.qs-item.is-recent { grid-template-columns: 20px minmax(0, 1fr); padding: 9px 12px; }
.qs-item.is-recent .ic { color: var(--text-3); width: 16px; height: 16px; }
.qs-thumb { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.qs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qs-thumb b { font: 700 13px var(--font-display); color: var(--carbon); background: var(--lime); width: 100%; height: 100%; display: grid; place-items: center; }
.qs-thumb .ic { width: 18px; height: 18px; }
.qs-txt { display: grid; min-width: 0; }
.qs-txt strong { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-txt small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs mark { background: var(--lime); color: var(--carbon); border-radius: 3px; padding: 0 1px; }
.qs-txt small mark { background: var(--lime-50); }
.qs-quick { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--carbon); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.qs-quick:hover { background: var(--lime); }
.qs-more { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--carbon); border-radius: 10px; }
.qs-more .ic { width: 14px; height: 14px; }
.qs-more:hover, .qs-more.is-active { background: var(--surface-2); color: var(--carbon); }
.qs-all { display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; gap: 10px; align-items: center; margin-top: 4px; padding: 12px; border-radius: 12px; background: var(--carbon); color: #fff; font-size: 13.5px; font-weight: 500; }
.qs-all:hover, .qs-all.is-active { background: #000; color: #fff; box-shadow: none; }
.qs-all .ic { width: 16px; height: 16px; color: var(--lime); }
.qs-note { display: flex; align-items: center; gap: 6px; margin: 0 10px 4px; font-size: 12px; color: var(--lime-ink, #4D6B00); }
.qs-note .ic { width: 13px; height: 13px; }
.qs-hint { display: flex; gap: 10px; align-items: flex-start; padding: 16px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.qs-hint .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--text-3); }
.qs-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--carbon); animation: qs-spin .7s linear infinite; flex: none; }
@keyframes qs-spin { to { transform: rotate(360deg); } }
/* Plein écran (téléphone) */
dialog.qs-sheet { padding: 0; margin: 0; border: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: #fff; }
dialog.qs-sheet::backdrop { background: rgba(10,11,14,.4); }
.qs-sheet .qs-bar { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 12px 10px 6px; background: #fff; border-bottom: 1px solid var(--line-2); }
.qs-back { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; color: var(--carbon); cursor: pointer; border-radius: 12px; }
.qs-sheet .qs-bar input { height: 46px; width: 100%; min-width: 0; border-radius: 14px; border: 1.5px solid var(--carbon); padding: 0 14px; font: 500 16px var(--font); background: #fff; }
.qs-sheet .qs-bar input:focus { outline: none; box-shadow: 0 0 0 4px rgba(200,255,50,.45); }
.qs-sheet .qs { padding: 6px 8px calc(24px + env(safe-area-inset-bottom)); }
.qs-sheet .qs-item { padding: 10px 8px; }
.qs-sheet .qs-txt strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search .qs .ic { position: static; left: auto; color: inherit; }
.search .qs .qs-all .ic { color: var(--lime); }
.search .qs .qs-hint .ic, .search .qs .is-recent .ic { color: var(--text-3); }

/* Titres de page : le trait orange du logo, sous la fin du titre (toutes les pages, même rendu) */
.page-head h1 { position: relative; display: inline-block; padding-bottom: .16em; }
.page-head h1::after { content: ""; position: absolute; right: -.05em; bottom: -.12em; width: clamp(46px, 42%, 170px); height: .3em; background: url("../img/swoosh.svg") no-repeat right bottom / 100% 100%; pointer-events: none; }
.page-head h1 em { font-style: normal; background: none; padding: 0; }
/* Aperçu rapide : la fenêtre tient toujours dans l'écran, l'image dans sa zone (jamais rognée) */
.qv-box { height: min(calc(100dvh - 32px), 820px); grid-template-rows: auto minmax(0, 1fr) auto auto; }
.qv-view { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.qv-stage { height: 100%; min-height: 0; }
.qv-slide { height: 100%; min-height: 0; position: relative; }
.qv-slide img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.qv-slide.is-vertical iframe { width: min(100%, calc((100dvh - 260px) * 9 / 16)); }
.qv-thumbs { padding-top: 10px; }
@media (max-width: 720px) { .qv-box { height: min(calc(100dvh - 12px), 760px); } }
@media (max-height: 560px) { .qv-thumbs { display: none; } }

/* Coordonnées de facturation */
.bill-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bill-mode { position: relative; display: block; cursor: pointer; }
.bill-mode input { position: absolute; opacity: 0; }
.bm-txt { display: grid; gap: 3px; height: 100%; padding: 14px 16px 14px 42px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; transition: border-color .15s, background .15s; position: relative; }
.bm-txt::before { content: ""; position: absolute; left: 14px; top: 16px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; }
.bm-txt strong { font-size: 14px; font-weight: 600; }
.bm-txt small { font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }
.bill-mode input:checked + .bm-txt { border-color: var(--carbon); background: var(--surface-2); }
.bill-mode input:checked + .bm-txt::before { border: 5px solid var(--carbon); }
.bill-mode input:focus-visible + .bm-txt { outline: 2px solid var(--lime); outline-offset: 2px; }
.bill-form:has(input[name=bill_mode][value=same]:checked) .bill-fields { display: none; }
.bill-preview { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line); font-size: 13px; color: var(--text-2); }
.bill-preview small { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 2px; }
.bill-preview strong { color: var(--carbon); font-size: 14px; }
.bill-form .panel-foot { align-items: center; justify-content: space-between; }
.bill-form .panel-foot .hint { margin: 0; font-size: 12.5px; }
.terms-form .input-suffix { max-width: 180px; }
@media (max-width: 640px) { .bill-modes { grid-template-columns: minmax(0, 1fr); } }
.ship-road { flex: 1 1 100%; margin-top: 4px; }
.ship-road > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--carbon); list-style: none; }
.ship-road > summary::-webkit-details-marker { display: none; }
.ship-road > summary small { font-weight: 400; color: var(--text-3); }
.ship-road[open] > summary { margin-bottom: 10px; }
.transport-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.transport-panel .transport-fields { grid-template-columns: minmax(0, 1fr); }
.plate-input { text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 720px) { .transport-fields { grid-template-columns: minmax(0, 1fr); } }
.pay-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-quick .chip { cursor: pointer; font: inherit; font-size: 12.5px; }
.pay-hint { margin: 0; font-size: 12px; }
.pa-bill { border: 0; } .pa-bill .btn { justify-self: start; margin-top: 8px; }

/* Panier du commerçant : petite pastille orange + bouton flottant (nombre de pièces) */
.tb-cart-n { background: var(--orange); color: #fff; box-shadow: 0 0 0 2px #fff; }
.cart-fab { position: fixed; right: 22px; bottom: 22px; z-index: 45; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--carbon); color: #fff; box-shadow: 0 14px 30px -10px rgba(17,19,24,.55), 0 0 0 4px rgba(255,255,255,.9); transition: transform .2s var(--ease), background .15s; }
.cart-fab:hover { color: #fff; background: #000; transform: translateY(-2px) scale(1.04); }
.cart-fab .ic { width: 24px; height: 24px; color: var(--lime); }
.cart-fab-n { position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--orange); color: #fff; font: italic 700 12px var(--font-display); box-shadow: 0 0 0 2px #fff; }
.cart-fab[hidden] { display: none; }
.cart-fab.is-pop { animation: pop .45s var(--ease); }
@media (max-width: 900px) { .cart-fab { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 54px; height: 54px; } }
@media (max-width: 900px) { body:has(.buy-bar) .cart-fab { bottom: calc(150px + env(safe-area-inset-bottom)); } }
@media print { .cart-fab { display: none !important; } }
/* Les messages ne cachent pas le bouton panier */
@media (min-width: 901px) { body:has(.cart-fab:not([hidden])) .toasts { right: 98px; } }
@media (max-width: 900px) { body:has(.cart-fab:not([hidden])) .toasts { bottom: calc(150px + env(safe-area-inset-bottom)); } }
@media (max-width: 900px) { body:has(.buy-bar):has(.cart-fab:not([hidden])) .toasts { bottom: calc(218px + env(safe-area-inset-bottom)); } }

/* =====================================================================
   Étape 23 — Catalogue : chargement automatique en fin de liste
   ===================================================================== */
.sh-loader { display: none; gap: 7px; height: 44px; align-items: center; }
.sh-loader i { width: 10px; height: 10px; border-radius: 50%; background: var(--carbon); animation: sh-dot 1s var(--ease, ease) infinite; }
.sh-loader i:nth-child(2) { background: var(--lime-600); animation-delay: .14s; }
.sh-loader i:nth-child(3) { background: var(--orange); animation-delay: .28s; }
@keyframes sh-dot { 0%, 80%, 100% { transform: translateY(0) scale(.75); opacity: .45; } 40% { transform: translateY(-9px) scale(1); opacity: 1; } }
.sh-more.is-auto .btn { display: none; }                         /* automatique : le bouton s'efface… */
.sh-more.is-auto .sh-loader { display: inline-flex; }            /* …au profit du loader */
.sh-more.is-auto:not(.is-loading) .sh-loader i { animation-play-state: paused; opacity: .35; transform: scale(.75); }
.sh-more.is-manual .btn { display: inline-flex; }                /* erreur réseau : bouton de secours */
.sh-more.is-manual .sh-loader { display: none; }
.sh-more { padding-top: 34px; }
.sh-end { margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text-3); font: italic 500 13px var(--font-display); }
.sh-grid > .is-new { animation: sh-in .42s var(--ease, ease) both; animation-delay: var(--d, 0ms); }
@keyframes sh-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sh-grid > .is-new, .sh-loader i { animation: none; } }

/* =====================================================================
   Étape 23 — Mobile : look application (barre du haut et onglets en couleur)
   ===================================================================== */
.tb-brand { display: none; }
@media (max-width: 900px) {
  .topbar, .topbar.is-scrolled {
    background: var(--carbon); backdrop-filter: none; border-bottom: 0; gap: 4px; padding: 0 10px 0 6px;
    box-shadow: 0 10px 24px -18px rgba(17,19,24,.9);
    --logo-text: #F5F5EF; --logo-face: #F5F5EF;
  }
  .topbar .btn-ghost { color: #F5F5EF; }
  .topbar .btn-ghost:hover, .topbar .btn-ghost:active { background: rgba(255,255,255,.09); color: #fff; }
  .topbar .bell .dot { box-shadow: 0 0 0 2px var(--carbon); }
  .topbar .tb-cart-n { box-shadow: 0 0 0 2px var(--carbon); }
  .topbar .user-btn { color: #F5F5EF; padding-right: 2px; }
  .topbar .user-btn:hover { background: rgba(255,255,255,.08); border-color: transparent; }
  .topbar .user-btn .ic { color: #A3A8B3; }
  .tb-brand { display: inline-flex; align-items: center; gap: 7px; min-width: 0; margin-right: auto; color: #F5F5EF; text-decoration: none; }
  .tb-brand .brand-mark { flex: none; }
  .tb-brand b { font: italic 600 13px/1 var(--font-display); color: var(--lime); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { margin-left: 0; }
  /* barre d'onglets : sombre, onglet actif en lime */
  .tabbar { background: var(--carbon); border-top: 0; box-shadow: 0 -10px 26px -18px rgba(17,19,24,.85); padding-top: 7px; }
  .tabbar a { color: #8A8F9B; }
  .tabbar a.is-active { color: #fff; }
  .tabbar a.is-active::before { display: none; }
  .tabbar a .ic { transition: transform .2s var(--ease, ease); }
  .tabbar a.is-active .ic { color: var(--carbon); background: var(--lime); border-radius: 999px; box-sizing: border-box; width: 52px; height: 28px; padding: 5px 0; }
  .tabbar a .count, .tabbar a .tab-dot { box-shadow: 0 0 0 2px var(--carbon); }
}
@media (max-width: 360px) { .tb-brand b { display: none; } }

/* =====================================================================
   Étape 23 — Sur demande (import d'un article demandé par un commerçant)
   ===================================================================== */
.sd-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--lime); color: var(--carbon); font: italic 700 11.5px var(--font-display); letter-spacing: .02em; }
.sd-eyebrow .ic { width: 13px; height: 13px; }

/* Accueil sans demande */
.sd-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px; align-items: center; padding: 32px; border-radius: 26px; background: var(--carbon); color: #fff; border: 0; position: relative; overflow: hidden; }
.sd-hero::after { content: ""; position: absolute; left: -70px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,107,53,.28), transparent 70%); pointer-events: none; }
.sd-hero-txt { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; }
.sd-hero h2 { margin: 0; font-size: 1.9rem; line-height: 1.12; color: #fff; letter-spacing: -.02em; }
.sd-hero p { margin: 0; color: #B9BEC8; max-width: 470px; font-size: 14.5px; }
.sd-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.sd-how li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.sd-how li > span { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--lime); color: var(--carbon); font: italic 700 16px var(--font-display); }
.sd-how strong { color: #fff; font: 600 15px var(--font-display); }
.sd-how small { color: #A3A8B3; font-size: 13px; }
@media (max-width: 900px) { .sd-hero { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 22px; } .sd-hero h2 { font-size: 1.5rem; } }

/* Listes */
.sd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sd-item a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sd-item a:hover { border-color: var(--line); box-shadow: 0 10px 26px -20px rgba(17,19,24,.45); transform: translateY(-1px); }
.sd-item.is-offer a { border-color: var(--lime-600); box-shadow: 0 0 0 3px rgba(200,255,50,.35); }
.sd-thumb { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); }
.sd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sd-main { display: grid; gap: 4px; min-width: 0; }
.sd-main strong { font: 600 15px/1.3 var(--font-display); display: flex; align-items: center; gap: 8px; min-width: 0; }
.sd-main > small { color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
.sd-who { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-weight: 500; }
.sd-unread { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px var(--orange-50); }
.sd-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--lime); color: var(--carbon); font: italic 700 13px var(--font-display); white-space: nowrap; }
.sd-item a > .ic { color: var(--text-3); }
@media (max-width: 560px) {
  .sd-item a { grid-template-columns: 54px minmax(0, 1fr); padding: 10px 12px 10px 10px; gap: 12px; }
  .sd-thumb { width: 54px; height: 54px; }
  .sd-item a > .ic { display: none; }
  .sd-cta { grid-column: 1 / -1; justify-content: center; }
  .sd-main > small { white-space: normal; }
}
.sd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .sd-kpis { grid-template-columns: minmax(0, 1fr); } }

/* Frise complète */
.sd-journey-panel { padding: 18px 20px; overflow-x: auto; scrollbar-width: none; }
.sd-journey-panel::-webkit-scrollbar { display: none; }
.sd-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); min-width: 620px; }
.sd-journey li { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; padding: 0 4px; }
.sd-journey li::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.sd-journey li:first-child::before { display: none; }
.sd-journey li.is-done::before, .sd-journey li.is-now::before { background: var(--carbon); }
.sd-dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); color: var(--text-3); font: italic 700 13px var(--font-display); }
.sd-journey li.is-done .sd-dot { background: var(--carbon); border-color: var(--carbon); color: var(--lime); }
.sd-journey li.is-now .sd-dot { background: var(--lime); border-color: var(--carbon); color: var(--carbon); box-shadow: 0 0 0 5px rgba(200,255,50,.35); }
.sd-journey strong { font: 600 12.5px/1.25 var(--font-display); color: var(--text-3); }
.sd-journey li.is-done strong, .sd-journey li.is-now strong { color: var(--text); }
.sd-journey small { font-size: 11.5px; color: var(--text-3); }
.sd-journey.is-closed { opacity: .55; filter: grayscale(1); }

/* L'offre (commerçant) */
.sd-offer { padding: 22px; border: 2px solid var(--carbon); box-shadow: 0 18px 40px -30px rgba(17,19,24,.55); display: grid; gap: 16px; }
.sd-offer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sd-valid { font: italic 500 12.5px var(--font-display); color: var(--text-2); }
.sd-valid.is-urgent { color: var(--orange-ink); font-weight: 700; }
.sd-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.sd-price b { font: italic 800 3rem/1 var(--font-display); letter-spacing: -.04em; background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%); padding: 0 .08em; }
.sd-price b small { font-size: .5em; letter-spacing: -.02em; }
.sd-price > span { color: var(--text-2); font-size: 14px; }
.sd-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sd-facts li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); }
.sd-facts li > .ic { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--surface); color: var(--carbon); box-sizing: border-box; }
.sd-facts small { display: block; font-size: 11.5px; color: var(--text-3); }
.sd-facts strong { font: 600 13.5px/1.3 var(--font-display); }
.sd-note { margin: 0; padding: 12px 14px; border-left: 3px solid var(--orange); background: var(--orange-50); border-radius: 0 12px 12px 0; font-size: 14px; color: var(--text); }
.sd-accept { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line-2); }
.sd-qty-lbl { font: 600 14px var(--font-display); }
.sd-qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sd-qty-row .hint.is-error { color: var(--pomegranate); font-weight: 600; }
.sd-sum { margin: 0; }
.sd-decline summary { cursor: pointer; color: var(--text-2); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.sd-decline summary::-webkit-details-marker { display: none; }
.sd-decline[open] summary { margin-bottom: 10px; }
.sd-decline-act { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .sd-offer { padding: 16px; } .sd-facts { grid-template-columns: minmax(0, 1fr); } .sd-price b { font-size: 2.5rem; } }

/* États (attente, précommande, arrivée) */
.sd-stage { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; }
.sd-stage strong { font: 600 16px var(--font-display); }
.sd-stage p { margin: 3px 0 0; color: var(--text-2); font-size: 14px; }
.sd-stage-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--carbon); color: var(--lime); }
.sd-stage.is-ok .sd-stage-ic { background: var(--lime); color: var(--carbon); }
.sd-stage-ic.is-pulse { animation: sd-pulse 2.2s ease-in-out infinite; }
@keyframes sd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,255,50,.55); } 50% { box-shadow: 0 0 0 9px rgba(200,255,50,0); } }
.sd-wait { padding: 20px; display: grid; gap: 14px; }
.sd-wait-act { justify-self: start; }
.sd-pre .panel-head .btn { gap: 6px; }

/* Échanges */
.sd-msgs { list-style: none; margin: 0; padding: 16px 20px; display: grid; gap: 10px; max-height: 520px; overflow-y: auto; background: var(--surface-2); }
.sd-ev { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 4px 10px; }
.sd-ev span { font: italic 500 12.5px/1.35 var(--font-display); color: var(--text-2); padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); max-width: 100%; }
.sd-ev time, .sd-msg small { font-size: 11px; color: var(--text-3); }
.sd-msg { display: grid; justify-items: start; gap: 3px; max-width: min(80%, 520px); }
.sd-msg.is-me { justify-self: end; justify-items: end; }
.sd-bubble { padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--surface); border: 1px solid var(--line-2); font-size: 14px; overflow-wrap: anywhere; }
.sd-bubble p { margin: 0; }
.sd-msg.is-me .sd-bubble { background: var(--carbon); border-color: var(--carbon); color: #fff; border-radius: 16px 16px 4px 16px; }
.sd-reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 12px 16px 16px; border-top: 1px solid var(--line-2); }
.sd-reply textarea { resize: none; min-height: 44px; }
@media (max-width: 560px) { .sd-reply .btn span { display: none; } .sd-msg { max-width: 90%; } .sd-msgs { padding: 12px; } }

/* Médias et détails de la demande */
.sd-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sd-shot { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.sd-shot.is-big { grid-column: span 2; grid-row: span 2; }
.sd-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.sd-shot:hover img { transform: scale(1.04); }
.sd-vid { grid-column: 1 / -1; width: 100%; max-height: 360px; border-radius: 12px; background: #000; }
.sd-vlink { grid-column: 1 / -1; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--carbon); color: #fff; text-decoration: none; }
.sd-vlink-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--lime); color: var(--carbon); }
.sd-vlink strong { display: block; font: 600 14px var(--font-display); }
.sd-vlink small { color: #A3A8B3; font-size: 12px; }
.sd-nomedia { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.sd-desc { margin: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.sd-details { margin: 0; display: grid; gap: 8px; }
.sd-details > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding-top: 8px; border-top: 1px dashed var(--line); }
.sd-details dt { color: var(--text-3); }
.sd-details dd { margin: 0; text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* Nouvelle demande */
.sd-new { width: 100%; max-width: 760px; }
.sd-drop { min-height: 150px; }
.sd-pick.has-files .sd-drop { min-height: 0; padding: 14px; }
.sd-pick.has-files .sd-drop small, .sd-pick.has-files .sd-drop .dz-ic { display: none; }
.sd-picked { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.sd-picked li { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.sd-picked img, .sd-picked video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-pk-x { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(17,19,24,.78); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.sd-pk-tag { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: var(--lime); color: var(--carbon); font: italic 700 10.5px var(--font-display); }
.sd-more { border-radius: 14px; border: 1px solid var(--line-2); padding: 12px 14px; }
.sd-more summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font: 600 14px var(--font-display); list-style: none; }
.sd-more summary::-webkit-details-marker { display: none; }
.sd-more summary small { font: 400 12.5px var(--font); color: var(--text-3); }
.sd-more[open] summary { margin-bottom: 12px; }
.input-lg { height: 50px; font-size: 16px; }

/* Équipe : suivi de l'import */
.sd-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sd-stages li { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: var(--surface-2); text-align: center; color: var(--text-3); }
.sd-stages li > span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); }
.sd-stages strong { font: 600 12px/1.25 var(--font-display); }
.sd-stages li.is-done { color: var(--text); }
.sd-stages li.is-done > span { background: var(--carbon); border-color: var(--carbon); color: var(--lime); }
.sd-stages li.is-now { background: var(--lime-50); color: var(--text); box-shadow: inset 0 0 0 2px var(--lime-600); }
.sd-stages li.is-now > span { background: var(--lime); border-color: var(--lime-600); color: var(--carbon); }
@media (max-width: 560px) { .sd-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sd-step-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.sd-inline { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.sd-inline .input { min-width: 150px; }
.sd-surplus { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--lime-50); border: 1px solid var(--lime-600); font-size: 13.5px; }
.sd-surplus > span { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Équipe : formulaire d'offre */
.sd-offer-form > summary, .sd-refuse > summary { cursor: pointer; list-style: none; }
.sd-offer-form > summary::-webkit-details-marker, .sd-refuse > summary::-webkit-details-marker { display: none; }
.sd-offer-form:not([open]) > summary { border-bottom: 0; }
.sd-lead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-2); font-size: 13.5px; }
.sd-lead .input { width: 84px; text-align: center; }
.sd-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.sd-switch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; }
.sd-switch input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--carbon); }
.sd-switch strong { display: block; font: 600 14px var(--font-display); }
.sd-switch small { color: var(--text-3); font-size: 12.5px; }
.sd-hint-box { margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--orange-50); color: var(--text); font-size: 13.5px; }
.sd-offer-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sd-offer-line { margin: 0; font: 600 15px/1.45 var(--font-display); }
.sd-offer-sum .panel-body { display: grid; gap: 10px; }

/* Catalogue : « vous ne trouvez pas ? » */
.sd-ask { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 26px auto 6px; max-width: 620px; padding: 14px 18px; border-radius: 20px; background: var(--carbon); color: #fff; text-decoration: none; box-shadow: 0 16px 36px -26px rgba(17,19,24,.8); }
.sd-ask[hidden] { display: none; }
.sd-ask-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--lime); color: var(--carbon); }
.sd-ask strong { display: block; font: 600 15px var(--font-display); }
.sd-ask small { color: #B9BEC8; font-size: 13px; }
.sd-ask > .ic { color: var(--lime); }
.ct-empty-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sd-import-sum dd, .sd-pre .sum dd { white-space: normal; text-align: right; min-width: 0; }
.sd-import-sum .tag { white-space: normal; text-align: left; max-width: 100%; }
.sd-import-sum > div > dt { flex: none; }

@media (max-width: 560px) { .sd-journey { min-width: 560px; grid-template-columns: repeat(7, minmax(76px, 1fr)); } .sd-journey strong { font-size: 11.5px; } .sd-journey-panel { padding: 16px 12px; } }
/* Volets repliables (offre, refus) : chevron */
.sd-offer-form > summary h2, .sd-refuse > summary h2 { display: flex; align-items: center; gap: 8px; }
.sd-offer-form > summary::after, .sd-refuse > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); margin: -4px 4px 0 10px; transition: transform .2s; flex: none; }
.sd-offer-form[open] > summary::after, .sd-refuse[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }

/* =====================================================================
   Étape 24 — Connexion commerçant : créer un compte, numéro inconnu
   ===================================================================== */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; color: var(--text-3); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-create { --b-bg: var(--surface); --b-bd: var(--carbon); --b-fg: var(--carbon); border-width: 1.5px; gap: 10px; }
.auth-create .ic { color: #1FA855; }
.auth-create:hover { --b-bg: var(--carbon); --b-fg: #fff; }
.auth-create:hover .ic { color: var(--lime); }
.auth-card > .auth-switch { margin-top: 18px; padding-top: 16px; }
.auth-state { display: grid; gap: 12px; justify-items: center; text-align: center; margin-top: 8px; }
.auth-state h2 { margin: 6px 0 0; }
.auth-state .lead { margin: 0 0 6px; }
.auth-state .btn { justify-self: stretch; }
.auth-state-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--carbon); color: var(--lime); }

/* =====================================================================
   Étape 24 — Bienvenue après connexion : notifications (+ installation sur mobile)
   ===================================================================== */
.wl-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(17,19,24,.55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .25s; }
.wl-scrim.is-in { opacity: 1; }
.wl { width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 26px; background: var(--surface); padding: 26px 24px 20px; display: grid; gap: 16px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.5); transform: translateY(18px) scale(.98); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.wl-scrim.is-in .wl { transform: none; }
.wl-hero { display: grid; justify-items: center; text-align: center; gap: 10px; }
.wl-bell { position: relative; width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; background: var(--carbon); color: var(--lime); }
.wl-bell .ic { width: 34px; height: 34px; animation: wl-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
.wl-bell::after { content: ""; position: absolute; top: 15px; right: 17px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px var(--carbon); }
@keyframes wl-ring { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-12deg); } }
.wl h2 { margin: 0; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.02em; }
.wl-hero p { margin: 0; color: var(--text-2); font-size: 14px; }
.wl-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-perks li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; }
.wl-perks li > span:first-child { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--lime); color: var(--carbon); }
.wl-perks strong { display: block; font: 600 14px var(--font-display); }
.wl-perks small { color: var(--text-3); font-size: 12.5px; }
.wl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; border: 1.5px solid var(--line); }
.wl-step > b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--carbon); color: var(--lime); font: italic 700 13px var(--font-display); }
.wl-step strong { display: block; font: 600 14px var(--font-display); }
.wl-step small { color: var(--text-3); font-size: 12px; }
.wl-step.is-done { border-color: var(--lime-600); background: var(--lime-50); }
.wl-step.is-done > b { background: var(--lime); color: var(--carbon); }
.wl-step.is-off { opacity: .55; }
.wl-step .btn { white-space: nowrap; }
.wl-later { justify-self: center; background: none; border: 0; color: var(--text-3); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px; }
.wl-done { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 10px 0; }
.wl-done .ic { width: 40px; height: 40px; color: var(--mint); }
@media (max-width: 560px) {
  .wl-scrim { place-items: end center; padding: 0; }
  .wl { width: 100%; border-radius: 26px 26px 0 0; padding: 22px 18px calc(16px + env(safe-area-inset-bottom)); max-height: 92dvh; transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) { .wl-bell .ic { animation: none; } }
/* Le rappel en bas ne cache pas le bouton panier */
@media (max-width: 900px) { body:has(.nag.is-in) .cart-fab { bottom: calc(196px + env(safe-area-inset-bottom)); } }
@media (min-width: 901px) { body:has(.nag.is-in) .cart-fab { bottom: 110px; } }
.wl-scrim { z-index: 1200; }
@media (max-width: 560px) { .wl-perks small { display: none; } .wl-perks li { padding: 8px 10px; } .wl-hero { gap: 6px; } .wl-bell { width: 64px; height: 64px; border-radius: 20px; } .wl { gap: 12px; } }

/* =====================================================================
   Étape 24 — Sur demande (équipe) : page refondue
   ===================================================================== */
.sdx { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.sdx-side { position: sticky; top: calc(var(--topbar-h, 64px) + 14px); }
@media (max-width: 1100px) {
  .sdx { grid-template-columns: minmax(0, 1fr); }
  .sdx-side { display: contents; }           /* la demande d'abord, puis la réponse, puis le commerçant */
  .sdx-req { order: -1; } .sdx-main { order: 0; } .sdx-who, .sdx-prod { order: 1; }
  .sdx-gallery .sd-media { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Carte de décision */
.sdx-decide { padding: 22px; display: grid; gap: 16px; }
.sdx-decide-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.sdx-decide-head h2 { margin: 0; font-size: 1.35rem; }
.sdx-claim { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--orange-50); border: 1px solid #FFD3C1; }
.sdx-claim.is-info { background: var(--surface-2); border-color: var(--line-2); grid-template-columns: 40px minmax(0, 1fr); }
.sdx-claim-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--orange); color: #fff; }
.sdx-claim.is-info .sdx-claim-ic { background: var(--carbon); color: var(--lime); }
.sdx-claim strong { display: block; font: 600 14px var(--font-display); }
.sdx-claim small { color: var(--text-2); font-size: 12.5px; }
@media (max-width: 560px) { .sdx-claim { grid-template-columns: 40px minmax(0, 1fr); } .sdx-claim .btn { grid-column: 1 / -1; } }

.sdx-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.sdx-opt { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; margin: 0; }
.sdx-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sdx-opt-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); transition: background .15s, color .15s; }
.sdx-opt strong { display: block; font: 600 14.5px var(--font-display); }
.sdx-opt small { color: var(--text-3); font-size: 12.5px; }
.sdx-opt:hover { border-color: var(--text-3); }
.sdx-opt.is-offer:has(input:checked) { border-color: var(--carbon); box-shadow: 0 0 0 3px rgba(200,255,50,.45); }
.sdx-opt.is-offer:has(input:checked) .sdx-opt-ic { background: var(--lime); color: var(--carbon); }
.sdx-opt.is-refuse:has(input:checked) { border-color: var(--pomegranate); box-shadow: 0 0 0 3px var(--pome-50); }
.sdx-opt.is-refuse:has(input:checked) .sdx-opt-ic { background: var(--pomegranate); color: #fff; }
.sdx-opt.is-ghost { padding: 0; display: block; }
.sdx-opt.is-ghost button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 14px; cursor: pointer; }
.sdx-opt.is-ghost button:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; border-radius: 14px; }

.sdx-pane { display: none; }
.sdx-decide:has(input[value="offer"]:checked) [data-pane="offer"],
.sdx-decide:has(input[value="refuse"]:checked) [data-pane="refuse"] { display: block; animation: sh-in .3s var(--ease, ease) both; }

/* Formulaire d'offre + aperçu */
.sdx-offer { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: start; }
@media (max-width: 1280px) and (min-width: 1101px), (max-width: 760px) { .sdx-offer { grid-template-columns: minmax(0, 1fr); } }
.sdx-offer-fields { display: grid; gap: 12px; }
.sdx-fs { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--line-2); border-radius: 16px; display: grid; gap: 12px; min-width: 0; }
.sdx-fs.has-error { border-color: var(--pomegranate); }
.sdx-fs legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; margin-left: -6px; font: 600 14px var(--font-display); }
.sdx-fs legend b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--carbon); color: var(--lime); font: italic 700 11.5px var(--font-display); }
.sdx-fs legend .opt { font: 400 12px var(--font); color: var(--text-3); }
.sdx-fs .field { margin: 0; }
.sdx-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .sdx-row { grid-template-columns: minmax(0, 1fr); } }
.sdx-target { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.sdx-target .chip { border-style: dashed; }
.sdx-preview { position: sticky; top: calc(var(--topbar-h, 64px) + 14px); display: grid; gap: 10px; }
.sdx-preview-lbl { display: flex; align-items: center; gap: 6px; color: var(--text-3); font: italic 500 12px var(--font-display); }
.sdx-pv-card { padding: 16px; border-radius: 18px; border: 2px solid var(--carbon); background: var(--surface); display: grid; gap: 10px; }
.sdx-pv-card .sd-eyebrow { justify-self: start; }
.sdx-pv-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.sdx-pv-price b { font: italic 800 2rem/1 var(--font-display); letter-spacing: -.03em; background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%); }
.sdx-pv-price b small { font-size: .5em; }
.sdx-pv-price span { color: var(--text-3); font-size: 12.5px; }
.sdx-pv-card ul { list-style: none; margin: 0; padding: 0; display: grid; }
.sdx-pv-card li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.sdx-pv-card li span { color: var(--text-3); }
.sdx-pv-card li b { font-weight: 600; text-align: right; }
.sdx-pv-total { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; color: var(--text-2); }
.sdx-preview .hint { text-align: center; margin: 0; }

/* Refus */
.sdx-refuse { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--pome-50); }
.sdx-refuse label { font: 600 14px var(--font-display); }
.sdx-refuse .chip { background: var(--surface); }
.sdx-refuse-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

/* Offre envoyée */
.sdx-sent { display: grid; gap: 14px; }
.sdx-sent-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sdx-closed { padding: 20px; display: grid; gap: 14px; justify-items: start; }

/* Colonne de droite */
.sdx-req { overflow: hidden; }
.sdx-gallery { padding: 12px 12px 0; }
.sdx-gallery .sd-media { gap: 6px; }
.sdx-nophoto { display: grid; justify-items: center; gap: 6px; padding: 28px 12px; margin: 12px 12px 0; border-radius: 14px; background: var(--surface-2); color: var(--text-3); font-size: 13px; }
.sdx-req-body { padding: 14px 16px 16px; display: grid; gap: 12px; }
.sdx-who { padding: 14px 16px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; }
.sdx-who .avatar { width: 46px; height: 46px; border-radius: 14px; background: var(--carbon); color: var(--lime); font: 700 14px var(--font-display); }
.sdx-who-txt { display: grid; gap: 2px; min-width: 0; }
.sdx-who-txt strong { font: 600 15px var(--font-display); }
.sdx-who-txt small { color: var(--text-3); font-size: 12.5px; overflow-wrap: anywhere; }
.sdx-who-act { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sdx-who-act .ic { color: inherit; }
.sdx-prod { padding: 14px 16px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sdx-prod-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.sdx-prod-txt strong { display: block; font: 600 14px var(--font-display); }
.sdx-prod-txt small { color: var(--text-3); font-size: 12px; }
.sdx-refuse .btn-danger { --b-bg: var(--pomegranate); --b-bd: var(--pomegranate); --b-fg: #fff; }
.sdx-fs .input-suffix { display: flex; width: 100%; max-width: none; }
.sdx-fs .input-suffix .input { flex: 1; width: 100%; min-width: 0; }

/* Médias d'une demande : vignettes qui ouvrent la visionneuse */
.sd-shot { position: relative; padding: 0; border: 0; cursor: zoom-in; font: inherit; }
.sd-zoom { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(17,19,24,.72); color: #fff; opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s; }
.sd-shot:hover .sd-zoom, .sd-shot:focus-visible .sd-zoom { opacity: 1; transform: none; }
@media (hover: none) { .sd-zoom { opacity: 1; transform: none; } }
.sd-vtile { grid-column: 1 / -1; position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 16 / 9; }
.sd-vtile video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; pointer-events: none; }
.sd-vtile-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--carbon); box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); transition: transform .15s; }
.sd-vtile:hover .sd-vtile-play { transform: scale(1.08); }
button.sd-vlink { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.qv-foot:not(:has(> :not([hidden]))) { display: none; }

/* Offre : à la pièce ou au carton */
.sdx-unit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sdx-unit label { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .15s, box-shadow .15s; margin: 0; }
.sdx-unit input { position: absolute; opacity: 0; pointer-events: none; }
.sdx-unit-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.sdx-unit strong { display: block; font: 600 14px var(--font-display); }
.sdx-unit small { color: var(--text-3); font-size: 12px; }
.sdx-unit label:has(input:checked) { border-color: var(--carbon); box-shadow: 0 0 0 3px rgba(200,255,50,.45); }
.sdx-unit label:has(input:checked) .sdx-unit-ic { background: var(--lime); color: var(--carbon); }
.sdx-unit label:has(input:focus-visible) { outline: 2px solid var(--carbon); outline-offset: 2px; }
.sdx-pack { display: none; }
.sdx-fs:has(input[name="offer_unit"][value="pack"]:checked) .sdx-pack { display: block; }
@media (max-width: 560px) { .sdx-unit { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Étape 25 — Soldes antérieurs : signal rouge côté commerçant
   ===================================================================== */
.pay-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pomegranate); box-shadow: 0 0 0 3px rgba(217,45,68,.18); margin-left: auto; flex: none; animation: pay-pulse 2.4s ease-in-out infinite; }
.nav a .pay-dot { margin-left: 8px; }
.nav a .count + .pay-dot { margin-left: 6px; }
.tabbar a { position: relative; }
.tabbar a > .pay-dot { position: absolute; top: 4px; left: calc(50% + 10px); margin: 0; box-shadow: 0 0 0 2px var(--carbon); }
@keyframes pay-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(217,45,68,.18); } 50% { box-shadow: 0 0 0 6px rgba(217,45,68,.08); } }
.tabbar a > .pay-dot { animation: none; }
.pay-flag { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--pomegranate); color: #fff; font: italic 700 11.5px/1.4 var(--font-display); white-space: nowrap; }
.pay-nudge.is-alert { border-color: #F3C7CD; background: var(--pome-50); }
.pay-nudge.is-alert .pn-ic { background: var(--pomegranate); color: #fff; }
.pay-nudge.is-alert strong { color: #9F1D30; }
.pa-facts .is-ob dd { color: var(--pomegranate); }
.led-ob td { background: var(--surface-2); font-weight: 500; }
.led-ref.is-ob { color: var(--text-2); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .pay-dot { animation: none; } }

/* =====================================================================
   Étape 25 — Soldes antérieurs (équipe)
   ===================================================================== */
.ob-panel { border: 1.5px solid #F3C7CD; }
.ob-panel .panel-head h2 .ic { color: var(--pomegranate); }
.ob-sum { font-size: 13px; }
.ob-sum b { font: italic 700 16px var(--font-display); }
.ob-sum b.is-late { color: var(--pomegranate); }
.ob-intro { margin: 0; padding: 14px 22px 4px; display: flex; gap: 10px; color: var(--text-2); font-size: 13.5px; }
.ob-intro .ic { flex: none; margin-top: 2px; }
.ob-list { list-style: none; margin: 0; padding: 8px 16px 0; display: grid; gap: 10px; }
.ob-item { padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); display: grid; gap: 10px; }
.ob-item.is-late { border-color: #F3C7CD; background: #FFFBFB; }
.ob-item.is-paid { opacity: .75; }
.ob-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ob-txt strong { display: block; font: 600 14.5px var(--font-display); }
.ob-txt small { color: var(--text-3); font-size: 12.5px; }
.ob-amt { display: grid; justify-items: end; gap: 4px; }
.ob-amt b { font: italic 700 17px var(--font-display); }
.ob-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.ob-acts details { flex: 1 1 100%; }
.ob-acts details:not([open]) { flex: 0 0 auto; }
.ob-acts summary { list-style: none; cursor: pointer; }
.ob-acts summary::-webkit-details-marker { display: none; }
.ob-acts details[open] > summary { margin-bottom: 10px; }
.ob-acts .pay-form, .ob-form { padding: 14px; border-radius: 14px; background: var(--surface-2); display: grid; gap: 10px; }
.ob-form-act { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-del { margin-top: 8px; }
.ob-pays { margin: 0; }
.ob-add { margin: 12px 16px 16px; border-radius: 16px; border: 1.5px dashed var(--line); padding: 12px 14px; }
.ob-add > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font: 600 14px var(--font-display); }
.ob-add > summary::-webkit-details-marker { display: none; }
.ob-add[open] > summary { margin-bottom: 12px; }
.ob-add .ob-form { background: transparent; padding: 0; }
@media (max-width: 560px) { .ob-main { grid-template-columns: minmax(0, 1fr); } .ob-amt { justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; } }

/* Page de reprise */
.ob-settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px 20px; padding: 16px 22px; border-bottom: 1px solid var(--line-2); align-items: start; }
.ob-settings .field { margin: 0; }
.ob-due { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ob-due .input { width: auto; }
.ob-notify { grid-column: 1 / -1; }
@media (max-width: 700px) { .ob-settings { grid-template-columns: minmax(0, 1fr); } }
.ob-find { padding: 12px 22px; }
.ob-table td { vertical-align: middle; }
.ob-table small { font-size: 12px; }
.ob-input { width: 150px; text-align: right; margin-left: auto; display: block; }
.ob-input[readonly] { background: var(--surface-2); color: var(--text-3); }
.ob-foot { position: sticky; bottom: 0; background: var(--surface); justify-content: space-between; align-items: center; border-radius: 0 0 var(--r-lg) var(--r-lg); z-index: 2; }
@media (max-width: 900px) { .ob-foot { bottom: calc(70px + env(safe-area-inset-bottom)); } }
.ob-example { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; overflow-x: auto; }
.ob-import-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.acc-sum.client-sum { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.acc-sum .is-ob strong { color: var(--pomegranate); }
.ob-form .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.ob-form .form-grid .span-2 { grid-column: 1 / -1; }
.ob-form-act .btn { white-space: normal; }
.ob-acts details:not([open]) > :not(summary), .ob-add:not([open]) > :not(summary) { display: none; }

/* =====================================================================
   Étape 26 — Nouvelle commande (équipe) : comptoir, téléphone, historique
   ===================================================================== */
.tn-step { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--carbon); color: var(--lime); font: italic 700 12.5px var(--font-display); margin-right: 8px; flex: none; }
.tn-client { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px; margin-bottom: 16px; }
.tn-client-body { display: grid; gap: 6px; min-width: 0; }
.tn-client-body label { font: 600 13px var(--font-display); color: var(--text-2); }
.tn-client.is-set { border: 1.5px solid var(--carbon); }
.tn-client-acc { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.tn-client-acc > span { display: grid; gap: 2px; }
.tn-client-acc small { font-size: 11.5px; color: var(--text-3); }
.tn-client-acc b { font: italic 700 15px var(--font-display); }
.tn-client-acc b.is-late { color: var(--pomegranate); }
.tn-client-acc b.is-ok { color: var(--mint); }
@media (max-width: 900px) { .tn-client { grid-template-columns: auto minmax(0, 1fr); } .tn-client-acc { grid-column: 1 / -1; } }

.tn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.tn-sum { position: sticky; top: calc(var(--topbar-h, 64px) + 14px); }
@media (max-width: 1100px) { .tn-grid { grid-template-columns: minmax(0, 1fr); } .tn-sum { position: static; } }
.tn .panel-head h2 { display: flex; align-items: center; }

.tn-search { position: relative; padding: 14px 18px 6px; }
.tn-search .search { max-width: none; }
.tn-search input[type=search] { height: 46px; font-size: 15px; }
.tn-results { position: absolute; z-index: 20; left: 18px; right: 18px; top: calc(100% - 2px); max-height: 360px; overflow-y: auto; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 22px 46px -22px rgba(17,19,24,.45); }
.tn-r { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.tn-r:hover, .tn-r:focus-visible { background: var(--surface-2); }
.tn-r-txt { display: grid; min-width: 0; }
.tn-r-txt strong { font: 600 14px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-r-txt small { color: var(--text-3); font-size: 12px; }
.tn-r b { font: italic 700 14px var(--font-display); }
.tn-r-none { margin: 0; padding: 12px; color: var(--text-3); font-size: 13px; }
.tn-img { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); flex: none; }
.tn-img img { width: 100%; height: 100%; object-fit: cover; }

.tn-lines { padding: 6px 18px 16px; display: grid; gap: 8px; }
.tn-empty { margin: 0; padding: 22px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); font-size: 13.5px; border: 1.5px dashed var(--line); border-radius: 14px; text-align: center; }
.tn-line { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto 150px 110px 32px; gap: 10px 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); }
.tn-line.is-new { animation: tn-in .45s var(--ease, ease); }
@keyframes tn-in { from { background: var(--lime-50); } to { background: var(--surface); } }
.tn-line.is-changed .tn-price .input { border-color: var(--orange); background: var(--orange-50); }
.tn-line.is-short { border-color: #F3C7CD; }
.tn-line.is-short [data-stock] { color: var(--pomegranate); }
.tn-l-main { display: grid; gap: 3px; min-width: 0; }
.tn-l-main strong { font: 600 14px/1.3 var(--font-display); }
.tn-l-main small { color: var(--text-3); font-size: 12px; }
.tn-var, .tn-unit { height: 34px; font-size: 13px; padding: 0 28px 0 10px; }
.tn-unit-lbl { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.tn-price { display: grid; gap: 2px; }
.tn-price .input-suffix { max-width: none; }
.tn-price .input { height: 38px; font-size: 14px; text-align: right; padding-right: 36px; }
.tn-price .input-suffix span { font-size: 11.5px; right: 10px; }
.tn-price small { font-size: 11px; color: var(--orange-ink); text-align: right; min-height: 13px; }
.tn-l-total { font: italic 700 14px var(--font-display); text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .tn-line { grid-template-columns: 42px minmax(0, 1fr) 32px; }
  .tn-line > .stepper, .tn-line > .tn-price, .tn-line > .tn-unit, .tn-line > .tn-unit-lbl { grid-column: 2 / -1; }
  .tn-line > .tn-l-total { grid-column: 2 / 3; text-align: left; }
  .tn-line > .tn-del { grid-row: 1; grid-column: 3; }
  .tn-price small { text-align: left; }
}
.tn-fees { display: grid; gap: 8px; }
.tn-fees:empty { display: none; }
.tn-fee { display: grid; grid-template-columns: minmax(0, 1fr) 160px 32px; gap: 8px; align-items: center; }
.tn-fee .input-suffix { max-width: none; }
.tn-disc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.tn-disc-lbl { font: 600 14px var(--font-display); }
.tn-disc .seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); }
.tn-disc .seg label { position: relative; margin: 0; }
.tn-disc .seg input { position: absolute; opacity: 0; pointer-events: none; }
.tn-disc .seg span { display: block; padding: 7px 14px; border-radius: 9px; font: 600 13px var(--font-display); color: var(--text-2); cursor: pointer; }
.tn-disc .seg input:checked + span { background: var(--carbon); color: #fff; }
.tn-disc .seg input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }
.tn-disc-val { width: 120px; text-align: right; }
.tn:has([name="discount_type"][value="none"]:checked) .tn-disc-val { opacity: .4; pointer-events: none; }

.tn-date { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px 18px; align-items: start; }
@media (max-width: 700px) { .tn-date { grid-template-columns: minmax(0, 1fr); } }
.tn-hist { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); }
.tn-hist-txt { margin: 0; display: flex; gap: 8px; font-size: 13px; color: var(--text-2); }
.tn-hist-txt .ic { flex: none; margin-top: 2px; }
.tn-hist .is-off { opacity: .5; }
.tn-paid { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 180px) auto; gap: 12px; align-items: end; }
.tn-paid .field { margin: 0; }
.tn-paid-all { margin-bottom: 6px; }
@media (max-width: 560px) { .tn-paid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tn-paid-all { grid-column: 1 / -1; justify-self: start; } }
.tn-ship summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font: 600 13.5px var(--font-display); list-style: none; }
.tn-ship summary::-webkit-details-marker { display: none; }
.tn-ship summary small { font: 400 12px var(--font); color: var(--text-3); }
.tn-ship[open] summary { margin-bottom: 12px; }
.tn-sum-list { margin: 0; padding: 4px 20px 0; }
.tn-act { display: grid; gap: 8px; }
.tn-act > div { display: grid; gap: 8px; }
.tn-act .btn { justify-content: flex-start; text-align: left; height: auto; padding: 12px 16px; gap: 12px; }
.tn-act .btn > span { display: grid; gap: 1px; }
.tn-act .btn strong { font: 700 15px var(--font-display); }
.tn-act .btn small { font: 400 12px var(--font); opacity: .75; }
.tn-act .btn[disabled] { opacity: .45; }
.tn-again { font-size: 12.5px; }

/* Encaisser un paiement sur le compte */
.ar-panel { border: 1.5px solid var(--carbon); }
.ar-state { font-size: 13px; color: var(--text-2); }
.ar-state b { font: italic 700 15px var(--font-display); color: var(--text); }
.ar-state b.is-ok { color: var(--mint); }
.ar-form { display: grid; gap: 12px; }
.ar-row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ar-row .field, .ar-target { margin: 0; }
.ar-amt .input-suffix { max-width: none; }
@media (max-width: 900px) { .ar-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-amt { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ar-row { grid-template-columns: minmax(0, 1fr); } }
.ar-preview { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--lime-50); font-size: 13px; color: var(--text-2); }
.ar-preview b.is-ok { color: var(--mint); }
.ar-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ar-hist { margin: 0 20px 16px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.ar-hist summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font: 600 13.5px var(--font-display); }
.ar-hist summary::-webkit-details-marker { display: none; }
.ar-hist[open] summary { margin-bottom: 8px; }
.ar-hist:not([open]) > :not(summary) { display: none; }
.ar-list small { display: block; }
.ar-hist-link { margin: -6px 0 0; }

/* Commande : prix modifiables, frais, remise */
.ord-price .input-suffix { max-width: 130px; margin-left: auto; }
.ord-price .input { height: 34px; font-size: 13.5px; text-align: right; padding-right: 34px; }
.ord-price .input-suffix span { font-size: 11px; right: 9px; }
.ord-fee td strong { display: inline-flex; align-items: center; gap: 6px; }
.ord-sum .is-disc dd, .ord-sum .is-disc dt { color: var(--mint); }
.ord-extra { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.ord-fee-form, .ord-disc-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ord-fee-form > .input { flex: 1 1 180px; }
.ord-fee-form .input-suffix { max-width: 150px; }
.ord-extra-lbl { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px var(--font-display); min-width: 130px; }
.ord-disc-form .tn-disc-val { width: 100px; }
.ord-disc-form:has([value="none"]:checked) .tn-disc-val { opacity: .4; }
@media (max-width: 560px) { .page-head .actions { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
@media (max-width: 560px) { .merchant-head .actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } }

/* Solde antérieur repliable (fiche commerçant) */
.ob-fold > summary { cursor: pointer; list-style: none; }
.ob-fold > summary::-webkit-details-marker { display: none; }
.ob-fold:not([open]) > summary { border-bottom: 0; }
.ob-fold:not([open]) > :not(summary) { display: none; }
.ob-fold .ob-sum { display: inline-flex; align-items: center; gap: 6px; }
.ob-fold .ob-sum > .ic:last-child { transition: transform .2s; color: var(--muted, #8a8a8a); }
.ob-fold[open] .ob-sum > .ic:last-child { transform: rotate(180deg); }
.ob-fold > summary:hover h2 { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Étape 27 · Mon compte : carte d'identité, onglets, profil en cartes
   ========================================================================== */
.acc-hero {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center;
  padding: 24px 26px; margin: 4px 0 14px; border-radius: var(--r-lg); color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(200,255,50,.16), transparent 52%), linear-gradient(135deg, var(--carbon), #1d2129);
  box-shadow: 0 18px 40px -26px rgba(17,19,24,.8);
}
.acc-hero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(255,255,255,.06); pointer-events: none; }
.acc-photo { position: relative; margin: 0; }
.acc-avatar { position: relative; display: block; cursor: pointer; }
.acc-avatar .avatar { width: 84px; height: 84px; border-radius: 24px; font: 700 1.6rem var(--font-display); box-shadow: 0 0 0 4px rgba(255,255,255,.08); overflow: hidden; }
.acc-avatar .avatar img { width: 100%; height: 100%; object-fit: cover; }
.acc-avatar .avatar.is-loading { opacity: .6; }
.acc-cam { position: absolute; right: -6px; bottom: -6px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: #fff; color: var(--carbon); box-shadow: 0 4px 12px -4px rgba(0,0,0,.5); transition: transform .15s; }
.acc-avatar:hover .acc-cam { transform: scale(1.08); background: var(--lime); }
.acc-avatar:focus-within .acc-cam { outline: 2px solid var(--lime); outline-offset: 2px; }
.acc-photo-rm { position: absolute; left: -6px; top: -6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s; }
.acc-photo:hover .acc-photo-rm, .acc-photo-rm:focus-visible { opacity: 1; }
.acc-photo-rm:hover { background: var(--pomegranate); }
.acc-id { min-width: 0; }
.acc-eyebrow { display: inline-block; font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); margin-bottom: 6px; }
.acc-id h1 { margin: 0; font: 700 1.65rem/1.15 var(--font-display); letter-spacing: -.01em; color: #fff; overflow-wrap: anywhere; }
.acc-brand { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: #C9CDD5; font-weight: 500; }
.acc-brand .ic { color: var(--lime); }
.acc-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.acc-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); font-size: var(--fs-xs); color: #D7DAE0; white-space: nowrap; }
.acc-chips .ic { width: 13px; height: 13px; color: var(--ink-text); }
.acc-meter { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); max-width: 270px; }
.acc-ring { --c: var(--lime); flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, #1b1f26 78%, transparent 80% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.acc-ring b { font: 700 15px var(--font-display); color: #fff; }
.acc-ring small { font-size: 10px; color: var(--ink-text); }
.acc-meter-txt { display: grid; gap: 2px; }
.acc-meter-txt strong { font: 600 13.5px var(--font-display); color: #fff; }
.acc-meter-txt small { font-size: 12px; color: var(--ink-text); line-height: 1.35; }
.acc-meter.is-full .acc-ring { --c: var(--lime); }

.acc-tabs { display: flex; gap: 4px; padding: 5px; margin: 0 0 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; width: fit-content; max-width: 100%; }
.acc-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px; color: var(--text-2); font-weight: 500; font-size: var(--fs-md); white-space: nowrap; transition: background .15s, color .15s; }
.acc-tabs a:hover { background: var(--surface-2); color: var(--text); }
.acc-tabs a.is-active { background: var(--carbon); color: #fff; }
.acc-tabs a.is-active .ic { color: var(--lime); }

/* Profil */
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pf-card { padding: 22px; }
.pf-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.pf-head h2 { margin: 0; font: 600 1.05rem var(--font-display); }
.pf-head p { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-sm); }
.pf-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--lime-50); color: var(--lime-ink); }
.pf-card .form-grid { gap: 14px 14px; }
.pf-locked .input:disabled { background: var(--surface-2); color: var(--text-2); -webkit-text-fill-color: var(--text-2); opacity: 1; }
.pf-lock { position: absolute; right: 14px; color: var(--text-3); display: grid; }
.pf-social { display: grid; gap: 10px; }
.pf-soc { margin: 0; }
.pf-soc-row { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.pf-soc-row:focus-within { border-color: var(--carbon); box-shadow: 0 0 0 3px rgba(200,255,50,.45); }
.pf-soc-row .input { border: 0; box-shadow: none !important; border-radius: 0; min-width: 0; flex: 1; }
.pf-soc-ic { flex: none; width: 46px; align-self: stretch; display: grid; place-items: center; background: var(--surface-2); border-right: 1px solid var(--line); color: var(--text-2); }
.pf-soc-ic.is-facebook { color: #1877F2; }
.pf-soc-ic.is-instagram { color: #D62976; }
.pf-soc-ic.is-tiktok { color: var(--carbon); }
.pf-soc.has-error .pf-soc-row { border-color: var(--pomegranate); }

.pf-save { position: relative; z-index: 30; margin: 18px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 34px -22px rgba(17,19,24,.55); transition: background .2s, border-color .2s; }
.pf-save-txt { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: var(--fs-sm); min-width: 0; }
.pf-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-50); }
.pf-save.is-dirty { position: sticky; bottom: 16px; background: var(--carbon); border-color: var(--carbon); }
.pf-card .form-grid > .field, .pf-card .form-grid > .field + .field { margin: 0; }
.pf-save.is-dirty .pf-save-txt { color: #fff; font-weight: 500; }
.pf-save.is-dirty .pf-dot { background: var(--lime); box-shadow: 0 0 0 4px rgba(200,255,50,.2); animation: pfPulse 1.4s infinite; }
@keyframes pfPulse { 50% { box-shadow: 0 0 0 7px rgba(200,255,50,0); } }
.pf-save:not(.is-dirty) .btn-primary { --b-bg: var(--surface-2); --b-fg: var(--text-3); --b-bd: var(--line); }
.pf-bill { margin-top: 22px; }
.pf-managed { display: flex; gap: 8px; align-items: flex-start; margin: 16px 2px 0; color: var(--text-3); font-size: var(--fs-sm); }
.pf-managed .ic { flex: none; margin-top: 2px; }
.pf-managed a { color: var(--text); font-weight: 600; }

/* Code PIN */
.sec-body { padding: 22px; }
.sec-pins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sec-pins .field { margin: 0; }
.sec-pins .input.pin-field { text-align: center; padding-left: 12px; height: 56px; font-size: 1.4rem; letter-spacing: .45em; }
.sec-pins .input-action { right: 4px; }
.sec-rule { display: flex; align-items: center; gap: 6px; margin: 12px 0 16px; }

/* Appareils */
.dv-live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-50); margin-right: 4px; vertical-align: middle; }
.device-line { margin: 4px 0 0; color: var(--text-3); font-size: var(--fs-sm); }
.dv-old { margin-top: 16px; }
.dv-old > summary { cursor: pointer; list-style: none; border-bottom: 0; }
.dv-old > summary::-webkit-details-marker { display: none; }
.dv-old[open] > summary { border-bottom: 1px solid var(--line-2); }
.dv-old:not([open]) > :not(summary) { display: none; }
.dv-old-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-sm); }
.dv-old[open] .dv-old-hint .ic { transform: rotate(180deg); }
.dv-old .device-ic { opacity: .55; }
.dv-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 2px 0; color: var(--text-3); font-size: var(--fs-sm); }
.dv-note .ic { flex: none; margin-top: 2px; }

@media (max-width: 1100px) {
  .acc-hero { grid-template-columns: auto minmax(0, 1fr); }
  .acc-meter { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-save.is-dirty { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .acc-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 2px; padding: 4px; }
  .acc-tabs a { flex-direction: column; gap: 4px; padding: 8px 2px; font-size: 11px; justify-content: center; }
  .acc-tabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 560px) {
  .acc-hero { gap: 14px 16px; padding: 18px; margin-top: 0; }
  .acc-avatar .avatar { width: 64px; height: 64px; border-radius: 19px; font-size: 1.2rem; }
  .acc-cam { width: 26px; height: 26px; border-radius: 9px; }
  .acc-id h1 { font-size: 1.3rem; }
  .acc-chips li:nth-child(n+3) { display: none; }
  .acc-meter { padding: 10px 12px 10px 10px; }
  .acc-ring { width: 46px; height: 46px; }
  .pf-card { padding: 18px 16px; }
  .sec-pins { grid-template-columns: minmax(0, 1fr); }
  .device { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .device-ic { width: 40px; height: 40px; }
  .device-actions { grid-column: 2; justify-content: flex-start; }
  .dv-old-hint { display: none; }
}
.grid-aside .panel-foot.split { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
@media (max-width: 560px) {
  .device-actions { flex-direction: row; align-items: center; }
  .device-actions > * { flex: none; }
  .device-actions summary { display: inline-flex; }
}

/* ==========================================================================
   Étape 27 · Sur demande (commerçant) : suivi d'une demande
   ========================================================================== */
.rq-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px 18px; margin: 6px 0 18px; display: grid; gap: 18px; }
.rq-top { display: flex; gap: 16px; align-items: center; min-width: 0; }
.rq-cover { flex: none; width: 72px; height: 72px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: var(--lime-50); color: var(--lime-ink); border: 1px solid var(--line-2); }
.rq-cover img { width: 100%; height: 100%; object-fit: cover; }
.rq-cover .ic { width: 28px; height: 28px; }
.rq-title { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.rq-ref { font-size: var(--fs-sm); color: var(--text-3); }
.rq-title h1 { margin: 0; font: 700 1.6rem/1.15 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.rq-prog { display: none; }
.rq-journey { border-top: 1px solid var(--line-2); padding-top: 18px; overflow-x: auto; scrollbar-width: none; }
.rq-journey::-webkit-scrollbar { display: none; }
.rq-hero.is-closed .rq-cover { filter: grayscale(1); opacity: .6; }

.rq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.rq-main { display: grid; gap: 18px; min-width: 0; }
.rq-side { position: sticky; top: 84px; display: grid; gap: 18px; }
.rq-mine .panel-head h2 .ic { color: var(--text-3); }

/* L'offre : infos à gauche, calcul à droite */
.rq .sd-offer { border: 1px solid var(--line); box-shadow: 0 22px 44px -34px rgba(17,19,24,.5); position: relative; overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "info form" "alt form"; gap: 18px 22px; align-items: start; padding: 24px; }
.rq .sd-offer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--lime), var(--lime-600)); }
.rq-offer-info { grid-area: info; display: grid; gap: 16px; }
.rq .sd-accept { grid-area: form; margin: 0; background: var(--surface-2); }
.rq-offer-alt { grid-area: alt; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.rq .sd-valid { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); }
.rq .sd-valid .ic { width: 13px; height: 13px; }
.rq .sd-valid.is-urgent { background: var(--orange-50); }
.rq .sd-facts { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.rq .sd-facts li { background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 10px 0; grid-template-columns: 30px minmax(0, 1fr); }
.rq .sd-facts li > .ic { width: 30px; height: 30px; padding: 7px; background: var(--surface-2); }
.rq .sd-facts li > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rq .sd-facts small { font-size: 13px; color: var(--text-2); }
.rq .sd-facts strong { text-align: right; }
.rq .sd-decline { flex: 1 1 100%; }
.rq .sd-decline summary { text-decoration: none; display: inline-flex; color: var(--text-2); }
.rq .sd-decline[open] summary { margin-bottom: 8px; }
.rq .sd-decline form { padding: 12px; border-radius: 14px; background: var(--surface-2); }
.rq .sd-decline-act { justify-content: flex-end; }

/* États (attente, précommande, clos) */
.rq .sd-wait, .rq .sd-pre .panel-body { padding: 22px; }
.rq .sd-stage { padding: 16px; border-radius: 16px; background: var(--surface-2); }
.rq .sd-stage.is-ok { background: var(--lime-50); }

/* Échanges : journal discret, bulles nettes */
.rq .sd-thread .panel-head { padding-block: 16px; }
.rq .sd-msgs { background: var(--surface); padding: 18px 22px; gap: 12px; max-height: 560px; }
.rq .sd-ev { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; justify-items: start; align-items: start; gap: 10px; text-align: left; padding: 0 2px; position: relative; }
.rq .sd-ev::before { content: ""; width: 9px; height: 9px; margin: 5px 0 0 4px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); box-sizing: border-box; }
.rq .sd-ev:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: -14px; width: 1px; background: var(--line-2); }
.rq .sd-ev span { font: 500 13px/1.45 var(--font); font-style: normal; color: var(--text-2); padding: 0; border: 0; background: none; border-radius: 0; }
.rq .sd-ev time { white-space: nowrap; padding-top: 1px; }
.rq .sd-msg { margin: 4px 0; }
.rq .sd-msg:not(.is-me) .sd-bubble { background: var(--lime-50); border-color: #E3F5B6; }
.rq .sd-reply { grid-template-columns: minmax(0, 1fr) 48px; padding: 12px 14px 14px; background: var(--surface-2); }
.rq .sd-reply textarea { border-radius: 14px; background: var(--surface); }
.rq .sd-reply .btn { width: 48px; height: 48px; padding: 0; border-radius: 14px; justify-content: center; }
.rq .sd-reply .btn span { display: none; }

/* Nouvelle demande */
.rq-new { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; max-width: 1080px; }
.rq-new .sd-new { min-width: 0; }
.rq-how { position: sticky; top: 84px; padding: 22px; border-radius: var(--r-lg); color: #fff; background: radial-gradient(130% 120% at 100% 0%, rgba(200,255,50,.15), transparent 55%), var(--carbon); }
.rq-how h2 { margin: 0 0 16px; font: 600 1.05rem var(--font-display); color: #fff; }
.rq-how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rq-how li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.rq-how li > span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--lime); color: var(--carbon); font: 700 13px var(--font-display); }
.rq-how strong { font: 600 14px var(--font-display); }
.rq-how p { margin: 2px 0 0; color: var(--ink-text); font-size: 13px; line-height: 1.45; }
.rq-how-foot { display: flex; gap: 8px; align-items: center; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); color: #C9CDD5; font-size: 12.5px; }
.rq-how-foot .ic { color: var(--lime); flex: none; }

@media (max-width: 1100px) {
  .rq .sd-offer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "form" "alt"; }
}
@media (max-width: 900px) {
  .rq-grid { display: flex; flex-direction: column; gap: 16px; }
  .rq-main { display: contents; }
  .rq-side { position: static; order: 2; }
  .rq-grid .sd-thread { order: 3; }
  .rq-new { grid-template-columns: minmax(0, 1fr); }
  .rq-how { position: static; order: -1; padding: 18px; }
  .rq-how ol { gap: 12px; }
}
@media (max-width: 560px) {
  .rq-hero { padding: 16px; gap: 14px; margin-top: 0; }
  .rq-cover { width: 56px; height: 56px; border-radius: 15px; }
  .rq-title h1 { font-size: 1.25rem; }
  .rq-journey { display: none; }
  .rq-prog { display: grid; gap: 8px; }
  .rq-prog-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; color: var(--text-2); }
  .rq-prog-txt strong { color: var(--text); font-family: var(--font-display); }
  .rq-prog-txt small { color: var(--text-3); font-size: 12px; }
  .rq-bar { height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
  .rq-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--carbon), #3a3f49); }
  .rq-hero.is-closed .rq-bar i { background: var(--text-3); }
  .rq .sd-offer { padding: 18px 16px; }
  .rq .sd-price b { font-size: 2.5rem; }
  .rq .sd-msgs { padding: 16px; }
  .rq .sd-msg { max-width: 88%; }
  .rq-how ol li:nth-child(n+2) p { display: none; }
}
.rq .sd-decline { flex: none; }
.rq .sd-decline[open] { flex: 1 1 100%; }
.rq .sd-thread { overflow: hidden; }
.rq-new .sd-new .panel-body.stack { gap: 18px; }
.rq-new .sd-new .field { margin-bottom: 0; }
@media (max-width: 900px) { .rq-grid { align-items: stretch; } }
.rq-hero.is-closed .rq-bar { display: none; }
@media (max-width: 560px) { .rq-new .sd-more summary small { display: none; } }