/* ============================================================
     ANNULÉS · projets abandonnes en cours de route (cancellation
     client, projet refuse, etc.). Statut='annule' · stage=archive.
     Tableau separe de Termine · conceptuellement different.
     ============================================================ */

  .content { background: var(--surface-soft) !important; padding: 0 !important; }
  .pipeline-wrap {
    padding: var(--space-lg) var(--space-xl) var(--space-xxl);
    background: var(--surface-soft);
    min-height: 100%;
  }

  .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-display);
    font-variant-numeric: tabular-nums;
    min-width: 20px; text-align: center;
  }

  .filters-bar {
    display: flex; align-items: center; gap: var(--space-xs);
    flex-wrap: wrap; margin-bottom: var(--space-base);
  }
  /* Pattern unifie · recherche dans un pill (meme look que les autres
     tableaux · projets, production, demandes, termine). */
  .search-group {
    display: flex; align-items: center;
    flex: 1; max-width: 560px;
    height: 47px; 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);
  }
  /* Toggle de vue · maintenant dans assets/styles.css (partagé) */
  .view-toggle { margin-left: auto; }

  /* Grille de cartes · simple liste */
  .annulees-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-base);
  }

  /* Reutilise le pattern .demande-card (defini dans styles.css partage) avec
     un accent rouge subtil pour signaler la cancellation.

     SCOPÉ à .annulees-grid, et il faut que ça le reste. /board/index.html charge
     les 5 feuilles de tableau pour TOUS les tableaux, et celle-ci est la
     derniere : non scopé, cet accent « danger » se posait sur toute carte
     composee (renderer `default`), donc sur n'importe quel tableau. Un liseré
     rouge sur des leads bien vivants. */
  .annulees-grid .demande-card {
    background: var(--canvas);
    border: none;
    box-shadow: var(--shadow);
    border-left: 3px solid var(--danger);
    border-radius: var(--r-lg); padding: var(--space-base);
    text-decoration: none; color: inherit;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
    display: flex; flex-direction: column; gap: 8px;
  }
  .annulees-grid .demande-card:hover {
    transform: translateY(-1px);
    border-color: var(--danger);
    box-shadow: var(--shadow-hover);
  }
  /* Scopé · ces règles étaient les DERNIÈRES chargées de la page, donc elles
     imposaient leur look à tous les tableaux : la taille du titre et des lignes
     de toute carte composée venait d'ici, et `.card-top-row` du tableau Terminé
     aussi. `.card-name` et `.card-sub` sont remontés dans le socle partagé
     (board/index.css) avec ces mêmes valeurs · le rendu ne bouge pas, mais il
     ne dépend plus de l'ordre des feuilles. */
  /* margin-bottom · venait de termine.css, qui fuyait jusqu'ici. Ce fichier ne
     l'a jamais déclaré, mais la carte l'affichait. Repris pour ne rien changer
     (l'écart de 4px avait été attrapé par la comparaison avant/après). */
  .board-annules .card-top-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px;
    margin-bottom: 4px;
  }
  .board-annules .card-po {
    font-family: var(--font-mono); font-weight: 600;
    color: var(--muted); letter-spacing: 0.04em;
  }
  .board-annules .card-annule-date {
    color: var(--danger); font-weight: 600;
    font-family: var(--font-mono);
  }
  .board-annules .annule-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--r-pill);
    background: rgba(217, 38, 38, 0.08); color: var(--danger);
    font-size: 11px; font-weight: 600;
    width: max-content;
  }
  .board-annules .annule-badge svg { width: 12px; height: 12px; }
  /* Raison d annulation · affichee sur la carte. Encadre subtil avec label. */
  .board-annules .annule-reason {
    font-size: 12px; color: var(--body); line-height: 1.4;
    background: var(--surface-soft);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    border-left: 2px solid var(--danger);
  }
  .board-annules .annule-reason-label {
    display: block;
    font-size: 12px; font-weight: 500; color: var(--muted);
    margin-bottom: 2px;
  }

  /* List view · meme pattern que termine.html */
  .list-group {
    background: var(--canvas);
    border: none;
    box-shadow: var(--shadow);
    border-radius: var(--r-xl); overflow: hidden;
  }
  .list-group-head {
    display: flex; align-items: center; gap: 8px;
    padding: var(--space-base) var(--space-lg);
    background: var(--surface-soft);
    border-bottom: 1px solid var(--hairline);
    font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--ink);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .list-group-dot {
    width: 8px; height: 8px; border-radius: 50%;
  }
  .list-group-count {
    margin-left: auto;
    font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 12px;
    color: var(--muted);
  }
  .list-table-scroll { overflow-x: auto; }
  .list-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
  }
  /* Les règles de vue liste (`thead th`, `tbody td`, `tbody tr`, `:hover`,
     `:last-child td`, `.td-mono`) ont été retirées d'ici : écrites avec une
     spécificité supérieure au socle, elles habillaient la vue liste de TOUS les
     tableaux depuis la feuille du tableau Annulés. Leurs valeurs vivent
     maintenant dans board/index.css, inchangées. */

  .loading-state { padding: var(--space-xxl); text-align: center; color: var(--muted); }
  .empty-state { color: var(--muted-soft); font-style: italic; padding: var(--space-xxl); text-align: center; }

  @media (max-width: 768px) {
    .pipeline-wrap { padding: var(--space-lg) var(--space-base) var(--space-xxl); }
    .annulees-grid { grid-template-columns: 1fr; }
  }