/* ════════════════════════════════════════════════════════════════════════
   VAPO-UI — la feuille de style commune à tous les outils (v86)
   ────────────────────────────────────────────────────────────────────────
   « Inspire-toi de Nextore, que ce soit uniforme et cohérent entre tous
   les outils » (le patron, 10/10/2026). Jusqu'ici chaque outil avait son
   thème sombre, ses polices (sept familles en tout) et ses couleurs : on
   changeait de logiciel en changeant d'onglet.

   Désormais :
     · UN thème clair, celui de l'écran de caisse que les équipes ont sous
       les yeux toute la journée — barre noire à gauche, bleu Nextore pour ce
       qui se clique et pour les en-têtes de tableau, cartes blanches sur
       fond gris clair ;
     · UNE police (Inter), chiffres à chasse fixe partout ;
     · des jetons (--vp-…) que chaque outil reprend au lieu de ses couleurs.

   Chaque outil charge cette feuille AVANT son propre <style> : ses règles
   restent maîtresses de sa mise en page, les jetons d'ici décident des
   couleurs et des polices. La barre latérale et le bandeau de page sont
   posés par vapo-nav.js.
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  color-scheme: light;

  /* ── Surfaces ── */
  --vp-bg:        #edf0f4;   /* le fond de page, gris clair */
  --vp-surface:   #ffffff;   /* cartes, panneaux, tableaux */
  --vp-surface-2: #f6f8fa;   /* zones calmes, lignes alternées, champs en lecture */
  --vp-surface-3: #e8edf2;   /* survol, appuyé */
  --vp-border:    #dde2e8;
  --vp-border-2:  #c7ced7;   /* bordures de champ, séparateurs marqués */

  /* ── Texte ── */
  --vp-text:   #1f2933;
  --vp-text-2: #4f5d6b;      /* secondaire */
  --vp-text-3: #7a8693;      /* discret : légendes, unités */

  /* ── Couleurs de sens ── texte foncé lisible sur blanc, fond pâle assorti */
  --vp-blue:   #2f7ab8;  --vp-blue-h:  #25679d;  --vp-blue-soft:   #e4eff8;
  --vp-green:  #1d8a4b;  --vp-green-soft:  #e1f3e8;
  --vp-red:    #c8372a;  --vp-red-soft:    #fbe6e3;
  --vp-orange: #b5650a;  --vp-orange-soft: #fdf0dc;
  --vp-violet: #6a55b8;  --vp-violet-soft: #ece8f8;
  --vp-teal:   #0f8199;  --vp-teal-soft:   #def2f6;
  --vp-gold:   #9a7414;  --vp-gold-soft:   #f8f0d9;

  /* Les mêmes en version « remplissage » : barres de graphique, pastilles,
     jauges — là où la couleur n'a pas à porter un texte. */
  --vp-c1: #3584c6;  /* bleu    */
  --vp-c2: #ec9a35;  /* orange  */
  --vp-c3: #34a466;  /* vert    */
  --vp-c4: #8068cc;  /* violet  */
  --vp-c5: #22a5bf;  /* turquoise */
  --vp-c6: #dd5544;  /* rouge   */
  --vp-c7: #98a3af;  /* gris    */
  --vp-c8: #e3b93f;  /* jaune   */

  /* ── La barre de gauche, noire comme celle de Nextore ── */
  --vp-side-w:   232px;
  --vp-side-bg:  #111418;
  --vp-side-txt: #e9edf1;
  --vp-side-dim: #8b95a1;

  /* ── Typographie ── */
  --vp-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --vp-code: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;   /* collages, code */

  /* ── Formes ── */
  --vp-r:    4px;
  --vp-r-lg: 6px;
  --vp-ombre: 0 1px 2px rgba(16, 24, 40, .05);
  --vp-ombre-haute: 0 10px 30px rgba(16, 24, 40, .16);
  --vp-max: 1360px;          /* largeur maximale du contenu */
  --vp-pad: 20px 24px 80px;  /* marges intérieures du contenu */
}
@media (max-width: 700px){ :root{ --vp-pad: 14px 12px 84px; } }

