/* CRM OSINT B2B — feuille de style unique, écrite à la main. */

/* Charte « Signal » (2026-09-06) : noir sur blanc, aucune carte ni ombre,
   la structure vient des filets (2px noir pour une section ou un tableau,
   1px gris entre les lignes) et de la typographie (Public Sans, capitales
   pour les titres). Une seule couleur de signal, le vermillon, réservée à
   l'alerte, au danger et au verdict « soumission forte ». Les couleurs
   d'état (vert OK, ambre en cours) restent distinctes du signal.
   Voir partials/header.php pour l'import Google Fonts. */
:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --border: #e3e3e3;
    --border-strong: #000000;
    --text: #000000;
    --text-muted: #6b6b6b;
    --th-color: #000000;
    --th-bg: #ffffff;
    --primary: #000000;
    --primary-hover: #333333;
    --signal: #e03a1c;
    --danger: #e03a1c;
    --danger-hover: #b82e15;
    --danger-soft: #fde3dd;
    --success: #1a8a3c;
    --success-soft: #e4f4e9;
    --warning: #c97d00;
    --warning-soft: #fff1d6;
    --neutral-soft: #efefef;
    --row-hover: #f5f5f5;
    --radius: 0px;
    --font: "Public Sans", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Public Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    line-height: 1.45;
}

a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 2px;
}

a:hover {
    text-decoration-color: var(--signal);
}

h1, h2, h3 {
    margin: 0 0 0.6em;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

h1 {
    font-size: 24px;
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--border-strong);
}

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

code {
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ---------- Connexion ---------- */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
}

.login-box {
    width: 340px;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    padding: 32px;
}

.login-box h1 {
    font-size: 16px;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
}

.login-box label {
    display: block;
    margin: 12px 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.login-box button {
    width: 100%;
    margin-top: 18px;
}

/* ---------- Formulaires ---------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="file"],
input[type="url"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 7px 9px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    background: var(--surface);
    color: var(--text);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--signal);
    outline-offset: -1px;
}

label {
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------- Boutons ---------- */

button,
.btn {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 700;
    border: 2px solid var(--primary);
    border-radius: 0;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

button:hover, .btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    text-decoration: none;
}

button:disabled, .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

.btn-secondary:hover {
    background: var(--text);
    color: #fff;
    border-color: var(--text);
}

.btn-danger {
    background: var(--surface);
    color: var(--danger);
    border-color: var(--danger);
}

.btn-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn-small {
    padding: 3px 9px;
    font-size: 12px;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    display: inline-block;
    padding: 4px 9px;
    margin-right: 8px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 700;
    border: 2px solid var(--primary);
    border-radius: 0;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* ---------- Alertes ---------- */

.alert {
    padding: 8px 12px;
    border-radius: 0;
    border-left: 4px solid currentColor;
    font-size: 13px;
    margin-bottom: 12px;
}

.alert-error {
    background: var(--danger-soft);
    color: var(--danger);
}

.alert-success {
    background: var(--success-soft);
    color: var(--success);
}

.alert-info {
    background: var(--neutral-soft);
    color: var(--text);
}

/* ---------- Structure applicative ---------- */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: var(--surface);
    border-bottom: 2px solid var(--border-strong);
}

.app-header .brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
}

.app-header nav {
    display: flex;
    gap: 24px;
    align-items: center;
}

.app-header nav a {
    color: var(--text);
    opacity: 0.6;
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 4px;
    border-bottom: 3px solid transparent;
    text-decoration: none;
}

.app-header nav a:hover {
    opacity: 1;
}

.app-header nav a.active {
    opacity: 1;
    border-bottom-color: var(--signal);
}

.app-header .session {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-main {
    padding: 20px 24px 32px;
    width: 100%;
}

/* ---------- Tableaux ---------- */

table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: none;
    border-top: 2px solid var(--border-strong);
}

th, td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

