/* ============================================================
   FlowAxis · module.css : patterns d'écran partagés
   (toolbar, pills filtres, tableau, bulk bar, états, drawer)
   À lier APRÈS foundation.css. Utilisé par les écrans 02+.
   ============================================================ */

.fx-icon { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- toolbar + pills filtres ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.toolbar .fx-search { width: 360px; }
.pill { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 999px; font-family: var(--fx-font); font-size: 13.5px; font-weight: 500; color: var(--fx-marine); cursor: pointer; }
.pill:hover { background: var(--fx-creme); }
.pill .chev { width: 14px; height: 14px; stroke: var(--fx-ardoise); }
.pill.active { border-color: var(--fx-terracotta); background: var(--fx-row-selected); color: var(--fx-terracotta-dark); font-weight: 600; }
.pill .clear { font-size: 13px; color: var(--fx-terracotta-dark); margin-left: 2px; padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.pill .clear:hover { background: rgba(194, 65, 12, 0.15); }
.pill-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,27,45,0.12); padding: 6px; z-index: 40; display: none; }
.pill.open .pill-menu { display: block; }
.pill-opt { display: block; padding: 8px 12px; border-radius: 6px; font-size: 13.5px; color: var(--fx-marine); cursor: pointer; }
.pill-opt:hover { background: var(--fx-creme); }
/* ---------- choix et ordre des colonnes (fx-table-columns.js) ----------
   Le bouton vit DANS l'en-tête du tableau, à droite de la dernière colonne,
   là où les CRM le mettent (choix de Steve, 2026-09-05). Les flèches monter et
   descendre existent parce qu'un glisser ne marche ni au doigt ni au clavier.

   La cellule de l'icône est COLLÉE au bord droit : une liste large défile
   horizontalement, et un bouton qui part hors de vue avec le défilement ne
   sert à rien. Elle a donc besoin d'un fond opaque, sinon les colonnes
   défilent visiblement dessous. Le fond vient de la RANGÉE (`inherit`), ce qui
   lui fait suivre le survol et la sélection au lieu de les trouer en blanc. */
.fx-table tbody tr { background: var(--fx-blanc); }
.fx-cols-cell { width: 38px; padding: 0 4px !important; text-align: center;
  position: sticky; right: 0; background: inherit; z-index: 3; }
/* `.fx-table th` impose `position: relative` (les poignées de redimensionnement
   s'y accrochent) et l'emporte en spécificité sur `.fx-cols-cell`. Sans ce
   sélecteur plus précis, l'en-tête ne collait PAS et l'icône partait hors de
   vue au défilement, alors que la cellule du corps, elle, collait : le défaut
   se cachait derrière une vérification faite du mauvais côté. */
.fx-table th.fx-cols-cell { position: sticky; right: 0; z-index: 4;
  background: var(--fx-creme); }
.fx-cols-btn { border: none; background: none; color: var(--fx-ardoise); cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center;
  justify-content: center; }
.fx-cols-btn:hover { background: var(--fx-sable); color: var(--fx-marine); }
/* `.fx-icon` ne pose que `fill: none` : la COULEUR du trait se donne à chaque
   usage. Sans `stroke`, l'icône est bien là, dans le DOM, et ne dessine rien.
   `currentColor` la fait suivre la couleur du bouton, survol compris. */
.fx-cols-btn .fx-icon { width: 16px; height: 16px; stroke: currentColor; }
/* Plafonné à la hauteur de la fenêtre : une liste à quinze colonnes déborderait
   sinon par le bas, hors d'atteinte. */
.fx-cols-menu { position: fixed; z-index: 60; min-width: 272px; background: var(--fx-blanc);
  border: 1px solid var(--fx-sable); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,27,45,0.16);
  padding: 6px; max-height: calc(100vh - 24px); overflow-y: auto; }
.fx-cols-titre { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fx-ardoise); padding: 6px 10px 8px; }
.fx-col-reset { width: 100%; border: none; background: none; text-align: left; cursor: pointer;
  font-family: var(--fx-font); font-size: 13px; color: var(--fx-ardoise); padding: 8px 10px;
  border-top: 1px solid var(--fx-row-line); margin-top: 4px; border-radius: 6px; }
.fx-col-reset:hover { background: var(--fx-creme); color: var(--fx-marine); }
.fx-col-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; font-size: 13.5px; color: var(--fx-marine); }
.fx-col-row:hover { background: var(--fx-creme); }
.fx-col-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-col-btn { border: none; background: none; color: var(--fx-ardoise); cursor: pointer; padding: 2px; border-radius: 4px; display: inline-flex; }
.fx-col-btn:hover:not(:disabled) { background: var(--fx-sable); color: var(--fx-marine); }
.fx-col-btn:disabled { opacity: 0.35; cursor: default; }
.fx-col-btn .fx-icon { width: 14px; height: 14px; stroke: currentColor; }