/* ── Base ── */
html{ background: var(--vp-bg); -webkit-text-size-adjust: 100%; }
body{
  margin: 0 !important; padding: 0 !important;
  background: var(--vp-bg); color: var(--vp-text);
  font-family: var(--vp-sans); font-size: 14px; line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection{ background: #cfe3f4; }
:focus-visible{ outline: 2px solid var(--vp-blue); outline-offset: 2px; }
a{ color: var(--vp-blue); }
textarea, pre, code, kbd{ font-family: var(--vp-code); }

/* ════════════════════════════════════════════════════════════════════════
   LA COQUILLE — barre latérale, bandeau de page, bouton Menu
   ────────────────────────────────────────────────────────────────────────
   Toutes ses règles passent par un IDENTIFIANT (#vp-side, #vp-bandeau,
   #vp-fab, #vp-voile). Les feuilles des outils se chargent après celle-ci et
   gardent des règles larges — `button:hover`, `input[type=search]`, `th`,
   `label` — qui repeignaient la barre au survol : un identifiant l'emporte
   sur elles sans `!important`.

   L'échelle des z-index :
     35          la barre latérale, en grand écran ;
     36          le bouton Menu — sous les modales des outils (40 et plus),
                 qui doivent pouvoir le recouvrir ;
     40 … 1000   ce que les outils ouvrent : barres collantes, tiroirs, modales ;
     2147482500+ le menu ouvert en tiroir sur téléphone, au-dessus de tout. */
@media (min-width: 1080px){
  html.vp-menu:not(.vp-replie){ padding-left: var(--vp-side-w); }
}

#vp-side{
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--vp-side-w); z-index: 35;
  display: flex; flex-direction: column; background: var(--vp-side-bg); color: var(--vp-side-txt);
  font: 400 13px/1.35 var(--vp-sans); box-shadow: 1px 0 0 rgba(0,0,0,.25);
  transform: translateX(-100%); transition: transform .18s ease; visibility: hidden;
}
@media (min-width: 1080px){
  html.vp-menu:not(.vp-replie) #vp-side{ transform: none; visibility: visible; }
}
html.vp-tiroir #vp-side{ transform: none; visibility: visible; z-index: 2147482600; box-shadow: var(--vp-ombre-haute); }

#vp-side svg{ width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
#vp-side .vp-tete{ display: flex; align-items: center; gap: 8px; padding: 14px 12px 12px 16px; border-bottom: 1px solid #23282f; }
#vp-side .vp-marque{ flex: 1; min-width: 0; color: #fff; text-decoration: none; line-height: 1.15; }
#vp-side .vp-marque b{ display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; }
#vp-side .vp-marque small{ display: block; font-size: 11px; color: var(--vp-side-dim); margin-top: 2px; }
#vp-side .vp-replier{ all: unset; cursor: pointer; color: var(--vp-side-dim); width: 28px; height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; }
#vp-side .vp-replier:hover{ color: #fff; background: #23282f; }
#vp-side .vp-replier:focus-visible{ outline: 2px solid #6fb0e6; }

#vp-side .vp-cherche{ padding: 10px 12px; border-bottom: 1px solid #23282f; }
#vp-side .vp-cherche input{ all: unset; box-sizing: border-box; width: 100%; padding: 7px 10px; border-radius: 4px;
  background: #1d2228; color: #fff; font: 400 13px var(--vp-sans); border: 1px solid #2b3139; }
#vp-side .vp-cherche input::placeholder{ color: #77818d; }
#vp-side .vp-cherche input:focus{ border-color: #4f97d3; }

#vp-side .vp-nav{ flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
#vp-side .vp-nav::-webkit-scrollbar{ width: 6px; } #vp-side .vp-nav::-webkit-scrollbar-thumb{ background: #2b3139; border-radius: 3px; }

/* Les rubriques : une ligne noire, et sous elle la liste des outils sur
   fond blanc — la grammaire exacte du menu de Nextore. */
