:root {
  /* Accent orange/rouille (revenu le 07/09/2026 : le bleu essaye plus tot le meme jour est
     abandonne, Adam voulait la couleur d'origine). Nodex applique par ailleurs le "PIQA Apps
     Design System" partage entre les 8 applis internes Catalogue (echelle d'espacement, rayons,
     ombres, couleurs de statut ok/warn/danger/info -- voir plus bas) : chaque appli garde son
     propre accent au-dessus de ce socle commun, l'orange est celui de Nodex, comme le cyan est
     celui de StockPilot. --gradient-accent sert aux boutons primaires et au mark du logo, pour le
     petit effet dégradé sans l'imposer partout (une bordure/accent en aplat reste plus lisible sur
     un tableau dense). */
  /* Couleurs du portail PIQA (beta.piqa.fr, 12/10/2026, demande d'Adam : « cale toi sur les couleurs
     de beta », meme design partout pour que les SM ne soient pas perdus entre les apps). */
  --color-bg: #f3e6d5;
  --color-sidebar: #f5f7f6;
  --color-surface: #ffffff;
  --color-surface-alt: #eef1f0;
  --color-border: #e6e9e8;
  --color-text: #1c1f23;
  /* Retour d'Adam le 11/09/2026 : l'ancien #6d6259 (contraste 5.93:1, deja AA) etait trouve trop
     pale -- un premier essai en alias complet sur --color-text (noir plein) a ete teste puis
     juge trop uniforme ("tu peux pas allier les deux ?") : garde une nuance entre texte principal
     et secondaire, mais nettement plus foncee qu'avant. #473e37 = mi-chemin entre l'ancien gris et
     --color-text, contraste 10.5:1 sur fond blanc (confirme "reste sur le milieu"). */
  --color-muted: #454b52;
  --color-primary: #0043f7;
  --color-primary-hover: #0036c9;
  --color-primary-soft: #e6edff;
  /* Cible du texte blanc pose PAR-DESSUS (avatar, badge, bouton, mark du logo) : plus sombre que
     --color-primary expres, et IDENTIQUE dans les deux themes -- --color-primary lui-meme reste
     plus clair en dark, sert de TEXTE sur fond sombre ; plus sombre en light, sert de texte sur
     fond clair -- jamais pose en fond plein derriere du texte blanc. */
  --color-primary-strong: #0043f7;
  --gradient-accent: linear-gradient(135deg, #2563ff 0%, #0036c9 100%);

  /* Couleurs de statut : valeurs alignees sur le "PIQA Apps Design System" partage (--ok/--warn/
     --danger/--info de la charte StockPilot) pour rester coherent visuellement avec les autres
     applis de l'equipe Catalogue, sous les noms deja utilises par Nodex (pas de renommage). */
  --color-success-bg: #ecfdf3;
  --color-success-text: #15803d;
  --color-warning-bg: #fffbeb;
  --color-warning-text: #b45309;
  --color-error-bg: #fff1f2;
  --color-error-text: #dc2626;
  --color-info-bg: #dbeafe;
  --color-info-text: #1e40af;

  /* Echelle d'espacement partagee (PIQA Apps Design System) : reservee aux nouveaux ecarts, les
     blocs existants gardent leurs valeurs en pixels (voir la charte StockPilot, meme logique). */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Echelle de rayons partagee. --radius reste le nom historique de Nodex (14px, tres utilise) ;
     --r en est un alias pour rester compatible avec la charte. */
  --rx: 7px;
  --radius-sm: 9px;
  --rs: var(--radius-sm);
  --r-nav: 11px;
  --radius: 14px;
  --r: var(--radius);
  --r-card: 16px;
  --r-modal: 20px;
  --r-empty: 22px;
  --r-login: 28px;
  --r-pill: 999px;

  /* Ombres partagees, identiques dans les deux themes (choix volontaire de la charte : les
     ombres ne se foncent pas en sombre). */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow: var(--shadow-sm);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.25);

  --sidebar-width: 220px;
  --sidebar-width-collapsed: 64px;
}

[data-theme="dark"] {
  --color-bg: #111112;
  --color-sidebar: #19191a;
  --color-surface: #232324;
  --color-surface-alt: #2a2a2b;
  --color-border: #303033;
  --color-text: #f4f4f5;
  /* Meme raisonnement que le theme clair ci-dessus -- #cbc6c2 = mi-chemin entre l'ancien #a19a93
     et --color-text (#f4f2f0), contraste 10.7:1 sur fond sombre. */
  --color-muted: #c4c4cc;
  --color-primary: #3b74ff;
  --color-primary-hover: #5b8bff;
  --color-primary-soft: rgba(3, 76, 249, .22);
  --color-primary-strong: #034cf9;
  --gradient-accent: linear-gradient(135deg, #2563ff 0%, #034cf9 100%);
  --color-success-bg: #0d2a1a;
  --color-success-text: #4ade80;
  --color-warning-bg: #2d1f08;
  --color-warning-text: #fbbf24;
  --color-error-bg: #2d1515;
  --color-error-text: #f87171;
  --color-info-bg: #1e3a8a;
  --color-info-text: #93c5fd;
}

* { box-sizing: border-box; }

body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { user-select: none; }

body {
  margin: 0;
  /* "Segoe UI Variable" en tete (Windows 11, poste d'Adam) : rendu sensiblement plus fin que
     "Segoe UI" (Windows 10) au meme poids -- repli automatique et invisible sur un autre OS/poste,
     voir la conversation du 07/09/2026. */
  font-family: "Segoe UI Variable", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Le changement de theme (clair/sombre) fondu au lieu d'un saut brut de couleur -- voir
     theme-toggle-btn dans shell.js, qui bascule l'attribut data-theme sur <html>. */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Coquille de l'app : sidebar + topbar --- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-sidebar);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease;
  position: sticky;
  top: 0;
  /* min-height, pas height : une page de contenu principal plus haute qu'un ecran (ex. le
     graphique OMP scope avec 30+ lignes) faisait rester le fond de la sidebar a 100vh pile,
     laissant un grand vide en dessous a partir de la, jusqu'au bas de la page -- voir la
     conversation du 09/09/2026. Avec min-height, la sidebar s'etire aussi loin que le reste
     (align-items:stretch par defaut sur .app-shell), tout en restant "collee" en haut de l'ecran
     grace a position:sticky pendant le defilement.*/
  min-height: 100vh;
}
.sidebar.collapsed { width: var(--sidebar-width-collapsed); }

/* Aucune adaptation automatique de la sidebar pour un ecran etroit avant ca (retour d'Adam le
   18/09/2026, "verifie que ça tourne bien sur mobile") -- sur un telephone (~375px), la sidebar
   fixe a 220px (voir .sidebar plus haut, flex-shrink:0) prenait plus de la moitie de l'ecran, le
   contenu principal se retrouvant coince dans le reste. Force le mode reduit (icones seules, meme
   rendu que .collapsed) en dessous de 640px, quel que soit l'etat choisi sur desktop -- !important
   necessaire pour passer devant un style inline pose par le bouton reduire/agrandir ou le
   redimensionnement a la souris (voir shell.js), qui ne connaissent pas cette regle. */
@media (max-width: 640px) {
  .sidebar { width: var(--sidebar-width-collapsed) !important; }
  .sidebar .sidebar-logo span.logo-text,
  .sidebar .sidebar-nav-section-label,
  .sidebar-nav-item span.label,
  .sidebar-nav-item .badge,
  .sidebar .sidebar-piqa span.label { display: none; }
  .sidebar .sidebar-piqa { justify-content: center; padding: 5px 0; }
  .sidebar-resize-handle { display: none; }
}

.sidebar-logo {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 20px; font-weight: 700; font-size: 16px;
  white-space: nowrap; overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}
.sidebar-logo .logo-mark {
  width: 34px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-logo .logo-mark svg { width: 34px; height: auto; }
.sidebar.collapsed .sidebar-logo span.logo-text { display: none; }

.sidebar-nav { list-style: none; margin: 0; padding: 8px 10px; flex: 1; overflow-y: auto; }
.sidebar-nav-section { margin-bottom: 10px; }
.sidebar-nav-section-label {
  margin: 16px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-nav-section:first-child .sidebar-nav-section-label { margin-top: 6px; }
.sidebar.collapsed .sidebar-nav-section-label { display: none; }
.sidebar-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r-nav);
  color: var(--color-muted); text-decoration: none; font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap; overflow: hidden; margin-bottom: 3px;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
/* Leger decalage vers la droite au survol -- retour tactile discret plutot qu'un simple
   changement de couleur instantane (voir la conversation du 07/09/2026). */
.sidebar-nav-item:hover { background: var(--color-surface-alt); color: var(--color-text); transform: translateX(2px); }
.sidebar-nav-item.active { background: var(--color-primary-soft); color: var(--color-primary); }
.sidebar-nav-item .icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease; }
.sidebar-nav-item:hover .icon { transform: scale(1.1); }
.sidebar.collapsed .sidebar-nav-item span.label { display: none; }
.sidebar-nav-item .badge {
  margin-left: auto; background: var(--color-primary-strong); color: #fff; border-radius: var(--r-pill);
  font-size: 11px; padding: 1px 7px; font-weight: 700;
}
.sidebar.collapsed .sidebar-nav-item .badge { display: none; }

/* Lien "Revenir au portail" PIQA (08/10/2026), sous le dernier onglet. Le texte demarre au meme
   endroit que celui des onglets : 7px + anneau 32px + 5px = 14px + icone 18px + 12px = 44px.
   Meme hauteur aussi (5px + 32px + 5px ~ 10px + ligne de texte + 10px). */
.sidebar-piqa {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 7px; border-radius: var(--r-nav);
  color: var(--color-muted); text-decoration: none; font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden;
  transition: color 0.15s ease;
}
.sidebar-piqa:hover { color: var(--color-text); text-decoration: none; }
.sidebar-piqa:focus-visible { outline: 2px solid #0057e7; outline-offset: 2px; }
.sidebar-piqa .piqa-ring { width: 32px; height: 32px; flex-shrink: 0; transition: transform 0.2s ease; }
.sidebar-piqa:hover .piqa-ring { transform: scale(1.08); }
.sidebar.collapsed .sidebar-piqa { justify-content: center; padding: 5px 0; }
.sidebar.collapsed .sidebar-piqa span.label { display: none; }

.sidebar-collapse-btn {
  margin: 8px; background: transparent; color: var(--color-muted); border: 1px solid var(--color-border);
  padding: 8px; font-size: 13px; font-weight: 500;
}
.sidebar-collapse-btn:hover { background: var(--color-surface-alt); }

.sidebar-resize-handle {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.active { background: var(--color-primary); }
.sidebar.collapsed + .sidebar-resize-handle { display: none; }

.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; border-bottom: 1px solid var(--color-border); background: var(--color-surface);
}
.topbar-title {
  font-size: 20px; font-weight: 700; margin: 0; padding-left: 16px; letter-spacing: -0.01em;
  border-left: 4px solid var(--color-primary);
}
.topbar-actions { display: flex; align-items: center; gap: 12px; }

.icon-btn {
  background: transparent; border: 1px solid var(--color-border); color: var(--color-text);
  width: 38px; height: 38px; border-radius: var(--radius); margin: 0;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.icon-btn:hover { background: var(--color-surface-alt); }
.icon-btn svg, .sidebar-nav-item .icon svg, .sidebar-collapse-btn svg {
  width: 18px; height: 18px; display: block;
}

/* button.user-chip (14/09/2026) : etait un <div>, devenu <button> pour porter le menu Administration
   -- resets par defaut du navigateur sur un <button> (fond, police, curseur) neutralises ici.
   height: 38px explicite (retour d'Adam le 14/09/2026, "fait en sorte que ça soit aligné") --
   sans ca la hauteur depend du contenu (avatar + texte) et peut deriver de quelques pixels par
   rapport aux .icon-btn voisins (38px fixe) selon le rendu du navigateur -- alignement garanti.
   TROUVE via DevTools (retour d'Adam) : la vraie cause n'etait pas la hauteur mais `button {
   margin-top: 20px; ... }` plus bas dans ce fichier (reset generique pense pour les boutons de
   formulaire, espaces du champ au-dessus) qui s'appliquait aussi a ce bouton -- .icon-btn voisin
   le neutralise deja avec `margin: 0`, jamais fait ici. C'etait ca qui poussait le bouton vers le
   bas (confirme par Adam : 131.45 x 57.99 mesure au survol DevTools = 38px de bouton + 20px de
   marge top = 58px, pas un probleme de hauteur du bouton lui-meme). */
.user-chip { display: flex; align-items: center; gap: 8px; height: 38px; margin: 0; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--color-surface); font-family: inherit; color: inherit; }
button.user-chip:not(:disabled) { cursor: pointer; transition: background-color 0.15s ease; }
button.user-chip:not(:disabled):hover { background: var(--color-surface-alt); }
button.user-chip:disabled { cursor: default; }
.user-avatar {
  width: 26px; height: 26px; border-radius: 999px; background: var(--color-primary-strong);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}

.page-content { flex: 1; padding: 32px; }
.page-layout { display: flex; align-items: flex-start; }
.page-main { flex: 1; min-width: 280px; }
.side-panel { width: 300px; flex-shrink: 0; min-width: 220px; max-width: 560px; }

.panel-resize-handle {
  width: 24px;
  flex-shrink: 0;
  align-self: stretch;
  cursor: col-resize;
  display: flex;
  justify-content: center;
}
.panel-resize-handle::before {
  content: '';
  width: 4px;
  border-radius: 2px;
  background: var(--color-border);
}
.panel-resize-handle:hover::before,
.panel-resize-handle.active::before { background: var(--color-primary); }

@media (max-width: 900px) {
  .page-layout { flex-direction: column; }
  .side-panel { width: 100% !important; max-width: none; }
  .panel-resize-handle { display: none; }
}

/* --- Composants --- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-card);
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: var(--shadow);
}
/* Cartes cliquables de l'ecran d'accueil "Demande SM" (voir demande-sm.js#renderHub) -- affordance
   de survol/focus sur un simple <button>, sans reprendre le style bouton pilule global. */
.sm-hub-card { transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; }
.sm-hub-card:hover, .sm-hub-card:focus-visible { border-color: var(--color-primary) !important; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sm-hub-card:active { transform: translateY(0); }
/* Signature typographique des titres de bloc dans le PIQA Apps Design System (charte StockPilot) :
   majuscules, 11px, gras, espacement de lettres 0,07em -- reprise telle quelle, la barre d'accent
   a gauche reste une touche propre a Nodex, non couverte par la charte. */
.card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 16px;
  padding-left: 10px;
  border-left: 3px solid var(--color-primary);
}

label { display: block; font-weight: 600; margin: 16px 0 4px; font-size: 14px; }
label:first-child { margin-top: 0; }

input[type="text"], input[type="file"], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Champs de texte : on ne les agrandit qu'en hauteur, jamais en largeur (retour d'Adam du 06/10/2026 :
   la poignee d'agrandissement ne doit jamais passer sur un bouton, "peu importe ou"). !important :
   s'applique aussi aux champs qui ont leur propre style dans un ecran. */
textarea {
  resize: vertical !important;
  max-width: 100% !important;
  box-sizing: border-box;
  min-width: 0;
}
/* Halo doux au focus (remplace le contour par defaut du navigateur, plus abrupt). */
input[type="text"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.help-text { font-size: 12px; color: var(--color-muted); margin-top: 6px; line-height: 1.5; }

.radio-group { display: flex; gap: 16px; }
.radio-group label { font-weight: 400; display: flex; align-items: center; gap: 6px; margin: 0; }

/* Carte de choix de role a la connexion (voir index.html#role-select-card) -- meme esprit que
   .sm-hub-card (demande-sm.js) : le radio natif reste present (accessibilite/clavier) mais masque
   visuellement, le <label> entier joue la carte cliquable. La classe .selected est posee par
   app.js sur le "change" du groupe de radios. */
.role-card { margin: 0; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--r-card); background: var(--color-surface-alt); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.role-card:hover { border-color: var(--color-primary); }
.role-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-soft); }
.role-card input:focus-visible ~ * { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Choix de l'equipe (BU) a la connexion (29/09/2026) : memes cartes que le role, plus compactes. */
.bu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.bu-grid .role-card { gap: 4px; padding: 12px 14px; }

button {
  background: var(--gradient-accent);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
/* Leger soulevement au survol, retour "presse" au clic -- meme esprit tactile que les items du
   menu (voir la conversation du 07/09/2026). transform: none explicite sur :active pour annuler
   le hover pendant l'appui, plutot que de laisser les deux regles s'additionner. */
button:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-md); }
button:active { transform: translateY(0) scale(0.98); box-shadow: none; }
button:disabled { filter: grayscale(0.4) opacity(0.6); cursor: default; }
button:disabled:hover { transform: none; box-shadow: none; }
button.secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
button.secondary:hover { filter: none; background: var(--color-primary-soft); }
button.small { padding: 5px 14px; font-size: 12px; margin-top: 0; }
button.secondary.copied { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-text); }
button.secondary.assigned { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-text); }