/* ---------- tableau ---------- */
.table-card { background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 12px; overflow: visible; }
.fx-table th { user-select: none; position: relative; }
.fx-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-resizer { position: absolute; right: -3px; top: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 5; border-radius: 2px; }
.col-resizer:hover, .col-resizer.resizing { background: rgba(194, 65, 12, 0.3); }
.fx-table th.sortable { cursor: pointer; }
.fx-table th.sortable:hover { color: var(--fx-marine); }
.fx-table th .arrow { font-size: 10px; margin-left: 4px; }
.fx-table tbody tr { cursor: pointer; }
/* Un nom de 300 caractères ne chasse plus les autres colonnes hors de l'écran
   (constat C20) : la cellule du nom, et celle qui nomme une entreprise dans une autre
   liste (td.ref), plafonnent et l'ellipse de .fx-table td joue. Ces deux cellules, quand
   elles montrent une donnée de l'organisation, gardent la valeur complète dans leur attribut
   title. */
.fx-table td.name, .fx-table td.ref { max-width: 360px; }
.fx-table td.name { font-weight: 600; color: var(--fx-marine); }
/* text-overflow ne s'hérite pas : une ligne posée dans un <div> de la cellule
   porte sa propre ellipse, sinon la cellule la coupe net (mesuré dans Chromium). */
.fx-table td.name > div { overflow: hidden; text-overflow: ellipsis; }
.fx-table tbody tr:hover td.name { color: var(--fx-terracotta); }
.fx-table td.dim { color: var(--fx-ardoise); }
/* Montants et comptes : Manrope, chiffres tabulaires, jamais la mono (décision de Steve,
   2026-07-09; la mono reste au code et aux identifiants, td.mono-sm). */
.fx-table td.num { font-family: var(--fx-font); font-size: 13px; font-variant-numeric: tabular-nums; }
.fx-table td.mono-sm { font-family: var(--fx-mono); font-size: 12px; color: var(--fx-ardoise); }
.col-check { width: 40px; }
.fx-checkbox { width: 16px; height: 16px; accent-color: var(--fx-terracotta); cursor: pointer; }

/* ---------- avatars et chips ---------- */
.avatar-sm { width: 32px; height: 32px; border-radius: 999px; background: var(--fx-acier); color: var(--fx-creme); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.avatar-lg { width: 64px; height: 64px; border-radius: 999px; background: var(--fx-acier); color: var(--fx-creme); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.name-cell { display: flex; align-items: center; gap: 12px; }
.chip { display: inline-flex; align-items: center; background: var(--fx-sable); color: var(--fx-ardoise); font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.chip.more { background: none; border: 1px dashed var(--fx-sable); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- puce de statut à point (D-003, registre de design, adopté 2026-09-05) ----------
   Un statut d'entreprise ou une étape d'opportunité se montre par une puce bordée
   et un point coloré : la couleur n'est jamais le seul canal, le libellé est là.
   Statuts d'entreprise : la couleur vit ici. Étapes d'opportunité : la couleur
   vient de fx-stages.js, posée en style inline sur le point. */
.status-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--fx-sable); border-radius: 999px; background: var(--fx-blanc); color: var(--fx-marine); font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1; }
.status-chip i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--fx-ardoise); flex-shrink: 0; }
/* Statut derive d'une organisation, trois etats exclusifs et rien d'autre.
   Les classes s-client, s-prospect et s-partenaire ont ete retirees le
   2026-09-07 : la migration 047 est passee en production, plus aucune fiche ne
   porte ces valeurs comme statut. Aucune couleur neuve, les memes jetons. */
/* Sans relation (2026-09-25) : un point CREUX, « rien » plutot qu'une teinte de plus. */
.status-chip.s-sans_relation i { background: none; border: 1.5px solid var(--fx-ardoise); }
.status-chip.s-en_prospection i { background: var(--fx-acier); }
.status-chip.s-actif i { background: var(--fx-vert); }
.status-chip.s-inactif i { background: var(--fx-ardoise); }

/* Puces du panneau organisation (spec 2026-09-07). Deux axes, deux familles :
   .s-* pour le statut DEDUIT, .r-* pour les relations OUVERTES. Aucune couleur
   neuve : les memes jetons que les puces de liste. */
.op-chip.on.s-actif { background: var(--fx-vert); color: var(--fx-creme); border-color: var(--fx-vert); }
.op-chip.on.s-sans_relation { background: var(--fx-sable); color: var(--fx-marine); border-color: var(--fx-sable); }
.op-chip.on.s-en_prospection { background: var(--fx-acier); color: var(--fx-creme); border-color: var(--fx-acier); }
.op-chip.on.s-inactif { background: var(--fx-ardoise); color: var(--fx-creme); border-color: var(--fx-ardoise); }
.op-chip.on.r-client { background: var(--fx-vert); color: var(--fx-creme); border-color: var(--fx-vert); }
.op-chip.on.r-fournisseur { background: var(--fx-marine); color: var(--fx-creme); border-color: var(--fx-marine); }
.op-chip.on.r-partenaire { background: var(--fx-terracotta); color: var(--fx-creme); border-color: var(--fx-terracotta); }
.op-chip.on.r-libre { background: var(--fx-ardoise); color: var(--fx-creme); border-color: var(--fx-ardoise); }