#vp-side .vp-rub-tete{ all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 16px; color: var(--vp-side-txt); font-weight: 600; font-size: 12.5px; border-bottom: 1px solid #1d2228; }
#vp-side .vp-rub-tete:hover{ background: #1a1f25; }
#vp-side .vp-rub-tete:focus-visible{ outline: 2px solid #6fb0e6; outline-offset: -2px; }
#vp-side .vp-rub-tete .vp-chev{ margin-left: auto; width: 13px; height: 13px; color: var(--vp-side-dim); transition: transform .15s; }
#vp-side .vp-rub.ouverte .vp-rub-tete .vp-chev{ transform: rotate(90deg); }
#vp-side .vp-rub.active > .vp-rub-tete{ background: var(--vp-blue); color: #fff; border-bottom-color: var(--vp-blue); }
#vp-side .vp-rub.active > .vp-rub-tete .vp-chev{ color: #dbe9f5; }
#vp-side .vp-rub-corps{ display: none; background: #fff; }
#vp-side .vp-rub.ouverte .vp-rub-corps{ display: block; }
#vp-side .vp-it{ display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 18px; color: #26313c; text-decoration: none;
  border-bottom: 1px solid #eceff3; font-size: 13px; }
#vp-side .vp-it svg{ color: #5d6a77; width: 15px; height: 15px; }
#vp-side .vp-it:hover{ background: #eef4fa; }
#vp-side .vp-it.ici{ background: #1b2026; color: #fff; font-weight: 600; }
#vp-side .vp-it.ici svg{ color: #fff; }
#vp-side .vp-it:focus-visible{ outline: 2px solid var(--vp-blue); outline-offset: -2px; }
#vp-side .vp-it .vp-note{ margin-left: auto; font-size: 10px; font-weight: 600; color: var(--vp-orange); background: var(--vp-orange-soft);
  border-radius: 3px; padding: 1px 5px; }
#vp-side .vp-it.ici .vp-note{ background: #3a3f46; color: #f5d39b; }
#vp-side button.vp-it{ all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 18px; color: #26313c; border-bottom: 1px solid #eceff3; font-size: 13px; }
#vp-side button.vp-it:hover{ background: #eef4fa; }
#vp-side .vp-boutiques{ display: none; background: #f6f8fa; padding: 4px 0 6px; border-bottom: 1px solid #eceff3; }
#vp-side .vp-boutiques.on{ display: block; }
#vp-side .vp-boutiques a{ display: block; padding: 5px 14px 5px 44px; color: #2f3b47; text-decoration: none; font-size: 12.5px; }
#vp-side .vp-boutiques a:hover{ background: #e8f0f8; color: var(--vp-blue-h); }
#vp-side .vp-boutiques .vp-boutiques-tete{ padding: 4px 14px 4px 44px; font-size: 11px; color: var(--vp-text-3); }
#vp-side .vp-vide{ padding: 16px; color: var(--vp-side-dim); font-size: 12.5px; }
#vp-side .vp-cache{ display: none !important; }

#vp-side .vp-pied{ border-top: 1px solid #23282f; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; background: #0d1013; }
#vp-side .vp-moi{ display: flex; align-items: center; gap: 9px; min-width: 0; }
#vp-side .vp-moi .vp-av{ width: 28px; height: 28px; border-radius: 50%; background: #23282f; display: flex; align-items: center;
  justify-content: center; color: #cfd6dd; flex: none; }
#vp-side .vp-moi span{ min-width: 0; display: flex; flex-direction: column; }
#vp-side .vp-moi b{ font-weight: 600; font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vp-side .vp-moi small{ font-size: 11px; color: var(--vp-side-dim); }
#vp-side label{ all: unset; font-size: 11.5px; color: var(--vp-side-dim); }
#vp-side .vp-vue{ display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 8px; font-size: 11.5px; color: var(--vp-side-dim); }
#vp-side .vp-vue select{ color-scheme: dark; min-width: 0; width: 100%; font: 500 12px var(--vp-sans); color: #fff; background: #1d2228;
  border: 1px solid #2b3139; border-radius: 4px; padding: 4px 6px; }
#vp-side .vp-vue select:focus{ border-color: #4f97d3; outline: none; }
#vp-side .vp-vue.vp-ailleurs select{ border-color: #c98a1d; background: #2a2114; }
#vp-side .vp-sortir{ all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--vp-side-dim); font-size: 12px; padding: 3px 0; }
#vp-side .vp-sortir:hover{ color: #fff; }
#vp-side .vp-sortir:focus-visible{ outline: 2px solid #6fb0e6; }

