/* ==========================================================================
   Marketplus — feuille de style unique
   Direction : « planche contact ». Clair = table lumineuse, sombre = labo.
   Les repères de coupe (.plate) et la typo mono des données sont la signature.
   ========================================================================== */

/* ── Jetons ─────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --ink:      #16181D;
  --ink-2:    #565C67;
  --ink-3:    #8A8F99;
  --paper:    #F6F7F8;
  --card:     #FFFFFF;
  --card-2:   #FAFAFB;
  --line:     #E4E5E9;
  --line-2:   #F0F1F3;

  --acc:      #D97316;
  --acc-deep: #9A4E07;
  --acc-soft: #FDF4EA;

  --photo:    #2A6FB0;
  --video:    #6455D0;
  --news:     #0D8579;
  --bann:     #A85A10;
  --cata:     #8E2F6B;
  --fiche:    #4A5B78;
  --pack:     #7A6A18;

  --ok:       #16794A;
  --ok-soft:  #EDF7F1;
  --bad:      #C62F2F;
  --bad-soft: #FDEDED;

  /* Module Business. La periode est a l'accent, la comparaison est GRISE :
     une reference n'est pas un jugement, et la colorer ferait croire a une
     seconde grandeur. */
  --biz-now:  #D97316;

  /* Palette catégorielle des figures — celle du skill dataviz, mesurée par son
     validateur sur nos deux fonds (#FFFFFF et #111926) : bande de clarté,
     plancher de chroma, séparation en vision déficiente et plancher de vision
     normale passent dans les deux modes. Elle s'attribue dans l'ORDRE, jamais
     en boucle : une septième part va dans « Autres », qui reste gris.
     Trois de ces tons passent sous 3:1 en clair — d'où la légende chiffrée
     obligatoire à côté de toute figure qui les emploie. */
  --cat-1: #2a78d6;  --cat-2: #eb6834;  --cat-3: #1baf7a;
  --cat-4: #eda100;  --cat-5: #e87ba4;  --cat-6: #008300;
  --cat-autres: #7E8794;
  --biz-was:  #7E8794;
  --biz-band: rgba(217,115,22,.09);

  /* TROIS RÔLES, PAS UN SEUL. Le mono disait « donnée » ; à force de le mettre
     partout il ne disait plus rien et tout sonnait machine à écrire. Il
     redevient ce qu'il est : la police des CODES — références, identifiants,
     SIRET. Les CHIFFRES passent en display avec des chiffres tabulaires :
     alignés comme du mono, dessinés comme du texte. */
  --f-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --f-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Un chiffre s'aligne sans être monospacé : c'est ce réglage qui le permet. */
  --chiffres: tabular-nums lining-nums;

  --r:   12px;
  --r-s: 8px;
  --r-l: 18px;

  --sh-1: 0 1px 2px rgba(20,22,28,.05), 0 1px 1px rgba(20,22,28,.03);
  --sh-2: 0 4px 12px -4px rgba(20,22,28,.09), 0 1px 2px rgba(20,22,28,.04);
  --sh-3: 0 20px 52px -14px rgba(20,22,28,.20), 0 3px 10px rgba(20,22,28,.06);
  /* Le liseré du haut : rien en clair, une lueur en sombre. */
  --lisere: inset 0 1px 0 rgba(255,255,255,0);

  --rail-w: 236px;
  --top-h: 60px;
  --tab-h: 62px;
  --gut: 22px;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --biz-now:  #F2953F;

  /* Les mêmes huit teintes, redescendues pour le fond sombre — pas un
     retournement automatique du mode clair. */
  --cat-1: #3987e5;  --cat-2: #d95926;  --cat-3: #199e70;
  --cat-4: #c98500;  --cat-5: #d55181;  --cat-6: #008300;
  --cat-autres: #8A93A0;
  --biz-was:  #5C6A7D;
  --biz-band: rgba(242,149,63,.12);

  --ink:      #E8EEF6;
  --ink-2:    #A6B4C7;
  --ink-3:    #71829A;
  --paper:    #080D14;
  --card:     #111926;
  --card-2:   #0D141E;
  --line:     #1F2C3C;
  --line-2:   #18232F;

  --acc:      #F2953F;
  --acc-deep: #FFB870;
  --acc-soft: #2B1C0C;

  --photo:    #4FA3DC;
  --video:    #9384F0;
  --news:     #2CB5A4;
  --bann:     #E39A4A;
  --cata:     #DE79B6;
  --fiche:    #92A6C6;
  --pack:     #C9B646;

  --site-0:   #7C93E8;
  --site-1:   #3FC4C9;
  --site-2:   #6FC8F0;
  --site-3:   #DE79B6;
  --site-4:   #E3B25A;

  --ok:       #3BB466;
  --ok-soft:  #10251A;
  --bad:      #F06A6A;
  --bad-soft: #2A1315;

  --lisere: inset 0 1px 0 rgba(255,255,255,.05);
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 6px 18px -6px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.4);
  --sh-3: 0 28px 64px -14px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] { color-scheme: dark;
    --ink:#E8EEF6; --ink-2:#A6B4C7; --ink-3:#71829A;
    --paper:#080D14; --card:#111926; --card-2:#0D141E;
    --line:#1F2C3C; --line-2:#18232F;
    --acc:#F2953F; --acc-deep:#FFB870; --acc-soft:#2B1C0C;
    --photo:#4FA3DC; --video:#9384F0; --news:#2CB5A4; --bann:#E39A4A;
    --cata:#DE79B6; --fiche:#92A6C6; --pack:#C9B646;
    --site-0:#7C93E8; --site-1:#3FC4C9; --site-2:#6FC8F0; --site-3:#DE79B6; --site-4:#E3B25A;
    --ok:#3BB466; --ok-soft:#10251A; --bad:#F06A6A; --bad-soft:#2A1315;
    --biz-now:#F2953F; --biz-was:#5C6A7D; --biz-band:rgba(242,149,63,.12);
    --lisere: inset 0 1px 0 rgba(255,255,255,.05);
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 6px 18px -6px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.4);
    --sh-3:0 28px 64px -14px rgba(0,0,0,.75),0 4px 12px rgba(0,0,0,.5);
  }
}

/* ── Réinitialisation ───────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, p, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--acc-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Étiquette de planche : la voix « fiche technique » de l'interface. */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Marque ─────────────────────────────────────────────────────────────── */

.wordmark {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.035em;
  color: var(--ink);
}
.wordmark em { font-style: normal; color: var(--acc); }
.wordmark.sm { font-size: 19px; }
.wordmark.xs { font-size: 20px; }

/* ── Écran de connexion ─────────────────────────────────────────────────── */

.gate {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: 24px;
  background: var(--paper);
  overflow: auto;
}
/* Grille de vignettes en filigrane : la planche contact, avant même l'entrée. */
.gate-bg {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px);
  background-size: 84px 108px;
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 72%);
  animation: drift 40s linear infinite;
}
@keyframes drift { to { transform: translate3d(84px, 108px, 0); } }

.gate-inner { position: relative; width: 100%; max-width: 392px; }

.gate-mark { text-align: center; margin-bottom: 22px; }
.gate-mark .wordmark { font-size: 30px; }
.gate-eyebrow {
  display: block; margin-top: 7px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}

.gate-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 26px 24px 20px;
  box-shadow: var(--sh-3);
}
.gate-h { font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.gate-p { margin: 5px 0 20px; color: var(--ink-2); font-size: 13.5px; }
.gate-err {
  margin: 0 0 12px; padding: 9px 12px;
  background: var(--bad-soft);
  border: 1px solid color-mix(in srgb, var(--bad) 34%, transparent);
  border-radius: var(--r-s); color: var(--bad); font-size: 13px;
}
.gate-foot { margin: 16px 0 0; text-align: center; font-size: 11px; color: var(--ink-3); }

/* ── Charpente applicative ──────────────────────────────────────────────── */

.app { min-height: 100dvh; }

.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 20;
  display: flex; flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--line);
}
.rail-brand { padding: 18px 20px 14px; }
.rail-nav { flex: 1; padding: 4px 10px 10px; display: flex; flex-direction: column; }

/* Trois blocs : ce qu'on produit, ce que ça donne, et le reste. Le dernier
   n'a pas de titre et se pousse en bas — on n'y va pas pour travailler. */
.rail-bloc { display: flex; flex-direction: column; gap: 2px; }
.rail-bloc + .rail-bloc { margin-top: 16px; }
.rail-bloc.bas {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2);
}
.rail-titre { padding: 0 11px 7px; color: var(--ink-3); }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-s);
  color: var(--ink-2); font-size: 14px; font-weight: 500;
  width: 100%; text-align: left; position: relative;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--line-2); color: var(--ink); }
.nav-item.on { background: var(--acc-soft); color: var(--acc-deep); font-weight: 650; }
.nav-item.on::before {
  content: ''; position: absolute; left: -10px; top: 50%; translate: 0 -50%;
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--acc);
}
.nav-item .pill {
  margin-left: auto; min-width: 20px; padding: 1px 6px;
  border-radius: 99px; background: var(--acc); color: #fff;
  font: 600 11px/1.6 var(--f-mono); text-align: center;
}

.rail-foot { padding: 12px; border-top: 1px solid var(--line-2); }

.shell { padding-left: var(--rail-w); min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 15;
  height: var(--top-h); flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--gut);
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.searchbar {
  flex: 1; max-width: 520px;
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 11px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 99px;
  color: var(--ink-3);
}
.searchbar:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.search-input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-size: 14px; color: var(--ink);
}
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.searchbar kbd {
  font: 600 11px var(--f-mono); padding: 1px 5px;
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink-3);
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Suggestions de recherche : références, noms et thématiques mêlés. */
.searchbar { position: relative; }
.sugg {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  max-height: 62dvh; overflow: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-3); padding: 5px;
}
.sugg button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: var(--r-s); text-align: left;
  color: var(--ink); font-size: 14px;
}
.sugg button:hover, .sugg button.on { background: var(--line-2); }
.sugg .k {
  font: 600 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; flex: none;
}
.sugg .k-theme { color: var(--news); background: color-mix(in srgb, var(--news) 12%, transparent); }
.sugg .k-nom { color: var(--video); background: color-mix(in srgb, var(--video) 12%, transparent); }
.sugg .k-reference { color: var(--photo); background: color-mix(in srgb, var(--photo) 12%, transparent); }
.sugg .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg .c { font: 600 11px var(--f-mono); color: var(--ink-3); }

.icon-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-s);
  color: var(--ink-2); transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--line-2); color: var(--ink); }

.whoami { display: flex; align-items: center; gap: 9px; padding-left: 4px; }
.avatar {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  font: 700 12px var(--f-mono); color: #fff; letter-spacing: -.02em;
}
.whoami-txt { line-height: 1.15; }
.whoami-txt b { display: block; font-size: 13px; font-weight: 650; }
.whoami-txt span { font-size: 10.5px; color: var(--ink-3); font-family: var(--f-mono);
                   letter-spacing: .08em; text-transform: uppercase; }

.main { flex: 1; padding: var(--gut) var(--gut) 64px; }

.tabbar { display: none; }
.only-mobile { display: none; }

/* ── En-tête de page ────────────────────────────────────────────────────── */

.page { max-width: 1180px; margin: 0 auto; }

.page-head {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-head h1 {
  font-size: clamp(23px, 4vw, 29px); font-weight: 780; letter-spacing: -.035em;
  line-height: 1.1;
}
.page-head p { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }
.page-head .spacer { flex: 1; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.section-head {
  display: flex; align-items: center; gap: 10px; margin: 30px 0 12px;
}
.section-head .rule { flex: 1; height: 1px; background: var(--line); }
.section-head .tip { text-transform: none; letter-spacing: 0; white-space: nowrap; }

/* ── Surfaces ───────────────────────────────────────────────────────────── */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-1);
}
.card-p { padding: 16px; }

/* Signature : repères de coupe en diagonale, comme sur une planche à tirer. */
.plate { position: relative; }
.plate::before, .plate::after {
  content: ''; position: absolute; width: 11px; height: 11px;
  border: 1.5px solid var(--acc); opacity: .42; pointer-events: none;
}
.plate::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
.plate::after { bottom: -4px; right: -4px; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }

/* ── Boutons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .08s, box-shadow .12s;
}
.btn:hover { background: var(--card-2); border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn-acc { background: var(--acc); border-color: var(--acc); color: #fff;
           box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.btn-acc:hover { background: var(--acc-deep); border-color: var(--acc-deep); color: #fff; }
html[data-theme="dark"] .btn-acc { color: #1A1105; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .btn-acc { color: #1A1105; } }

.btn-ghost { background: none; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--line-2); border-color: transparent; color: var(--ink); }

.btn-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 32%, transparent); }
.btn-bad:hover { background: var(--bad-soft); border-color: var(--bad); }

.btn-sm { height: 31px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn-lg { height: 46px; padding: 0 20px; font-size: 15px; width: 100%; }
.btn-block { width: 100%; }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--line-2);
       border-radius: 9px; border: 1px solid var(--line); }
.seg button {
  padding: 5px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); white-space: nowrap;
}
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }

/* ── Champs ─────────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: 14px; }
.label {
  display: block; margin-bottom: 5px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.input, .select, .textarea {
  width: 100%; height: 42px; padding: 0 12px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-s);
  outline: none; transition: border-color .12s, box-shadow .12s;
  font-size: 15px;                     /* ≥16px iOS évite le zoom : voir @media */
}
.textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 19px, calc(100% - 12px) 19px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft);
}
.input.mono { letter-spacing: .04em; text-transform: uppercase; }
.hint { margin-top: 5px; font-size: 12px; color: var(--ink-3); }