/* ---------- menu actions par ligne ---------- */
.row-menu { position: relative; }
.kebab-btn { width: 30px; height: 30px; border: none; background: none; border-radius: 6px; color: var(--fx-ardoise); cursor: pointer; font-size: 16px; letter-spacing: 1px; }
.kebab-btn:hover { background: var(--fx-sable); }
.row-dd { position: absolute; right: 0; top: calc(100% + 2px); min-width: 150px; background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,27,45,0.12); padding: 6px; z-index: 40; display: none; }
.row-menu.open .row-dd { display: block; }
.row-dd span { display: block; padding: 8px 12px; border-radius: 6px; font-size: 13.5px; color: var(--fx-marine); }
.row-dd span:hover { background: var(--fx-creme); }
.row-dd span.danger { color: var(--fx-terracotta-dark); }

/* ---------- pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--fx-row-line); font-size: 13.5px; color: var(--fx-ardoise); }
.pagination .pages { display: flex; gap: 8px; }

/* ---------- bulk bar ---------- */
.bulk-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(calc(100% + 32px)); background: var(--fx-marine); color: var(--fx-creme); border-radius: 12px; box-shadow: 0 12px 32px rgba(15,27,45,0.3); height: 56px; padding: 12px 20px; display: flex; align-items: center; gap: 16px; z-index: 50; transition: transform 0.18s ease; }
.bulk-bar.show { transform: translateX(-50%) translateY(0); }
.bulk-bar .count { font-weight: 600; font-size: 14px; white-space: nowrap; }
.bulk-bar button { background: none; border: 1px solid rgba(250,248,245,0.3); color: var(--fx-creme); font-family: var(--fx-font); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.bulk-bar button:hover { background: rgba(250,248,245,0.1); }
.bulk-bar button.ghost { border: none; color: #8B9CB8; }

/* ---------- états ---------- */
.empty-state { padding: 80px 20px; text-align: center; }
.empty-state .fx-icon { width: 72px; height: 72px; stroke: var(--fx-ardoise); opacity: 0.3; margin-bottom: 18px; }
.empty-state h2 { font-size: 18px; font-weight: 700; color: var(--fx-marine); margin-bottom: 16px; }
.empty-state .empty-actions { display: flex; gap: 12px; justify-content: center; }
.skeleton-row { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--fx-row-line); }
.sk { background: var(--fx-sable); border-radius: 6px; height: 14px; animation: fx-pulse 1.4s ease-in-out infinite; }
@keyframes fx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- drawer ---------- */
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--fx-sable); }
.drawer-head h2 { font-size: 18px; font-weight: 700; color: var(--fx-marine); }
.drawer-close { width: 32px; height: 32px; border: 1px solid var(--fx-sable); border-radius: 8px; background: var(--fx-blanc); color: var(--fx-ardoise); font-size: 14px; cursor: pointer; }
.drawer-body { flex: 1; overflow-y: auto; padding: 24px; }
.drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--fx-sable); }
.drawer-note { font-size: 13px; color: var(--fx-ardoise); background: var(--fx-creme); border: 1px solid var(--fx-sable); border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; }

/* ---------- onglets ---------- */
.fx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--fx-sable); margin-bottom: 20px; }
.fx-tab { border: none; background: none; font-family: var(--fx-font); font-size: 13.5px; font-weight: 600; color: var(--fx-ardoise); padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fx-tab:hover { color: var(--fx-marine); }
.fx-tab.on { color: var(--fx-terracotta-dark); border-bottom-color: var(--fx-terracotta); }

/* ---------- lignes d'information (drawer Infos) ---------- */
.info-row { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--fx-row-line); font-size: 14px; }
.info-row:last-child { border-bottom: none; }
.info-row .k { width: 130px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--fx-ardoise); }
.info-row .v { color: var(--fx-marine); }
.info-row .v a { color: var(--fx-marine); text-decoration: none; }
.info-row .v a:hover { color: var(--fx-terracotta); text-decoration: underline; }
.info-row .v.mono { font-family: var(--fx-mono); font-size: 13px; }