/* Le bandeau de page : le nom de l'outil, toujours au même endroit. */
#vp-bandeau{ display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; min-height: 52px; box-sizing: border-box;
  padding: 10px 24px; background: var(--vp-surface); border-bottom: 1px solid var(--vp-border); font-family: var(--vp-sans); }
#vp-bandeau .vp-b-ico{ width: 30px; height: 30px; border-radius: 6px; background: var(--vp-blue-soft); color: var(--vp-blue);
  display: flex; align-items: center; justify-content: center; flex: none; }
#vp-bandeau .vp-b-ico svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#vp-bandeau .vp-b-txt{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
#vp-bandeau h1.vp-b-nom{ margin: 0; font: 600 17px/1.2 var(--vp-sans); color: var(--vp-text); letter-spacing: -.01em; }
#vp-bandeau .vp-b-desc{ font-size: 12.5px; color: var(--vp-text-3); margin-top: 1px; }
#vp-bandeau .vp-b-vue{ font-size: 12px; font-weight: 600; color: var(--vp-orange); background: var(--vp-orange-soft);
  border: 1px solid #f1d4a4; border-radius: 4px; padding: 4px 9px; }
#vp-bandeau .vp-b-vue a{ color: inherit; margin-left: 8px; font-weight: 500; }
#vp-bandeau .vp-b-vue-note{ font-weight: 400; }
@media (max-width: 900px){ #vp-bandeau .vp-b-vue-note{ display: none; } }
@media (max-width: 700px){
  #vp-bandeau{ padding: 8px 12px; min-height: 46px; }
  #vp-bandeau .vp-b-desc{ display: none; }
  #vp-bandeau h1.vp-b-nom{ font-size: 16px; }
  /* La vue « voir comme » passe sous le nom : côte à côte, elle l'écrasait. */
  #vp-bandeau .vp-b-vue{ flex-basis: 100%; box-sizing: border-box; }
}

/* Le bouton Menu : sur téléphone, et quand la barre est repliée. */
#vp-fab{ all: unset; box-sizing: border-box; position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 36;
  display: none; align-items: center; gap: 8px; cursor: pointer; background: var(--vp-side-bg); color: #fff; border-radius: 999px;
  padding: 10px 15px; font: 600 13px var(--vp-sans); box-shadow: 0 6px 20px rgba(16,24,40,.28); }
