/* ============================================================================
   app-da.css — Refonte de DIRECTION ARTISTIQUE du PANEL ADMIN, cohérente avec le
   portail client (clair, indigo + émeraude, cartes douces). Chargée APRÈS app.css
   → surcharge par cascade. Non-destructif : aucune règle existante ni logique
   modifiée. Retrait = supprimer le <link> dans index.html.
   ============================================================================ */

/* ---- Palette : on surcharge les variables de app.css ---- */
:root {
  --bg: #f1f2ec;
  --panel: #ffffff;
  --panel-soft: #f7f7f3;
  --border: #e7e8e1;
  --muted: #6b7280;
  --text: #15171c;
  --ink: #15171c;
  --blue: #5b50e0;      /* accent principal → indigo */
  --cyan: #5b50e0;      /* l'ancien turquoise → indigo */
  --green: #10b981;     /* succès → émeraude */
  --violet: #5b50e0;
  --amber: #c77700;
  --red: #e0564f;
  --shadow: 0 14px 34px rgba(17, 22, 34, .07);
  --accent: #5b50e0;
  --accent-soft: #ecebfd;
}

body { background: var(--bg); }

/* ---- FOND admin : warm UNI, sans le dégradé bleuté ni la grille teal d'app.css
   (qui posait `body:has(.admin-top-shell){ background: …#eef5f8… !important }`).
   Contenu = --bg (#f1f2ec, chaud) ; le menu reste #fbfbf8 → léger contraste
   chaud, zéro bleu. ---- */
body:has(.admin-top-shell) {
  background: var(--bg) !important;
  background-image: none !important;
  background-size: auto !important;
}

/* ---- En-tête : clair, doux, accent indigo ---- */
.admin-header {
  background: #ffffff !important;
  box-shadow: 0 1px 0 var(--border), 0 10px 26px rgba(17, 22, 34, .05) !important;
  border-bottom: 1px solid var(--border);
}
.admin-brand strong { color: var(--ink) !important; }
.admin-brand span { color: var(--accent) !important; }
/* Header : BLANC PUR comme le menu (app.css le teintait en bleuté via
   `body:has(.admin-top-shell) .admin-header{ background: rgba(247,251,253,.97) }`
   ligne ~5681). Même sélecteur + !important, chargé après → gagne. */
body:has(.admin-top-shell) .admin-header {
  background: #ffffff !important;
  border-bottom-color: var(--border) !important;
}