/* ---------- formulaires de modal ---------- */
.mc-head { padding: 24px; border-bottom: 1px solid var(--fx-sable); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mc-title { font-size: 20px; font-weight: 700; color: var(--fx-marine); }
.mc-sub { font-size: 13px; color: var(--fx-ardoise); margin-top: 3px; }
.mc-body { padding: 24px; overflow-y: auto; }
.mc-foot { padding: 16px 24px; border-top: 1px solid var(--fx-sable); display: flex; justify-content: space-between; gap: 12px; }
.field { margin-bottom: 16px; }
.req::after { content: " *"; color: var(--fx-terracotta); }
.field-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.lock-tag { font-size: 11.5px; font-weight: 600; color: var(--fx-ardoise); margin-left: 6px; }
.locked-box { background: var(--fx-creme); border: 1px solid var(--fx-sable); border-radius: 8px; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--fx-marine); display: flex; align-items: center; gap: 8px; }
.inline-create { display: flex; gap: 8px; align-items: center; }
.tagpill { display: inline-flex; align-items: center; gap: 6px; background: var(--fx-sable); color: var(--fx-marine); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 6px 4px 11px; }
.tagpill .tp-x { width: 16px; height: 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: var(--fx-ardoise); cursor: pointer; }
.tagpill .tp-x:hover { background: rgba(194, 65, 12, 0.2); color: var(--fx-terracotta-dark); }
.tag-add-inline { border: 1px dashed var(--fx-sable); border-radius: 999px; padding: 3px 11px; font-family: var(--fx-font); font-size: 12px; width: 76px; color: var(--fx-marine); background: var(--fx-blanc); outline: none; }
.tag-add-inline:focus { border-color: var(--fx-terracotta); }

/* ---------- toast (actions simulées / à venir) ---------- */
/* Un avis terminé ne laisse rien à l'écran (C24). Caché, il monte de SA hauteur
   (-100 %) plus 64 px : le haut (20) + le décalage de l'ombre (8) + 1,5 fois son
   flou (24), au-delà duquel l'ombre ne se voit plus. Une distance fixe laissait
   une bande sombre sous un avis de trois lignes, qui prenait les clics.
   visibility: hidden une fois glissé : ni peint, ni cliquable, et son bouton
   Annuler sort de l'ordre de tabulation. La transition de visibility dure autant
   que la glissade : l'avis reste visible en remontant, et paraît dès qu'il entre.
   Filet : tests/core/ecrans/desktop/socle/fx-toast-hidden.test.js. */
.fx-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(calc(-100% - 64px)); visibility: hidden; background: var(--fx-marine); color: var(--fx-creme); font-size: 13.5px; font-weight: 600; padding: 11px 20px; border-radius: 10px; box-shadow: 0 8px 24px rgba(15,27,45,0.25); z-index: 9000; transition: transform 0.2s ease, visibility 0.2s; max-width: 80vw; text-align: center; }
.fx-toast.show { transform: translateX(-50%) translateY(0); visibility: visible; }

/* ---------- badge statut éditable ---------- */
.badge.editable { cursor: pointer; border: none; font-family: var(--fx-font); }
.badge.editable:hover { box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.25); }
.statut-hint { font-size: 11px; color: var(--fx-ardoise); padding: 8px 12px 4px; border-top: 1px solid var(--fx-row-line); margin-top: 4px; display: block; }

/* ====== bloc Archivées (composant partagé, 2026-07-17) : sous la liste de
   chaque écran (opportunités, entreprises, contacts), teinte distincte ====== */