/* Plateau "Réorganiser une catégorie" (Merch) : densite par defaut trop fine pour un usage
   rapide/tactile sur ce plateau precis (retour d'Adam le 10/09/2026) -- images, boutons et nom de
   produit agrandis, boutons "copier" pour sku/nom, nom cliquable pour cocher/decocher sans devoir
   viser la petite case a cocher. */
.merch-row-btn { padding: 8px 16px; font-size: 13px; margin-top: 0; }
.merch-product-name { font-size: 16px; font-weight: 600; cursor: pointer; }
.merch-product-name:hover { text-decoration: underline; }

.feedback { padding: 12px 16px; border-radius: var(--radius); margin-top: 16px; font-size: 14px; }
.feedback.success { background: var(--color-success-bg); color: var(--color-success-text); }
.feedback.warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.feedback.error { background: var(--color-error-bg); color: var(--color-error-text); }

.hidden { display: none !important; }

.link-btn {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--color-primary); text-decoration: underline; cursor: pointer;
  font: inherit; font-size: 12px;
  transition: color 0.15s ease;
}
.link-btn:hover { color: var(--color-primary-hover); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
th {
  color: var(--color-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-surface-alt);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}
tbody tr { transition: background-color 0.12s ease; }
tbody tr:hover { background: var(--color-surface-alt); }
tbody tr:last-child td { border-bottom: none; }
/* Etats communs a tout Nodex (24/09/2026, voir public/js/status-ui.js) : vert = OK, orange = a
   verifier, gris = pas concerne. */
.status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: 12px; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; }
.status-ok { background: var(--color-success-bg); color: var(--color-success-text); }
.status-warn { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-off { color: var(--color-muted); text-decoration: line-through; border-color: var(--color-border); }
.status-na { background: var(--color-surface-alt); color: var(--color-muted); }
.status-value { background: var(--color-surface-alt); color: var(--color-text); border-color: var(--color-border); white-space: normal; display: inline-block; max-width: 100%; }
/* "voir plus (+N)" des pastilles de filtre (voir status-ui.js#filterChips, 25/09/2026). */
.status-value .chip-more-btn { font-size: 11px; padding: 0; margin: 0; white-space: nowrap; }
.status-legend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 16px; }
.status-card { border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 20px; margin-bottom: 14px; background: var(--color-surface); }
.status-card-label { font-size: 12px; color: var(--color-muted); margin: 14px 0 8px; }
.status-card-label:first-child { margin-top: 0; }
.check-row { padding: 10px 0; border-top: 1px solid var(--color-border); }
.check-row:first-of-type { border-top: none; padding-top: 0; }
.check-row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.check-row-detail { margin-top: 8px; font-size: 13px; color: var(--color-muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Plateau Merch : produit + sa ligne "Tailles" (24/09/2026) forment un seul bloc visuel. */
tbody tr:has(+ tr[data-sizes-row]) td { border-bottom: none; }
tbody tr[data-sizes-row]:hover { background: transparent; }
tbody tr.row-error { background: var(--color-error-bg); box-shadow: inset 3px 0 0 var(--color-error-text); }
tbody tr.row-error:hover { background: var(--color-error-bg); }

/* Ligne ciblee depuis une notification (voir nav-highlight.js) : meme principe visuel que
   row-error mais en bleu/info, disparait tout seul apres quelques secondes (voir highlightRow). */
tbody tr.row-highlighted,
.card.row-highlighted {
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-primary);
  transition: background 2s ease, box-shadow 2s ease;
}
tbody tr.row-highlighted:hover { background: var(--color-primary-soft); }

/* Ligne "non lue" dans la page Notifications (voir views/notifications-inbox.js) : persistant
   contrairement a row-highlighted ci-dessus (qui disparait tout seul apres quelques secondes). */
tbody tr.row-unread { font-weight: 600; }
tbody tr.row-unread td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }

/* "Nouvelle demande" (Cost Killer) passee en carte par reference le 18/09/2026 (retour d'Adam,
   "ça m'a l'air brouillon" compare aux formulaires SM) -- meme rouge/inset que la variante tbody
   tr.row-error ci-dessus, juste sur .manual-row (un <div class="card">, pas une ligne de tableau). */
.manual-row.row-error { background: var(--color-error-bg); box-shadow: inset 3px 0 0 var(--color-error-text); }
.manual-row.row-error:hover { background: var(--color-error-bg); }

table code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
}

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pill-blue { background: var(--color-primary-soft); color: var(--color-primary); }
.pill-neutral { background: var(--color-surface-alt); color: var(--color-muted); border: 1px solid var(--color-border); }
.pill-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.pill-error { background: var(--color-error-bg); color: var(--color-error-text); }
.pill-success { background: var(--color-success-bg); color: var(--color-success-text); }

/* Suivi de "Mes demandes" façon commande (voir mes-demandes.js#stepTracker) -- remplace l'ancienne
   pastille de statut plate par une vraie ligne d'etapes, dans la meme cellule de tableau. */
.step-tracker { display: flex; align-items: flex-start; min-width: 150px; }
.step-tracker-step { display: flex; flex-direction: column; align-items: center; flex: 1; }
.step-tracker-row { display: flex; align-items: center; width: 100%; }
.step-tracker-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; box-sizing: border-box; }
.step-tracker-dot.done { background: var(--color-primary); border-color: var(--color-primary); }
.step-tracker-dot.current { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.step-tracker-dot svg { width: 9px; height: 9px; }
.step-tracker-line { flex: 1; height: 2px; background: var(--color-border); margin: 0 2px; }
.step-tracker-line.done { background: var(--color-primary); }
.step-tracker-label { font-size: 10px; color: var(--color-muted); margin-top: 4px; text-align: center; line-height: 1.3; }
.step-tracker-label.current { color: var(--color-primary); font-weight: 700; }

.jobs-tray { position: relative; }
.jobs-tray-btn { position: relative; }
.jobs-tray-dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-primary); border: 2px solid var(--color-surface);
}
.jobs-tray-dot.error { background: var(--color-error-text); }
.jobs-tray-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: min(420px, 60vh);
  overflow-y: auto; z-index: 30; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px;
}
.jobs-tray-panel.hidden { display: none; }
.jobs-tray-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jobs-tray-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); padding: 6px 8px; }
.jobs-tray-footer-link { display: block; text-align: center; padding: 8px; margin-top: 4px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-primary); }
.jobs-tray-footer-link:hover { background: var(--color-surface-alt); }
.jobs-tray-item { padding: 8px; border-radius: 6px; transition: background-color 0.15s ease; }
.jobs-tray-item:hover { background: var(--color-surface-alt); }
.jobs-tray-item-clickable { cursor: pointer; }
.jobs-tray-item-clickable:hover { background: var(--color-primary-soft); }
.jobs-tray-item-unread { box-shadow: inset 3px 0 0 var(--color-primary); }
.jobs-tray-item-unread .jobs-tray-item-label { font-weight: 700; }
.jobs-tray-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jobs-tray-item-label { font-size: 13px; font-weight: 600; }
.jobs-tray-item-meta { font-size: 11px; color: var(--color-muted); margin-top: 2px; }
.jobs-tray-item-error { font-size: 11px; color: var(--color-error-text); margin-top: 4px; }

.rundeck-job-item { padding: 10px 8px; border-radius: 6px; }
.rundeck-job-item:hover { background: var(--color-surface-alt); }
.rundeck-job-top { display: flex; align-items: center; gap: 8px; }
.rundeck-job-label { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rundeck-job-time { font-size: 11px; color: var(--color-muted); white-space: nowrap; }
.rundeck-job-dismiss {
  border: none; background: transparent; color: var(--color-muted); cursor: pointer; font-size: 12px;
  padding: 2px 4px; line-height: 1; margin: 0;
}
.rundeck-job-dismiss:hover { color: var(--color-error-text); }
.rundeck-job-status { font-size: 12px; font-weight: 600; margin-top: 4px; color: var(--color-success-text); }
.rundeck-job-status.error { color: var(--color-error-text); }

.rundeck-stepper { display: flex; align-items: center; margin-top: 8px; }
.rundeck-step {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-surface-alt); border: 2px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
}
.rundeck-step::after { content: ''; }
.rundeck-step.done { background: var(--color-success-text); border-color: var(--color-success-text); }
.rundeck-step.done::after { content: '✓'; color: #fff; font-size: 10px; font-weight: 700; }
.rundeck-step.error { background: var(--color-error-text); border-color: var(--color-error-text); }
.rundeck-step.error::after { content: '✕'; color: #fff; font-size: 9px; font-weight: 700; }
.rundeck-step-line { flex: 1; height: 2px; background: var(--color-border); margin: 0 2px; }
.rundeck-step-line.done { background: var(--color-success-text); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: 16px; }
.tabs button {
  background: transparent; color: var(--color-muted); border: none; border-bottom: 2px solid transparent;
  border-radius: 0; margin: 0; padding: 10px 14px; font-weight: 600;
  transition: color 0.15s ease, border-color 0.15s ease;
}
/* Style "onglet plat" : pas l'effet de soulevement des autres boutons (voir button:hover plus
   haut), juste la couleur/le trait du dessous qui s'anime. */
.tabs button:hover { transform: none; box-shadow: none; filter: none; color: var(--color-text); }
.tabs button.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Compteur "a traiter" sur un onglet (voir piqa-hub.js) -- une vue d'ensemble doit montrer d'un
   coup d'oeil ou il y a du travail en attente, sans cliquer dans chaque section. */
.tabs-count { display:inline-block; min-width:18px; padding:1px 7px; margin-left:6px; border-radius:999px; background:var(--color-surface-alt); color:var(--color-muted); font-size:11px; font-weight:700; }
.tabs button.active .tabs-count { background:var(--color-primary-soft); color:var(--color-primary); }

#history-pagination button.active { background: var(--color-primary-strong); color: #fff; border-color: var(--color-primary-strong); }

pre.sql-block {
  background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: var(--radius);
  overflow-x: auto; font-size: 12px; white-space: pre-wrap; word-break: break-all;
}

.empty-state { color: var(--color-muted); font-style: italic; padding: 24px 0; text-align: center; }

.stat-box { background: var(--color-surface-alt); border-radius: var(--radius); padding: 16px; }
.stat-box .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); font-weight: 700; }
.stat-box .stat-value { font-size: 30px; font-weight: 700; margin-top: 6px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }

/* Graphique en barres HTML/CSS (voir omp-scope.js) -- pas de librairie externe (zero CDN),
   labels de longueur variable donc plus simple a gerer qu'en SVG positionne a la main. Prend
   toute la largeur de la carte (retour d'Adam le 09/09/2026 : pas de plafond de largeur --
   legende a gauche, longueur/valeur au milieu, regle a droite, sur toute la page). */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-chart-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 44px auto; align-items: center; gap: 10px; }