.input-wrap { position: relative; display: block; }
.reveal { position: absolute; right: 6px; top: 50%; translate: 0 -50%;
          width: 32px; height: 32px; display: grid; place-items: center;
          color: var(--ink-3); border-radius: 6px; }
.reveal:hover { color: var(--ink); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.check { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--acc); flex: none; }

/* ── Étiquettes & statuts ───────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 99px;
  font: 600 11px/1.7 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
}
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.t-photo      { color: var(--photo); background: color-mix(in srgb, var(--photo) 11%, transparent); }
.t-video      { color: var(--video); background: color-mix(in srgb, var(--video) 11%, transparent); }
.t-newsletter { color: var(--news);  background: color-mix(in srgb, var(--news) 11%, transparent); }
.t-banniere   { color: var(--bann);  background: color-mix(in srgb, var(--bann) 13%, transparent); }
.t-catalogue       { color: var(--cata);  background: color-mix(in srgb, var(--cata) 12%, transparent); }
.t-fiche_technique { color: var(--fiche); background: color-mix(in srgb, var(--fiche) 14%, transparent); }
.t-packaging       { color: var(--pack);  background: color-mix(in srgb, var(--pack) 14%, transparent); }

.tag-ref {
  color: var(--ink); background: var(--line-2); border-color: var(--line);
  letter-spacing: .04em;
}
.tag-ref::before { display: none; }

.status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 6px;
  font: 600 11px/1.7 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
}
.s-nouveau { color: var(--ink-2); background: var(--line-2); }
/* Dans un tableau, l'état ordinaire se dit en creux : une pastille pleine
   répétée sur chaque ligne devient un aplat, et plus une information. */
.tbl .status.s-nouveau {
  background: transparent; border: 1px solid var(--line); color: var(--ink-3);
}
.s-valide  { color: var(--news);  background: color-mix(in srgb, var(--news) 12%, transparent); }
.s-enligne { color: var(--ok);    background: var(--ok-soft); }
.s-rejete  { color: var(--bad);   background: var(--bad-soft); }

/* ── Indicateurs ────────────────────────────────────────────────────────── */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }

.kpi {
  position: relative; padding: 14px 15px 13px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-1);
  overflow: hidden;
}
.kpi::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--kpi-c, var(--ink-3));
}
.kpi-k { display: flex; align-items: center; gap: 6px; }
.kpi-k .eyebrow { color: var(--kpi-c, var(--ink-3)); }
.kpi-v {
  display: block; margin-top: 6px;
  font: 760 30px/1 var(--f-mono); letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.kpi-s { margin-top: 5px; font-size: 12px; color: var(--ink-3); }
.kpi-s b { color: var(--ink-2); font-weight: 650; }

/* ── Anneau d'objectif ──────────────────────────────────────────────────── */

.goal {
  display: flex; align-items: center; gap: 20px;
  padding: 18px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1);
}
.ring { width: 104px; height: 104px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { stroke: var(--line); }
.ring .val { stroke: var(--acc); stroke-linecap: round;
             transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); }
.ring-mid {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.ring-mid b { font: 760 26px/1 var(--f-mono); letter-spacing: -.05em; }
.ring-mid span { display: block; margin-top: 2px; font: 600 10px var(--f-mono);
                 letter-spacing: .1em; color: var(--ink-3); }
.goal-body { min-width: 0; flex: 1; }
.goal-body h3 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.goal-body p { margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.goal-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }

.streak {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 99px;
  background: var(--acc-soft); color: var(--acc-deep);
  font: 650 12px var(--f-mono); letter-spacing: .04em;
}

/* ── Planche contact (signature) ────────────────────────────────────────── */

.sheet {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l); box-shadow: var(--sh-1); overflow: hidden;
}
.sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-2);
}
.sheet-head .spacer { flex: 1; }
.sheet-count { font: 700 13px var(--f-mono); letter-spacing: -.01em; }

.strip {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 118px; grid-template-rows: auto;
  gap: 10px; padding: 14px 16px 16px;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.strip::-webkit-scrollbar { height: 7px; }
.strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

.cell { scroll-snap-align: start; }
.cell-img {
  position: relative; aspect-ratio: 1; width: 100%;
  background: var(--line-2); border: 1px solid var(--line); border-radius: var(--r-s);
  overflow: hidden; cursor: zoom-in;
}
.cell-img img { width: 100%; height: 100%; object-fit: cover; }
.cell-img .badge {
  position: absolute; top: 5px; left: 5px;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(8,13,20,.72); color: #fff;
  font: 600 10px var(--f-mono); letter-spacing: .06em;
  backdrop-filter: blur(3px);
}
.cell-meta { margin-top: 6px; }
.cell-meta b {
  display: block; font: 650 11.5px var(--f-mono); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cell-meta span { font-size: 10.5px; color: var(--ink-3); }

/* Gate vide : cadres pointillés, comme un plateau non encore tourné. */
.gate-empty { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
              gap: 10px; padding: 16px; }
.gate-empty i {
  aspect-ratio: 1; border: 1.5px dashed var(--line);
  border-radius: var(--r-s); display: block;
}
.empty {
  padding: 30px 20px; text-align: center; color: var(--ink-2);
}
.empty h3 { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.empty p { margin-top: 5px; font-size: 13.5px; max-width: 46ch; margin-inline: auto; }
.empty .btn { margin-top: 15px; }
/* Une illustration remplace l'icône de tête d'un état vide, aux endroits qui
   le méritent — pas partout : trois dessins réutilisés, jamais un par écran. */
.illus { width: 108px; height: 108px; stroke-width: 1.1; opacity: .9;
         margin: 0 auto 8px; display: block; color: var(--ink-3); }

/* ── Galerie ────────────────────────────────────────────────────────────── */

.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 13px; }

.shot {
  position: relative; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh-1);
  transition: box-shadow .15s, border-color .15s, opacity .2s, transform .2s;
}
.shot:hover { box-shadow: var(--sh-2); border-color: var(--ink-3); }
.shot.sel { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc-soft), var(--sh-2); }
.shot.going { opacity: 0; transform: scale(.94); }