.fx-arch { margin-top: 18px; border: 1px solid var(--fx-sable); border-radius: 12px; overflow: hidden; background: #EFEBE4; }
.fx-arch-head { width: 100%; display: flex; align-items: center; gap: 8px; border: none; background: var(--fx-acier); color: var(--fx-creme); font-family: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 14px; cursor: pointer; text-align: left; }
.fx-arch-chev { margin-left: auto; }
.fx-arch-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--fx-sable); cursor: pointer; }
.fx-arch-row:hover { background: #E7E1D8; }
.fx-arch-titre { font-weight: 600; color: var(--fx-marine); }
.fx-arch-sous { color: var(--fx-ardoise); font-size: 12.5px; }
.fx-arch-btn { margin-left: auto; flex-shrink: 0; }
.fx-arch-vide { padding: 14px; font-size: 12.5px; color: var(--fx-ardoise); }

/* ---------- kanban partage (.fx-kan-*) ----------
   Ne dessine que la COQUILLE : planche, colonnes, cartes. Le contenu d'une
   carte appartient a l'ecran qui la remplit (valeur et priorite pour les
   opportunites, chaleur et prochaine action pour les prospects).
   Monte ici le 2026-09-05 depuis opportunites.html, pour que le kanban des
   prospects emploie le MEME CSS et non une copie (registre de design D-010).
   La couleur d'une colonne vient de --col-accent, pose en style par l'ecran
   depuis fx-stages.js : jamais une regle par slug. */
  /* ====== kanban (piste 3, 2026-07-10 : colonnes neutres, en-tête plein dans l'accent,
     rampe bleu amont → terracotta aval ; accents synchronisés avec ETAPE_COLOR/ETAPE_ACCENT) ====== */
.fx-kan-board { flex: 1; min-height: 0; display: flex; gap: 16px; overflow-x: auto; padding-bottom: 20px; }
.fx-kan-col { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; border-radius: 12px; background: var(--fx-creme); border: 1px solid var(--fx-sable); overflow: hidden; }
  /* La couleur d'une colonne vient de fx-stages.js (style inline --col-accent posé par
     crm-opps-app.js), jamais d'une règle CSS par slug : vestige retiré le 2026-09-05. */
.fx-kan-col.over .fx-kan-col-body { outline: 2px dashed var(--fx-terracotta); outline-offset: -2px; border-radius: 10px; }
  /* en-tête 2 lignes (2026-07-17) : nom + compte + actions / % · total à droite */
.fx-kan-col-head { flex-shrink: 0; background: var(--col-accent, var(--fx-marine)); display: flex; flex-direction: column; gap: 3px; padding: 8px 12px 9px; }
.fx-kan-col-h1 { display: flex; align-items: center; gap: 8px; }
.fx-kan-col-h2 { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,0.92); font-variant-numeric: tabular-nums; min-height: 15px; }
.fx-kan-col-head:hover .fx-kan-col-add { opacity: 1; }
.fx-kan-col-name { font-size: 12px; font-weight: 700; color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.05em; }
.fx-kan-col-count { font-size: 11px; font-weight: 700; color: #FFFFFF; background: rgba(255,255,255,0.22); border-radius: 999px; min-width: 20px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; }
.fx-kan-col-flex { flex: 1; }   /* pousse les boutons à droite du titre */
.fx-kan-col-add { opacity: 0; border: none; background: rgba(255,255,255,0.22); color: #FFFFFF; width: 22px; height: 22px; border-radius: 6px; font-size: 15px; line-height: 1; cursor: pointer; transition: opacity 0.15s; }
.fx-kan-col-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 8px 12px; }
  /* colonne repliée (2026-07-17) : bande étroite verticale, toujours cible de dépôt */
.fx-kan-col-fold { border: none; background: rgba(255,255,255,0.22); color: #FFFFFF; width: 20px; height: 20px; border-radius: 6px; font-size: 10px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.fx-kan-col-head:hover .fx-kan-col-fold { opacity: 1; }
.fx-kan-col.plie { width: 46px; }
.fx-kan-col.plie .fx-kan-col-head { height: 100%; flex-direction: column; justify-content: flex-start; padding: 10px 0 12px; gap: 10px; }
.fx-kan-col.plie .fx-kan-col-name { writing-mode: vertical-rl; transform: rotate(180deg); }
.fx-kan-col.plie .fx-kan-col-fold { opacity: 1; }
.fx-kan-col.plie .fx-kan-col-body { display: none; }
.fx-kan-col.plie.over { outline: 2px dashed var(--fx-terracotta); outline-offset: -2px; }
.fx-kan-col-empty { font-size: 12px; color: var(--fx-ardoise); opacity: 0.6; text-align: center; padding: 22px 8px; border: 1.5px dashed var(--fx-sable); border-radius: 10px; }
  /* carte (brief 03 : blanc, bordure sable, 10px, padding 14px; hover ombre + liseré terracotta) */
.fx-kan-card { background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 10px; padding: 14px; cursor: grab; animation: fx-kan-in 0.2s ease-out; }
@keyframes fx-kan-in { from { opacity: 0.4; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.fx-kan-card:hover { border-color: rgba(194,65,12,0.45); box-shadow: 0 3px 10px rgba(15,27,45,0.08); }
.fx-kan-card.dragging { opacity: 0.45; cursor: grabbing; }
  /* Cartes toujours blanches (sobriété) : la couleur vit sur la colonne, pas sur la carte. */
.fx-kan-card-title { font-size: 14px; font-weight: 600; color: var(--fx-marine); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-kan-card-sub { font-size: 12px; color: var(--fx-ardoise); margin-top: 2px; }
.fx-kan-card-row { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.fx-kan-card-date { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fx-ardoise); margin-top: 7px; }
.fx-kan-card-date svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.fx-kan-card-date.late { color: var(--fx-terracotta); font-weight: 700; }
/* Le pied passe a la ligne : une carte porte parfois un bouton en toutes
   lettres (« Ouvrir le dossier »), et sans cela la colonne se met a defiler
   horizontalement, ce qui n'a aucun sens dans une planche qui defile deja. */
.fx-kan-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; row-gap: 8px; }
.fx-kan-card-owner { width: 24px; height: 24px; border-radius: 50%; background: var(--fx-marine); color: var(--fx-creme); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fx-kan-card-arch { opacity: 0; border: 0; background: none;
                 color: var(--fx-ardoise, #556074); cursor: pointer; padding: 2px; }
.fx-kan-card:hover .fx-kan-card-arch, .fx-kan-card-arch:focus-visible { opacity: 1; }
.fx-kan-card-arch:hover { color: var(--fx-terracotta, #C2410C); }
  /* Accessibilité (revue finale) : sans survol (tactile), le bouton reste visible en permanence. */
@media (hover: none) { .fx-kan-card-arch { opacity: 1; } }

/* Le pousse-droite du pied de carte, et les fleches de deplacement. Elles sont
   le chemin PRINCIPAL du changement d'etape, pas un ornement : le glisser HTML5
   ne marche ni au doigt ni au clavier, donc une carte qui ne bougerait qu'en
   glissant serait immobile sur tablette. Toujours visibles, jamais au survol. */
.fx-kan-card-flex { flex: 1; }
.fx-kan-move { border: 1px solid var(--fx-sable); background: var(--fx-blanc);
  color: var(--fx-ardoise); cursor: pointer; width: 24px; height: 24px;
  border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; }
.fx-kan-move:hover:not(:disabled) { border-color: var(--fx-terracotta); color: var(--fx-terracotta); }
.fx-kan-move:disabled { opacity: 0.3; cursor: default; }
.fx-kan-move .fx-icon { width: 13px; height: 13px; stroke: currentColor; }
.fx-kan-card-arch .fx-icon { width: 13px; height: 13px; stroke: currentColor; }

/* ---------- module off (D-019) ----------
   The state of a screen whose module is switched off for the organisation
   (fx-module-off.js; registre de design D-019, candidat). One card, as the
   product's other cards: the band says why and where the decision is taken,
   the reason line under it says why every greyed action is greyed (written
   once, in text: the colour is never the only channel, FR-252), then the
   seat's own rows, or the socle's empty state. No primary button here.
   Greyed actions sit on each row, or once at the head of the block, right
   under the reason (.fx-module-off-lead, the screen's own controls).
   Two rules stay local to this block (registre D-019) because the button of
   the socle (.fx-btn) has no equivalent: the disabled state, and no underline
   on a link drawn as a button. A greyed action wears a mark no live .fx-btn
   wears: a dashed ardoise border, no fill (the row's blanc shows through),
   ardoise text never faded (7.53:1 on blanc, measured on screen at Task 7),
   and the not-allowed cursor on hover. A live secondary button has a solid
   sable border, a blanc fill and marine text; a tertiary one, no border. Two
   clickable pills of the product are dashed too, and they are not buttons:
   the empty pill of a link strip (.cs-pill.empty, fx-liaison.js and
   fx-link-strip.js) and the create pill of FlowNote (.fmc-pill.missing,
   index.html); the attestation of Task 7 weighs both meanings.
   The direction chip of a row keeps one width at least, its word centred, so
   that the subject starts at the same place on every row (the date has a
   fixed width too).
   The card fills its host up to 920px and reads from the top when the host is
   a flex row (align-self); the host gives it the width and the scroll. */
.fx-module-off { box-sizing: border-box; width: 100%; max-width: 920px; margin: 0 auto; align-self: flex-start; background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 12px; overflow: hidden; text-align: left; }
.fx-module-off-band { padding: 20px 24px; background: var(--fx-creme); border-bottom: 1px solid var(--fx-sable); }
.fx-module-off-title { font-size: 16px; font-weight: 700; color: var(--fx-marine); line-height: 1.4; margin-bottom: 4px; }
.fx-module-off-where { font-size: 14px; color: var(--fx-ardoise); }
.fx-module-off-band .fx-btn { margin-top: 14px; text-decoration: none; }
.fx-module-off-reason { padding: 12px 24px; font-size: 13px; color: var(--fx-ardoise); border-bottom: 1px solid var(--fx-row-line); }
.fx-module-off-lead { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--fx-row-line); }
.fx-module-off-heading { padding: 20px 24px 8px; font-size: 14px; font-weight: 700; color: var(--fx-marine); }
.fx-module-off-list { list-style: none; margin: 0; padding: 0 0 8px; }
.fx-module-off-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 24px; border-top: 1px solid var(--fx-row-line); }
.fx-module-off-date { flex-shrink: 0; width: 128px; font-size: 13px; color: var(--fx-ardoise); font-variant-numeric: tabular-nums; }
.fx-module-off-row .chip { flex-shrink: 0; min-width: 64px; justify-content: center; }
.fx-module-off-main { flex: 1; min-width: 200px; }
.fx-module-off-subject { font-weight: 600; color: var(--fx-marine); overflow-wrap: anywhere; }
.fx-module-off-labels { margin-top: 2px; font-size: 12.5px; color: var(--fx-ardoise); overflow-wrap: anywhere; }
.fx-module-off-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.fx-module-off .fx-btn[disabled] { padding: 6px 12px; font-size: 13px; background: none; border: 1px dashed var(--fx-ardoise); color: var(--fx-ardoise); cursor: not-allowed; }
.fx-module-off .empty-state { padding: 48px 20px; }
.fx-module-off .empty-state h2 { margin-bottom: 0; }

/* ---------- the upsell (D-031) ----------
   One drawing for every surface the organisation's plan does not include
   (fx-upsell.js; registre de design D-031, candidat; ledger 2026-11-05, pt 3),
   lifted from the mockup (docs/design/_fromDesign-TACHES/06 Tâches.html, its
   locked overlay). The screen's content stays in place, blurred and inert (the
   script sets `inert` on it), under a cream veil that holds one centred card:
   the screen's icon on its pale tile, the « Module Connecté » pill, the title,
   the pitch, the points, and « Passer à Connecté ». The same card, without
   the pill and the points, is the screen's other locked states (an account to
   connect, an access to grant, an access refused); the screen gives it a host.
   The host is the zone the screen names; it is positioned already
   (.mail-zone, .cal-zone), the layer covers it. The card is centred by its
   own auto margins, never by the layer's alignment: on a short window the
   card scrolls whole inside the layer instead of losing its top. */
.fx-upsell-host > :not(.fx-upsell) { filter: blur(5px); }
.fx-upsell { position: absolute; inset: 0; z-index: 30; display: flex; padding: 24px; overflow-y: auto; background: rgba(250, 248, 245, 0.55); }
.fx-upsell-card { box-sizing: border-box; max-width: 520px; width: 92%; margin: auto; padding: 36px 40px; background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 27, 45, 0.18); text-align: center; }
.fx-upsell-card > :last-child { margin-bottom: 0; }
.fx-upsell-icon { width: 56px; height: 56px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--fx-row-selected); }
.fx-upsell-icon .fx-icon { width: 26px; height: 26px; stroke: var(--fx-terracotta); }
.fx-upsell-pill { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: var(--fx-acier); color: var(--fx-creme); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fx-upsell-title { margin: 0 0 10px; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--fx-marine); }
.fx-upsell-lead { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--fx-ardoise); }
.fx-upsell-points { display: flex; flex-direction: column; gap: 9px; max-width: 410px; margin: 0 auto 22px; padding: 0; list-style: none; text-align: left; }
.fx-upsell-points li { display: flex; gap: 9px; font-size: 13.5px; color: var(--fx-marine); }
.fx-upsell-check { flex-shrink: 0; font-weight: 700; color: var(--fx-vert); }
.fx-upsell-cta { display: flex; justify-content: center; gap: 10px; }
.fx-upsell-cta .fx-btn { text-decoration: none; }

/* ---- Menu du compte ----
   Ce qui appartient à la personne (socle/fx-account-panels.js, ledger 2026-10-30c n° 13).
   Montés depuis l'Administration, jamais une teinte neuve. */
.fx-acct-note { margin: 0 0 16px; padding: 12px 16px; background: var(--fx-creme); border: 1px solid var(--fx-sable); border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--fx-ardoise); }
.fx-acct-actions { margin-bottom: 14px; }
.fx-acct-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fx-ardoise); }
.fx-acct-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.fx-acct-form .fx-input { flex: 1 1 200px; min-width: 0; }
.int-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.int-logo { width: 46px; height: 46px; border-radius: 10px; background: var(--fx-marine); color: var(--fx-creme); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.int-id { flex: 1; min-width: 0; }
.int-name { font-size: 15px; font-weight: 700; color: var(--fx-marine); }
.int-state { font-size: 12.5px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.int-state.on { color: var(--fx-marine); }
.int-state.off { color: var(--fx-ardoise); }
.int-detail { font-size: 12px; margin-top: 2px; color: var(--fx-ardoise); }
.int-detail.en-erreur { color: var(--fx-terracotta-dark); }
.int-svcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 16px; }
.int-svc { display: flex; align-items: center; gap: 9px; border: 1px solid var(--fx-row-line); border-radius: 8px; padding: 9px 12px; }
.int-svc-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--fx-sable); flex-shrink: 0; }
.int-svc-dot.on { background: var(--fx-vert); }
.int-svc-n { font-weight: 600; color: var(--fx-marine); font-size: 13px; }
.int-svc-src { margin-left: auto; font-size: 11px; color: var(--fx-ardoise); text-align: right; }
.int-pitch { margin-top: 16px; font-size: 13px; color: var(--fx-ardoise); line-height: 1.6; background: var(--fx-creme); border-radius: 8px; padding: 12px 14px; }
/* « Lecture seule » : une permission manquante que la personne peut accorder, jamais une panne. */
.int-pitch.attention { background: var(--fx-row-selected); color: var(--fx-ardoise); border-left: 3px solid var(--fx-terracotta); }
.int-pitch.attention strong { color: var(--fx-terracotta-dark); }
.int-pitch a { color: var(--fx-terracotta-dark); font-weight: 600; }
/* Un lien qui a l'air d'un bouton n'est pas souligné. */
a.fx-btn { text-decoration: none; }