.bar-chart-label { font-size: 12px; color: var(--color-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-chart-track { background: var(--color-surface-alt); border-radius: var(--radius); height: 18px; overflow: hidden; }
.bar-chart-fill { background: var(--gradient-accent); height: 100%; border-radius: var(--radius); transition: width 0.3s ease; }
.bar-chart-value { font-size: 12px; font-weight: 700; text-align: right; }
.bar-chart-rule-link { font-size: 12px; font-weight: 600; white-space: nowrap; }

.divider-or { text-align: center; color: var(--color-muted); font-size: 12px; margin: 16px 0; }

.type-row { display: flex; align-items: center; gap: 20px; }
.type-row-label { margin: 0; }

/* --- Picker "Pays à exclure" (toggle In/Not in + autocomplete pays) --- */

.pays-widget { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }

.pays-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.pays-toggle { display: flex; gap: 3px; flex-shrink: 0; }
.toggle-btn {
  flex: none;
  margin: 0;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-muted);
  cursor: pointer;
}
.toggle-btn:hover { background: var(--color-surface); }
.toggle-btn.toggle-in.active { background: var(--color-success-text); border-color: var(--color-success-text); color: #fff; }
.toggle-btn.toggle-notin.active { background: var(--color-error-text); border-color: var(--color-error-text); color: #fff; }
/* Variante neutre (ni In/vert ni Not in/rouge) -- sert au choix "Référence produit"/"Famille" par
   ligne sur "Nouvelle demande" (retour d'Adam le 18/09/2026, "je peux très bien faire une demande
   de mpn et une de famille en même temps" -- ce n'etait avant qu'un seul radio global). */
.toggle-btn.toggle-neutral.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.pays-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 3px 6px 3px 10px;
  font-size: 12px;
}
.chip-remove {
  background: transparent;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1;
}
.chip-remove:hover { color: var(--color-error-text); }

/* Variante sans fond/bordure (retour d'Adam le 11/09/2026, editeur de criteres Automatisation --
   voir demande-sm.js#criteriaGroupHtml) : meme structure que .chip, juste un fil de texte simple
   plutot qu'un badge par valeur -- plus lisible pour une longue liste de valeurs. */
.chip-plain { background: transparent; border: none; padding: 0; gap: 3px; }

.chip-all { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: transparent; font-weight: 600; }
.chip-all .chip-remove { color: var(--color-warning-text); }

.chip-error { border-color: var(--color-error-text); box-shadow: inset 0 0 0 1px var(--color-error-text); }

.all-mode .pays-toggle,
.all-mode .pays-autocomplete { display: none; }

.pays-autocomplete { position: relative; flex: 1; min-width: 0; }
/* Dans .pays-row (widget pays complet), le champ de recherche ne doit pas s'etirer pour occuper
   tout l'espace restant une fois les puces passees a la ligne -- retour d'Adam le 18/09/2026
   ("trop gros") sur le plateau "Nouvelle demande" passe en carte pleine largeur, ou le
   flex:1 herite ci-dessus (partage avec les champs Reference/Fournisseur, qui eux doivent
   remplir leur label) laissait le champ de recherche tres large et isole a droite. */
.pays-row .pays-autocomplete { flex: 0 1 220px; }
.pays-search { font-size: 12px; padding: 6px 8px; }
.pays-suggestions {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin: 2px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.pays-suggestions li { padding: 6px 8px; font-size: 12px; border-radius: 4px; cursor: pointer; }
.pays-suggestions li:hover,
.pays-suggestions li.highlighted { background: var(--color-primary-soft); color: var(--color-primary); }
.pays-suggestions li.empty { color: var(--color-muted); cursor: default; }
.pays-suggestions li.empty:hover { background: transparent; }
.pays-suggestions li.suggestion-all { font-weight: 700; border-bottom: 1px solid var(--color-border); border-radius: 0; margin-bottom: 2px; }
.pays-suggestions li.suggestion-preset { color: var(--color-primary); border-bottom: 1px solid var(--color-border); border-radius: 0; }
.pays-suggestions li.suggestion-preset:last-of-type { margin-bottom: 2px; }

/* --- Demandes PIQA : liste + detail --- */

.piqa-split { display: flex; gap: 24px; align-items: flex-start; margin-top: 16px; }
.piqa-list-panel { width: 320px; flex-shrink: 0; max-height: min(600px, 60vh); overflow-y: auto; }
.piqa-detail-panel { flex: 1; min-width: 0; }

.piqa-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.piqa-list-item { padding: 10px 12px; border-radius: var(--radius); cursor: pointer; margin-bottom: 4px; transition: background-color 0.15s ease; }
.piqa-list-item:hover { background: var(--color-surface-alt); }
.piqa-list-item.active { background: var(--color-primary-soft); }
.piqa-list-item-title { font-size: 13px; font-weight: 600; }
.piqa-list-item-meta { font-size: 12px; color: var(--color-muted); margin-top: 2px; }

.piqa-description {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  background: var(--color-surface-alt);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 4px;
}
.piqa-description.collapsed {
  max-height: 110px;
  overflow: hidden;
  position: relative;
}
.piqa-description.collapsed::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--color-surface-alt));
}
.piqa-description-toggle { margin-top: 8px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 21, 34, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 1000;
}

/* Survol de glisser-deposer global (voir app.js) : grise l'ecran des qu'un fichier est glisse sur
   la fenetre, peu importe la vue active -- au-dessus d'un eventuel modal (z-index superieur),
   volontairement non cliquable (pointer-events: none) pour que le drop atteigne toujours la
   fenetre en dessous, jamais cet overlay lui-meme. */
.drop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 21, 34, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none;
}
.drop-overlay-box {
  background: var(--color-surface);
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius);
  padding: 32px 48px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}
/* Zone de depot de fichiers commune (voir public/js/file-dropzone.js, 24/09/2026) : cadre en
   pointilles cliquable, input cache a l'interieur. */
.file-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  margin-top: 10px;
  padding: 28px 16px;
  border: 2px dashed var(--color-border);
  border-radius: var(--r-card, 12px);
  background: var(--color-surface);
  color: var(--color-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.file-dropzone:hover, .file-dropzone:focus-within {
  border-color: var(--color-primary);
  background: var(--color-surface-alt);
}
.file-dropzone svg { color: var(--color-primary); opacity: 0.8; }
.file-dropzone-title { font-size: 14px; color: var(--color-text); }
.file-dropzone-hint { font-size: 12px; }
.file-dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.modal-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.modal-title { font-size: 15px; font-weight: 700; margin: 0; }
.modal-close {
  background: transparent;
  border: none;
  color: var(--color-muted);
  font-size: 16px;
  padding: 4px 8px;
  margin: 0;
  cursor: pointer;
}
.modal-close:hover { color: var(--color-text); background: transparent; }
.modal-body {
  padding: 20px;
  overflow-y: auto;
}
.modal-body .card { margin-bottom: 16px; }
.modal-body .card:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .piqa-split { flex-direction: column; }
  .piqa-list-panel { width: 100%; max-height: 300px; }
}

/* Apercu "façon page catégorie" du plateau Merch (conversation du 10/09/2026, repris d'un kit
   "Merch manuel" d'un collegue -- README : "Prévisualisation façon page catégorie, 4 produits par
   ligne"). Grille de cartes plutot que le tableau dense habituel, pour voir a quoi ressemblera la
   categorie sans avoir a pousser en prod pour verifier. Glisser-depose direct dans la grille,
   reutilise la meme logique que le tableau (voir category-merch-board.js). Affichee dans la modale
   standard de l'app (voir modal.js) plutot qu'un overlay maison -- seule la grille elle-meme est
   specifique, le cadre (fond, panneau, entete, fermeture/Echap) est deja fourni par openModal. */
.merch-preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
.merch-preview-card { border: 1px solid var(--color-border); border-radius: var(--rs); overflow: hidden; background: var(--color-surface); display: flex; flex-direction: column; cursor: grab; }
.merch-preview-card:active { cursor: grabbing; }
.merch-preview-card.dragging { opacity: .4; }
.merch-preview-card.dropbefore { box-shadow: inset 3px 0 0 var(--color-primary); border-color: var(--color-primary); }
.merch-preview-img { position: relative; aspect-ratio: 1 / 1; background: var(--color-surface-alt); display: flex; align-items: center; justify-content: center; }
.merch-preview-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.merch-preview-img .merch-preview-noimg { font-size: 11px; color: var(--color-muted); text-align: center; padding: 0 8px; }
.merch-preview-rank { position: absolute; top: 6px; left: 6px; background: var(--color-text); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 2px 6px; }
.merch-preview-flag { position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 700; border-radius: 5px; padding: 2px 6px; color: #fff; background: var(--color-error-text); }
.merch-preview-body { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 3px; }
.merch-preview-brand { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); }
.merch-preview-name { font-size: 12.5px; line-height: 1.35; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.merch-preview-price { font-size: 14px; font-weight: 700; color: var(--color-text); margin-top: 2px; }
.merch-preview-rowsep { grid-column: 1 / -1; border-top: 1px dashed var(--color-border); margin: 2px 0; font-size: 10px; color: var(--color-muted); padding-top: 4px; }
.merch-preview-dropend { grid-column: 1 / -1; border: 1px dashed var(--color-border); border-radius: var(--rs); color: var(--color-muted); font-size: 11.5px; padding: 14px; text-align: center; }
.merch-preview-dropend.on { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.merch-preview-foot { border-top: 1px solid var(--color-border); margin-top: 16px; padding-top: 10px; font-size: 11px; color: var(--color-muted); line-height: 1.65; }

/* Badge "ambiguite tranchee automatiquement" (conversation du 10/09/2026) : marque un produit
   ajoute automatiquement depuis une reference ambigue, visible en permanence sur sa ligne -- pas
   seulement dans le message transitoire au moment de l'ajout, voir
   category-merch-board.js#resolveAndAddRefs/ambiguousBadge. Par defaut (avertissement) : premier
   candidat retenu sans signal fiable, a verifier. .info (moins alarmant) : famille deja presente
   sur le plateau, resolution fiable. */
.merch-auto-badge { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 5px; padding: 1px 6px; margin-left: 6px; background: var(--color-warning-bg); color: var(--color-warning-text); white-space: nowrap; }
.merch-auto-badge.info { background: var(--color-info-bg); color: var(--color-info-text); }

/* Nombre de ventes (Merch) : mis en avant pour les SM -- chiffre en gras, texte normal (pas grise). */
.sold-count { color: var(--color-text); font-size: 13px; }
.sold-count.sold-none { color: var(--color-muted); }
/* Merch actuel (24/09/2026, option A) : gros chiffre des ventes a gauche de la cellule, cote a cote
   avec stock + tailles pour garder 2 lignes de haut. */
.sold-block { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding-right: 10px; border-right: 1px solid var(--color-border); }
.sold-big { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--color-text); }
.sold-caption { font-size: 10px; line-height: 1.2; color: var(--color-muted); }
.sold-block.sold-none .sold-big { color: var(--color-muted); font-weight: 500; }
/* Panneau "Règles OMP" d'une demande Association cote PIQA (voir public/js/omp-rules-panel.js). */
.omp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.omp-query { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--r-card, 12px); background: var(--color-surface); }
.omp-value-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.omp-rule-card { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--color-surface-alt); border-left: 3px solid var(--color-primary); }
.omp-rule-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.omp-todo { margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--color-primary); border-radius: var(--radius); background: var(--color-surface); font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Panneau Regles OMP epure (12/10/2026, maquette maquettes/regles-omp-epure.html) : etapes numerotees. */
.omp-ask { font-size: 15px; font-weight: 600; margin: 0; }
.omp-step { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--color-primary-soft); font-size: 13px; }
.omp-step p { margin: 0; }
.omp-step-new { background: var(--color-warning-bg); }
.omp-step-done { background: var(--color-success-bg); }
.omp-step-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.omp-step-new .omp-step-num { background: var(--color-warning-text); }
.omp-step-done .omp-step-num { background: var(--color-success-text); }
.omp-step-body { min-width: 0; flex: 1; }
.omp-step-what { font-weight: 600; }
.omp-step-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.omp-step-values { padding: 3px 8px; background: var(--color-surface); border-radius: 6px; font-weight: 600; overflow-wrap: anywhere; }
.omp-value-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.omp-more { margin-top: 10px; font-size: 13px; }
.omp-more > summary { cursor: pointer; color: var(--color-muted); }
.omp-foot { margin: 12px 0 0; font-size: 12px; }
.omp-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 12px; font-size: 13px; margin-top: 8px; }
.omp-kv > span:nth-child(odd) { color: var(--color-muted); }
/* Formulaire SM Association pas a pas (voir public/js/views/association-form.js, 25/09/2026). */
.assoc-q { margin-top: 20px; }
.assoc-q-title { font-weight: 600; margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.assoc-q-title > span:first-child { color: var(--color-primary); }
.assoc-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.assoc-choice { text-align: left; background: var(--color-surface-alt); color: inherit; border: 1px solid var(--color-border); border-radius: var(--r-card, 12px); padding: 12px 14px; margin: 0; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.assoc-choice.on { border: 2px solid var(--color-primary); }
/* Chercheur de valeurs du catalogue (formulaire SM Automatisation, voir public/js/value-searcher.js). */
.value-searcher { margin-top: 6px; padding: 10px 12px; border: 1px dashed var(--color-border); border-radius: var(--radius); background: var(--color-surface-alt); }
/* Plateau Merch : blocs nommes "Suggestions de merch" / "Merch a soumettre" (25/09/2026). */
.cmb-block { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--r-card, 12px); background: var(--color-surface); }
/* Listes Suggestions ventes / Nouveautes : meme gros chiffre, mais en ligne (hauteur de ligne inchangee). */
.sold-big-inline { font-size: 20px; font-weight: 600; line-height: 1; vertical-align: -2px; margin-right: 2px; }
.sold-count.sold-none .sold-big-inline { font-weight: 500; }

/* Suivi de la verification OMP juste apres "Marquer traite" (omp-check-ui.js#followOmpCheck). */
.omp-follow {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  font-size: 13px;
}
/* Formulaire Association : choix Ajouter/Retirer replie en rappel compact une fois fait. */
.assoc-op-summary { display: inline-flex; align-items: center; gap: 12px; padding: 6px 12px; border: 1px solid var(--color-primary); border-radius: var(--radius); font-weight: 600; font-size: 13px; }

/* Formulaire Association v3 (28/09/2026) : choix en pastilles, sous-questions, chips supprimables. */
.assoc-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; }
.assoc-seg button { background: transparent; color: inherit; border: 0; border-radius: 0; padding: 6px 14px; margin: 0; font-size: 13px; cursor: pointer; }
.assoc-seg button.on { background: var(--color-primary); color: #fff; }
.assoc-seg button:disabled { opacity: .45; cursor: not-allowed; }
.assoc-sub-title { font-weight: 600; font-size: 14px; margin: 8px 0 4px; }
.assoc-bulk { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--color-border); border-radius: var(--radius); background: var(--color-surface-alt); }
.assoc-bulk textarea { width: 100%; box-sizing: border-box; }
.status-chip .chip-remove { background: none; border: 0; padding: 0 0 0 4px; margin: 0; color: inherit; opacity: .7; cursor: pointer; font-size: 11px; line-height: 1; }
.status-chip .chip-remove:hover { opacity: 1; }

/* Formulaire Association guide (28/09/2026, maquette association-texte validee) : cartes, texte libre,
   lignes "type + valeur", question "Autre chose ?", resume "C'est bien ca ?". Prefixe af-. */
