/* ── Page layout ─────────────────────────────────────────── */
  .content { background: var(--surface-soft); padding: 0 !important; }
  .pipeline-wrap { padding: var(--space-lg) var(--space-xl) var(--space-xxl); }

  /* ── Header ──────────────────────────────────────────────── */
  .page-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-base);
    margin-bottom: var(--space-lg);
  }
  .page-header h1 {
    font-size: 24px; font-weight: 400; letter-spacing: -0.3px;
    color: var(--ink); margin: 0;
  }
  .header-right { display: flex; align-items: center; gap: var(--space-xs); }

  /* ── Navigation pills (5 sections) ──────────────────────── */
  .stage-nav {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: var(--space-lg);
  }
  .stage-nav a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--r-pill);
    font-size: 13px; font-weight: 500; text-decoration: none;
    border: 1px solid var(--hairline);
    background: var(--canvas); color: var(--body);
    transition: all 0.15s;
  }
  .stage-nav a:hover { border-color: var(--primary); color: var(--primary); }
  .stage-nav a.active {
    background: var(--primary); border-color: var(--primary);
    color: #fff; font-weight: 600;
  }
  .stage-nav a .count {
    background: rgba(255,255,255,0.25); border-radius: var(--r-pill);
    padding: 1px 7px; font-size: 11px; font-family: var(--font-mono);
    min-width: 20px; text-align: center;
  }
  .stage-nav a:not(.active) .count {
    background: var(--surface-strong); color: var(--muted);
  }

  /* ── Filtres ─────────────────────────────────────────────── */
  .filters-bar {
    display: flex; align-items: center; gap: var(--space-xs);
    flex-wrap: wrap; margin-bottom: var(--space-base);
  }
  .filters-bar input, .filters-bar select {
    height: 36px; padding: 0 12px; border-radius: var(--r-pill);
    border: 1px solid var(--hairline); background: var(--canvas);
    font-size: 13px; font-family: inherit; color: var(--ink);
    outline: none; transition: border-color 0.15s;
  }
  .filters-bar input { min-width: 220px; }
  .filters-bar input:focus,
  .filters-bar select:focus { border-color: var(--primary); }
  .filters-bar select { cursor: pointer; }
  /* Pattern unifie · recherche dans un pill (meme look que tous les
     autres tableaux · nouveaux-contrats, production, termine, annulees). */
  .search-group {
    display: flex; align-items: center;
    flex: 1; max-width: 560px;
    height: 38px; padding-right: 5px;
    border: 1px solid var(--hairline); border-radius: var(--r-pill);
    background: var(--canvas);
    transition: border-color 0.15s;
  }
  .search-group:focus-within { border-color: var(--primary); }
  .search-group input[type="search"] {
    flex: 1; min-width: 0; height: 100%;
    border: none; background: transparent; outline: none;
    padding: 0 14px; font-size: 13px; font-family: inherit; color: var(--ink);
    border-radius: var(--r-pill);
  }

  /* ── État de chargement ──────────────────────────────────── */
  .loading-state {
    display: flex; align-items: center; gap: 10px;
    padding: var(--space-xl); color: var(--muted); font-size: 14px;
  }
  .loading-state svg { width: 18px; height: 18px; animation: spin 1s linear infinite; }
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  .empty-state {
    padding: var(--space-xxl) var(--space-xl);
    text-align: center; color: var(--muted);
  }
  .empty-state svg { width: 40px; height: 40px; opacity: 0.3; margin-bottom: var(--space-base); }
  .empty-state p { font-size: 14px; margin: 0 0 var(--space-base); }

  /* ── Kanban ──────────────────────────────────────────────── */
  /* La zone scroll horizontalement (entre les colonnes) tout en restant
     dans la fenetre · evite que la scrollbar se retrouve cachee tout en bas. */
  .kanban-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    /* Drag-to-pan : on indique a l'user qu'il peut "saisir" le tableau */
    cursor: grab;
    user-select: none;
    /* Scrollbar masquee · navigation se fait au drag */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
  }
  .kanban-scroll::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
  .kanban-scroll.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
  }
  .kanban-scroll.dragging .fiche-card {
    pointer-events: none;
  }

  .kanban-board {
    display: flex; gap: 20px;
    min-width: max-content;
    align-items: flex-start;
  }

  /* Groupes de colonnes */
  .col-group { display: flex; flex-direction: column; gap: 8px; }
  .col-group-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--muted); padding: 0 4px;
  }
  .col-group-cols { display: flex; gap: 10px; align-items: flex-start; }
  .col-group-divider {
    width: 1px; background: var(--hairline); align-self: stretch;
    margin: 20px 0; flex-shrink: 0;
  }
  .col-group-ferme .col-group-label { color: var(--muted-soft); }
  .col-group-ferme .kanban-col { opacity: 0.7; }
  .col-group-ferme .kanban-col:hover { opacity: 1; }

  /* Colonnes sans fond/bordure · juste un header texte au-dessus des cartes.
     Les cartes elles-memes gardent leur surface canvas + hairline. */
  .kanban-col {
    width: 280px; flex-shrink: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .col-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 4px 10px;
    border-bottom: 0;
  }
  .col-header-left { display: flex; align-items: center; gap: 8px; }
  .col-dot {
    width: 8px; height: 8px; border-radius: var(--r-full);
    flex-shrink: 0;
  }
  .col-label {
    font-size: 11px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.07em;
  }
  .col-count {
    font-size: 11px; font-family: var(--font-mono);
    color: var(--muted); background: var(--surface-soft);
    border-radius: var(--r-pill); padding: 1px 7px;
  }
  .col-cards { padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }

  /* ── Carte fiche ─────────────────────────────────────────── */
  .fiche-card {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 12px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    text-decoration: none;
    display: block;
  }
  .fiche-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--primary);
  }
  .card-address {
    font-size: 13px; font-weight: 600; color: var(--ink);
    line-height: 1.3; margin-bottom: 4px;
  }
  .card-client {
    font-size: 12px; color: var(--body); margin-bottom: 8px;
    display: flex; align-items: center; gap: 4px;
  }
  .card-client svg { width: 11px; height: 11px; color: var(--muted); flex-shrink: 0; }
  .card-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  .chip-mini {
    font-size: 10px; padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--surface-soft);
    color: var(--body);
    border: 1px solid var(--hairline-soft);
    white-space: nowrap;
  }
  .card-footer {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: var(--muted);
    border-top: 1px solid var(--hairline-soft);
    padding-top: 8px; margin-top: 8px;
  }
  .card-footer svg { width: 11px; height: 11px; }
  /* Badge bulle de commentaires (style Monday) sur les cartes du tableau */
  .card-updates {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    transition: background 0.15s;
  }
  .card-updates svg { width: 11px; height: 11px; flex-shrink: 0; }
  .card-updates-count { font-family: var(--font-mono); }
  /* Variante recent · plus visible, primary bleue */
  .card-updates.recent {
    background: var(--primary);
    color: var(--on-primary);
  }
  /* Variante old · existe mais pas de nouveau · grise discrete */
  .card-updates.old {
    background: var(--surface-strong);
    color: var(--muted);
  }
  .card-age { font-family: var(--font-mono); }
  .card-attach {
    width: 12px; height: 12px;
    color: var(--muted);
    flex-shrink: 0;
  }

  /* Ligne de détail dans la carte */
  .card-row {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 12px; color: var(--body);
    margin-bottom: 3px; line-height: 1.4;
  }
  .card-row svg { width: 11px; height: 11px; color: var(--muted); flex-shrink: 0; margin-top: 2px; }
  .card-row .mono { font-family: var(--font-mono); }

  /* Avatar rep */
  .card-rep-avatar {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: var(--r-full);
    background: var(--primary); color: #fff;
    font-size: 9px; font-weight: 700;
    flex-shrink: 0;
  }
  /* Point vert plus petit pour ce mini-avatar */
  .card-rep-avatar .presence-dot {
    width: 7px; height: 7px;
    border-width: 1.5px;
    bottom: -1px; right: -1px;
  }
  .card-rep-unassigned {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: var(--r-full);
    border: 1px dashed var(--hairline); flex-shrink: 0;
  }

  /* Badge "Doublon" en haut a droite des cartes flaggees */
  .card-dup-badge {
    position: absolute;
    top: 8px; right: 8px;
    font-size: 10px; font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: rgba(244, 176, 0, 0.15);
    color: #b07a00;
    border: 1px solid rgba(244, 176, 0, 0.4);
    z-index: 1;
    white-space: nowrap;
  }
  .fiche-card.has-duplicate {
    border-left: 3px solid #f4b000;
  }
  .fiche-card.has-duplicate:hover .card-dup-badge {
    background: #fff8e6;
  }

  /* Bouton supprimer sur la carte */
  .fiche-card { position: relative; }
  .card-delete {
    position: absolute; top: 8px; right: 8px;
    width: 26px; height: 26px;
    border-radius: var(--r-full);
    border: none;
    background: transparent;
    color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    z-index: 2;
  }
  .card-delete svg { width: 13px; height: 13px; pointer-events: none; }
  .fiche-card:hover .card-delete { opacity: 1; }
  .card-delete:hover { background: var(--semantic-down); color: #fff; opacity: 1 !important; }

  /* Colonne vide */
  .col-empty {
    padding: 16px 12px; text-align: center;
    font-size: 11px; color: var(--muted-soft);
  }

  /* ── Quick-add dans "À traiter" ──────────────────────────── */
  .quick-add-wrap {
    padding: 6px 8px 2px;
    border-bottom: 1px solid var(--hairline-soft);
  }
  .quick-add-input {
    width: 100%; box-sizing: border-box;
    background: var(--surface-soft);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 7px 10px;
    font-size: 12px; font-family: inherit; color: var(--ink);
    outline: none; transition: border-color 0.15s;
  }
  .quick-add-input:focus { border-color: var(--primary); background: var(--canvas); }
  .quick-add-input::placeholder { color: var(--muted-soft); }

  /* ── Col header : bouton + dans "À traiter" ─────────────── */
  .col-add-btn {
    width: 22px; height: 22px;
    border: none; background: transparent;
    color: var(--muted); cursor: pointer;
    border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
  }
  .col-add-btn:hover { background: var(--primary); color: #fff; }
  .col-add-btn svg { width: 13px; height: 13px; pointer-events: none; }

  /* ── Toggle vue liste / kanban ───────────────────────────── */
  .view-toggle {
    display: inline-flex; align-items: center;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--canvas);
    flex-shrink: 0;
  }
  .view-btn {
    border: none; background: transparent;
    padding: 7px 10px; cursor: pointer;
    color: var(--muted);
    display: flex; align-items: center;
    transition: background 0.15s, color 0.15s;
  }
  .view-btn svg { width: 14px; height: 14px; pointer-events: none; }
  .view-btn.active { background: var(--ink); color: var(--canvas); }
  .view-btn:hover:not(.active) { color: var(--ink); }

  /* ── Vue liste (table) ───────────────────────────────────── */
  .list-view { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden; }
  /* table-layout: fixed force chaque groupe a respecter les memes largeurs
     de colonnes · sinon chaque table calcule ses colonnes selon son contenu
     local et les colonnes ne s'alignent pas entre les groupes (Nouvelle
     demande vs 2e appel a faire, etc.) */
  .list-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
  .list-table col.col-adresse { width: 22%; }
  .list-table col.col-client  { width: 14%; }
  .list-table col.col-tel     { width: 12%; }
  .list-table col.col-email   { width: 18%; }
  .list-table col.col-suivi   { width: 16%; }
  .list-table col.col-rep     { width: 12%; }
  .list-table col.col-date    { width:  6%; }
  .list-table th {
    font-size: 10px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.07em;
    padding: 10px 14px; text-align: left;
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
  }
  .list-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--hairline-soft);
    vertical-align: middle;
  }
  .list-table tbody tr:last-child td { border-bottom: none; }
  .list-table tbody tr { cursor: pointer; transition: background 0.1s; }
  .list-table tbody tr:hover { background: var(--surface-soft); }
  .list-table .td-adresse { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .list-table .td-client { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .list-table .td-tel    { color: var(--body); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .list-table .td-email  { color: var(--body); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .list-table .td-status { white-space: nowrap; }
  .list-table .td-age { font-family: var(--font-mono); color: var(--muted); white-space: nowrap; }
  .list-status-dot { width: 7px; height: 7px; border-radius: var(--r-full); display: inline-block; margin-right: 6px; vertical-align: middle; }
  .list-chips { display: flex; flex-wrap: wrap; gap: 3px; }

  /* Drag & drop retiré · le statut suit uniquement le workflow. */
  .fiche-card.dragging { opacity: 0.35; pointer-events: none; }
  .kanban-col.drag-over { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-soft); }

  /* ── Groupes dans la vue liste ───────────────────────────── */
  .list-group {
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: var(--space-base);
    background: var(--canvas);
  }
  /* Wrapper qui permet le scroll horizontal sur mobile pour voir
     toutes les colonnes du tableau · sinon les cellules se compriment
     et tout devient illisible. Scrollbar masquee pour rester epure. */
  .list-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge legacy */
  }
  .list-table-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
  /* Sur mobile : taille minimum de la table pour preserver la lisibilite
     des colonnes · l'user scrolle horizontalement avec le doigt. */
  @media (max-width: 768px) {
    .list-table { min-width: 900px; }
  }
  .list-group:last-child { margin-bottom: 0; }
  .list-group-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--hairline-soft);
    background: var(--surface-soft);
  }
  .list-group-dot { width: 7px; height: 7px; border-radius: var(--r-full); flex-shrink: 0; }
  .list-group-label { font-size: 11px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: 0.07em; }
  .list-group-count { font-size: 11px; font-family: var(--font-mono); color: var(--muted); margin-left: auto; }

  /* Liens téléphone / courriel */
  /* Tel + courriel · simple texte (non cliquables). Le clic sur la carte
     ou la rangee ouvre la fiche · plus de href tel:/mailto: qui
     intercepteraient. Pas de hover · ce sont juste des libelles. */
  .card-contact-link, .contact-link {
    color: inherit; text-decoration: none;
  }

  /* Statut workflow sur la carte */
  .card-wf {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 500;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    border: 1px solid var(--hairline-soft);
    line-height: 1.3;
  }
  .card-wf.urgent { background: #fff1f0; border-color: var(--semantic-down); }
  .card-wf.warn   { background: #fffbeb; border-color: var(--accent-yellow); }
  .card-wf.ok     { background: var(--primary-soft); border-color: transparent; }
  .card-wf.closed { opacity: 0.55; }

  /* Bandeau date rappel · prominent et lisible */
  .card-reminder {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    border-left: 3px solid var(--muted);
    font-size: 12px;
    color: var(--ink);
  }
  .card-reminder svg { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; }
  .card-reminder strong { font-weight: 600; }
  .card-reminder .when {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    margin-left: auto;
    flex-shrink: 0;
  }
  /* Etats temporels */
  .card-reminder.overdue {
    background: #fff1f0;
    border-left-color: var(--semantic-down);
    color: var(--semantic-down);
  }
  .card-reminder.overdue svg,
  .card-reminder.overdue .when { color: var(--semantic-down); }
  .card-reminder.today {
    background: #fffbeb;
    border-left-color: var(--accent-yellow);
  }
  .card-reminder.today svg,
  .card-reminder.today .when { color: #b07a00; }
  .card-reminder.upcoming {
    border-left-color: var(--primary);
  }
  .card-reminder.upcoming svg { color: var(--primary); }

  @media (max-width: 768px) {
    .pipeline-wrap { padding: var(--space-base); }
    .filters-bar input { min-width: 160px; }
  }