th {
    background: var(--th-bg);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--th-color);
    border-bottom: 1.5px solid var(--border-strong);
    position: sticky;
    top: 0;
    z-index: 4;
}

th a {
    color: inherit;
}

.th-sortable {
    position: relative;
    overflow: visible;
}

.th-label {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    margin-right: 4px;
}

.sort-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0 2px;
    font-size: 11px;
    cursor: pointer;
}

.sort-toggle:hover {
    color: var(--text);
    background: none;
}

.sort-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.sort-menu[hidden] {
    display: none;
}

.sort-menu a {
    padding: 7px 12px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
}

.sort-menu a:hover {
    background: var(--text);
    color: #fff;
}

tbody tr:hover {
    background: var(--row-hover);
}

td.col-desc, td.wrap, td.truncate {
    white-space: normal;
    /* Un JSON brut (ex: colonne Résultat de l'historique des tâches) n'a
       aucun espace où couper — sans ça, un seul "mot" ininterrompu force la
       cellule (et donc toute la table, tout le tableau parent...) plus
       large que la page, créant un défilement horizontal sur la page
       entière plutôt que dans le tableau. */
    overflow-wrap: anywhere;
}

/* Colonne Résultat de l'historique des tâches : repliée sur une seule ligne
   par défaut, avec un bouton "+" pour déplier le contenu complet — voir
   company.php. overflow:visible ici, sinon le overflow:hidden générique
   des <td> couperait le contenu déplié à une seule ligne. */
.job-result-cell {
    white-space: normal;
    overflow: visible;
}

.job-result-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.job-result-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-result-cell.expanded .job-result-text {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    overflow-wrap: anywhere;
}

/* Tableau "Utilisateurs Microsoft 365" (panneau "Gérer") — table-layout:auto
   pour que la colonne Compte (adresse email complète) se dimensionne à son
   contenu au lieu d'être tronquée. */
.office365-user-table {
    table-layout: auto;
    width: 100%;
}

.office365-user-table th,
.office365-user-table td {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    overflow-wrap: anywhere;
}

.job-result-toggle {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.job-result-toggle:hover {
    background: var(--text);
    color: #fff;
}

/* Ligne de détail Office 365 dépliée sous un domaine (company.php / deal.php). */
.office365-details-row td {
    background: var(--neutral-soft);
    padding: 14px 16px;
}

/* ---------- Logo / avatar ---------- */

.logo-thumb {
    width: 32px;
    height: 32px;
    border-radius: 0;
    object-fit: contain;
    background: var(--surface);
    border: 1px solid var(--border);
    display: block;
}

.logo-initials {
    width: 32px;
    height: 32px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

/* ---------- Badges de statut ---------- */

.badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 0;
    border: 1.5px solid currentColor;
    background: var(--surface);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--text);
}

.badge-vierge { color: var(--text-muted); }
.badge-en_attente { color: var(--text-muted); }
.badge-en_cours { color: var(--warning); }
.badge-ok, .badge-termine { color: var(--success); }
.badge-echec { color: var(--danger); }

/* ---------- Badges — module Deals ---------- */

.badge-signe_non_clos { color: var(--warning); }
.badge-clos { color: var(--success); }
.badge-inconnu { color: var(--text-muted); }

/* Le verdict fort est l'information la plus importante du CRM : seul badge
   plein, dans la couleur de signal. */
.badge-verdict-forte { background: var(--signal); border-color: var(--signal); color: #fff; }
.badge-verdict-siege { color: var(--warning); }
.badge-verdict-peu-probable { color: var(--success); }
.badge-verdict-na, .badge-verdict-indetermine, .badge-verdict-autre { color: var(--text-muted); }

/* ---------- Filtres / toolbar ---------- */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 14px;
    padding: 0 0 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
}

.toolbar .field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.toolbar .field label {
    font-size: 11px;
    font-weight: 600;
}