.af-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; }
.af-hub-card { text-align: left; background: var(--color-surface); color: inherit; border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px; cursor: pointer; font: inherit; margin: 0; }
.af-hub-card.on { border: 2px solid var(--color-primary); }
.af-hub.picked { display: flex; align-items: center; }
.af-hub.picked .af-hub-card { flex: 0 1 360px; }
.af-hub [data-change-card] { margin: 0; }
.af-hub-card strong { display: block; font-size: 15px; margin-bottom: 3px; }
.af-hub-card span { font-size: 12px; color: var(--color-muted); }
.af-free { background: var(--color-primary-soft); border-radius: 12px; padding: 12px 14px; }
.af-free label { display: block; font-weight: 600; margin-bottom: 6px; }
.af-free textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.af-or { text-align: center; color: var(--color-muted); font-size: 12px; margin: 10px 0 0; }
.af-line { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; margin-top: 12px; }
.af-line > .af-label { font-weight: 600; padding-top: 9px; font-size: 15px; }
.af-line > .af-label.sub { font-weight: 500; color: var(--color-muted); }
@media (max-width: 560px) { .af-line { grid-template-columns: 1fr; gap: 4px; } .af-line > .af-label { padding-top: 0; } }
.af-group + .af-group { margin-top: 6px; padding-top: 4px; border-top: 1px dashed var(--color-border); }
.af-crit { display: flex; gap: 6px; align-items: flex-start; }
.af-field { position: relative; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 40px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-sizing: border-box; }
.af-field:focus-within { border-color: var(--color-primary); }
.af-field input[type=text] { flex: 1; min-width: 110px; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; padding: 5px 2px; margin: 0; box-shadow: none; }
.af-attr { border: 0; border-right: 1px solid var(--color-border); border-radius: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-primary); padding: 4px 8px 4px 2px; margin: 0 4px 0 0; width: auto; }
.af-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 3px 8px; border-radius: 6px; background: var(--color-success-bg, #e8f5ec); color: var(--color-success-text, #1d6b3a); }
.af-tag.site { background: var(--color-primary-soft); color: var(--color-primary); }
.af-tag.warn { background: var(--color-warning-bg); color: var(--color-warning-text); }
.af-tag.ref { background: var(--color-surface-alt); color: inherit; }
.af-tag button { background: none; border: 0; padding: 0 0 0 2px; margin: 0; color: inherit; cursor: pointer; font-size: 11px; min-height: 0; box-shadow: none; }
.af-sugg { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; list-style: none; margin: 4px 0 0; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.12); font-size: 13px; }
.af-sugg li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; border-radius: 4px; cursor: pointer; }
.af-sugg li.active, .af-sugg li:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.af-file { flex: none; cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; opacity: .7; }
.af-file:hover { opacity: 1; background: var(--color-primary-soft); }
.af-refs-drop { flex: 1; padding: 6px 4px; font-size: 13px; color: var(--color-muted); cursor: pointer; }
.af-x { flex: none; width: 40px; height: 40px; padding: 0; margin: 0; border-radius: var(--radius); font-size: 13px; }
.af-ask { background: var(--color-surface-alt); border-radius: var(--radius); padding: 10px 12px; }
.af-ask p { margin: 0 0 8px; font-weight: 600; font-size: 14px; }
.af-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.af-row button { height: 34px; margin: 0; font-size: 13px; }
.af-check { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-top: 8px; cursor: pointer; font-weight: 400; }
.af-plain { width: 100%; box-sizing: border-box; }
.af-recap { margin-top: 16px; padding: 12px 14px; border: 2px solid var(--color-primary); border-radius: 12px; background: var(--color-surface); }
.af-recap p { margin: 0; }
/* Recap facon carte Trello (28/09/2026, maquettes/association-recap-trello-autonome.html). */
/* "Où ?" a deux cases Ajouter sur / Retirer de (28/09/2026, maquette association-ajout-retrait-une-carte). */
.af-line-top { align-items: start; }
.af-where { border: 1px solid var(--color-border); border-radius: 12px; padding: 4px 12px; background: var(--color-surface); }
.af-where-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; padding: 10px 0; }
.af-where-row + .af-where-row { border-top: 1px dashed var(--color-border); }
.af-where-row > .af-tcard-op { justify-self: start; margin-top: 8px; white-space: nowrap; }
.af-where-row.af-muted > div { opacity: .75; }
/* Choix sites / pays en pastilles separees : se replient proprement sur petite largeur. */
.af-where .assoc-seg { border: 0; border-radius: 0; overflow: visible; gap: 6px; }
.af-where .assoc-seg button { border: 1px solid var(--color-border); border-radius: 999px; white-space: nowrap; padding: 5px 12px; }
.af-where .assoc-seg button.on { border-color: var(--color-primary); }
@media (max-width: 640px) { .af-where-row { grid-template-columns: 1fr; gap: 6px; } }
/* Icone crayon a droite de "Remplir le formulaire" : ouvrir le formulaire sans ecrire de phrase. */
.af-manual-btn { margin: 0 0 0 auto; background: var(--color-surface); color: inherit; border: 1px solid var(--color-border); border-radius: 999px; width: 34px; height: 34px; padding: 0; font-size: 16px; cursor: pointer; }
.af-manual-btn:hover, .af-manual-btn.on { border-color: var(--color-primary); background: var(--color-primary-soft); }
/* Formulaire SM en 3 blocs visibles d'emblee (Produits / Ou ? / Pourquoi ?, 29/09/2026) ; les
   pastilles de l'equipe n'apparaissent que sous le champ de sites actif. */
.af-blocks { display: grid; gap: 10px; }
.af-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; }
.af-block:empty { display: none; }
.af-where-chips { margin-top: 8px; }
.af-help-title { font-size: 12px; font-weight: 600; color: var(--color-muted); margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; }
/* Pastilles sous "Ecris ta demande" (29/09/2026) : Tes sites (BU du SM) + Raison, un clic remplit la ligne du modele. */
.af-chips-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.af-chips-label { flex: 0 0 92px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; padding-top: 5px; }
.af-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.af-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 0; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: inherit; font-size: 13px; font-weight: 400; cursor: pointer; box-shadow: none; }
.af-chip:hover { border-color: var(--color-primary); }
.af-chip.on { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary); }
.af-chip.muted { color: var(--color-muted); border-style: dashed; }
.af-chip.allow { background: var(--color-success-bg); color: var(--color-success-text); border-color: currentColor; }
.af-chip.deny { background: var(--color-error-bg); color: var(--color-error-text); border-color: currentColor; }
.af-chip.excl { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: currentColor; }
.af-chip-choice { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.af-chip-link { background: none; border: 0; padding: 0; min-height: 0; box-shadow: none; font-size: 11px; font-weight: 400; color: var(--color-primary); text-decoration: underline; cursor: pointer; text-align: left; }
.af-chip-search { flex: 0 1 220px; min-height: 32px; }
.af-chip-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; width: 100%; }
.af-chip-excl { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid currentColor; font-size: 13px; }
@media (max-width: 640px) { .af-chips-row { flex-direction: column; gap: 4px; } .af-chips-label { flex: none; flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; } }
/* Import de fichiers du plateau Merch, replie par defaut (29/09/2026) : reutilise la zone compacte ci-dessous. */
.cmb-import { margin-top: 8px; }
.cmb-import summary { cursor: pointer; margin: 0; }
/* Depot de fichier sous "Ecris ta demande" (28/09/2026) : zone compacte sur une ligne + un fichier par ligne. */
.af-free-drop .file-dropzone { display: flex; font-weight: 400; margin-bottom: 0; flex-direction: row; gap: 10px; padding: 8px 12px; margin-top: 8px; border-width: 1px; }
.af-free-drop .file-dropzone svg { width: 20px; height: 20px; }
.af-free-drop .file-dropzone-title { font-size: 13px; }
.af-free-drop .file-dropzone-input { width: 1px; height: 1px; min-width: 0; left: 0; top: 0; padding: 0; border: 0; }
.af-ffile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--color-surface); font-size: 13px; }
.af-ffile select { width: auto; padding: 4px 8px; margin-left: 4px; }
.af-ffile select.af-ffile-missing { border-color: var(--color-warning-text); }
.af-ffile-x { margin: 0 0 0 auto; background: none; border: 0; color: var(--color-muted); cursor: pointer; padding: 2px 6px; }
.af-tcard { background: var(--color-surface-alt); border-radius: 10px; padding: 10px 14px; }
.af-recap p.af-tcard-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.af-tcard-op { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.af-tcard-op.allow { background: var(--color-success-bg); color: var(--color-success-text); }
.af-tcard-op.deny { background: var(--color-error-bg); color: var(--color-error-text); }
.af-tcard-op.excl { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid currentColor; }
.af-tcard-row { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--color-border); font-size: 14px; }
.af-tcard-lab { font-weight: 600; }
.af-tcard-missing { color: var(--color-warning-text); font-style: italic; }
.af-tcard-excl { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid currentColor; font-size: 14px; }
.af-tcard-excl details { margin-top: 4px; font-size: 12px; }
.af-tcard-excl summary { cursor: pointer; text-decoration: underline; }
.af-tcard-excl ul { columns: 3; margin: 6px 0 0; padding-left: 16px; color: var(--color-text); }
@media (max-width: 640px) { .af-tcard-row { grid-template-columns: 1fr; gap: 2px; } .af-tcard-excl ul { columns: 2; } }
.af-note-warn { margin-top: 6px; font-size: 12px; color: var(--color-warning-text); }

/* Bandeau "Nouvelle version de Nodex disponible" (29/09/2026, voir js/version-check.js). */
.update-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-primary); box-shadow: 0 8px 24px rgba(0,0,0,.15); font-size: 14px; }
.update-banner .small { margin: 0; }
.update-banner-close { background: none; border: 0; box-shadow: none; min-height: 0; padding: 4px; color: var(--color-muted); cursor: pointer; font-size: 13px; }

/* Bloc Produits (29/09/2026) : type en pastilles, precisions rattachees, liens, phrase de resume. */
.af-types { margin-bottom: 6px; }
.af-chip-select { appearance: none; -webkit-appearance: none; padding-right: 22px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%; background-size: 4px 4px; background-repeat: no-repeat; width: auto; }
.af-line-sub .af-crit { border-left: 2px solid var(--color-primary-soft); padding-left: 10px; }
.af-link { background: none; border: 0; padding: 0; min-height: 0; box-shadow: none; color: var(--color-primary); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.af-link:hover { text-decoration: underline; }
.af-summary { margin: 4px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--color-surface-alt); font-size: 14px; }
.af-summary strong { font-weight: 600; }

/* Parcours SM par etapes (29/09/2026) : 1re etape "Associer / Desassocier" en grandes cartes. */
.af-op-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1; min-width: 170px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); color: inherit; cursor: pointer; text-align: left; box-shadow: none; min-height: 0; }
.af-row .af-op-card { height: auto; } /* ".af-row button" force 34px : les cartes gardent leur hauteur */
.af-op-card:hover { border-color: var(--color-primary); }
.af-op-card.on { border: 2px solid var(--color-primary); background: var(--color-primary-soft); }
.af-op-title { font-size: 15px; font-weight: 600; }
.af-op-sub { font-size: 12px; color: var(--color-muted); font-weight: 400; }
.af-opt-body { margin: 4px 0 8px 24px; }