#vp-fab svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#vp-fab:hover{ background: #1f252c; color: #fff; }
#vp-fab:focus-visible{ outline: 2px solid #6fb0e6; }
html.vp-menu #vp-fab{ display: inline-flex; }
@media (min-width: 1080px){ html.vp-menu:not(.vp-replie) #vp-fab{ display: none; } }
html.vp-tiroir #vp-fab{ display: none; }
#vp-voile{ position: fixed; inset: 0; z-index: 2147482500; background: rgba(15,20,26,.45); display: none; }
html.vp-tiroir #vp-voile{ display: block; }

@media print{ #vp-side, #vp-fab, #vp-voile, #vp-bandeau{ display: none !important; } html.vp-menu{ padding-left: 0 !important; } }

/* ════════════════════════════════════════════════════════════════════════
   LES BRIQUES COMMUNES — à employer telles quelles, ou à recopier dans les
   règles propres d'un outil : c'est ce « vocabulaire » qui fait que tous
   les outils se ressemblent.
   ════════════════════════════════════════════════════════════════════════ */
.vp-page{ max-width: var(--vp-max); padding: var(--vp-pad); box-sizing: border-box; }

.vp-carte{ background: var(--vp-surface); border: 1px solid var(--vp-border); border-radius: var(--vp-r-lg);
  box-shadow: var(--vp-ombre); padding: 16px 18px; }
.vp-carte-titre{ font: 600 15px/1.3 var(--vp-sans); color: var(--vp-text); margin: 0; }
.vp-sur{ font: 600 11px/1.3 var(--vp-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--vp-text-3); }
.vp-discret{ color: var(--vp-text-3); font-size: 12.5px; }

.vp-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none;
  font: 600 13px/1.2 var(--vp-sans); padding: 7px 14px; border-radius: var(--vp-r); border: 1px solid var(--vp-border-2);
  background: var(--vp-surface); color: var(--vp-text); }
.vp-btn:hover{ background: var(--vp-surface-2); border-color: #b3bcc7; }
.vp-btn:disabled{ opacity: .5; cursor: not-allowed; }
.vp-btn-bleu{ background: var(--vp-blue); border-color: var(--vp-blue); color: #fff; }
.vp-btn-bleu:hover{ background: var(--vp-blue-h); border-color: var(--vp-blue-h); }
.vp-btn-rouge{ background: var(--vp-red); border-color: var(--vp-red); color: #fff; }
.vp-btn-petit{ font-size: 12px; padding: 4px 10px; }

.vp-champ{ font: 400 14px var(--vp-sans); color: var(--vp-text); background: var(--vp-surface); border: 1px solid var(--vp-border-2);
  border-radius: var(--vp-r); padding: 7px 10px; }
.vp-champ:focus{ outline: none; border-color: var(--vp-blue); box-shadow: 0 0 0 3px rgba(47,122,184,.16); }

.vp-table{ width: 100%; border-collapse: collapse; font-size: 13px; background: var(--vp-surface); }
.vp-table th{ background: var(--vp-blue); color: #fff; font-weight: 600; font-size: 12px; text-align: left; padding: 8px 10px; white-space: nowrap; }
.vp-table td{ padding: 7px 10px; border-bottom: 1px solid #e6eaef; }
.vp-table tbody tr:nth-child(even) td{ background: #fafbfc; }
.vp-table tbody tr:hover td{ background: #eef4fa; }

.vp-kpi{ background: var(--vp-surface); border: 1px solid var(--vp-border); border-radius: var(--vp-r-lg); padding: 12px 14px; }
.vp-kpi .vp-sur{ margin-bottom: 4px; }
.vp-kpi .vp-v{ font: 600 24px/1.15 var(--vp-sans); color: var(--vp-text); letter-spacing: -.01em; }
.vp-kpi .vp-u{ font-size: 13px; font-weight: 500; color: var(--vp-text-3); }

.vp-tag{ display: inline-flex; align-items: center; gap: 4px; font: 600 11px/1.3 var(--vp-sans); padding: 2px 7px; border-radius: 3px;
  background: var(--vp-surface-3); color: var(--vp-text-2); }
.vp-tag.ok{ background: var(--vp-green-soft); color: var(--vp-green); }
.vp-tag.ko{ background: var(--vp-red-soft); color: var(--vp-red); }
.vp-tag.att{ background: var(--vp-orange-soft); color: var(--vp-orange); }
.vp-tag.info{ background: var(--vp-blue-soft); color: var(--vp-blue); }

.vp-alerte{ background: var(--vp-blue-soft); border: 1px solid #c4dcef; border-left: 3px solid var(--vp-blue); border-radius: var(--vp-r);
  padding: 10px 14px; font-size: 13px; color: var(--vp-text); }
.vp-alerte.att{ background: var(--vp-orange-soft); border-color: #f1d4a4; border-left-color: #d98a1c; }
.vp-alerte.ko{ background: var(--vp-red-soft); border-color: #f0c3bd; border-left-color: var(--vp-red); }
.vp-alerte.ok{ background: var(--vp-green-soft); border-color: #bfe3cd; border-left-color: var(--vp-green); }

.vp-seg{ display: inline-flex; border: 1px solid var(--vp-border-2); border-radius: var(--vp-r); overflow: hidden; background: var(--vp-surface); }
.vp-seg button{ all: unset; cursor: pointer; font: 500 12.5px var(--vp-sans); padding: 6px 12px; color: var(--vp-text-2); border-right: 1px solid var(--vp-border); }
.vp-seg button:last-child{ border-right: 0; }
.vp-seg button[aria-pressed="true"], .vp-seg button.on{ background: var(--vp-blue); color: #fff; }