/* ---- Le lexique (socle/fx-lexicon.js), monté par l'Administration et par le menu du compte. Montées de admin.html. ---- */
.adm-pane-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.adm-outlook-note { display: flex; align-items: center; gap: 10px; background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-left: 3px solid var(--fx-acier); border-radius: 8px; padding: 12px 16px; font-size: 13px; color: var(--fx-ardoise); margin-bottom: 16px; }
.adm-outlook-note svg { width: 16px; height: 16px; stroke: var(--fx-acier); fill: none; stroke-width: 2; flex-shrink: 0; }
.adm-outlook-note b { color: var(--fx-marine); font-weight: 700; }
.adm-table td { vertical-align: middle; }
.adm-table .cell-use { width: 150px; }
.adm-table .cell-act { width: 54px; text-align: right; }
.adm-table td.name { font-weight: 600; color: var(--fx-marine); font-size: 14px; }
.adm-foot-note { font-size: 12.5px; color: var(--fx-ardoise); padding: 14px 16px; display: flex; align-items: center; gap: 8px; }
.adm-stub { background: var(--fx-blanc); border: 1px dashed var(--fx-sable); border-radius: 12px; padding: 40px; text-align: center; color: var(--fx-ardoise); }
.adm-stub p { font-size: 13.5px; max-width: 420px; margin: 0 auto; line-height: 1.6; }
.adm-editable { cursor: text; border-radius: 4px; padding: 1px 3px; }
.adm-editable:hover { background: var(--fx-row-selected); box-shadow: inset 0 0 0 1px var(--fx-sable); }
.adm-editable.editing { background: var(--fx-blanc); box-shadow: 0 0 0 2px rgba(194,65,12,0.3); outline: none; }
.adm-table .cell-act { position: relative; }
.adm-menu { position: absolute; right: 0; top: calc(100% + 2px); min-width: 214px; background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,27,45,0.14); padding: 6px; z-index: 60; }
.adm-menu span { display: block; padding: 8px 12px; border-radius: 6px; font-size: 13px; color: var(--fx-marine); cursor: pointer; white-space: nowrap; }
.adm-menu span:hover { background: var(--fx-creme); }
.adm-add-input { width: 100%; border: 1px solid var(--fx-terracotta); border-radius: 8px; padding: 8px 11px; font-family: var(--fx-font); font-size: 14px; color: var(--fx-marine); outline: none; box-shadow: 0 0 0 3px rgba(194,65,12,0.12); }
.adm-outlook-note.ess { border-left-color: var(--fx-terracotta); }
.adm-outlook-note.ess svg { stroke: var(--fx-terracotta); }
.lex-preset-wrap { position: relative; display: inline-flex; }
.lex-preset-wrap .adm-menu { min-width: 180px; }
.adm-add-sel { border: 1px solid var(--fx-sable); border-radius: 6px; padding: 6px 8px; font-family: var(--fx-font); font-size: 13px; color: var(--fx-marine); background: var(--fx-blanc); outline: none; width: 100%; }
.adm-add-sel:focus { border-color: var(--fx-terracotta); }
#adm-add-row .adm-add-input { padding: 6px 9px; }
.lx-addbtns { display: inline-flex; gap: 4px; }
.lx-ok, .lx-cancel { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--fx-sable); background: var(--fx-blanc); cursor: pointer; font-size: 13px; font-weight: 700; }
.lx-ok { background: var(--fx-vert); color: var(--fx-blanc); border-color: var(--fx-vert); }
.lx-cancel { color: var(--fx-ardoise); }
.lx-cancel:hover { border-color: var(--fx-terracotta); color: var(--fx-terracotta); }
.lex-sel { border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; font-family: var(--fx-font); font-size: 13px; color: var(--fx-marine); background: transparent; cursor: pointer; max-width: 100%; }
.lex-sel:hover { border-color: var(--fx-sable); background: var(--fx-blanc); }
.lex-sel:focus { border-color: var(--fx-terracotta); outline: none; background: var(--fx-blanc); }
.lex-freq { font-family: var(--fx-font); font-size: 13px; font-variant-numeric: tabular-nums; }
.lex-stwrap { display: inline-flex; align-items: center; gap: 7px; }
.lex-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.lex-del { width: 30px; height: 30px; border: none; background: none; border-radius: 6px; color: var(--fx-ardoise); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lex-del:hover { background: var(--fx-row-selected); color: var(--fx-terracotta-dark); }
.lex-confirm { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fx-terracotta-dark); font-weight: 700; white-space: nowrap; }
.lex-confirm .lx-ok, .lex-confirm .lx-cancel { width: auto; height: 26px; padding: 0 10px; font-size: 12px; }