/* ============================================================
   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); }

/* ---------- 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; }
.fx-table td.name { font-weight: 600; color: var(--fx-marine); }
.fx-table tbody tr:hover td.name { color: var(--fx-terracotta); }
.fx-table td.dim { color: var(--fx-ardoise); }
.fx-table td.num { font-family: var(--fx-mono); font-size: 13px; }
.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; }
.status-chip.s-client i { background: #2E6B4F; }
.status-chip.s-prospect i { background: var(--fx-acier); }
.status-chip.s-ancien i { background: var(--fx-ardoise); }
.status-chip.s-partenaire i { background: var(--fx-terracotta); }

/* ---------- 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; } }
.state-switch { position: fixed; bottom: 24px; right: 24px; display: flex; gap: 4px; background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 999px; padding: 4px; z-index: 45; box-shadow: 0 4px 16px rgba(15,27,45,0.08); }
.state-switch button { border: none; background: none; font-family: var(--fx-font); font-size: 12px; font-weight: 600; color: var(--fx-ardoise); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.state-switch button.on { background: var(--fx-marine); color: var(--fx-creme); }

/* ---------- 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) ---------- */
.fx-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-90px); 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; max-width: 80vw; text-align: center; }
.fx-toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- 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); }

/* ====== Visibilité par forfait (remontée des six pages, 2026-07-27) ======
   Ces deux règles étaient copiées à l'identique dans admin, contacts,
   courriel, entreprises, index, opportunites et taches. Les classes, elles,
   sont posées par des fichiers du socle (fx-panel-base) et de trois domaines
   (dossiers, flownote, taches) : une règle utilisée par plus de pages que
   celles d'un domaine ne vit dans aucun domaine, elle monte ici. Sept copies
   d'une même règle, c'est sept endroits où la corriger et six occasions de
   l'oublier. Le corps porte tier-essentiel via fx-shell. */
body.tier-essentiel .conn-only { display: none !important; }
body:not(.tier-essentiel) .ess-only { display: none !important; }