/* Parcours SM en etapes repliables (29/09/2026) : une etape ouverte, les autres en une ligne. */
.af-wizard { display: grid; gap: 8px; }
.af-step { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); padding: 12px 16px; }
.af-step.open { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-soft); }
.af-step.todo { opacity: .55; padding: 10px 16px; }
.af-step-head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.af-step-num { flex: 0 0 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--color-surface-alt); color: var(--color-muted); }
.af-step.open .af-step-num { background: var(--color-primary); color: #fff; }
.af-step.done .af-step-num { background: var(--color-success-bg); color: var(--color-success-text); }
.af-step-title { font-weight: 600; font-size: 14px; white-space: nowrap; }
.af-step-sum { flex: 1; min-width: 0; font-size: 13px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-step-sum strong { font-weight: 600; color: var(--color-text); }
.af-step-head .af-link { margin: 0 0 0 auto; }
.af-link { margin: 0; }
.af-step-body { margin-top: 12px; display: grid; gap: 10px; }
.af-step-actions { display: flex; justify-content: flex-end; }
.af-step-actions button { margin: 0; }
.af-op-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.af-op-cards .af-op-card { height: auto; margin: 0; }
.af-wizard .af-line { display: block; margin: 0 0 8px; }
.af-wizard .af-label { display: block; font-size: 12px; font-weight: 600; color: var(--color-muted); margin: 0 0 4px; }
.af-wizard .af-label:empty { display: none; }
.af-wizard .af-field { min-height: 40px; align-items: center; }
.af-type { height: 30px; border: 0; border-right: 1px solid var(--color-border); border-radius: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-primary); padding: 0 8px 0 2px; margin: 0 4px 0 0; cursor: pointer; }
.af-options { border-top: 1px dashed var(--color-border); padding-top: 10px; }
.af-radios { display: grid; gap: 2px; }
.af-radio { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 400; cursor: pointer; margin: 0; }
.af-radio:hover { background: var(--color-surface-alt); }
.af-radio input { margin: 0; width: 16px; height: 16px; accent-color: var(--color-primary); }
.af-note-label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; margin: 0; }
@media (max-width: 640px) { .af-op-cards { grid-template-columns: 1fr; } .af-step-sum { display: none; } }
.af-field select.af-type { width: auto; flex: 0 0 auto; min-width: 0; box-shadow: none; }
/* Prix (msrp) : operateur + montant sur la meme ligne que le type (29/09/2026). */
.af-field .af-num-op { width: 56px; min-width: 0; flex: 0 0 auto; height: 30px; font-size: 14px; margin: 0; padding: 0 6px; }
.af-field .af-num { width: 130px; flex: 0 0 auto; height: 30px; margin: 0; }
.af-field .af-num-add { height: 30px; margin: 0; }
/* Cloche des SM : liens a verifier (29/09/2026, voir js/sm-checks-tray.js). */
.jobs-tray-btn { position: relative; }
.jobs-tray-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-error-text); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
.smcheck-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 0 0 6px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: inherit; font-size: 13px; font-weight: 400; text-align: left; cursor: pointer; box-shadow: none; }
.smcheck-item:hover { border-color: var(--color-primary); }
.smcheck-item span { font-size: 12px; color: var(--color-muted); }
/* PIQA "Traiter (regles OMP)" : texte de la carte Trello replie au-dessus du parcours (30/09/2026). */
.af-card-text { margin-bottom: 10px; padding: 8px 12px; border: 1px dashed var(--color-border); border-radius: 10px; }
.af-card-text summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.af-card-text textarea { width: 100%; box-sizing: border-box; margin-top: 8px; font: inherit; font-size: 13px; }
/* Plan d'automatisation : indicateur de progression (07/10/2026, "que je comprenne que ça tourne"). */
@keyframes ap-spin { to { transform: rotate(360deg); } }
.ap-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: ap-spin 0.8s linear infinite; vertical-align: -2px; }
.ap-progress { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-alt); font-size: 13px; }
.ap-progress-bar { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.ap-progress-bar > span { display: block; height: 100%; background: var(--color-primary); transition: width 0.3s ease; }
/* Merch, refonte du 07/10/2026 (maquettes/merch-3-etapes.html) : etapes, deux colonnes, onglets. */
.cmb-step1 { padding: 4px 0; }
.cmb-q { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.cmb-catbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--r-card, 12px); background: var(--color-surface); margin-bottom: 12px; }
.cmb-compose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; } /* une seule colonne (retour d'Adam du 07/10/2026, comme la maquette) */
.cmb-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cmb-col > .cmb-block { margin-top: 0; }
@media (max-width: 1000px) { .cmb-compose { grid-template-columns: 1fr; } }
.cmb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.cmb-tab { min-height: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-alt); color: inherit; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: none; }
.cmb-tab:hover { border-color: var(--color-primary); }
.cmb-tab.on { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); font-weight: 700; }
.cmb-reassure { margin: 8px 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--color-primary-soft); font-size: 12px; }
.cmb-preview-btn { margin-left: auto; font-size: 13px; padding: 7px 16px; box-shadow: 0 2px 8px rgba(0, 67, 247, .3); }
.cmb-selbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; padding: 6px 10px; border-radius: 10px; background: var(--color-surface-alt); border: 1px solid var(--color-primary); font-size: 12px; }
.cmb-empty { padding: 22px; border: 2px dashed var(--color-border); border-radius: 12px; text-align: center; }
.cmb-hide-tech .cmb-tech { display: none; }
.cmb-more { margin-top: 12px; }
.cmb-more summary { cursor: pointer; }
.cmb-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--r-card, 12px); background: var(--color-surface); }
.merch-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.merch-step { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); font-size: 13px; }
.merch-step b { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; background: var(--color-surface-alt); font-size: 12px; }
.merch-step.on { border-color: var(--color-primary); border-width: 2px; color: var(--color-text); font-weight: 700; }
.merch-step.on b { background: var(--color-primary); color: #fff; }
.merch-step.done b { background: var(--color-success-bg); color: var(--color-success-text); }
.merch-summary-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--color-success-bg); }
.merch-step { font-size: 14px; }
.merch-step b { width: 24px; height: 24px; font-size: 13px; }
.cmb-col-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--color-text); display: flex; align-items: center; gap: 8px; }
.cmb-block .help-text { font-size: 13px; }
.cmb-found { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--color-success-bg); }
.cmb-lines { width: 100%; border-collapse: collapse; }
.cmb-lines td { padding: 7px 6px; border-bottom: 1px solid var(--color-border); vertical-align: middle; background: none; }
.cmb-grip { cursor: grab; color: var(--color-muted); width: 18px; user-select: none; }
.cmb-lines .cmb-pos { width: 52px !important; min-width: 0; padding: 4px 6px; }
.cmb-product { display: flex; gap: 10px; align-items: center; width: 100%; }
.cmb-product .merch-product-name { font-weight: 700; font-size: 14px; }
.cmb-info { font-size: 12px; margin: 0; }
.cmb-lines td.cmb-narrow { width: 1%; white-space: nowrap; }
/* Page de traitement PIQA multi-categories (09/10/2026, maquettes/piqa-traitement-page.html). */
.tr-table { width: 100%; border-collapse: collapse; }
.tr-table th { position: sticky; top: 0; z-index: 1; background: var(--color-surface-alt); text-align: left; font-size: 11px; text-transform: uppercase; padding: 8px 10px; }
.tr-table td { padding: 10px; border-top: 1px solid var(--color-border); vertical-align: top; }
.tr-bar { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--r-card, 12px); background: var(--color-surface); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); }

/* ==========================================================================
   Charte du portail PIQA (12/10/2026, demande d'Adam : « design similaire au hub de Deva, en
   gardant notre couleur marron/beige »). Releve sur beta.piqa.fr : fond beige autour, barre
   laterale et contenu en panneaux flottants tres arrondis (22px), cartes blanches sans bordure a
   ombre douce (12px), police Inter servie par l'app (zero CDN, public/fonts, licence OFL).
   Bloc unique en fin de fichier : le retirer suffit a revenir a l'ancien rendu.
   ========================================================================== */
@font-face {
  font-family: "Nodex Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght.woff2?v=1") format("woff2");
}
:root {
  --color-bg: #f3e6d5;          /* beige du portail */
  --color-sidebar: #f5f7f6;     /* panneaux gris-vert, comme le portail */
  --color-panel: #f5f7f6;
  --shell-gap: 14px;
  --sidebar-width: 250px;       /* Inter est plus large que Segoe : 220px coupait les libelles */
  --r-panel: 22px;
  --shadow-card: 0 1px 2px rgba(28, 31, 35, .05), 0 2px 6px rgba(28, 31, 35, .04);
  --shadow-card-hover: 0 4px 14px rgba(28, 31, 35, .08);
  --shadow: var(--shadow-card);
}
[data-theme="dark"] {
  --color-bg: #111112;
  /* Panneau plus sombre que les cartes (--color-surface #232324), comme le portail. */
  --color-sidebar: #19191a;
  --color-panel: #19191a;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-card-hover: 0 4px 14px rgba(0, 0, 0, .4);
}
body { font-family: "Nodex Inter", "Segoe UI Variable", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* Coquille : deux panneaux flottants sur le fond beige. */
.app-shell { padding: var(--shell-gap); gap: var(--shell-gap); height: 100vh; box-sizing: border-box; }
.sidebar {
  background: var(--color-panel); border-right: none; border-radius: var(--r-panel);
  box-shadow: var(--shadow-card); height: calc(100vh - 2 * var(--shell-gap)); min-height: 0;
  position: sticky; top: var(--shell-gap); overflow: hidden;
}
/* --sidebar-fit : largeur du plus long libelle, mesuree par shell.js#fitSidebarToLabels. */
.sidebar:not(.collapsed) { min-width: var(--sidebar-fit, 0px); }
.sidebar-resize-handle { margin: 0 calc(-1 * var(--shell-gap)); width: var(--shell-gap); border-radius: 4px; }
.main-area {
  background: var(--color-panel); border-radius: var(--r-panel); box-shadow: var(--shadow-card);
  overflow-y: auto; height: calc(100vh - 2 * var(--shell-gap));
}
.sidebar-logo { border-bottom: none; padding: 20px 18px 12px; }
.topbar { background: transparent; border-bottom: none; padding: 22px 32px 6px; }
.topbar-title { border-left: none; padding-left: 0; font-size: 22px; }
.page-content { padding: 18px 32px 32px; }

/* Navigation : actif = pastille pleine de la couleur principale, comme le « + » du hub. */
.sidebar-nav-item { border-radius: 999px; padding: 9px 14px; margin-bottom: 2px; }
.sidebar-nav-item:hover { background: var(--color-surface); transform: none; box-shadow: var(--shadow-card); }
.sidebar-nav-item.active { background: var(--color-primary); color: #fff; font-weight: 600; box-shadow: var(--shadow-card); }
.sidebar-nav-item.active .badge { background: #fff; color: var(--color-primary); }
/* Titres de section comme le hub : « Général », pas en capitales. */
.sidebar-nav-section-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; margin: 14px 12px 4px; }
.sidebar-nav-section:first-child .sidebar-nav-section-label { margin-top: 4px; }

/* Cartes : blanches, sans bordure, ombre douce. */
.card { border: none; border-radius: 12px; box-shadow: var(--shadow-card); }
.icon-btn, .user-chip { background: var(--color-surface); border-color: transparent; box-shadow: var(--shadow-card); }

/* Telephone : pas de marge autour, la place compte plus que l'effet flottant. */
@media (max-width: 640px) {
  .app-shell { padding: 0; gap: 0; height: auto; }
  .sidebar:not(.collapsed) { min-width: 0; }
  .sidebar, .main-area { border-radius: 0; height: auto; min-height: 100vh; box-shadow: none; }
  .main-area { overflow: visible; }
  .topbar, .page-content { padding-left: 16px; padding-right: 16px; }
}

/* Lien « Revenir au portail » : nouveau logo « P plie » de Deva (09/10/2026). */
.sidebar-piqa .piqa-logo { width: 26px; height: 30px; flex-shrink: 0; margin: 0 3px; transition: transform 0.2s ease; }
.sidebar-piqa:hover .piqa-logo { transform: scale(1.08); }

/* Barre reduite facon hub PIQA (retour d'Adam, capture du 12/10/2026) : chaque section devient une
   colonne de pastilles blanches arrondies, l'onglet actif un rond plein de la couleur principale. */
:root { --sidebar-width-collapsed: 72px; }
.sidebar.collapsed .sidebar-nav { padding: 6px 12px; }
.sidebar.collapsed .sidebar-nav-section {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 0 auto 12px; padding: 6px; width: 48px; box-sizing: border-box;
  background: var(--color-surface); border-radius: 999px; box-shadow: var(--shadow-card);
}
.sidebar.collapsed .sidebar-nav-item {
  width: 36px; height: 36px; padding: 0; margin: 0; justify-content: center; border-radius: 50%; box-shadow: none;
}
.sidebar.collapsed .sidebar-nav-item:hover { background: var(--color-surface-alt); box-shadow: none; }
.sidebar.collapsed .sidebar-logo { justify-content: center; padding: 18px 0 12px; }
.sidebar.collapsed .sidebar-piqa { margin: 0 auto; }

/* Bouton reduire/agrandir en haut, a droite du logo (comme le hub) ; sous le logo en mode reduit. */
.sidebar-logo .sidebar-collapse-btn {
  margin: 0 0 0 auto; padding: 0; width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--color-muted);
}
.sidebar-logo .sidebar-collapse-btn:hover { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); }
.sidebar-logo .sidebar-collapse-btn svg { width: 16px; height: 16px; }
.sidebar.collapsed .sidebar-logo { flex-direction: column; gap: 10px; }
.sidebar.collapsed .sidebar-logo .sidebar-collapse-btn { margin: 0; }

/* Carte utilisateur en bas de la barre, comme le hub (12/10/2026). La barre ne coupe plus ce qui
   deborde (le menu s'ouvre vers le haut, par-dessus le contenu) ; la liste d'onglets defile seule. */
.sidebar { overflow: visible; }
.sidebar-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 14px 14px; position: relative; }
.sidebar-user-avatar {
  width: 34px; height: 34px; flex-shrink: 0; margin: 0; padding: 0; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-surface-alt); color: var(--color-text); font: 700 12px/1 inherit; letter-spacing: .02em;
}
.sidebar-user-avatar:hover { box-shadow: 0 0 0 2px var(--color-primary-soft); }
.sidebar-user-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar-user-name {
  margin: 0; padding: 0; border: none; background: none; cursor: pointer; text-align: left;
  font: 600 13.5px/1.3 inherit; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-status { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-muted); white-space: nowrap; }
.sidebar-user-status .link-btn { margin: 0; padding: 0; font-size: 12px; color: var(--color-muted); }
.sidebar-user-status .link-btn:hover { color: var(--color-text); }
.sidebar-user-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success-text); }
.sidebar-user .jobs-tray-panel { top: auto; bottom: calc(100% + 4px); left: 10px; right: auto; width: 270px; }
.sidebar.collapsed .sidebar-user { justify-content: center; padding: 12px 0 14px; }
.sidebar.collapsed .sidebar-user-text { display: none; }
@media (max-width: 640px) { .sidebar-user-text { display: none; } .sidebar-user { justify-content: center; padding: 12px 0; } }
.sidebar-nav { min-height: 0; }
.sidebar-user .jobs-tray-panel { max-height: min(560px, calc(100vh - 120px)); }

/* Ecrans avant l'app (connexion, choix du role / de l'equipe, attente) : meme charte que le hub
   (12/10/2026). Cadre = panneau blanc casse arrondi, choix = cartes blanches a ombre douce. */
body > .card { background: var(--color-panel); border-radius: var(--r-panel); box-shadow: var(--shadow-card); padding: 28px 30px; }
.role-card {
  background: var(--color-surface); border: 1px solid transparent; border-radius: 12px; box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.role-card:hover { border-color: transparent; box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.role-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft), var(--shadow-card); }
.role-card .icon { display: grid; place-items: center; width: 34px !important; height: 34px !important; border-radius: 9px; background: var(--color-primary-soft); }
.role-card .icon svg { width: 18px; height: 18px; }
.bu-grid .role-card .icon { width: auto !important; height: auto !important; background: none; }

/* Suggestions (12/10/2026) : bulle « Une idée ? » en bas a droite de toutes les pages
   (suggestions-widget.js), listes partagees (suggestions-ui.js). Maquette : maquettes/suggestions.html. */
