:root {
      --font-main: Calibri, Arial, sans-serif;
      --text-size: 11pt;
      --blue: #0f5ea8;
      --blue-dark: #084d8f;
      --blue-soft: #e8f2ff;
      --bg: #f3f6fa;
      --card: #ffffff;
      --text: #172033;
      --muted: #64748b;
      --border: rgba(15, 23, 42, 0.11);
      --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
      --radius: 18px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-main);
      font-size: var(--text-size);
      background: var(--bg);
      color: var(--text);
    }

    button,
    input,
    select,
    textarea {
      font-family: inherit;
      font-size: inherit;
      resize: vertical;
      min-height: 28px;
    }

    a {
      color: inherit;
      text-decoration: none;
    }
    a:hover {
      color: var(--blue);
    }

    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 250px 1fr;
    }

    .sidebar {
      background: #ffffff;
      border-right: 1px solid var(--border);
      padding: 14px 10px;
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: visible;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 6px 14px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      margin-bottom: 12px;
    }

    .brand-logo {
      width: 42px;
      height: 42px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: white;
      border: 1px solid rgba(15, 23, 42, 0.10);
      overflow: hidden;
      flex: 0 0 auto;
    }

    .brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .brand h1 {
      font-size: 19px;
      line-height: 1.05;
      letter-spacing: -0.02em;
    }

    .brand p {
      font-size: 11px;
      color: var(--muted);
      margin-top: 3px;
    }

    .nav {
      display: grid;
      gap: 2px;
      align-content: start;
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 9px 12px;
      border-radius: 10px;
      color: #334155;
      text-decoration: none;
      font-weight: 800;
      transition: background 0.15s ease, color 0.15s ease;
      position: relative;
    }

    .nav-item:hover,
    .nav-item.active {
      background: var(--blue-soft);
      color: var(--blue);
    }

    .nav-item.active::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      bottom: 9px;
      width: 3px;
      border-radius: 999px;
      background: var(--blue);
    }

    .nav-icon {
      width: 20px;
      height: 20px;
      color: currentColor;
      flex: 0 0 auto;
      opacity: 0.92;
    }

    .nav-icon svg {
      width: 20px;
      height: 20px;
      display: block;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .nav-label {
      flex: 1;
      white-space: nowrap;
      transition: opacity 0.2s ease;
      display: flex;
      align-items: center;
    }

    .nav-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      background: #dc2626;
      color: #fff;
      border-radius: 9px;
      font-size: 7.5pt;
      font-weight: 700;
      margin-left: auto;
      line-height: 1;
      flex-shrink: 0;
    }

    .sidebar-collapsed .nav-badge { display: none; }

    /* Bouton repli sidebar */
    .sidebar-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: white;
      cursor: pointer;
      color: var(--muted);
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .sidebar-toggle:hover { background: var(--blue-soft); color: var(--blue); }
    .sidebar-toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }

    /* État replié */
    .app-shell.sidebar-collapsed {
      grid-template-columns: 62px 1fr;
    }
    .sidebar-collapsed .sidebar {
      padding: 18px 10px;
      overflow: visible;
    }
    .sidebar-collapsed .brand {
      flex-direction: column;
      gap: 8px;
      padding-bottom: 14px;
    }
    .sidebar-collapsed .brand-text { display: none; }
    .sidebar-collapsed .brand-toggle { margin: 0 auto; }
    .sidebar-collapsed .nav-label { display: none; }

    .sidebar-collapsed .nav-item {
      justify-content: center;
      padding: 6px 10px;
      position: relative;
    }
    .sidebar-collapsed .nav-item::before { display: none; }
    .sidebar-collapsed .admin-label { display: none; }
    .sidebar-collapsed .nav { gap: 1px; scrollbar-width: none; }
    .sidebar-collapsed .nav::-webkit-scrollbar { display: none; }

    /* Pied du menu : Administration · Notification · profil employé */
    .sidebar-footer {
      flex-shrink: 0;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
      display: grid;
      gap: 2px;
    }

    .sidebar-profile {
      position: relative;
      margin-top: 2px;
    }

    .sidebar-profile-pill {
      width: 100%;
      border: 1px solid var(--border);
      background: white;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-weight: 800;
      color: #334155;
    }

    .sidebar-profile-pill:hover {
      background: var(--blue-soft);
      border-color: rgba(15, 94, 168, 0.25);
    }

    .sidebar-profile-name {
      flex: 1;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-profile-caret {
      flex: 0 0 auto;
      display: flex;
      color: var(--muted);
    }

    .sidebar-profile-caret svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      display: block;
    }

    /* Le menu profil s'ouvre vers le haut (il est au bas du menu).
       Sélecteur à double classe pour battre `.dropdown-menu { top: 100% }`
       quelle que soit la position des règles dans le fichier.
       padding-bottom bride le gap entre le bouton et le menu pour que
       le :hover ne se perde pas quand la souris traverse l'espace. */
    .dropdown-menu.sidebar-profile-menu {
      top: auto;
      bottom: 100%;
      left: 0;
      right: auto;
      min-width: 210px;
      padding-bottom: 14px;
    }

    /* Sidebar repliée : le menu s'ouvre à droite de l'avatar (sinon il
       passe derrière le contenu principal qui commence à 62px). */
    .sidebar-collapsed .dropdown-menu.sidebar-profile-menu {
      bottom: 0;
      top: auto;
      left: calc(100% + 6px);
      padding-bottom: 8px;
    }

    /* Sidebar repliée : profil = avatar seul, pastille de notif en coin */
    .sidebar-collapsed .sidebar-profile-name,
    .sidebar-collapsed .sidebar-profile-caret { display: none; }
    .sidebar-collapsed .sidebar-profile-pill { justify-content: center; padding: 8px; }
    .sidebar-collapsed .sidebar-footer .notification-bubble {
      position: absolute;
      top: 3px;
      right: 6px;
      min-width: 16px;
      height: 16px;
      font-size: 9px;
    }

    /* Tooltips gérés par JS (sidebar.blade.php) — voir #sidebar-tooltip */

    .main {
      min-width: 0;
      transition: none;
    }

    /* Barre mobile (ouverture du menu) — masquée sur desktop, visible ≤ 900px */
    .mobile-topbar {
      display: none;
    }

    .global-search {
      position: relative;
      max-width: 620px;
    }

    .global-search input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 12px;              /* aligné sur .form-input (plus de pilule 999px) */
      height: 34px;                     /* même hauteur que les filtres/recherches des autres pages */
      padding: 0 15px 0 38px;           /* 38px à gauche pour la loupe */
      outline: none;
      background: #f8fafc;
      color: var(--text);
    }

    .global-search input:focus {
      border-color: rgba(15, 94, 168, 0.45);
      box-shadow: 0 0 0 4px rgba(15, 94, 168, 0.08);
      background: white;
    }

    .global-search span {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-weight: 900;
    }

    .dropdown {
      position: relative;
    }

    .dropdown-menu {
      position: absolute;
      right: 0;
      top: 100%;
      width: 235px;
      background: white;
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding: 18px 8px 8px;
      margin-top: 0;
      display: none;
      z-index: 100;
    }

    .dropdown:hover .dropdown-menu {
      display: grid;
      gap: 4px;
    }

    .dropdown-item {
      border: 0;
      background: transparent;
      color: #334155;
      border-radius: 12px;
      padding: 10px 12px;
      text-align: left;
      cursor: pointer;
      font-weight: 800;
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    .dropdown-item:hover {
      background: var(--blue-soft);
      color: var(--blue);
    }

    .btn {
      border: 0;
      cursor: pointer;
      border-radius: 999px;
      padding: 11px 15px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
      position: relative;
      text-decoration: none;
    }

    /* Boutons principaux du CORPS des pages : identiques aux boutons d'en-tête (même couleur/taille/forme).
       Couleur partagée avec l'en-tête (--btn-header-bg) ; arrondi propre configurable (--btn-body-radius).
       Les boutons de tableaux gardent leurs styles inline (padding/arrondi) ; l'en-tête garde son arrondi
       via .page-actions .btn (plus spécifique). Tokens pilotés par Admin → Apparence (App\Support\Theme). */
    .btn-primary {
      background: var(--btn-header-bg, var(--blue));
      color: white;
      border: 0;
      border-radius: var(--btn-body-radius, 10px);
      padding: 8px 14px;
      font-size: 9.5pt;
      font-weight: 800;
    }

    .btn-primary:hover {
      background: var(--btn-header-hover, var(--blue-dark));
    }

    /* Boutons SECONDAIRES — UN SEUL style (décision Philippe). .btn-white ET .btn-light sont rendus
       identiques (couleur ET taille/forme) et pilotés par les mêmes variables (Admin → Apparence). Avant :
       deux styles distincts (.btn-light = bleu pâle grande pilule, .btn-white = blanc). Même compacité que
       les boutons principaux du corps (arrondi partagé --btn-body-radius). Les boutons de tableaux gardent
       leurs styles inline ; l'en-tête garde sa taille via .page-actions .btn. Ne pas réintroduire de 2ᵉ style. */
    .btn-white,
    .btn-light {
      background: var(--btn-secondary-bg, #fff);
      color: var(--btn-secondary-text, #334155);
      border: 1px solid var(--btn-secondary-border, rgba(15, 23, 42, 0.11));
      border-radius: var(--btn-body-radius, 10px);
      padding: 8px 14px;
      font-size: 9.5pt;
      font-weight: 800;
    }

    .notification-bubble {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      background: #ef4444;
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
    }

    .avatar {
      width: 29px;
      height: 29px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: #0f172a;
      color: white;
      font-size: 11px;
    }

    .page {
      padding: 18px 26px 22px;
      max-width: 100%;
    }

    .page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
    }

    .page-title h2 {
      font-size: 31px;
      letter-spacing: -0.04em;
      margin-bottom: 5px;
    }

    .page-title p {
      color: var(--muted);
      line-height: 1.45;
    }

    /* Titre qui porte un bouton d'aide « i » (voir components/aide) : le h2 devient une rangée pour que
       le bouton se pose À CÔTÉ du titre, pas dessous. Classe explicite plutôt que `:has()` — le CRM
       tourne aussi sur de vieux iPad. */
    .page-title h2.h-aide {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .page-actions {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    /* Boutons de HEADER unifiés — POINT UNIQUE. Tous les boutons dans .page-actions (toutes les pages)
       adoptent la MÊME forme + taille que le bouton iA Michel (pill radius 10px, padding 8px 14px,
       texte 9,5pt/800), et les primaires reçoivent un dégradé BLEU moderne. Ne touche PAS les boutons de
       tableau/formulaire/modale (hors .page-actions) ni .michel-btn (identité mauve d'iA Michel). */
    .page-actions .btn {
      border-radius: var(--btn-header-radius, 10px);
      padding: 8px 14px;
      font-size: 9.5pt;
      font-weight: 800;
      gap: 7px;
    }
    .page-actions .btn-primary {
      background: var(--btn-header-bg, #1a4cb0);
      color: #fff;
      border: 0;
      box-shadow: 0 3px 11px rgba(29, 78, 216, 0.34);
    }
    .page-actions .btn-primary:hover {
      background: var(--btn-header-hover, #16409a);
      filter: none;
    }
    .page-actions .btn-white:hover {
      background: #f8fafc;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }

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

    .card h3 {
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .muted {
      color: var(--muted);
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 18px;
      align-items: start;
    }

    .dashboard-column {
      display: grid;
      gap: 18px;
    }

    .widget {
      min-height: 150px;
    }

    .widget-toolbar {
      display: none;
      gap: 6px;
      align-items: center;
    }

    .edit-mode .widget-toolbar {
      display: flex;
    }

    .widget-btn {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      border: 1px solid var(--border);
      background: #f8fafc;
      cursor: pointer;
      color: #475569;
      font-weight: 900;
    }

    .big-number {
      font-size: 34px;
      font-weight: 900;
      letter-spacing: -0.04em;
      margin-bottom: 5px;
    }

    .widget-footer {
      margin-top: 14px;
      padding-top: 13px;
      border-top: 1px solid rgba(15, 23, 42, 0.08);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .link-action {
      color: var(--blue);
      text-decoration: none;
      font-weight: 900;
    }

    .link-action:hover {
      text-decoration: underline;
    }


    .status {
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 10px;
      font-weight: 900;
      display: inline-flex;
      white-space: nowrap;
    }

    .green  { background: #dcfce7; color: #166534; }
    .orange { background: #ffedd5; color: #9a3412; }
    .blue   { background: #dbeafe; color: #1d4ed8; }
    .red    { background: #fee2e2; color: #991b1b; }
    .gray   { background: #f1f5f9; color: #475569; }
    .purple { background: #ede9fe; color: #6d28d9; }
    .teal   { background: #ccfbf1; color: #0f766e; }
    .yellow { background: #fef9c3; color: #854d0e; }

    .list {
      display: grid;
      gap: 11px;
    }

    .list-item {
      border-radius: 14px;
      background: #f8fafc;
      border: 1px solid rgba(15, 23, 42, 0.07);
      padding: 12px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      position: relative;
      overflow: hidden;
    }

    .list-item strong {
      display: block;
      margin-bottom: 4px;
    }

    .list-item p {
      color: var(--muted);
      line-height: 1.35;
    }

    .mini-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 9pt;
    }

    .mini-table th,
    .mini-table td {
      text-align: left;
      padding: 10px 8px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      vertical-align: middle;
    }

    .mini-table th {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
    }

    .quick-actions-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .quick-action {
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: #f8fafc;
      border-radius: 14px;
      padding: 13px;
      text-align: left;
      cursor: pointer;
      font-weight: 900;
      color: #1e293b;
    }

    .quick-action:hover {
      background: var(--blue-soft);
      color: var(--blue);
    }

    .empty-state {
      padding: 24px;
      border-radius: 15px;
      background: #f8fafc;
      border: 1px dashed rgba(15, 23, 42, 0.16);
      text-align: center;
      color: var(--muted);
      line-height: 1.4;
    }

    .empty-state strong {
      display: block;
      color: #334155;
      margin-bottom: 5px;
    }

    .mobile-menu-checkbox,
    .mobile-overlay,
    .mobile-menu-btn,
    .mobile-close {
      display: none;
    }

    .mobile-menu-btn {
      border: 1px solid var(--border);
      background: white;
      color: #334155;
      border-radius: 999px;
      padding: 11px 14px;
      font-weight: 900;
      align-items: center;
      gap: 9px;
      cursor: pointer;
      white-space: nowrap;
    }

    .mobile-menu-lines {
      width: 18px;
      display: grid;
      gap: 4px;
    }

    .mobile-menu-lines span {
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      display: block;
    }

    .mobile-close {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: #f8fafc;
      color: #334155;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      cursor: pointer;
      margin-left: auto;
      margin-bottom: 12px;
    }

    /* ── Fiche client ───────────────────────────────────── */
    .client-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; margin-bottom:18px; }
    .client-title-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
    .client-title-line h2 { font-size:32px; letter-spacing:-.04em; }
    .client-subline { display:flex; flex-wrap:wrap; gap:10px 18px; color:var(--muted); font-weight:800; }
    .client-subline span + span::before { content:'/'; margin-right:18px; }
    .client-actions { display:flex; align-items:flex-start; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

    .client-main-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-bottom:18px; align-items:stretch; }

    .info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .info-field { background:#f8fafc; border:1px solid rgba(15,23,42,.07); border-radius:12px; padding:9px 10px; min-height:56px; }
    .info-field.full { grid-column:1/-1; }
    .info-field label { display:block; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:900; margin-bottom:4px; }
    .info-field div { color:#1e293b; font-weight:800; line-height:1.25; }

    .map-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .map-card { display:flex; flex-direction:column; }
    .map-box { border-radius:16px; overflow:hidden; border:1px solid rgba(15,23,42,.1); background:#f8fafc; min-height:255px; position:relative; flex:1; }
    .map-box iframe { width:100%; height:100%; min-height:255px; border:0; display:block; }
    .streetview-preview { height:255px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(135deg,#e8f2ff,#ffffff); padding:16px; }
    .streetview-preview h4 { font-size:18px; margin-bottom:8px; }
    .streetview-preview p { color:var(--muted); line-height:1.4; }
    .streetview-frame { flex:1; border-radius:14px; border:1px dashed rgba(15,94,168,.35); display:grid; place-items:center; text-align:center; padding:12px; margin:14px 0; color:#0f5ea8; font-weight:900; background:rgba(255,255,255,.55); }

    /* ── Onglets CSS-only ────────────────────────────────── */
    .tabs-card { padding:0; overflow:hidden; }
    .tabs-input { display:none; }
    .tabs-nav { display:flex; gap:0; overflow-x:auto; border-bottom:1px solid rgba(15,23,42,.09); background:#fff; }
    .tab-label { flex:0 0 auto; padding:15px 16px; font-weight:900; color:#475569; cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; }
    .tab-label:hover { color:var(--blue); background:#f8fafc; }
    .tabs-content { padding:18px; }
    .tab-panel { display:none; }

    #tab-resume:checked ~ .tabs-nav label[for="tab-resume"],
    #tab-notes:checked ~ .tabs-nav label[for="tab-notes"],
    #tab-rv:checked ~ .tabs-nav label[for="tab-rv"],
    #tab-soumissions:checked ~ .tabs-nav label[for="tab-soumissions"],
    #tab-factures:checked ~ .tabs-nav label[for="tab-factures"],
    #tab-services:checked ~ .tabs-nav label[for="tab-services"],
    #tab-fichiers:checked ~ .tabs-nav label[for="tab-fichiers"],
    #tab-commandes:checked ~ .tabs-nav label[for="tab-commandes"],
    #tab-communications:checked ~ .tabs-nav label[for="tab-communications"],
    #tab-automatisations:checked ~ .tabs-nav label[for="tab-automatisations"],
    #tab-actions:checked ~ .tabs-nav label[for="tab-actions"] { color:var(--blue); border-bottom-color:var(--blue); background:#f8fafc; }

    #tab-resume:checked ~ .tabs-content #panel-resume,
    #tab-notes:checked ~ .tabs-content #panel-notes,
    #tab-rv:checked ~ .tabs-content #panel-rv,
    #tab-soumissions:checked ~ .tabs-content #panel-soumissions,
    #tab-factures:checked ~ .tabs-content #panel-factures,
    #tab-services:checked ~ .tabs-content #panel-services,
    #tab-fichiers:checked ~ .tabs-content #panel-fichiers,
    #tab-commandes:checked ~ .tabs-content #panel-commandes,
    #tab-communications:checked ~ .tabs-content #panel-communications,
    #tab-automatisations:checked ~ .tabs-content #panel-automatisations,
    #tab-actions:checked ~ .tabs-content #panel-actions { display:block; }

    .panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .panel-list { display:grid; gap:11px; }
    .row-item { border-radius:14px; background:#f8fafc; border:1px solid rgba(15,23,42,.07); padding:12px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
    .row-item strong { display:block; margin-bottom:4px; }
    .row-item p { color:var(--muted); line-height:1.35; }
    .note-box { background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:14px; padding:14px; line-height:1.4; }
    .tab-panel-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
    .tab-panel-header h3 { font-size:18px; letter-spacing:-.02em; }
    .tab-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

    .communication-layout { display:grid; grid-template-columns:280px 1fr; gap:14px; }
    .message-list { display:grid; gap:10px; }
    .message-card { border-radius:14px; background:#f8fafc; border:1px solid rgba(15,23,42,.07); padding:12px; cursor:pointer; }
    .message-card.active,.message-card:hover { background:var(--blue-soft); color:var(--blue); }
    .message-card strong { display:block; margin-bottom:4px; }
    .message-card p { color:var(--muted); line-height:1.35; }
    .message-preview { border-radius:14px; background:#f8fafc; border:1px solid rgba(15,23,42,.07); padding:16px; min-height:220px; }
    .message-preview-header { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(15,23,42,.08); }
    .message-body { color:#334155; line-height:1.5; }

    .automation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .automation-card { border-radius:14px; background:#f8fafc; border:1px solid rgba(15,23,42,.07); padding:14px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
    .automation-card strong { display:block; margin-bottom:5px; }
    .automation-card p { color:var(--muted); line-height:1.35; }
    .toggle { width:46px; height:26px; border-radius:999px; background:#cbd5e1; padding:3px; flex:0 0 auto; display:block; }
    .toggle::before { content:""; width:20px; height:20px; border-radius:50%; background:white; display:block; box-shadow:0 2px 6px rgba(15,23,42,.18); }
    .toggle.on { background:var(--blue); }
    .toggle.on::before { transform:translateX(20px); }

    .gray { background:#f1f5f9; color:#475569; }

    /* ── Auth pages ─────────────────────────────────────── */
    .auth-page {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--bg);
    }

    .auth-card {
      width: 100%;
      max-width: 420px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 40px 36px 36px;
    }

    .auth-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 32px;
    }

    .auth-brand-logo {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      overflow: hidden;
      border: 1px solid var(--border);
      flex: 0 0 auto;
    }

    .auth-brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .auth-brand h1 {
      font-size: 18px;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .auth-brand p {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    .auth-title {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.03em;
      margin-bottom: 6px;
    }

    .auth-subtitle {
      color: var(--muted);
      font-size: 11.5pt;
      margin-bottom: 28px;
      line-height: 1.4;
    }

    .form-group {
      margin-bottom: 8px;
    }

    .form-label {
      display: block;
      font-weight: 800;
      /* 9pt = la taille COMPACTE, désormais le défaut de TOUT le CRM (décision Philippe
         2026-08-03 : « je voulais normaliser ça partout »). Avant, 11.5pt : seuls les modules
         portant `.form-compact` étaient à la bonne taille, les autres paraissaient énormes. */
      font-size: 9pt;
      margin-bottom: 3px;
      color: var(--text);
    }

    /* Astérisque rouge « champ obligatoire » — POINT UNIQUE, réutilisable partout
       (labels, titres de section, boutons). Usage : <span class="req">*</span>. */
    .req { color: #dc2626; font-weight: 700; }

    .form-input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 12px;
      /* Compact par défaut (voir .form-label). Les <input>/<select> gardent leur hauteur
         uniforme de 34px juste en dessous ; seuls les <textarea> suivent ce padding. */
      font-size: 9.5pt;
      padding: 6px 8px;
      outline: none;
      background: #f8fafc;
      color: var(--text);
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

    /* Hauteur UNIFORME (34px) des champs de recherche + selects, alignée sur la hauteur ORIGINALE des
       filtres (.color-select-trigger) → barre de filtres cohérente sur TOUTES les pages. Padding vertical
       réduit pour que le texte ne soit pas rogné (11pt ~18px dans une zone de 20px). Les <textarea>
       (hauteur libre) ne sont PAS ciblés. */
    input.form-input,
    select.form-input {
      height: 34px;
      padding-top: 6px;
      padding-bottom: 6px;
    }

    .form-input:focus {
      border-color: rgba(15, 94, 168, 0.45);
      box-shadow: 0 0 0 4px rgba(15, 94, 168, 0.08);
      background: white;
    }

    .form-input.is-invalid {
      border-color: #ef4444;
    }

    .form-error {
      margin-top: 6px;
      color: #dc2626;
      font-size: 10.5pt;
    }

    /* ─── Color Select (menus déroulants avec pastilles colorées) ────────── */
    .color-select-wrap { position: relative; display: block; }
    .color-select-wrap select.native-select { display: none !important; }

    .color-select-trigger {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      background: white;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 5px 8px 5px 10px;
      cursor: pointer;
      font-family: inherit;
      font-size: 9.5pt;
      font-weight: 700;
      color: #334155;
      text-align: left;
      white-space: nowrap;
      height: 34px;
      box-sizing: border-box;
    }
    .color-select-trigger:hover { border-color: rgba(15,94,168,.4); background: #f8fafc; }
    .color-select-trigger.is-open {
      border-color: rgba(15,94,168,.6);
      box-shadow: 0 0 0 3px rgba(15,94,168,.08);
    }
    .cs-caret {
      width: 14px; height: 14px;
      stroke: #94a3b8; fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      flex-shrink: 0; margin-left: auto;
      transition: transform .15s; display: block;
    }
    .color-select-trigger.is-open .cs-caret { transform: rotate(180deg); }

    .color-select-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      min-width: 100%;
      background: white;
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,.12);
      padding: 6px;
      z-index: 600;
      max-height: 400px;
      overflow-y: auto;
    }
    .color-select-dropdown.is-open { display: grid; gap: 2px; }

    .cs-option {
      display: flex;
      align-items: center;
      padding: 4px 6px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .1s;
    }
    .cs-option:hover { background: var(--blue-soft); }
    .cs-option.is-selected { background: #f1f5f9; }
    .cs-option.is-disabled { opacity: .5; cursor: default; }

    .cs-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px 3px 7px;
      border-radius: 999px;
      font-size: 9pt;
      font-weight: 700;
      white-space: nowrap;
      line-height: 1.4;
    }
    .cs-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
      display: inline-block;
    }
    .cs-plain {
      font-size: 9pt;
      font-weight: 700;
      color: #64748b;
    }

    /* Étape (stage) — rectangle avec bordure gauche colorée, distinct de la pilule statut */
    .cs-stage {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px 3px 8px;
      border-radius: 5px;
      font-size: 9pt;
      font-weight: 700;
      white-space: nowrap;
      line-height: 1.4;
    }

    /* ─── Info-tip : pastille « i » discrète + bulle blanche (survol desktop + focus/tap mobile) ─── */
    .info-tip {
      position: relative;
      display: inline-flex;
      align-items: center;
      background: none; border: 0; padding: 0;
      font-family: inherit; font-size: 9pt; font-weight: 700;
      color: var(--blue);
      cursor: pointer;
      text-decoration: underline; text-underline-offset: 2px;
      flex-shrink: 0; vertical-align: middle;
      transition: color .15s ease;
    }
    .info-tip:hover, .info-tip:focus, .info-tip:focus-visible {
      color: #0b4a85; outline: none;
    }

    .info-tip-bubble {
      position: absolute;
      top: calc(100% + 11px);
      left: -4px;
      width: 340px; max-width: 84vw;
      background: #fff; color: #475569;
      font-size: 9pt; font-weight: 400; line-height: 1.6;
      font-family: inherit;
      text-align: left;
      padding: 14px 16px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 0 14px 38px rgba(15, 23, 42, .16);
      opacity: 0; visibility: hidden; transform: translateY(-4px);
      transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
      z-index: 1000; white-space: normal; pointer-events: none;
    }
    .info-tip-bubble::before {
      content: ''; position: absolute; bottom: 100%; left: 12px;
      width: 12px; height: 12px; background: #fff;
      border-left: 1px solid #e2e8f0; border-top: 1px solid #e2e8f0;
      transform: translateY(50%) rotate(45deg);
    }
    .info-tip-title {
      display: block; font-size: 8pt; font-weight: 800; letter-spacing: .04em;
      text-transform: uppercase; color: var(--blue); margin-bottom: 7px;
    }
    .info-tip-bubble strong { color: #0f172a; font-weight: 700; }
    .info-tip-warn {
      display: block; margin-top: 11px;
      background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px;
      padding: 9px 11px; color: #92400e; font-size: 8.5pt; line-height: 1.5;
    }
    .info-tip-warn strong { color: #92400e; }
    .info-tip:hover .info-tip-bubble,
    .info-tip:focus .info-tip-bubble,
    .info-tip:focus-visible .info-tip-bubble {
      opacity: 1; visibility: visible; transform: translateY(0);
    }
    @media (max-width: 640px) {
      .info-tip-bubble { left: auto; right: -4px; }
      .info-tip-bubble::before { left: auto; right: 12px; }
    }

    .form-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 24px;
    }

    .form-check {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 11pt;
      color: var(--muted);
    }

    .form-check input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer;
      accent-color: var(--blue);
    }

    .auth-link {
      color: var(--blue);
      text-decoration: none;
      font-weight: 800;
      font-size: 11pt;
    }

    .auth-link:hover {
      text-decoration: underline;
    }

    .auth-alert {
      padding: 12px 15px;
      border-radius: 12px;
      margin-bottom: 18px;
      font-size: 11pt;
      line-height: 1.4;
    }

    .auth-alert-success {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #bbf7d0;
    }

    .btn-auth {
      width: 100%;
      justify-content: center;
      border-radius: 12px;
      padding: 13px;
      font-size: 12pt;
    }

    /* ───────────────────────────────────────────────────── */

    @media (max-width: 1200px) {
      .dashboard-grid { grid-template-columns: 1fr 1fr; }
      .client-main-grid,.panel-grid { grid-template-columns: 1fr; }
      .map-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 900px) {
      .app-shell {
        grid-template-columns: 1fr;
      }

      .mobile-menu-btn {
        display: inline-flex;
      }

      .mobile-close {
        display: flex;
      }

      .mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.38);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease;
        z-index: 80;
      }

      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 320px);
        height: 100vh;
        z-index: 90;
        border-right: 1px solid var(--border);
        border-bottom: 0;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 20px 0 55px rgba(15, 23, 42, 0.22);
      }

      .mobile-menu-checkbox:checked ~ .app-shell .sidebar {
        transform: translateX(0);
      }

      .mobile-menu-checkbox:checked ~ .mobile-overlay {
        opacity: 1;
        pointer-events: auto;
      }

      .nav {
        grid-template-columns: 1fr;
      }

      .nav-item {
        padding: 12px 12px;
      }

      .mobile-topbar {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        background: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(10px);
      }

      .global-search {
        max-width: none;
      }

      .dropdown-menu {
        left: 0;
        right: auto;
        width: min(100%, 280px);
      }

      .page {
        padding: 18px 14px;
      }

      .page-header {
        flex-direction: column;
        gap: 12px;
      }

      .page-title h2 {
        font-size: 26px;
      }

      .page-actions {
        justify-content: flex-start;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .page-actions .btn {
        justify-content: center;
      }

      .dashboard-grid,
      .quick-actions-grid {
        grid-template-columns: 1fr;
      }

      .dashboard-grid {
        gap: 14px;
      }

      .dashboard-column {
        gap: 14px;
      }

      .card {
        border-radius: 16px;
        padding: 15px;
      }

      .list-item {
        flex-direction: column;
        gap: 8px;
      }

      .widget-footer {
        align-items: flex-start;
        flex-direction: column;
      }

      .mini-table { display: block; overflow-x: auto; white-space: nowrap; }
      .client-header { grid-template-columns: 1fr; }
      .client-actions { justify-content: flex-start; }
      .info-grid { grid-template-columns: 1fr; }
      .client-title-line h2 { font-size: 26px; }
      .tabs-content { padding: 14px; }
      .row-item { flex-direction: column; }
      .communication-layout,.automation-grid { grid-template-columns: 1fr; }
      .tab-panel-header { align-items: flex-start; flex-direction: column; }
      .tab-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
      .tab-actions .btn { justify-content: center; }
      .message-preview-header { flex-direction: column; }
    }

/* ── Surlignage des lignes nouvellement créées / dupliquées ──────────
   Utilisé par toutes les listes après une duplication ou une création :
   le contrôleur fait back()->with('new_xxx_ids', [...]) et la vue ajoute
   la classe .row-new-highlight aux lignes concernées (fond vert qui s'estompe). */
.row-new-highlight {
    background: #f0fdf4;
    animation: fadeHighlight 4s ease forwards;
}
@keyframes fadeHighlight {
    0%   { background: #bbf7d0; }
    100% { background: #f0fdf4; }
}

/* ── Disposition d'une ligne de soumission / produit ─────────────────
   Ligne 1 : [Type] [Note optionnelle]    ·    Ligne 2 : [Description (large)] [Prix]
   Utilisé par _line.blade.php (produit) et _line-row.blade.php (soumission). */
.line-head { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.line-head-type { width: 150px; flex-shrink: 0; }
.line-head-note { flex: 1; min-width: 0; }
.line-body { display: grid; grid-template-columns: 1fr 360px; gap: 10px; align-items: stretch; }
/* Chaque colonne est une sous-grille [label auto] + [boîte 1fr] ; un label invisible au-dessus
   de la boîte prix compense le label « Description ». */
.line-body .line-desc,
.line-body .line-price-col { display: grid; grid-template-rows: auto 1fr; }
.line-body .line-desc .line-desc-input,
.line-body .line-price-col .line-price-box { min-height: 0; }
/* La description fait la hauteur de SON TEXTE, pas celle de la boîte prix (décision Philippe) :
   deux lignes de texte dans une boîte calée sur la colonne prix laissaient un grand vide.
   `align-self: start` est ce qui le permet — sans lui la grille étire le textarea, et l'auto-hauteur
   de `partials/_autogrow` se mesure elle-même : elle pose height:auto pour mesurer, la grille
   l'étire aussitôt à la hauteur de la colonne, et scrollHeight renvoie cette hauteur-là (vécu).
   La hauteur réelle est ensuite posée en ligne par ce partial ; `rows` n'est que le plancher. */
.line-body .line-desc .line-desc-input { height: auto; align-self: start; box-sizing: border-box; }
/* Petit libellé au-dessus d'un champ (style premium de la boîte prix) */
.line-field-label { font-size: 7.5pt; letter-spacing: .6px; text-transform: uppercase; color: #94a3b8; font-weight: 700; margin-bottom: 3px; }
@media (max-width: 820px) {
    .line-head { flex-wrap: wrap; }
    .line-head-note { flex: 1 1 100%; }
    .line-body { grid-template-columns: 1fr; }
}
/* Poignée de glisser-déposer des lignes */
.drag-handle { cursor: grab; color: #94a3b8; user-select: none; font-size: 16px; line-height: 1; padding: 2px 6px 2px 0; flex-shrink: 0; align-self: flex-end; margin-bottom: 2px; }
.drag-handle:active { cursor: grabbing; }
/* Bouton réduire/développer une ligne */
.line-collapse-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; font-size: 10px; color: #94a3b8; cursor: pointer; flex-shrink: 0; line-height: 1.4; align-self: flex-end; margin-bottom: 1px; }
.line-collapse-btn:hover { background: #f1f5f9; color: #475569; }
/* Ligne réduite : cache le corps, montre le résumé */
.q-line-row.is-collapsed .line-body,
.quote-line-row.is-collapsed .line-body { display: none !important; }
/* Barre résumé (visible seulement quand réduit) */
.line-summary-bar { display: none; align-items: center; gap: 12px; padding: 4px 0 2px; overflow: hidden; }
.q-line-row.is-collapsed .line-summary-bar,
.quote-line-row.is-collapsed .line-summary-bar { display: flex; }
.line-summary-desc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: 9pt; }
.line-summary-total { font-weight: 700; color: #0f172a; font-size: 10pt; white-space: nowrap; }
/* ── Tableau de bord Soumissions (quotes/dashboard) ──────────────── */
.qd-period { display: inline-flex; flex-wrap: wrap; gap: 4px; background: #f1f5f9; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.qd-period a, .qd-period button { padding: 6px 14px; border: none; background: none; border-radius: 7px; font-size: 9.5pt; font-weight: 600; color: var(--muted); text-decoration: none; cursor: pointer; font-family: inherit; transition: all .15s; }
.qd-period a:hover, .qd-period button:hover { color: var(--blue); }
.qd-period a.active, .qd-period button.active { background: #fff; color: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.10); }

/* Dropdowns Mois / Année de la barre de période (partials/_period-bar) */
.pb-dd { position: relative; display: inline-flex; }
.pb-dd-menu { display: none; position: absolute; top: calc(100% + 5px); left: 0; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.13);
  padding: 4px; z-index: 600; min-width: 130px; }
.pb-dd-menu.open { display: flex; }
.pb-dd-menu button { padding: 6px 12px; border: 0; background: none; border-radius: 7px; text-align: left; white-space: nowrap;
  font-size: 9.5pt; font-weight: 600; color: var(--muted); cursor: pointer; font-family: inherit; width: 100%; }
.pb-dd-menu button:hover { background: var(--blue-soft); color: var(--blue); }
.pb-dd-menu button.active { background: #f1f5f9; color: var(--blue); }
.pb-custom { align-items: center; gap: 6px; }

.qd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
/* Variante 5 colonnes (dashboard Facture = 10 cartes → exactement 2 lignes sur grand écran).
   Gagne sur le `repeat(4)` de base (déclarée après) ; en dessous de 1400px les media queries
   partagées `.qd-kpis` reprennent la main (4 → 2 → 1 col) — donc responsive préservé. */
.qd-kpis--5 { grid-template-columns: repeat(5, 1fr); }
.qd-kpi { position: relative; overflow: hidden; border-radius: 14px; padding: 13px 15px; color: #fff; box-shadow: 0 5px 14px rgba(0,0,0,.10); transition: transform .12s, box-shadow .12s; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
a.qd-kpi { text-decoration: none; color: #fff; cursor: pointer; }
a.qd-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.16); }
.qd-kpi.is-active { box-shadow: 0 0 0 3px #0f172a, 0 8px 22px rgba(0,0,0,.18); }
.qd-kpi-main { min-width: 0; }
.qd-kpi-icon { flex: 0 0 auto; opacity: .5; margin-top: 1px; }
.qd-kpi-icon svg { width: 24px; height: 24px; display: block; }
.qd-kpi-value { font-size: 25px; font-weight: 900; line-height: 1.05; letter-spacing: -.5px; }
.qd-kpi-label { font-size: 9.5pt; font-weight: 700; opacity: .95; margin-top: 3px; }
.qd-kpi-sub { font-size: 8pt; opacity: .82; margin-top: 2px; }
.qd-kpi-warn { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 8pt; font-weight: 700; background: rgba(255,255,255,.22); padding: 3px 8px; border-radius: 7px; }
.qd-kpi-warn svg { width: 12px; height: 12px; flex: 0 0 auto; }
.qd-kpi-sellers { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.22); display: grid; gap: 3px; }
.qd-kpi-seller-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 8pt; }
.qd-kpi-seller-name { opacity: .9; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qd-kpi-seller-val { font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.qd-kpi--green  { background: linear-gradient(135deg, #16a34a, #0f7a37); }
.qd-kpi--blue   { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.qd-kpi--amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.qd-kpi--violet { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.qd-kpi--red    { background: linear-gradient(135deg, #ef4444, #dc2626); }
.qd-kpi--teal   { background: linear-gradient(135deg, #0d9488, #0f766e); }
.qd-kpi--rose   { background: linear-gradient(135deg, #e11d48, #9f1239); }
.qd-kpi--slate  { background: linear-gradient(135deg, #64748b, #475569); }
.qd-kpi--yellow { background: linear-gradient(135deg, #eab308, #ca8a04); }
.qd-kpi--cyan    { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.qd-kpi--fuchsia { background: linear-gradient(135deg, #d946ef, #a21caf); }

/* Liste détaillée du dashboard : accordéon par client + soumissions (statut modifiable) */
.qd-client { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.qd-client-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; background: #f8fafc; transition: background .12s; }
.qd-client-head:hover { background: #f1f5f9; }
.qd-client-chevron { flex: 0 0 auto; color: var(--muted); font-size: 11px; transition: transform .15s; }
.qd-client.open .qd-client-chevron { transform: rotate(90deg); }
.qd-client-name { font-size: 10pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-client-addr { font-size: 9pt; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-client-body { display: none; padding: 2px 12px 8px; }
.qd-client.open .qd-client-body { display: block; }
.qd-quote-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--border); }
.qd-quote-num { flex: 0 0 auto; font-weight: 800; font-size: 9.5pt; color: var(--blue); text-decoration: none; white-space: nowrap; }
.qd-quote-num:hover { text-decoration: underline; }
.qd-quote-title { flex: 1; min-width: 0; font-size: 9.5pt; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-quote-status { flex: 0 0 auto; width: auto; min-width: 150px; font-size: 9pt; padding: 5px 8px; }
.qd-quote-reason { margin: 2px 4px 8px 4px; padding: 9px 12px; background: #fef2f2; border: 1px solid #fecaca; border-left: 3px solid #dc2626; border-radius: 8px; font-size: 9pt; line-height: 1.5; color: #7f1d1d; white-space: pre-wrap; }
.qd-quote-reason-label { display: block; font-size: 8pt; font-weight: 800; letter-spacing: .3px; color: #dc2626; margin-bottom: 3px; text-transform: uppercase; }
.qd-quote-reason--wait { background: #f8fafc; border-color: #e2e8f0; border-left-color: #64748b; color: #334155; }
.qd-quote-reason--wait .qd-quote-reason-label { color: #475569; }

/* ── Réglages des relances (Admin → Automatisations → Relances) ── */
.rem-head { display: flex; align-items: flex-start; gap: 14px; }
.rem-head-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.rem-head-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rem-head-text { flex: 1; min-width: 0; }
.rem-head-text h3 { margin: 0 0 4px; font-size: 13pt; font-weight: 800; color: #0f172a; }
.rem-head-text p { margin: 0; font-size: 9pt; color: var(--muted); line-height: 1.55; }
/* INTERRUPTEUR — POINT UNIQUE de tout le CRM (règle 14).
   Il n'existait que sous le nom `rem-switch`, dans la feuille des relances : la page des préférences de
   notification en avait besoin, et un second interrupteur aurait dérivé (taille, couleur, animation).
   `.rem-switch` reste un alias pour ne pas toucher aux trois pages qui l'employaient déjà. */
.mph-switch, .rem-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; cursor: pointer; }
.rem-switch { margin-top: 4px; }
.mph-switch input, .rem-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mph-switch .mph-slider, .rem-switch .rem-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .2s; }
.mph-switch .mph-slider::before, .rem-switch .rem-slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
/* ALLUMÉ = LE BLEU MPH, partout et sans exception (décision Philippe).
   Les interrupteurs de la page Paramètres portaient la couleur de leur module : neuf teintes pour dire
   la même chose — « c'est activé ». La couleur du module reste là où elle informe (le liseré et l'icône
   de la ligne) ; l'interrupteur, lui, ne dit qu'un état, donc une seule couleur.
   `var(--blue)` et non un hex : la couleur principale est réglable dans Admin → Apparence ({@see Theme}). */
.mph-switch input:checked + .mph-slider, .rem-switch input:checked + .rem-slider { background: var(--blue); }
.mph-switch input:checked + .mph-slider::before, .rem-switch input:checked + .rem-slider::before { transform: translateX(20px); }
.mph-switch input:focus-visible + .mph-slider, .rem-switch input:focus-visible + .rem-slider { outline: 2px solid var(--blue); outline-offset: 2px; }
.rem-steps { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; transition: opacity .2s; }
.rem-steps.rem-disabled { opacity: .45; }
.rem-step { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px; background: #f8fafc; }
.rem-step-badge { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 800; font-size: 10pt; }
.rem-step-label { flex: 1; min-width: 0; }
.rem-step-label .t { font-weight: 700; font-size: 10.5pt; color: #0f172a; }
.rem-step-label .s { font-size: 8.5pt; color: var(--muted); margin-top: 1px; }
.rem-input-group { display: flex; align-items: stretch; flex: 0 0 auto; }
.rem-input-group input.form-input { width: 76px; text-align: center; font-weight: 700; border-radius: 9px 0 0 9px; border-right: none; }
.rem-input-group .unit { display: grid; place-items: center; padding: 0 13px; background: #eef2f7; border: 1px solid var(--border); border-left: none; border-radius: 0 9px 9px 0; font-size: 9pt; color: #475569; font-weight: 600; white-space: nowrap; }
@media (max-width: 540px) {
    .rem-step { flex-wrap: wrap; }
    .rem-step-label { flex: 1 1 60%; }
    .rem-input-group { margin-left: auto; }
}

.qd-accepted-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--border); border-left: 4px solid #16a34a; text-decoration: none; color: inherit; transition: background .15s; }
.qd-accepted-row:hover { background: #eef6f0; }
.qd-accepted-num { font-weight: 800; font-size: 10pt; color: var(--blue); white-space: nowrap; }
.qd-accepted-amount { font-weight: 900; font-size: 12pt; color: #16a34a; white-space: nowrap; }

.qd-bar-track { flex: 1; height: 10px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.qd-bar-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }

@media (max-width: 1400px) {
    .qd-kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .qd-kpis { grid-template-columns: 1fr 1fr; }
    .qd-two-col { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
    .qd-kpis { grid-template-columns: 1fr; }
}

/* ── Onglet Fichiers (fiche client) ──────────────────────────────── */
.cf-folder { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; margin-bottom:6px; }
.cf-folder-head { width:100%; display:flex; align-items:center; gap:10px; padding:7px 11px; background:#f8fafc; border:0; cursor:pointer; text-align:left; font:inherit; }
.cf-folder-head:hover { background:#f1f5f9; }
.cf-folder-ico { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; flex:0 0 auto; }
.cf-folder-ico svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.cf-folder-name { font-weight:800; color:#1e293b; flex:0 1 auto; font-size:10pt; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-count { background:#e2e8f0; color:#475569; border-radius:999px; padding:1px 9px; font-size:8.5pt; font-weight:800; flex:0 0 auto; }
.cf-chevron { color:#94a3b8; transition:transform .2s; flex:0 0 auto; font-size:10pt; margin-left:auto; }
.cf-folder.open .cf-chevron { transform:rotate(180deg); }
.cf-folder-body { display:none; padding:5px 6px 8px 30px; }
.cf-folder.open .cf-folder-body { display:block; }
.cf-empty { color:var(--muted); font-size:9pt; padding:6px 10px; }

.cf-file { display:flex; align-items:center; gap:10px; padding:5px 8px; border-radius:8px; background:#f8fafc; border:1px solid var(--border); margin-bottom:4px; }
.cf-file:last-child { margin-bottom:0; }
.cf-file:hover { background:#f1f5f9; }
.cf-file-ico { display:grid; place-items:center; width:30px; height:30px; border-radius:7px; background:#eef2f7; color:#475569; font-size:6.5pt; font-weight:900; letter-spacing:.3px; flex:0 0 auto; text-decoration:none; }
a.cf-file-ico { cursor:pointer; }
.cf-file-main { flex:1; min-width:0; }
.cf-file-name { font-weight:700; color:#1e293b; text-decoration:none; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:9.5pt; }
.cf-file-name:hover { color:var(--blue); text-decoration:underline; }
.cf-file-meta { font-size:8pt; color:var(--muted); margin-top:1px; }
.cf-file-actions { display:flex; gap:6px; flex:0 0 auto; }

/* Pastilles de type de fichier */
.cf-ext-pdf { background:#fee2e2; color:#dc2626; }
.cf-ext-jpg, .cf-ext-jpeg, .cf-ext-png, .cf-ext-gif, .cf-ext-webp, .cf-ext-heic { background:#dcfce7; color:#16a34a; }
.cf-ext-doc, .cf-ext-docx { background:#dbeafe; color:#2563eb; }
.cf-ext-xls, .cf-ext-xlsx, .cf-ext-csv { background:#dcfce7; color:#15803d; }

/* Jeton de fichier sélectionné (modale de téléversement) */
.cf-chip { display:flex; align-items:center; gap:6px; background:#f1f5f9; border:1px solid var(--border); border-radius:6px; padding:4px 10px; font-size:9pt; }
.cf-chip button { background:none; border:none; color:#dc2626; cursor:pointer; font-size:11px; padding:0 2px; }
#cf-drop { transition:border-color .15s, background .15s, box-shadow .15s; }
#cf-drop > * { pointer-events:none; } /* évite le scintillement dragleave sur les enfants */
#cf-drop.drag { border-color:#2563eb !important; background:#dbeafe !important; box-shadow:inset 0 0 0 3px rgba(37,99,235,.18); }
#cf-drop.drag * { color:#1d4ed8 !important; }
.cf-cam-row { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.cf-cam-row .btn { flex:1 1 auto; min-width:150px; justify-content:center; }

/* Visionneuse photo (lightbox) */
#photo-viewer { position:fixed; inset:0; background:rgba(15,23,42,.94); z-index:1100; display:none; align-items:center; justify-content:center; }
#pv-img { max-width:92vw; max-height:86vh; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.5); user-select:none; }
.pv-btn { position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; cursor:pointer; display:grid; place-items:center; border-radius:999px; transition:background .15s; }
.pv-btn:hover { background:rgba(255,255,255,.25); }
.pv-prev, .pv-next { top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:30px; line-height:1; }
.pv-prev { left:18px; } .pv-next { right:18px; }
.pv-close { top:16px; right:18px; width:40px; height:40px; font-size:24px; line-height:1; }
.pv-caption { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#e2e8f0; font-size:10pt; font-weight:600; padding:0 70px; }

@media (max-width:600px) {
    .cf-file { flex-wrap:wrap; }
    .cf-file-actions { flex:1 1 100%; justify-content:flex-end; }
    .pv-prev { left:6px; } .pv-next { right:6px; }
}

/* ═══════════════════════════════════════════════════════════════
   PIPELINE — Barre de filtres
   ═══════════════════════════════════════════════════════════════ */

.pl-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.pl-tabs {
    display: flex;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}

.pl-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 9pt;
    font-weight: 600;
    text-decoration: none;
    color: #64748b;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.pl-tab:hover { background: #e2e8f0; color: #334155; }
.pl-tab.active { background: #fff; color: var(--blue); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

.pl-tab-count {
    background: var(--blue);
    color: #fff;
    border-radius: 20px;
    font-size: 7.5pt;
    font-weight: 700;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}
.pl-tab:not(.active) .pl-tab-count { background: #cbd5e1; color: #475569; }

.pl-filter-select {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 9pt;
    color: #334155;
    background: #fff;
    cursor: pointer;
    height: 34px;
}
.pl-filter-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14,90,168,.1); }

.pl-filter-clear {
    font-size: 8.5pt;
    color: #ef4444;
    text-decoration: none;
    padding: 6px 10px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    font-weight: 600;
    white-space: nowrap;
}
.pl-filter-clear:hover { background: #fee2e2; }

/* ═══════════════════════════════════════════════════════════════
   PIPELINE — Liste
   ═══════════════════════════════════════════════════════════════ */

.pl-list {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.pl-list-header,
.pl-row {
    display: grid;
    grid-template-columns: 2fr 1.6fr 1fr 1fr 80px 160px 76px;
    align-items: center;
    gap: 0;
}

.pl-list-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    padding: 0 6px;
}
.pl-list-header > div {
    padding: 9px 10px;
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
}

.pl-row {
    border-bottom: 1px solid #f1f5f9;
    padding: 0 6px;
    cursor: pointer;
    transition: background .1s;
}
.pl-row:last-child { border-bottom: none; }
.pl-row:hover { background: #f8fafc; }
.pl-row > div { padding: 10px; }

/* Colonnes */
.pl-col-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pl-col-contact { min-width: 0; }
.pl-col-type    { min-width: 0; }
.pl-col-assigned { color: #64748b; font-size: 9pt; }
.pl-col-time     { color: #94a3b8; font-size: 8.5pt; white-space: nowrap; }
.pl-col-status   { padding: 8px 10px !important; }
.pl-col-actions  { display: flex; align-items: center; gap: 4px; justify-content: flex-end; padding-right: 12px !important; }

/* Avatar initiales */
.pl-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8.5pt;
    font-weight: 800;
    flex-shrink: 0;
}

.pl-name-block { min-width: 0; }
.pl-name {
    display: block;
    font-size: 9.5pt;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-city {
    display: block;
    font-size: 8pt;
    color: #94a3b8;
    margin-top: 1px;
}

.pl-contact-link {
    display: block;
    font-size: 9pt;
    color: var(--blue);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-contact-link:hover { text-decoration: underline; }
.pl-email { color: #64748b; }

.pl-badge {
    display: inline-block;
    border: 1px solid;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 8pt;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-user-chip {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    border-radius: 20px;
    padding: 3px 9px;
    font-size: 8pt;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Select de statut */
.pl-status-select {
    border: 1px solid;
    border-radius: 20px;
    padding: 4px 26px 4px 10px;
    font-size: 8pt;
    font-weight: 700;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-color: transparent;
    width: 100%;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-status-select:focus { outline: none; }
.pl-status-select:disabled { opacity: .5; cursor: not-allowed; }

/* Boutons d'action */
.pl-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: #fff;
    color: #64748b;
    cursor: pointer;
    text-decoration: none;
    transition: background .1s, color .1s, border-color .1s;
    flex-shrink: 0;
}
.pl-action-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.pl-open-btn:hover { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }

@media (max-width: 900px) {
    .pl-list-header,
    .pl-row { grid-template-columns: 1.8fr 1.2fr 1fr 120px 60px; }
    .pl-col-assigned, .pl-col-time { display: none; }
}
@media (max-width: 600px) {
    .pl-list-header,
    .pl-row { grid-template-columns: 1fr 110px 52px; }
    .pl-col-contact, .pl-col-type, .pl-col-assigned, .pl-col-time { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PIPELINE — Kanban (conservé, non utilisé)
   ═══════════════════════════════════════════════════════════════ */
.pipeline-board { padding-bottom: 8px; }

.pipeline-columns {
    display: flex;
    gap: 12px;
    height: 100%;
    min-height: calc(100vh - 200px);
    padding-bottom: 4px;
    align-items: flex-start;
}

.pipeline-col {
    flex: 0 0 260px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
    overflow: hidden;
}

.pipeline-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 11px 11px 0 0;
    flex-shrink: 0;
}

.pipeline-col-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pipeline-col-count {
    font-size: 8pt;
    font-weight: 700;
    border-radius: 20px;
    padding: 1px 7px;
    flex-shrink: 0;
}

.pipeline-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 48px;
}

.pipeline-col-footer {
    padding: 6px 8px 8px;
    flex-shrink: 0;
}

.pipeline-add-btn {
    width: 100%;
    background: none;
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 6px;
    font-size: 8.5pt;
    color: var(--muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.pipeline-add-btn:hover { background: #e2e8f0; color: #334155; }

/* ── Carte de lead ─────────────────────────────────────────── */
.pipeline-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 10px 12px;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s, transform .1s;
    user-select: none;
}
.pipeline-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,.09);
    border-color: #cbd5e1;
    transform: translateY(-1px);
}
.pipeline-card-ghost { opacity: .4; background: #e2e8f0 !important; }
.pipeline-card-drag  { box-shadow: 0 8px 24px rgba(0,0,0,.14); transform: rotate(1.5deg); }

.pipeline-card-name {
    font-weight: 700;
    font-size: 9.5pt;
    color: #1e293b;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pipeline-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .pipeline-columns { flex-direction: column; min-height: unset; }
    .pipeline-col { flex: none; width: 100%; max-height: unset; }
    .pipeline-col-body { max-height: 300px; }
}

/* ──────────────── Étapes de préparation des factures (checklist simple) ────────────────
   Visuel volontairement sobre : pas de couleur d'accent. Texte foncé + ✓ vert quand c'est complété. */
.prep-list { display: flex; flex-direction: column; gap: 8px; }
/* Une étape ajoutée = une petite carte, fond vert pâle quand complétée */
.prep-step { border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 11px; background: #fff; display: flex; flex-direction: column; gap: 8px; transition: background .25s ease, border-color .25s ease; }
.prep-step.is-complete { border-color: #bbf7d0; background: #f0fdf4; }
.prep-step-head { display: flex; align-items: center; gap: 8px; }
.prep-step-name { font-size: 9.5pt; font-weight: 700; color: #1e293b; }
.prep-step-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.prep-step-status { font-size: 7.5pt; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.prep-step-status--done { background: #dcfce7; color: #15803d; }
.prep-step-status--todo { background: #fef3c7; color: #b45309; }
.prep-step-flag { color: #16a34a; font-weight: 800; font-size: 10.5pt; line-height: 1; }
.prep-step-remove { background: none; border: none; color: #cbd5e1; cursor: pointer; font-size: 10pt; line-height: 1; padding: 0 2px; }
.prep-step-remove:hover { color: #dc2626; }
/* + Ajouter une étape → chips sélectionnables (pastille avec « + » vert) */
.prep-add { margin-top: 2px; }
.prep-add-btn { background: none; border: 1px dashed #cbd5e1; color: #475569; padding: 6px 12px; border-radius: 8px; font-size: 8.5pt; font-weight: 600; cursor: pointer; }
.prep-add-btn:hover { background: #f8fafc; border-color: #94a3b8; }
.prep-add-menu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.prep-add-item { background: #fff; border: 1.5px solid #e2e8f0; color: #1e293b; padding: 6px 12px; border-radius: 999px; font-size: 8.5pt; font-weight: 600; cursor: pointer; }
.prep-add-item::before { content: '+ '; color: #16a34a; font-weight: 800; }
.prep-add-item:hover { border-color: #16a34a; background: #f0fdf4; color: #15803d; }

.prep-ms-list { display: flex; flex-direction: column; gap: 1px; padding-left: 24px; margin-top: 4px; }
.prep-ms {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    background: none; border: none; padding: 4px 6px; border-radius: 7px; cursor: pointer;
    font-size: 9pt; color: #334155;
}
.prep-ms:hover { background: #f1f5f9; }
.prep-ms-box {
    width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid #cbd5e1; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9pt; font-weight: 800; color: #fff; line-height: 1; background: #fff;
}
.prep-ms.is-done .prep-ms-box  { background: #16a34a; border-color: #16a34a; }
.prep-ms.is-done .prep-ms-name { color: #64748b; }   /* fait = atténué, l'œil se porte sur ce qui reste */
.prep-empty { font-size: 8.5pt; color: #94a3b8; }
.prep-empty a { color: var(--blue); text-decoration: none; }

/* Colonne de liste : badge + popover */
.prep-cell { position: relative; display: inline-block; }
/* Pastille d'état de préparation : vert = rien à faire, jaune = étapes à faire */
.prep-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border: none; background: none; cursor: pointer; padding: 0; vertical-align: middle;
}
.prep-dot::before { content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--prep-dot-c, #cbd5e1); }
.prep-dot--ok   { --prep-dot-c: #16a34a; }   /* vert : préparation complétée */
.prep-dot--todo { --prep-dot-c: #eab308; }   /* jaune : étapes à faire */
.prep-dot--none { --prep-dot-c: #94a3b8; }   /* gris : aucune préparation (distinct du vert « complétée ») */
.prep-dot--static { cursor: default; }
/* Modale centrée de la colonne « Préparation » (clic sur le badge → popup au milieu de la page) */
.prep-modal {
    position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .45);
    align-items: center; justify-content: center; padding: 24px 16px;
}
.prep-modal-card {
    background: #fff; border-radius: 16px; width: 100%; max-width: 420px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .25); max-height: 85vh; overflow-y: auto;
    padding: 18px 20px; text-align: left;
}
.prep-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 11pt; font-weight: 800; color: #1e293b; margin-bottom: 14px;
}
.prep-modal-close { background: none; border: none; font-size: 20pt; line-height: 1; cursor: pointer; color: #94a3b8; padding: 0 4px; }

/* ──────────────── Section « Commande » (commandes fournisseur) ──────────────── */
.order-list { display: flex; flex-direction: column; gap: 8px; }
.order-check { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.order-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; accent-color: #16a34a; }
.order-type-name { font-size: 9.5pt; font-weight: 700; color: #1e293b; }
.order-type-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.order-type-status { display: none; font-size: 7.5pt; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #15803d; white-space: nowrap; }
.order-type.is-complete .order-type-status { display: inline-flex; }
.order-type-lines { padding-left: 24px; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
/* La boîte de chaque ligne prend la couleur de son statut (bleu/jaune/vert) — fond+bordure posés en
   inline (couleur du bouton actif + alpha). « À commander » = neutre. Transition douce. */
.order-line { display: flex; flex-direction: column; gap: 6px; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; background: #fff; transition: background .25s ease, border-color .25s ease; }
.order-line-top { display: flex; align-items: center; gap: 8px; }
.order-line-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.order-num { flex: 1; min-width: 0; font-size: 9pt; padding: 5px 8px; }
.order-recv {
    --recv-c: #2563eb;
    border: 1.5px solid #cbd5e1; background: #fff; color: #64748b;
    padding: 3px 9px; border-radius: 999px; font-size: 8.5pt; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.order-recv.is-on { border-color: var(--recv-c); background: var(--recv-c); color: #fff; }   /* bouton actif = sa couleur */
.order-line-del { background: none; border: none; color: #cbd5e1; cursor: pointer; font-size: 11pt; line-height: 1; }
.order-line-del:hover { color: #dc2626; }
.order-add-line { background: none; border: 1px dashed #cbd5e1; color: #475569; padding: 5px 10px; border-radius: 8px; font-size: 8.5pt; cursor: pointer; align-self: flex-start; }
.order-empty { font-size: 8.5pt; color: #94a3b8; }
.order-empty a { color: var(--blue); text-decoration: none; }

/* Pastille d'état de commande : rouge = à commander, jaune = commandé/partiel, vert = reçu (ou rien) */
.order-cell { position: relative; display: inline-block; }
.order-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border: none; background: none; cursor: pointer; padding: 0; vertical-align: middle;
}
.order-dot::before { content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--order-dot-c, #cbd5e1); }
.order-dot--static { cursor: default; }

/* Modale centrée de la colonne « Commande » (réutilise .prep-modal-card/head/close) */
.order-modal {
    position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .45);
    align-items: center; justify-content: center; padding: 24px 16px;
}

/* ──────────────── Notes internes des factures ──────────────── */
.inote-wrap { display: flex; flex-direction: column; gap: 8px; }
.inote { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; }
.inote-body { font-size: 9.5pt; color: #1e293b; white-space: pre-wrap; word-break: break-word; }
.inote-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 8pt; color: #94a3b8; }
.inote-actions { display: inline-flex; gap: 8px; }
.inote-actions button { background: none; border: none; color: #64748b; cursor: pointer; font-size: 8pt; text-decoration: underline; padding: 0; }
.inote-actions button:hover { color: #2563eb; }
.inote-edit-input { font-size: 9.5pt; padding: 6px 8px; width: 100%; }
.inote-edit-btns { display: flex; gap: 6px; margin-top: 6px; }
.inote-empty { font-size: 8.5pt; color: #94a3b8; }
.inote-add { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.inote-add .inote-input { font-size: 9.5pt; padding: 6px 8px; }
.inote-add .btn { align-self: flex-start; }

/* Colonne « Notes » de la liste : icône + compteur, popup centrée */
.inote-cell { position: relative; display: inline-block; }
.inote-badge { display: inline-flex; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 7px; color: #cbd5e1; }
.inote-badge.has-notes { color: #d97706; }
.inote-badge:hover { background: #f1f5f9; }
.inote-badge svg { width: 16px; height: 16px; }
.inote-count { font-size: 8pt; font-weight: 800; line-height: 1; }
.inote-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .45); align-items: center; justify-content: center; padding: 24px 16px; }

/* Notes : ligne discrète dans la sidebar de la fiche facture — ouvre la même modale que la liste */
.inote-cell:has(.inote-trigger-btn) { display: block; }
.inote-trigger-btn {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    padding: 9px 12px; cursor: pointer; text-align: left;
    color: #475569; font-size: 9.5pt; font-weight: 700;
    transition: background .12s, border-color .12s;
}
.inote-trigger-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.inote-trigger-btn svg { width: 15px; height: 15px; flex-shrink: 0; color: #94a3b8; }
.inote-trigger-label { flex: 1; }
/* Note présente = ambre « note » (même palette que .note-box / .order-note-btn.has-note) — plus visible
   que le bleu ; l'état SANS note (base ci-dessus) reste inchangé. */
.inote-trigger-btn.has-notes { color: #d97706; border-color: #fcd34d; background: #fffbeb; }
.inote-trigger-btn.has-notes svg { color: #d97706; }
.inote-trigger-btn .inote-count { margin-left: auto; background: #d97706; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 8.5pt; font-weight: 800; }

/* Badge de paiement cliquable (colonne « Paiement » de la liste) → ouvre le popup d'enregistrement */
.inv-pay-badge-btn { background: none; border: none; padding: 2px; cursor: pointer; border-radius: 7px; line-height: 1; }
.inv-pay-badge-btn:hover { background: #f1f5f9; }

/* ──────────────── Cartes repliables (sidebar soumission / facture) ──────────────── */
.collapse-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer; user-select: none; margin-bottom: 12px;
}
.collapse-card.is-collapsed .collapse-head { margin-bottom: 0; }
.collapse-card.is-collapsed .collapse-body { display: none; }
.collapse-chevron { font-size: 11px; color: var(--muted); transition: transform .15s; flex-shrink: 0; }
.collapse-card.is-collapsed .collapse-chevron { transform: rotate(-90deg); }

/* ── Pagination MPH Core (vue vendor/pagination/mph) ── */
.mph-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 9.5pt; }
.mph-pagination .mph-info { color: var(--muted); margin-right: auto; font-size: 9pt; white-space: nowrap; }
.mph-pagination .mph-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 9px; line-height: 1;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: #334155; text-decoration: none; font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
}
.mph-pagination a.mph-page:hover { background: #f1f5f9; border-color: #cbd5e1; }
.mph-pagination .mph-page.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.mph-pagination .mph-page.is-disabled { color: #cbd5e1; background: #fff; cursor: default; }
.mph-pagination .mph-sep { display: inline-flex; align-items: center; padding: 0 4px; color: var(--muted); font-weight: 700; }
@media (max-width: 640px) {
  .mph-pagination { gap: 3px; font-size: 9pt; }
  .mph-pagination .mph-info { width: 100%; margin-bottom: 6px; }
  .mph-pagination .mph-page { min-width: 28px; height: 28px; padding: 0 7px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Module Service (Phase 7) — formulaire technicien + dashboard + fiche
   ═══════════════════════════════════════════════════════════════════ */

/* Pastille « R » des retours (liste des rapports) — rond PLEIN, lettre blanche : même parti pris que le
   compteur des pilules de filtre (vif, pas translucide). Volontairement minuscule : la pastille
   « Retour » pleine largeur encombrait la liste (décision Philippe), une lettre ne la gêne pas.
   Rouge = retour d'INSTALLATION (faute d'installateur) · Mauve = retour de SERVICE (faute de technicien).
   Le `title` porte le sens — « R » seul est cryptique. */
.svc-return-dot {
    display:inline-flex; align-items:center; justify-content:center;
    width:17px; height:17px; border-radius:999px;
    color:#fff; font-size:8pt; font-weight:900; line-height:1;
    margin-left:6px; vertical-align:middle; flex-shrink:0;
}
.svc-return-dot--install { background:#dc2626; }
.svc-return-dot--service { background:#7c3aed; }

/* ── Formulaire technicien (mobile-first) ── */
.svc-form { max-width: 860px; margin: 0 auto; display: grid; gap: 16px; align-content: start; }
/* Résumé des erreurs de validation (haut du formulaire technicien) — chaque ligne défile vers le champ. */
.svc-error-summary { background:#fff1f2; border:1px solid #fecdd3; color:#9f1239; border-radius:14px; padding:14px 16px; margin-bottom:14px; font-size:10.5pt; line-height:1.4; }
.svc-error-list { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:5px; }
.svc-error-list li { display:flex; align-items:flex-start; gap:7px; }
.svc-error-list li::before { content:"•"; color:#dc2626; font-weight:900; line-height:1.2; }
.svc-error-jump { background:none; border:0; padding:0; margin:0; color:#9f1239; text-decoration:underline; cursor:pointer; font-size:10pt; text-align:left; font-family:inherit; }
.svc-error-jump:hover { color:#dc2626; }
.svc-plate-error { margin-top:8px; }
.svc-section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
/* 14px (et non 14pt ≈ 18.7px) : c'est la taille des titres de carte de TOUS les autres modules —
   le module Service, porté de l'ancien système autonome, avait gardé les siennes, 33 % plus grosses. */
.svc-section-title h3 { margin:0; font-size:14px; font-weight:800; color:#07375f; letter-spacing:-.3px; }
.svc-pill { background:#e9f5ff; color:#0f4c81; border-radius:999px; padding:6px 11px; font-weight:700; font-size:9pt; white-space:nowrap; }
.svc-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.svc-grid .full { grid-column:1 / -1; }
.svc-hint { color:var(--muted, #64748b); font-size:9.5pt; line-height:1.35; margin-top:8px; }
.svc-note-box { border-radius:14px; padding:13px 15px; margin-top:12px; line-height:1.45; font-size:10pt; }
.svc-note-box.amber { background:linear-gradient(135deg,#fff8e8,#fff3d6); border:1px solid #f7d794; color:#8a5a00; }
.svc-note-box.red   { background:linear-gradient(135deg,#fff1f2,#ffe4e6); border:1px solid #fecdd3; color:#991b1b; }

/* Équipements */
.svc-equip-grid { display:grid; gap:14px; }
.svc-equip-card { border:1px solid var(--border, #dbe4ef); background:#fbfdff; border-radius:16px; padding:14px; }
.svc-equip-title { font-weight:800; color:#0f4c81; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.svc-remove-btn { width:30px; height:30px; min-height:30px; padding:0; border-radius:9px; background:#fff1f2; color:#dc2626; border:1px solid #fecdd3; font-size:15pt; line-height:1; cursor:pointer; }
.svc-plate-preview { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:10px; }
.svc-plate-thumb, .svc-media-thumb { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--border,#dbe4ef); background:#f8fafc; min-height:90px; }
.svc-plate-thumb img { width:100%; height:90px; object-fit:cover; display:block; }
.svc-media-thumb img, .svc-media-thumb video { width:100%; height:115px; object-fit:cover; display:block; background:#0f172a; }
.svc-thumb-x { position:absolute; right:6px; bottom:6px; width:28px; height:28px; min-height:28px; padding:0; border-radius:9px; background:rgba(220,38,38,.92); color:#fff; font-size:15pt; line-height:1; border:0; cursor:pointer; z-index:5; }
.svc-media-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.svc-upload-status { position:absolute; left:6px; right:6px; top:6px; background:rgba(15,23,42,.82); color:#fff; border-radius:10px; padding:6px 8px; font-size:8.5pt; line-height:1.25; z-index:2; text-align:center; }
.svc-upload-status.error { background:rgba(220,38,38,.92); }
.svc-upload-status.waiting { background:rgba(37,99,235,.92); }         /* réseau faible : bleu, pas rouge (pas une vraie erreur) */
.svc-upload-status button { background:#fff; color:#0f4c81; font-weight:800; }

/* Bannière récap des envois (au-dessus du bouton « Envoyer ») — réseau faible. */
.svc-upload-banner { border-radius:14px; padding:12px 15px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-weight:700; font-size:10pt; }
.svc-upload-banner.is-wait { background:#e0edff; border:1px solid #bfdbfe; color:#1e40af; }
.svc-upload-banner.is-error { background:#fff1f2; border:1px solid #fecdd3; color:#9f1239; }
.svc-progress { width:100%; height:6px; background:rgba(255,255,255,.25); border-radius:999px; overflow:hidden; margin-top:4px; }
.svc-progress > span { display:block; height:100%; width:0; background:#22c55e; border-radius:999px; transition:width .2s ease; }
.svc-file-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer; }

/* Facturation */
.svc-bill-row { display:grid; grid-template-columns:2fr 100px 120px 120px 46px; gap:10px; margin-bottom:12px; align-items:end; }
.svc-bill-custom { display:none; grid-column:1 / -1; grid-template-columns:2fr 140px; gap:10px; margin-top:-4px; }
.svc-bill-custom.show { display:grid; }
.svc-bill-summary { margin-top:14px; border:1px solid var(--border,#dbe4ef); border-radius:14px; background:#fbfdff; overflow:hidden; }
.svc-bill-summary-row { display:flex; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border,#dbe4ef); font-weight:700; }
.svc-bill-summary-row:last-child { border-bottom:0; background:#eafff1; color:#166534; font-size:12pt; font-weight:900; }
.svc-readonly { background:#f8fafc; }

/* Recherche client (autocomplete) */
.svc-client-search { position:relative; }
.svc-client-results { position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:4px; background:#fff; border:1px solid var(--border,#dbe4ef); border-radius:12px; box-shadow:0 12px 30px rgba(15,23,42,.14); max-height:280px; overflow-y:auto; display:none; }
.svc-client-results.show { display:block; }
.svc-client-opt { padding:10px 13px; cursor:pointer; border-bottom:1px solid #f1f5f9; }
.svc-client-opt:hover { background:#f0f7ff; }
.svc-client-opt small { display:block; color:var(--muted,#64748b); font-size:9pt; }
.svc-client-chip { display:inline-flex; align-items:center; gap:8px; background:#e9f5ff; color:#0f4c81; border-radius:999px; padding:6px 12px; font-weight:700; font-size:9.5pt; margin-top:8px; }
.svc-client-chip button { border:0; background:transparent; color:#0f4c81; cursor:pointer; font-size:12pt; line-height:1; padding:0; }

@media (max-width:640px) {
  .svc-grid, .svc-bill-row, .svc-bill-custom { grid-template-columns:1fr; }
  .svc-media-preview { grid-template-columns:repeat(2,1fr); }
  .svc-section-title { flex-direction:column; align-items:flex-start; }
}

/* ── Dashboard service (temps réel) — pastilles de filtre. Couleurs = LA MÊME palette que le reste du
   CRM (classes .status .green/.orange/.gray/.blue/.teal, ligne ~609 de ce fichier — badges Soumissions/
   Factures/Agenda), pas les tons pastel de l'ancien dashboard-service (jugés trop fades). ── */
.svc-filter-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.svc-pill-btn {
    border:1px solid #e2e8f0;   /* léger contour gris pâle UNIFORME (pas de bordure colorée par catégorie) */
    border-radius:12px;
    min-height:36px;
    padding:9px 13px;
    font-weight:900;
    cursor:pointer;
    font-size:10pt;
    background:#fff;
    color:#475569;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:.15s;
}
/* Compteur = rond plein de la couleur de la catégorie, chiffre blanc — vif, pas translucide. */
.svc-pill-btn strong {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:24px;
    min-height:24px;
    border-radius:999px;
    background:#94a3b8;
    color:#fff;
    padding:2px 8px;
    font-size:9pt;
}

/* État actif : anneau bleu doux (indicateur de sélection) — sans contour sur la pastille elle-même. */
.svc-pill-btn.active { outline:3px solid rgba(15,76,129,.28); outline-offset:1px; }

/* Une couleur par pastille — mêmes valeurs EXACTES que .green/.orange/.gray/.blue/.teal (ligne ~609). */
.svc-pill-new           { background:#dcfce7; color:#166534; }
.svc-pill-new strong    { background:#166534; }

.svc-pill-processing        { background:#ffedd5; color:#9a3412; }
.svc-pill-processing strong { background:#9a3412; }

.svc-pill-done          { background:#f1f5f9; color:#475569; }
.svc-pill-done strong   { background:#475569; }

.svc-pill-all           { background:#fff; color:#1d4ed8; }
.svc-pill-all strong    { background:#1d4ed8; }

.svc-pill-invoice          { background:#ccfbf1; color:#0f766e; }
.svc-pill-invoice strong   { background:#0f766e; }

.svc-live-dot { width:9px; height:9px; border-radius:50%; background:#16a34a; display:inline-block; box-shadow:0 0 0 0 rgba(22,163,74,.5); animation:svcPulse 2s infinite; }
@keyframes svcPulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.45);} 70%{box-shadow:0 0 0 8px rgba(22,163,74,0);} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0);} }
.svc-row-new { animation:svcRowNew 2.4s ease; }
@keyframes svcRowNew { 0%{background:#dcfce7;} 100%{background:transparent;} }
.svc-toast { position:fixed; right:18px; bottom:18px; z-index:900; background:#0f4c81; color:#fff; padding:13px 18px; border-radius:12px; box-shadow:0 12px 30px rgba(15,23,42,.25); font-weight:700; font-size:10pt; display:flex; align-items:center; gap:10px; cursor:pointer; }

/* Popup de succès du formulaire technicien (reste sur place après l'enregistrement + choix de l'action). */
.svc-success-modal { position:fixed; inset:0; z-index:2000; background:rgba(15,23,42,.55); display:none; align-items:center; justify-content:center; padding:24px 16px; }
.svc-success-modal.show { display:flex; }
.svc-success-card { background:#fff; border-radius:20px; padding:30px 26px; max-width:420px; width:100%; text-align:center; box-shadow:0 25px 60px rgba(15,23,42,.35); }
.svc-success-check { width:66px; height:66px; margin:0 auto 16px; border-radius:50%; background:#16a34a; color:#fff; font-size:34px; line-height:66px; font-weight:900; }
.svc-success-card h3 { margin:0 0 8px; color:#07375f; font-size:16pt; }
.svc-success-msg { margin:0 0 22px; color:#475569; font-size:11pt; line-height:1.5; }
.svc-success-actions { display:flex; flex-direction:column; gap:10px; }
.svc-success-actions .btn { width:100%; padding:14px; font-size:11.5pt; }

/* ─────────────────────────────  iA Michel — assistant de diagnostic CVC  ───────────────────────────── */
/* Bouton d'ouverture (dashboard + ligne « Notes de service ») */
.michel-btn { display:inline-flex; align-items:center; gap:7px; background:var(--accent,#7c3aed); color:#fff; border:0; border-radius:10px; padding:8px 14px; font-size:9.5pt; font-weight:800; cursor:pointer; box-shadow:0 3px 10px rgba(124,58,237,.30); white-space:nowrap; }
.michel-btn:hover { filter:brightness(1.08); }
.michel-btn small { font-weight:500; opacity:.8; font-size:8pt; }

/* CTA de la page d'accueil technicien (Nouveau rapport + iA Michel) — même ligne, plus compacts sur mobile */
.tech-cta-row { display:flex; gap:12px; margin-bottom:18px; }
.tech-cta { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; padding:20px 16px; border-radius:14px; color:#fff; text-decoration:none; border:0; cursor:pointer; font-size:13.5pt; font-weight:800; line-height:1.2; }
.tech-cta:hover { filter:brightness(1.06); }
.tech-cta--report { background:linear-gradient(135deg,#34d399,#059669); box-shadow:0 6px 18px rgba(5,150,105,.30); }
.tech-cta--michel { flex-direction:column; gap:2px; background:var(--accent,#7c3aed); box-shadow:0 6px 18px rgba(124,58,237,.32); }
.tech-cta--michel small { font-size:9pt; font-weight:500; opacity:.9; }
@media (max-width:640px) {
    .tech-cta-row { gap:8px; margin-bottom:14px; }
    .tech-cta { padding:12px 8px; font-size:10.5pt; border-radius:12px; gap:6px; }
    .tech-cta--michel small { font-size:7.5pt; }
}

/* Overlay + carte (mobile d'abord, en-tête/pied fixes, corps scrollable) */
.michel-modal { position:fixed; inset:0; z-index:2100; background:rgba(15,23,42,.55); display:none; align-items:flex-start; justify-content:center; padding:24px 14px; overflow-y:auto; }
.michel-modal.show { display:flex; }
.michel-card { background:#fff; border-radius:18px; width:100%; max-width:640px; display:flex; flex-direction:column; max-height:92vh; overflow:hidden; box-shadow:0 25px 70px rgba(15,23,42,.4); }
.michel-head { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; background:var(--accent,#7c3aed); color:#fff; }
.michel-head-id { display:flex; align-items:center; gap:12px; }
.michel-avatar { width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; font-size:18pt; }
.michel-head h3 { margin:0; font-size:14pt; line-height:1.1; }
.michel-head small { opacity:.82; font-size:8.5pt; }
.michel-close { background:none; border:0; color:#fff; font-size:24pt; line-height:1; cursor:pointer; padding:0 4px; opacity:.85; }
.michel-close:hover { opacity:1; }
.michel-body { flex:1; overflow-y:auto; padding:16px 18px; }
.michel-foot { flex-shrink:0; display:flex; gap:10px; justify-content:flex-end; padding:12px 18px; border-top:1px solid var(--border); background:#f8fafc; }

.michel-section { margin-bottom:16px; }
.michel-section-label { font-size:8.5pt; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#6d28d9; margin-bottom:8px; }
.michel-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.michel-grid-2 .field { margin:0; }
.michel-hint { font-size:8.5pt; color:var(--muted); margin-top:6px; line-height:1.4; }
.michel-plate-btn { width:100%; margin-top:10px; }

.michel-toggle { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.michel-toggle-btn { border:1px solid var(--border); background:#fff; border-radius:10px; padding:10px 8px; font-size:9pt; font-weight:700; color:#475569; cursor:pointer; text-align:center; }
.michel-toggle-btn.is-active { border-color:#7c3aed; background:#f5f0ff; color:#5b21b6; box-shadow:inset 0 0 0 1px #7c3aed; }

.michel-run-wrap { margin-top:4px; }
.michel-loading { display:flex; align-items:center; gap:10px; color:#7c3aed; font-weight:700; font-size:10pt; padding:14px 0; }
.michel-spin { width:16px; height:16px; border:3px solid #ddd6fe; border-top-color:#7c3aed; border-radius:50%; animation:michelspin .8s linear infinite; }
@keyframes michelspin { to { transform:rotate(360deg); } }
.michel-note { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:10px; padding:12px 14px; font-size:9.5pt; }

.michel-result { margin-top:6px; }
.michel-source-tag { font-size:8.5pt; color:#0f5132; background:#e7f5ec; border:1px solid #b7e0c4; border-radius:8px; padding:7px 10px; margin-bottom:12px; }
.michel-source-tag.warn { color:#9a3412; background:#fff7ed; border-color:#fed7aa; }
.michel-source-tag a { color:#7c3aed; font-weight:700; }
.michel-resume { font-size:10.5pt; color:#1e293b; line-height:1.5; margin-bottom:14px; font-weight:600; }
.michel-safety { background:#fef2f2; border:1px solid #fecaca; border-radius:11px; padding:11px 14px; margin-bottom:14px; }
.michel-safety strong { color:#b91c1c; font-size:9.5pt; }
.michel-safety ul { margin:6px 0 0; padding-left:18px; color:#7f1d1d; font-size:9pt; }
.michel-block-title { font-size:9pt; font-weight:800; color:#6d28d9; text-transform:uppercase; letter-spacing:.03em; margin:12px 0 8px; }
.michel-cause { border:1px solid var(--border); border-radius:11px; padding:11px 13px; margin-bottom:9px; background:#fff; }
.michel-cause-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.michel-cause-name { font-weight:700; color:#1e293b; font-size:10pt; }
.michel-cause-pct { font-weight:800; color:#7c3aed; font-size:9.5pt; }
.michel-bar { height:6px; border-radius:4px; background:#e2e8f0; margin:7px 0; overflow:hidden; }
.michel-bar span { display:block; height:100%; background:linear-gradient(90deg,#a855f7,#7c3aed); }
.michel-cause-line { font-size:9pt; color:#475569; margin-top:3px; line-height:1.4; }
.michel-cause-line b { color:#334155; }
.michel-next { background:#f5f0ff; border:1px solid #ddd6fe; border-radius:11px; padding:11px 14px; margin:12px 0; font-size:9.5pt; color:#5b21b6; line-height:1.5; }
.michel-questions { margin:0; padding-left:18px; color:#475569; font-size:9pt; }
.michel-questions li { margin-bottom:3px; }
.michel-sources { margin-top:12px; font-size:8pt; color:#94a3b8; font-style:italic; }

@media (max-width:640px) {
    .michel-grid-2, .michel-toggle { grid-template-columns:1fr; }
    .michel-modal { padding:0; }
    .michel-card { max-width:100%; max-height:100vh; border-radius:0; }
}

/* ── PROPORTIONS STANDARD des champs de formulaire — POINT UNIQUE (règle 14) ──
   Labels 9pt, champs 9.5pt, padding resserré : c'est la taille de TOUS les modules métier
   (Soumission, Facture, Commande, Service). La hauteur 34px des input/select vient de la règle
   `input.form-input` plus haut et reste commune.

   Sans `.form-compact`, un champ hérite de la police par défaut du navigateur (~12pt) : c'est ce qui
   faisait paraître le module Service nettement plus gros que le reste du CRM (décision Philippe
   2026-07-15 — « ça doit être uniforme comme mes autres modules »). Toute NOUVELLE page de formulaire
   met cette classe sur son conteneur ; ne jamais recopier ces valeurs ailleurs.

   (Anciennement `.order-form-compact`, propre au module Commande — renommée en la généralisant ; aucun
   gabarit ne la porte plus.) */
/* `.form-compact` n'a PLUS d'effet : ses valeurs sont devenues le défaut de `.form-label` /
   `.form-input` (2026-08-03). Conservée comme alias inoffensif — une dizaine de vues la portent, et
   la retirer partout serait du bruit sans bénéfice. NE PAS y remettre de valeurs : ce serait rouvrir
   deux tailles de formulaire dans le CRM, exactement ce qu'on vient de supprimer. */
.form-compact .form-label { }
.form-compact .form-input { }

/* EXCEPTION — formulaire technicien sur mobile (décision Philippe 2026-07-15).
   iOS Safari ZOOME automatiquement sur un champ dont la police fait moins de 16px, et ne dézoome pas
   en sortant : le technicien verrait l'écran sauter à chaque champ, sur le terrain, une main occupée.
   9.5pt = 12.7px déclenche donc le zoom. On repasse à 16px sous 640px, où le formulaire technicien vit
   réellement ; au bureau il reste compact comme tous les autres modules.

   Ne cible QUE `.svc-form` (le formulaire technicien) : les autres modules — y compris la FICHE de
   service (`.svc-edit-grid`) — sont des outils de bureau, et doivent rester compacts partout.
   Les labels ne sont pas touchés : ils ne reçoivent pas le focus, donc ne déclenchent aucun zoom. */
@media (max-width: 640px) {
    .svc-form .form-input { font-size: 16px; }
}

/* Adresse liée d'une commande : texte + mini-flèche (▾) + menu déroulant si ≥2 adresses
   (sidebar client de /commandes/nouvelle et /modifier). */
.ord-addr-line { position: relative; margin-top: 2px; }
/* Adresse liée sur 2 lignes (rue+ville, puis province+code postal + flèche) — tient dans le sidebar étroit. */
.ord-addr-l1 { display: block; }
.ord-addr-l2 { display: block; color: #64748b; }
.ord-addr-toggle { background: none; border: none; color: var(--blue); cursor: pointer; font-size: 11pt; line-height: 1; padding: 0 3px; vertical-align: middle; }
.ord-addr-toggle:hover { color: var(--blue-dark, #1d4ed8); }
.ord-addr-menu { display: none; position: absolute; z-index: 30; left: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.14); min-width: 200px; max-width: 320px; overflow: hidden; }
.ord-addr-menu.is-open { display: block; }
.ord-addr-opt { padding: 7px 10px; cursor: pointer; font-size: 9pt; border-bottom: 1px solid #f1f5f9; }
.ord-addr-opt:last-child { border-bottom: none; }
.ord-addr-opt:hover { background: #f8fafc; }
.ord-addr-opt.is-sel { background: #eff6ff; font-weight: 600; }

/* Carte « Client » d'une commande (fiche/création) — visuel soigné (avatar + coordonnées).
   Le bloc #order-cust-coords est re-rendu à l'identique par le JS orderCustCoordsHtml() à la sélection. */
/* Carte client condensée (sans avatar) : nom/entreprise, puis coordonnées qui s'écoulent en ligne
   (flex-wrap) au lieu d'une par ligne — pour prendre le moins de hauteur possible. */
.ord-client-card { position: relative; background: linear-gradient(180deg, #f8fafc, #ffffff); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; max-width: 520px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.ord-client-change { position: absolute; top: 9px; right: 12px; background: none; border: none; color: #dc2626; cursor: pointer; font-size: 8.5pt; font-weight: 600; }
.ord-client-change:hover { text-decoration: underline; }
.ord-client-head { padding-right: 64px; }
.ord-client-name { font-weight: 700; font-size: 11pt; color: var(--blue); text-decoration: none; line-height: 1.25; }
.ord-client-name:hover { text-decoration: underline; }
.ord-client-company { display: block; font-size: 9pt; color: #94a3b8; margin-top: 1px; }
.ord-client-info { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ord-client-row { display: flex; align-items: flex-start; gap: 7px; font-size: 9.5pt; color: #334155; line-height: 1.4; }
.ord-client-ico { flex: none; width: 15px; color: #94a3b8; display: inline-flex; margin-top: 1px; }

/* Mini-éditeur d'un nouveau numéro de référence nommé (avant enregistrement ✓). */
.order-ref-editing { background: #f8fafc; border: 1px dashed var(--border); border-radius: 10px; padding: 8px; }

/* Groupe d'un équipement (Marque/Modèle/Série + ses pièces imbriquées) dans le formulaire de commande. */
/* Équipements et pièces — lisibilité : chaque équipement est un panneau gris et ses champs sont BLANCS,
   pour bien ressortir (avant : champs #f8fafc sur groupe #f8fafc → tout se fondait, dur à lire). */
.order-equip-group { border: 1px solid #d7dee7; border-radius: 10px; padding: 12px 14px; background: #f1f5f9; }
.order-equip-group .form-input { background: #fff; border-color: #cbd5e1; }
.order-equip-group .form-input:focus { border-color: rgba(15, 94, 168, 0.45); }

/* Boutons d'état de réception d'une pièce de commande (Commandé / Partiellement reçu / Reçu).
   La couleur active vient de la variable inline --st-c. */
.part-state-btn { border: 1px solid var(--border); background: #fff; color: #64748b; border-radius: 7px; padding: 4px 10px; font-size: 8.5pt; cursor: pointer; transition: background .12s, color .12s, border-color .12s; white-space: nowrap; }
.part-state-btn:hover { border-color: var(--st-c); color: var(--st-c); }
.part-state-btn.is-on { background: var(--st-c); border-color: var(--st-c); color: #fff; font-weight: 700; }

/* Icône « note » d'une pièce de commande (ouvre un popup ; infobulle native au survol si une note existe).
   État muet par défaut, ambre lorsqu'une note est présente (.has-note). */
.order-note-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--border); background: #fff; color: #94a3b8; border-radius: 9px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.order-note-btn:hover { border-color: #64748b; color: #64748b; }
.order-note-btn.has-note { background: #fffbeb; border-color: #fcd34d; color: #d97706; }

/* Icône (i) « suivi des dates » d'une pièce (dates/heures des clics Commandé/Reçu ; popup + infobulle).
   Muette par défaut, bleutée lorsqu'au moins une date existe (.has-info). */
.order-info-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--border); background: #fff; color: #94a3b8; border-radius: 9px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.order-info-btn:hover { border-color: #64748b; color: #64748b; }
.order-info-btn.has-info { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }

/* ─────────── Alertes personnalisées d'une commande (date d'activation + note) ─────────── */
/* Bannière en haut de /commandes : toutes les alertes actives, très visible pour tous les employés. */
.oalert-banner { background: #fef2f2; border: 1px solid #fca5a5; border-left: 4px solid #dc2626; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.oalert-banner-title { font-weight: 800; font-size: 10.5pt; color: #b91c1c; margin-bottom: 8px; }
.oalert-banner-list { display: grid; gap: 8px; }
.oalert-banner-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid #fecaca; border-radius: 9px; padding: 8px 11px; }
.oalert-banner-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 9.5pt; color: #334155; min-width: 0; }
.oalert-banner-num { font-weight: 800; color: var(--blue); text-decoration: none; white-space: nowrap; }
.oalert-banner-num:hover { text-decoration: underline; }
.oalert-banner-h { color: #b91c1c; }
.oalert-banner-since { color: #94a3b8; font-size: 8.5pt; white-space: nowrap; }
.oalert-banner-btns { display: flex; gap: 6px; flex-shrink: 0; }
.oalert-banner-resolve { background: #dc2626; color: #fff; border: none; border-radius: 8px; padding: 4px 11px; font-size: 8.5pt; font-weight: 700; cursor: pointer; }
.oalert-banner-resolve:hover { background: #b91c1c; }
.oalert-banner-resolve:disabled { opacity: .5; cursor: default; }

/* Pastille 🔔 dans la colonne « Alerte » de la liste. */
.oalert-badge { display: inline-flex; align-items: center; gap: 3px; background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; border-radius: 999px; padding: 2px 9px; font-size: 8.5pt; font-weight: 800; text-decoration: none; white-space: nowrap; }
.oalert-badge:hover { background: #fee2e2; }

/* Ligne « Alertes » de la fiche (trigger façon Notes) : rouge quand une alerte est active + pastille compteur. */
.inote-trigger-btn.oalert-has-active { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
.inote-trigger-btn.oalert-has-active svg { color: #dc2626; }
.oalert-count-pill { margin-left: auto; background: #dc2626; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 8.5pt; font-weight: 800; }

/* ─────────── Cloche d'alertes de commandes (dans la barre d'onglets, à DROITE, animée pour attirer l'œil) ─────────── */
.oabell { position: relative; display: inline-flex; align-items: center; margin-left: auto; }
/* Bandeau rouge « N alertes actives — commandes » collé à la cloche : rend l'alerte impossible à manquer. */
.oabell-banner { display: inline-flex; align-items: center; margin-right: 9px; padding: 7px 14px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 9pt; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 9px rgba(220,38,38,.3); animation: oabell-pulse 2.4s ease-in-out infinite; }
.oabell-banner:hover { background: #b91c1c; }
.oabell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #fca5a5; color: #dc2626; cursor: pointer; box-shadow: 0 2px 9px rgba(220,38,38,.26); animation: oabell-pulse 2.4s ease-in-out infinite; }
.oabell-btn:hover { background: #fef2f2; }
.oabell-ic { animation: oabell-ring 2.4s ease-in-out infinite; transform-origin: 50% 5px; }
.oabell-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 8pt; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; }
@keyframes oabell-ring { 0%, 50%, 100% { transform: rotate(0); } 5%, 15%, 25%, 35% { transform: rotate(13deg); } 10%, 20%, 30%, 40% { transform: rotate(-11deg); } 45% { transform: rotate(0); } }
@keyframes oabell-pulse { 0% { box-shadow: 0 3px 12px rgba(220,38,38,.28), 0 0 0 0 rgba(220,38,38,.45); } 70% { box-shadow: 0 3px 12px rgba(220,38,38,.28), 0 0 0 12px rgba(220,38,38,0); } 100% { box-shadow: 0 3px 12px rgba(220,38,38,.28), 0 0 0 0 rgba(220,38,38,0); } }
@media (prefers-reduced-motion: reduce) { .oabell-btn, .oabell-ic, .oabell-banner { animation: none; } }

.oabell-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 700; width: 340px; max-width: 86vw; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(15,23,42,.22); display: none; }
.oabell-panel.is-open { display: block; }
.oabell-head { padding: 10px 13px; font-weight: 800; font-size: 9.5pt; color: #b91c1c; background: #fef2f2; border-bottom: 1px solid #fee2e2; border-radius: 12px 12px 0 0; position: sticky; top: 0; }
.oabell-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-bottom: 1px solid #f1f5f9; }
.oabell-item:last-child { border-bottom: none; }
.oabell-item-main { display: flex; flex-direction: column; gap: 2px; font-size: 9pt; color: #334155; min-width: 0; }
.oabell-num { font-weight: 800; color: var(--blue); text-decoration: none; }
.oabell-num:hover { text-decoration: underline; }
.oabell-title { color: #b91c1c; font-size: 9pt; }
.oabell-note { color: #475569; }
.oabell-since { color: #94a3b8; font-size: 8pt; }
.oabell-item-btns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.oabell-resolve { width: 26px; height: 26px; border-radius: 7px; border: none; background: #dc2626; color: #fff; font-weight: 800; cursor: pointer; line-height: 1; }
.oabell-resolve:hover { background: #b91c1c; }
.oabell-resolve:disabled { opacity: .5; cursor: default; }

/* Carte « Alertes » de la fiche : compteur d'en-tête + liste (active rouge / programmée ambre) + ajout. */
.oalert-count-badge { background: #dc2626; color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 8pt; font-weight: 800; white-space: nowrap; }
.oalert-wrap { display: grid; gap: 10px; }
.oalert { border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.oalert--active { background: #fef2f2; border-color: #fca5a5; border-left: 3px solid #dc2626; }
.oalert--scheduled { background: #fffbeb; border-color: #fde68a; border-left: 3px solid #d97706; }
.oalert-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oalert-state { font-size: 8.5pt; font-weight: 800; }
.oalert--active .oalert-state { color: #b91c1c; }
.oalert--scheduled .oalert-state { color: #b45309; }
.oalert-date { font-size: 8.5pt; color: #64748b; font-weight: 700; }
.oalert-title { font-weight: 700; font-size: 9.5pt; color: #1e293b; margin-top: 4px; }
.oalert-note { font-size: 9pt; color: #334155; margin-top: 2px; line-height: 1.4; white-space: pre-wrap; }
.oalert-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.oalert-by { font-size: 8pt; color: #94a3b8; }
.oalert-actions { display: flex; gap: 8px; }
.oalert-actions button { background: none; border: none; padding: 0; font-size: 8.5pt; color: #64748b; cursor: pointer; font-weight: 600; }
.oalert-actions button:hover { color: #dc2626; text-decoration: underline; }
.oalert-empty { font-size: 8.5pt; color: #94a3b8; }
.oalert-add { border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 2px; }
.oalert-add .form-input { font-size: 9pt; }

/* Popup d'édition de la note / popup (i) de suivi d'une pièce (superposition centrée). */
.order-note-modal { position: fixed; inset: 0; z-index: 2200; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.order-note-card { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.28); padding: 18px; width: 100%; max-width: 460px; }

/* Lignes du popup (i) de suivi (Commandé / Reçu + date). */
.order-info-line { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 10pt; border-bottom: 1px solid var(--border); }
.order-info-line:last-child { border-bottom: 0; }
.order-info-line strong { min-width: 78px; }
.order-info-line span:last-child { margin-left: auto; color: #334155; }
.order-info-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Popup (i) — HISTORIQUE des changements d'une pièce (chaque entrée : état, date/heure, employé). */
.order-hist-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.order-hist-item:last-child { border-bottom: 0; }
.order-hist-item .order-info-dot { margin-top: 5px; }
.order-hist-body { flex: 1; min-width: 0; }
.order-hist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.order-hist-head strong { font-size: 10pt; color: #0f172a; }
.order-hist-when { font-size: 8.5pt; color: #64748b; white-space: nowrap; }
.order-hist-by { font-size: 9pt; color: #475569; margin-top: 1px; }

/* Popup des notes de pièce : chaque note = une carte horodatée séparée. */
.order-note-item { background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.order-note-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.order-note-when { font-size: 8.5pt; color: #64748b; font-weight: 600; }
.order-note-del { background: none; border: 0; color: #dc2626; cursor: pointer; font-size: 10pt; line-height: 1; padding: 0 2px; }
.order-note-text { font-size: 9.5pt; color: #334155; white-space: pre-wrap; word-break: break-word; }
.order-note-empty { font-size: 9pt; color: #94a3b8; padding: 6px 2px; }

/* ─────────────────────────────────────────────────────────────────────────────
   ENCADRÉ D'INFORMATION d'une fiche — POINT UNIQUE.

   Un bloc de texte libre qu'on veut voir sans le chercher : consigne de scan d'un
   produit, note interne… Le même visuel vivait déjà en dur dans trois vues
   (formulaire produit, fiche produit, scanner) et aurait dérivé à la première
   retouche de couleur.

   `.info-box`        = note interne (ardoise, discret)
   `.info-box.blue`   = consigne d'action, celle que l'employé DOIT lire
   ───────────────────────────────────────────────────────────────────────────── */
.info-box { background: #f8fafc; border: 1px solid var(--border); border-left: 4px solid #94a3b8;
            border-radius: 10px; padding: 10px 12px; }
.info-box-title { font-size: 8.5pt; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
                  color: #475569; margin-bottom: 3px; }
.info-box-body { white-space: pre-line; line-height: 1.4; }

.info-box.blue { background: #eff6ff; border-color: #bfdbfe; border-left-color: #0f5ea8; }
.info-box.blue .info-box-title { color: #0f5ea8; }

/* Le même encadré sert aussi de conteneur de CHAMP dans un formulaire : ce qu'on saisit ici est
   exactement ce qui s'affichera dans l'encadré de la fiche et du scanner. Une classe séparée pour
   la version "formulaire" aurait dérivé de la version "lecture" à la première retouche. */
.info-box .form-label { color: #475569; font-weight: 700; }
.info-box .form-input { background: #fff; }
.info-box.blue .form-label { color: #0f5ea8; }
.info-box.blue .form-input { border-color: #bfdbfe; }