/* ---- Onglets : pills claires, actif indigo plein ---- */
.top-nav button,
.top-nav .nav-more-toggle {
  background: #f0f0ea !important;
  border: 1px solid transparent !important;
  color: #4b5160 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.top-nav button:hover,
.top-nav .nav-more-toggle:hover {
  background: #e6e6dd !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.top-nav button.active,
.top-nav .nav-more-toggle.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
.nav-more-menu {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}
.nav-more-menu button { color: var(--ink) !important; }

/* Menu arborescent : par défaut (barre horizontale / mobile) les sections sont « transparentes »
   (display:contents) → les entrées s'affichent en ligne comme avant ; les libellés de section
   n'apparaissent qu'en mode sidebar (≥1181px, réglé plus bas). */
.nav-section { display: contents; }
.nav-section-toggle { display: none; }
.nav-section-items { display: contents; }

/* ---- Bouton « Process ÉQUIPE » → indigo cohérent ---- */
.process-quick-btn {
  background: linear-gradient(135deg, #6a5fe6 0%, #5b50e0 58%, #4a40c8 100%) !important;
  border-color: #4a40c8 !important;
  color: #fff !important;
  box-shadow: 0 14px 32px rgba(91, 80, 224, .32) !important;
  border-radius: 14px !important;
}
.process-quick-btn span,
.process-quick-btn strong { color: #fff !important; }

/* ---- Recherche + champs : focus indigo ---- */
.global-search > input:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(91, 80, 224, .14) !important;
  outline: none;
}

/* ---- Barre d'actions (haut droite) ---- */
.admin-userbar .btn { border-radius: 10px; }

/* ---- Cartes métriques (.stat) : arrondi + ombre douce ---- */
.stat {
  background: var(--panel) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow);
}

/* ---- Panneaux / cartes (.panel) : arrondi + ombre douce ---- */
.panel {
  border-radius: 16px !important;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.panel-head { margin-bottom: 14px; }

/* ---- Boutons ---- */
.btn { border-radius: 10px; }
.btn.primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn.blue { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn.green { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }

/* ---- Badges / pills : arrondis ---- */
.pill { border-radius: 999px; }

/* ---- Modales : arrondi + ombre douce ---- */
.modal { border-radius: 16px !important; box-shadow: 0 24px 60px rgba(17, 22, 34, .2) !important; }

/* ---- Pied de page ---- */
.app-footer { background: #fbfbf8 !important; border-top: 1px solid var(--border); }

/* ---- Contenu : fond warm hérité ---- */
#content, .content { background: transparent; }

/* ---- Connexion admin ---- */
.login { background: var(--bg) !important; }
.login-card { border-radius: 16px; box-shadow: var(--shadow); }

/* ============================================================================
   Surcharge du THÈME ADMIN ACTUEL (couche `body:has(.admin-top-shell)` de app.css,
   en cyan #13b8d1). On reprend les MÊMES sélecteurs (même spécificité) + !important,
   chargés après → l'indigo gagne. C'est ce qui restait en turquoise.
   ============================================================================ */
body:has(.admin-top-shell) .process-quick-btn {
  background: linear-gradient(135deg, #6a5fe6 0%, #5b50e0 58%, #4a40c8 100%) !important;
  border-color: #4a40c8 !important;
  color: #ffffff !important;
  box-shadow: 0 15px 32px rgba(91, 80, 224, .28) !important;
}
body:has(.admin-top-shell) .process-quick-btn strong { color: rgba(255, 255, 255, .82) !important; }

body:has(.admin-top-shell) .btn.primary,
body:has(.admin-top-shell) .home-action.primary,
body:has(.admin-top-shell) .dash-action.primary {
  background: linear-gradient(135deg, #6a5fe6 0%, #5b50e0 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(91, 80, 224, .20) !important;
}
body:has(.admin-top-shell) .btn.blue,
body:has(.admin-top-shell) .dash-action.blue {
  background: #ecebfd !important;
  border-color: #d3cffa !important;
  color: #4036b0 !important;
}
body:has(.admin-top-shell) .global-search > input:focus {
  border-color: #5b50e0 !important;
  box-shadow: 0 0 0 4px rgba(91, 80, 224, .14) !important;
}
body:has(.admin-top-shell) .global-search-row:hover,
body:has(.admin-top-shell) .global-search-row:focus { border-color: #5b50e0 !important; }
body:has(.admin-top-shell) .nav-more-menu {
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}
body:has(.admin-top-shell) .top-nav button.active,
body:has(.admin-top-shell) .top-nav .nav-more-toggle.active {
  background: #5b50e0 !important;
  color: #ffffff !important;
  border-color: #5b50e0 !important;
}
body:has(.admin-top-shell) .panel,
body:has(.admin-top-shell) .stat,
body:has(.admin-top-shell) .modal {
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* ============================================================================
   RÉAGENCEMENT : la barre d'onglets du haut devient un MENU LATÉRAL gauche,
   comme le dashboard client (items verticaux, actif indigo, regroupés
   logiquement). Desktop uniquement (≥1181px) — en mobile le hamburger natif
   d'Indy reste en place.
   ============================================================================ */
@media (min-width: 1181px) {
  /* La nav devient une sidebar fixe à gauche */
  body:has(.admin-top-shell) #adminTopNav.top-nav {
    position: fixed !important;
    left: 0 !important; top: 0 !important; right: auto !important;
    width: 250px !important; height: 100vh !important; max-height: 100vh !important;
    flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; justify-content: flex-start !important;
    gap: 3px !important; padding: 16px 14px 20px !important; margin: 0 !important;
    background: #ffffff !important; border-right: 1px solid var(--border) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    z-index: 45 !important; box-shadow: none !important;
  }
  /* Items verticaux pleine largeur, alignés à gauche */
  body:has(.admin-top-shell) #adminTopNav.top-nav button,
  body:has(.admin-top-shell) #adminTopNav.top-nav .nav-more-toggle {
    width: 100% !important; justify-content: flex-start !important; text-align: left !important;
    background: transparent !important; border: 1px solid transparent !important;
    border-radius: 10px !important; color: #4b5160 !important; font-weight: 600 !important;
    padding: 10px 13px !important; min-height: 42px !important; box-shadow: none !important;
  }
  body:has(.admin-top-shell) #adminTopNav.top-nav button:hover,
  body:has(.admin-top-shell) #adminTopNav.top-nav .nav-more-toggle:hover {
    background: #f0f0ea !important; color: var(--ink) !important;
  }
  body:has(.admin-top-shell) #adminTopNav.top-nav button.active {
    background: var(--accent-soft) !important; color: #2a2580 !important; border-color: transparent !important;
  }

  /* CRUCIAL : neutralise tout ce qui crée un « containing block » sur les ancêtres
     (backdrop-filter, transform, filter…). Sinon la sidebar position:fixed se cale
     sur l'ancêtre au lieu du viewport (elle apparaissait à x268/y150). */
  body:has(.admin-top-shell) .app.admin-top-shell,
  body:has(.admin-top-shell) main.main,
  body:has(.admin-top-shell) .admin-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
  }

  /* On décale tout le contenu (en-tête + contenu + pied) pour la sidebar */
  body:has(.admin-top-shell) .main { padding-left: 250px !important; }

  /* ══ EN-TÊTE PROPRE : une seule barre alignée verticalement —
     [marque]  [recherche étirée]  [cluster d'actions à droite].
     La nav étant sortie en sidebar, le header n'a plus que ces zones. ══ */
  body:has(.admin-top-shell) .admin-header {
    display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
    gap: 16px !important;
    grid-template-areas: none !important; grid-template-columns: none !important;
    padding: 10px 22px !important; min-height: 58px;
  }
  /* Marque : compacte, ne rétrécit pas (accent indigo géré plus bas) */
  body:has(.admin-top-shell) .admin-brand { flex: 0 0 auto !important; min-width: 0 !important; }

  /* Zone d'actions : occupe tout le reste ; passe à la ligne proprement si besoin */
  body:has(.admin-top-shell) .admin-userbar {
    flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important;
    display: flex !important; align-items: center !important; flex-wrap: wrap !important;
    justify-content: flex-end !important; gap: 8px !important;
  }
  /* Titre de page (rendu à 1px, cassé) : masqué — le titre est déjà dans le contenu */
  body:has(.admin-top-shell) .admin-userbar .admin-page-title { display: none !important; }

  /* Ordre : recherche à gauche (étirée) · Process · Live · boutons utilitaires (droite) */
  body:has(.admin-top-shell) .admin-userbar > * { order: 5 !important; }
  body:has(.admin-top-shell) .admin-userbar .global-search {
    order: 1 !important; flex: 1 1 160px !important;
    min-width: 150px !important; max-width: 760px !important; margin: 0 !important;
  }
  body:has(.admin-top-shell) .admin-userbar .process-quick-btn {
    order: 2 !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important;
    min-height: 42px !important; padding: 6px 15px !important; margin: 0 !important;
  }
  body:has(.admin-top-shell) .admin-userbar .client-live-chip { order: 3 !important; flex: 0 0 auto !important; }
  /* Boutons utilitaires (Notifs / Portail / Préférences / Sortir) : compacts, homogènes */
  body:has(.admin-top-shell) .admin-userbar .btn.ghost,
  body:has(.admin-top-shell) .admin-userbar .desktop-notify-btn {
    min-height: 35px !important; padding: 0 9px !important; border-radius: 9px !important;
    font-size: 12px !important; font-weight: 600 !important; white-space: nowrap;
  }

  /* Menu arborescent : sections groupées dans la sidebar (libellé de thème + entrées) */
  body:has(.admin-top-shell) #adminTopNav .nav-section {
    display: block !important; width: 100% !important;
    margin-top: 6px !important; padding-top: 6px !important;
    border-top: 1px solid var(--border) !important;
  }
  body:has(.admin-top-shell) #adminTopNav .nav-section-toggle {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    width: 100% !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
    cursor: pointer !important; font-size: 10.5px !important; font-weight: 800 !important;
    letter-spacing: .05em !important; text-transform: uppercase !important; color: #9aa0ad !important;
    padding: 7px 13px !important; border-radius: 8px !important; min-height: 0 !important;
  }
  body:has(.admin-top-shell) #adminTopNav .nav-section-toggle:hover { background: #f0f0ea !important; color: #6b7280 !important; }
  body:has(.admin-top-shell) #adminTopNav .nav-section-items { display: block !important; }
  body:has(.admin-top-shell) #adminTopNav .nav-section.collapsed .nav-section-items { display: none !important; }
  body:has(.admin-top-shell) #adminTopNav .nav-caret { transition: transform .15s ease; font-size: 9px; opacity: .65; }
  body:has(.admin-top-shell) #adminTopNav .nav-section.collapsed .nav-caret { transform: rotate(-90deg); }
  body:has(.admin-top-shell) #adminTopNav .nav-section button[data-nav] { width: 100% !important; }
}

/* Sous-titre de marque en indigo (restait turquoise) */
body:has(.admin-top-shell) .admin-brand span { color: var(--accent) !important; }

/* ============================================================================
   REFONTE « ÉPURÉE » — raffinement des COMPOSANTS PARTAGÉS du panel admin.
   Toutes les pages réutilisent ces briques (tables, panneaux, en-têtes, boutons
   d'action, cartes stat, barre du haut) → un seul nettoyage = toutes les pages
   plus claires, plus aérées, plus lisibles. CSS-only, non-destructif.
   Sélecteurs en `body:has(.admin-top-shell)` + !important pour battre, à
   spécificité égale et chargé après, la couche de thème turquoise d'app.css.
   ============================================================================ */

/* ---- Respiration générale du contenu ---- */
body:has(.admin-top-shell) .panel { padding: 22px 24px !important; margin-bottom: 18px; }
body:has(.admin-top-shell) .panel-head { margin-bottom: 16px !important; }
body:has(.admin-top-shell) .panel-head h2,
body:has(.admin-top-shell) .panel-head h3 { letter-spacing: -.01em; }

/* Sur-titres (eyebrow) : gris doux et espacé — fini le turquoise résiduel */
body:has(.admin-top-shell) .eyebrow,
body:has(.admin-top-shell) .panel-eyebrow {
  color: #8b909c !important; letter-spacing: .09em !important;
  font-size: 11px !important; font-weight: 700 !important;
}

/* ---- Tableaux : en-tête discret, lignes aérées, survol doux ---- */
body:has(.admin-top-shell) th,
body:has(.admin-top-shell) .table-head {
  background: #f7f7f2 !important;          /* opaque → en-têtes « sticky » restent nets */
  color: #8b909c !important;
  text-transform: uppercase; letter-spacing: .05em;
  font-size: 11px !important; font-weight: 700 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
}
body:has(.admin-top-shell) td {
  padding: 13px 14px !important;
  border-bottom-color: var(--border) !important;
  vertical-align: middle;
}
body:has(.admin-top-shell) tbody tr:hover td { background: #faf9f4 !important; }

/* ---- Boutons d'action : pills nettes et homogènes (couleurs sémantiques gardées) ---- */
body:has(.admin-top-shell) .btn { border-radius: 9px !important; font-weight: 600 !important; }
body:has(.admin-top-shell) .btn.small {
  border-radius: 8px !important; min-height: 31px !important;
  padding: 0 11px !important; font-size: 12px !important;
}
/* Groupe d'actions en cellule : espacement régulier, alignés proprement */
body:has(.admin-top-shell) td .btn.small,
body:has(.admin-top-shell) td .btn { margin: 3px 4px 0 0 !important; }

/* ---- Pastilles de statut : douces et lisibles ---- */
body:has(.admin-top-shell) .pill { border-radius: 999px !important; font-weight: 700 !important; }

/* ---- Cartes stat : accent INDIGO unifié (fini le turquoise), plus aérées ---- */
body:has(.admin-top-shell) .stat { padding: 18px 20px !important; }
body:has(.admin-top-shell) .stat::before { background: var(--accent) !important; }
body:has(.admin-top-shell) .stat strong { letter-spacing: -.02em; }

/* ---- Barre du haut : info « live clients » lisible, non comprimée ----
   NB : on ne touche PAS à padding-left → app.css réserve 28px à gauche pour la
   pastille d'état (.client-live-chip:not(.idle)). Sinon le point vert chevauche
   le texte. */
body:has(.admin-top-shell) .client-live-chip {
  line-height: 1.35 !important;
  font-size: 11px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  padding-right: 13px !important;
  max-width: 150px;
  border-radius: 12px !important;
}

/* ---- En-tête « Comptabilité » : bandeau sombre retonifié en INDIGO (était
   dégradé vers le turquoise #0f766e — hors palette). ---- */
body:has(.admin-top-shell) .accounting-hero {
  background: linear-gradient(135deg, #14122e 0%, #1d1a44 52%, #4a40c8 100%) !important;
}

/* ---- En-tête : marque avec accent INDIGO (était un liseré teal #13b8d1) ---- */
body:has(.admin-top-shell) .admin-brand { border-left-color: var(--accent) !important; }

/* ---- Filtres de recherche : masqués par défaut (header dégagé) → s'ouvrent en
   petit panneau quand on FOCUS la recherche ET qu'elle est vide (donc pas de
   collision avec la liste de résultats, qui n'apparaît qu'en tapant). Pastilles
   « toggle » nettes (actif = indigo doux). Fonctionnalité 100% préservée. ---- */
body:has(.admin-top-shell) .global-search-filters { display: none !important; }
body:has(.admin-top-shell) .global-search:focus-within:has(input:placeholder-shown) .global-search-filters {
  display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
  position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; right: auto !important;
  z-index: 60 !important; margin: 0 !important; padding: 10px 12px !important; min-width: 252px;
  background: #ffffff !important; border: 1px solid var(--border) !important; border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}
body:has(.admin-top-shell) .search-filter {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 4px 11px !important; border: 1px solid var(--border) !important; border-radius: 999px !important;
  background: #ffffff !important; color: #6b7280 !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  cursor: pointer; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
body:has(.admin-top-shell) .search-filter input {
  width: 13px !important; height: 13px !important; accent-color: var(--accent); margin: 0 !important;
}
body:has(.admin-top-shell) .search-filter:has(input:checked) {
  background: var(--accent-soft) !important; border-color: #c9c4f7 !important; color: #3a32a8 !important;
}

/* ---- Pastille « live clients » : on retire la ligne-teaser pour la rendre compacte (2 lignes) ---- */
body:has(.admin-top-shell) .client-live-chip small { display: none !important; }

/* ---- Barres d'outils (recherche + boutons d'action de page) : alignées, aérées ---- */
body:has(.admin-top-shell) .toolbar { gap: 10px !important; align-items: center; }

/* ============================================================================
   MUR DE RANGEMENT (page "Rangement" — slots + LED ESP32)
   ============================================================================ */
body:has(.admin-top-shell) .slot-grid {
  display: grid; grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 8px; margin-top: 16px;
}
@media (max-width: 1300px) { body:has(.admin-top-shell) .slot-grid { grid-template-columns: repeat(10, 1fr); } }
@media (max-width: 760px)  { body:has(.admin-top-shell) .slot-grid { grid-template-columns: repeat(5, 1fr); } }
body:has(.admin-top-shell) .slot {
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  padding: 9px 6px; min-height: 86px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center; cursor: pointer; overflow: hidden;
  transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease;
}
body:has(.admin-top-shell) .slot:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
body:has(.admin-top-shell) .slot.sel { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(91, 80, 224, .18); }
body:has(.admin-top-shell) .slot.status-empty { background: #faf9f4; }
body:has(.admin-top-shell) .slot .slot-num { font-size: 10.5px; font-weight: 800; color: #9aa0ab; letter-spacing: .02em; display: flex; align-items: center; gap: 5px; }
body:has(.admin-top-shell) .slot .slot-rack { font-size: 9px; font-weight: 700; color: var(--accent); background: rgba(91, 80, 224, .1); border-radius: 5px; padding: 1px 4px; }
body:has(.admin-top-shell) .slot.lit { border-color: var(--green) !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, .25); }
body:has(.admin-top-shell) .slot .slot-tick { font-size: 12.5px; font-weight: 800; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:has(.admin-top-shell) .slot .slot-meta { font-size: 10px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:has(.admin-top-shell) .slot .slot-empty { font-size: 11px; color: #b3b8c2; font-style: italic; }
body:has(.admin-top-shell) .slot .pill { transform: scale(.82); margin: 1px 0; }
/* --- Mur physique : 5 racks × 5 étagères × 3 positions --- */
body:has(.admin-top-shell) .rack-wall { display: flex; gap: 14px; margin-top: 16px; overflow-x: auto; padding-bottom: 6px; }
body:has(.admin-top-shell) .rack-col { flex: 1 1 0; min-width: 156px; border: 1px solid var(--border); border-radius: 14px; background: #faf9f4; padding: 8px; }
body:has(.admin-top-shell) .rack-col-head { font-size: 12px; font-weight: 800; color: var(--accent); text-align: center; margin-bottom: 8px; letter-spacing: .02em; }
body:has(.admin-top-shell) .shelf-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
body:has(.admin-top-shell) .shelf-row:last-child { margin-bottom: 0; }
body:has(.admin-top-shell) .shelf-lvl { font-size: 9px; font-weight: 700; color: #9aa0ab; width: 46px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
body:has(.admin-top-shell) .shelf-size { font-size: 8px; font-weight: 800; border-radius: 4px; padding: 0 3px; align-self: flex-start; }
body:has(.admin-top-shell) .shelf-size.sz-grand { background: #e6f0ff; color: #185FA5; }
body:has(.admin-top-shell) .shelf-size.sz-petit { background: #eafbe9; color: #3B6D11; }
body:has(.admin-top-shell) .shelf-size.sz-moyen { background: #fdf0db; color: #854F0B; }
body:has(.admin-top-shell) .rg-size-line { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
body:has(.admin-top-shell) .rg-size-line strong { color: var(--ink); font-weight: 700; }
body:has(.admin-top-shell) .shelf-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; flex: 1; }
body:has(.admin-top-shell) .shelf-cell { border: 1px solid var(--border); border-radius: 8px; background: #fff; min-height: 42px; padding: 3px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; overflow: hidden; transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease; }
body:has(.admin-top-shell) .shelf-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
body:has(.admin-top-shell) .shelf-cell.vide { background: transparent; border-style: dashed; cursor: default; }
body:has(.admin-top-shell) .shelf-cell.sel { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(91, 80, 224, .22); }
body:has(.admin-top-shell) .shelf-cell.lit { border-color: var(--green) !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, .32); }
body:has(.admin-top-shell) .shelf-cell.status-empty { background: #f4f3ee; }
body:has(.admin-top-shell) .shelf-cell.libre { cursor: default; }
body:has(.admin-top-shell) .shelf-cell.libre:hover { transform: none; box-shadow: none; }
body:has(.admin-top-shell) .rg-hint { font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
body:has(.admin-top-shell) .rg-status-row { flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 4px; }
body:has(.admin-top-shell) .status-show-btn { display: inline-flex; align-items: center; gap: 6px; }
body:has(.admin-top-shell) .status-show-btn .ss-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
body:has(.admin-top-shell) .status-show-btn.on { border-color: var(--accent) !important; background: var(--accent-soft); font-weight: 700; }
body:has(.admin-top-shell) .shelf-cell.grp { font-weight: 700; }
body:has(.admin-top-shell) .shelf-cell.grp .cell-tick { color: var(--ink); }
body:has(.admin-top-shell) .sig-audit { display: grid; gap: 4px; margin: 8px 0; padding: 8px 10px; border: 0.5px solid var(--border); border-radius: 8px; background: #faf9f4; font-size: 12px; }
body:has(.admin-top-shell) .sig-audit > div { display: flex; justify-content: space-between; gap: 12px; }
body:has(.admin-top-shell) .sig-audit span { color: var(--muted); flex: 0 0 auto; }
body:has(.admin-top-shell) .sig-audit strong { color: var(--ink); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:has(.admin-top-shell) .sig-audit .sig-ua strong { font-size: 10.5px; font-weight: 500; }
body:has(.admin-top-shell) .rg-legend { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; padding: 10px 12px; border: 0.5px solid var(--border); border-radius: 10px; background: #faf9f4; }
body:has(.admin-top-shell) .lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--ink); }
body:has(.admin-top-shell) .lg-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 4px; }
body:has(.admin-top-shell) .lg-item { display: inline-flex; align-items: center; gap: 6px; }
body:has(.admin-top-shell) .lg-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
body:has(.admin-top-shell) .lg-mode { width: 11px; height: 11px; border-radius: 999px; display: inline-block; flex: 0 0 auto; background: #6b7280; }
body:has(.admin-top-shell) .lg-mode.fast { animation: lgBlinkFast .4s steps(1, end) infinite; }
body:has(.admin-top-shell) .lg-mode.slow { animation: lgBlinkSlow 1.4s steps(1, end) infinite; }
@keyframes lgBlinkFast { 50% { opacity: .15; } }
@keyframes lgBlinkSlow { 50% { opacity: .15; } }
body:has(.admin-top-shell) .shelf-cell .cell-pos { font-size: 8.5px; font-weight: 800; color: #9aa0ab; }
body:has(.admin-top-shell) .shelf-cell .cell-tick { font-size: 10px; font-weight: 800; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:has(.admin-top-shell) .shelf-cell.status-new { border-left: 4px solid #005aff; }
body:has(.admin-top-shell) .shelf-cell.status-diagnostic { border-left: 4px solid #ffd700; }
body:has(.admin-top-shell) .shelf-cell.status-waiting_client { border-left: 4px solid #ff0096; }
body:has(.admin-top-shell) .shelf-cell.status-waiting_part { border-left: 4px solid #ff5a00; }
body:has(.admin-top-shell) .shelf-cell.status-repairing { border-left: 4px solid #9600ff; }
body:has(.admin-top-shell) .shelf-cell.status-ready { border-left: 4px solid #00dc3c; }
body:has(.admin-top-shell) .shelf-cell.status-irreparable { border-left: 4px solid #ff0000; }
body:has(.admin-top-shell) .shelf-cell.status-delivered, body:has(.admin-top-shell) .shelf-cell.status-cancelled { border-left: 4px solid #888; }

/* Slots allumés sur le mur : clignotement à l'écran, synchronisé couleur réelle (--lit-color)
   + vitesse (fixed/slow/fast). Plusieurs slots peuvent clignoter ensemble ; le serveur les
   éteint après 30 s (re-render via SSE storage_updated). */
body:has(.admin-top-shell) .shelf-cell.lit { border-color: var(--lit-color, #0078ff) !important; z-index: 1; }
body:has(.admin-top-shell) .shelf-cell.lit-fixed { box-shadow: 0 0 0 2px var(--lit-color, #0078ff), 0 0 12px 1px var(--lit-color, #0078ff); }
body:has(.admin-top-shell) .shelf-cell.lit-fast { animation: cellBlinkFast .5s steps(1, end) infinite; }
body:has(.admin-top-shell) .shelf-cell.lit-slow { animation: cellBlinkSlow 1.4s steps(1, end) infinite; }
@keyframes cellBlinkFast { 0%, 49% { box-shadow: 0 0 0 2px var(--lit-color, #0078ff), 0 0 16px 2px var(--lit-color, #0078ff); } 50%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.04); } }
@keyframes cellBlinkSlow { 0%, 49% { box-shadow: 0 0 0 2px var(--lit-color, #0078ff), 0 0 16px 2px var(--lit-color, #0078ff); } 50%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.04); } }
/* Attribution d'un dossier à un slot libre (clic sur case vide) */
body:has(.admin-top-shell) .modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
body:has(.admin-top-shell) .modal-head h3 { margin: 0; font-size: 16px; color: #2a2580; }
body:has(.admin-top-shell) .assign-list { display: grid; gap: 6px; margin-top: 10px; max-height: 52vh; overflow-y: auto; }
body:has(.admin-top-shell) .assign-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid #e4e1f6; border-radius: 9px; background: #fff; cursor: pointer; font-size: 13px; }
body:has(.admin-top-shell) .assign-row:hover { border-color: var(--accent); background: #faf9ff; }
body:has(.admin-top-shell) .assign-row strong { color: #2a2580; font-weight: 800; }
body:has(.admin-top-shell) .assign-row .muted { font-size: 11.5px; }
body:has(.admin-top-shell) .esp-dot { width: 10px; height: 10px; border-radius: 999px; background: #cbd5e1; display: inline-block; flex: 0 0 auto; }
body:has(.admin-top-shell) .esp-dot.on { background: var(--green); box-shadow: 0 0 7px var(--green); }
body:has(.admin-top-shell) .esp-dot.off { background: #e24b4a; box-shadow: 0 0 7px rgba(226, 75, 74, .6); }
body:has(.admin-top-shell) .esp-dot.unknown { background: #cbd5e1; }
body:has(.admin-top-shell) .esp-indicator { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 0.5px solid var(--border); background: #fff; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: border-color .12s ease, background .12s ease; }
body:has(.admin-top-shell) .esp-indicator:hover { border-color: #c9c8c0; }
body:has(.admin-top-shell) .esp-indicator.on { color: #0a7f57; border-color: rgba(16, 185, 129, .4); background: #f0fbf5; }
body:has(.admin-top-shell) .esp-indicator.off { color: #b42318; border-color: rgba(180, 35, 24, .35); background: #fdf3f2; }
body:has(.admin-top-shell) .rangement-controls { flex-wrap: wrap; gap: 7px; align-items: center; }
body:has(.admin-top-shell) .rg-ctrl-label { font-size: 12.5px; color: var(--muted); }
body:has(.admin-top-shell) .rg-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid #d3cffa; border-radius: 12px;
  padding: 10px 14px; margin: 12px 0; font-size: 13px;
}
body:has(.admin-top-shell) .rg-banner-actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* ============================================================================
   DA — écrans secondaires : on retire le fond bleuté résiduel d'app.css
   (`rgba(247,251,255,.97)` + bordures `rgba(123,151,176,…)`) sur modales,
   panneau banque, planning, et boîtes imbriquées. Surfaces principales en blanc,
   boîtes imbriquées en warm doux, bordures warm. Sélecteurs `body:has(...)` →
   spécificité supérieure aux `.admin-top-shell .x` d'app.css.
   ============================================================================ */
body:has(.admin-top-shell) .modal,
body:has(.admin-top-shell) .bank-panel,
body:has(.admin-top-shell) .planning-side,
body:has(.admin-top-shell) .kanban-column,
body:has(.admin-top-shell) .support-column,
body:has(.admin-top-shell) .mail-folder,
body:has(.admin-top-shell) .acct-chart {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}
/* boîtes imbriquées (dans un panneau blanc) : warm doux pour rester distinctes */
body:has(.admin-top-shell) .detail-side,
body:has(.admin-top-shell) .mini-item,
body:has(.admin-top-shell) .relation-box,
body:has(.admin-top-shell) .support-card,
body:has(.admin-top-shell) .monitor-row {
  background: #f6f6f1 !important;   /* warm explicite : var(--panel-soft) est redéfini bleuté par app.css dans la coquille admin */
  border-color: var(--border) !important;
}
/* bordures bleutées génériques restantes dans la coquille admin */
body:has(.admin-top-shell) .modal-backdrop { background: rgba(17, 22, 34, .45) !important; }

/* ---- Emplacement (slot) + bouton « Allumer » sur les tickets ---- */
body:has(.admin-top-shell) .pill.slot-pill { background: var(--accent-soft) !important; color: #3a32a8 !important; border: 1px solid #d3cffa !important; }
body:has(.admin-top-shell) .slot-allumer { background: #e7f7ef !important; border-color: #bdebd2 !important; color: #0a7f57 !important; }
body:has(.admin-top-shell) .card-slot { margin: 4px 0 2px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---- Offre de rachat (modale admin) ---- */
body:has(.admin-top-shell) .buyback-modal .buyback-line { font-size: 15px; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
body:has(.admin-top-shell) .buyback-modal .buyback-recap { display: grid; gap: 4px; margin: 10px 0; font-size: 13px; }
body:has(.admin-top-shell) .buyback-modal .buyback-recap b { color: var(--muted); min-width: 150px; display: inline-block; font-weight: 600; }
body:has(.admin-top-shell) .toolbar.wrap { flex-wrap: wrap; }

/* ---- Liste tickets : table à largeur FIXE → tout tient dans le panneau, la
   colonne Actions garde sa place et ses boutons passent à la ligne (plus rien
   de coupé à droite). ---- */
body:has(.admin-top-shell) .production-table { table-layout: fixed; width: 100%; }
body:has(.admin-top-shell) .production-table th:nth-child(1), body:has(.admin-top-shell) .production-table td:nth-child(1) { width: 18%; }
body:has(.admin-top-shell) .production-table th:nth-child(2), body:has(.admin-top-shell) .production-table td:nth-child(2) { width: 14%; }
body:has(.admin-top-shell) .production-table th:nth-child(3), body:has(.admin-top-shell) .production-table td:nth-child(3) { width: 14%; }
body:has(.admin-top-shell) .production-table th:nth-child(4), body:has(.admin-top-shell) .production-table td:nth-child(4) { width: 9%; }
body:has(.admin-top-shell) .production-table th:nth-child(5), body:has(.admin-top-shell) .production-table td:nth-child(5) { width: 8%; }
body:has(.admin-top-shell) .production-table th:nth-child(6), body:has(.admin-top-shell) .production-table td:nth-child(6) { width: 11%; }
body:has(.admin-top-shell) .production-table th:nth-child(7), body:has(.admin-top-shell) .production-table td:nth-child(7) { width: 9%; }
body:has(.admin-top-shell) .production-table th:nth-child(8), body:has(.admin-top-shell) .production-table td:nth-child(8) { width: 17%; }
body:has(.admin-top-shell) .production-table td { word-break: break-word; vertical-align: top; }
body:has(.admin-top-shell) .production-table .mini-select { width: 100%; min-width: 0; }
body:has(.admin-top-shell) td.table-actions { white-space: normal !important; }
body:has(.admin-top-shell) .ta-wrap { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
body:has(.admin-top-shell) .production-table-wrap { overflow-x: auto; }

/* ---- Conformité / journal d'audit ---- */
body:has(.admin-top-shell) .integrity-banner { border-radius: 14px; padding: 14px 16px; margin: 4px 0 18px; border: 1px solid #d8d5f3; background: var(--accent-soft); }
body:has(.admin-top-shell) .integrity-banner.ok { border-color: #b8e6c8; background: #effaf2; }
body:has(.admin-top-shell) .integrity-banner.ko { border-color: #f1c0c0; background: #fdf0f0; }
body:has(.admin-top-shell) .integrity-banner strong { display: block; font-size: 15px; margin-bottom: 2px; }
body:has(.admin-top-shell) .integrity-banner.ok strong { color: #1f7a44; }
body:has(.admin-top-shell) .integrity-banner.ko strong { color: #b02a2a; }
body:has(.admin-top-shell) .integrity-banner > span { font-size: 12.5px; color: #555; }
body:has(.admin-top-shell) .integrity-issues { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: #b02a2a; }
body:has(.admin-top-shell) .conformite-page h4 { margin: 6px 0 10px; font-size: 13px; color: #444; font-weight: 700; }
body:has(.admin-top-shell) .audit-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
body:has(.admin-top-shell) .audit-table th { text-align: left; padding: 7px 9px; border-bottom: 2px solid #ece9fb; color: var(--accent); font-weight: 700; white-space: nowrap; }
body:has(.admin-top-shell) .audit-table td { padding: 7px 9px; border-bottom: 1px solid #f1f0fa; vertical-align: top; }
body:has(.admin-top-shell) .audit-table tr:hover td { background: #faf9ff; }
body:has(.admin-top-shell) .audit-table .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #777; font-size: 11.5px; }
body:has(.admin-top-shell) .audit-table .pill { background: var(--accent-soft); color: #3a32a8; border: 1px solid #d3cffa; padding: 1px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }

/* ---- Attestation de conformité ---- */
body:has(.admin-top-shell) .conf-tabs { display: flex; gap: 6px; margin: 4px 0 18px; border-bottom: 1px solid #ece9fb; }
body:has(.admin-top-shell) .conf-tab { appearance: none; border: 0; background: none; padding: 9px 14px; font-size: 13px; font-weight: 600; color: #777; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
body:has(.admin-top-shell) .conf-tab:hover { color: var(--accent); }
body:has(.admin-top-shell) .conf-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
body:has(.admin-top-shell) .attest-doc { border: 1px solid #e4e1f6; border-radius: 16px; padding: 20px 22px; margin-bottom: 22px; background: linear-gradient(180deg, #fbfaff, #fff); }
body:has(.admin-top-shell) .attest-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
body:has(.admin-top-shell) .attest-title { font-size: 19px; font-weight: 800; color: #2a2580; }
body:has(.admin-top-shell) .attest-sub { font-size: 12.5px; color: #777; margin-top: 2px; }
body:has(.admin-top-shell) .attest-score { text-align: center; min-width: 92px; border-radius: 14px; padding: 10px 8px; border: 2px solid; }
body:has(.admin-top-shell) .attest-score .score-pct { font-size: 26px; font-weight: 800; line-height: 1; }
body:has(.admin-top-shell) .attest-score .score-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; opacity: .8; }
body:has(.admin-top-shell) .score-ok { border-color: #b8e6c8; background: #effaf2; color: #1f7a44; }
body:has(.admin-top-shell) .score-warn { border-color: #f1dcb0; background: #fdf7ec; color: #9a6a14; }
body:has(.admin-top-shell) .score-ko { border-color: #f1c0c0; background: #fdf0f0; color: #b02a2a; }
body:has(.admin-top-shell) .attest-meta { margin: 16px 0 0; font-size: 12.5px; color: #444; display: grid; gap: 4px; }
body:has(.admin-top-shell) .attest-meta b { color: #2a2580; font-weight: 700; }
body:has(.admin-top-shell) .attest-tally { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; }
body:has(.admin-top-shell) .tally { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 11px; }
body:has(.admin-top-shell) .tally.ok { background: #effaf2; color: #1f7a44; }
body:has(.admin-top-shell) .tally.warn { background: #fdf7ec; color: #9a6a14; }
body:has(.admin-top-shell) .tally.todo { background: #f1f0f5; color: #666; }
body:has(.admin-top-shell) .attest-caveat { margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; background: #fdf7ec; border: 1px solid #f1dcb0; font-size: 12px; color: #6b4e12; line-height: 1.5; }
body:has(.admin-top-shell) .conf-cat { margin-bottom: 22px; }
body:has(.admin-top-shell) .conf-cat-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid #ece9fb; }
body:has(.admin-top-shell) .conf-cat-head h4 { margin: 0; font-size: 15px; color: #2a2580; font-weight: 800; }
body:has(.admin-top-shell) .cat-pct { font-size: 12px; font-weight: 800; border-radius: 8px; padding: 1px 8px; border: 1px solid; }
body:has(.admin-top-shell) .conf-item { border: 1px solid #ece9fb; border-radius: 10px; margin-bottom: 7px; overflow: hidden; background: #fff; }
body:has(.admin-top-shell) .conf-item > summary { display: flex; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer; list-style: none; font-size: 13px; }
body:has(.admin-top-shell) .conf-item > summary::-webkit-details-marker { display: none; }
body:has(.admin-top-shell) .conf-item > summary::after { content: '▸'; margin-left: auto; color: #bbb; transition: transform .15s; }
body:has(.admin-top-shell) .conf-item[open] > summary::after { transform: rotate(90deg); }
body:has(.admin-top-shell) .conf-item-title { font-weight: 600; color: #333; }
body:has(.admin-top-shell) .conf-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; flex-shrink: 0; }
body:has(.admin-top-shell) .conf-badge.ok { background: #effaf2; color: #1f7a44; border: 1px solid #b8e6c8; }
body:has(.admin-top-shell) .conf-badge.warn { background: #fdf7ec; color: #9a6a14; border: 1px solid #f1dcb0; }
body:has(.admin-top-shell) .conf-badge.todo { background: #f1f0f5; color: #666; border: 1px solid #ddd; }
body:has(.admin-top-shell) .conf-badge.na { background: #f1f0f5; color: #999; border: 1px solid #e3e3e3; }
body:has(.admin-top-shell) .conf-item.conf-ok { border-left: 3px solid #3fa86a; }
body:has(.admin-top-shell) .conf-item.conf-warn { border-left: 3px solid #d6a13c; }
body:has(.admin-top-shell) .conf-item.conf-todo { border-left: 3px solid #bbb; }
body:has(.admin-top-shell) .conf-item-body { padding: 4px 14px 14px; border-top: 1px solid #f3f1fb; font-size: 12.5px; color: #444; line-height: 1.55; }
body:has(.admin-top-shell) .conf-field { margin: 11px 0 0; }
body:has(.admin-top-shell) .conf-field b { color: #2a2580; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; }
body:has(.admin-top-shell) .conf-field.proof { background: #f6fbf7; border-left: 2px solid #b8e6c8; padding: 7px 10px; border-radius: 0 7px 7px 0; }
body:has(.admin-top-shell) .conf-field.note { background: #faf9f4; border-left: 2px solid #e6dab8; padding: 7px 10px; border-radius: 0 7px 7px 0; color: #6b5a2e; }
body:has(.admin-top-shell) .conf-qa { margin: 11px 0 0; border: 1px dashed #d8d5f3; border-radius: 9px; padding: 8px 11px; background: #fbfaff; }
body:has(.admin-top-shell) .conf-qa .obj { margin: 0; color: #8a3b3b; }
body:has(.admin-top-shell) .conf-qa .rep { margin: 8px 0 0; color: #1f5a3a; }
body:has(.admin-top-shell) .conf-qa b { font-size: 11.5px; }
body:has(.admin-top-shell) .conf-src { margin: 10px 0 0; font-size: 10.5px; color: #999; word-break: break-word; }
body:has(.admin-top-shell) .live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
body:has(.admin-top-shell) .live-card { border: 1px solid #ece9fb; border-radius: 12px; padding: 13px 14px; background: #fff; }
body:has(.admin-top-shell) .live-card h5 { margin: 0 0 9px; font-size: 12px; color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
body:has(.admin-top-shell) .live-status { font-weight: 800; font-size: 13px; margin-bottom: 4px; }
body:has(.admin-top-shell) .live-status.ok { color: #1f7a44; }
body:has(.admin-top-shell) .live-status.ko { color: #b02a2a; }
body:has(.admin-top-shell) .live-card .kv { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dotted #f0eefb; }
body:has(.admin-top-shell) .live-card .kv span { color: #666; }
body:has(.admin-top-shell) .live-card .kv b { color: #333; }
body:has(.admin-top-shell) .live-card .hash { margin-top: 6px; font-size: 10.5px; color: #888; word-break: break-all; }
body:has(.admin-top-shell) .live-card .mini-tbl { width: 100%; font-size: 12px; }
body:has(.admin-top-shell) .live-card .mini-tbl td { padding: 2px 0; }
body:has(.admin-top-shell) .live-card .mini-tbl td:last-child { text-align: right; color: #555; }
body:has(.admin-top-shell) .yn { font-size: 11.5px; font-weight: 700; }
body:has(.admin-top-shell) .yn.yes { color: #1f7a44; }
body:has(.admin-top-shell) .yn.no { color: #b06a2a; }
body:has(.admin-top-shell) .gaps-warn { margin-top: 7px; font-size: 11.5px; color: #9a6a14; background: #fdf7ec; border: 1px solid #f1dcb0; border-radius: 7px; padding: 6px 9px; }
body:has(.admin-top-shell) .audit-table tr.row-fail td { background: #fdf2f2; }
body:has(.admin-top-shell) .audit-table .pill.pill-fail { background: #fdeaea; color: #b02a2a; border-color: #f1c0c0; }
body:has(.admin-top-shell) .four-cond { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
body:has(.admin-top-shell) .four-cond .fc { border: 1px solid #e4e1f6; border-radius: 10px; padding: 10px 12px; background: #fff; }
body:has(.admin-top-shell) .four-cond .fc-pct { font-size: 18px; font-weight: 800; }
body:has(.admin-top-shell) .four-cond .fc-pct.score-ok { color: #1f7a44; }
body:has(.admin-top-shell) .four-cond .fc-pct.score-warn { color: #9a6a14; }
body:has(.admin-top-shell) .four-cond .fc-pct.score-ko { color: #b02a2a; }
body:has(.admin-top-shell) .four-cond .fc-name { font-weight: 700; font-size: 13px; color: #2a2580; margin: 2px 0 4px; }
body:has(.admin-top-shell) .four-cond .fc-stmt { font-size: 11px; color: #666; line-height: 1.4; }

/* ============================================================================
 * Page de connexion (publique) — refonte propre & lisible, contraste élevé.
 * Auto-suffisante (ne dépend pas des styles .public-* de base).
 * ==========================================================================*/
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box;
  background: radial-gradient(1100px 620px at 82% -12%, #2c2356 0%, #141a2e 48%, #0d1220 100%);
  color: #e8edf6; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.auth-shell *, .auth-shell *::before, .auth-shell *::after { box-sizing: border-box; }
.auth-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 30px; flex-wrap: wrap; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-dot { width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, #7c6cff, #34d6e8); box-shadow: 0 0 16px rgba(124, 108, 255, .65); flex-shrink: 0; }
.auth-brand strong { display: block; font-size: 16px; color: #fff; font-weight: 800; letter-spacing: .01em; }
.auth-brand small { color: #9fb0c9; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.auth-topnav { display: flex; gap: 20px; align-items: center; }
.auth-topnav a { color: #c3cee0; text-decoration: none; font-weight: 650; font-size: 14px; }
.auth-topnav a:hover { color: #fff; }
.auth-grid { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 26px 30px 50px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.auth-eyebrow { display: inline-block; color: #7fe0ec; font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.auth-intro h1 { font-size: 58px; line-height: 1.04; margin: 16px 0 20px; color: #ffffff; font-weight: 800; letter-spacing: -.02em; }
.auth-intro p { font-size: 17px; line-height: 1.62; color: #c3cee0; max-width: 490px; margin: 0 0 30px; }
.auth-feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; max-width: 460px; }
.auth-feats li { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.auth-feats strong { color: #a89bff; font-weight: 700; font-size: 14px; }
.auth-feats span { color: #aebbd0; font-size: 14px; }
.auth-card { background: rgba(18, 24, 42, .82); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .11); border-radius: 20px; padding: 28px 28px 24px; box-shadow: 0 26px 70px rgba(0, 0, 0, .45); }
.auth-card-head { margin-bottom: 20px; }
.auth-live { display: inline-flex; align-items: center; gap: 8px; color: #9fb0c9; font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.auth-live > span { width: 8px; height: 8px; border-radius: 50%; background: #3fd07a; box-shadow: 0 0 9px #3fd07a; }
.auth-card-head h2 { margin: 9px 0 0; font-size: 27px; color: #fff; font-weight: 800; letter-spacing: -.01em; }
.auth-tabs { display: flex; gap: 5px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .07); border-radius: 13px; padding: 5px; margin-bottom: 20px; }
.auth-tabs button { flex: 1; appearance: none; border: 0; background: none; color: #b8c4d8; font-weight: 700; font-size: 14px; padding: 10px 6px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
.auth-tabs button:hover { color: #fff; }
.auth-tabs button.active { background: linear-gradient(135deg, #6655ff, #7c6cff); color: #fff; box-shadow: 0 5px 16px rgba(108, 92, 255, .42); }
/* Champs et boutons du formulaire (issu de publicAuthForm) */
.auth-card form, .auth-card .public-form { display: grid; gap: 15px; margin: 0; }
.auth-card .field { display: block; }
.auth-card .field.wide { grid-column: 1 / -1; }
.auth-card .field label { display: block; color: #c3cee0; font-size: 13px; font-weight: 650; margin-bottom: 7px; }
.auth-card .field input { width: 100%; background: #f4f6fb; border: 1px solid #d7def0; border-radius: 11px; padding: 12px 14px; font-size: 15px; color: #1a2233; }
.auth-card .field input::placeholder { color: #97a3b8; }
.auth-card .field input:focus { outline: none; border-color: #7c6cff; box-shadow: 0 0 0 3px rgba(124, 108, 255, .28); background: #fff; }
.auth-card .btn { width: 100%; border-radius: 11px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s; }
.auth-card .btn.primary { background: linear-gradient(135deg, #6655ff, #7c6cff); color: #fff; border: 0; box-shadow: 0 8px 22px rgba(108, 92, 255, .35); }
.auth-card .btn.primary:hover { filter: brightness(1.08); }
.auth-card .btn:not(.primary):not(.ghost) { background: rgba(255, 255, 255, .07); color: #dbe3f2; border: 1px solid rgba(255, 255, 255, .17); }
.auth-card .btn:not(.primary):not(.ghost):hover { background: rgba(255, 255, 255, .12); }
.auth-card .btn.ghost { background: none; color: #9fb0c9; border: 0; text-decoration: underline; padding: 8px; font-weight: 600; }
.auth-card .btn.ghost:hover { color: #fff; }
.auth-card .msg { margin: 14px 0 0; font-size: 13px; color: #c3cee0; min-height: 18px; text-align: center; line-height: 1.5; }
.auth-card .msg.error { color: #ff9b9b; }
.auth-card .msg.ok { color: #7ee0a6; }
.auth-foot { text-align: center; padding: 22px 20px 26px; color: #8497b2; font-size: 12.5px; line-height: 1.6; border-top: 1px solid rgba(255, 255, 255, .07); }
.auth-foot strong { color: #c3cee0; }
.auth-foot a { color: #9fb0c9; text-decoration: none; }
.auth-foot a:hover { color: #fff; }
@media (max-width: 880px) {
  .auth-top { padding: 14px 16px; justify-content: center; }
  .auth-grid { grid-template-columns: 1fr; gap: 26px; padding: 14px 16px 32px; }
  .auth-intro { text-align: center; }
  .auth-intro h1 { font-size: 40px; }
  .auth-intro p { margin-left: auto; margin-right: auto; }
  .auth-feats { margin: 0 auto; }
  .auth-feats li { grid-template-columns: 110px 1fr; text-align: left; }
}

/* ---- Impression de l'attestation ---- */
@media print {
  body.conf-printing .no-print, body.conf-printing nav, body.conf-printing .admin-nav, body.conf-printing .admin-top-shell > *:not(main), body.conf-printing header { display: none !important; }
  body.conf-printing .conf-pane[hidden] { display: block !important; }
  body.conf-printing .conf-item-body { display: block !important; }
  body.conf-printing .conf-item, body.conf-printing .live-card, body.conf-printing .conf-qa { break-inside: avoid; }
  body.conf-printing .attest-doc { break-inside: avoid; }
}

/* ===================== PARE-FEU / SECURITY CONSOLE ===================== */
/* Base composants (anciennement dans app.css non déployé) */
.fw-pre {white-space:pre-wrap; font-family:ui-monospace,monospace; font-size:11px; background:rgba(127,127,127,.06); padding:10px; border-radius:8px; max-height:300px; overflow:auto; margin:6px 0;}
.fw-details summary {cursor:pointer; margin-top:12px; font-weight:700;}
.fw-grid2 {display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0;}
.fw-card {background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin:12px 0;}
.fw-card h4 {margin:0 0 10px;}
.fw-chart {width:100%; height:130px; display:block;}
.fw-chart-empty {color:var(--muted); font-size:13px; padding:30px 0; text-align:center;}
.fw-bars {display:grid; gap:6px;}
.fw-bar-row {display:grid; grid-template-columns:minmax(90px,38%) 1fr auto; gap:8px; align-items:center; font-size:12px;}
.fw-bar-label {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted);}
.fw-bar-track {background:rgba(127,127,127,.12); border-radius:5px; height:14px; overflow:hidden;}
.fw-bar-fill {display:block; height:100%; border-radius:5px;}
.fw-bar-val {font-weight:700; font-variant-numeric:tabular-nums;}
.pill.fw-sev2 {background:rgba(255,140,0,.16); color:#d97706;}
.pill.track-ok {background:rgba(0,200,80,.16); color:#0a8f43;}
.pill.track-fail {background:rgba(220,40,40,.16); color:#c62828;}
@media (max-width:760px){ .fw-grid2 {grid-template-columns:1fr;} }

/* ===== Security Console — DA dédiée (scope .fwos) ===== */
.fwos {background: radial-gradient(1100px 380px at 18% -10%, #14233f 0%, transparent 60%), linear-gradient(180deg,#0b1220,#0d1526); color:#dbe4f0; border-radius:14px; margin:-4px 0; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.35);}
.fwos *, .fwos *::before {box-sizing:border-box;}
.fwos-top {display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 20px; background:linear-gradient(90deg,#0e1a30,#0b1220); border-bottom:1px solid rgba(120,160,220,.16); flex-wrap:wrap;}
.fwos-brand {display:flex; align-items:center; gap:12px;}
.fwos-logo {font-size:26px; filter:drop-shadow(0 0 8px rgba(60,130,246,.55));}
.fwos-title {font-size:17px; font-weight:800; letter-spacing:.3px; color:#fff;}
.fwos-sub {font-size:12px; color:#7f93ad; margin-top:2px;}
.fwos-status {display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.fwos-ind {display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.5px; padding:6px 12px; border-radius:999px;}
.fwos-ind.on {background:rgba(0,200,80,.14); color:#3ee07f; border:1px solid rgba(62,224,127,.3);}
.fwos-ind.off {background:rgba(220,40,40,.14); color:#ff6b6b; border:1px solid rgba(255,107,107,.3);}
.fwos-dot {width:8px; height:8px; border-radius:50%; background:currentColor; animation:fwpulse 1.8s infinite;}
@keyframes fwpulse {0%{box-shadow:0 0 0 0 rgba(62,224,127,.5);} 70%{box-shadow:0 0 0 8px rgba(62,224,127,0);} 100%{box-shadow:0 0 0 0 rgba(62,224,127,0);}}
.fwos-chip {font-size:12px; color:#aab8cc; background:rgba(120,160,220,.08); border:1px solid rgba(120,160,220,.15); border-radius:8px; padding:5px 10px;}
.fwos-refresh {background:rgba(120,160,220,.1); border:1px solid rgba(120,160,220,.2); color:#dbe4f0; width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:16px;}
.fwos-refresh:hover {background:rgba(120,160,220,.2);}
.fwos-tabs {display:flex; gap:4px; padding:10px 16px 0; background:#0b1220; border-bottom:1px solid rgba(120,160,220,.12); overflow-x:auto;}
.fwos-tab {display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border:none; background:transparent; color:#8ba0bd; font-weight:700; font-size:13px; cursor:pointer; border-radius:10px 10px 0 0; border-bottom:2px solid transparent; white-space:nowrap;}
.fwos-tab:hover {color:#cdd9ea;}
.fwos-tab.active {color:#fff; background:linear-gradient(180deg,rgba(60,130,246,.18),transparent); border-bottom-color:#3c82f6;}
.fwos-body {padding:16px 20px;}
.fwos-foot {padding:10px 20px 16px; font-size:11px; color:#5f718b; border-top:1px solid rgba(120,160,220,.1);}
.fwos .simple-stat-grid {gap:12px;}
.fwos .stat, body:has(.admin-top-shell) .fwos .stat {background:linear-gradient(180deg,#11203a,#0e1a30) !important; border:1px solid rgba(120,160,220,.16) !important; border-radius:12px; padding:14px 16px; position:relative; overflow:hidden; box-shadow:none !important;}
.fwos .stat::before {content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#3c82f6,#22d3ee);}
.fwos .stat span {color:#8ba0bd; font-size:12px;}
.fwos .stat strong {color:#fff; font-size:22px;}
.fwos .fw-grid2 {margin:12px 0;}
.fwos .fw-card {background:#0e1a30; border:1px solid rgba(120,160,220,.14); border-radius:12px; padding:16px;}
.fwos .fw-card h4 {color:#e6eefb; margin:0 0 12px; font-size:12px; letter-spacing:.4px; text-transform:uppercase;}
.fwos .fw-chart-empty {color:#5f718b;}
.fwos .fw-bar-label {color:#9fb0c8;}
.fwos .fw-bar-track {background:rgba(120,160,220,.1);}
.fwos .fw-bar-val {color:#e6eefb;}
.fwos .audit-table {color:#cdd9ea;}
.fwos .audit-table th {color:#7f93ad; border-bottom:1px solid rgba(120,160,220,.18); font-size:11px; text-transform:uppercase;}
.fwos .audit-table td {border-bottom:1px solid rgba(120,160,220,.07);}
.fwos .audit-table tr:hover td {background:rgba(120,160,220,.05);}
.fwos .mini-list .kv {border-bottom:1px solid rgba(120,160,220,.08); padding:7px 0; color:#cdd9ea;}
.fwos .mini-list .kv strong {color:#fff;}
.fwos .empty {color:#5f718b;}
.fwos .fw-pre {background:#0a1322; color:#9fb0c8; border:1px solid rgba(120,160,220,.12);}
.fwos .search, .fwos input {background:#0a1322; border:1px solid rgba(120,160,220,.2); color:#dbe4f0;}
.fwos .btn {background:rgba(120,160,220,.12); border:1px solid rgba(120,160,220,.2); color:#dbe4f0;}
.fwos .btn.primary {background:#3c82f6; border-color:#3c82f6; color:#fff;}
.fwos .btn.warn {background:rgba(220,40,40,.16); border-color:rgba(255,107,107,.3); color:#ff8a8a;}
.fwos .pill {background:rgba(120,160,220,.12); color:#cdd9ea;}
.fwos .pill.track-fail {background:rgba(220,40,40,.2); color:#ff7b7b;}
.fwos .pill.fw-sev2 {background:rgba(255,140,0,.18); color:#ffb454;}
.fwos .pill.track-ok {background:rgba(0,200,80,.16); color:#5fe09a;}
.fwos .mono {color:#9fd0ff;}

/* ===================== DEVIS : helper marge par ligne ===================== */
.line-cost-helper { grid-column: 1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:2px; padding:7px 9px; border:1px dashed rgba(217,160,32,.55); border-radius:8px; background:rgba(245,190,60,.09); font-size:12px; }
.line-cost-helper .lch-tag { font-weight:900; color:#9a6b00; white-space:nowrap; }
.line-cost-helper .lch-field { display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--muted); }
.line-cost-helper .lch-field input { width:90px; }
.line-cost-helper .lch-apply { white-space:nowrap; }
.line-cost-helper .lch-out { display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-weight:800; margin-left:auto; color:var(--text); }
.line-cost-helper .lch-out strong { color:#0a8f43; }
.line-cost-helper .lch-out.lch-loss strong, .line-cost-helper .lch-out.lch-loss b { color:#c62828; }

/* ===================== VUE DÉTAIL : colonnes marge (interne) ===================== */
.doc-lines-table .margin-ok { color:#0a8f43; font-weight:800; }
.doc-lines-table .margin-loss { color:#c62828; font-weight:800; }
.doc-lines-table .margin-total-row td { border-top:2px solid var(--border); background:rgba(245,190,60,.10); font-weight:800; }

/* ===================== COMPTA : rapprochement Indy ===================== */
.recon-panel .recon-rows { display:flex; flex-direction:column; gap:3px; margin:6px 0; }
.recon-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:8px 12px; border-radius:9px; }
.recon-row > span { color:var(--muted); font-size:13.5px; }
.recon-row > b { font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.recon-row.total { background:rgba(120,120,120,.07); }
.recon-row.total > span, .recon-row.total > b { font-weight:800; }
.recon-row.add > span, .recon-row.add > b { color:#b45309; }
.recon-row.subtotal { border-top:1px dashed var(--border); background:rgba(99,102,241,.08); }
.recon-row.subtotal > span, .recon-row.subtotal > b { color:#4338ca; font-weight:800; }
.recon-row.residual.ok > b { color:#0a8f43; }
.recon-row.residual.warn > b { color:#c0392b; }
.recon-residual-box { margin-top:10px; border:1px solid var(--border); border-radius:11px; padding:4px 2px; }
.recon-drafts { margin:8px 0; }
.recon-drafts > summary { cursor:pointer; color:var(--muted); font-size:13px; padding:5px 2px; }
.recon-draft-list { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.recon-draft-list li { display:flex; align-items:center; gap:12px; padding:7px 12px; background:var(--panel); border:1px solid var(--border); border-radius:9px; }
.recon-draft-list .rd-num { font-weight:700; min-width:135px; }
.recon-draft-list .rd-cli { flex:1; font-size:13px; }
.recon-draft-list li b { font-variant-numeric:tabular-nums; white-space:nowrap; }
.recon-indy { display:flex; align-items:flex-end; gap:10px; margin-top:12px; flex-wrap:wrap; }
.recon-indy-field { display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--muted); }
.recon-indy-field input { padding:9px 11px; border:1px solid var(--border); border-radius:9px; font-size:14px; min-width:170px; background:var(--panel); color:inherit; }
.recon-note { font-size:12.5px; margin:9px 0 0; line-height:1.5; }

/* ===================== ARCHIVE INDY : rattachement manuel ===================== */
.legacy-unmatched { display:flex; flex-direction:column; gap:8px; }
.lu-card { border:1px solid var(--border); border-radius:11px; padding:10px 12px; background:var(--panel); }
.lu-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lu-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; }
.lu-kind { font-size:11px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:6px; background:rgba(99,102,241,.12); color:#4338ca; }
.lu-name { color:var(--muted); }
.lu-right { display:flex; align-items:center; gap:12px; }
.lu-ttc { font-variant-numeric:tabular-nums; white-space:nowrap; }
.lu-attach { margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:8px; }
.lu-search-wrap input { width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:9px; font-size:14px; background:var(--panel); color:inherit; box-sizing:border-box; }
.lu-results { display:flex; flex-direction:column; gap:3px; margin-top:5px; }
.lu-res { display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; padding:7px 11px; border:1px solid var(--border); border-radius:8px; background:var(--panel); cursor:pointer; width:100%; }
.lu-res:hover { border-color:#6366f1; background:rgba(99,102,241,.06); }
.lu-res-name { font-weight:600; font-size:13.5px; }
.lu-res-sub { font-size:12px; color:var(--muted); }
.lu-res-sub.warn { color:#b45309; }
.lu-res-empty { font-size:12.5px; color:var(--muted); padding:6px 2px; }
.lu-create { display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--border); border-radius:9px; background:rgba(120,120,120,.04); }
.lu-create-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.lu-create-grid input { padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:13.5px; background:var(--panel); color:inherit; }
@media (max-width:640px){ .lu-create-grid { grid-template-columns:1fr; } }
.legacy-pill { display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px; }
.legacy-pill.ok { background:rgba(10,143,67,.12); color:#0a8f43; }
.legacy-pill.warn { background:rgba(180,83,9,.12); color:#b45309; }

/* ===================== Cloud / transfert (admin) ===================== */
.cloud-disk { padding:14px 16px; }
.cloud-disk.low { border:1px solid #e08a1e; }
.cloud-disk-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13.5px; gap:12px; flex-wrap:wrap; }
.cloud-bar { height:10px; border-radius:999px; background:rgba(120,120,120,.15); overflow:hidden; }
.cloud-bar-fill { height:100%; background:linear-gradient(90deg,#4f46e5,#7c3aed); }
.cloud-disk.low .cloud-bar-fill { background:#c0392b; }
.cloud-drop { border:2px dashed var(--border); border-radius:12px; padding:22px; text-align:center; color:var(--muted); background:rgba(120,120,120,.03); }
.cloud-drop.over { border-color:#6366f1; background:rgba(99,102,241,.06); }
.cloud-up-row { display:flex; flex-direction:column; gap:4px; margin-top:8px; font-size:13px; }
.cloud-up-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cloud-up-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cloud-up-meta { flex:0 0 auto; font-size:12px; color:#6366f1; white-space:nowrap; }
.cloud-up-bar { height:8px; border-radius:999px; background:rgba(120,120,120,.15); overflow:hidden; }
.cloud-up-bar > div { height:100%; width:0; background:#6366f1; transition:width .15s; }
.cloud-up-row.done .cloud-up-bar > div { background:#0a8f43; }
.cloud-up-row.err .cloud-up-bar > div { background:#c0392b; }
.cloud-manage .cloud-file { display:flex; align-items:center; gap:10px; padding:7px 11px; border:1px solid var(--border); border-radius:9px; margin-bottom:6px; font-size:13px; }
.cloud-manage .cloud-file > span:first-child { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===================== L'Empreinte (admin passeports) ===================== */
.emp-form { display:flex; flex-direction:column; gap:10px; max-width:640px; }
.emp-form label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.emp-form input, .emp-form textarea { padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:13.5px; background:var(--panel); color:inherit; font-family:inherit; }
.emp-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.emp-actions-cell { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:640px){ .emp-form-grid { grid-template-columns:1fr; } }
.emp-vision { border:1px dashed var(--border); border-radius:10px; padding:12px; background:rgba(99,102,241,.05); display:flex; flex-direction:column; gap:8px; }
.emp-vision-head { font-weight:600; font-size:14px; }
.emp-vision p { margin:0; }
.emp-vision input[type=file], .emp-vision textarea { padding:7px 9px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--panel); color:inherit; font-family:inherit; }
#emp-vision-status.err { color:#c0392b; }
.emp-ai-current { font-size:12.5px; padding:6px 9px; border-radius:8px; background:rgba(99,102,241,.08); }
/* Éditeur de fiche détaillée (passeport) */
.emp-form-block { border:1px solid var(--border); border-radius:11px; padding:12px; background:rgba(120,120,120,.03); }
.emp-form-block-h { font-weight:700; font-size:13.5px; margin-bottom:8px; }
.empE-grp { margin-bottom:12px; }
.empE-grp:last-child { margin-bottom:0; }
.empE-grp-h { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.empE-empty { font-size:12px; display:block; padding:2px 0; }
.empE-row { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.empE-row.col { flex-direction:column; align-items:stretch; gap:5px; border:1px solid var(--border); border-radius:9px; padding:8px; }
.empE-row-top { display:flex; gap:6px; align-items:center; }
.empE-row input, .empE-row textarea { flex:1; min-width:0; padding:7px 9px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--panel); color:inherit; font-family:inherit; }
.empE-row .dt { flex:0 0 92px; }
.empE-row .rf, .empE-row .st { flex:0 0 30%; }
.empE-del { flex:0 0 auto; width:30px; height:30px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:#c0392b; cursor:pointer; font-size:13px; line-height:1; }
.empE-del:hover { background:rgba(192,57,43,.1); }
.empE-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:7px; margin-bottom:8px; }
.empE-photo { position:relative; }
.empE-photo img { width:100%; height:84px; object-fit:cover; border-radius:9px; border:1px solid var(--border); }
.empE-photo button { position:absolute; top:3px; right:3px; width:22px; height:22px; border:none; border-radius:50%; background:rgba(0,0,0,.62); color:#fff; cursor:pointer; font-size:12px; line-height:1; }
.empE-upload { display:inline-block; cursor:pointer; font-size:13px; padding:7px 12px; border:1px dashed var(--border); border-radius:9px; background:var(--panel); }
.empE-upload input { display:none; }
/* Services & tarifs */
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.svc-card { border:1px solid var(--border); border-radius:12px; padding:14px; background:var(--panel); display:flex; flex-direction:column; gap:8px; }
.svc-card-head { display:flex; flex-direction:column; gap:2px; }
.svc-name { font-weight:600; font-size:15px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:inherit; }
.svc-f { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.svc-f input, .svc-f textarea, .svc-card select { padding:7px 9px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--panel); color:inherit; font-family:inherit; }
.svc-specs { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.svc-check { display:flex; align-items:center; gap:6px; font-size:13px; }
/* Arborescence cloud (dossiers) */
.cloud-tree-dir { margin:2px 0; }
.cloud-tree-dir > summary { cursor:pointer; display:flex; justify-content:space-between; gap:10px; padding:5px 8px; border-radius:8px; font-size:13px; list-style:none; }
.cloud-tree-dir > summary::-webkit-details-marker { display:none; }
.cloud-tree-dir > summary:hover { background:rgba(120,120,120,.08); }
.cloud-tree-dir > summary .cloud-tree-name { font-weight:600; }
.cloud-tree-children { margin-left:14px; padding-left:8px; border-left:1px solid var(--border); }
/* Overlay transfert global + menu clic droit */
.cloud-ov { position:fixed; right:18px; bottom:18px; width:360px; max-width:calc(100vw - 24px); background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.3); padding:14px 16px; z-index:9999; transform:translateY(140%); opacity:0; transition:transform .25s, opacity .25s; }
.cloud-ov.show { transform:translateY(0); opacity:1; }
.cloud-ov-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cloud-ov-title { flex:1; font-size:14px; }
.cloud-ov-count { font-size:12px; color:var(--muted); }
.cloud-ov-x { border:none; background:transparent; font-size:18px; line-height:1; cursor:pointer; color:var(--muted); }
.cloud-ov-bar { height:9px; border-radius:6px; background:rgba(120,120,120,.2); overflow:hidden; }
.cloud-ov-bar > div { height:100%; width:0; background:#6366f1; border-radius:6px; transition:width .2s; }
.cloud-ov.done .cloud-ov-bar > div { background:#0a8f43; }
.cloud-ov.err .cloud-ov-bar > div { background:#c0392b; }
.cloud-ov-stats { font-size:12px; color:var(--muted); margin-top:6px; }
.cloud-ov-file { font-size:12.5px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cloud-ctx { position:fixed; z-index:10000; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.3); padding:5px; min-width:180px; }
.cloud-ctx-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:transparent; padding:9px 11px; border-radius:7px; font-size:13.5px; cursor:pointer; color:inherit; }
.cloud-ctx-item:hover { background:rgba(99,102,241,.12); }
.cloud-ctx-item.danger { color:#c0392b; }

/* ===================== ATELIER : AtelierIQ (cerveau) ===================== */
.aiq-panel { border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:6px 0 16px; background:linear-gradient(180deg, rgba(99,102,241,.06), transparent); }
.aiq-loading { color:var(--muted); font-size:13px; padding:4px 0; }
.aiq-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.aiq-logo { font-weight:800; }
.aiq-head .btn.small { margin-left:auto; }
.aiq-empty { font-size:13px; margin:2px 0 0; }
.aiq-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.aiq-kpi { border:1px solid var(--border); border-radius:9px; padding:8px; text-align:center; background:var(--panel); }
.aiq-kpi b { display:block; font-size:17px; font-variant-numeric:tabular-nums; }
.aiq-kpi span { font-size:11px; color:var(--muted); }
.aiq-terms { margin-top:9px; font-size:12.5px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.aiq-term { background:rgba(99,102,241,.1); color:#4338ca; border-radius:999px; padding:2px 9px; }
.aiq-samples { margin-top:9px; }
.aiq-samples summary { cursor:pointer; color:var(--muted); font-size:13px; }
.aiq-sample { padding:6px 0; border-top:1px dashed var(--border); font-size:13px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.aiq-out { font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; white-space:nowrap; }
.aiq-out.aiq-delivered { background:rgba(10,143,67,.13); color:#0a8f43; }
.aiq-out.aiq-irreparable { background:rgba(192,57,43,.13); color:#c0392b; }
.aiq-diag { color:var(--muted); font-style:italic; width:100%; font-size:12px; }
.aiq-ai { margin-top:10px; border:1px solid #c7d2fe; background:rgba(99,102,241,.07); border-radius:10px; padding:11px; display:flex; flex-direction:column; gap:8px; }
.aiq-ai-top { display:flex; justify-content:space-between; align-items:center; }
.aiq-ai-badge { font-size:11px; font-weight:700; background:#4338ca; color:#fff; padding:2px 8px; border-radius:999px; }
.aiq-conf { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
.aiq-conf-hi { background:rgba(10,143,67,.16); color:#0a8f43; }
.aiq-conf-mid { background:rgba(224,138,30,.18); color:#b45309; }
.aiq-conf-lo { background:rgba(192,57,43,.14); color:#c0392b; }
.aiq-ai-fault strong, .aiq-ai-part strong { display:block; font-size:15px; }
.aiq-ai-part { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.aiq-ai-proc ol, .aiq-ai-other ul { margin:4px 0 0; padding-left:20px; font-size:13px; line-height:1.5; }
.aiq-ai-err { color:#c0392b; font-size:13px; }
@media (max-width:560px){ .aiq-kpis { grid-template-columns:repeat(2,1fr); } }

/* ===================== ATELIER : workflow / SLA ===================== */
body:has(.admin-top-shell) .sla-kpi { border-left:4px solid var(--border) !important; }
body:has(.admin-top-shell) .sla-kpi.sla-k-overdue { border-left-color:#c0392b !important; }
body:has(.admin-top-shell) .sla-kpi.sla-k-risk { border-left-color:#e08a1e !important; }
body:has(.admin-top-shell) .sla-kpi.sla-k-blocked { border-left-color:#7c3aed !important; }
body:has(.admin-top-shell) .sla-kpi.sla-k-on_time { border-left-color:#0a8f43 !important; }
.sla-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:6px; align-items:start; }
@media (max-width:1100px){ .sla-cols { grid-template-columns:1fr; } }
.sla-sub { margin:14px 0 6px; font-size:13px; color:var(--muted); font-weight:600; }
.sla-list { display:flex; flex-direction:column; gap:6px; }
.sla-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--border); border-left-width:4px; border-radius:10px; background:var(--panel); }
.sla-row.sr-overdue { border-left-color:#c0392b; }
.sla-row.sr-risk { border-left-color:#e08a1e; }
.sla-row.sr-blocked { border-left-color:#7c3aed; }
.sla-row.sr-on_time { border-left-color:#0a8f43; }
.sla-row.sr-to_ack { border-left-color:#2563eb; }
.sla-row-main { flex:1; min-width:0; text-align:left; background:none; border:none; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:0; color:inherit; font:inherit; }
.sla-row-main strong { font-size:13.5px; }
.sla-row-title { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.sla-row-right { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.sla-pill { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
.sp-overdue { background:rgba(192,57,43,.13); color:#c0392b; }
.sp-risk { background:rgba(224,138,30,.16); color:#b45309; }
.sp-blocked { background:rgba(124,58,237,.13); color:#7c3aed; }
.sp-on_time { background:rgba(10,143,67,.13); color:#0a8f43; }
.sp-waiting { background:rgba(100,116,139,.14); color:#475569; }
.sp-toack { background:rgba(37,99,235,.13); color:#2563eb; }
.sp-done { background:rgba(13,148,136,.14); color:#0d9488; }
.sla-countdown { font-variant-numeric:tabular-nums; font-weight:700; font-size:12.5px; color:#0a8f43; min-width:52px; text-align:right; }
.sla-countdown.past { color:#c0392b; }
.po-wrap { display:grid; grid-template-columns:1fr 320px; gap:16px; }
@media (max-width:760px){ .po-wrap { grid-template-columns:1fr; } }
.po-list { display:flex; flex-direction:column; gap:8px; }
.po-item { border:1px solid var(--border); border-radius:10px; padding:9px 11px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.po-item-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.po-item-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.po-eta { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.po-status { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(100,116,139,.13); color:#475569; }
.po-s-ordered { background:rgba(37,99,235,.13); color:#2563eb; }
.po-s-received { background:rgba(10,143,67,.13); color:#0a8f43; }
.po-s-needed { background:rgba(224,138,30,.16); color:#b45309; }
.po-form { display:flex; flex-direction:column; gap:8px; border:1px solid var(--border); border-radius:12px; padding:12px; background:rgba(120,120,120,.03); }
.po-form label, .sla-config label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.po-form input, .sla-config input { padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:13.5px; background:var(--panel); color:inherit; }
.po-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.po-check { flex-direction:row !important; align-items:center; gap:8px; }
.po-check input { width:auto; }
.sla-config { display:flex; flex-direction:column; gap:10px; max-width:560px; }

/* ===================== COMPTA : calculateurs de marge ===================== */
.margin-tools .panel-head { align-items:center; }
.margin-real { margin:4px 0 14px; }
.margin-real.empty { padding:14px; border:1px dashed var(--border); border-radius:10px; }
.margin-real-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.margin-trend { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.margin-trend li { display:flex; gap:6px; align-items:baseline; border:1px solid var(--border); border-radius:8px; padding:5px 9px; font-size:12px; }
.margin-trend li b { color:#0a8f43; }
.calc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.calc-card { border:1px solid var(--border); border-radius:12px; padding:13px 14px; background:var(--panel); display:flex; flex-direction:column; gap:8px; }
.calc-card h4 { margin:0; font-size:14px; }
.calc-card .calc-help { margin:0; font-size:11.5px; color:var(--muted); }
.calc-fields { display:flex; flex-wrap:wrap; gap:8px; }
.calc-fields label { display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:800; color:var(--muted); flex:1 1 90px; }
.calc-fields input, .calc-fields select { width:100%; }
.calc-out { margin-top:auto; border-top:1px solid var(--border); padding-top:8px; min-height:44px; }
.calc-big { font-size:22px; font-weight:900; color:#1a4fd6; }
.calc-big.calc-loss { color:#c62828; }
.calc-loss { color:#c62828; font-weight:800; }
.calc-lines { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; }
.calc-lines.big { font-size:14px; gap:6px 16px; }
.calc-lines li { color:var(--muted); }
.calc-lines li b { color:var(--text); }
@media (max-width:900px){ .calc-grid { grid-template-columns:1fr 1fr; } .margin-real-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .calc-grid { grid-template-columns:1fr; } .margin-real-grid { grid-template-columns:1fr; } }

/* ===================== SOUS-TRAITANCE ===================== */
.subcontract-banner { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; padding:14px 16px; border:1px solid #f59e0b; border-left:5px solid #f59e0b; border-radius:12px; background:rgba(245,158,11,.10); }
.subcontract-banner strong { display:block; font-size:15px; }
.subcontract-banner span { color:var(--muted); font-size:13px; }
.contract-doc { max-height:62vh; overflow:auto; border:1px solid var(--border); border-radius:10px; padding:18px 22px; margin:14px 0; background:#fff; font-size:13px; line-height:1.55; }
.contract-doc h1 { font-size:18px; text-align:center; }
.contract-doc h2 { font-size:14px; margin-top:18px; border-bottom:1px solid var(--border); padding-bottom:3px; }
.contract-doc h3 { font-size:13px; }
.contract-doc ul { margin:6px 0 6px 18px; }
.contract-doc table.signatures { width:100%; margin-top:16px; border-collapse:collapse; }
.contract-doc table.signatures td { width:50%; vertical-align:top; border:1px solid var(--border); padding:10px; height:80px; }
.contract-sign { margin-top:8px; border-top:2px dashed var(--border); padding-top:14px; }

/* Aperçu "Voir son compte" (impersonation visuelle) */
.impersonate-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#1a4fd6; color:#fff; padding:8px 16px; font-size:13px; font-weight:600; }
.impersonate-bar strong { font-weight:800; }
.impersonate-bar span { opacity:.85; font-weight:500; }
.impersonate-bar .btn { margin-left:auto; background:#fff; color:#1a4fd6; border:none; font-weight:800; }

/* Demande de révision de prix (devis) */
.review-request-box { margin:10px 0; padding:12px 14px; border:1px solid #f59e0b; border-left:5px solid #f59e0b; border-radius:10px; background:rgba(245,158,11,.10); }
.review-request-box strong { display:block; font-size:14px; }
.review-request-box p { margin:4px 0 0; }
.doc-lines-table tfoot .discount-row strong, .totals .discount-row strong { color:#c62828; }

/* ===================== CHAT STAFF (widget flottant) ===================== */
#staffChat { position: fixed; right: 20px; bottom: 20px; z-index: 4000; }
#staffChat .chat-bubble { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--accent, #5b50e0); color: #fff; font-size: 24px; border: 0; cursor: pointer; box-shadow: 0 10px 28px rgba(17,22,34,.28); display: grid; place-items: center; }
#staffChat .chat-bubble:hover { filter: brightness(1.06); }
#staffChat .chat-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
#staffChat .chat-badge.inline { position: static; }
.chat-panel { position: absolute; right: 0; bottom: 70px; width: 360px; max-width: calc(100vw - 32px); height: 70vh; max-height: 560px; background: #fff; border: 1px solid var(--border, #e3e6ee); border-radius: 16px; box-shadow: 0 24px 60px rgba(17,22,34,.22); display: flex; flex-direction: column; overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; background: var(--accent,#5b50e0); color: #fff; }
.chat-head strong { font-size: 15px; flex: 1; }
.chat-head .btn.small { background: rgba(255,255,255,.22); border: 0; color: #fff; }
.chat-x { background: transparent; border: 0; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
.chat-list { flex: 1; overflow: auto; padding: 6px; }
.chat-conv { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 8px; border: 0; background: transparent; cursor: pointer; border-radius: 10px; text-align: left; }
.chat-conv:hover { background: var(--accent-soft, #f1f0fd); }
.chat-conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-conv-title { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink,#1a1f2b); }
.chat-conv-prev { font-size: 12px; color: var(--muted,#7a8194); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; flex: 0 0 auto; }
.chat-empty { padding: 24px 16px; text-align: center; color: var(--muted,#7a8194); font-size: 13px; }
.chat-thread { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f7f8fc; }
.chat-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-body { background: #fff; border: 1px solid var(--border,#e3e6ee); border-radius: 12px; padding: 7px 10px; }
.chat-msg.mine .chat-msg-body { background: var(--accent,#5b50e0); color: #fff; border-color: transparent; }
.chat-msg-author { font-size: 11px; font-weight: 800; color: var(--accent,#5b50e0); margin-bottom: 2px; }
.chat-msg-text { font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.chat-msg-time { font-size: 10px; opacity: .6; margin-top: 3px; text-align: right; }
.chat-media { max-width: 220px; max-height: 220px; border-radius: 8px; margin-top: 4px; display: block; }
.chat-composer { display: flex; align-items: center; gap: 6px; padding: 8px; border-top: 1px solid var(--border,#e3e6ee); }
.chat-composer textarea { flex: 1; resize: none; border: 1px solid var(--border,#e3e6ee); border-radius: 10px; padding: 8px; font: inherit; max-height: 90px; }
.chat-attach-btn { cursor: pointer; font-size: 20px; padding: 0 2px; }
.chat-attach-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
.chat-attach-chips:empty { display: none; }
.chat-chip { background: var(--accent-soft,#f1f0fd); border-radius: 8px; padding: 3px 8px; font-size: 11px; }
.chat-chip button { border: 0; background: transparent; cursor: pointer; font-weight: 800; }
.chat-new-section { padding: 10px 8px; border-bottom: 1px solid var(--border,#e3e6ee); display: flex; flex-direction: column; gap: 6px; }
.chat-new-section > strong { font-size: 12px; text-transform: uppercase; color: var(--muted,#7a8194); }
.chat-group-pick { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow: auto; }
.chat-pick { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#noticeRoot { bottom: 92px !important; }

/* ---- Chat « façon Teams » : présence, réactions, réponses, plein écran ---- */
.chat-head-title { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-tools { display: flex; align-items: center; gap: 2px; }
.chat-rail { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-search-bar { padding: 8px; border-bottom: 1px solid var(--border,#e3e6ee); }
.chat-search { width: 100%; border: 1px solid var(--border,#e3e6ee); border-radius: 10px; padding: 7px 10px; font: inherit; box-sizing: border-box; }
.chat-conv.active { background: var(--accent-soft,#f1f0fd); }
.chat-avatar { position: relative; }
.chat-avatar .chat-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #9aa1b2; border: 2px solid #fff; display: none; }
.chat-avatar.online .chat-dot { display: block; background: #2bb673; }

/* deux panneaux + plein écran */
.chat-main { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-2pane { display: flex; flex: 1; min-height: 0; }
.chat-2pane .chat-rail { flex: 0 0 244px; border-right: 1px solid var(--border,#e3e6ee); }
.chat-2pane .chat-main { flex: 1; min-width: 0; }
#staffChat.chat-expanded .chat-panel { width: 760px; height: 82vh; max-height: 680px; }
.chat-empty-main { display: grid; place-items: center; height: 100%; padding: 40px; }
.chat-main-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border,#e3e6ee); background: #fff; }
.chat-main-head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-main-head-info strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-main-head-info small { font-size: 11px; color: var(--muted,#7a8194); }
.chat-main-head .chat-x { color: var(--muted,#7a8194); }

/* séparateur de jour + regroupement */
.chat-day { text-align: center; margin: 8px 0 2px; }
.chat-day span { background: rgba(120,127,145,.14); color: var(--muted,#7a8194); font-size: 11px; padding: 2px 10px; border-radius: 10px; }
.chat-msg.grouped { margin-top: -4px; }
.chat-msg-meta { display: flex; justify-content: flex-end; }

/* actions au survol */
.chat-actions { display: flex; gap: 2px; align-self: center; opacity: 0; transition: opacity .12s; }
.chat-msg:hover .chat-actions { opacity: 1; }
.chat-actions button { border: 1px solid var(--border,#e3e6ee); background: #fff; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.chat-actions button:hover { background: var(--accent-soft,#f1f0fd); }

/* réactions */
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.chat-react-chip { border: 1px solid var(--border,#e3e6ee); background: #fff; border-radius: 12px; padding: 1px 7px; font-size: 12px; cursor: pointer; line-height: 1.6; }
.chat-react-chip.mine { background: var(--accent-soft,#f1f0fd); border-color: var(--accent,#5b50e0); }
.chat-msg.mine .chat-react-chip { color: var(--ink,#1a1f2b); }
.chat-react-pop { position: fixed; z-index: 5000; background: #fff; border: 1px solid var(--border,#e3e6ee); border-radius: 24px; box-shadow: 0 12px 30px rgba(17,22,34,.22); padding: 4px 6px; display: flex; gap: 2px; }
.chat-react-pop.wide { flex-wrap: wrap; max-width: 264px; border-radius: 14px; }
.chat-react-pop button { border: 0; background: transparent; font-size: 20px; cursor: pointer; padding: 4px; border-radius: 8px; }
.chat-react-pop button:hover { background: var(--accent-soft,#f1f0fd); transform: scale(1.12); }

/* « en train d'écrire » */
.chat-typing { padding: 2px 14px; font-size: 12px; color: var(--muted,#7a8194); display: flex; align-items: center; gap: 6px; }
.chat-typing[hidden] { display: none; }
.chat-typing-dots { display: inline-flex; gap: 3px; }
.chat-typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent,#5b50e0); animation: chatBlink 1s infinite; }
.chat-typing-dots i:nth-child(2) { animation-delay: .2s; }
.chat-typing-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes chatBlink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

/* réponse citée */
.chat-reply-preview { padding: 4px 8px 0; }
.chat-reply-preview[hidden] { display: none; }
.chat-reply-card { background: var(--accent-soft,#f1f0fd); border-left: 3px solid var(--accent,#5b50e0); border-radius: 8px; padding: 5px 8px; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.chat-reply-card button { border: 0; background: transparent; cursor: pointer; font-weight: 800; font-size: 15px; }
.chat-quote { border-left: 3px solid rgba(120,127,145,.5); padding: 2px 8px; margin-bottom: 4px; font-size: 12px; opacity: .9; border-radius: 4px; background: rgba(120,127,145,.08); }
.chat-msg.mine .chat-quote { background: rgba(255,255,255,.18); border-left-color: rgba(255,255,255,.6); }

/* fichiers, mentions, édité, supprimé, accusé de lecture */
.chat-file { display: inline-flex; align-items: center; gap: 6px; background: rgba(120,127,145,.12); border-radius: 8px; padding: 6px 10px; margin-top: 4px; text-decoration: none; color: inherit; font-size: 13px; max-width: 230px; }
.chat-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file small { opacity: .7; flex: 0 0 auto; }
.chat-mention { color: var(--accent,#5b50e0); font-weight: 700; background: var(--accent-soft,#f1f0fd); border-radius: 4px; padding: 0 2px; }
.chat-msg.mine .chat-mention { color: #fff; background: rgba(255,255,255,.22); }
.chat-edited { font-size: 10px; opacity: .6; }
.chat-deleted { opacity: .65; font-style: italic; }
.chat-msg.deleted .chat-msg-body { background: transparent; border: 1px dashed var(--border,#e3e6ee); }
.chat-receipt { font-size: 10.5px; color: var(--muted,#7a8194); text-align: right; padding: 0 4px; }
.chat-receipt:empty { display: none; }
.chat-edit-form textarea { width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--border,#e3e6ee); padding: 6px; font: inherit; }
.chat-edit-actions { margin-top: 4px; display: flex; gap: 6px; }
.chat-emoji-btn { border: 0; background: transparent; font-size: 18px; cursor: pointer; padding: 0 2px; }

/* panneau de groupe */
.chat-group-panel { padding: 12px; overflow: auto; flex: 1; }
.chat-group-panel h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; color: var(--muted,#7a8194); }
.chat-grp-row { display: flex; gap: 6px; }
.chat-grp-member { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.chat-grp-member span { flex: 1; }
.chat-grp-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn.small.danger { background: #fce8e8; color: #c0392b; border: 1px solid #f3c0c0; }
.chat-new { flex: 1; overflow: auto; }

/* fermer une conversation + menu options */
.chat-conv { position: relative; }
.chat-conv-close { opacity: 0; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 16px; color: var(--muted,#7a8194); transition: opacity .12s; }
.chat-conv:hover .chat-conv-close { opacity: 1; }
.chat-conv-close:hover { background: rgba(229,72,77,.14); color: #e5484d; }
.chat-menu-pop { position: fixed; z-index: 5000; background: #fff; border: 1px solid var(--border,#e3e6ee); border-radius: 10px; box-shadow: 0 12px 30px rgba(17,22,34,.22); padding: 4px; display: flex; flex-direction: column; min-width: 212px; }
.chat-menu-pop button { border: 0; background: transparent; text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink,#1a1f2b); }
.chat-menu-pop button:hover { background: var(--accent-soft,#f1f0fd); }

@media (max-width: 640px) {
  #staffChat.chat-expanded .chat-panel { width: calc(100vw - 24px); height: 82vh; }
  .chat-2pane .chat-rail { flex-basis: 150px; }
  .chat-media { max-width: 170px; }
}

/* Caisse : solde espèces temps réel mis en avant */
.cash-espece-row .stat:first-child { border: 1px solid #2bb673; box-shadow: 0 0 0 2px rgba(43,182,115,.12); }
.cash-espece-row .stat:first-child .stat-value, .cash-espece-row .stat:first-child strong { color: #1a7f43; }

/* Caisse : carte cliquable + détail espèces */
.stat.clickable { cursor: pointer; transition: transform .08s, box-shadow .12s; }
.stat.clickable:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(43,182,115,.18); }
.stat .stat-hint { display: block; font-size: 11px; font-weight: 600; color: #2bb673; margin-top: 4px; }
.cash-breakdown-wrap { max-height: 52vh; overflow: auto; border: 1px solid var(--border,#e3e6ee); border-radius: 10px; }
table.cash-breakdown { width: 100%; border-collapse: collapse; }
table.cash-breakdown th, table.cash-breakdown td { padding: 7px 10px; border-bottom: 1px solid var(--border,#eef0f4); font-size: 13px; }
table.cash-breakdown th { position: sticky; top: 0; background: #f7f8fc; text-align: left; }
table.cash-breakdown td.num, table.cash-breakdown th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.cash-breakdown td.pos { color: #1a7f43; font-weight: 600; }
table.cash-breakdown td.neg { color: #c0392b; font-weight: 600; }
.cash-breakdown-total { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 2px; border-top: 2px solid var(--border,#e3e6ee); margin-top: 8px; font-weight: 800; }
.cash-breakdown-total strong { color: #1a7f43; font-size: 19px; }

/* ===== Chat en direct — console staff (deux panneaux) ===== */
.lca { display: grid; grid-template-columns: 320px 1fr; gap: 14px; height: calc(100vh - 230px); min-height: 460px; margin-top: 14px; }
.lca-list { border: 1px solid var(--border, #e3e6ee); border-radius: 14px; background: var(--panel, #fff); overflow-y: auto; padding: 8px; }
.lca-list-h { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); padding: 8px 8px 6px; }
.lca-count { background: var(--accent, #5b50e0); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.lca-row { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: 10px 11px; border-radius: 11px; margin-bottom: 2px; }
.lca-row:hover { background: rgba(120,120,120,.07); }
.lca-row.active { background: var(--accent-soft, #ecebfd); }
.lca-row.unread strong { font-weight: 800; }
.lca-row-top { display: flex; align-items: center; gap: 8px; }
.lca-row-top strong { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lca-row-sub { font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lca-unread { background: #e0533d; color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lca-dot { width: 9px; height: 9px; border-radius: 50%; background: #c7ccd6; flex: 0 0 auto; }
.lca-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.lca-closed { margin-top: 8px; }
.lca-closed > summary { cursor: pointer; font-size: 12px; color: var(--muted, #6b7280); padding: 6px 8px; }
.lca-main { border: 1px solid var(--border, #e3e6ee); border-radius: 14px; background: var(--panel, #fff); display: flex; flex-direction: column; overflow: hidden; }
.lca-empty { margin: auto; text-align: center; color: var(--muted, #6b7280); }
.lca-empty > div { font-size: 40px; }
.lca-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border, #e3e6ee); flex-wrap: wrap; }
.lca-head-id strong { font-size: 16px; }
.lca-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.lca-transfer { padding: 7px 9px; border: 1px solid var(--border, #e3e6ee); border-radius: 8px; font-size: 13px; background: var(--panel, #fff); color: inherit; }
.lca-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: rgba(120,120,120,.03); }
.lca-msg { display: flex; flex-direction: column; max-width: 72%; }
.lca-msg.staff { align-self: flex-end; align-items: flex-end; }
.lca-msg.client { align-self: flex-start; align-items: flex-start; }
.lca-who { font-size: 11px; color: var(--muted, #6b7280); margin: 0 6px 2px; font-weight: 600; }
.lca-bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.lca-msg.staff .lca-bubble { background: linear-gradient(135deg, #5b50e0, #6d28d9); color: #fff; border-bottom-right-radius: 5px; }
.lca-msg.client .lca-bubble { background: var(--panel, #fff); border: 1px solid var(--border, #e3e6ee); border-bottom-left-radius: 5px; }
.lca-sys { align-self: center; font-size: 11.5px; color: var(--muted, #6b7280); background: rgba(120,120,120,.1); border-radius: 999px; padding: 4px 13px; text-align: center; max-width: 90%; }
.lca-input { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--border, #e3e6ee); }
.lca-input textarea { flex: 1; resize: none; border: 1px solid var(--border, #e3e6ee); border-radius: 11px; padding: 10px 12px; font: inherit; font-size: 14px; max-height: 120px; background: var(--panel, #fff); color: inherit; }
.lca-input textarea:focus { outline: none; border-color: var(--accent, #5b50e0); }
@media (max-width: 860px) { .lca { grid-template-columns: 1fr; height: auto; } .lca-list { max-height: 260px; } .lca-main { min-height: 420px; } }

/* ===== Messagerie : onglets Clients / Équipe (chat unifié) ===== */
.chat-tabs { display: flex; gap: 5px; padding: 7px 9px; border-bottom: 1px solid var(--border, #e3e6ee); flex: 0 0 auto; }
.chat-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: none; background: rgba(120,120,120,.07); color: var(--muted, #6b7280); border-radius: 10px; padding: 8px 6px; font-size: 13px; font-weight: 700; cursor: pointer; transition: .12s; }
.chat-tab:hover { background: rgba(120,120,120,.13); }
.chat-tab.on { background: var(--accent-soft, #ecebfd); color: #3a32a8; }
.chat-tab-b { background: #e0533d; color: #fff; border-radius: 999px; min-width: 17px; height: 17px; padding: 0 5px; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.chat-clients { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* ===== Chat clients — contenu (liste + conversation) intégré au panneau ===== */
.lcb-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }
.lcb-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: 10px 11px; border-radius: 11px; }
.lcb-row:hover { background: rgba(120,120,120,.08); }
.lcb-row.unread .lcb-row-name { font-weight: 800; }
.lcb-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lcb-row-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcb-row-main small { font-size: 11.5px; color: var(--muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcb-dot { width: 9px; height: 9px; border-radius: 50%; background: #c7ccd6; flex: 0 0 auto; }
.lcb-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.lcb-unread { background: #e0533d; color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lcb-conv-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border, #e3e6ee); flex: 0 0 auto; }
.lcb-backbtn { border: none; background: rgba(120,120,120,.08); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; cursor: pointer; color: var(--accent, #5b50e0); font-weight: 600; }
.lcb-backbtn:hover { background: rgba(120,120,120,.16); }
.lcb-conv-name { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcb-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--border, #e3e6ee); flex: 0 0 auto; scrollbar-width: none; }
.lcb-actions::-webkit-scrollbar { display: none; }
.lcb-actions > * { flex: 0 0 auto; }
.lcb-mine { font-size: 12px; font-weight: 700; color: #0a8f43; }
.lcb-transfer { padding: 5px 7px; border: 1px solid var(--border, #e3e6ee); border-radius: 8px; font-size: 12px; background: var(--panel, #fff); color: inherit; }
.lcb-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 7px; background: rgba(120,120,120,.03); }
.lcb-input { flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--border, #e3e6ee); }
.lcb-input textarea { flex: 1; resize: none; border: 1px solid var(--border, #e3e6ee); border-radius: 11px; padding: 9px 11px; font: inherit; font-size: 13.5px; max-height: 100px; background: var(--panel, #fff); color: inherit; }
.lcb-input textarea:focus { outline: none; border-color: var(--accent, #5b50e0); }
.lcb-send { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; border: none; background: var(--accent, #5b50e0); color: #fff; font-size: 17px; cursor: pointer; }
.lcb-send:hover { filter: brightness(1.08); }

/* ===== Bordereau d'achat à un particulier (rachat sur dossier client) ===== */
.btn.amber { background: #f59e0b; color: #1f2430; border-color: #f59e0b; }
.btn.amber:hover { filter: brightness(1.06); }
.bb-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.bb-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--border, #e3e6ee); border-radius: 11px; background: var(--panel, #fff); }
.bb-main { min-width: 0; }
.bb-amt { text-align: right; white-space: nowrap; }
.bb-act { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.bb-reg-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; }
@media (max-width: 640px) { .bb-row { grid-template-columns: 1fr; } .bb-amt, .bb-act { text-align: left; justify-content: flex-start; } }

/* Suivi colis : ETA (retard en rouge, à venir en vert) */
.eta-late { color: #c62828; font-weight: 700; }
.eta-ok { color: #0a8f43; font-weight: 600; }
/* Contraste : sujet des mails NON LUS (était blanc sur fond clair → illisible) */
.mail-table tr.unread td strong { color: #0e7490; }
/* Contraste : champs de la modale « changement de statut » (texte clair sur fond foncé) */
.status-confirm-modal .field input,
.status-confirm-modal .field textarea,
.status-confirm-modal .field select { background: #0e1828; color: #eef3fb; border-color: #2b3d57; }
.status-confirm-modal .field input::placeholder,
.status-confirm-modal .field textarea::placeholder { color: #9fb0c6; }
/* Ligne de résumé (totaux) en bas des listes Devis/Factures */
.doc-totals-row td { background: rgba(120,120,120,.07); border-top: 2px solid var(--border, #e3e6ee); font-size: 13px; }
/* TVA en jaune/or bien voyant, bénéfice (marge HT) en vert — TEXTE coloré uniquement, sans fond de case */
.docs-list-table .doc-tva { color: #b8860b; font-weight: 700; }
.docs-list-table .margin-ok { color: #0a8f43; font-weight: 700; }
.docs-list-table .margin-loss { color: #c62828; font-weight: 700; }

/* ===== Avis Google (page admin greviews) ===== */
.grev-card { margin-bottom: 14px; }
.grev-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.grev-card-meta { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.grev-stars { color: #f5b50a; letter-spacing: 1px; font-size: 14px; }
.grev-comment { margin: 8px 0; padding: 10px 12px; background: rgba(127,127,127,.07); border-radius: 8px; line-height: 1.45; }
.grev-published { margin-top: 10px; padding: 10px 12px; border-left: 3px solid #22c55e; background: rgba(34,197,94,.08); border-radius: 6px; }
.grev-published p { margin: 4px 0 0; }
.grev-err { margin-top: 8px; color: #dc2626; font-size: 13px; }
.grev-loc-select { min-width: 240px; }
.grev-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; }