.status-info { background: var(--color-info-bg); color: var(--color-info-text); }
.suggestion-legend { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.suggestion-item { border-bottom: 1px solid var(--color-surface-alt); padding: 10px 0; }
.suggestion-item:last-child { border-bottom: 0; }
.suggestion-unseen { box-shadow: inset 3px 0 0 var(--color-primary); padding-left: 10px; }
.suggestion-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--color-muted); }
.suggestion-body { margin: 6px 0 0; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.suggestion-reply { margin-top: 8px; background: var(--color-surface-alt); border-radius: 10px; padding: 8px 12px; font-size: 13px; white-space: pre-wrap; }
.suggestion-reply strong { font-size: 12px; color: var(--color-muted); }
.suggestion-admin { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; }
.suggestion-admin > div { flex: 1 1 280px; min-width: 0; }
.suggestion-admin > select { flex: none; width: auto; min-width: 140px; }
/* Options des listes deroulantes (06/11/2026, capture d'Adam : statuts d'une suggestion illisibles) : couleurs
   explicites, sinon le menu natif de Windows peut reprendre un texte clair sur fond clair. */
select option { color: var(--color-text); background-color: var(--color-surface); }
.suggestion-admin .link-btn { margin-top: 6px; }
.suggestion-reply-editor { margin-top: 8px; }
.suggestion-reply-editor textarea { width: 100%; resize: vertical; }

.suggest-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 900; display: inline-flex; align-items: center; gap: 8px;
  margin: 0; border: 0; border-radius: 999px; padding: 11px 18px 11px 14px; background: var(--color-primary); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px rgba(33, 26, 21, .22);
}
.suggest-fab:hover { background: var(--color-primary-hover); filter: none; }
.suggest-fab-ico { font-size: 17px; line-height: 1; }
.suggest-fab-dot {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--color-error-text); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid var(--color-bg); box-sizing: border-box;
}
.suggest-fab-dot.hidden, .suggest-chat.hidden, .suggest-foot.hidden { display: none; }
.suggest-chat {
  position: fixed; right: 22px; bottom: 82px; z-index: 900; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--color-surface);
  box-shadow: 0 18px 50px rgba(33, 26, 21, .25); animation: suggest-pop .18s ease;
}
@keyframes suggest-pop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .suggest-chat { animation: none; } }
.suggest-head { background: var(--color-primary); color: #fff; padding: 14px 16px 0; }
.suggest-head-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.suggest-head strong { font-size: 15px; }
.suggest-head small { display: block; opacity: .85; font-size: 12px; }
.suggest-close { margin: 0; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; }
.suggest-close:hover { background: rgba(255, 255, 255, .3); filter: none; }
.suggest-tabs { display: flex; gap: 4px; margin-top: 12px; }
.suggest-tabs button { margin: 0; border: 0; background: none; color: rgba(255, 255, 255, .88); font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 10px 10px 0 0; cursor: pointer; box-shadow: none; }
.suggest-tabs button:hover { filter: none; transform: none; color: #fff; }
.suggest-tabs button.on { background: var(--color-surface); color: var(--color-primary); font-weight: 600; }
.suggest-body { flex: 1; overflow-y: auto; padding: 14px 14px 6px; }
.suggest-msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; margin-bottom: 8px; font-size: 13.5px; overflow-wrap: anywhere; }
.suggest-msg .help-text { margin: 4px 0 0; font-size: 12px; }
.suggest-bot { background: var(--color-surface-alt); border-bottom-left-radius: 4px; }
.suggest-me { background: var(--color-primary-soft); margin-left: auto; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.suggest-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.suggest-chip { margin: 0; border: 1px solid var(--color-primary); background: var(--color-surface); color: var(--color-primary); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.suggest-chip:hover { background: var(--color-primary-soft); filter: none; }
.suggest-restart { display: block; margin: 4px 0 8px auto; padding: 4px 8px; border: 0; background: none; color: var(--color-muted); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; box-shadow: none; }
.suggest-restart:hover { color: var(--color-primary); filter: none; transform: none; }
.suggest-recap { border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 8px; overflow-wrap: anywhere; }
.suggest-recap div { margin: 2px 0; white-space: pre-wrap; }
.suggest-recap span { color: var(--color-muted); }
.suggest-foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--color-surface-alt); }
.suggestion-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.suggestion-thumb { margin: 0; padding: 0; width: 84px; height: 64px; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; background: var(--color-surface-alt); cursor: zoom-in; box-shadow: none; }
.suggestion-thumb:hover { border-color: var(--color-primary); filter: none; transform: none; }
.suggestion-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suggestion-zoom { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; background: rgba(20, 14, 10, .78); cursor: zoom-out; }
.suggestion-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .4); background: #fff; }
.suggest-me .suggestion-images { justify-content: flex-end; }
.suggest-attach { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 12px 0; border-top: 1px solid var(--color-surface-alt); }
.suggest-attach.hidden { display: none; }
.suggest-attach-item { position: relative; }
.suggest-attach-item .suggestion-thumb { width: 64px; height: 48px; }
.suggest-attach-remove { position: absolute; top: -6px; right: -6px; margin: 0; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--color-text); color: var(--color-surface); font-size: 10px; line-height: 20px; cursor: pointer; box-shadow: none; }
.suggest-attach-remove:hover { background: var(--color-error-text); filter: none; transform: none; }
.suggest-clip { background: var(--color-surface-alt) !important; color: var(--color-text) !important; }
.suggest-clip:hover { background: var(--color-primary-soft) !important; }
.suggest-drop { outline: 3px dashed var(--color-primary); outline-offset: -6px; }
.suggest-foot textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; margin: 0; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.suggest-foot button { margin: 0; width: 44px; padding: 0; border-radius: 12px; font-size: 17px; }
@media (max-width: 640px) {
  .suggest-fab { right: 14px; bottom: 14px; padding: 12px; }
  .suggest-fab-label { display: none; }
  .suggest-chat { right: 16px; bottom: 74px; }
}

/* Alignement sur le portail PIQA (12/10/2026, capture de beta.piqa.fr fournie par Adam : « la meme
   chose a l'identique », pour que les SM retrouvent le meme design d'une app a l'autre). */
:root { --color-muted: #5d646b; }
[data-theme="dark"] { --color-muted: #a1a1aa; }
/* Titres de bloc comme « Demand helper » / « Tous les besoins » : simples, sans majuscules ni barre. */
.card-title {
  font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0;
  padding-left: 0; border-left: none; color: var(--color-text); margin: 0 0 14px;
}
/* Onglets comme « Récents / Favoris » : pastille bleue pleine dans un cadre blanc arrondi. */
.tabs {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: none; border-radius: 22px;
  background: var(--color-surface); box-shadow: var(--shadow-card);
}
.tabs button { border: none; border-radius: 999px; padding: 7px 16px; color: var(--color-text); font-weight: 500; }
.tabs button:hover { background: var(--color-surface-alt); color: var(--color-text); }
.tabs button.active { background: var(--color-primary); color: #fff; font-weight: 600; }
.tabs button.active .tabs-count { background: rgba(255, 255, 255, .22); color: #fff; }
/* Accueil « Demande SM » : cartes blanches posees sur le panneau, comme les besoins du portail. */
.sm-hub { margin-bottom: 28px; }
.sm-hub-card {
  background: var(--color-surface) !important; border: 1px solid transparent !important; border-radius: 12px !important;
  box-shadow: var(--shadow-card);
}
.sm-hub-card:hover, .sm-hub-card:focus-visible { border-color: transparent !important; box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }

/* Typographie et composants du portail PIQA (12/10/2026, « prend également la typo, tout ») : regles
   relevees dans la feuille de style de beta.piqa.fr. Meme police (Inter, deja servie par Nodex). */
:root { --color-ink-2: #2a2e33; --color-faint: #6b7178; --color-line-soft: #eef1f0; }
[data-theme="dark"] { --color-ink-2: #e4e4e7; --color-faint: #75757d; --color-line-soft: #242426; }
body { color: var(--color-ink-2); line-height: 1.5; }
/* Titre de page (h1 du portail : 21 px, semi-gras). */
.topbar-title { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
/* Menu : libelles de groupe 12 px gris clair, entrees 13,5 px hauteur 38 px, actif bleu plein. */
.logo-text { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text); }
.sidebar-nav-section-label { font-size: 12px; font-weight: 500; color: var(--color-faint); }
.sidebar-nav-item {
  gap: 10px; min-height: 38px; padding: 0 10px; box-sizing: border-box;
  font-size: 13.5px; font-weight: 500; color: var(--color-muted);
}
.sidebar-nav-item:hover { background: var(--color-surface); color: var(--color-ink-2); box-shadow: none; }
.sidebar-nav-item.active { background: var(--color-primary); color: #fff; font-weight: 500; box-shadow: none; }
/* Titres de bloc (« Demand helper ») : 13 px semi-gras, gris fonce. */
.card-title { font-size: 13px; font-weight: 600; color: var(--color-muted); }
/* Boutons : pastille bleue pleine, 12,5 px ; secondaire = pastille blanche bordee, comme .btn. */
button {
  font-family: inherit; background: var(--color-primary); border-radius: 999px; padding: 8px 16px;
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
}
button:hover { background: var(--color-primary-hover); filter: none; transform: none; box-shadow: none; }
button:active { transform: none; }
button.secondary { background: var(--color-surface); color: var(--color-ink-2); border: 1px solid var(--color-border); font-weight: 500; }
button.secondary:hover { background: var(--color-surface); border-color: var(--color-faint); color: var(--color-text); }
button.small { padding: 5px 12px; font-size: 12px; }
/* Champs : fond blanc, bordure fine, arrondi 8 px, 13 px ; focus = bordure bleue, sans halo. */
input[type="text"], input[type="file"], select, textarea {
  padding: 8px 11px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; background: var(--color-surface);
}
input[type="text"]:focus, select:focus, textarea:focus { border-color: var(--color-primary); box-shadow: none; }
label { font-size: 13px; font-weight: 600; color: var(--color-ink-2); }
.help-text { font-size: 12.5px; }
/* Tableaux (table.adm du portail) : en-tetes 11,5 px gris clair en capitales, lignes aerees. */
th {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--color-faint);
  background: transparent; border-bottom: 1px solid var(--color-border); padding: 10px 16px;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--color-line-soft); }
tbody tr:hover { background: var(--color-surface-alt); }
/* Etiquettes (.tag du portail) : 22 px de haut, arrondi 5 px, 11,5 px. */
.pill, .status-chip { border-radius: 5px; padding: 2px 8px; font-size: 11.5px; font-weight: 500; }
.sidebar-nav-item .badge, .tabs-count { border-radius: 5px; font-size: 11px; font-weight: 600; }
/* Mesures relevees sur le portail connecte (12/10/2026) : onglets « Récents / Favoris »
   (.scope-toggle : cadre blanc 5 px sans ombre, boutons 13 px, 32 px de haut) et cartes de besoin
   (.needcard : 14 px de marge, titre 14,5 px moyen, description 12,5 px gris clair). */
.tabs { gap: 4px; padding: 5px; border-radius: 22px; box-shadow: none; }
.tabs button { min-height: 32px; padding: 0 14px; font-size: 13px; font-weight: 500; }
.tabs button.active { font-weight: 600; }
.sm-hub-card { padding: 14px !important; gap: 10px !important; font-size: 14px; font-weight: 400; line-height: 1.5; }
.sm-hub-card .sm-hub-title { font-size: 14.5px; font-weight: 500; color: var(--color-text); }
.sm-hub-card .help-text { font-size: 12.5px; color: var(--color-faint); }
/* Etiquettes (mesurees sur « Mes demandes » du portail) : sans bordure. Domaine d'une demande =
   orange clair de l'app Nodex dans le portail (.kcard-need : #fb923c a 15 %, texte assombri). */
.pill-neutral { border: none; background: var(--color-surface-alt); color: var(--color-muted); }
.pill-domain { background: rgba(251, 146, 60, .15); color: #8a5021; font-weight: 600; }
[data-theme="dark"] .pill-domain { color: #fdba74; }

/* Mon tableau de bord (12/10/2026, views/tableau-de-bord.js) : rubriques en graphiques, d'apres la
   maquette maquettes/tableau-de-bord-v2.html. Vert = automatise, gris = herite, orange = sans
   filtre, bleu = page marque a corriger. */
:root { --dash-own: #15803d; --dash-brand: #4caf6e; --dash-autoc: #9fd4ae; --dash-herit: #c9ced3; --dash-manuel: #0f766e; --dash-sans: #eb6834; --dash-issue: #2a78d6; }
[data-theme="dark"] { --dash-own: #4ade80; --dash-brand: #2a9d58; --dash-autoc: #1b5e37; --dash-herit: #4a4a4f; --dash-manuel: #2dd4bf; --dash-sans: #d95926; --dash-issue: #3987e5; }
.dash-sub { margin: -6px 0 10px; }
.dash-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.dash-pickrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dash-pickrow .help-text { margin: 0 4px 0 0; }
.dash-pick { margin: 0; padding: 5px 12px; background: var(--color-surface); color: var(--color-ink-2); border: 1px solid var(--color-border); font-weight: 500; font-size: 12.5px; }
.dash-pick:hover { background: var(--color-surface-alt); color: var(--color-text); }
.dash-pick.on { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.dash-tabs { margin-bottom: 14px; }
.dash-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.dash-g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dash-g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.dash-card { margin-bottom: 14px; padding: 18px; }
.dash-grid .dash-card { margin-bottom: 0; }
.dash-tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0;
  padding: 16px 18px 18px; text-align: left; background: var(--color-surface); color: var(--color-ink-2); border: 1px solid transparent;
  border-radius: 12px; box-shadow: var(--shadow-card); font-weight: 400; font-size: 14px;
}
.dash-tile:hover { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-card-hover); }
.dash-tile-lbl { font-size: 12.5px; color: var(--color-muted); }
.dash-big { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--color-text); }
.dash-tile .help-text { margin: 0; }
.dash-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.dash-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--color-muted); margin: 6px 0 10px; }
.dash-legend i, .dash-legend-list i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; flex: none; }
.dash-svg { display: block; width: 560px; max-width: 100%; height: auto; overflow: visible; }
.dash-svg text, .dash-donut text { fill: var(--color-ink-2); font: 13px "Nodex Inter", system-ui, sans-serif; }
.dash-svg .dash-val, .dash-donut .dash-val { fill: var(--color-text); font-weight: 600; }
.dash-donut .dash-muted { fill: var(--color-faint); font-size: 11px; }
.dash-svg [data-tip], .dash-donut [data-tip] { cursor: pointer; }
.dash-row { cursor: pointer; }
.dash-ring { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dash-donut { width: 150px; flex: none; }
.dash-legend-list { flex: 1; min-width: 200px; }
.dash-legend-list div { display: flex; align-items: center; gap: 4px; padding: 5px 0; border-bottom: 1px solid var(--color-line-soft); font-size: 13px; }
.dash-legend-list div span { flex: 1; }
.dash-li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-line-soft); flex-wrap: wrap; }
.dash-li:last-child { border-bottom: 0; }
.dash-li small { display: block; color: var(--color-faint); font-size: 12px; }
.dash-li button { margin: 0; }
.dash-brand-form { display: flex; gap: 8px; margin: 4px 0 6px; }
.dash-brand-form input { flex: 1; }
.dash-brand-form button { margin: 0; }
.dash-tip { position: fixed; z-index: 1000; pointer-events: none; background: var(--color-text); color: var(--color-surface); padding: 7px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; opacity: 0; transition: opacity .1s; max-width: 260px; }
.dash-tip.show { opacity: 1; }
/* Tableau de bord sur un seul ecran (retour d'Adam : « faut que ça tienne sur une page ») : une
   barre (onglets, equipe, sites en menu), rubriques en grille a la hauteur restante (calculee par
   tableau-de-bord.js#fit), les listes defilent dans leur carte. */
.dash { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.dash-toolbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.dash-tabs { margin: 0; }
.dash-filters { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.dash-seller-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dash-seller-btns button { white-space: nowrap; }
.dash-flag { width: 21px; height: 14px; vertical-align: -2px; margin-left: 2px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.dash-select { width: auto; min-width: 140px; border-radius: 999px; padding: 6px 12px; }
.dash-bu { margin: 0; }
.dash-sites { position: relative; }
.dash-sites-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 260px; max-height: 340px; overflow: auto;
  background: var(--color-surface); border-radius: 12px; box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--color-border); padding: 8px 12px;
}
.dash-sites-actions { display: flex; gap: 12px; padding: 2px 0 6px; border-bottom: 1px solid var(--color-line-soft); margin-bottom: 4px; }
.dash-site-opt { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; font-size: 13px; font-weight: 400; cursor: pointer; }
.dash-site-opt input { width: auto; margin: 0; }
.dash-progress { margin: 0 0 0 auto; }
.dash-content { flex: 1; min-height: 0; }
.dash-fit { height: 100%; display: grid; gap: 14px; min-height: 0; }
.dash-fit-ensemble { grid-template-rows: auto minmax(0, 1fr); }
.dash-fit-auto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr); }
.dash-fit-one { grid-template-rows: minmax(0, 1fr); }
.dash-g4 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; }
.dash-card { display: flex; flex-direction: column; min-height: 0; margin: 0; padding: 16px 18px; }
.dash-card .card-title { margin-bottom: 4px; }
.dash-hint { margin: 0 0 8px; }
.dash-hint .dash-legend { margin: 2px 0 0; }
.dash-scroll { flex: 1; min-height: 0; overflow: auto; }
.dash-tile { padding: 12px 16px 14px; }
.dash-big { font-size: 28px; }
.dash-donut { width: 130px; }
/* Petit ecran (14/10/2026) : la page defile, les cartes ne sont plus ecrasees a la hauteur de
   l'ecran ; les longues listes defilent dans leur carte. */
.dash-compact .dash-fit { height: auto; grid-template-rows: none; }
.dash-compact .dash-card { min-height: 260px; }
.dash-compact .dash-scroll { flex: none; max-height: 340px; }
@media (max-width: 900px) {
  .dash { height: auto !important; }
  .dash-fit { height: auto; grid-template-columns: 1fr; grid-template-rows: none; }
  .dash-scroll { max-height: 360px; }
}
/* Idee ouverte depuis une notification (12/10/2026) : surlignee quelques secondes. */
.suggestion-flash { animation: suggestion-flash 2.4s ease; border-radius: 10px; }
@keyframes suggestion-flash { 0%, 60% { background: var(--color-primary-soft); box-shadow: 0 0 0 6px var(--color-primary-soft); } 100% { background: transparent; box-shadow: none; } }
/* Glisser plusieurs produits coches du plateau Merch (12/10/2026) : etiquette « ⋮⋮ 3 produits ». */
.cmb-drag-ghost { position: fixed; top: -100px; left: -100px; padding: 6px 12px; border-radius: 999px; background: var(--color-primary); color: #fff; font: 600 12.5px "Nodex Inter", system-ui, sans-serif; }
.dash-muted-txt { color: var(--color-faint); }
.sidebar-logo .logo-mark .logo-img { width: 34px; height: auto; display: block; }

/* Listes du tableau de bord (12/10/2026, retour d'Adam sur capture : bouton qui passait sous les
   noms longs) : deux colonnes fixes, le texte revient a la ligne, le bouton reste aligne a droite. */
.dash-li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; flex-wrap: nowrap; }
.dash-li > div { min-width: 0; overflow-wrap: anywhere; }
.dash-li a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.dash-li a:hover { color: var(--color-primary); text-decoration: underline; }
.dash-li button { justify-self: end; white-space: nowrap; }
/* Barres de defilement aux couleurs du theme (blanches en sombre sinon). */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
@media (max-width: 520px) { .dash-li { grid-template-columns: 1fr; row-gap: 6px; } .dash-li button { justify-self: start; } }

/* ==== Tableau de bord : aere, lisse, sans a-coups (12/10/2026, retour d'Adam) ==== */
.dash { gap: 18px; }
.dash-fit, .dash-g4 { gap: 18px; }
.dash-card { padding: 22px 24px; border-radius: 16px; transition: box-shadow .25s ease; }
.dash-card .card-title { font-size: 15px; font-weight: 600; color: var(--color-text); text-transform: none; letter-spacing: -0.005em; margin: 0 0 4px; }
.dash-card .card-title::before { display: none; }
.dash-hint { margin: 0 0 16px; color: var(--color-faint); font-size: 12.5px; line-height: 1.5; }
.dash-hint .dash-legend { margin: 8px 0 0; gap: 8px 16px; }
.dash-legend i, .dash-legend-list i { border-radius: 50%; width: 9px; height: 9px; }
/* Tuiles : pastille douce a la place du trait de couleur en bas. */
.dash-tile { padding: 18px 20px; border-radius: 16px; transition: box-shadow .25s ease, transform .25s ease; }
.dash-tile:hover { transform: translateY(-2px); }
.dash-tile-lbl { font-size: 13px; color: var(--color-muted); padding-right: 18px; }
.dash-big { font-size: 30px; margin: 6px 0 2px; }
.dash-bar { left: auto; right: 20px; top: 22px; bottom: auto; width: 9px; height: 9px; border-radius: 50%; opacity: .9; }
/* Graphiques centres dans leur carte, a une largeur confortable. */
/* margin:auto plutot que align-items:center : centre quand ca tient, defile sans couper le haut sinon. */
.dash-chart .dash-scroll { display: flex; flex-direction: column; }
.dash-chart .dash-scroll > * { margin: auto; }
.dash-chart .dash-svg { width: 100%; max-width: 760px; }
.dash-ring { gap: 28px; justify-content: center; width: 100%; }
.dash-donut { width: 160px; }
.dash-legend-list { max-width: 420px; }
.dash-legend-list div { padding: 8px 0; gap: 8px; }
/* Listes : lignes plus hautes, separateurs plus legers. */
.dash-li { padding: 12px 2px; border-bottom-color: color-mix(in srgb, var(--color-line-soft) 70%, transparent); }
.dash-li small { margin-top: 2px; }
.dash-li button { opacity: .9; transition: opacity .2s ease, background-color .2s ease; }
.dash-li:hover button { opacity: 1; }
/* Apparition en douceur : contenu en fondu, barres qui se deploient. */
@media (prefers-reduced-motion: no-preference) {
  .dash-animate > * { animation: dash-in .35s ease both; }
  .dash-animate .dash-bar-seg { transform-box: fill-box; transform-origin: left center; animation: dash-grow .6s cubic-bezier(.2, .7, .2, 1) both; }
  .dash-animate .dash-donut circle { animation: dash-in .5s ease both; }
}
@keyframes dash-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dash-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Vue d'ensemble : problemes par site a gauche, repartition de l'automatisation a droite. */
.dash-ens-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; min-height: 0; }
@media (max-width: 1000px) { .dash-ens-row { grid-template-columns: 1fr; } }
/* Cloche SM : le survol prenait le fond bleu des boutons (texte illisible, capture de Leo 12/10/2026). */
.smcheck-item:hover { background: var(--color-surface-alt); color: inherit; border-color: var(--color-primary); }
/* Cloche SM (12/10/2026, retour de Leo) : texte a gauche, « Tout est bon » a droite ; nouvelle =
   point bleu + texte fonce, deja vue = gris, plus discrete. */