.toolbar input, .toolbar select {
    min-width: 140px;
}

.toolbar .field-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.toolbar .field-checkbox input[type="checkbox"] {
    min-width: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--text);
}

.toolbar .field-checkbox label {
    font-size: 13px;
    white-space: nowrap;
}

.toolbar #categorie {
    min-width: 90px;
    max-width: 110px;
}

.toolbar #per_page {
    min-width: 70px;
    max-width: 80px;
}

input[type="checkbox"] {
    accent-color: var(--text);
}

/* ---------- Barre d'actions groupées ---------- */

.bulk-bar {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--text);
    color: #fff;
    margin-bottom: 10px;
}

.bulk-bar.visible {
    display: flex;
}

.bulk-bar .count {
    font-weight: 700;
    margin-right: auto;
}

.bulk-bar .btn-secondary {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.bulk-bar .btn-secondary:hover {
    background: #fff;
    color: var(--text);
}

.bulk-bar .btn-danger {
    background: transparent;
    color: #fff;
    border-color: var(--signal);
}

.bulk-bar .btn-danger:hover {
    background: var(--signal);
    color: #fff;
}

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    font-size: 13px;
}

.pagination a, .pagination span {
    padding: 5px 10px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}

.pagination a:hover {
    background: var(--text);
    color: #fff;
}

.pagination .current {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
    font-weight: 700;
}

/* ---------- Fiche entreprise ---------- */

.company-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--surface);
    border-bottom: 3px solid var(--border-strong);
    padding: 0 0 16px;
    margin-bottom: 20px;
}