.shot-img { position: relative; aspect-ratio: 4/3; background: var(--line-2); cursor: zoom-in; }
.shot-img img { width: 100%; height: 100%; object-fit: cover; }
.shot-img .lotn {
  position: absolute; bottom: 7px; right: 7px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  color: #fff; font: 600 11px var(--f-mono);
  backdrop-filter: blur(3px);
}
.shot-img .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.shot-pick {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.14);
  display: grid; place-items: center; color: var(--ink-3);
  transition: background .12s, color .12s;
}
.shot.sel .shot-pick { background: var(--acc); border-color: var(--acc); color: #fff; }
.shot-body { padding: 9px 10px 10px; }
.shot-ref {
  display: block; font: 650 12.5px var(--f-mono); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot-line { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.shot-sub {
  margin-top: 6px; font-size: 11px; color: var(--ink-3); font-family: var(--f-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot-tools {
  display: flex; gap: 4px; padding: 0 6px 8px;
  opacity: 0; transition: opacity .12s;
}
.shot:hover .shot-tools, .shot:focus-within .shot-tools { opacity: 1; }
@media (hover: none) { .shot-tools { opacity: 1; } }

.selbar {
  position: sticky; bottom: 12px; z-index: 12;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 14px; padding: 11px 14px;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r); box-shadow: var(--sh-3);
}
.selbar b { font: 700 13px var(--f-mono); }
.selbar .btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22);
               color: var(--paper); }
.selbar .btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.selbar .spacer { flex: 1; }

/* ── File de dépôt ──────────────────────────────────────────────────────── */

.drop {
  border: 1.5px dashed var(--line); border-radius: var(--r-l);
  background: var(--card-2); padding: 26px 20px; text-align: center;
  transition: border-color .15s, background .15s;
}
.drop.hot { border-color: var(--acc); background: var(--acc-soft); }
.drop-icon {
  width: 46px; height: 46px; margin: 0 auto 11px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--acc-soft); color: var(--acc-deep);
}
.drop h3 { font-size: 15.5px; font-weight: 700; }
.drop p { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.drop-btns { display: flex; gap: 9px; justify-content: center; margin-top: 15px; flex-wrap: wrap; }

.queue { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.qitem {
  display: flex; align-items: center; gap: 11px;
  padding: 9px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
  animation: slide-in .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes slide-in { from { opacity: 0; transform: translateY(7px); } }
.qthumb {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-s);
  background: var(--line-2); overflow: hidden; position: relative;
}
.qthumb img { width: 100%; height: 100%; object-fit: cover; }
.qthumb .n {
  position: absolute; bottom: 0; right: 0; padding: 0 4px;
  background: rgba(8,13,20,.72); color: #fff; font: 600 9.5px var(--f-mono);
  border-radius: 4px 0 0 0;
}
.qbody { flex: 1; min-width: 0; }
.qbody b { display: block; font: 650 12.5px var(--f-mono); overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.qbody span { font-size: 11.5px; color: var(--ink-3); }
.qitem.done { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

.pw { height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 6px; }
/* `display: block` n'est pas décoratif : la barre est un <i>, donc inline par
   défaut, et un élément inline ignore `height` — la barre se dessinait sur 0
   pixel de haut ET de large, partout où elle est utilisée. */
.pb { display: block; height: 100%; border-radius: 99px; background: var(--acc);
      width: 0; transition: width .3s ease; }
.pb.ok { background: var(--ok); }
.pb.bad { background: var(--bad); }

.stamp {
  position: sticky; top: calc(var(--top-h) + 4px); z-index: 11;
  padding: 13px 14px; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-2);
}
.stamp-row { display: flex; gap: 9px; align-items: flex-end; }
.stamp-row .field { flex: 1; margin: 0; }
.stepper { display: flex; }
.stepper .btn { border-radius: 0; }
.stepper .btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.stepper .btn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; margin-left: -1px; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 6px 11px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--card);
  font: 600 12.5px var(--f-ui); color: var(--ink-2);
  transition: background .12s, border-color .12s, color .12s;
}
/* Une pastille qui porte une icone reste sur une ligne : sans mise en ligne
   explicite, le SVG et le libelle s'empilent. */
.chip:has(.i) { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.on[data-t="photo"]      { background: var(--photo); border-color: var(--photo); color: #fff; }
.chip.on[data-t="video"]      { background: var(--video); border-color: var(--video); color: #fff; }
.chip.on[data-t="newsletter"] { background: var(--news);  border-color: var(--news);  color: #fff; }
.chip.on[data-t="banniere"]   { background: var(--bann);  border-color: var(--bann);  color: #fff; }
.chip.on[data-t="catalogue"]       { background: var(--cata);  border-color: var(--cata);  color: #fff; }
.chip.on[data-t="fiche_technique"] { background: var(--fiche); border-color: var(--fiche); color: #fff; }
.chip.on[data-t="packaging"]       { background: var(--pack);  border-color: var(--pack);  color: #fff; }

/* ── Tableaux ───────────────────────────────────────────────────────────── */

.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* UN TABLEAU SE LIT SUR TROIS NIVEAUX. Avant, toutes les cellules avaient le
   même poids et l'œil n'avait nulle part où se poser. Désormais : l'en-tête
   recule, la colonne d'identité mène, les chiffres suivent. La ligne survolée
   sort du lot par un liseré, pas par un aplat de plus. */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.tbl th {
  text-align: left; padding: 11px 12px 9px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.tbl td {
  padding: 11px 12px; border-bottom: 1px solid var(--line-2);
  vertical-align: middle; color: var(--ink-2);
}
/* La première colonne porte l'identité : c'est elle qu'on lit en premier. */
.tbl tbody td:first-child { color: var(--ink); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { position: relative; transition: background .12s; }
.tbl tbody tr:hover { background: var(--acc-soft); }
.tbl tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--acc); }

/* Le chiffre qui mène une table se tient plus fort que les autres. */
.tbl .num.cle { color: var(--ink); font-weight: 650; }

/* Une sous-ligne : la société, la date, ce qui situe sans concurrencer. */
.tbl .sous {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 500; color: var(--ink-3);
}
/* Deux lignes au plus : des rangées de hauteurs inégales font onduler le
   tableau, et l'œil perd le rythme qui lui sert à balayer une colonne. */
.tbl .titre {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px; font-weight: 620; line-height: 1.32;
  color: var(--ink); letter-spacing: -.005em;
}
/* La colonne du nom a besoin de place ; les colonnes chiffrées, non. */
.tbl td:has(> .titre), .tbl th:nth-child(3) { min-width: 250px; }
/* `nowrap` : un montant coupé en deux (« 8 580,34 » puis « € ») ne se compare
   plus d'une ligne à l'autre. La table défile dans son `.tw` plutôt que de
   replier ses nombres. */
.tbl .num {
  text-align: right; font-family: var(--f-display); font-weight: 550;
  font-variant-numeric: var(--chiffres); font-feature-settings: "tnum" 1;
  white-space: nowrap; letter-spacing: -.01em;
}
/* Le mono reste pour ce qui EST un code : référence, identifiant, SIRET, code
   ERP. C'est là qu'il porte du sens — un code se lit caractère par caractère,
   et l'espacement fixe aide vraiment. Partout ailleurs il sonnait machine. */
.code {
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: var(--chiffres); letter-spacing: -.02em;
}
.tbl .code { font-size: 12.5px; }
.tbl .cellbtn {
  width: 100%; padding: 3px 6px; border-radius: 5px;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  text-align: right; font-size: 13px; color: var(--ink);
}
/* Dans une colonne de gauche, un identifiant se lit a gauche et n'occupe que
   sa place : la regle d'origine visait les cellules chiffrees du Programme. */
.tbl .cellbtn.gauche { width: auto; text-align: left; margin-left: -6px; }
.tbl .cellbtn:hover { background: var(--acc-soft); color: var(--acc-deep); }
.tbl .cellbtn.zero { color: var(--ink-3); }
.tbl .today td { background: var(--acc-soft); }
.tbl .today td:first-child { font-weight: 700; }

.who { display: flex; align-items: center; gap: 8px; }
.tbl .acts { display: flex; gap: 2px; justify-content: flex-end; }

/* ── Familles destinataires ──────────────────────────────────────────────
   Palette reprise telle quelle de reference/maquette-programme.html. Les
   libellés servent de clés : voir FAMILY_CLASS dans core.js. */
.family-all{--fam-bg:#eef3ff;--fam-text:#17264f;--fam-border:#d8e2f7;--fam-accent:#17264f}
.family-generalistes{--fam-bg:#e8f0fb;--fam-text:#0a2e63;--fam-border:#c8d9ef;--fam-accent:#0a2e63}
.family-specialistes{--fam-bg:#fdecec;--fam-text:#b90f18;--fam-border:#f4c8cb;--fam-accent:#d70a0c}
.family-pediatres{--fam-bg:#e5f7f6;--fam-text:#287c80;--fam-border:#bfeae7;--fam-accent:#65c8c6}
.family-gyn-sages-femmes{--fam-bg:#fde8f1;--fam-text:#b71f60;--fam-border:#f8c6da;--fam-accent:#f71a79}
.family-kines{--fam-bg:#fff1dc;--fam-text:#a45b00;--fam-border:#ffd9a4;--fam-accent:#f59e0b}
.family-infirmiers{--fam-bg:#f4e8ef;--fam-text:#81556c;--fam-border:#e5cbd8;--fam-accent:#b77998}
.family-dentistes{--fam-bg:#e8f5fb;--fam-text:#286987;--fam-border:#c7e7f4;--fam-accent:#63b9df}
.family-dermatologues{--fam-bg:#f4ecdf;--fam-text:#765633;--fam-border:#e3d2b7;--fam-accent:#a98256}
.family-podologues{--fam-bg:#f0eafd;--fam-text:#684d99;--fam-border:#ddcff5;--fam-accent:#8f6fc3}
.family-orthophonistes{--fam-bg:#fff0e7;--fam-text:#9a5a36;--fam-border:#f3d5c4;--fam-accent:#c9845c}
.family-imagerie{--fam-bg:#e9ecfb;--fam-text:#43529a;--fam-border:#cfd5f3;--fam-accent:#6575c4}
.family-ehpad{--fam-bg:#eff3df;--fam-text:#66752d;--fam-border:#dce6bd;--fam-accent:#83964a}
.family-pharmacies{--fam-bg:#e7f5e8;--fam-text:#337845;--fam-border:#c9e8cd;--fam-accent:#51a865}
.family-veterinaires{--fam-bg:#e3f4f1;--fam-text:#286d66;--fam-border:#c0e4df;--fam-accent:#479d94}
.family-ambulances{--fam-bg:#fff0ed;--fam-text:#a34537;--fam-border:#f4cec7;--fam-accent:#dd6b59}
.family-revendeurs{--fam-bg:#edf0f4;--fam-text:#536174;--fam-border:#d7dee8;--fam-accent:#6c7c91}
.family-particuliers{--fam-bg:#fff7d8;--fam-text:#806916;--fam-border:#f1e5a9;--fam-accent:#c7a72d}
.family-etudiants{--fam-bg:#e8f0f3;--fam-text:#31586a;--fam-border:#c7dbe2;--fam-accent:#4f8399}

/* Le thème sombre garde la teinte de famille mais assombrit le fond, sinon
   les pastilles éclatent sur une interface de nuit. */
html[data-theme="dark"] [class*="family-"] {
  --fam-bg: color-mix(in srgb, var(--fam-accent) 16%, var(--card));
  --fam-text: color-mix(in srgb, var(--fam-accent) 72%, #fff);
  --fam-border: color-mix(in srgb, var(--fam-accent) 34%, var(--card));
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] [class*="family-"] {
    --fam-bg: color-mix(in srgb, var(--fam-accent) 16%, var(--card));
    --fam-text: color-mix(in srgb, var(--fam-accent) 72%, #fff);
    --fam-border: color-mix(in srgb, var(--fam-accent) 34%, var(--card));
  }
}

/* Pastille de famille sur une carte */
.pgfam {
  display: inline-flex; align-items: center;
  font: 750 10px var(--f-ui); padding: 4px 8px; border-radius: 999px;
  background: var(--fam-bg); color: var(--fam-text);
  border: 1px solid var(--fam-border);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sélecteur de familles dans le formulaire */
.pgfampick {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px;
  border: 1px solid var(--line); border-radius: var(--r); padding: 10px;
  background: var(--card-2); max-height: 268px; overflow-y: auto;
}
.pgfamopt {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--fam-border); border-radius: 9px; padding: 8px 9px;
  background: var(--fam-bg); color: var(--fam-text);
  font: 700 11px var(--f-ui); cursor: pointer; transition: filter .15s, transform .15s;
  min-width: 0;
}
.pgfamopt:hover { filter: brightness(.97); transform: translateY(-1px); }
.pgfamopt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgfamopt input { width: auto; margin: 0; accent-color: var(--fam-accent); flex: none; }
.pgfamopt.all { grid-column: 1 / -1; }

/* Statut de diffusion, saisi à la main */
.pgdiff {
  font: 750 9.5px var(--f-mono); padding: 3px 8px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.pgdiff.a-faire   { background: var(--line-2); border-color: var(--line); color: var(--ink-2); }
.pgdiff.programmee{ background: color-mix(in srgb, var(--photo) 13%, transparent); color: var(--photo); }
.pgdiff.en-ligne,
.pgdiff.envoyee   { background: var(--ok-soft); color: var(--ok); }

/* La thématique d'une bannière : une pastille neutre, au même gabarit que ses
   voisines — sans style, elle s'affichait en texte nu, plus gros que le titre. */
.pgpill {
  font: 700 9.5px var(--f-ui); padding: 3px 8px; border-radius: 999px;
  background: var(--line-2); border: 1px solid var(--line);
  color: var(--ink-2); white-space: nowrap;
}

/* Calendrier : un évènement prend la couleur de sa première famille. */
.pgevent.fam {
  background: var(--fam-bg); border-color: var(--fam-border);
  border-left: 4px solid var(--fam-accent); color: var(--fam-text);
}
.pgevent.fam .m { color: var(--fam-text); opacity: .78; }
.pgfamdots { display: flex; gap: 3px; margin-top: 4px; }
.pgfamdot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--fam-accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .85);
}

@media (max-width: 700px) { .pgfampick { grid-template-columns: 1fr; } }

/* ── Programme ──────────────────────────────────────────────────────────── */
/* Mise en page reprise de reference/maquette-programme.html : une colonne par
   site, une carte coupée en deux. Le visuel reste EN GRIS tant que la direction
   n'a pas validé, puis passe EN COULEUR — c'est la lecture d'un coup d'œil. */

:root {
  --site-0: #273B87;   /* teintes de colonne, dans l'ordre des réglages */
  --site-1: #0A9A9F;
  --site-2: #2FABE2;
  --site-3: #8E2F6B;
  --site-4: #B4791A;
}

/* Onglets de module */
.pgmods { display: flex; gap: 8px; margin-bottom: 16px; }
.pgmod {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 12px; padding: 10px 16px; font: 800 13px var(--f-ui);
}
.pgmod b { font-family: var(--f-mono); font-weight: 700; opacity: .65; margin-left: 4px; }
.pgmod.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pgmod.on b { opacity: .8; }

/* Bascule Planning / Calendrier */
.pgtoggle { display: flex; gap: 4px; background: var(--line-2); padding: 4px; border-radius: 11px; }
.pgtoggle button {
  padding: 6px 11px; border: 0; background: transparent; border-radius: 8px;
  font: 650 12.5px var(--f-ui); color: var(--ink-2);
}
.pgtoggle button.on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }

/* Onglets de mois + bandeau */
.pgmonths { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.pgmonth {
  white-space: nowrap; border: 1px solid var(--line); background: var(--card);
  border-radius: 10px; padding: 7px 12px; font: 650 12.5px var(--f-ui); color: var(--ink-2);
}
.pgmonth.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pgstrip {
  background: var(--ink); color: var(--paper); padding: 11px 18px;
  border-radius: var(--r-l) var(--r-l) 0 0; text-align: center;
  font: 800 11.5px var(--f-mono); letter-spacing: 3px;
}

/* Filtre de sociétés : un choix de lecture, mémorisé sur le poste. Une société
   masquée disparaît de la planche et du calendrier, jamais du programme. */
.pgfiltre {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.pgfl {
  font: 800 9.5px var(--f-mono); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .07em; margin-right: 2px;
}
.pgsite {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--card);
  font: 650 12.5px var(--f-ui); color: var(--ink-3);
  transition: color .12s, border-color .12s, opacity .12s;
}
.pgsite i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  background: var(--line); border: 1px solid var(--line);
}
.pgsite b { font: 700 10.5px var(--f-mono); opacity: .7; }
.pgsite.on { color: var(--ink); border-color: color-mix(in srgb, var(--pgc) 55%, var(--line)); }
.pgsite.on i { background: var(--pgc); border-color: var(--pgc); }
/* Masquée : barrée et estompée — l'état se lit sans compter les colonnes. */
.pgsite:not(.on) { opacity: .55; text-decoration: line-through; }
.pgsite:not(.on) b { text-decoration: none; }
.pgsite:hover { border-color: var(--ink-3); }
.pgsite.tout {
  color: var(--acc-deep); border-color: var(--acc);
  background: var(--acc-soft); opacity: 1; text-decoration: none;
}

/* Colonnes par site. Une colonne ne descend jamais sous 296 px : à cinq
   sites, le tableau défile plutôt que de rendre les cartes illisibles. */
.pgboard {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(382px, 1fr);
  background: var(--card); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-l) var(--r-l);
  overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--sh-2);
}
.pgcol { border-right: 1px solid var(--line); min-width: 0; }
.pgcol:last-child { border-right: 0; }
.pghead {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 8px; height: 74px; border-bottom: 1px solid var(--line); background: var(--card);
}
.pghead b { font: 800 15px var(--f-ui); letter-spacing: -.02em; color: var(--pgc); }
.pghead .pgcount {
  font: 700 10.5px var(--f-mono); color: var(--ink-3);
  background: var(--line-2); border-radius: 99px; padding: 2px 7px;
}
.pghead::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px;
  height: 3px; border-radius: 99px; background: var(--pgc);
}
.pgzone { padding: 12px; min-height: 240px; transition: background .16s; }
.pgzone.survol { background: var(--acc-soft); }

/* Carte de créneau */
.pgcard {
  display: grid; grid-template-columns: 96px 1fr; gap: 11px;
  padding: 10px; margin-bottom: 11px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); box-shadow: var(--sh-1);
}
.pgcard.nl { grid-template-columns: 124px 1fr; }
/* Deux références côte à côte ont besoin d'air : le volet produit s'élargit
   plutôt que d'écraser les vignettes. */
.pgcard.multi { grid-template-columns: 136px 1fr; }
.pgcard[draggable="true"] { cursor: grab; }
.pgcard[draggable="true"]:active { cursor: grabbing; }
.pgcard.pgdrag { opacity: .4; }
.pgcard.late { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.pgcard.annule { opacity: .5; }
.pgcard.annule .pgtitle { text-decoration: line-through; }
.pgcard.pgfocus { box-shadow: 0 0 0 2px var(--acc); }

.pgleft { border-right: 1px solid var(--line-2); padding-right: 10px; min-width: 0; }
.pgright { min-width: 0; }
.pgeyebrow {
  font: 800 9px var(--f-mono); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px;
}
/* Un créneau porte 1..N produits : la vignette rétrécit plutôt que la carte
   ne s'allonge, et la liste défile au-delà de quatre. */
.pgprods { display: grid; gap: 6px; }
.pgprods.multi { grid-template-columns: 1fr 1fr; max-height: 208px; overflow-y: auto; }
.pgprod { min-width: 0; }
.pgprodbox {
  height: 76px; border-radius: var(--r-s); background: var(--card-2);
  border: 1px solid var(--line); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pgprods.multi .pgprodbox { height: 54px; }
.pgprods.multi .pgph { font-size: 9.5px; padding: 3px; }
.pgprods.multi .pgref { font-size: 9.5px; padding: 3px 4px; }
.pgprodbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
}

/* Éditeur : une ligne par produit — photo, référence, nom, retrait. */
.pgped {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r); padding: 9px;
  background: var(--card-2); margin-bottom: 8px;
}
.pgpimg {
  height: 78px; border-radius: var(--r-s); overflow: hidden;
  border: 1.5px dashed var(--line); background: var(--card);
  display: flex; align-items: center; justify-content: center; padding: 6px;
  font: 11px var(--f-mono); color: var(--ink-3); text-align: center;
}
.pgpimg img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
}
.pgpimg:hover { border-color: var(--acc); color: var(--acc-deep); }
.pgpfields { display: grid; gap: 7px; min-width: 0; }
/* Les références déjà vues, proposées pendant la frappe. */
.pgsug {
  display: grid; gap: 3px; padding: 5px; margin-top: -2px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card-2);
  max-height: 188px; overflow-y: auto;
}
.pgsug button {
  display: grid; grid-template-columns: 28px auto 1fr; gap: 8px; align-items: center;
  padding: 5px 6px; border-radius: var(--r-s); text-align: left; background: transparent;
  min-width: 0;
}
.pgsug button:hover { background: var(--acc-soft); }
.pgsug img {
  width: 28px; height: 28px; object-fit: contain;
  border-radius: 5px; background: var(--card); border: 1px solid var(--line-2);
}
.pgsug i { color: var(--ink-3); display: grid; place-items: center; }
.pgsug b { font-size: 11px; }
.pgsug span {
  font-size: 11px; color: var(--ink-3); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pgpstatus { font: 700 10px var(--f-ui); color: var(--ok); min-height: 13px; }
.pgpstatus.muted { color: var(--ink-3); font-weight: 600; }
.pgprm { color: var(--bad); }
.pgpadd {
  width: 100%; border: 1px dashed var(--line); border-radius: var(--r);
  padding: 10px; background: var(--card); color: var(--ink-2);
  font: 700 12.5px var(--f-ui);
}
.pgpadd:hover:not([disabled]) { background: var(--acc-soft); color: var(--acc-deep);
                                border-color: var(--acc); }
.pgpadd[disabled] { opacity: .45; }
.pgph { font: 10.5px var(--f-mono); color: var(--ink-3); text-align: center; padding: 6px; }
.pgref {
  margin-top: 5px; padding: 4px 5px; border-radius: 7px; text-align: center;
  background: var(--line-2); border: 1px solid var(--line);
  font: 800 10.5px var(--f-mono); color: var(--ink-2); overflow-wrap: anywhere;
}
.pgref.vide { font-style: italic; font-weight: 600; color: var(--ink-3); }
.pgfams { display: flex; flex-wrap: wrap; gap: 4px; }
.pgfams .pgfam {
  font-size: 10px; line-height: 1.25; padding: 4px 7px;
  white-space: normal; overflow: visible; text-align: left;
}
.pgtheme { margin-top: 5px; font-size: 11px; color: var(--ink-3); }

.pgtitle {
  font: 850 13px var(--f-ui); margin: 2px 0 7px; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pgpills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.pgdates { font: 10.5px var(--f-mono); color: var(--ink-3); margin-bottom: 8px; }
.pgdates b { color: var(--ink-2); font-weight: 700; }
.pgstat {
  font: 750 9.5px var(--f-mono); padding: 3px 7px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.s-pg-prevu    { color: var(--ink-3); background: var(--line-2); border-color: var(--line); }
.s-pg-depose   { color: var(--photo); background: color-mix(in srgb, var(--photo) 13%, transparent); }
.s-pg-arefaire { color: var(--bad);   background: var(--bad-soft); border-color: var(--bad-soft); }
.s-pg-pret     { color: var(--ok);    background: var(--ok-soft); }
.s-pg-annule   { color: var(--ink-3); background: transparent; text-decoration: line-through; }
.s-pg-late     { color: var(--bad); background: var(--bad-soft); }

/* Le visuel : gris tant qu'il n'est pas validé, couleur ensuite. */
.pgvisuel {
  position: relative; display: flex; gap: 4px; align-items: center; justify-content: center;
  min-height: 104px; padding: 6px; border-radius: var(--r-s);
  background: var(--card-2); border: 1px solid var(--line);
  cursor: zoom-in; overflow: hidden;
}
.pgcard.nl .pgvisuel { min-height: 190px; }
.pgvisuel img {
  max-width: 100%; max-height: 92px; object-fit: contain; border-radius: 6px;
  transition: filter .2s, opacity .2s;
}
.pgcard.nl .pgvisuel img { max-height: 178px; }
.pgvisuel.vide {
  cursor: default;
  border-style: dashed;
  background: repeating-linear-gradient(45deg, transparent, transparent 5px,
              var(--line-2) 5px, var(--line-2) 10px);
}
/* Déposé mais pas encore validé : on éteint la couleur. */
.pgcard.attente .pgvisuel img { filter: grayscale(1) contrast(.92); opacity: .72; }
.pgcard.attente .pgvisuel { border-style: dashed; }
.pgattente {
  position: absolute; left: 50%; bottom: 6px; translate: -50% 0; max-width: calc(100% - 12px);
  font: 750 9.5px var(--f-mono); text-transform: uppercase; letter-spacing: .04em;
  background: var(--ink); color: var(--paper); text-align: center;
  padding: 3px 9px; border-radius: 99px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pgattente.refus { background: var(--bad); color: #fff; }
/* Validé : la couleur revient, et un liseré vert le dit. */
.pgcard.valide .pgvisuel { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }

/* Côte à côte tant qu'ils tiennent, empilés sinon : la largeur du volet
   change avec le nombre de produits, un bouton ne doit jamais se tronquer. */
/* Trois actions sur une seule ligne, y compris dans le volet retreci d'une
   carte qui porte plusieurs produits : la base est un plancher, les boutons
   s'etirent ensuite pour occuper la largeur disponible. */
.pgacts { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 9px; }
.pgacts .btn {
  flex: 1 1 44px; min-width: 0; padding: 0 6px; white-space: nowrap;
  overflow: hidden;
}
.pgacts .btn[data-copier] { flex: 0 0 34px; width: 34px; padding: 0; }
.pgadd {
  width: 100%; border: 1px dashed var(--line); border-radius: var(--r);
  padding: 12px; background: var(--card-2); color: var(--ink-3);
  font: 700 12.5px var(--f-ui);
}
.pgadd:hover { background: var(--acc-soft); color: var(--acc-deep); border-color: var(--acc); }

/* Vue Calendrier */
.pgcal {
  background: var(--card); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-l) var(--r-l); overflow: hidden; box-shadow: var(--sh-2);
}
.pgcalhead, .pgcalgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pgcalhead { background: var(--card-2); border-bottom: 1px solid var(--line); }
.pgcalhead div {
  padding: 9px 6px; text-align: center;
  font: 800 10.5px var(--f-mono); color: var(--ink-3); text-transform: uppercase;
}
.pgday {
  min-height: 128px; padding: 6px; background: var(--card);
  border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.pgday:nth-child(7n) { border-right: 0; }
.pgday.hors { background: var(--card-2); color: var(--ink-3); }
.pgday.auj { background: var(--acc-soft); }
.pgdate { font: 850 11px var(--f-mono); margin-bottom: 5px; }
.pgevents { display: flex; flex-direction: column; gap: 4px; }
.pgevent {
  display: block; width: 100%; text-align: left; min-width: 0;
  border: 1px solid var(--line); border-left: 3px solid var(--pgc);
  border-radius: 7px; padding: 4px 6px; background: var(--card-2);
}
.pgevent:hover { background: var(--acc-soft); }
.pgevent .t {
  display: block; font: 850 10px var(--f-ui);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pgevent .m {
  display: block; margin-top: 2px; font: 9px var(--f-mono); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Ce que le destinataire lit avant d'ouvrir : objet puis ligne d'aperçu. */
.pgmail {
  border: 1px solid var(--line-2); background: var(--card-2);
  border-radius: var(--r-s); padding: 7px 9px; margin-bottom: 8px;
}
.pgmail div { font-size: 11px; line-height: 1.45; }
.pgmail b {
  font: 700 8.5px var(--f-mono); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; margin-right: 5px;
}
.pgmail .pre { color: var(--ink-3); margin-top: 2px; }
/* « à définir » : présent mais en retrait, pour qu'un objet manquant se voie
   sans crier plus fort que celui qui est écrit. */
.pgtbd { color: var(--ink-3); font-style: italic; }

/* Emplacement de fichier survolé pendant un glisser-déposer. */
.pgpick.hot { border-color: var(--acc); background: var(--acc-soft); }

/* Catalogue de produits : on cherche, on clique, tout vient avec. */
.pgcat {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 8px; max-height: 52vh; overflow-y: auto; padding: 2px;
}
.pgcatit {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); text-align: left; min-width: 0;
}
.pgcatit:hover { border-color: var(--acc); background: var(--acc-soft); }
.pgcatimg {
  height: 46px; border-radius: var(--r-s); overflow: hidden;
  background: var(--card-2); border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center; color: var(--ink-3);
}
.pgcatimg img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
}
.pgcattxt { min-width: 0; display: grid; gap: 2px; }
.pgcattxt b { font-size: 12px; }
.pgcattxt span {
  font-size: 11px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pgcatn {
  font: 700 10px var(--f-mono); color: var(--ink-3);
  background: var(--line-2); border-radius: 99px; padding: 2px 7px;
}

/* ── Le créneau derrière un dépôt : ce qui se vérifie autant que l'image ── */

.vfiltre { display: flex; gap: 6px; margin-bottom: 10px; }
.vfiltre .chip.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.vfiltre .chip b { font-variant-numeric: tabular-nums; opacity: .75; margin-left: 3px; }

.vprog {
  margin-top: 9px; padding: 9px 10px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--card-2);
}
.vprog-h {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font: 700 11.5px var(--f-ui); color: var(--ink-2);
}
.vprog-h svg { color: var(--acc); }
.vprog-l {
  display: grid; grid-template-columns: 82px 1fr; gap: 8px;
  font-size: 12px; line-height: 1.45; padding: 2px 0;
  overflow-wrap: anywhere;
}
.vprog-l span { color: var(--ink-3); font-weight: 600; font-size: 11px; }
.vprog-l i { color: var(--ink-3); }

/* ── Fiche d'une référence : le programmé et le livré, côte à côte ─────── */

.rfhero {
  display: flex; align-items: center; justify-content: center;
  height: 190px; margin-bottom: 14px; padding: 12px;
  border-radius: var(--r); background: var(--card-2); border: 1px solid var(--line);
}
.rfhero img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rfmois { margin-bottom: 10px; }
.rfmois:last-child { margin-bottom: 0; }
.rfmois .eyebrow { display: block; margin: 4px 0 6px; }
.rfline {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; margin-bottom: 6px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--card);
}
.rfline:hover { border-color: var(--acc); background: var(--acc-soft); }
/* Une ligne qui informe sans mener nulle part ne doit pas se donner
   l'air cliquable. */
.rfline.rfstatic:hover { border-color: var(--line); background: var(--card); }
.rfsite {
  display: flex; align-items: center; gap: 5px; min-width: 116px;
  font: 700 11px var(--f-ui); color: var(--ink-2);
}
.rfsite i {
  width: 8px; height: 8px; border-radius: 99px; background: var(--pgc); flex: none;
}
.rfmain { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rfmain b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfsub { font: 10.5px var(--f-mono); color: var(--ink-3); }
.rfgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 9px;
}
.rfvue {
  display: grid; gap: 4px; padding: 7px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
}
.rfvue:hover { border-color: var(--acc); }
.rfvue img {
  width: 100%; height: 96px; object-fit: contain; border-radius: var(--r-s);
  background: var(--card-2);
}
.rfvt { font: 700 10px var(--f-ui); color: var(--ink-2); }
.rfvd { font: 10px var(--f-mono); color: var(--ink-3); }
.rfvs { font: 750 9.5px var(--f-mono); }

/* ── Boutique ───────────────────────────────────────────────────────────── */

/* Une figure occupe toute la largeur ; sa hauteur est fixée par le viewBox.
   preserveAspectRatio="none" étire le tracé, non l'épaisseur du trait. */
/* Un en-tête triable annonce qu'il l'est, et dit dans quel sens il trie. Le
   chevron reste en place, il ne pousse jamais le libellé. */
.th-tri { cursor: pointer; user-select: none; position: relative; padding-right: 21px; }
/* Une colonne chiffree est justifiee a DROITE : le chevron s'y poserait sur le
   libelle. On le range juste apres, et la cellule s'elargit d'autant. */
.th-tri.num { padding-right: 21px; }
.th-tri:hover { color: var(--ink); }
.th-tri::after {
  content: '↕'; position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-size: 10px; opacity: .3;
}
.th-tri[data-sens="desc"]::after { content: '↓'; opacity: 1; color: var(--acc); }
.th-tri[data-sens="asc"]::after { content: '↑'; opacity: 1; color: var(--acc); }
.th-tri:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }

/* ── La mention de provenance ────────────────────────────────────────────────
   La signature du module. Comme les marquages en bord de pellicule : d'où
   vient ce chiffre, sur quelle fenêtre, de quand il date. Ces données
   l'exigent — la marge n'existe que depuis avril 2026, le code ERP couvre une
   commande sur deux, le classement produit ne peut être que mensuel. */
.prov {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
  margin-top: 8px;
  font: 500 10.5px var(--f-mono); color: var(--ink-3);
}
/* `block`, surtout pas `inline-flex` : sur un flex, chaque mot et chaque
   `<b>` deviennent des items, et les espaces entre eux disparaissent —
   « Montants TTC » s'affichait « MontantsTTC ». Le contenu d'une mention est
   du texte : il se dispose en flux. */
.prov > span { display: block; }
.prov > span > .prov-alerte { display: inline-flex; align-items: center; gap: 5px; }
.prov > span + span::before {
  content: '·'; margin: 0 7px; opacity: .55;
}
.prov b { font-weight: 650; color: var(--ink-2); }
.prov .prov-alerte { color: var(--bad); }

/* En tête de module : la même mention, mais pour toute la source. */
.provbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
  padding: 9px 13px; margin-bottom: 12px;
  background: var(--card-2); border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  font: 500 11px var(--f-mono); color: var(--ink-3);
}
.provbar b { font-weight: 700; color: var(--ink-2); letter-spacing: .04em; }
.provbar > span + span::before { content: '·'; margin: 0 8px; opacity: .55; }
.provbar > span { display: block; }
.provbar .spacer { flex: 1; }
.provbar .spacer::before { content: none; }

/* ── La figure du module Business ────────────────────────────────────────────
   Les tracés sont en SVG étiré ; les libellés sont en HTML par-dessus, donc
   nets à n'importe quelle largeur. La série comparée est grise : une référence
   n'est pas un jugement. */

.fig { position: relative; }
.fig-corps { display: flex; gap: 10px; }
.fig-y {
  position: relative; width: 48px; flex: none;
  font: 600 10.5px var(--f-display); color: var(--ink-3);
  font-variant-numeric: var(--chiffres);
}
.fig-y span {
  position: absolute; right: 0; transform: translateY(-50%);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fig-plot { position: relative; flex: 1; min-width: 0; cursor: crosshair; }
.fig-plot .chart { width: 100%; height: 100%; display: block; }
.fig-grid { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig-base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Le tracé se dessine au chargement : une ligne qui s'écrit se lit mieux
   qu'une ligne qui apparaît. La série comparée part avec un temps de retard. */
.fig-trace {
  stroke-dasharray: 3000; stroke-dashoffset: 3000;
  animation: fig-tracer .9s cubic-bezier(.25,.8,.3,1) forwards;
  animation-delay: calc(var(--k, 0) * .12s);
}
@keyframes fig-tracer { to { stroke-dashoffset: 0; } }

/* Le point de bout : un repère, pas une décoration. Il est cerclé de la
   surface pour se détacher du tracé qui passe dessous. */
.fig-bout {
  paint-order: stroke; stroke: var(--card); stroke-width: 5;
  vector-effect: non-scaling-stroke;
}
.fig-rule {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--ink-3); opacity: .35; pointer-events: none;
}
.fig-dots { position: absolute; inset: 0; pointer-events: none; }
.fig-dots i {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--card);
}
.fig-x {
  display: flex; justify-content: space-between; margin: 8px 0 0 58px;
  font: 600 10.5px var(--f-display); color: var(--ink-3);
}
.fig-tip {
  position: absolute; bottom: calc(100% - 6px); z-index: 4;
  min-width: 132px; padding: 8px 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-s); box-shadow: var(--sh-2);
  pointer-events: none;
}
.fig-tip b { display: block; margin-bottom: 5px; font: 650 11px var(--f-mono); }
.fig-tip span {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-2); line-height: 1.7;
}
.fig-tip span i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.fig-tip em {
  margin-left: auto; font-style: normal; font-family: var(--f-mono);
  font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .fig-trace { animation: none; stroke-dashoffset: 0; }
}

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-vide { padding: 26px 2px; text-align: center; }
.chart-axe {
  display: flex; justify-content: space-between; margin-top: 6px;
  font: 10px var(--f-mono); color: var(--ink-3);
}

/* Même gabarit que .pgprodbox : la boîte est en flex, l'image bornée en
   max-width/max-height. « height: 100 % » sur une image dans une grille
   centrée ne se résout pas — elle déborderait, rognée par le bas. */
.bqimg {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-s);
  background: var(--card-2); border: 1px solid var(--line); overflow: hidden;
}
.bqimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bqimg i { color: var(--ink-3); display: flex; }
.bqimg i .i { width: 17px; height: 17px; }

.bqcouv { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.bqcouvtxt { flex: 1; min-width: 220px; }
/* Enfant direct seulement : les pastilles imbriquées portent leur propre
   <b>, qui doit rester en ligne. */
.bqcouvtxt > b { display: block; font-size: 15px; margin-bottom: 6px; }
.bqcouvtxt p { margin: 0 0 6px; }

@media (max-width: 560px) {
  .bqcouv { gap: 14px; justify-content: center; }
  .bqcouvtxt { min-width: 100%; text-align: center; }
}

/* La marque et le rayon d'une référence : deux mots sous le nom du produit,
   assez discrets pour ne pas concurrencer le nom, assez lisibles pour se
   repérer dans une liste de deux cents lignes. */
.bqtags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px; }
.bqtag {
  padding: 1px 7px; border-radius: 99px;
  font: 700 10px var(--f-ui); letter-spacing: .03em;
  background: var(--card-2); border: 1px solid var(--line); color: var(--ink-2);
}
.bqtag-r { background: transparent; color: var(--ink-3); font-weight: 600; }

/* Cinq onglets ne tiennent pas sur un téléphone : la barre défile plutôt que
   de pousser la page. `flex: none` sur les boutons empêche flexbox de les
   comprimer jusqu'à l'illisible avant de consentir à défiler. */
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; }

/* Deux figures côte à côte tant qu'il y a la place, l'une sous l'autre sinon. */
.bqduo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }

/* Une évolution : le signe porte la couleur, pas une flèche de plus. */
.ev { font: 750 11.5px var(--f-ui); color: var(--ink-3); }
.ev-up { color: var(--ok); }
.ev-down { color: var(--bad); }

/* La légende des deux périodes : une pastille, pas un mot de plus. */
.leg {
  display: inline-block; width: 9px; height: 3px; border-radius: 2px;
  margin: 0 5px 0 10px; vertical-align: middle;
}
.leg-now { background: var(--acc); }
.leg-prev { background: var(--ink-3); }

/* L'en-tête d'une fiche : des faits, pas un formulaire. Ils s'alignent en
   colonnes tant qu'il y a la place, et se replient sans jamais se couper. */
.bqfaits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 18px; margin: 0 0 16px;
}
.bqfait { min-width: 0; }
/* Enfant direct seulement : une valeur peut contenir sa propre pastille, qui
   doit rester en ligne. Le meme piege que .bqcouvtxt avait deja tendu. */
.bqfait > span {
  display: block; margin-bottom: 2px;
  font: 750 10px var(--f-ui); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.bqfait > b { font-size: 13.5px; word-break: break-word; }

/* La barre de période : les raccourcis d'abord, les deux calendriers ensuite.
   `type="date"` donne le calendrier natif du système — aucune bibliothèque. */
.bqper { margin: 12px 0 0; }
.bqdates { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: end; }
.bqdate { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bqdate > span {
  font: 750 10px var(--f-ui); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.bqdate .input { height: 36px; width: auto; min-width: 152px; }
.bqcmp { flex: 1; min-width: 220px; }
.bqcmp .input { width: 100%; }

@media (max-width: 560px) {
  .bqdate, .bqcmp { flex: 1 1 100%; }
  .bqdate .input { width: 100%; }
}

/* ── Fluidité, repli ──────────────────────────────────────────────────────────
   Un rendu qui s'affiche sans coupe sèche, une liste qui se révèle sans appel
   réseau. Deux primitives, transform/opacity et grid-template-rows
   uniquement — aucune des deux ne force de reflow du reste de la page.
   Couvertes automatiquement par le bloc prefers-reduced-motion général. */
@keyframes entree { from { opacity: 0; transform: translateY(6px); } }
.vue-entree { animation: entree .22s cubic-bezier(.2, .9, .25, 1); }

.repli-h {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 10px; padding: 4px 0; color: var(--ink-2); font: 700 12px var(--f-ui);
  letter-spacing: .02em; text-align: left;
}
.repli-h:hover { color: var(--ink); }
.repli-chev { transition: transform .18s ease; color: var(--ink-3); }
.repli.on .repli-chev { transform: rotate(90deg); }
/* La grille 0fr → 1fr, pas une hauteur mesurée en JS : c'est elle qui évite
   tout reflow synchrone à l'ouverture. */
.repli-b {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .22s cubic-bezier(.2, .9, .25, 1);
}
.repli.on .repli-b { grid-template-rows: 1fr; }
.repli-in { overflow: hidden; min-height: 0; }
.repli.on .repli-in { padding-top: 10px; }

/* ── La barre de temps ───────────────────────────────────────────────────────
   Une ligne, toujours visible. La période lue en toutes lettres à gauche, les
   quatre raccourcis courants, la base de comparaison à droite. */
.tbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 10px 12px; margin: 12px 0 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-s); box-shadow: var(--sh-1);
}
.tbar-quand {
  font: 700 13px var(--f-mono); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tbar-chips { gap: 5px; }
.tbar-vs { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
           color: var(--ink-3); }
.tbar-vsq {
  font: 650 12px var(--f-mono); color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* La même fenêtre nommée hors barre de temps — reference.js, reporting.js.
   Même forme que .tbar-quand : une fenêtre se lit pareil partout, même
   quand son calcul diffère (à date, tout l'historique, douze mois fixes). */
.fenetre-pill {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 99px;
  background: var(--card-2); border: 1px solid var(--line);
  font: 700 11px var(--f-mono); color: var(--ink-2);
  letter-spacing: -.01em; white-space: nowrap;
}
.tbar-vs select {
  height: 30px; padding: 0 6px; max-width: 220px;
  background: var(--card-2); color: var(--ink); font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 6px;
}
/* Sur un ecran etroit, chaque piece de la barre prend sa ligne. Un enfant de
   flex ne descend pas sous la largeur de son contenu tant qu'on ne le lui dit
   pas : sans `min-width: 0`, la barre poussait la page. */
.tbar > * { min-width: 0; }
@media (max-width: 700px) {
  .tbar .spacer { display: none; }
  .tbar-quand, .tbar-chips, .tbar-vs { flex: 1 1 100%; }
  .tbar-quand { white-space: normal; }
  .tbar-vs { flex-wrap: wrap; }
  .tbar-vs select { flex: 1 1 140px; min-width: 0; max-width: none; }
  .tbar-vsq { white-space: normal; }
}

/* ── Les tuiles de chiffre ───────────────────────────────────────────────────
   Le nombre est en mono, toujours : c'est la typo des données de cette
   application, et elle vaut aussi pour le commerce. L'écart vit sous le
   nombre, avec sa valeur absolue et sa base — un pourcentage seul ne dit pas
   si +21 % porte sur trois commandes ou sur mille. */
.bkpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin-top: 14px;
}
.bkpi {
  position: relative; padding: 13px 14px 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden;
}
/* Le liseré ne colore que la tuile qui mène ; les autres portent un trait
   neutre. Une rangée de cinq accents ne distingue rien — chaque tuile a déjà
   son libellé, et la couleur sert à désigner, pas à numéroter. */
.bkpi::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--line);
}
.bkpi-tete::after { background: var(--c, var(--biz-now)); }
.bkpi-tete .bkpi-v { color: var(--ink); }
.bkpi-k {
  display: block;
  font: 700 10.5px var(--f-ui); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.bkpi-v {
  display: block; margin: 7px 0 6px;
  font: 720 26px/1 var(--f-display); letter-spacing: -.03em;
  font-variant-numeric: var(--chiffres);
}
/* « −7 % » et « −7 k€ » côte à côte : sans séparateur les deux signes se
   touchent et la lecture trébuche. Un point médian les tient à distance. */
.bkpi-d { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px;
          font-size: 11.5px; }
.bkpi-d .bkpi-abs::before { content: '·'; margin-right: 8px; color: var(--ink-3); }
.bkpi-d .ev { font: 750 12.5px var(--f-display);
              font-variant-numeric: var(--chiffres); }
.bkpi-abs { font: 550 11.5px var(--f-display); color: var(--ink-2);
            font-variant-numeric: var(--chiffres); }
.bkpi-base { color: var(--ink-3); font-size: 11px; }
.bkpi-muet { color: var(--ink-3); }

/* Deux bandes empilées, un même axe des jours. Chacune porte son intitulé :
   c'est lui la légende, puisqu'il n'y a qu'une série par bande. */
.rep-bande + .rep-bande { margin-top: 16px; }
/* Les deux bandes partagent l'axe des jours : il ne s'ecrit qu'une fois, sous
   la derniere. */
.rep-bande:not(:last-of-type) .fig-x { display: none; }
.rep-bande > .eyebrow { display: block; margin-bottom: 8px; }

/* ── La tête de la vue d'ensemble ────────────────────────────────────────────
   Une tête, quatre appuis. Cinq tuiles de même taille ne hiérarchisent rien :
   l'œil ne sait pas où se poser. Le chiffre d'affaires prend sa place, les
   quatre autres se rangent dessous, séparés par des filets et non par des
   cartes — quatre boîtes de plus auraient rendu le bruit qu'on enlève. */
.bhead {
  margin-top: 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--sh-1), var(--lisere); overflow: hidden;
}
.bhead-tete {
  position: relative; padding: 20px 22px 18px;
  background:
    radial-gradient(120% 160% at 0% 0%, var(--acc-soft) 0%, transparent 62%);
}
.bhead-tete::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--acc), var(--acc-deep));
}
.bhead-k {
  display: block; margin-bottom: 6px;
  font: 700 10.5px var(--f-ui); letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.bhead-v {
  display: block; font-family: var(--f-display);
  font-size: clamp(34px, 6vw, 46px); font-weight: 760; line-height: 1;
  letter-spacing: -.035em; color: var(--ink);
  font-variant-numeric: var(--chiffres);
}
/* L'unité recule : plus petite, plus légère, un cran de gris en moins. */
.bhead-v small {
  font-size: .46em; font-weight: 640; letter-spacing: -.01em;
  color: var(--ink-2); margin-left: .12em;
}
.bhead-a > b small {
  font-size: .62em; font-weight: 600; color: var(--ink-3); margin-left: .1em;
}
.bhead-tete .bkpi-d { margin-top: 10px; font-size: 12.5px; }

.bhead-appuis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line);
}
.bhead-a { padding: 13px 18px; border-left: 1px solid var(--line-2); min-width: 0; }
.bhead-a:first-child { border-left: 0; }
.bhead-a > span {
  display: block; margin-bottom: 5px;
  font: 700 10px var(--f-ui); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.bhead-a > b {
  display: block; font-family: var(--f-display); font-size: 20px;
  font-weight: 680; line-height: 1.1; letter-spacing: -.025em; color: var(--ink);
  font-variant-numeric: var(--chiffres);
}
.bhead-a .bkpi-d { margin-top: 5px; }

/* La figure, dans sa carte : légende à droite de l'intitulé. */
.bfig { margin-top: 14px; }
.bfig-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
          margin-bottom: 12px; }
.fig-leg { display: inline-flex; align-items: center; gap: 6px;
           font: 500 11px var(--f-mono); color: var(--ink-3); }
.fig-leg i { width: 10px; height: 3px; border-radius: 2px; flex: none; }

/* ── La fiche éclair ─────────────────────────────────────────────────────────
   La couche qu'on ouvre d'un clic sur une référence : ce qu'on veut savoir en
   une seconde, et trois portes vers la suite. */
.fe { display: flex; gap: 14px; align-items: flex-start; }
.fe-img .bqimg { width: 76px; height: 76px; }
.fe-txt { flex: 1; min-width: 0; }
.fe-txt > b { display: block; font-size: 15px; line-height: 1.35; }
.fe-etat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fe-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ── Les paniers abandonnés ───────────────────────────────────────────────────
   L'écran d'une personne qui téléphone, pas d'une personne qui lit un tableau
   de bord. La Boutique parle en capitales monospace — c'est un instrument ;
   ici tout ce qui est écrit se lit comme une phrase : écriture normale, un
   peu plus grande, pastilles en toutes lettres. La portée `.pn` est posée sur
   la page et sur la fenêtre d'un panier ; rien ne change pour la Boutique. */
.pn .eyebrow, .pn .status, .pn .tbl th, .pn .bqfait > span, .pn .bkpi-k,
.pn .bhead-k, .pn .bhead-a > span, .pn .bkpi-d, .pn .fenetre-pill, .pn .prov,
.pn .bqtag, .pn .label {
  font-family: var(--f-ui); text-transform: none; letter-spacing: 0;
}
.pn .page-head .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.pn #pn-sub, .pn .page-head p { font-size: 15px; }
.pn .seg button { font-size: 14px; padding: 8px 16px; }
.pn .seg button b { font-weight: 600; opacity: .6; margin-left: 2px; }
.pn .chip { font-size: 13.5px; padding: 7px 13px; }
.pn .chip b { font-weight: 600; opacity: .6; margin-left: 2px; }
.pn .status {
  font-size: 12.5px; font-weight: 600; line-height: 1.6;
  padding: 3px 10px; border-radius: 999px;
}
.pn .tbl .status.s-nouveau { background: transparent; border: 1px solid var(--line); color: var(--ink-3); }
.s-rappel { color: var(--bann); background: color-mix(in srgb, var(--bann) 14%, transparent); }
.pn .tbl th { font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 12px 14px; }
.pn .tbl td { padding: 14px 14px; font-size: 14.5px; vertical-align: top; }
.pn .tbl .titre { font-size: 15.5px; }
.pn .tbl .sous { font-size: 13px; margin-top: 3px; }
.pn .tbl .num.cle { font-size: 16px; }
.pn .tbl .num .sous { font-weight: 400; }
.pn .tbl tr.echu td:first-child { box-shadow: inset 3px 0 0 var(--bann); }
.pn .tbl .acts .btn { white-space: nowrap; }
/* Un nom se lit comme un nom, pas comme un code : seul `.code` garde le mono. */
.pn .cellbtn { font-family: var(--f-ui); font-size: inherit; letter-spacing: 0; }
.pn .cellbtn.code { font-family: var(--f-mono); }
.pn .status { white-space: nowrap; }
.pn .prov { font-size: 13px; line-height: 1.7; color: var(--ink-3); padding: 10px 4px 0; }
.pn .prov b { font-weight: 600; }
.pn .section-head .eyebrow { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pn .bqfait > span { font-size: 12.5px; }
.pn .bqfait > b { font-size: 15px; }
.pn .hint { font-size: 13.5px; line-height: 1.6; }
.pn-outils { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; }
.pn-outils .input { flex: 1 1 260px; font-size: 14.5px; }
.pn-outils .select { flex: 0 0 auto; width: auto; font-size: 14px; }
.pn-clos { margin: 10px 0 4px; }

/* La fiche : le client en grand, les gestes en boutons, puis le reste. */
.pn .modal-h h2 { font-size: 15px; color: var(--ink-3); font-weight: 500; }
.pn-client { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.pn-client-t { flex: 1; min-width: 220px; }
.pn-client h3 { margin: 0 0 4px; font-size: 22px; line-height: 1.25; }
.pn-client h3 .cellbtn { font: inherit; color: inherit; }
.pn-client-s { font-size: 14.5px; color: var(--ink-2); }
.pn-tete { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.pn-client-m { text-align: right; }
.pn-client-m b { display: block; font: 600 26px/1.1 var(--f-display); font-variant-numeric: var(--chiffres); }
.pn-client-m span { font-size: 13px; color: var(--ink-3); }
.pn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; align-items: center; }
.pn-actions .btn { font-size: 14px; }
.pn-gagne {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px;
  padding: 12px 14px; border-radius: var(--r); font-size: 14.5px; line-height: 1.5;
  background: var(--ok-soft); color: var(--ink);
}
.pn-gagne .i { color: var(--ok); flex: none; margin-top: 3px; }
.pn-form { display: grid; gap: 12px; }
.pn-form-q { font-size: 14.5px; font-weight: 600; }
.pn-form .field { margin: 0; }
.pn-form .label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.pn-form .chip { font-size: 14.5px; padding: 9px 16px; }
.pn-form-l { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.pn-form-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pn-form-act .spacer { flex: 1; }
.pn .bqnote p { font-size: 14.5px; }
.pn-bper { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 14px; }
.pn-bper .input { width: auto; }
.pn-journal td.pn-texte { max-width: 260px; font-size: 13.5px; color: var(--ink-2); }
.pn-journal td { min-width: 110px; }
/* Ce qui a changé entre le panier et la commande : deux montants, une flèche,
   l'écart. La flèche recule pour que les chiffres se lisent d'abord. */
.pn-ec {
  margin-top: 3px; font-size: 13.5px; line-height: 1.6;
  font-variant-numeric: var(--chiffres);
}
/* Les deux montants ne se coupent jamais en deux ; c'est la ligne entière qui
   passe à la suivante si la colonne est étroite. */
.pn-ec > b, .pn-ec .pn-fl { white-space: nowrap; }
.pn-ec .pn-fl { color: var(--ink-3); margin: 0 5px; }
.pn-ec b { font-weight: 700; margin-left: 4px; }
.pn-ec b span { font-weight: 500; opacity: .75; }
.pn-ec-egal { font-weight: 500; color: var(--ink-3); }
.pn-port { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }

/* ── Lisibilité de la file ────────────────────────────────────────────────────
   Une file se balaie en diagonale : le montant doit sauter aux yeux, l'état se
   reconnaître à sa couleur avant d'être lu, et l'urgence se voir sans chercher.
   Un liseré de couleur à gauche de chaque ligne suffit — un aplat sur toute la
   rangée ferait un tableau bariolé où plus rien ne ressort. */
.pn .tbl tbody tr.pn-l td:first-child { box-shadow: inset 3px 0 0 var(--line); }
.pn .tbl tbody tr.pn-l-atraiter td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
.pn .tbl tbody tr.pn-l-attente td:first-child { box-shadow: inset 3px 0 0 var(--news); }
.pn .tbl tbody tr.pn-l-gagne td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.pn .tbl tbody tr.pn-l-perdu td:first-child { box-shadow: inset 3px 0 0 var(--ink-3); }
.pn .tbl tbody tr.pn-l-ecarte td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.pn .tbl tbody tr.pn-l-ecarte .titre { color: var(--ink-2); }
.pn .tbl tbody tr.echu td:first-child { box-shadow: inset 3px 0 0 var(--bann); }
.pn .tbl tbody tr.echu { background: color-mix(in srgb, var(--bann) 5%, transparent); }
/* Le montant porte la ligne : il se lit avant le reste. */
.pn-mt { font: 700 17px/1.2 var(--f-display); font-variant-numeric: var(--chiffres); }
.pn-retard { color: var(--bann); font-weight: 600; }
.pn .tbl .sous { line-height: 1.55; }
.pn .tbl .sous b { font-weight: 600; }
/* Le montant de la fiche, et ce qui s'y ajoute. */
.pn-portnote {
  display: block; margin-top: 2px; font-size: 12px; color: var(--bann);
}
/* Les autres paniers du même client : à lire AVANT de composer le numéro. Un
   fond pâle, pas une carte de plus — c'est une mention, pas un tableau. */
.pn-autres {
  margin: 14px 0 4px; padding: 12px 14px; border-radius: var(--r);
  background: var(--line-2); font-size: 14.5px; line-height: 1.5;
}
.pn-autres p { margin: 0 0 8px; }
.pn-autres ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pn-autres li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pn-autres .cellbtn { font-weight: 600; }
/* Les rappels d'un clic, sous le calendrier : plus discrets que les résultats
   du contact, qui restent LA question du formulaire. */
.pn-form .pn-rapchips { margin-top: -4px; }
.pn-form .pn-rapchips .chip { font-size: 13px; padding: 6px 12px; }
.pn-form .pn-raphint { margin: -6px 0 0; }
/* Les trois autres issues d'un panier — commande prise par téléphone, déjà
   traité par un collègue, écarté — sous le formulaire, en retrait : le contact
   reste LA question, celles-ci sont l'exception. Un panneau s'ouvre à la
   demande, jamais trois formulaires côte à côte. */
.pn-issues { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-issues .btn { font-size: 13.5px; }
.pn-issues .btn.on { background: var(--line-2); border-color: transparent; color: var(--ink); }
.pn-issue {
  display: grid; gap: 10px; margin-top: 10px; padding: 12px 14px;
  border-radius: var(--r); background: var(--line-2);
}
.pn-issue .pn-form-q { font-weight: 500; font-size: 14px; line-height: 1.5; }
.pn-issue-l { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pn-issue .field { margin: 0; }
.pn-issue .label { font-size: 13px; color: var(--ink-2); }
/* Une décision prise — déjà traité, écarté — se lit comme une mention, avec
   le geste pour la défaire à droite. */
.pn-deja {
  display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 12px 14px; border-radius: var(--r);
  background: var(--line-2); font-size: 14.5px; line-height: 1.5;
}
.pn-deja .i { color: var(--ink-3); flex: none; margin-top: 3px; }
.pn-deja > span, .pn-gagne > span { flex: 1; min-width: 200px; }
.pn-deja .btn, .pn-gagne .btn { margin-left: auto; flex: none; align-self: center; }
/* Une promesse n'est ni une vente ni un abandon : elle se lit en attente, pas
   en réussite. D'où le jeton « en cours » et non le vert de `--ok`, qui aurait
   fait passer pour acquis ce qui ne l'est pas encore. */
/* La phrase qui prévient qu'un panier va sortir de la file se lit, elle ne se
   survole pas : c'est la seule qui annonce une perte. Elle prend l'encre
   pleine et un liseré, jamais une couleur d'alerte — rien n'est cassé, il
   manque une décision. */
.pn-raphint-fort {
  color: var(--ink) !important;
  border-left: 3px solid var(--acc);
  background: var(--acc-soft);
  border-radius: var(--r-s);
  padding: 8px 12px;
}
.pn-raphint-fort b { font-weight: 600; }
.pn-engage { background: var(--acc-soft); }
.pn-engage .i { color: var(--acc-deep); }
@media (max-width: 700px) { .pn-issue-l { grid-template-columns: 1fr; } }

/* ── Ce qui a changé entre le panier et la commande ───────────────────────────
   Une ligne par article, un signe en tête : ajouté, retiré, quantité changée,
   inchangé. Le signe et un fond très pâle suffisent — un aplat coloré sur
   chaque ligne ferait une liste bariolée où plus rien ne ressort. */
.pn-dmot { font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; }
.pn-diff { display: flex; flex-direction: column; gap: 2px; }
.pn-dl {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-s); font-size: 14.5px;
}
.pn-dl-s {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font: 700 13px/1 var(--f-ui); color: var(--ink-3); background: var(--line-2);
}
.pn-dl-n b { font-weight: 600; }
.pn-dl-n .sous {
  display: block; margin-top: 1px; font: 500 12px var(--f-mono); color: var(--ink-3);
}
.pn-dl-q { white-space: nowrap; font-variant-numeric: var(--chiffres); }
.pn-dl-plus { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.pn-dl-plus .pn-dl-s { background: var(--ok-soft); color: var(--ok); }
.pn-dl-moins { background: color-mix(in srgb, var(--bad) 7%, transparent); }
.pn-dl-moins .pn-dl-s { background: var(--bad-soft); color: var(--bad); }
.pn-dl-chg { background: color-mix(in srgb, var(--bann) 9%, transparent); }
.pn-dl-chg .pn-dl-s { background: color-mix(in srgb, var(--bann) 18%, transparent); color: var(--bann); }
.pn-dl-egal { color: var(--ink-2); }
.pn-prixmot { color: var(--ink-2); }
/* Le compté d'une ligne : trois signes, lisibles d'un coup d'œil. */
.pn-cpt { font-size: 13.5px; cursor: default; }
.pn-cpt b { font-weight: 700; margin-right: 2px; }
.pn-dq { color: var(--bann); }
.pn-dl-port { margin-top: 6px; background: var(--line-2); }
.pn-dl-port .pn-dl-s { background: var(--bg); }
/* Un nom de client ne se coupe pas en deux : la colonne d'identité garde sa
   largeur, le tableau défile s'il le faut — jamais la page. */
.pn .tbl .titre { min-width: 210px; }
/* La cellule d'identité porte le nom, la société et le site : le clamp à deux
   lignes de la Boutique la coupait en plein milieu (« LD… Medical »). Ici la
   ligne a le droit de respirer. */
.pn .tbl .titre { display: block; -webkit-line-clamp: none; overflow: visible; }
.pn .tbl .acts { min-width: 92px; }
/* Le sous-titre d'une ligne de panier porte plusieurs faits — société, date
   d'appel, rappel : il a le droit à ses lignes, la ligne entière respire. */
.pn .tbl .sous { display: block; overflow: visible; }
.pn .tbl td { vertical-align: top; }
.pn-outils .select + .select { margin-left: 0; }
.pn .bhead-k { font-size: 14px; color: var(--ink-2); }
.pn .bhead-a > span { font-size: 13.5px; }
.pn .bkpi-k { font-size: 14px; }
.pn .bkpi-d { font-size: 13px; }
@media (max-width: 700px) {
  .pn-form-l { grid-template-columns: 1fr; }
  .pn-client-m { text-align: left; }
}

/* Le choix des colonnes du catalogue, et l'avertissement de fenêtre. */
.bqcolbtn { align-self: end; margin-bottom: 2px; }
.bqcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px; }
.bqcol {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 8px 10px; border-radius: var(--r-s); font-size: 14px;
}
.bqcol:hover { background: var(--line-2); }
.bqcol input { width: 16px; height: 16px; accent-color: var(--acc); cursor: pointer; }
.bqcol input:disabled { cursor: default; }
.bqcol i { font-style: normal; font-size: 12px; }
.bqavert {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r);
  background: color-mix(in srgb, var(--bann) 10%, transparent); color: var(--ink);
}
.bqavert .i { color: var(--bann); flex: none; margin-top: 2px; }
.bqavert > span { line-height: 1.6; }
.bqavert sup { font-size: .7em; vertical-align: super; }
.bqcat th.th-tri { white-space: nowrap; }
/* Le choix de lecture d'un mouvement, et la porte vers la liste entière. */
.bqmvt-barre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 6px;
}
.bqmvt-barre .spacer { flex: 1; }
.bqmvt-barre .bqsel { margin: 0; }
.bqmvt-barre .bqsel .input { min-width: 150px; }
.bqmvt-ec {
  margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-s);
  background: var(--line-2); line-height: 1.6;
}
.bqmvt-part { margin: 0 0 12px; }

/* ── Le camembert ─────────────────────────────────────────────────────────────
   Un anneau et sa légende chiffrée, côte à côte. La légende n'est pas un
   ornement : trois teintes de la palette passent sous 3:1 sur fond clair, donc
   l'identité ne peut jamais tenir à la couleur seule. */
.cam { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.cam-f { position: relative; flex: none; width: 200px; height: 200px; }
.cam-f svg { width: 200px; height: 200px; display: block; }
.cam-p { transition: opacity .15s ease; cursor: default; }
.cam-p.off, .cam-l li.off { opacity: .32; }
.cam-p.on { filter: brightness(1.06); }
.cam-c {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; pointer-events: none;
}
.cam-c b { display: block; font: 700 17px/1.15 var(--f-display); font-variant-numeric: var(--chiffres); }
.cam-c span { font-size: 11px; color: var(--ink-3); }
.cam-c { padding: 0 8px; }
.cam-l { flex: 1; min-width: 240px; list-style: none; margin: 0; padding: 0; }
.cam-l li {
  display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px;
  align-items: center; padding: 7px 2px; font-size: 14px;
  border-bottom: 1px solid var(--line-2); transition: opacity .15s ease;
}
.cam-l li:last-child { border-bottom: 0; }
.cam-l i { width: 12px; height: 12px; border-radius: 3px; }
.cam-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-n em { font-style: normal; color: var(--ink-3); font-size: 12.5px; }
.cam-l b { font-weight: 650; font-variant-numeric: var(--chiffres); }
.cam-pc { color: var(--ink-3); font-size: 13px; min-width: 44px; text-align: right;
          font-variant-numeric: var(--chiffres); }
@media (prefers-reduced-motion: reduce) { .cam-p, .cam-l li { transition: none; } }
@media (max-width: 620px) { .cam-f { margin: 0 auto; } }
/* La fenêtre des mouvements porte sept colonnes chiffrées : elle a besoin de
   toute la largeur disponible, sans quoi la moitié part hors du cadre. */
.modal.wide.bqlarge, .modal.bqlarge { max-width: min(1180px, 95vw); }
.modal.bqlarge .tbl th, .modal.bqlarge .tbl td { padding-left: 10px; padding-right: 10px; }
.modal.bqlarge .tbl .titre { min-width: 0; }
/* Neuf colonnes : les chiffrées se serrent, la table défile dans son cadre. */
.bqmvt-tbl th, .bqmvt-tbl td { white-space: nowrap; }
.bqmvt-tbl .num { padding-left: 8px; padding-right: 8px; font-size: 13.5px; }
/* La colonne du produit cède la place aux chiffres : le nom se tronque, la
   référence reste entière — c'est elle qui identifie la ligne. */
.bqmvt-tbl td:has(> .titre) { min-width: 0; max-width: 240px; }
.bqmvt-tbl .titre { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.bqmvt-tbl th:first-child, .bqmvt-tbl td:first-child { padding-right: 6px; }

/* Les notes internes : une pile de billets, et le champ pour en ajouter un. */
.bqnote {
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-s);
}
.bqnote-h { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.bqnote-h b { font-size: 12.5px; }
.bqnote-h .hint { font-size: 11px; }
.bqnote p { margin: 0; font-size: 13px; white-space: pre-wrap; }
.bqnote .bqtags { margin-top: 6px; }
.bqnote-st {
  height: 26px; padding: 0 6px; font-size: 11px;
  background: var(--card); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 6px;
}
.bqnote-new { margin-top: 10px; }
.bqnote-new .textarea { min-height: 58px; }
.bqnote-act { display: flex; gap: 8px; margin-top: 8px; }
.bqnote-act .input { flex: 1; height: 38px; }

.bqaxes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.bqsel { flex: 1; min-width: 190px; margin: 0; }
.bqsel .lbl {
  display: block; margin-bottom: 4px;
  font: 750 10px var(--f-ui); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Rupture de stock sur un créneau : la seule pastille de la carte qui ne dise
   pas où en est la production, mais ce qui empêchera de livrer. */
.pgrupt {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  font: 750 10px var(--f-ui); letter-spacing: .04em; text-transform: uppercase;
  color: var(--bad); background: var(--bad-soft); border: 1px solid transparent;
}
.pgrupt .i { width: 12px; height: 12px; }

/* La pastille de couleur d'une société : sa teinte dépend de son rang, c'est
   ce qui rend l'ordre lisible dans le tableau. */
.sitedot {
  width: 10px; height: 10px; border-radius: 99px; flex: none; display: block;
}
/* La même flèche, retournée : pas de second symbole dans le sprite. */
.i.bas { transform: rotate(180deg); }
.icon-btn:disabled { opacity: .3; cursor: default; }

/* ── Reporting ──────────────────────────────────────────────────────────── */

.rep-legende {
  display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px;
  font: 700 11px var(--f-ui); color: var(--ink-2);
}
.rep-legende span { display: inline-flex; align-items: center; gap: 6px; }
.rep-legende i { width: 14px; height: 3px; border-radius: 99px; flex: none; }

.rep-manque { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* .chipmini est une pastille, pas un bouton : ici elle en devient un. */
.rep-manque .chipmini {
  cursor: pointer; border: 1px solid var(--line); background: var(--card-2);
}
.rep-manque .chipmini:hover {
  border-color: var(--acc); color: var(--acc); background: var(--acc-soft);
}

/* ── Pile de validation (mode « tri rapide ») ───────────────────────────── */

.deck-wrap { max-width: 560px; margin: 0 auto; }

.deck {
  position: relative;
  height: clamp(340px, 54dvh, 500px);
  margin-bottom: 32px;   /* laisse voir le dépassement des vues suivantes */
  touch-action: pan-y;
  user-select: none;
}

.tcard {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l); box-shadow: var(--sh-2);
  will-change: transform;
}
.tcard.behind { transform: translateY(16px) scale(.97); opacity: .6; }
.tcard.behind2 { transform: translateY(30px) scale(.94); opacity: .3; }
.tcard.glide { transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.tcard.gone-l { transform: translateX(-130%) rotate(-16deg); opacity: 0; }
.tcard.gone-r { transform: translateX(130%) rotate(16deg); opacity: 0; }
.tcard.gone-d { transform: translateY(60%) scale(.9); opacity: 0; }

.tcard-img {
  flex: 1; min-height: 0; position: relative; cursor: zoom-in;
  background: var(--card-2);
}
.tcard-img img, .tcard-img video { width: 100%; height: 100%; object-fit: contain; }
.tcard-top {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; gap: 6px; align-items: center; pointer-events: none;
}
.tcard-top .spacer { flex: 1; }
.tcard-top .tag, .tcard-top .chipmini {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
}
.chipmini {
  padding: 2px 8px; border-radius: 99px;
  font: 600 11px/1.7 var(--f-mono); letter-spacing: .05em; color: var(--ink-2);
}

.tcard-meta { padding: 12px 15px 14px; border-top: 1px solid var(--line-2); }
.tcard-ref {
  display: block; font: 700 19px/1.2 var(--f-mono); letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tcard-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap;
              font-size: 12.5px; color: var(--ink-2); }
.tcard-file { margin-top: 6px; font: 11px var(--f-mono); color: var(--ink-3);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tampon de décision, révélé pendant le glissement. */
.stampv {
  position: absolute; top: 20px; z-index: 3; opacity: 0;
  padding: 5px 12px; border: 3px solid currentColor; border-radius: 9px;
  font: 800 17px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  pointer-events: none; transition: opacity .1s;
}
.stampv.yes { left: 18px; color: var(--ok); rotate: -11deg; }
.stampv.no  { right: 18px; color: var(--bad); rotate: 11deg; }

.deck-actions {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.rnd {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); border: 1.5px solid var(--line);
  box-shadow: var(--sh-2); color: var(--ink-2);
  transition: transform .1s, border-color .12s, color .12s, background .12s;
}
.rnd:hover { transform: translateY(-2px); }
.rnd:active { transform: scale(.94); }
.rnd .i { width: 26px; height: 26px; stroke-width: 2.1; }
.rnd.no { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.rnd.no:hover { background: var(--bad-soft); border-color: var(--bad); }
.rnd.yes { color: #fff; background: var(--ok); border-color: var(--ok);
           width: 72px; height: 72px; }
.rnd.yes:hover { background: color-mix(in srgb, var(--ok) 86%, #000); }
.rnd.sm { width: 46px; height: 46px; }
.rnd.sm .i { width: 20px; height: 20px; }

.deck-hint {
  margin-top: 14px; text-align: center; font-size: 12px; color: var(--ink-3);
}
.deck-hint kbd {
  font: 600 11px var(--f-mono); padding: 1px 5px; margin: 0 1px;
  border: 1px solid var(--line); border-radius: 4px;
}

.deck-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.deck-bar .pw { flex: 1; }

/* Motifs de refus : une seule frappe suffit. */
.why { padding: 16px; }
.why h3 { font-size: 15.5px; font-weight: 700; }
.why p { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.why .chips { margin-top: 14px; }
.why .chip { font-size: 13px; padding: 9px 13px; }

/* ── Rapport d'ouverture ────────────────────────────────────────────────── */

.rep-hero {
  padding: 16px 18px; border-radius: var(--r);
  background: var(--acc-soft); border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent);
}
.rep-hero b { display: block; font: 760 30px/1 var(--f-mono); letter-spacing: -.04em;
              color: var(--acc-deep); }
.rep-hero span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }

.rep-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--line-2);
}
.rep-row:last-child { border-bottom: 0; }
.rep-row .nm { flex: 1; min-width: 0; }
.rep-row .nm b { display: block; font-size: 13.5px; font-weight: 650; }
.rep-row .nm span { font: 11px var(--f-mono); color: var(--ink-3); }
.rep-row .qty { font: 700 17px var(--f-mono); font-variant-numeric: tabular-nums; }
.rep-mini { display: flex; gap: 5px; flex-wrap: wrap; }

.site-bar { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden;
            display: flex; margin-top: 6px; }
.site-bar i { height: 100%; display: block; }

.rep-alert {
  display: flex; align-items: center; gap: 11px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r);
}
.rep-alert .n { font: 760 22px var(--f-mono); color: var(--acc-deep); }

/* ── Notes ──────────────────────────────────────────────────────────────── */

.note {
  display: flex; gap: 12px; padding: 13px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-1);
}
.note.unread { border-left: 3px solid var(--acc); }
.note-b { flex: 1; min-width: 0; }
.note-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-h b { font-size: 13.5px; font-weight: 650; }
.note-h time { font: 11px var(--f-mono); color: var(--ink-3); }
.note-m { margin-top: 5px; font-size: 14px; color: var(--ink-2); white-space: pre-wrap;
          overflow-wrap: anywhere; }
.tone-bravo      { color: var(--ok); }
.tone-correction { color: var(--bann); }
.tone-info       { color: var(--photo); }

.feed { display: flex; flex-direction: column; gap: 0; }
.fitem { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line-2);
         font-size: 13px; align-items: baseline; }
.fitem:last-child { border-bottom: 0; }
.fitem time { font: 10.5px var(--f-mono); color: var(--ink-3); flex: none; width: 82px; }
.fitem b { font-weight: 650; }

/* ── Fenêtres modales ───────────────────────────────────────────────────── */

.veil {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(8,13,20,.58); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
  animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } }

.modal {
  width: 100%; max-width: 520px; max-height: 88dvh; overflow: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l); box-shadow: var(--sh-3);
  animation: pop .2s cubic-bezier(.2,.9,.25,1);
}
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.modal.wide { max-width: 900px; }
.modal-h {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; border-bottom: 1px solid var(--line-2);
  background: var(--card);
}
.modal-h h2 { font-size: 16.5px; font-weight: 730; letter-spacing: -.02em; flex: 1; }
.modal-b { padding: 16px; }
.modal-f {
  display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap;
  padding: 13px 16px; border-top: 1px solid var(--line-2);
  position: sticky; bottom: 0; background: var(--card);
}

.lightbox {
  position: fixed; inset: 0; z-index: 35; background: rgba(6,10,15,.94);
  display: grid; grid-template-rows: auto 1fr auto; animation: fade .16s;
}
.lb-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #E8EEF6; }
.lb-top .spacer { flex: 1; }
.lb-top .icon-btn { color: #A6B4C7; }
.lb-top .icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.lb-scale { font-size: 11.5px; color: #8B9AAF; min-width: 44px; text-align: right; }
.lb-stage { position: relative; display: grid; place-items: stretch;
            padding: 0 12px; min-height: 0; }

/* Fenêtre de zoom : le cadre reste fixe, c'est la toile qui se déplace. */
.lb-zoom {
  position: relative; overflow: hidden; min-height: 0;
  display: grid; place-items: center;
  touch-action: none; cursor: zoom-in;
  overscroll-behavior: contain;
}
.lb-zoom.zoomed { cursor: grab; }
.lb-canvas { display: grid; place-items: center; max-width: 100%; max-height: 100%; }
.lb-canvas.glide { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.lb-canvas img, .lb-canvas video {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--r-s); user-select: none; -webkit-user-drag: none;
}

.lb-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
           color: #8B9AAF; font: 12px var(--f-mono); text-align: center; }
.lb-tools { display: flex; justify-content: center; gap: 8px; margin-bottom: 9px; }
.lb-tools[hidden] { display: none; }
.lb-zbtn {
  display: grid; place-items: center;
  min-width: 44px; height: 40px; padding: 0 12px; border-radius: 11px;
  background: rgba(255,255,255,.1); color: #E8EEF6;
  font: 600 12.5px var(--f-mono);
}
.lb-zbtn:hover { background: rgba(255,255,255,.2); }
.lb-zbtn:active { background: rgba(255,255,255,.28); }

.lb-nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center;
          width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1);
          color: #fff; z-index: 2; }
.lb-nav.prev { left: 10px; } .lb-nav.next { right: 10px; }
.lb-nav:hover { background: rgba(255,255,255,.22); }
/* Zoomé, le doigt déplace l'image : les flèches s'effacent pour ne pas gêner. */
.lightbox.zoomed .lb-nav { opacity: .2; pointer-events: none; }

/* ── Notifications ──────────────────────────────────────────────────────── */

.toasts {
  position: fixed; z-index: 50; left: 50%; translate: -50% 0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: min(440px, calc(100vw - 24px));
}
.toast {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-radius: 99px;
  background: var(--ink); color: var(--paper);
  font-size: 13.5px; font-weight: 550; box-shadow: var(--sh-3);
  animation: rise .22s cubic-bezier(.2,.9,.25,1);
  max-width: 100%;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.toast.ok  { background: var(--ok); color: #fff; }
.toast.bad { background: var(--bad); color: #fff; }
.toast.out { opacity: 0; transition: opacity .2s; }

/* ── Squelettes ─────────────────────────────────────────────────────────── */

.sk { background: var(--line-2); border-radius: var(--r-s); position: relative; overflow: hidden; }
.sk::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 70%, transparent), transparent);
  animation: sweep 1.2s infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sk-kpi { height: 92px; }
.sk-shot { aspect-ratio: 4/3; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --gut: 14px; }

  .rail { display: none; }
  .shell { padding-left: 0; }
  .only-desk { display: none !important; }
  .only-mobile { display: inline-flex !important; }

  .main { padding-bottom: calc(var(--tab-h) + 22px + env(safe-area-inset-bottom)); }

  .topbar { padding: 0 12px; gap: 8px; }
  .searchbar { max-width: none; height: 36px; }

  /* ≥16px : empêche le zoom automatique de Safari iOS au focus. */
  .input, .select, .textarea, .search-input { font-size: 16px; }

  .tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 18;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    align-items: center;
    background: var(--card);
    border-top: 1px solid var(--line);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: 100%; position: relative;
    color: var(--ink-3); font: 600 10px var(--f-ui);
  }
  .tab.on { color: var(--acc-deep); }
  .tab .i { width: 22px; height: 22px; }
  .tab .dot {
    position: absolute; top: 8px; right: 50%; margin-right: -16px;
    min-width: 16px; padding: 0 4px; border-radius: 99px;
    background: var(--acc); color: #fff; font: 700 9.5px/16px var(--f-mono);
    text-align: center;
  }
  .tab-fab { position: relative; }
  .tab-fab .fab {
    position: absolute; top: -18px; left: 50%; translate: -50% 0;
    width: 50px; height: 50px; border-radius: 16px;
    display: grid; place-items: center;
    background: var(--acc); color: #fff;
    box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--acc) 62%, transparent);
    border: 3px solid var(--paper);
  }
  .tab-fab .fab .i { width: 24px; height: 24px; stroke-width: 2.1; }
  .tab-fab span { margin-top: 26px; }
  .tab-fab .dot { top: -22px; margin-right: -27px; }

  .page-head { margin-bottom: 15px; }
  .section-head .tip { display: none; }
  .goal { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ring { width: 92px; height: 92px; }
  .gal { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Programme : les colonnes s'empilent, une par site. */
  .pgboard { grid-template-columns: 1fr; }
  .pgcol { border-right: 0; border-bottom: 1px solid var(--line); }
  .pghead { height: 60px; }
  .pgzone { min-height: 0; padding: 10px; }
  .pgcard { grid-template-columns: 92px 1fr; gap: 10px; }
  .pgcard.nl { grid-template-columns: 112px 1fr; }
  .pgped { grid-template-columns: 76px 1fr auto; gap: 8px; }
  .pgcat { grid-template-columns: 1fr; max-height: 46vh; }
  .pgpimg { height: 64px; }
  .pgmod { flex: 1; padding: 10px 8px; font-size: 12.5px; }
  .pgfiltre { gap: 5px; }
  .pgsite { padding: 5px 9px; font-size: 12px; }
  .pgfl { width: 100%; margin-bottom: 2px; }
  .pgstrip { font-size: 10.5px; letter-spacing: 2px; }
  .pgacts .btn { flex: 1; }
  .pgday { min-height: 84px; padding: 4px; }
  .pgevent .m { display: none; }
  .pgcalhead div { font-size: 9px; padding: 7px 2px; }
  .kpi-v { font-size: 26px; }
  .strip { grid-auto-columns: 104px; }

  .veil { padding: 0; place-items: end stretch; }
  .modal {
    max-width: none; max-height: 92dvh; border-radius: var(--r-l) var(--r-l) 0 0;
    border-bottom: 0; animation: up .24s cubic-bezier(.2,.9,.25,1);
  }
  @keyframes up { from { transform: translateY(100%); } }
  .modal-f { padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
  .modal-f .btn { flex: 1; }

  .toasts { bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom)); }
  .selbar { bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); }

  /* Visionneuse : l'écran est petit, la vue prend tout et les cibles
     tactiles restent au-dessus de 44 px. */
  .lb-stage { padding: 0; }
  .lb-canvas img, .lb-canvas video { border-radius: 0; }
  .lb-top { padding: 10px 12px; }
  .lb-foot { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); font-size: 11px; }
  .lb-nav { width: 46px; height: 46px; background: rgba(255,255,255,.16); }
  .lb-nav.prev { left: 6px; } .lb-nav.next { right: 6px; }
  .lb-zbtn { height: 44px; min-width: 52px; }
}

@media (max-width: 460px) {
  .row2 { grid-template-columns: 1fr; }
  .head-actions .btn span { display: none; }
  .head-actions .btn { padding: 0 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .gate-bg { animation: none; }
}

@media print {
  .rail, .topbar, .tabbar, .toasts, .head-actions, .shot-tools { display: none !important; }
  .shell { padding-left: 0; }
  body { background: #fff; }
  .card, .sheet, .goal { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}