.smcheck-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 8px 0 0; transition: background-color .15s ease, border-color .15s ease, opacity .15s ease; }
.smcheck-item:hover { background: var(--color-surface-alt); border-color: var(--color-border); }
.smcheck-open { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; cursor: pointer; min-width: 0; font-size: 13px; color: var(--color-text); }
.smcheck-open span { font-size: 12px; color: var(--color-muted); }
.smcheck-open:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 8px; }
.smcheck-item.new { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
.smcheck-item.new strong::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); margin-right: 7px; vertical-align: 1px; }
.smcheck-item.seen { background: var(--color-surface-alt); }
.smcheck-item.seen .smcheck-open, .smcheck-item.seen .smcheck-open strong { color: var(--color-muted); font-weight: 500; }
.smcheck-ok { margin: 0; padding: 5px 10px; font-size: 12px; font-weight: 600; border-radius: 999px; white-space: nowrap; background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid transparent; box-shadow: none; }
.smcheck-ok:hover { background: var(--color-success-text); color: #fff; }
/* Regroupements et « pas besoin de filtre » (12/10/2026) : geres, en gris doux. */
:root { --dash-noeud: #a8b0b8; --dash-nofilter: #dde1e5; }
[data-theme="dark"] { --dash-noeud: #6b7280; --dash-nofilter: #3a3d42; }
.dash-li-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dash-nf-btn { font-size: 12px; color: var(--color-muted); margin: 0; padding: 0; }
.dash-nf-btn:hover { color: var(--color-text); }
/* Mes demandes : categories en trop repliees (12/10/2026). */
.md-more { margin-top: 4px; }
.md-more > summary { cursor: pointer; color: var(--color-primary); font-size: 12.5px; font-weight: 500; list-style: none; }
.md-more > summary::-webkit-details-marker { display: none; }
.md-more > summary::after { content: ' ▾'; }
.md-more[open] > summary::after { content: ' ▴'; }
.md-more[open] > summary { margin-bottom: 4px; }
/* PIQA > Demandes SM (12/10/2026, capture d'Adam : Date et boutons hors de la carte) : boutons
   empiles dans une colonne etroite, texte coupe meme sans espace, defilement en dernier recours. */
.table-scroll { max-width: 100%; overflow-x: auto; }
.sm-pending-table td { overflow-wrap: anywhere; }
.sm-pending-table td:nth-child(3) { min-width: 190px; }
.sm-pending-table td:nth-child(4) { min-width: 220px; max-width: 420px; }
.sm-pending-table td:nth-child(6) { min-width: 86px; }
.sm-pending-table th, .sm-pending-table td { padding-left: 10px; padding-right: 10px; }
.piqa-description { overflow-wrap: anywhere; }
.sm-actions { width: 1%; }
.sm-actions-stack { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 140px; }
.sm-actions-stack button { margin: 0; width: 100%; white-space: nowrap; }
/* Marque / Fournisseur (12/10/2026) : choix du type avant la recherche. */
.dash-kind { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 10px; border-radius: 999px; background: var(--color-surface-alt); }
.dash-kind button { margin: 0; padding: 5px 14px; border-radius: 999px; background: transparent; color: var(--color-muted); font-size: 12.5px; font-weight: 500; box-shadow: none; }
.dash-kind button:hover { background: transparent; color: var(--color-text); }
.dash-kind button.on { background: var(--color-primary); color: #fff; font-weight: 600; }
.dash-suggest { color: var(--color-primary) !important; margin-top: 3px; }
:root { --dash-probable: #f2c94c; }
[data-theme="dark"] { --dash-probable: #b8962e; }
.dash-modes { margin: 4px 0 8px; }
/* Administration > Utilisateurs facon portail (12/10/2026) : lignes compactes et regulieres. */
.users-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.users-faint { color: var(--color-faint); font-size: 12.5px; }
.users-pending { color: var(--color-warning-text); font-weight: 600; }
.users-table td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.users-table th.users-th-actions { text-align: right; }
.users-name { font-weight: 600; color: var(--color-text); font-size: 13.5px; }
.users-mail { color: var(--color-muted); font-size: 12px; margin-top: 1px; }
.users-you { font-size: 10.5px; font-weight: 600; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.users-date { color: var(--color-muted); font-size: 12.5px; white-space: nowrap; }
.users-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.users-actions button { margin: 0; }
.pill-select { width: auto; min-width: 0; max-width: 170px; height: 30px; margin: 0; padding: 0 28px 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background-color: var(--color-surface-alt); border: 1px solid transparent; }
.pill-select:hover { border-color: var(--color-border); }
.users-actions { flex-wrap: nowrap; } .users-actions button { white-space: nowrap; }
/* « Assigner » depuis une demande Merch (12/10/2026) : action principale puis liens discrets. */
.assigner-actions { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.assigner-actions button { margin: 0; }
/* Les etapes de verification restent de vrais boutons, meme en version compacte (16/10/2026). */
.assigner-actions-compact .secondary:not(.assigner-step) { background: none; border: 0; padding: 4px 6px; color: var(--color-muted); text-decoration: underline; font-weight: 500; }
.assigner-actions-compact .secondary:not(.assigner-step):hover { background: none; color: var(--color-primary); }
/* Actions d'une demande SM dans PIQA (12/10/2026) : une action principale, « Marquer traité », le
   reste (Stand-by, Supprimer) dans le menu « ⋯ ». */
.sm-more { position: relative; align-self: flex-end; }
.sm-more > summary { list-style: none; cursor: pointer; width: 32px; height: 28px; display: grid; place-items: center; border-radius: 999px; color: var(--color-muted); font-weight: 700; letter-spacing: 1px; }
.sm-more > summary::-webkit-details-marker { display: none; }
.sm-more > summary:hover, .sm-more[open] > summary { background: var(--color-surface-alt); color: var(--color-text); }
.sm-more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--color-surface); border-radius: 12px; box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--color-border); min-width: 130px; }
.sm-more-menu button { margin: 0; width: 100%; }
/* « Filtres catégorie » / Analyser (12/10/2026, allege) : options techniques repliees, outils
   secondaires en liens, texte d'origine replie quand sa version surlignee est affichee. */
.cf-advanced { margin-top: 10px; }
.cf-advanced > summary, .cf-raw > summary { cursor: pointer; margin: 0; }
.cf-raw { margin-top: 4px; }
.cf-raw .piqa-description { margin-top: 6px; }
.cf-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cf-actions button { margin: 0; }
.cf-tools { display: inline-flex; gap: 2px; flex-wrap: wrap; margin-left: 4px; }
.cf-tools .secondary { background: none; border: 0; padding: 4px 8px; color: var(--color-muted); text-decoration: underline; font-weight: 500; }
.cf-tools .secondary:hover:not(:disabled) { background: none; color: var(--color-primary); }
.cf-tools .secondary:disabled { opacity: .45; text-decoration: none; }
/* Action principale deja faite sur une demande (12/10/2026) : Assigner / Analyser / Regles OMP en vert. */
.sm-actions-stack button.is-done { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-text); }
.sm-actions-stack button.is-done:hover { background: var(--color-success-bg); filter: brightness(.97); }
/* Regles OMP, longues listes (12/10/2026) : resume chiffre + copie, detail par valeur replie. */
.omp-value-summary { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.omp-value-summary button { margin: 0; }
.omp-value-details { margin-top: 6px; }
.omp-value-details > summary { cursor: pointer; margin: 0; }
/* Tableau de bord (12/10/2026) : heure de lecture + Actualiser ; statut d'une demande deja faite. */
.dash-fresh { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; }
.dash-fresh .help-text { margin: 0; }
.dash-fresh .link-btn { font-size: 12.5px; }
.dash-fresh .dash-clear:hover { color: var(--color-error-text); }
.dash-li-acts .status-chip { white-space: normal; text-align: right; }

/* Traiter les sans filtre (14/10/2026, maquette maquettes/traiter-sans-filtre.html) */
.tsf-note { margin: 0 0 12px; }
.tsf-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 8px; }
.tsf-side { position: sticky; top: 0; padding: 12px; max-height: min(640px, 70vh); overflow: auto; }
.tsf-opt { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; box-shadow: none; }
.tsf-opt:hover { background: var(--color-surface-alt); transform: none; }
.tsf-opt.on { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.tsf-opt small { color: var(--color-muted); }
.tsf-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.tsf-tabs button:not(.tsf-all) { border-radius: 999px; padding: 6px 14px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); }
.tsf-tabs button.on { background: var(--color-primary); color: #fff; }
.tsf-all { margin-left: auto; }
.tsf-group { padding: 0; margin: 0 0 12px; overflow: hidden; }
.tsf-ghead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--color-line-soft, var(--color-border)); }
.tsf-gacts { margin-left: auto; }
.tsf-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto; gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--color-line-soft, var(--color-border)); }
.tsf-row:last-of-type { border-bottom: 0; }
.tsf-decided .tsf-path, .tsf-decided .tsf-prop { opacity: .6; }
.tsf-path a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.tsf-path a:hover { color: var(--color-primary); text-decoration: underline; }
.tsf-path small, .tsf-prop small { display: block; font-size: 12px; color: var(--color-muted); overflow-wrap: anywhere; }
.tsf-prop { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.tsf-prop code { font-family: inherit; background: var(--color-surface-alt); border-radius: 6px; padding: 1px 6px; }
.tsf-prop input { width: 100%; margin: 0; }
.tsf-prop small.tsf-ok { color: var(--color-success-text); margin-top: 3px; }
.tsf-prop small.tsf-doubt { color: var(--color-warning-text); margin-top: 3px; }
.tsf-acts { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.tsf-more { display: block; width: 100%; padding: 10px; text-align: center; }
.tsf-dock { position: sticky; bottom: 0; margin: 16px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 18px; box-shadow: 0 6px 24px rgba(0, 0, 0, .14); z-index: 5; }
.tsf-dock-acts { margin-left: auto; display: flex; gap: 8px; }
.dash-ask { font-size: 12.5px; color: var(--color-muted); align-self: center; white-space: nowrap; }
.dash-warn-txt { color: var(--color-warning-text); }
.tsf-ask { font-size: 12.5px; color: var(--color-muted); align-self: center; white-space: nowrap; }
/* Place laissee a droite pour la bulle « Une idee ? » (fixe en bas a droite), qui recouvrait « Pousser » (14/10/2026). */
.tsf-dock { padding-right: 180px; }
@media (max-width: 640px) { .tsf-dock { padding-right: 18px; padding-bottom: 64px; } }
@media (max-width: 900px) { .tsf-layout { grid-template-columns: 1fr; } .tsf-side { position: static; max-height: 260px; } .tsf-row { grid-template-columns: 1fr; } .tsf-acts { justify-content: flex-start; } }

/* ---------- Visite guidee des formulaires (15/10/2026, maquettes/visite-guidee-merch.html, voir guided-tour.js) ---------- */
.gt-help { font-weight: 700; font-size: 16px; color: var(--color-primary); }
.gt-spot { position: fixed; z-index: 3000; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(15, 20, 35, .62); transition: all .35s cubic-bezier(.4, .1, .2, 1); pointer-events: none; }
/* Halo qui s'elargit de la meme facon tout autour (pas de zoom : sur une zone large, scale() le decalait,
   retour d'Adam du 15/10/2026). */
.gt-spot.gt-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 14px; animation: gt-pulse 1.6s infinite; }
@keyframes gt-pulse { 0% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .95); } 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }
.gt-tip { position: fixed; z-index: 3001; width: 330px; max-width: calc(100vw - 32px); background: var(--color-surface); color: var(--color-text); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); padding: 16px 18px; transition: top .35s, left .35s; }
.gt-tip h3 { margin: 0 0 6px; font-size: 15.5px; }
.gt-tip p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; }
.gt-wait { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 10px; padding: 7px 10px; margin: -4px 0 12px; }
.gt-wait.gt-ok { color: var(--color-success-text); background: var(--color-success-bg); }
.gt-blink { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; animation: gt-blink 1s infinite; }
@keyframes gt-blink { 50% { opacity: .25; } }
.gt-foot { display: flex; align-items: center; gap: 6px; }
.gt-dots { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.gt-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); }
.gt-dots i.on { background: var(--color-primary); width: 18px; border-radius: 4px; }
.gt-link { border: 0; background: none; color: var(--color-muted); font: inherit; font-size: 12.5px; cursor: pointer; padding: 6px; }
.gt-modal { position: fixed; inset: 0; z-index: 3002; background: rgba(15, 20, 35, .62); display: grid; place-items: center; padding: 16px; }
.gt-mbox { background: var(--color-surface); color: var(--color-text); border-radius: 22px; max-width: 440px; width: 100%; padding: 26px 28px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); animation: gt-pop .35s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes gt-pop { from { transform: scale(.85); opacity: 0; } }
.gt-big { font-size: 44px; line-height: 1; }
.gt-mbox h2 { margin: 10px 0 6px; font-size: 20px; }
.gt-mbox p { color: var(--color-muted); margin: 0 0 18px; }
.gt-mrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.gt-conf { position: fixed; z-index: 3003; width: 9px; height: 14px; border-radius: 2px; top: -20px; animation: gt-fall linear forwards; pointer-events: none; }
@keyframes gt-fall { to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .gt-spot, .gt-tip { transition: none; } .gt-spot.gt-pulse::after, .gt-blink, .gt-mbox { animation: none; } }
.gt-tip h3.gt-drag { cursor: grab; user-select: none; touch-action: none; }
.gt-tip h3.gt-drag:active { cursor: grabbing; }
body.gt-room .page-content { padding-bottom: 60vh; }
/* Etapes de verification de « Assigner » bien visibles (contour bleu), vertes une fois faites (.assigned). */
.assigner-actions .assigner-step:not(.assigned) { border: 1.5px solid var(--color-primary); color: var(--color-primary); background: var(--color-surface); font-weight: 600; }
.assigner-actions .assigner-step:not(.assigned):hover { background: var(--color-primary-soft); }
.assigner-actions #category-assigner-submit.assigned { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-text); opacity: 1; cursor: default; }
/* Periode d'un merch (21/10/2026, period-picker.js) : calendrier d'un mois facon Windows, premier jour
   puis dernier jour, la periode coloree entre les deux. */