.company-header-identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.company-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.company-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.company-nav-indicator {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.company-nav-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.company-nav-arrow {
    font-size: 18px;
    line-height: 1;
    padding: 2px 10px;
}

.company-header .logo-thumb,
.company-header .logo-initials {
    width: 56px;
    height: 56px;
    font-size: 18px;
}

.company-header h1 {
    margin: 0 0 4px;
    font-size: 24px;
    border-bottom: none;
    padding-bottom: 0;
}

.company-header .links {
    display: flex;
    gap: 12px;
    font-size: 13px;
}

.blocks {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.block {
    background: var(--surface);
    border: none;
    border-top: 2px solid var(--border-strong);
    padding: 12px 0 0;
    width: 100%;
    min-width: 0;
}

.block h2 {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 12px;
}

.block.full-width {
    width: 100%;
}

/* ---------- Deux colonnes cible/acquéreur — module Deals ---------- */

.deal-blocks {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.deal-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 800px) {
    .deal-columns {
        grid-template-columns: 1fr;
    }
}

.company-link-search {
    display: block;
    width: 100%;
    margin-top: 4px;
}

.company-link-results {
    position: relative;
    margin-top: 2px;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    max-height: 180px;
    overflow-y: auto;
}

.company-link-result {
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
}

.company-link-result:hover {
    background: var(--row-hover);
}

.kv {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 6px 10px;
    font-size: 13px;
}

.kv dt {
    color: var(--text-muted);
}

.kv dd {
    margin: 0;
}

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

.empty-state {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    padding: 8px 0;
}

.block-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Import ---------- */

.progress-bar {
    width: 100%;
    height: 18px;
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--text);
    width: 0%;
    transition: width 0.2s ease;
}

progress {
    accent-color: var(--text);
}

.mapping-table th, .mapping-table td {
    white-space: normal;
}

.person-row {
    cursor: pointer;
}

.person-detail-row[hidden] {
    display: none;
}

.person-detail-row td {
    background: var(--neutral-soft);
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
}

.person-detail {
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.person-detail strong {
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 6px;
}

/* La colonne se dimensionne sur le contenu des cellules, pas sur le titre :
   le th ne "pousse" pas la largeur (max-width:0 + ellipsis), l'infobulle
   (title=) donne le nom complet de la colonne au survol. */
/* Tableau de l'organigramme : toute la largeur du bloc (donc de la page),
   colonnes dimensionnées sur leur contenu. Un contenu plus large que la
   page défile dans le conteneur du tableau, jamais la page entière. */
.people-table {
    width: 100%;
    table-layout: auto;
}

.people-table th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.people-table td {
    max-width: 320px;
}

.editable-cell {
    cursor: text;
}

/* table-layout:fixed fige la largeur des colonnes sur la 1ère ligne — la
   cellule email repasse en retour à la ligne normal pour ne jamais couper
   un badge de vérification placé après une adresse longue. */
.email-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
}

.cell-edit-input {
    width: 100%;
    min-width: 60px;
    padding: 2px 4px;
    font-size: inherit;
    font-family: inherit;
    border: 1.5px solid var(--signal);
}

.btn-cible {
    background: var(--surface);
    border-color: var(--success);
    color: var(--success);
}

.btn-cible:hover {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.btn-prez {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-prez:hover {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
}

.person-row-cible td {
    background: var(--success-soft);
}

.person-row-prez td {
    background: var(--neutral-soft);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
}

.status-badge:hover {
    opacity: 0.8;
}

.status-badge-cible {
    background: var(--success);
}

.status-badge-prez {
    background: var(--text);
}

.summary-stats {
    display: flex;
    gap: 16px;
    margin: 16px 0;
}

.summary-stats .stat {
    flex: 1;
    background: var(--surface);
    border-top: 2px solid var(--border-strong);
    padding: 14px 0;
    text-align: left;
}

.summary-stats .stat .value {
    font-size: 28px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.summary-stats .stat .label {
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------- Page profil ---------- */

.profile-back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.profile-page {
    max-width: 980px;
    margin: 0 auto;
}

.profile-header-card {
    background: var(--surface);
    border: 2px solid var(--border-strong);
    overflow: hidden;
    margin-bottom: 16px;
}

.profile-banner {
    height: 72px;
    background: var(--text);
}

.profile-header-body {
    display: flex;
    gap: 18px;
    padding: 0 24px 20px;
}

.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--surface);
    margin-top: -48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    font-weight: 800;
}

.profile-identity {
    padding-top: 12px;
    min-width: 0;
}

.profile-identity h1 {
    margin: 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: none;
    padding-bottom: 0;
}

.profile-headline {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 15px;
}

.profile-meta {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    gap: 12px;
}

.profile-actions {
    margin-top: 10px;
}

.profile-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 800px) {
    .profile-columns {
        grid-template-columns: 1fr;
    }
}

.profile-main, .profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-section {
    background: var(--surface);
    border: none;
    border-top: 2px solid var(--border-strong);
    padding: 12px 0 0;
}

.profile-section h2 {
    margin: 0 0 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.profile-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    white-space: normal;
}

.profile-exp-item, .profile-edu-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.profile-exp-item:first-of-type, .profile-edu-item:first-of-type {
    border-top: none;
    padding-top: 0;
}

.profile-mention-item {
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.profile-mention-item:first-of-type {
    border-top: none;
    padding-top: 0;
}

.profile-mention-link {
    font-size: 12px;
    word-break: break-all;
}

.profile-exp-body {
    min-width: 0;
    flex: 1;
}

.profile-exp-title {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-exp-company {
    font-size: 13px;
    color: var(--text-muted);
}

.profile-exp-dates {
    font-size: 12px;
    margin: 2px 0 6px;
}

.profile-company-card {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-chip {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    padding: 3px 10px;
    font-size: 12px;
}

.profile-chip-ok {
    border-color: var(--success);
    color: var(--success);
}

.profile-chip-warn {
    border-color: var(--danger);
    color: var(--danger);
}

mark[class^="stabilo-"] {
    color: #2d2b36;
    padding: 0 1px;
}

mark.stabilo-jaune {
    background: #fff59d;
}

mark.stabilo-orange {
    background: #ffcc80;
}

mark.stabilo-vert {
    background: #a5d6a7;
}

.hl-context-menu-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    vertical-align: middle;
}

.hl-context-menu {
    position: absolute;
    z-index: 1000;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    padding: 4px;
    display: flex;
    flex-direction: column;
    min-width: 210px;
}

.hl-context-menu button {
    background: none;
    border: none;
    text-align: left;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

.hl-context-menu button:hover {
    background: var(--text);
    color: #fff;
}

.profile-capital-chain {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--neutral-soft);
}

.profile-capital-chain h4 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
}

.profile-chain-list {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.7;
}

.profile-chain-link {
    margin-bottom: 8px;
}

.profile-chain-link:last-child {
    margin-bottom: 0;
}

.profile-chain-dirigeant {
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------- Portrait robot IA ---------- */

.profile-portrait-axis {
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.profile-portrait-axis:first-of-type {
    border-top: none;
    padding-top: 0;
}

.profile-portrait-axis h3 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-portrait-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.profile-portrait-points {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.profile-portrait-points li {
    margin-bottom: 4px;
}

.profile-portrait-points li:last-child {
    margin-bottom: 0;
}

.profile-portrait-sources {
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
}

.profile-portrait-sources-detail {
    margin-top: 12px;
    font-size: 13px;
}

.profile-portrait-sources-detail summary {
    cursor: pointer;
    color: var(--text-muted);
}

.profile-portrait-sources-detail ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

/* ---------- Ajout manuel d'une personne ---------- */

.add-person-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 10px;
    padding: 12px;
    background: var(--neutral-soft);
}

/* Sans ça, [hidden] (style navigateur) perd face à display:flex ci-dessus
   (styles d'auteur toujours prioritaires à spécificité égale). */
.add-person-form[hidden] {
    display: none;
}

.add-person-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.add-person-form input {
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--border-strong);
    min-width: 160px;
}

.enrich-pending-badge {
    margin-left: 4px;
    font-size: 13px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    line-height: 1;
}

/* ---------- Questions sur le portrait robot ---------- */

.profile-portrait-questions {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.profile-portrait-questions h3 {
    margin: 0 0 10px;
    font-size: 14px;
}

.profile-question-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.profile-question-form textarea {
    flex: 1;
    min-height: 72px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.4;
    white-space: pre-wrap;
    resize: vertical;
}

.profile-question-item {
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.profile-question-item:first-of-type {
    border-top: none;
}

.profile-question-q {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

/* ---------- Favoris ---------- */

.favorite-star {
    color: var(--signal);
    font-size: 15px;
    flex-shrink: 0;
    /* Sur certains systèmes, ★ (U+2605) se rend comme un glyphe emoji en
       couleur qui ignore `color` — U+FE0E dans le HTML force déjà la
       présentation texte ; renfort pour les navigateurs qui le supportent. */
    font-variant-emoji: text;
}

.favorite-star-lg {
    font-size: 28px;
}

/* ---------- Onglets page profil ---------- */

.profile-tabs {
    max-width: 980px;
    margin: 0 auto 16px;
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-strong);
}

.profile-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text);
    opacity: 0.6;
    font-weight: 700;
    padding: 10px 16px;
    margin-bottom: -2px;
}

.profile-tab-btn:hover {
    background: transparent;
    opacity: 1;
}

.profile-tab-btn.active {
    opacity: 1;
    border-bottom-color: var(--signal);
}

/* ---------- Mouvement ---------- */

@media (prefers-reduced-motion: reduce) {
    .progress-bar-fill {
        transition: none;
    }
}

/* Compteur de résultats dans un titre de page (« 1 248 résultats ») : reste
   en bas de casse, le titre seul porte les capitales. */
h1 .muted {
    text-transform: none;
    letter-spacing: 0;
}

/* ---------- Parties d'un deal importé (Mergr) ---------- */

.deal-parties-title {
    margin: 14px 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.deal-parties {
    list-style: none;
    margin: 0;
    padding: 0;
}

.deal-parties li {
    padding: 8px 0;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.deal-party-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.deal-party-details {
    margin-top: 2px;
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* ---------- Cellules URL éditables au double-clic (fiche deal) ---------- */

.deal-editable-cell {
    cursor: text;
}

.deal-editable-cell .editable-value {
    border-bottom: 1px dashed transparent;
}

.deal-editable-cell:hover .editable-value {
    border-bottom-color: var(--text-muted);
}

.deal-editable-cell .editable-open {
    text-decoration: none;
    font-weight: 700;
    padding: 0 3px;
    cursor: pointer;
}

.deal-editable-cell.editable-saved .editable-value {
    background: var(--success-soft);
}

.editable-error {
    margin-top: 2px;
    font-size: 12px;
    color: var(--danger);
}

/* Description Mergr de la cible (fiche deal) : bloc pleine largeur, ligne
   de lecture bornée pour rester lisible sur un grand écran. */
.deal-description {
    max-width: 90ch;
}

/* ---------- Enquête approfondie (fiche deal) ---------- */

.inv-table {
    width: 100%;
    table-layout: auto;
    font-size: 13px;
}

.inv-table th,
.inv-table td {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.inv-table td .badge {
    white-space: nowrap;
}

/* Personnes impliquées : largeurs fixées par le colgroup (Nom élargi,
   Situation actuelle réduite — demande du 2026-09-07). */
.inv-people-table {
    table-layout: fixed;
}

/* ---------- Pagination de l'organigramme (10 profils par page, côté client) ---------- */

.people-table tr.page-hidden {
    display: none;
}

.people-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.people-pagination .people-pagination-range {
    margin-right: auto;
}

/* ---------- Lignes Cible / Prez de l'organigramme : gras + flèche ---------- */

.person-row-cible td,
.person-row-prez td {
    font-weight: 700;
}

.status-arrow {
    display: inline-block;
    margin-left: 3px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.status-arrow-cible {
    color: var(--success);
}

.status-arrow-prez {
    color: var(--text);
}

/* ---------- Barre de progression de l'enquête ---------- */

.inv-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 720px;
}

.inv-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.inv-progress progress {
    width: 100%;
    height: 14px;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
}

.inv-progress progress::-webkit-progress-bar {
    background: var(--surface);
}

.inv-progress progress::-webkit-progress-value {
    background: var(--text);
    transition: width 0.3s ease;
}

.inv-progress progress::-moz-progress-bar {
    background: var(--text);
}

.inv-progress-text {
    margin: 0;
    font-size: 12px;
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .inv-progress progress::-webkit-progress-value {
        transition: none;
    }
}

/* Barre de progression de l'enquête : remplissage vert, bordure noire. */
.inv-progress progress::-webkit-progress-value {
    background: var(--success);
}

.inv-progress progress::-moz-progress-bar {
    background: var(--success);
}

/* Liste des deals : case de sélection et croix côte à côte dans la dernière colonne. */
.deal-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.deal-row-actions form {
    margin: 0;
}

/* Tableau des noms de domaine (fiche entreprise et fiche deal) : toute la
   largeur, colonnes dimensionnées sur leur contenu. */
.domain-table {
    width: 100%;
    table-layout: auto;
}

.domain-table th,
.domain-table td {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
}

/* ---------- Section Email d'un deal (brouillon d'approche) ---------- */
.deal-email-draft {
    width: 100%;
}

.deal-email-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin: 10px 0 4px;
}

.deal-email-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.deal-email-objet {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.deal-email-corps {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    padding: 10px;
}

.deal-email-copied {
    font-size: 12px;
    color: var(--success);
}

.deal-email-revise {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1.5px solid var(--border);
}

.deal-email-revise textarea {
    width: 100%;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    padding: 8px;
}