.pp { margin-top: 14px; }
.pp-cal { margin-top: 10px; max-width: 320px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px; }
.pp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; text-transform: capitalize; font-size: 14px; }
.pp-nav { background: transparent; border: 0; color: var(--color-muted); font-size: 11px; padding: 4px 8px; margin: 0; cursor: pointer; border-radius: 6px; }
.pp-nav:hover { background: var(--color-surface-alt); color: var(--color-text); }
.pp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; text-align: center; }
.pp-dow { font-size: 11.5px; color: var(--color-muted); padding: 4px 0; }
.pp-day { background: transparent; border: 0; margin: 0; padding: 0; height: 34px; font-size: 13px; color: var(--color-text); cursor: pointer; border-radius: 0; }
.pp-day:hover:not(:disabled) { background: var(--color-primary-soft); border-radius: 999px; }
.pp-day.pp-out { color: var(--color-muted); }
.pp-day.pp-past { color: var(--color-faint, var(--color-muted)); opacity: .45; cursor: default; }
.pp-day.pp-today { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pp-day.pp-in { background: var(--color-primary-soft); }
.pp-day.pp-start, .pp-day.pp-end { background: var(--color-primary); color: #fff; font-weight: 600; border-radius: 999px; }
.pp-day.pp-start:not(.pp-end) { border-radius: 999px 0 0 999px; }
.pp-day.pp-end:not(.pp-start) { border-radius: 0 999px 999px 0; }
.period-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); white-space: nowrap; }
.period-chip.due { background: var(--color-warning-bg); color: var(--color-warning-text); font-weight: 600; }
.period-chip.ended { background: var(--color-warning-bg); color: var(--color-warning-text); font-weight: 600; }
.period-chip.done { background: var(--color-surface-alt); color: var(--color-muted); }
/* Suggestions par personne (21/10/2026, hub PIQA) : une carte par auteur, clic = ses idees seulement. */
.sugg-people { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.sugg-person { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 14px; padding: 10px 14px; margin: 0; min-width: 210px; cursor: pointer; font-weight: 400; }
.sugg-person:hover { border-color: var(--color-primary); transform: none; box-shadow: none; }
.sugg-person.on { border: 2px solid var(--color-primary); background: var(--color-primary-soft); padding: 9px 13px; }
.sugg-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 700; }
.sugg-avatar.all { background: var(--color-surface-alt); font-size: 16px; }
.sugg-person-body { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.sugg-person-meta { font-size: 11.5px; color: var(--color-muted); }
.sugg-person-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.sugg-person-chip { font-size: 11px; padding: 1px 7px; border-radius: 999px; }
.sugg-person-chip.todo { background: var(--color-warning-bg); color: var(--color-warning-text); font-weight: 600; }
.sugg-person-chip.doing { background: var(--color-primary-soft); color: var(--color-primary); }
.sugg-person-chip.done { background: var(--color-success-bg); color: var(--color-success-text); }
/* Merch, etape 3 : « Dupliquer » mis en avant (22/10/2026). */
.merch-duplicate-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 12px 16px; border: 1.5px dashed var(--color-primary); border-radius: 14px; background: var(--color-primary-soft); }
.merch-duplicate-icon { font-size: 22px; line-height: 1; }
.merch-duplicate-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.merch-duplicate-text span { font-size: 12.5px; color: var(--color-muted); }
/* Apercu Merch : croix pour retirer un produit du merch (22/10/2026). La carte « désactivé » garde sa place a droite, la croix passe dessous. */
.merch-preview-remove { position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.merch-preview-remove:hover { background: var(--color-error-bg); color: var(--color-error-text); border-color: var(--color-error-text); transform: none; }
.merch-preview-img .merch-preview-flag { top: 38px; }
/* « Vider mon merch » (22/10/2026) : discret, rouge au survol (action qui retire tout). */
.cmb-clear-btn:hover { color: var(--color-error-text); border-color: var(--color-error-text); background: var(--color-error-bg); }
/* Journal des categories (26/10/2026, reserve a Adam) : reprend les cartes par personne des Suggestions. */
.cj-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.cj-bar select, .cj-bar input { width: auto; flex: 0 1 auto; margin: 0; }
.cj-bar input { min-width: 260px; }
.cj-legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 6px; font-size: 12px; }
.cj-chip { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; }
.cj-chip.blue { background: var(--color-primary-soft); color: var(--color-primary); }
.cj-chip.grey { background: var(--color-surface-alt); color: var(--color-muted); }
.cj-chip.ok { background: var(--color-success-bg); color: var(--color-success-text); }
.cj-chip.warn { background: var(--color-warning-bg); color: var(--color-warning-text); font-weight: 600; }
.cj-day { font-size: 12px; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .03em; margin: 18px 0 4px; }
.cj-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--color-border); }
.cj-day + .cj-row { border-top: 0; }
.cj-time { color: var(--color-muted); font-size: 12.5px; min-width: 42px; padding-top: 8px; }
.cj-main { flex: 1; min-width: 0; font-size: 13.5px; }
.cj-main details summary { cursor: pointer; color: var(--color-primary); font-size: 12.5px; margin-top: 4px; }
.cj-main details ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.sugg-avatar.cj-mag { background: #8a9399; }
/* Retour depuis « Traiter les sans filtre » (28/10/2026) : lien en forme de bouton secondaire. */
.tsf-back { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: 12.5px; text-decoration: none; margin-bottom: 8px; }
.tsf-back:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tsf-reset { margin-left: 8px; }
.tsf-reset:hover { color: var(--color-error-text); }
/* Connexion commune PIQA (28/10/2026) : bouton sous le bouton Google, meme gabarit. */
.piqa-signin-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 1px solid var(--color-primary); border-radius: 4px; color: var(--color-primary); background: var(--color-surface); font-size: 14px; font-weight: 500; text-decoration: none; }
.piqa-signin-btn:hover { background: var(--color-primary-soft); }
/* Valeurs du site (02/11/2026, onglet du Journal des categories). */
.sv-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.sv-stat { background: var(--color-surface-alt); border-radius: 12px; padding: 8px 14px; font-size: 12.5px; color: var(--color-muted); }
.sv-stat b { display: block; font-size: 18px; color: var(--color-text); }
.sv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sv-table th { text-align: left; font-size: 12px; color: var(--color-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--color-border); }
.sv-table td { padding: 7px 8px; border-top: 1px solid var(--color-border); vertical-align: top; }
.sv-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.sv-table details summary { cursor: pointer; color: var(--color-primary); font-size: 12.5px; }
.sv-table details p { margin: 6px 0 0; font-size: 12.5px; }
.sv-bar { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-bar i { display: block; height: 6px; border-radius: 99px; background: var(--color-primary); opacity: .35; }
/* Nouvelles familles (09/11/2026, onglet du Journal des categories) : conseil de categorie par site. */
.nf-advice { background: var(--color-surface-alt); border-radius: 12px; padding: 10px 12px; margin-top: 8px; font-weight: 400; }
.nf-advice-row { display: flex; gap: 8px 10px; align-items: baseline; flex-wrap: wrap; padding: 5px 0; border-top: 1px dashed var(--color-border); font-size: 12.5px; }
.nf-advice-row:first-of-type { border-top: 0; }
.nf-site { font-weight: 600; min-width: 120px; }
.sv-table tr.nf-advice-tr td { border-top: 0; padding-top: 0; }
.nf-advice-tr .nf-advice { margin-top: 0; }
.nf-picks { flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; padding-left: 130px; }
.nf-pick { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; cursor: pointer; margin: 0; font-weight: 400; }
.nf-pick input { width: auto; margin: 0; }
@media (max-width: 700px) { .nf-picks { padding-left: 0; } }