* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #1a3a5c;
    --primary-light: #2c5f8a;
    --accent: #e8a838;
    --bg: #f4f6f8;
    --card: #ffffff;
    --text: #2c3e50;
    --text-light: #5f6b6d;   /* était #7f8c8d: 3,2:1 sur le fond, sous le seuil de lisibilité — 5,1:1 désormais */
    --border: #dce1e6;
    --success: #27ae60;
    --danger: #e74c3c;
    --section-a: #1a5276;
    --section-b: #6c3483;
    --section-c: #117a65;
    --section-d: #b9770e;
    --section-e: #2e4057;

    /* Tâche AI-1 (refonte des écrans, maquettes validées du 24/09/2026) : jetons de couleur de la
       nouvelle charte. Les variables ci-dessus restent en place — les écrans non encore refaits
       (PDA, HUSB, Dossiers, Assistant, Information, Admin) ne changent pas dans cette tranche. */
    --tmc-navy: #17324d;
    --tmc-green: #1e7a46;
    --tmc-green-clair: #5ec27f;
    --tmc-ok: #1e7a46;
    --tmc-todo: #8a5a00;
    --tmc-block: #b42318;
    --tmc-info: #2457a8;
    --tmc-muted: #5b6773;
    --tmc-line: #d9dfe6;
    --tmc-bord-bouton: #c5ced8;
    --tmc-bg: #eef1f4;
    --tmc-encre: #1b2430;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

/* ===== Tâche AI-1 : barre d'application ===== */
.tmc-bar {
    height: 56px;
    box-sizing: border-box;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--tmc-navy);
    color: #fff;
    font-family: 'IBM Plex Sans', Arial, sans-serif;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.tmc-marque { font-weight: 700; font-size: 17px; letter-spacing: 0.5px; flex-shrink: 0; }
.tmc-bar-espace { flex-grow: 1; }
.tmc-bar .mode-selector {
    display: flex;
    gap: 22px;
    margin: 0;
    border: 0;
    border-radius: 0;
    max-width: none;
    overflow: visible;
    background: transparent;
    align-self: stretch;
    align-items: center;
}
.tmc-bar .mode-btn {
    flex: 0 0 auto;
    padding: 0 0 2px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #c9d6e3;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s;
}
.tmc-bar .mode-btn:hover:not(.active) { background: transparent; color: #fff; }
.tmc-bar .mode-btn.active {
    background: transparent;
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--tmc-green-clair);
}
.tmc-bar .mode-btn:focus-visible { outline: 2px solid var(--tmc-green-clair); outline-offset: 3px; }

.tmc-cloche {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 20px;
    border: 0;
    background: #23415f;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.tmc-cloche:hover { background: #2d5178; }
.tmc-cloche-compteur {
    position: absolute; top: 4px; right: 2px;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    background: #d93025; color: #fff;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px; box-sizing: border-box;
}
.tmc-utilisateur { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tmc-avatar {
    width: 32px; height: 32px; border-radius: 16px;
    background: var(--tmc-green-clair); color: #0f2a1a;
    font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.tmc-identite { line-height: 1.2; }
.tmc-nom { font-weight: 600; }
.tmc-role { font-size: 12px; color: #c9d6e3; }

/* Panneau de la cloche — « À traiter par vous » (planche 3). */
.tmc-panneau {
    position: absolute; top: 60px; right: 28px; width: 420px; z-index: 900;
    background: #fff; color: var(--tmc-encre);
    border: 1px solid var(--tmc-bord-bouton); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(23,50,77,0.18);
    font-family: 'IBM Plex Sans', Arial, sans-serif; font-size: 14px;
    max-height: 70vh; overflow: auto;
}
.tmc-panneau-tete { padding: 14px 18px; border-bottom: 1px solid #e4e9ee; display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.tmc-panneau-tete span { font-size: 12px; color: var(--tmc-muted); font-weight: 400; }
.tmc-panneau-ligne {
    width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #eef1f4;
    padding: 14px 18px; display: flex; gap: 12px; cursor: pointer;
    font-family: inherit; font-size: 14px; color: inherit;
}
.tmc-panneau-ligne:hover { background: #f6f8fa; }
.tmc-panneau-puce { width: 10px; height: 10px; border-radius: 5px; background: #d93025; margin-top: 6px; flex-shrink: 0; }
.tmc-panneau-corps { line-height: 1.35; }
.tmc-panneau-corps small { display: block; font-size: 12px; color: var(--tmc-muted); }
/* Tache F1 (D46) : mention « remplace une FDA deja envoyee » sur une entree de la file « A valider ». */
.tmc-panneau-mention { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: #fff3cd; color: #7a4a00; font-size: 11px; font-weight: 600; }
.tmc-panneau-vide { padding: 18px; color: var(--tmc-muted); }

.header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 16px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.header-left {
    flex-shrink: 0;
}

.header-logo {
    height: 60px;
    width: auto;
    border-radius: 4px;
    background: white;
    padding: 4px 8px;
}

.header-center {
    flex: 1;
}

.header h1 {
    font-size: 1.5rem;
    font-weight: 600;
}

.header .subtitle {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 2px;
}

.header .company {
    text-align: right;
    font-size: 0.8rem;
    opacity: 0.9;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Tâche AI-1 : le bandeau ci-dessus sert d'en-tête au document IMPRIMÉ (@media print plus bas) —
   il reste donc dans le DOM, mais l'écran porte désormais la barre d'application .tmc-bar.
   La règle vient APRÈS `.header { display: flex }` : c'est elle qui l'emporte. */
@media screen { .header { display: none; } }

.container {
    max-width: 100%;
    margin: 0;
    padding: 10px 15px;
    display: grid;
    grid-template-columns: 550px 1fr;
    gap: 20px;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.main-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    overflow: visible;
}

.card {
    background: var(--card);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    overflow: hidden;
}

.card-header {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-header.vessel { background: var(--primary); }
.card-header.operations { background: var(--primary-light); }
.card-header.cargo { background: var(--section-c); }
.card-header.crew { background: var(--section-b); }
.card-header.section-a { background: var(--section-a); }
.card-header.section-b { background: var(--section-b); }
.card-header.section-c { background: var(--section-c); }
.card-header.section-d { background: var(--section-d); }
.card-header.section-e { background: var(--section-e); }
.card-header.total { background: var(--success); }

.card-body {
    padding: 16px;
}

.remittance-body {
    font-size: 0.85rem;
    line-height: 1.8;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.form-row.full {
    grid-template-columns: 1fr;
}

.input-with-unit {
    display: flex;
    gap: 0;
}
.input-with-unit input {
    flex: 1;
    border-radius: 5px 0 0 5px;
    border-right: none;
}
.input-with-unit select {
    width: 90px;
    border-radius: 0 5px 5px 0;
    border-left: 1px solid var(--border);
    background: #f0f2f5;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-group input,
.form-group select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 0.9rem;
    color: var(--text);
    background: #fafbfc;
    transition: border-color 0.2s;
    min-width: 0;
    max-width: 100%;
}

/* Repère de focus visible: l'ancien « outline: none » ne laissait qu'un léger changement de
   bordure — au clavier on ne savait plus quel champ on remplissait. */
.form-group input:focus,
.form-group select:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 1px;
    border-color: var(--primary-light);
    background: white;
}
button:focus-visible,
.mode-btn:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Tâche AI-2, ronde 1 : l'anneau de focus du bouton vert de l'en-tête PDA était blanc,
   donc invisible sur l'en-tête blanc (contraste 1,00). Bleu marine de la charte sur
   blanc : contraste 12,6. Règle au niveau supérieur, comme sa voisine ci-dessus.
   FUS1 : même anneau pour les deux boutons de la fenêtre de confirmation Export/Import (RQ2). */
#pdaCalculer:focus-visible,
#pdaAnalyserSof:focus-visible,
#opConfirmOui:focus-visible,
#opConfirmNon:focus-visible {
    outline: 2px solid var(--tmc-navy);
    outline-offset: 2px;
}

.form-group input[readonly] {
    background: #eef2f7;
    font-weight: 600;
    color: var(--primary);
}

.computed-value {
    background: #eef2f7;
    border-radius: 5px;
    padding: 8px 10px;
    font-weight: 600;
    color: var(--primary);
    font-size: 0.9rem;
    border: 1px solid var(--border);
}

.result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    table-layout: fixed;
}

/* Colonne 1 = case garder/retirer + numéro + bouton ½. À 5 % elle débordait sur la description
   (« ½ilotage », « ½ug fees »): 9 % et un padding réduit la contiennent jusqu'à ~650 px de tableau. */
.result-table th:nth-child(1) { width: 9%; }
.result-table th:nth-child(2) { width: 34%; }
.result-table th:nth-child(3) { width: 25%; }
.result-table th:nth-child(4) { width: 16%; }
.result-table th:nth-child(5) { width: 16%; }
.result-table td.excl-num-cell { padding-left: 4px; padding-right: 4px; }

.result-table th {
    text-align: left;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-light);
    border-bottom: 2px solid var(--border);
}

.result-table th:nth-child(n+3) {
    text-align: right;
}

.result-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #f0f2f4;
}

.result-table td:nth-child(n+3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.result-table tr:last-child td {
    border-bottom: none;
}

.result-table .subtotal td {
    font-weight: 700;
    border-top: 2px solid var(--border);
    padding-top: 8px;
}

.result-table .vat td {
    font-style: italic;
    color: var(--text-light);
}

.result-table .detail {
    color: var(--text-light);
    font-size: 0.78rem;
}

/* Mode selector */
.mode-selector {
    display: flex;
    gap: 0;
    margin: 0 15px 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--primary);
    max-width: 820px;
}
.mode-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: white;
    color: var(--primary);
    transition: all 0.2s;
    white-space: nowrap;
}
.mode-btn.active {
    background: var(--primary);
    color: white;
}
.mode-btn:hover:not(.active) {
    background: #e8eef3;
}

/* CTM title bars */
.ctm-title {
    font-size: 0.9rem;
    text-align: center;
    letter-spacing: 0.5px;
}

/* CTM 3-column data table */
.ctm-data-table {
    table-layout: fixed;
}
.ctm-data-table th:nth-child(1),
.ctm-data-table td:nth-child(1) {
    width: 50%;
    text-align: left;
}
.ctm-data-table th:nth-child(2),
.ctm-data-table td:nth-child(2),
.ctm-data-table th:nth-child(3),
.ctm-data-table td:nth-child(3) {
    width: 25%;
    text-align: right;
}
.ctm-data-table td:first-child {
    text-align: left !important;
    color: inherit !important;
    font-size: inherit !important;
}

/* CTM ROE banner */
.ctm-roe {
    text-align: center;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 6px 10px;
    color: var(--text-light);
    border-bottom: 1px solid var(--border);
}

.grand-total {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px;
}

.total-box {
    text-align: center;
    padding: 16px;
    border-radius: 8px;
}

.total-box.eur {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
}

.total-box.xaf {
    background: linear-gradient(135deg, var(--success) 0%, #2ecc71 100%);
    color: white;
}

.total-box .label {
    font-size: 0.8rem;
    opacity: 0.85;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.total-box .amount {
    font-size: 1.6rem;
    font-weight: 700;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover { background: var(--primary-light); }

.btn-accent {
    background: var(--accent);
    color: var(--primary);
}
.btn-accent:hover { background: #d4962e; }

.btn-success {
    background: var(--success);
    color: white;
}
.btn-success:hover { background: #219a52; }

.btn-danger {
    background: var(--danger);
    color: white;
}
.btn-danger:hover { background: #c0392b; }

.actions-bar {
    display: flex;
    gap: 10px;
    padding: 16px;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.separator {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

.info-badge {
    display: inline-block;
    background: #eef2f7;
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.volume-display {
    background: linear-gradient(135deg, #eef2f7, #dce5ef);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    margin-top: 8px;
}

.volume-display .vol-label {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
}

.volume-display .vol-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
}

.volume-display .vol-unit {
    font-size: 0.8rem;
    color: var(--text-light);
}
/* Précision sous le libellé GT (était un style en ligne ; même rendu hors de l'écran PDA). */
.gt-aide { font-weight: 400; font-size: 0.7rem; color: #e67e22; }

.tug-info {
    background: #fff8e7;
    border: 1px solid #f0d78c;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 0.8rem;
    color: #8a6d0b;
    margin-top: 6px;
}

.loading-suggestion {
    background: #e8f4fd;
    border: 1px solid #a3d4f7;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 0.8rem;
    color: #1a5276;
    margin-top: -4px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-suggestion {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}
.btn-suggestion:hover { background: var(--primary-light); }

/* Multi-Cargo Mix */
.btn-multi-cargo {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn-multi-cargo:hover { background: var(--primary-light); }
.btn-multi-cargo.active { background: #e74c3c; }
.multi-cargo-box {
    background: #f0f4ff;
    border: 2px solid var(--primary);
    border-radius: 8px;
    padding: 10px;
    margin: 8px 0;
}
.multi-cargo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
}
.btn-add-cargo {
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-add-cargo:hover { background: #219a52; }
.multi-cargo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.multi-cargo-table th {
    background: var(--primary);
    color: white;
    padding: 5px 8px;
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
}
.multi-cargo-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #ddd;
}
.multi-cargo-table input, .multi-cargo-table select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.8rem;
    box-sizing: border-box;
}
.multi-cargo-table input:focus, .multi-cargo-table select:focus {
    border-color: var(--primary);
    outline: none;
}
.multi-cargo-table input[readonly] {
    background: #f5f5f5;
    border-color: transparent;
    font-weight: 600;
}
.multi-cargo-total td {
    background: #e8eef8;
    border-bottom: none;
    font-size: 0.82rem;
}
.btn-remove-cargo {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
}
.btn-remove-cargo:hover { color: #c0392b; }
.btn-apply-mix {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-apply-mix:hover { background: var(--primary-light); }

.verify-badge {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.verify-ok { background: #27ae60; color: #fff; }
.verify-warn { background: #f39c12; color: #fff; cursor: pointer; animation: pulse-warn 2s infinite; }
.verify-fail { background: #e74c3c; color: #fff; cursor: pointer; animation: pulse-warn 1.5s infinite; }
@keyframes pulse-warn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.form-group { position: relative; }
.vessel-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #a3d4f7;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}
.vessel-suggestions.active { display: block; }
.vessel-suggestion-item {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid #eee;
}
.vessel-suggestion-item:hover { background: #e8f4fd; }
.vessel-suggestion-item strong { color: var(--primary); }
.vessel-suggestion-item small { color: #888; margin-left: 6px; }

.congo-terminal-section { margin-top: 12px; }
.congo-terminal-section h4 { font-size: 0.9rem; color: var(--primary); margin-bottom: 8px; border-bottom: 2px solid var(--section-e); padding-bottom: 4px; }
.ct-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ct-table th { background: #f0f3f6; padding: 5px 6px; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: #555; border-bottom: 2px solid #ddd; }
.ct-table td { padding: 3px 4px; border-bottom: 1px solid #eee; }
.ct-table input { width: 100%; border: 1px solid #ddd; border-radius: 3px; padding: 4px 6px; font-size: 0.85rem; }
.ct-table input[readonly] { background: #f8f8f8; font-weight: 600; }
.ct-table input[type="number"] { text-align: right; }
.ct-table .ct-remove { background: #e74c3c; color: white; border: none; border-radius: 3px; cursor: pointer; padding: 2px 6px; font-size: 0.75rem; }
.btn-add-row { background: var(--section-e); color: white; border: none; border-radius: 4px; padding: 5px 12px; font-size: 0.8rem; cursor: pointer; margin-top: 6px; }
.btn-add-row:hover { opacity: 0.85; }

.date-tba {
    display: flex;
    align-items: center;
    gap: 6px;
}
.date-tba input[type="date"] { flex: 1; }
.date-tba input[type="time"] { flex: 0 0 92px; }
.tba-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
}
.tba-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); }

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.checkbox-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.checkbox-group label {
    font-size: 0.85rem;
    cursor: pointer;
}

.pda-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    background: #f0f4f8;
    border-bottom: 2px solid var(--primary);
}
.pda-info-table td {
    padding: 4px 8px;
    vertical-align: top;
    border-bottom: 1px solid #d2dae4;
    color: #1a1a1a;
}
.pda-info-table .il {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    width: 1%;
    background: #e4ecf4;
    border-right: 1px solid #d2dae4;
}

/* ===== DOSSIERS ===== */
.dossiers-summary {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.summary-item {
    flex: 1;
    min-width: 100px;
    background: var(--card);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.summary-item.total {
    background: var(--primary);
    color: white;
}
.summary-num {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}
.summary-label {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
}
.summary-item.total .summary-label { color: rgba(255,255,255,0.7); }

.dossiers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.dossiers-table th {
    background: #f8f9fa;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--text-light);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.dossiers-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.soa-col-opt { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; cursor: pointer; font-weight: normal; }
.soa-col-opt input { width: 15px; height: 15px; accent-color: #16a085; }
.dossiers-table th.th-sort { cursor: pointer; user-select: none; }
.dossiers-table th.th-sort:hover { background: #eef2f7; color: var(--primary, #1a5276); }
.dossiers-table th.th-sort .sort-arrow { margin-left: 4px; font-size: 0.68rem; color: #1a5276; }
.dossier-row { cursor: pointer; transition: background 0.15s; }
.dossier-row:hover { background: #f0f5ff; }
.td-sh { font-weight: 700; color: var(--primary); white-space: nowrap; }
.td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdf-link-btn { display: inline-block; background: #e74c3c; color: white !important; text-decoration: none; font-size: 0.65rem; font-weight: 600; padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle; transition: background 0.15s; }
.pdf-link-btn:hover { background: #c0392b; }
.td-remaining { color: var(--danger); font-weight: 600; }
.td-credit { color: var(--success); font-weight: 600; }
.td-date { text-align: center; font-size: 0.8rem; white-space: nowrap; }
.td-pct { text-align: center; font-weight: 600; font-size: 0.85rem; }
.td-days { text-align: center; color: var(--text-light); font-size: 0.8rem; }

.tab-btn { padding: 10px 20px; border: none; background: transparent; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: #7f8c8d; border-bottom: 3px solid transparent; transition: all 0.2s; }
.tab-btn:hover { color: #2c3e50; background: #eef1f4; }
/* Tâche C1 (25/09/2026) : navy (charte AI-1), au lieu du violet d'origine — seule couleur retouchée
   dans cette règle générique, réutilisée telle quelle par switchDossierTab() (dossiers.js). */
.tab-btn.tab-active { color: var(--tmc-navy); border-bottom-color: var(--tmc-navy); }
.aging-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 700; }
.aging-ok { background: #d5f5e3; color: #1e8449; }
.aging-30 { background: #fef9e7; color: #b7950b; }
.aging-60 { background: #fdebd0; color: #ca6f1e; }
.aging-90 { background: #fadbd8; color: #c0392b; }
.client-edit-btn { background: none; border: none; cursor: pointer; font-size: 0.8rem; color: #8e44ad; margin-left: 6px; vertical-align: middle; }
.client-edit-btn:hover { color: #6c3483; }

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* B-fixes, point 5 (27/09/2026) : à 14 px du haut, le message recouvrait la barre d'onglets (.tmc-bar, 56 px) pendant 4 s
   et avalait les clics (« Paiements & SOA », « Admin »). Placé sous la barre, et transparent aux clics. */
.dossier-notification {
    position: fixed;
    top: 64px;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    max-width: 640px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.dossier-notification.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.dossier-notification.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.dossier-notification.info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 720px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
}
.modal-header h3 { margin: 0; font-size: 1.1rem; color: var(--primary); }
.modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--text-light);
    line-height: 1;
}
.modal-close:hover { color: var(--danger); }
.modal-body { padding: 20px; }
/* FUS1 : fenêtre à la charte hors du module FDA (d'abord #opConfirmModal, la confirmation Export/Import
   de RQ2) — mêmes valeurs que les fenêtres FDA (planche 4, .fda-fenetre dans index.html), classe à part :
   le module FDA et ses contrôles lisent « .fda-fenetre présente » comme « une fenêtre FDA est ouverte ». */
.tmc-fenetre { font-family: 'IBM Plex Sans', Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--tmc-encre); }
.tmc-fenetre .modal-content { border-radius: 10px; box-shadow: 0 20px 60px rgba(23,50,77,0.35); }
.tmc-fenetre .modal-header { background: #fff; border-bottom: 1px solid #e4e9ee; border-radius: 10px 10px 0 0; padding: 20px 28px; }
.tmc-fenetre .modal-header h3 { font-size: 20px; font-weight: 700; color: var(--tmc-navy); }
.tmc-fenetre .modal-body { padding: 20px 28px; }
.tmc-fenetre .tmc-btn {
    height: 42px; padding: 0 18px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; background: #fff;
    color: var(--tmc-encre); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.tmc-fenetre .tmc-btn.btn-primary { background: var(--tmc-green); border-color: var(--tmc-green); color: #fff; font-weight: 600; }

.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.modal-info, .modal-finances {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 14px;
}
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.85rem;
}
.info-label { font-weight: 600; color: var(--text-light); margin-right: 10px; }

.finance-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid #eee;
}
.finance-row.highlight { background: #fff3cd; padding: 5px 8px; border-radius: 4px; margin: 2px -8px; }
.finance-row.total { font-weight: 700; font-size: 0.95rem; color: var(--primary); border-bottom: none; padding-top: 8px; }

.modal-section { margin-bottom: 16px; }
.modal-section h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.btn-sm { padding: 5px 12px; font-size: 0.78rem; border-radius: 4px; border: none; color: white; cursor: pointer; }
.btn-sm:hover { opacity: 0.85; }

.history-list { max-height: 200px; overflow-y: auto; }
.history-item {
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.82rem;
}
.history-date {
    color: var(--text-light);
    font-size: 0.75rem;
    margin-right: 8px;
}

@media print {
    @page { size: A4; margin: 6mm 8mm; }

    * { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; }

    body {
        background: white;
        font-size: 7pt;
        line-height: 1.2;
        color: #1a1a1a;
    }

    .sidebar, .actions-bar, .no-print, .loading-suggestion, #verifyBadge,
    #ctmResult, #ctmSection { display: none !important; }

    #maritimeInfo { break-inside: avoid; margin-bottom: 4pt; }
    #maritimeInfo .card-header { font-size: 7pt !important; padding: 3px 8px !important; }
    #maritimeInfo .card-body { padding: 2px 8px !important; }
    #maritimeContent { font-size: 6pt !important; gap: 2px !important; }
    #maritimeContent table { font-size: 5.5pt !important; }
    #maritimeContent th, #maritimeContent td { padding: 1px 3px !important; }

    .container {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 0;
        max-width: 100%;
    }

    .main-content { gap: 0; }

    /* --- HEADER --- */
    .header {
        background: white !important;
        color: #1a1a1a !important;
        padding: 12pt 0 14pt 0;
        box-shadow: none;
        border-bottom: 2pt solid #1a3a5c;
        margin-bottom: 14pt;
    }
    .header-logo {
        height: 68px;
        background: none;
        padding: 0;
    }
    .header-center { flex: 1; }
    .header h1 {
        font-size: 12pt;
        font-weight: 700;
        color: #1a3a5c;
        letter-spacing: 0.3pt;
    }
    .header .subtitle {
        font-size: 6.5pt;
        opacity: 1;
        color: #666;
    }
    .header .company {
        font-size: 7pt;
        opacity: 1;
        color: #333;
        line-height: 1.4;
        text-align: right;
    }

    /* --- CARDS --- */
    .card {
        box-shadow: none;
        border: none;
        border-radius: 0;
        margin-bottom: 6pt;
    }

    .card-header {
        padding: 3pt 8pt;
        font-size: 7pt;
        font-weight: 700;
        letter-spacing: 0.3pt;
        text-transform: uppercase;
        background: #1a3a5c !important;
        color: white !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .card-body {
        padding: 1pt 0;
    }

    /* --- PDA TITLE --- */
    #pdaTitle {
        font-size: 8.5pt !important;
        padding: 3pt 8pt;
        text-align: center;
        letter-spacing: 1pt;
        background: #1a3a5c !important;
    }

    /* --- PDA INFO TABLE --- */
    .pda-info-table {
        font-size: 7pt;
        background: #f0f4f8 !important;
        border: 0.5pt solid #c8d4e0;
        margin-bottom: 3pt;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .pda-info-table td {
        padding: 1.5pt 5pt;
        font-size: 7pt;
        color: #1a1a1a;
    }
    .pda-info-table .il {
        font-size: 5.5pt;
        font-weight: 700;
        color: #1a3a5c;
        background: #e4ecf4 !important;
        padding-right: 3pt;
    }

    /* --- TABLES --- */
    .result-table {
        font-size: 7pt;
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;
    }
    .result-table th:nth-child(1) { width: 5%; }
    .result-table th:nth-child(2) { width: 38%; }
    .result-table th:nth-child(3) { width: 25%; }
    .result-table th:nth-child(4) { width: 16%; }
    .result-table th:nth-child(5) { width: 16%; }
    .result-table th {
        padding: 2pt 5pt;
        font-size: 6.5pt;
        font-weight: 700;
        color: white;
        background: #1a3a5c;
        text-transform: uppercase;
        letter-spacing: 0.2pt;
        border: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .result-table th:first-child {
        text-align: center;
    }
    .result-table td {
        padding: 2pt 5pt;
        border-bottom: 0.3pt solid #ddd;
        font-size: 7.5pt;
        vertical-align: middle;
    }
    .result-table td:first-child {
        text-align: center;
        color: #999;
        font-size: 6pt;
    }
    .result-table td:nth-child(4),
    .result-table td:nth-child(5),
    .result-table th:nth-child(4),
    .result-table th:nth-child(5) {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    .result-table .detail {
        font-size: 5.5pt;
        color: #888;
    }
    .result-table .subtotal td {
        font-weight: 700;
        padding-top: 2pt;
        border-top: 1.2pt solid #1a3a5c;
        border-bottom: none;
        font-size: 7.5pt;
        color: #1a1a1a;
    }
    .result-table .vat td {
        font-style: italic;
        color: #999;
        font-size: 6pt;
        border-bottom: none;
    }
    .result-table tr:hover { background: none; }

    /* --- GRAND TOTAL --- */
    #grandTotal {
        margin-top: 10pt;
    }
    #grandTotalTitle {
        font-size: 8pt !important;
        text-align: center;
        letter-spacing: 0.5pt;
        padding: 3pt 8pt;
        background: #1a3a5c !important;
    }
    .grand-total {
        padding: 3pt 0;
        gap: 10pt;
    }
    .total-box {
        padding: 3pt 10pt;
        border-radius: 2pt;
        text-align: center;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .total-box.eur {
        background: #0d6b3d !important;
    }
    .total-box.xaf {
        background: #b8860b !important;
    }
    .total-box .label {
        font-size: 5pt;
        letter-spacing: 0.4pt;
        text-transform: uppercase;
        opacity: 0.9;
    }
    .total-box .amount {
        font-size: 9pt;
        font-weight: 700;
    }

    /* --- REMITTANCE --- */
    #remittance {
        margin-top: 2pt;
    }
    #remittance .card-header {
        font-size: 6pt;
        padding: 1.5pt 8pt;
    }
    #remittance .card-body {
        font-size: 6.5pt;
        line-height: 1.4;
        padding: 2pt 8pt;
    }
    #remittance .card-body p { margin-bottom: 0.5pt; }

    /* --- CTM SPECIFIC --- */
    .ctm-title {
        font-size: 7.5pt !important;
        padding: 3pt 8pt !important;
        letter-spacing: 0.5pt;
    }
    .ctm-roe {
        font-size: 9pt !important;
        font-weight: 700;
        text-align: center;
        padding: 4pt 0;
    }
    .ctm-data-table td:first-child {
        text-align: left !important;
        color: #1a1a1a !important;
        font-size: 7.5pt !important;
    }
    #ctmDeliverySummary {
        margin-top: 2pt;
    }
    #ctmDeliverySummary .card-body {
        padding: 3pt 8pt !important;
    }
    #ctmDeliverySummary table {
        font-size: 7.5pt !important;
    }
    #ctmDeliverySummary td {
        font-size: 7.5pt !important;
        padding: 2pt 0 !important;
    }
    #ctmDeliverySummary p {
        font-size: 7.5pt !important;
    }
    #ctmRemittance {
        margin-top: 6pt;
    }
    #ctmRemittance .card-body {
        padding: 2pt 8pt;
        font-size: 7pt;
    }
    #ctmBankDetails {
        margin-top: 8pt !important;
    }
    #ctmBankDetails .card-body {
        font-size: 7pt;
        line-height: 1.5;
        padding: 3pt 8pt;
    }
    #ctmBankDetails .card-body p { margin-bottom: 1pt; }
}

.login-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #1a3a5c 0%, #2c5f8a 50%, #1a3a5c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.login-overlay.hidden { display: none; }

.login-box {
    background: white;
    border-radius: 12px;
    padding: 40px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
}

.login-logo { margin-bottom: 16px; }

.login-box h2 {
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.login-subtitle {
    color: var(--text-light);
    font-size: 0.85rem;
    margin-bottom: 24px;
}

.login-field {
    text-align: left;
    margin-bottom: 14px;
}

.login-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.login-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--text);
    background: #fafbfc;
    transition: border-color 0.2s;
}

.login-field input:focus {
    outline: none;
    border-color: var(--primary-light);
    background: white;
}

.login-error {
    color: var(--danger);
    font-size: 0.85rem;
    min-height: 20px;
    margin-bottom: 8px;
}

.login-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.login-btn:hover { background: var(--primary-light); }

.btn-logout {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.btn-logout:hover { background: rgba(255,255,255,0.3); }

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

/* ====================================================================================
   Tâche C9 (26/09/2026) — écran Assistant à la charte (décision du propriétaire du 25/09 : dépôt de
   documents en haut, questions à droite, emails dessous et masqués, suggestions masquées). Tout est
   préfixé #assistantSection ; écran seulement. Les anciens panneaux sombres (.panel-section, .panel-header,
   .panel-btn, .panel-body, .assistant-fullwidth) n'ont plus d'élément. Inventaire :
   docs/cloud/rapports/C9-inventaire-assistant.md.
   ==================================================================================== */
#assistantSection { font-family: 'IBM Plex Sans', Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--tmc-encre); }
.assistant-tete {
    background: #fff; border-bottom: 1px solid var(--tmc-line); padding: 18px 32px;
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.assistant-tete-texte { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.assistant-titre { margin: 0; font-size: 22px; font-weight: 700; color: var(--tmc-navy); }
.assistant-tete-sous { color: var(--tmc-muted); font-size: 14px; line-height: 18px; }
.assistant-tete-actions { display: flex; gap: 10px; align-items: center; }
.assistant-btn {
    height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton); background: #fff;
    color: var(--tmc-encre); font-family: inherit; font-weight: 500; font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.assistant-btn:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
#assistantEffacer { height: 40px; padding: 0 16px; font-size: 14px; }
.assistant-btn-petit {
    height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton); background: #fff;
    color: var(--tmc-navy); font-family: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.assistant-btn-petit:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
.assistant-btn:focus-visible, .assistant-btn-petit:focus-visible, #chatSendBtn:focus-visible { outline: 2px solid var(--tmc-navy); outline-offset: 2px; }
.assistant-ecran { padding: 16px 32px 24px; display: flex; flex-direction: column; gap: 16px; }
/* D75 (27/09/2026) : à gauche le dépôt et la question (plus large qu'en C9), à droite la conversation. */
.assistant-layout { display: grid; grid-template-columns: 540px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1240px) { .assistant-layout { grid-template-columns: 1fr; } }
.assistant-panel, .assistant-chat { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#assistantSection .card { background: #fff; border: 1px solid var(--tmc-line); border-radius: 8px; box-shadow: none; }
#assistantSection .card > .card-header {
    background: #fff; color: var(--tmc-encre); font-size: 15px; font-weight: 700; padding: 14px 20px 0;
    border: 0; line-height: 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
#assistantSection .card > .card-body { padding: 10px 20px 16px; }
.assistant-aide { font-size: 12px; font-weight: 400; color: var(--tmc-muted); }
.assistant-vide { color: var(--tmc-muted); font-size: 13px; padding: 12px 0; }
.assistant-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.assistant-panneau { max-height: 460px; overflow-y: auto; font-size: 13px; }
#dashboardPanel.assistant-panneau { padding-top: 10px; }
/* Dépôt de documents : une ligne fichier / label / catégorie / Ajouter, une ligne texte libre / Enregistrer, la liste. */
.assistant-depot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.assistant-depot input[type="file"] { flex: 1 1 260px; font-size: 13px; font-family: inherit; }
.assistant-depot input[type="text"], .assistant-depot select {
    height: 34px; flex: 1 1 220px; min-width: 0; padding: 0 10px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
    font-family: inherit; font-size: 13.5px; background: #fff; color: var(--tmc-encre);
}
.assistant-depot-texte { align-items: flex-end; }
.assistant-depot textarea {
    flex: 1 1 400px; min-width: 0; padding: 8px 10px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
    font-family: inherit; font-size: 13.5px; resize: vertical; color: var(--tmc-encre);
}
.assistant-docs { margin-top: 10px; font-size: 13px; }
/* Conversation : le fil défile dans la carte (D75 : seule à droite, en haut de l'écran — la saisie est à gauche). */
.assistant-chat-card { display: flex; flex-direction: column; min-height: 600px; max-height: calc(100vh - 200px); }
/* D75 : la question, à gauche — grande zone de saisie, « Envoyer » dessous à droite. */
.assistant-question .chat-input-area { flex-direction: column; align-items: stretch; border-top: 0; padding: 10px 20px 16px; }
.assistant-question #chatInput { min-height: 150px; max-height: 360px; resize: vertical; }
.assistant-question #chatSendBtn { align-self: flex-end; }
.assistant-actions-carte { justify-content: flex-end; margin: 8px 20px 0; }
/* Cartes repliables (tableau de bord, vérification barème, derniers emails) : repliées, le bouton « Afficher » ne
   touche pas le bord de la carte. */
#assistantSection #dashboardWrapper > .card-header, #assistantSection #baremeVerifyWrapper > .card-header,
#assistantSection #assistantEmailsCarte > .card-header { padding-bottom: 12px; }
#assistantSection .assistant-chat-card > .card-header { padding-bottom: 10px; border-bottom: 1px solid var(--tmc-line); }
.assistant-lien { border: 0; background: none; padding: 0; color: var(--tmc-info); font-family: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; margin-bottom: 12px; }
/* Derniers emails : le bloc #emailWrapper (display:none par défaut ; loadEmails() le passe en flex). */
.assistant-emails { flex-direction: column; padding: 0 20px 14px; }
.assistant-email-recherche { display: flex; gap: 8px; align-items: center; margin: 8px 0 10px; }
.assistant-email-recherche input {
    flex: 1 1 auto; height: 32px; padding: 0 10px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
    font-family: inherit; font-size: 13.5px; color: var(--tmc-encre);
}

/* Assistant Chat */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
}
.chat-welcome {
    text-align: center;
    padding: 40px 20px;
    color: var(--tmc-muted);
}
.chat-welcome h3 { margin-bottom: 8px; color: var(--tmc-navy); font-size: 16px; }
.chat-welcome p { font-size: 0.9rem; color: var(--tmc-muted); margin-bottom: 14px; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chat-suggestions button {
    padding: 6px 12px;
    border: 1px solid var(--tmc-bord-bouton);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--tmc-encre);
    transition: all 0.2s;
}
.chat-suggestions button:hover { border-color: var(--tmc-navy); background: #f6f8fa; }
.chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.chat-msg.chat-user { justify-content: flex-end; }
/* Colonne bulle + boutons de document (tâche AL, 24/09/2026): seuls les messages de l'assistant
   en ont une — le message de l'utilisateur reste une bulle seule, flex-end, inchangé. */
.chat-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 80%; min-width: 0; }
.chat-col > .chat-bubble { max-width: 100%; }
.chat-msg-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* ronde finale: Version client + Copier le texte (PDF a rejoint l'aperçu) */
/* I4 (ronde finale, 25/09/2026): réponse coupée par la limite de jetons — avis visible au-dessus du
   seul bouton restant (« Copier le texte »), même palette que les contrôles signalés de l'aperçu. */
.chat-tronque-notice { margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: #fff3d6; color: #8a5a00; font-size: 0.78rem; font-weight: 600; }
.chat-action-btn {
    padding: 3px 10px;
    border: 1px solid #d9dfe6;
    border-radius: 12px;
    background: white;
    color: #4a5568;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s;
}
.chat-action-btn:hover { background: #f3f5f7; border-color: #2c5f8a; color: #2c5f8a; }
.chat-action-btn:disabled { opacity: 0.6; cursor: default; }
.chat-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--tmc-navy);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.chat-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
}
.chat-bubble-user {
    background: #e6eef8;
    color: var(--tmc-encre);
    border-bottom-right-radius: 4px;
}
.chat-bubble-ai {
    background: #f6f8fa;
    color: var(--tmc-encre);
    border: 1px solid #e4e9ee;
    border-bottom-left-radius: 4px;
}
.chat-bubble-ai p { margin-bottom: 8px; }
.stream-cursor { animation: blink 0.6s infinite; font-weight: bold; color: #2c5f8a; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.chat-bubble-ai p:last-child { margin-bottom: 0; }
.chat-bubble-ai h3 { font-size: 1rem; margin: 12px 0 6px; color: #1a1a2e; }
.chat-bubble-ai h4 { font-size: 0.92rem; margin: 10px 0 4px; color: #1a1a2e; }
.chat-bubble-ai ul, .chat-bubble-ai ol { margin: 6px 0 6px 20px; } /* mineur 3c (ronde finale) : listes numérotées */
.chat-bubble-ai li { margin-bottom: 3px; }
.chat-bubble-ai code { background: #f0f0f0; padding: 2px 5px; border-radius: 3px; font-size: 0.82rem; }
.chat-bubble-ai pre { background: #1a1a2e; color: #e0e0e0; padding: 10px; border-radius: 6px; overflow-x: auto; margin: 8px 0; }
.chat-bubble-ai pre code { background: none; color: inherit; padding: 0; }
.chat-table-wrap { overflow-x: auto; margin: 8px 0; }
.chat-table { border-collapse: collapse; font-size: 0.82rem; min-width: 100%; }
.chat-table th { text-align: left; font-weight: 600; color: #4a5568; background: #f3f5f7; padding: 5px 8px; border-bottom: 2px solid #d9dfe6; white-space: nowrap; }
.chat-table td { padding: 5px 8px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
.chat-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-table tr:nth-child(even) td { background: #fafbfc; }
.chat-bubble-ai strong { color: #1a3a5c; }
.chat-input-area {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--tmc-line);
    background: white;
    align-items: flex-end;
    border-radius: 0 0 8px 8px;
}
.chat-input-area textarea {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--tmc-bord-bouton);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--tmc-encre);
    resize: none;
    max-height: 120px;
    outline: none;
    transition: border-color 0.2s;
}
.chat-input-area textarea:focus { border-color: var(--tmc-navy); outline: 2px solid var(--tmc-green-clair); outline-offset: 1px; }
#chatSendBtn {
    height: 44px; padding: 0 18px;
    border: none;
    border-radius: 6px;
    background: var(--tmc-green);
    color: white;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
#chatSendBtn:hover { background: #17633a; }
#chatSendBtn:disabled { background: #bbb; cursor: not-allowed; }

/* Typing animation */
.typing-dots { display: flex; gap: 4px; padding: 4px 0; }
.typing-dots span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #999;
    animation: typing 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Email panel */
.email-list { padding: 0; }
.email-item {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.15s;
}
.email-item:hover { background: #f0f4ff; }
.email-from {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.email-date { font-weight: 400; color: #95a5a6; font-size: 0.72rem; }
.email-subject {
    font-size: 0.78rem;
    color: #555;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dashboard */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}
.dash-stat {
    background: white;
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    border: 1px solid #e0e0e0;
}
.dash-stat-num { font-size: 1.3rem; font-weight: 700; color: #1a1a2e; }
.dash-stat-label { font-size: 0.65rem; color: #7f8c8d; text-transform: uppercase; }
.dash-stat-blue .dash-stat-num { color: #2c5f8a; }
.dash-stat-orange .dash-stat-num { color: #e67e22; }
.dash-stat-green .dash-stat-num { color: #27ae60; }
.dash-stat-gray .dash-stat-num { color: #95a5a6; }
.dash-finance {
    background: white;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
}
.dash-bar {
    height: 8px;
    background: #ecf0f1;
    border-radius: 4px;
    overflow: hidden;
}
.dash-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
}
.dash-section {
    margin-bottom: 12px;
}
.dash-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
}
.dash-alert {
    background: white;
    padding: 8px 10px;
    border-radius: 6px;
    border-left: 4px solid #e74c3c;
    margin-bottom: 5px;
    font-size: 0.78rem;
    color: #2c3e50;
}
.dash-activity {
    background: white;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 0.78rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dash-activity-sh {
    font-weight: 700;
    color: #2c5f8a;
}
.dash-activity-ago {
    margin-left: auto;
    color: #95a5a6;
    font-size: 0.72rem;
}
.dash-suggestions {
    background: white;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
    border: 1px solid #e0e0e0;
}
.dash-suggestions p { margin-bottom: 6px; }
.dash-suggestions strong { color: #1a1a2e; }
.dash-suggestions ul { margin: 4px 0 4px 16px; }
.dash-suggestions li { margin-bottom: 4px; }
.dash-suggestion-card {
    background: white;
    border-radius: 8px;
    border-left: 4px solid #27ae60;
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    border-left-width: 4px;
}
.dash-suggestion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    font-size: 0.8rem;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}
.dash-suggestion-body {
    padding: 8px 10px;
    font-size: 0.76rem;
    color: #555;
    line-height: 1.4;
}
.dash-action-btn {
    background: #1a1a2e;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.dash-action-btn:hover { background: #2c5f8a; }

/* ===== HUSBANDRY ===== */
/* Tâche C9 (26/09/2026) : l'ancienne grille à trois colonnes (.husb-fullwidth, .husb-layout,
   .husb-header-grid-3, .husb-col*) n'a plus d'élément — l'habillage de l'onglet est en fin de feuille. */

/* Result tables (sections A, B, D) */
.result-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.result-table thead th {
    background: #f8f9fa;
    padding: 6px 8px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    border-bottom: 2px solid #ddd;
    white-space: nowrap;
}
.result-table td { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.result-table td:nth-last-child(1),
.result-table td:nth-last-child(2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-table .detail { font-size: 0.72rem; color: #888; }
.result-table .vat-row { background: #fef9e7; }
.result-table .vat-row td { color: #7d6608; font-size: 0.8rem; }
.result-table .subtotal { background: #eaf2f8; }
.result-table .subtotal td { font-weight: 700; color: var(--primary); }

.result-card { margin-bottom: 8px; }
.pda-header-body { padding: 12px 16px; }
.pda-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    font-size: 0.82rem;
}

/* Husb dynamic table (section H) */
.husb-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.husb-table thead th {
    background: #2c3e50;
    color: white;
    padding: 6px 8px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.husb-table tbody td { padding: 4px 6px; border-bottom: 1px solid #ecf0f1; vertical-align: middle; }

.husb-row:hover { background: #f0f7ff; }

.husb-cat, .husb-svc, .husb-unit {
    width: 100%;
    padding: 3px 4px;
    font-size: 0.78rem;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: white;
}
.husb-desc {
    width: 100%;
    padding: 3px 6px;
    font-size: 0.78rem;
    border: 1px solid #ddd;
    border-radius: 3px;
}
.husb-price, .husb-qty {
    width: 90px;
    padding: 3px 6px;
    font-size: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: right;
}
.husb-qty { width: 60px; }

.husb-row-total-xaf, .husb-row-total-eur {
    text-align: right;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}

.husb-del {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background 0.15s;
}
.husb-del:hover { background: #fde8e8; }

.husb-num { text-align: center; color: #95a5a6; font-size: 0.75rem; font-weight: 600; }
.husb-check { width: auto; }

.husb-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    z-index: 1000;
    max-width: 500px;
}

@media (max-width: 900px) {
    .husb-price { width: 70px; }
}

/* ===== Exclusions manuelles de lignes PDA ===== */
.excl-cell {
    width: 26px;
    border: none !important;
    background: none !important;
    text-align: center;
    padding: 2px !important;
}
.excl-btn {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: #f0f0f0;
    color: #c0392b;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.15s, background 0.15s;
}
tr:hover .excl-btn { opacity: 1; }
.excl-btn:hover { background: #e74c3c; color: #fff; }

.excl-bar {
    background: #fff3e0;
    border: 1px solid #f39c12;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.85rem;
    color: #7a4a00;
    line-height: 2;
}
.excl-chip {
    display: inline-block;
    background: #fff;
    border: 1px solid #f39c12;
    border-radius: 12px;
    padding: 2px 10px;
    margin: 0 4px;
    cursor: pointer;
    font-size: 0.78rem;
    white-space: nowrap;
}
.excl-chip:hover { background: #f39c12; color: #fff; }
.excl-restore {
    background: #1a6b3d;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    margin-left: 8px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
}
.excl-restore:hover { background: #14522e; }

@media print {
    .excl-cell, .excl-bar { display: none !important; }
}

/* Bouton ½ (sortie seule) */
.excl-cell { width: auto; min-width: 26px; white-space: nowrap; }
.excl-half {
    background: #eaf3ff;
    color: #1a5276;
    margin-right: 3px;
    font-size: 0.68rem;
}
.excl-half:hover { background: #2980b9; color: #fff; }
.excl-half-on {
    background: #2980b9 !important;
    color: #fff !important;
    opacity: 1 !important;
}
.excl-chip-half { border-color: #2980b9; color: #1a5276; }
.excl-chip-half:hover { background: #2980b9; color: #fff; }

/* Case à cocher garder/retirer par ligne (cellule numéro) + case de section */
.excl-num { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.excl-keep {
    width: 15px; height: 15px; margin: 0;
    cursor: pointer;
    accent-color: #1a6b3d;
    flex-shrink: 0;
}
.excl-half { opacity: 0.55; }
tr.excl-off td {
    color: #b6b6b6;
    text-decoration: line-through;
}
tr.excl-off td.excl-num-cell { text-decoration: none; }
.sec-keep { margin-right: 9px; display: inline-flex; vertical-align: middle; }
.sec-keep input {
    width: 16px; height: 16px; margin: 0;
    cursor: pointer;
    accent-color: #fff;
}
@media print {
    tr.excl-off { display: none !important; }
    .excl-keep, .excl-half, .sec-keep { display: none !important; }
}

/* ===== Coûts supplémentaires (SFDA) ===== */
.extra-cost-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
    padding: 8px;
    background: #fafbfc;
    border: 1px solid #e8ecef;
    border-radius: 8px;
}
.extra-cost-row .ec-line1 { display: flex; gap: 6px; align-items: center; }
.extra-cost-row .ec-line1 .ec-desc { flex: 1; min-width: 0; }
.extra-cost-row .ec-line1 .ec-del { flex: 0 0 30px; }
.extra-cost-row .ec-line2 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.extra-cost-row .ec-mode { flex: 0 0 92px; }
.extra-cost-row .ec-hourly { display: flex; gap: 4px; align-items: center; }
.extra-cost-row .ec-rate { width: 74px; }
.extra-cost-row .ec-hours { width: 52px; }
.extra-cost-row .ec-amount { width: 100px; }
.extra-cost-row .ec-ccy { width: 60px; }
.extra-cost-row .ec-sec { width: 80px; }
.extra-cost-row .ec-x { color: #999; font-size: 0.8rem; }
.extra-cost-row .ec-amount[readonly] { background: #eef7ef; font-weight: 600; }
.extra-cost-row input, .extra-cost-row select { min-width: 0; }
.ec-vat-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
}
.ec-vat-label input { width: 15px; height: 15px; margin: 0; accent-color: #1a6b3d; }
.ec-del {
    background: #fde8e8;
    border: 1px solid #e74c3c;
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.85rem;
}
.ec-del:hover { background: #e74c3c; }
.ec-add {
    background: #eaf3ff;
    border: 1px dashed #2980b9;
    color: #1a5276;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 2px;
}
.ec-add:hover { background: #2980b9; color: #fff; }

/* ===== SOF (Statement of Facts) → Sailing PDA ===== */
.sof-panel {
    background: #f3f8fd;
    border: 2px solid #2980b9;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0 14px;
}
.sof-panel-title { font-weight: 700; color: #1a5276; font-size: 0.92rem; margin-bottom: 4px; }
.sof-panel-help { font-size: 0.82rem; color: #555; margin: 0 0 10px; line-height: 1.45; }
.sof-panel-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sof-status { font-size: 0.8rem; color: #1a6b3d; font-weight: 600; }
.sof-detected-title { font-weight: 700; color: #1a5276; margin: 12px 0 6px; font-size: 0.88rem; }
.sof-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; background: #fff; border-radius: 6px; overflow: hidden; }
.sof-table th { background: #1a5276; color: #fff; text-align: left; padding: 6px 8px; font-weight: 600; }
.sof-table td { padding: 6px 8px; border-bottom: 1px solid #e3e8ee; vertical-align: middle; }
.sof-table input { padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.82rem; }
.sof-ref { color: #7f8c8d; font-size: 0.76rem; white-space: nowrap; }
.sof-conf { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.sof-conf-ok { background: #d4edda; color: #155724; }
.sof-conf-warn { background: #fff3cd; color: #7a4a00; }
.sof-extra { font-size: 0.76rem; color: #7f8c8d; margin-top: 8px; }
.sof-applied {
    margin-top: 10px;
    padding: 8px 12px;
    background: #eafaf1;
    border: 1px solid #1a6b3d;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #155724;
    font-weight: 600;
}
input.sof-filled {
    background: #eafaf1 !important;
    border-color: #1a6b3d !important;
    box-shadow: 0 0 0 2px rgba(26,107,61,0.15);
}
.sof-tag {
    display: inline-block;
    background: #1a6b3d;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    vertical-align: middle;
    margin-left: 4px;
}
@media print { .sof-panel, .sof-tag { display: none !important; } input.sof-filled { background: #fff !important; box-shadow: none; } }

/* Tâche AI-2, ronde 2 : une carte PARTAGÉE avec l'écran CTM (Navire, Client) porte deux libellés,
   celui de la planche 5 dans l'écran PDA (.pda-seul) et celui d'origine partout ailleurs (.hors-pda) —
   jamais les deux. Le CTM, refait plus tard (AI-4), garde donc ses titres d'aujourd'hui. */
.pda-seul { display: none; }
@media screen {
    body[data-mode="pda"] .pda-seul { display: inline; }
    body[data-mode="pda"] .hors-pda { display: none; }
}

/* ====================================================================================
   Tâche AI-2 (24/09/2026) — habillage de l'onglet PDA, planche 5 des maquettes validées.
   TOUT est enfermé dans @media screen : la feuille d'impression (plus haut) reste seule
   maîtresse du document imprimé, qui ne change donc pas d'un pixel.
   Jetons de couleur, police et rayons : ceux de la charte posée en AI-1 (--tmc-*).
   ==================================================================================== */
@media screen {

    /* ---------- En-tête d'écran ---------- */
    .pda-tete {
        background: #fff;
        border-bottom: 1px solid var(--tmc-line);
        padding: 14px 32px;
        display: flex;
        align-items: center;
        gap: 24px;
        flex-wrap: wrap;
        font-family: 'IBM Plex Sans', Arial, sans-serif;
        color: var(--tmc-encre);
    }
    .pda-tete-texte { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .pda-titre-rang { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .pda-titre {
        margin: 0; font-size: 22px; font-weight: 700; color: var(--tmc-navy);
        display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    /* F2, D53 (propriétaire, 26/09/2026) : le numéro de dossier est un VRAI champ — étiquette « N° de
       dossier », cadre visible au repos, largeur fixe (« QUOTE-26-001 » y tient), même rang que le titre.
       Avant (ronde 2, écart 6) il se lisait comme le titre, sans cadre : personne ne le voyait modifiable. */
    .pda-tete-champ-ref { display: inline-flex; align-items: center; gap: 8px; }
    .pda-tete-ref {
        width: 172px; height: 38px; box-sizing: border-box;
        border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; padding: 0 10px;
        font-family: inherit; font-size: 19px; font-weight: 700; color: var(--tmc-navy);
        background: #fff; font-variant-numeric: tabular-nums;
    }
    .pda-tete-ref:hover { border-color: var(--tmc-navy); }
    .pda-tete-ref:focus { border-color: var(--tmc-navy); outline: 2px solid var(--tmc-green-clair); outline-offset: 1px; }
    .pda-tete-propose {
        font-size: 12px; font-weight: 600; color: var(--tmc-info); background: #e8eef8;
        border-radius: 10px; padding: 2px 8px; white-space: nowrap;
    }
    /* F2, D54 : « Devis seul » (proforma sans dossier) et « Transformer en dossier » — classes de <body>
       posées par devis.js, jamais un style en ligne (majPdaFdaGeree réécrit ceux des boutons). */
    .pda-tete-transformation { font-size: 13px; line-height: 18px; color: var(--tmc-info); }
    .pda-tete-transformation a { margin-left: 8px; color: var(--tmc-info); }
    .pda-btn-devis, .pda-btn-transformer { display: none; }
    body.pda-devis .pda-btn-devis, body.pda-transformation:not(.pda-devis) .pda-btn-transformer { display: inline-flex; }
    body.pda-devis .pda-btn-save, body.pda-transformation .pda-btn-save { display: none !important; }
    body.pda-devis #factureDefRow, body.pda-devis #updatedPfdaRow { display: none !important; }
    .devis-note { margin: 12px 0 10px; font-size: 13px; color: var(--tmc-muted); }
    .devis-ligne.devis-transforme td { color: var(--tmc-muted); background: #f6f8fa; }
    .devis-transforme-texte { font-size: 12px; font-weight: 600; color: var(--tmc-muted); }
    .devis-sans-pdf { font-size: 12px; color: var(--tmc-muted); }
    .devis-vide { text-align: center; padding: 20px; color: var(--tmc-muted); }
    .devis-actions { white-space: nowrap; }
    .devis-transformer {
        height: 28px; padding: 0 10px; margin-left: 8px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
        background: #fff; color: var(--tmc-navy); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    }
    .devis-transformer:hover { border-color: var(--tmc-navy); background: #f6f8fa; }
    /* F2, D55 : boîte « Client » de l'en-tête et sa fenêtre « Nouveau client… » / « Modifier la fiche ». */
    .pda-tete-client { display: inline-flex; align-items: center; gap: 8px; }
    .pda-tete-client-liste { max-width: 300px; }
    .pda-tete-lien {
        border: 0; background: none; padding: 0; color: var(--tmc-info); font-family: inherit; font-size: 13px;
        text-decoration: underline; cursor: pointer;
    }
    .client-fiche-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
    .client-fiche-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .client-fiche-large { grid-column: 1 / -1; }
    .client-fiche-champ label { font-size: 12px; color: var(--tmc-muted); }
    .client-fiche-champ label span { color: #8a96a3; }
    .client-fiche-champ input, .client-fiche-champ textarea {
        height: 38px; box-sizing: border-box; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; padding: 0 10px;
        font-family: inherit; font-size: 14px; color: var(--tmc-encre); background: #fff;
    }
    .client-fiche-champ textarea { height: auto; padding: 8px 10px; resize: vertical; }
    .client-fiche-champ input[readonly] { background: #f6f8fa; color: var(--tmc-muted); }
    .client-fiche-erreur { margin-top: 14px; padding: 8px 12px; border-radius: 6px; background: #fdecea; color: var(--tmc-block); font-size: 13px; }
    .pda-tete-option label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tmc-encre); cursor: pointer; }
    .pda-tete-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--tmc-todo); }
    .pda-tete-aide { font-weight: 400; color: var(--tmc-muted); }
    .pda-tete-ligne label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tmc-green); cursor: pointer; margin: 0; }
    .pda-tete-ligne input { width: 16px; height: 16px; margin: 0; accent-color: var(--tmc-green); }
    .pda-titre-navire { color: var(--tmc-muted); font-weight: 500; }
    .pda-tete-etiquette { font-size: 12px; color: var(--tmc-muted); }
    .pda-tete-type {
        height: 34px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; padding: 0 8px;
        font-family: inherit; font-size: 14px; font-weight: 600; background: #fff; color: var(--tmc-encre);
    }
    .pda-tete-sous { color: var(--tmc-muted); font-size: 14px; line-height: 18px; }
    .pda-tete-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    #pdaCalculer {
        height: 40px; padding: 0 18px; border-radius: 6px; border: 0;
        background: var(--tmc-green); color: #fff; font-weight: 600; font-size: 14px;
        width: auto; justify-content: center;
    }
    #pdaCalculer:hover { background: #17633a; }
    #pdaAnalyserSof {
        height: 40px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton);
        background: #fff; color: var(--tmc-encre); font-weight: 500; font-size: 14px; justify-content: center;
    }
    #pdaAnalyserSof:hover { background: #f6f8fa; border-color: var(--tmc-navy); }

    /* ---------- Les deux colonnes (640 px à gauche, planche 5) ---------- */
    body[data-mode="pda"] #pdaEcran {
        font-family: 'IBM Plex Sans', Arial, sans-serif;
        font-variant-numeric: tabular-nums;
        color: var(--tmc-encre);
        grid-template-columns: 640px minmax(0, 1fr);
        gap: 24px;
        padding: 16px 32px 24px;
    }
    @media (max-width: 1240px) { body[data-mode="pda"] #pdaEcran { grid-template-columns: 1fr; } }

    /* ---------- Cartes : blanches, bord --tmc-line, rayon 8, plus de bandeau de couleur ---------- */
    body[data-mode="pda"] #pdaEcran .card {
        background: #fff;
        border: 1px solid var(--tmc-line);
        border-radius: 8px;
        box-shadow: none;
    }
    body[data-mode="pda"] #pdaEcran .card > .card-header,
    body[data-mode="pda"] #pdaEcran .card > summary.card-header {
        background: #fff !important;
        color: var(--tmc-navy);
        font-size: 15px;
        font-weight: 700;
        padding: 16px 20px 0;
        border: 0;
    }
    body[data-mode="pda"] #pdaEcran .card-body { padding: 14px 20px 18px; }
    /* Ronde 2, écart 2 : libellés en minuscules comme la planche (« Nom du navire », « LOA (m) ») —
       la feuille de base les passait en capitales. Titres de carte en gras simple, sans icône. */
    body[data-mode="pda"] #pdaEcran .form-group label,
    body[data-mode="pda"] #pdaEcran .tba-label {
        color: var(--tmc-muted); font-size: 12px; font-weight: 400;
        text-transform: none; letter-spacing: 0;
    }
    body[data-mode="pda"] #pdaEcran .sidebar .card > .card-header,
    body[data-mode="pda"] #pdaEcran .sidebar .card > summary.card-header { color: var(--tmc-encre); }
    body[data-mode="pda"] #pdaEcran input[type="text"], body[data-mode="pda"] #pdaEcran input[type="number"], body[data-mode="pda"] #pdaEcran input[type="date"],
    body[data-mode="pda"] #pdaEcran input[type="time"],
    body[data-mode="pda"] #pdaEcran select, body[data-mode="pda"] #pdaEcran input[type="search"] {
        border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; font-family: inherit;
    }
    body[data-mode="pda"] #pdaEcran .separator { border-top: 1px solid var(--tmc-line); }

    /* ---------- Ronde 2, écart 8 : le formulaire tient dans une hauteur d'écran (planche 5) ----------
       À 1440 × 1040, l'en-tête, les cartes Navire, Opération et escale, Cargaison, Coûts supplémentaires
       et l'en-tête des Options avancées se voient sans défiler. Colonne de gauche seulement : cartes et
       champs plus serrés (champs de 32 px, libellés sur 16 px, marges de 12 px). Les règles propres à
       un champ, plus bas (code du type, conversions, cargo mix…), l'emportent sur celles-ci. */
    body[data-mode="pda"] #pdaEcran .sidebar { gap: 10px; }
    body[data-mode="pda"] #pdaEcran .sidebar .card > .card-header:not(summary) { padding: 12px 20px 0; line-height: 22px; }
    body[data-mode="pda"] #pdaEcran .sidebar .card > .card-body { padding: 8px 20px 12px; }
    /* La note du dépôt Q88, en petit sur la ligne du titre de la carte Navire. */
    body[data-mode="pda"] #pdaCarteNavire > .card-header { justify-content: space-between; align-items: baseline; gap: 12px; }
    body[data-mode="pda"] #pdaCarteNavire .pda-note-titre { font-size: 12px; font-weight: 400; color: var(--tmc-muted); text-align: right; }
    body[data-mode="pda"] #pdaEcran .sidebar .form-group { gap: 3px; }
    body[data-mode="pda"] #pdaEcran .sidebar .form-group > label { line-height: 16px; }
    body[data-mode="pda"] #pdaEcran .sidebar .form-row { gap: 8px 12px; margin-bottom: 8px; }
    body[data-mode="pda"] #pdaEcran .sidebar input[type="text"], body[data-mode="pda"] #pdaEcran .sidebar input[type="number"],
    body[data-mode="pda"] #pdaEcran .sidebar input[type="date"], body[data-mode="pda"] #pdaEcran .sidebar input[type="time"],
    body[data-mode="pda"] #pdaEcran .sidebar select {
        height: 32px; padding-top: 0; padding-bottom: 0; background-color: #fff;
    }

    /* ---------- Ronde 2, écart 1 : la carte Navire en grille (planche 5) ----------
       Ligne 1 : nom (deux colonnes) et type, le code du type en petit texte à droite de son libellé ;
       ligne 2 : LOA, beam, summer draft, puis le volume en une ligne discrète ; ligne 3 : GT, NT,
       équipage. Les rangées d'origine (.form-row) s'effacent de la mise en page (display: contents) :
       le DOM, les identifiants et l'écran CTM, qui partage cette carte, ne bougent pas. */
    body[data-mode="pda"] #pdaCarteNavire > .card-body {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px;
    }
    body[data-mode="pda"] #pdaCarteNavire .form-row { display: contents; }
    body[data-mode="pda"] #pdaCarteNavire .form-group:empty { display: none; }
    body[data-mode="pda"] #pdaCarteNavire .pda-navire-nom { grid-row: 1; grid-column: 1 / span 2; }
    body[data-mode="pda"] #pdaCarteNavire .pda-navire-type { grid-row: 1; grid-column: 3; }
    body[data-mode="pda"] #pdaCarteNavire .pda-navire-code {
        grid-row: 1; grid-column: 3; justify-self: end; align-self: start;
        flex-direction: row; align-items: baseline; gap: 4px;
    }
    body[data-mode="pda"] #pdaCarteNavire #vesselCode {
        width: 3.2em; height: auto; padding: 0; border: 0; background: transparent;
        font-size: 12px; font-weight: 600; color: var(--tmc-muted);
    }
    body[data-mode="pda"] #pdaCarteNavire .loading-suggestion,
    body[data-mode="pda"] #pdaCarteNavire .volume-display,
    body[data-mode="pda"] #pdaCarteNavire .pda-note { grid-column: 1 / -1; margin: 0; }
    body[data-mode="pda"] #pdaCarteNavire .volume-display {
        display: flex; align-items: baseline; gap: 5px; background: none; padding: 0;
        margin-top: -4px; text-align: left; font-size: 12px; color: var(--tmc-muted);
    }
    body[data-mode="pda"] #pdaCarteNavire .volume-display .vol-label,
    body[data-mode="pda"] #pdaCarteNavire .volume-display .vol-unit { font-size: 12px; text-transform: none; color: var(--tmc-muted); }
    body[data-mode="pda"] #pdaCarteNavire .volume-display .vol-value { font-size: 12px; font-weight: 600; color: var(--tmc-encre); }
    body[data-mode="pda"] #pdaCarteNavire .gt-aide { color: var(--tmc-muted); font-size: 11px; }
    .pda-note { font-size: 12px; color: var(--tmc-muted); margin-top: 10px; }

    /* ---------- Ronde 2, écart 3 : « Opération et escale » en trois lignes (planche 5) ---------- */
    body[data-mode="pda"] #pdaEcran .pda-grille {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: end;
    }
    body[data-mode="pda"] #pdaEcran .pda-grille > .loading-suggestion,
    body[data-mode="pda"] #pdaEcran .pda-grille > .sof-panel { grid-column: 1 / -1; }
    body[data-mode="pda"] #pdaEcran .pda-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: end; }
    /* FUS1 (RQ2 dans la planche 5) : « ETA heure facultative » — la date et son heure côte à côte dans la
       colonne, la case TBA sur la ligne du libellé, à droite. Même hauteur que les autres champs. */
    body[data-mode="pda"] #pdaEcran .sidebar .form-group.pda-date-heure {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 6px; align-items: baseline;
    }
    body[data-mode="pda"] #pdaEcran .pda-date-heure > .date-tba { grid-column: 1 / -1; gap: 6px; }
    body[data-mode="pda"] #pdaEcran .pda-date-heure .pda-libelle-aide { color: #8a96a3; }
    body[data-mode="pda"] #pdaEcran .pda-date-heure input[type="date"] { flex: 1 1 auto; padding-left: 6px; padding-right: 4px; }
    /* L'heure se tape (hh:mm) : sans le bouton d'horloge, comme la planche — la date garde son calendrier. */
    body[data-mode="pda"] #pdaEcran .pda-date-heure input[type="time"] { flex: 0 0 58px; padding-left: 6px; padding-right: 4px; }
    body[data-mode="pda"] #pdaEcran .pda-date-heure input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
    /* FUS1 : les étiquettes automatiques de RQ2 (« SOF », « Q88 », posées dans le libellé par
       marquerChampAuto) ne décalent plus la rangée : si un libellé passe à la ligne, les champs restent
       alignés par le bas (.pda-grille et .pda-duo : align-items: end, au lieu de start) ; devant l'étiquette « SOF », l'aide « heure facultative » s'efface. */
    body[data-mode="pda"] #pdaEcran .pda-date-heure:has(.sof-tag) .pda-libelle-aide { display: none; }
    /* L'opération prend la couleur de son sens, visible avant même le calcul : vert à l'export,
       orange à l'import, gris en transit (planche 5). FUS1 : UN SEUL mécanisme, celui de RQ2 —
       updateCargoOperationColor() (app.js) pose .op-export / .op-import / .op-transit, et replie une
       valeur inconnue sur « transit » (MIN-9) ; ces règles n'en donnent que les teintes de la charte.
       La lecture CSS seule de l'option choisie (:has(option:checked), ronde 2 d'AI-2) est retirée,
       ainsi que les trois règles globales de RQ2 (aplats pleins, texte blanc), que l'habillage de
       l'écran (.sidebar select, fond blanc) masquait de toute façon — et qui laissaient le texte
       « Transit » blanc sur blanc. */
    body[data-mode="pda"] #pdaEcran #cargoOperation.op-export {
        border: 2px solid var(--tmc-green); background: #e3f3e9; color: var(--tmc-green); font-weight: 600;
    }
    body[data-mode="pda"] #pdaEcran #cargoOperation.op-import {
        border: 2px solid var(--tmc-todo); background: #fbf1e0; color: var(--tmc-todo); font-weight: 600;
    }
    body[data-mode="pda"] #pdaEcran #cargoOperation.op-transit {
        border: 2px solid var(--tmc-muted); background: var(--tmc-bg); color: var(--tmc-muted); font-weight: 600;
    }
    /* Les suggestions (durée d'escale, temps de chargement, densité, type de navire). D60 (propriétaire,
       26/09/2026) : la petite ligne verte à 12 px se manquait — même hauteur qu'un champ (32 px), fond bleu
       pâle de la charte, texte à 14 px, la valeur en gras, « Appliquer » en bouton secondaire bien visible.
       Mêmes textes, mêmes calculs, mêmes boutons « Appliquer ». */
    body[data-mode="pda"] #pdaEcran .loading-suggestion {
        min-height: 32px; box-sizing: border-box; background: #e8eef8; border: 0; border-radius: 6px;
        padding: 3px 4px 3px 12px; margin: 0; font-size: 14px; line-height: 20px; color: var(--tmc-encre); gap: 6px 12px;
        justify-content: space-between;
    }
    body[data-mode="pda"] #pdaEcran .loading-suggestion strong { font-weight: 700; color: var(--tmc-info); }
    body[data-mode="pda"] #pdaEcran .btn-suggestion {
        flex: 0 0 auto; height: 26px; padding: 0 14px; background: #fff; color: var(--tmc-navy); border: 1px solid var(--tmc-navy);
        border-radius: 6px; font-size: 13px; font-weight: 600;
    }
    body[data-mode="pda"] #pdaEcran .btn-suggestion:hover { background: #f6f8fa; }
    /* ---------- Ronde 2, écart 4 : la carte Cargaison en tableau (planche 5) ---------- */
    body[data-mode="pda"] #pdaEcran .pda-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    body[data-mode="pda"] #pdaEcran .pda-carte-tete-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
    body[data-mode="pda"] #pdaEcran .pda-carte-tete select {
        height: 30px; max-width: 330px; padding: 0 8px; font-size: 13px; font-weight: 400; background: #fff; color: var(--tmc-encre);
    }
    body[data-mode="pda"] #pdaEcran .btn-multi-cargo,
    body[data-mode="pda"] #pdaEcran .btn-add-cargo,
    body[data-mode="pda"] #pdaEcran .btn-add-row {
        height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton);
        background: #fff; color: var(--tmc-encre); font-size: 13px; font-weight: 500; white-space: nowrap;
    }
    body[data-mode="pda"] #pdaEcran .btn-multi-cargo:hover,
    body[data-mode="pda"] #pdaEcran .btn-add-cargo:hover,
    body[data-mode="pda"] #pdaEcran .btn-add-row:hover { background: #f6f8fa; border-color: var(--tmc-navy); opacity: 1; }
    body[data-mode="pda"] #pdaEcran .btn-multi-cargo.active { background: #fff; color: var(--tmc-navy); border-color: var(--tmc-navy); }
    /* La ligne du produit : produit | quantité et unité | densité | cadence. */
    body[data-mode="pda"] #pdaEcran .pda-cargo {
        display: grid; grid-template-columns: minmax(0, 1fr) 200px 90px 100px; gap: 8px 10px; align-items: start;
    }
    body[data-mode="pda"] #pdaEcran #cargoNameRow,
    body[data-mode="pda"] #pdaEcran #bulkCargoFields { display: contents; }
    /* En-têtes du tableau : les libellés de la ligne produit, en gras comme la planche. */
    body[data-mode="pda"] #pdaEcran #cargoNameRow label,
    body[data-mode="pda"] #pdaEcran #bulkCargoFields > .form-group > label { font-weight: 600; }
    body[data-mode="pda"] #pdaEcran .pda-cargo .input-with-unit select { width: 84px; }
    body[data-mode="pda"] #pdaEcran #density,
    body[data-mode="pda"] #pdaEcran #cargoQty,
    body[data-mode="pda"] #pdaEcran #handlingRate { text-align: right; }
    /* Sélecteurs de descendant, pas d'enfant : ces lignes sont filles de #bulkCargoFields dans le
       DOM, même si sa boîte s'efface (display: contents) et qu'elles se placent dans la grille. */
    body[data-mode="pda"] #pdaEcran .pda-cargo .pda-cargo-conv,
    body[data-mode="pda"] #pdaEcran .pda-cargo .loading-suggestion,
    body[data-mode="pda"] #pdaEcran .pda-cargo #multiCargoPanel,
    body[data-mode="pda"] #pdaEcran .pda-cargo .pda-cargo-classes,
    body[data-mode="pda"] #pdaEcran .pda-cargo #containerFields { grid-column: 1 / -1; }
    /* Les conversions : des valeurs lues, en une ligne de texte (champs en lecture seule inchangés). */
    body[data-mode="pda"] #pdaEcran .pda-cargo-conv { display: flex; align-items: baseline; gap: 4px 6px; flex-wrap: wrap; font-size: 12px; }
    body[data-mode="pda"] #pdaEcran .pda-cargo-conv label { font-weight: 400; color: var(--tmc-muted); }
    body[data-mode="pda"] #pdaEcran .pda-cargo-conv input[readonly] {
        field-sizing: content; min-width: 2ch; width: auto; height: auto; padding: 0; margin-right: 10px;
        border: 0; background: transparent; font-size: 12px; font-weight: 600; color: var(--tmc-encre);
    }
    /* Deux listes côte à côte (trois quand « Type de marchandise » apparaît, en general cargo). */
    body[data-mode="pda"] #pdaEcran .pda-cargo-classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; }
    body[data-mode="pda"] #pdaEcran .pda-cargo-type { display: block; margin: 0; }
    /* Le Cargo Mix, ouvert par « + Produit » : le même tableau, sans cadre bleu ni en-têtes en aplat. */
    body[data-mode="pda"] #pdaEcran .multi-cargo-box { background: #fff; border: 1px solid var(--tmc-line); border-radius: 8px; padding: 10px 12px; margin: 0; }
    body[data-mode="pda"] #pdaEcran .multi-cargo-header { color: var(--tmc-encre); font-size: 13px; }
    body[data-mode="pda"] #pdaEcran .multi-cargo-table th,
    body[data-mode="pda"] #pdaEcran .ct-table th {
        background: #fff; color: var(--tmc-muted); font-size: 12px; font-weight: 600; text-transform: none;
        padding: 4px 6px; border-bottom: 1px solid var(--tmc-line);
    }
    body[data-mode="pda"] #pdaEcran .multi-cargo-table td { border-bottom: 1px solid #eef1f4; }
    body[data-mode="pda"] #pdaEcran .multi-cargo-table input,
    body[data-mode="pda"] #pdaEcran .multi-cargo-table select { height: 30px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; font-size: 13px; }
    body[data-mode="pda"] #pdaEcran .multi-cargo-total td { background: #f6f8fa; }
    body[data-mode="pda"] #pdaEcran .btn-remove-cargo { color: var(--tmc-muted); }
    body[data-mode="pda"] #pdaEcran .btn-remove-cargo:hover { color: var(--tmc-block); }
    body[data-mode="pda"] #pdaEcran .btn-apply-mix {
        display: inline-block; width: auto; height: 32px; padding: 0 14px; margin-top: 8px;
        background: var(--tmc-navy); border-radius: 6px; font-size: 13px;
    }
    body[data-mode="pda"] #pdaEcran .congo-terminal-section h4 { color: var(--tmc-encre); font-size: 13px; border-bottom: 1px solid var(--tmc-line); }

    /* ---------- Ronde 2, écart 5 : « Coûts supplémentaires », toujours visible ---------- */
    body[data-mode="pda"] #pdaEcran .ec-add {
        height: 30px; padding: 0 10px; margin: 0; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton);
        background: #fff; color: var(--tmc-encre); font-size: 13px; font-weight: 500; white-space: nowrap;
    }
    body[data-mode="pda"] #pdaEcran .ec-add:hover { background: #f6f8fa; border-color: var(--tmc-navy); color: var(--tmc-encre); }
    /* « Aucun coût supplémentaire » ne se montre que si la liste est vide : :empty suit
       addExtraCostRow(), la poubelle de chaque ligne, loadExtraCosts() et resetForm() sans script.
       Vide, la carte tient sur la ligne de son titre ; les coûts ajoutés s'affichent dessous. */
    .pda-couts-vide { font-size: 12px; font-weight: 400; color: var(--tmc-muted); margin-left: 10px; }
    #pdaCarteCouts:has(#extraCostRows:not(:empty)) .pda-couts-vide { display: none; }
    body[data-mode="pda"] #pdaEcran #pdaCarteCouts > .card-header { padding-bottom: 12px; }
    body[data-mode="pda"] #pdaEcran #pdaCarteCouts > .card-body { padding: 0 20px; }
    body[data-mode="pda"] #pdaEcran #pdaCarteCouts #extraCostRows:not(:empty) { padding-bottom: 12px; }
    body[data-mode="pda"] #pdaEcran .extra-cost-row {
        background: #fff; border: 0; border-bottom: 1px solid #eef1f4; border-radius: 0; padding: 6px 0 8px; margin: 0;
    }
    body[data-mode="pda"] #pdaEcran .extra-cost-row input,
    body[data-mode="pda"] #pdaEcran .extra-cost-row select { height: 30px; padding: 0 8px; font-size: 13px; }
    body[data-mode="pda"] #pdaEcran .ec-del {
        background: #fff; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; height: 30px; padding: 0 6px;
    }
    body[data-mode="pda"] #pdaEcran .ec-del:hover { background: #fdecea; border-color: var(--tmc-block); }

    /* ---------- Ronde 2, écart 9 : aucun bandeau coloré empilé (charte) ----------
       Chaque alerte ou information du formulaire devient une ligne de texte colorée dans sa carte :
       rouge bloquant, orange à faire, bleu information, vert suggestion ou valeur appliquée. Les
       TEXTES sont ceux d'aujourd'hui, mot pour mot ; seuls le fond et le cadre disparaissent. */
    body[data-mode="pda"] #pdaEcran .gt-alerte { background: none; border: 0; border-radius: 0; padding: 0; margin-top: 4px; font-size: 12px; }
    body[data-mode="pda"] #pdaEcran .gt-alerte.gt-illisible { background: none; border: 0; color: var(--tmc-block); }
    body[data-mode="pda"] #pdaEcran .gt-alerte.gt-bas { background: none; border: 0; color: var(--tmc-todo); }
    body[data-mode="pda"] #pdaEcran .gt-alerte.gt-estime { background: none; border: 0; color: var(--tmc-info); }
    body[data-mode="pda"] #pdaEcran .tug-info { background: none; border: 0; padding: 0; margin: 4px 0 8px; font-size: 12px; color: var(--tmc-muted); }
    body[data-mode="pda"] #pdaEcran .sof-panel {
        background: none; border: 0; border-top: 1px solid var(--tmc-line); border-radius: 0; padding: 12px 0 0; margin: 2px 0 0;
    }
    body[data-mode="pda"] #pdaEcran .sof-panel-title { color: var(--tmc-encre); font-size: 14px; }
    body[data-mode="pda"] #pdaEcran .sof-panel-help { color: var(--tmc-muted); font-size: 12px; }
    body[data-mode="pda"] #pdaEcran .sof-panel-actions button {
        height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton);
        background: #fff; color: var(--tmc-encre); font-size: 13px; font-weight: 500; cursor: pointer;
    }
    body[data-mode="pda"] #pdaEcran .sof-panel-actions button.btn-primary { background: var(--tmc-navy); border-color: var(--tmc-navy); color: #fff; }
    body[data-mode="pda"] #pdaEcran .sof-detected-title { color: var(--tmc-encre); }
    body[data-mode="pda"] #pdaEcran .sof-table th { background: #fff; color: var(--tmc-muted); font-size: 12px; border-bottom: 1px solid var(--tmc-line); }
    body[data-mode="pda"] #pdaEcran .sof-applied { background: none; border: 0; border-radius: 0; padding: 0; margin-top: 8px; color: var(--tmc-green); font-size: 12px; }
    /* Colonne de droite : le bandeau « Check & Balance » (couleur écrite en ligne par dossiers.js)
       devient une ligne dans une carte blanche, comme les ajustements manuels en ronde 1 : même
       texte, sa couleur (verte, orange ou rouge) passe au filet de gauche. Écran seulement. */
    body[data-mode="pda"] #pdaEcran #fdaCheckBanner {
        background: #fff !important; border: 1px solid var(--tmc-line) !important;
        border-left: 3px solid currentColor !important; border-radius: 8px !important;
    }

    /* Le client dans le formulaire PFDA : sa carte, vidée par placerChampsClient(), ne s'affiche pas. */
    #pdaCarteClient.pda-carte-videe { display: none; }
    .pda-sous-titre { font-size: 13px; font-weight: 600; color: var(--tmc-encre); margin: 4px 0 8px; }
    .pda-sous-titre span { font-size: 12px; font-weight: 400; color: var(--tmc-muted); margin-left: 6px; }

    /* ---------- Ronde 3 (D40) : Options avancées, TOUJOURS visibles, grille compacte ----------
       Plus de <details>/<summary> : #pdaOptions est une carte normale, sa grille (.pda-grille,
       posée sur .card-body, 3 colonnes — même classe que « Opération et escale ») place chaque
       .form-row/.checkbox-group dans une cellule. Les blocs qui ne tiennent pas dans un tiers de
       largeur (remorquage terminal, note de remorqueur, veille, séparateurs, adresse) prennent
       toute la largeur : grid-column 1/-1 les fait démarrer une nouvelle ligne de grille. */
    body[data-mode="pda"] #pdaEcran #pdaOptions .card-body.pda-grille > #cmscHoursRow,
    body[data-mode="pda"] #pdaEcran #pdaOptions .card-body.pda-grille > #nkossaTugsRow,
    body[data-mode="pda"] #pdaEcran #pdaOptions .card-body.pda-grille > #nguyaRow,
    body[data-mode="pda"] #pdaEcran #pdaOptions .card-body.pda-grille > #nguyaRow2,
    body[data-mode="pda"] #pdaEcran #pdaOptions .card-body.pda-grille > #tugInfo,
    body[data-mode="pda"] #pdaEcran #pdaOptions .card-body.pda-grille > .separator,
    body[data-mode="pda"] #pdaEcran #pdaOptions .card-body.pda-grille > #safetyWatchBlock,
    body[data-mode="pda"] #pdaEcran #pdaOptions .card-body.pda-grille > .pda-sous-titre,
    body[data-mode="pda"] #pdaEcran #pdaOptions .card-body.pda-grille > #pdaPlaceAdresse {
        grid-column: 1 / -1;
    }
    /* Les .form-row SANS id (heures/classe de remorqueur, type/portée du 2e remorqueur, fournitures,
       agency fee/rôle transitaire) passent en display:contents — même technique que la carte Navire
       (#pdaCarteNavire .form-row, ronde 2) : le <div> s'efface pour la grille, chaque .form-group
       devient sa PROPRE cellule (1 des 3 colonnes, ~190 px). SANS cette règle, une paire logeait dans
       UN tiers de largeur divisé en deux (~91 px chacun) : trop étroit pour un <select> à texte long
       (« Type 2e remorqueur », « Type remorqueur ») — la valeur débordait sur la cellule voisine
       (repéré à la capture d'écran : « Fournitures de remorque » chevauchait « Mouvement(s) du 2e
       remorqueur »). Les lignes AVEC id (terminal, ci-dessus) gardent leur paire originale : elles
       restent volontairement groupées en pleine largeur. */
    body[data-mode="pda"] #pdaEcran #pdaOptions .card-body.pda-grille > .form-row:not([id]) {
        display: contents;
    }
    /* Les cases isolées (second remorqueur, vessel movement) occupent naturellement 1 des 3 colonnes. */

    /* ---------- Colonne de droite : la PFDA calculée ---------- */
    body[data-mode="pda"] #pdaEcran .main-content > .card { border: 1px solid var(--tmc-line); box-shadow: none; }
    body[data-mode="pda"] #pdaEcran #pdaTitle {
        background: #fff !important;
        color: var(--tmc-navy);
        border-bottom: 1px solid var(--tmc-line);
        font-size: 15px !important;
        font-weight: 700;
        padding: 16px 20px !important;
    }
    body[data-mode="pda"] #pdaEcran #pdaTitle > *:first-child { letter-spacing: 0.3px; }
    /* Ronde 3 : le titre du DOCUMENT IMPRIMÉ (le <span> sans classe, premier <span> du bloc — lu
       par pdf-export.js et par @media print via querySelector('span')) s'efface à l'écran au profit
       de l'intitulé lisible #pdaResultTitreEcran (« PFDA calculée » / SFDA / FDA / PA selon le type,
       posé par majTitreEcranResultat()). Rien n'est déplacé ni renommé : #verifyBadge EST un <span>,
       d'où le :not() plutôt qu'un simple « span:not(:first-child) ». */
    body[data-mode="pda"] #pdaEcran #pdaTitle > span:not(#verifyBadge) { display: none; }
    /* Les en-têtes de section deviennent une bande grise discrète (planche 5), au lieu de
       cinq aplats de couleur empilés. Les cases « garder la section » ne bougent pas.
       Ronde 3 : titre en casse normale (plus d'UPPERCASE) — « A/ Port Expenses », pas
       « A/ PORT EXPENSES » ; le texte lu par pdf-export.js (textContent) n'a pas changé, seul le
       text-transform de l'écran disparaît. */
    body[data-mode="pda"] #pdaEcran .card-header.section-a, body[data-mode="pda"] #pdaEcran .card-header.section-b,
    body[data-mode="pda"] #pdaEcran .card-header.section-c, body[data-mode="pda"] #pdaEcran .card-header.section-d,
    body[data-mode="pda"] #pdaEcran .card-header.section-e, body[data-mode="pda"] #pdaEcran .card-header.total {
        background: #f6f8fa !important;
        color: var(--tmc-navy);
        font-size: 12.5px;
        letter-spacing: 0.2px;
        padding: 10px 20px;
        border-bottom: 1px solid var(--tmc-line);
    }
    body[data-mode="pda"] #pdaEcran .result-table th {
        background: #fff; color: var(--tmc-muted); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--tmc-line);
    }
    body[data-mode="pda"] #pdaEcran .result-table td { border-bottom: 1px solid #eef1f4; }
    body[data-mode="pda"] #pdaEcran .result-table .detail { color: var(--tmc-muted); font-size: 12px; }
    body[data-mode="pda"] #pdaEcran .result-table .subtotal td { border-top: 1px solid var(--tmc-line); font-weight: 600; }
    /* Correction ronde 3 (colonne DÉTAIL, relecture AI2-r3) : la ligne « Tug fees in & out »
       (formulaire NIPAYIA) se repliait sur 5-6 lignes à la largeur d'origine (9/34/25/16/16 %).
       Neuf combinaisons mesurées par la relecture (NIPAYIA pire cas DÉTAIL, DJENO plus gros montants
       XAF) : 9/26/41/13/13 % ramène DÉTAIL à 3 lignes sans dégrader Description ni faire déborder
       aucun montant. Écran seulement (@media screen englobant) ; l'impression (@media print, plus
       haut, largeurs 5/38/25/16/16 %) n'est pas touchée. */
    body[data-mode="pda"] #pdaEcran .result-table th:nth-child(1) { width: 9%; }
    body[data-mode="pda"] #pdaEcran .result-table th:nth-child(2) { width: 26%; }
    body[data-mode="pda"] #pdaEcran .result-table th:nth-child(3) { width: 41%; }
    body[data-mode="pda"] #pdaEcran .result-table th:nth-child(4) { width: 13%; }
    body[data-mode="pda"] #pdaEcran .result-table th:nth-child(5) { width: 13%; }
    body[data-mode="pda"] #pdaEcran .result-table td:nth-child(4),
    body[data-mode="pda"] #pdaEcran .result-table td:nth-child(5) { white-space: nowrap; }
    body[data-mode="pda"] #pdaEcran .actions-bar {
        background: #fff; border-top: 0; border-bottom: 1px solid var(--tmc-line);
        display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px; align-items: center; justify-content: flex-start;
    }
    body[data-mode="pda"] #pdaEcran .actions-bar .btn { height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 6px; }
    /* D59 (propriétaire, 26/09/2026) : dans la carte « PFDA calculée », chaque bouton s'étire — ensemble ils
       couvrent toute la largeur de la barre ; la base reste la largeur de leur texte (sans retour à la ligne) :
       sur un écran étroit, ils passent à la ligne au lieu d'être coupés. La barre du Cash to Master n'est pas
       concernée. */
    body[data-mode="pda"] #pdaEcran #pdaResult .actions-bar .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
    /* « Enregistrer… » en bleu marine (l'action principale) ; « Exporter le PDF », Imprimer, Export CSV et
       Réinitialiser en boutons secondaires clairs. Mêmes onclick, mêmes fonctions, seul l'habillage change. */
    body[data-mode="pda"] #pdaEcran .pda-btn-pdf,
    body[data-mode="pda"] #pdaEcran .pda-btn-secondaire {
        background: #fff; color: var(--tmc-navy); border: 1px solid var(--tmc-bord-bouton); font-weight: 600;
    }
    body[data-mode="pda"] #pdaEcran .pda-btn-pdf:hover,
    body[data-mode="pda"] #pdaEcran .pda-btn-secondaire:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
    body[data-mode="pda"] #pdaEcran .pda-btn-save,
    body[data-mode="pda"] #pdaEcran .pda-btn-devis,
    body[data-mode="pda"] #pdaEcran .pda-btn-transformer {
        background: var(--tmc-navy); color: #fff; border: 1px solid var(--tmc-navy); font-weight: 600;
    }
    body[data-mode="pda"] #pdaEcran .pda-btn-save:hover,
    body[data-mode="pda"] #pdaEcran .pda-btn-devis:hover,
    body[data-mode="pda"] #pdaEcran .pda-btn-transformer:hover { background: #10233a; }
    /* La case « garder la section » était blanche sur un bandeau de couleur ; sur la bande grise
       de la refonte, blanc sur blanc = invisible. Même case, même action, teinte de la charte. */
    body[data-mode="pda"] #pdaEcran .sec-keep input { accent-color: var(--tmc-green); }
    body[data-mode="pda"] #pdaEcran .verify-badge { font-size: 12px; font-weight: 600; }
    /* Ronde 3 : grille TO / VESSEL / DATE / … en tableau clair — plus de fond bleuté ni de colonne
       d'étiquettes foncée ; mêmes cellules, mêmes id (#r_clientFull, #r_vesselName…), rien ne bouge
       de ce que garderait le document imprimé (cette table est dans #pdaResult, à l'écran ET à
       l'impression, mais SEULE la feuille @media print régit l'impression — inchangée). */
    body[data-mode="pda"] #pdaEcran .pda-info-table { background: #fff; border-bottom: 0; }
    body[data-mode="pda"] #pdaEcran .pda-info-table td {
        padding: 7px 20px; border-bottom: 1px solid var(--tmc-line); color: var(--tmc-encre); font-size: 12.5px;
    }
    body[data-mode="pda"] #pdaEcran .pda-info-table tr:last-child td { padding-bottom: 14px; }
    body[data-mode="pda"] #pdaEcran .pda-info-table .il {
        background: #fff; color: var(--tmc-muted); font-weight: 600; font-size: 11px;
        text-transform: uppercase; letter-spacing: 0.3px; border-right: 0;
    }
    /* Bandeaux du résultat : des lignes d'information dans la carte, plus des aplats criards.
       Les TEXTES sont ceux d'aujourd'hui, mot pour mot. */
    body[data-mode="pda"] #pdaEcran .excl-bar {
        background: #fff; border: 1px solid var(--tmc-line); border-left: 3px solid var(--tmc-todo);
        border-radius: 8px; color: var(--tmc-encre); font-size: 13px;
    }
    body[data-mode="pda"] #pdaEcran #fdaCheckBanner, body[data-mode="pda"] #pdaEcran #tariffAlertPanel { font-size: 13px; }
    body[data-mode="pda"] #pdaEcran .grand-total { border-top: 1px solid var(--tmc-line); }
    /* D58 (propriétaire, 26/09) : les deux tuiles gardent leur fond dégradé (bleu, vert) — le montant reste
       BLANC dessus ; le bleu marine sur bleu n'était pas lisible. */
    body[data-mode="pda"] #pdaEcran .grand-total .amount { color: #fff; }

    /* ---------- Ronde 2, écart 7 : avant le calcul, la carte « PFDA calculée » attend, vide ----------
       #pdaResult porte display:none en ligne tant qu'aucun résultat n'est affiché (au chargement, après
       resetForm(), au retour du CTM) ; la carte d'attente ne se montre qu'alors, et seulement ici. */
    #pdaAttente { display: none; }
    body[data-mode="pda"] #pdaEcran #pdaResult[style*="none"] ~ #pdaAttente {
        display: flex; flex-direction: column; flex: 1 1 auto; min-height: 320px;
    }
    #pdaAttente .pda-attente-tete { padding: 16px 20px; border-bottom: 1px solid var(--tmc-line); line-height: 1.3; }
    #pdaAttente .pda-attente-titre { font-size: 15px; font-weight: 700; color: var(--tmc-encre); }
    #pdaAttente .pda-attente-sous { font-size: 12px; color: var(--tmc-muted); }
    #pdaAttente .pda-attente-corps { padding: 28px 20px; font-size: 14px; color: var(--tmc-muted); }

}

/* ====================================================================================
   Tâche C1 (25/09/2026) — habillage de l'onglet Dossiers, planche 6 des maquettes validées.
   Comme AI-2 (PDA, ci-dessus) : TOUT est enfermé dans @media screen, le document imprimé ne
   change pas ; jetons de couleur, police et rayons de la charte AI-1 (--tmc-*) ; tout sélecteur
   préfixé #dossiersSection pour ne jamais peindre un autre onglet qui partage .card/.sidebar
   (structure relevée dans l'inventaire C1, § 5).
   ==================================================================================== */
@media screen {

    /* ---------- Bandeau jaune de rappel des signatures (Manager/Comptabilité, § Décisions) ---------- */
    #dossiersSection .dossiers-rappel-signature {
        display: flex; align-items: center; gap: 16px; padding: 12px 32px;
        background: #fff3d6; border-bottom: 1px solid #f0c36d;
        font-family: 'IBM Plex Sans', Arial, sans-serif;
    }
    #dossiersSection .dossier-rappel-puce {
        width: 26px; height: 26px; border-radius: 13px; background: var(--tmc-todo); color: #fff;
        display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
    }
    #dossiersSection .dossier-rappel-texte { flex: 1 1 auto; line-height: 1.35; color: var(--tmc-encre); font-size: 14px; }
    #dossiersSection .dossier-rappel-texte strong { font-weight: 600; }
    #dossiersSection .dossier-rappel-bouton {
        height: 36px; padding: 0 14px; border-radius: 6px; background: var(--tmc-todo); color: #fff;
        font-weight: 600; text-decoration: none; display: flex; align-items: center; font-size: 13px; flex-shrink: 0;
    }

    /* ---------- En-tête d'écran ---------- */
    #dossiersSection .dossiers-tete {
        background: #fff; border-bottom: 1px solid var(--tmc-line); padding: 18px 32px;
        display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
        font-family: 'IBM Plex Sans', Arial, sans-serif; color: var(--tmc-encre);
    }
    #dossiersSection .dossiers-tete-texte { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    #dossiersSection .dossiers-tete-titre { margin: 0; font-size: 22px; font-weight: 700; color: var(--tmc-navy); }
    #dossiersSection .dossiers-tete-sous { color: var(--tmc-muted); font-size: 13px; }
    #dossiersSection .dossiers-recherche-champ { display: flex; align-items: center; gap: 8px; }
    #dossiersSection .dossiers-recherche-champ label { font-size: 13px; color: var(--tmc-muted); }
    #dossiersSection #dossierSearch {
        height: 40px; width: 240px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
        padding: 0 12px; font-family: inherit; font-size: 14px;
    }
    #dossiersSection .dossiers-bouton-principal {
        height: 40px; padding: 0 18px; border-radius: 6px; border: 0; background: var(--tmc-green); color: #fff;
        font-weight: 600; font-size: 14px; font-family: inherit; cursor: pointer;
        display: inline-flex; align-items: center; text-decoration: none;
    }
    #dossiersSection .dossiers-bouton-principal:hover { background: #176238; }

    /* ---------- Carte liste (bord charte, jamais d'ombre) ---------- */
    #dossiersSection .dossiers-liste {
        margin: 24px 32px; background: #fff; border: 1px solid var(--tmc-line); border-radius: 8px; overflow: hidden;
    }
    #dossiersSection .dossiers-onglets {
        display: flex; gap: 4px; padding: 6px 16px 0 16px; border-bottom: 1px solid var(--tmc-line);
        align-items: center; flex-wrap: wrap; font-family: 'IBM Plex Sans', Arial, sans-serif;
    }
    /* .tab-btn / .tab-active existent déjà (§ DOSSIERS, plus haut) — recolorés navy (charte) au lieu du
       violet d'origine, réutilisés tels quels par switchDossierTab() (dossiers.js, inchangé). */
    #dossiersSection .dossiers-filtres { display: flex; align-items: center; gap: 14px; margin-left: auto; padding: 8px 0; font-size: 13px; color: var(--tmc-muted); }
    #dossiersSection .dossiers-filtres > * { display: flex; align-items: center; gap: 6px; }
    #dossiersSection .dossiers-filtres select {
        height: 32px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton); background: #fff;
        font-family: inherit; font-size: 13px; padding: 0 8px; color: var(--tmc-encre);
    }
    #dossiersSection .dossiers-filtres label { cursor: pointer; }
    #dossiersSection .dossiers-filtres input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--tmc-green); margin: 0; }

    /* ---------- Avancement : 6 étapes en barres + libellé (colonne du tableau) ---------- */
    #dossiersSection .dossier-etapes { display: flex; align-items: center; gap: 4px; min-width: 140px; }
    #dossiersSection .dossier-etape { height: 8px; flex: 1 1 0; border-radius: 4px; background: var(--tmc-line); }
    #dossiersSection .dossier-etape.ok { background: var(--tmc-ok); }
    #dossiersSection .dossier-etape.todo { background: var(--tmc-todo); }
    #dossiersSection .dossier-etape.info { background: var(--tmc-info); }
    #dossiersSection .dossier-etape-libelle { margin-left: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--tmc-muted); }
    #dossiersSection .dossier-etape-libelle.ok { color: var(--tmc-ok); }
    #dossiersSection .dossier-etape-libelle.todo { color: var(--tmc-todo); }
    #dossiersSection .dossier-etape-libelle.info { color: var(--tmc-info); }

    /* ---------- Prochaine action (colonne du tableau) ---------- */
    #dossiersSection .dossier-action-lien { font-weight: 600; color: var(--tmc-navy); text-decoration: none; }
    #dossiersSection .dossier-action-lien:hover { text-decoration: underline; }
    #dossiersSection .dossier-action-texte { color: var(--tmc-muted); font-size: 13px; }
    #dossiersSection .dossier-age { margin-left: 6px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
    #dossiersSection .dossier-age.ok { background: #eef1f4; color: var(--tmc-muted); }
    #dossiersSection .dossier-age.orange { background: #fff3d6; color: var(--tmc-todo); }
    #dossiersSection .dossier-age.rouge { background: #fdecec; color: var(--tmc-block); }
    #dossiersSection .dossier-action-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; color: var(--tmc-encre); }
    #dossiersSection .dossier-action-check input { width: 16px; height: 16px; accent-color: #16a085; margin: 0; }
    /* Tache F1 (D45, D52) : « Lancer FDA », « Ouvrir la FDA », « FDA prete — a envoyer au client », « Contestation du client ». */
    #dossiersSection .dossier-action-bouton {
        height: 28px; padding: 0 10px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; background: #fff;
        color: var(--tmc-navy); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
    }
    #dossiersSection .dossier-action-bouton:hover { background: #f6f8fa; }
    #dossiersSection .dossier-action-bouton.principal { background: var(--tmc-green); border-color: var(--tmc-green); color: #fff; }

    /* ---------- Regroupement par client : en-tête et sous-total de groupe ---------- */
    #dossiersSection tr.dossier-groupe-entete td { background: #f4f6f8; font-weight: 700; color: var(--tmc-navy); padding: 8px 20px; }
    #dossiersSection .dossier-groupe-nb { font-weight: 400; color: var(--tmc-muted); }
    #dossiersSection tr.dossier-groupe-soustotal td { background: #f8fafc; font-weight: 600; color: var(--tmc-encre); border-top: 1px solid var(--tmc-line); }

    /* ---------- D76 (propriétaire, 27/09/2026) : colonnes de montants alignées ---------- */
    /* Montant collé au bord droit, chiffres de largeur fixe ; badges (PDF, Check & Balance) dans un emplacement FIXE à
       gauche, présent même vide : les montants d'une colonne tombent sur la même verticale, sous-totaux compris. */
    #dossiersSection .dossiers-table td.td-num { text-align: right; font-variant-numeric: tabular-nums; }
    #dossiersSection .dm-ligne { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    #dossiersSection .dm-emplacement { flex: 0 0 32px; display: inline-flex; align-items: center; gap: 3px; }
    #dossiersSection .dm-emplacement.dm-large { flex-basis: 52px; }
    #dossiersSection .dm-emplacement .pdf-link-btn { margin-left: 0; }
    #dossiersSection .dm-emplacement a { line-height: 1; }
    #dossiersSection .dm-montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
    #dossiersSection .dm-sous { text-align: right; font-size: 0.72rem; }
    #dossiersSection .dm-estime { color: var(--tmc-muted); font-style: italic; }

    /* ---------- B-fixes (27/09/2026) : données de l'ancien tableau rétablies en sous-lignes, sans nouvelle colonne ---------- */
    /* Même taille et même gris que la cargaison sous le navire ; chiffres de largeur fixe (D76). Badges d'ancienneté :
       .aging-badge / .aging-30 / -60 / -90 d'origine (getAgingBadge), mêmes couleurs de gravité. */
    #dossiersSection .dossier-sous { margin-top: 3px; font-size: 0.78rem; color: var(--tmc-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }   /* revue B-fixes M-2 */
    #dossiersSection .dossier-tbc { color: var(--tmc-todo); font-size: 0.7rem; font-weight: 600; }   /* « TBC » orange, comme master */

    /* Ligne visuelle sur une escale dont la FDA attend une signature (même teinte que le bandeau jaune). */
    #dossiersSection tr.dossier-row.dossier-a-signer { background: #fff8e8; }
}

/* ====================================================================================
   Tache C2 (25/09/2026, D43) : liste des escales FDA en trois sections (charte-ecrans.md
   "Liste des escales FDA"). Cartes blanches, pas de bandeau colore empile (regle generale
   AI-1) : chaque section est SA PROPRE carte, jamais fda-carte (deja mise a padding:0 pour
   la carte UNIQUE qui enveloppait l'ancienne liste plate, cf. #fdaSection .fda-liste-ecran
   .fda-carte dans index.html - la reutiliser ici aurait ecrase le padding de chaque section).
   ==================================================================================== */
#fdaListeCard .fda-liste-compteur { padding: 14px 20px 0; font-size: 13px; color: var(--tmc-muted); }
#fdaListeCard .fda-liste-filtres { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 20px 18px; }
#fdaListeCard .fda-liste-filtres select {
    height: 34px; padding: 0 10px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
    background: #fff; font-family: inherit; font-size: 13px; color: var(--tmc-encre);
}
#fdaListeCard .fda-liste-filtre-case { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tmc-encre); cursor: pointer; }
#fdaListeCard .fda-liste-filtre-case input { width: 16px; height: 16px; accent-color: var(--tmc-green); cursor: pointer; }
#fdaListeCard .fda-liste-section {
    background: #fff; border: 1px solid var(--tmc-line); border-radius: 8px; overflow: hidden; margin: 0 20px 16px;
}
#fdaListeCard .fda-liste-section-titre {
    margin: 0; padding: 14px 20px; font-size: 15px; font-weight: 700; color: var(--tmc-navy);
    border-bottom: 1px solid var(--tmc-line);
}
#fdaListeCard .fda-liste-section-titre:last-child { border-bottom: none; }   /* section vide ou repliee : rien sous le titre */
#fdaListeCard .fda-liste-section-repli { cursor: pointer; user-select: none; }
#fdaListeCard .fda-liste-section-repli:hover { background: #f6f8fa; }
#fdaListeCard .fda-liste-chevron { display: inline-block; width: 1em; color: var(--tmc-muted); }
#fdaListeCard .fda-liste-section-vide { margin: 0; padding: 14px 20px; font-size: 13px; color: var(--tmc-muted); }
#fdaListeCard .fda-liste-table { margin: 0; }
#fdaListeCard .fda-liste-table th.th-sort { cursor: pointer; }
#fdaListeCard .fda-liste-plus { display: block; margin: 14px 20px; }

/* Tache F1 (D45, D50, 26/09/2026) : panneau « Lancer une FDA » en tete de la liste de l'onglet FDA. */
#fdaListeCard .fda-lancer {
    margin: 14px 20px 0; padding: 14px 16px; background: #fff; border: 1px solid var(--tmc-line); border-radius: 8px;
    display: flex; flex-direction: column; gap: 8px;
}
#fdaListeCard .fda-lancer-rang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#fdaListeCard .fda-lancer label { font-weight: 600; color: var(--tmc-navy); }
#fdaListeCard .fda-lancer input {
    height: 34px; width: 220px; padding: 0 10px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
    font-family: inherit; font-size: 14px; color: var(--tmc-encre);
}
#fdaListeCard .fda-lancer .fda-avert { margin: 0; }
#fdaListeCard .fda-lancer-inconnu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Tache F1 (D51, D52.6) : avancement en bout de ligne de la section « En cours » — trois tirets + un mot
   court, meme couleurs que la barre d'avancement de l'ecran Dossiers (C1) : franchi vert, courant bleu,
   renvoyee/contestee orange ; alerte « Contestee : <motif> » bien visible sur la ligne. */
#fdaListeCard .fda-avancement { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#fdaListeCard .fda-tirets { display: inline-flex; gap: 3px; }
#fdaListeCard .fda-tiret { width: 18px; height: 6px; border-radius: 3px; background: var(--tmc-line); }
#fdaListeCard .fda-tiret.ok { background: var(--tmc-ok); }
#fdaListeCard .fda-tiret.info { background: var(--tmc-info); }
#fdaListeCard .fda-tiret.todo { background: var(--tmc-todo); }
#fdaListeCard .fda-tiret.block { background: var(--tmc-block); }
#fdaListeCard .fda-avancement-mot { font-size: 12px; font-weight: 600; color: var(--tmc-muted); }
#fdaListeCard .fda-avancement-mot.ok { color: var(--tmc-ok); }
#fdaListeCard .fda-avancement-mot.info { color: var(--tmc-info); }
#fdaListeCard .fda-avancement-mot.todo { color: var(--tmc-todo); }
#fdaListeCard .fda-avancement-mot.block { color: var(--tmc-block); }
#fdaListeCard .fda-liste-alerte {
    margin-top: 6px; padding: 4px 8px; border-left: 3px solid var(--tmc-todo); background: #fff3d6;
    color: var(--tmc-todo); font-size: 12px; font-weight: 700; white-space: normal;
}
#fdaListeCard .fda-liste-actions { white-space: nowrap; }

/* ====================================================================================
   Tâche C9 (26/09/2026) — habillage de l'onglet HUSB, planche HUSB.dc.html, même construction que
   l'écran PDA (AI-2) : en-tête blanc, cartes blanches à bord --tmc-line, grille de champs à trois
   colonnes, devis à droite. TOUT est enfermé dans @media screen et préfixé #husbSection / #husbTete :
   aucun autre onglet n'est peint, le devis PDF (jsPDF, husbExportPDF) ne change pas d'un pixel.
   Inventaire : docs/cloud/rapports/C9-inventaire-husb.md.
   ==================================================================================== */
@media screen {
    #husbSection { font-family: 'IBM Plex Sans', Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--tmc-encre); }

    /* ---------- En-tête d'écran ---------- */
    .husb-tete {
        background: #fff; border-bottom: 1px solid var(--tmc-line); padding: 14px 32px;
        display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    }
    .husb-tete-texte { flex: 1 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .husb-titre-rang { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .husb-tete-champ-ref { display: inline-flex; align-items: center; gap: 8px; }
    .husb-tete-ref {
        width: 172px; height: 38px; box-sizing: border-box; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
        padding: 0 10px; font-family: inherit; font-size: 19px; font-weight: 700; color: var(--tmc-navy); background: #fff;
    }
    .husb-tete-ref:hover { border-color: var(--tmc-navy); }
    .husb-tete-ref:focus { border-color: var(--tmc-navy); outline: 2px solid var(--tmc-green-clair); outline-offset: 1px; }
    .husb-titre { margin: 0; font-size: 22px; font-weight: 700; color: var(--tmc-navy); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .husb-titre-navire { color: var(--tmc-muted); font-weight: 500; }
    .husb-tete-etiquette { font-size: 12px; color: var(--tmc-muted); }
    .husb-tete-activite { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
    .husb-tete-type {
        height: 34px; max-width: 300px; min-width: 0; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; padding: 0 8px;
        font-family: inherit; font-size: 14px; font-weight: 600; background: #fff; color: var(--tmc-encre);
    }
    .husb-tete-sous { color: var(--tmc-muted); font-size: 14px; line-height: 18px; }
    .husb-tete-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    #husbImporter {
        height: 40px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton);
        background: #fff; color: var(--tmc-encre); font-weight: 500; font-size: 14px; justify-content: center;
    }
    #husbImporter:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
    #husbCalculer {
        height: 40px; padding: 0 18px; border-radius: 6px; border: 0; background: var(--tmc-green); color: #fff;
        font-weight: 600; font-size: 14px; width: auto; justify-content: center;
    }
    #husbCalculer:hover { background: #17633a; }
    #husbImporter:focus-visible, #husbCalculer:focus-visible { outline: 2px solid var(--tmc-navy); outline-offset: 2px; }

    /* ---------- Les deux colonnes (640 px à gauche, comme la planche 5) ---------- */
    .husb-ecran { padding: 16px 32px 24px; }
    .husb-colonnes { display: grid; grid-template-columns: 640px minmax(0, 1fr); gap: 24px; align-items: start; }
    @media (max-width: 1240px) { .husb-colonnes { grid-template-columns: 1fr; } }
    .husb-formulaire, .husb-port, .husb-devis { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

    /* ---------- Cartes : blanches, bord --tmc-line, rayon 8, plus de bandeau de couleur ---------- */
    #husbSection .card { background: #fff; border: 1px solid var(--tmc-line); border-radius: 8px; box-shadow: none; margin: 0; }
    #husbSection .card > .card-header {
        background: #fff !important; color: var(--tmc-encre); font-size: 15px; font-weight: 700;
        padding: 12px 20px 0; border: 0; line-height: 22px; display: flex; align-items: baseline; gap: 10px;
    }
    #husbSection .husb-formulaire .card > .card-body { padding: 8px 20px 12px; }
    .husb-aide { font-size: 12px; font-weight: 400; color: var(--tmc-muted); }
    .husb-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: end; }
    .husb-large-2 { grid-column: span 2; }
    .husb-pleine { grid-column: 1 / -1; }
    #husbSection .form-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    #husbSection .form-group > label { font-size: 12px; font-weight: 400; color: var(--tmc-muted); text-transform: none; letter-spacing: 0; line-height: 16px; }
    .husb-libelle-aide { color: #8a96a3; }
    #husbSection .husb-formulaire input[type="text"], #husbSection .husb-formulaire input[type="number"],
    #husbSection .husb-formulaire input[type="date"], #husbSection .husb-formulaire input[type="time"],
    #husbSection .husb-formulaire select {
        height: 32px; padding: 0 10px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; font-family: inherit;
        font-size: 14px; color: var(--tmc-encre); background: #fff; min-width: 0; max-width: 100%;
    }
    #husbSection .husb-formulaire input:focus, #husbSection .husb-formulaire select:focus {
        outline: 2px solid var(--tmc-green-clair); outline-offset: 1px; border-color: var(--tmc-navy);
    }
    .husb-date-tba { display: flex; gap: 6px; }
    .husb-date-tba input[type="date"] { flex: 1 1 auto; padding-left: 6px; padding-right: 4px; }
    .husb-date-tba input[type="time"] { flex: 0 0 58px; padding-left: 6px; padding-right: 4px; }
    .husb-date-tba input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
    .husb-case { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tmc-encre); cursor: pointer; padding: 4px 0 0; }
    .husb-case input { width: 16px; height: 16px; margin: 0; accent-color: var(--tmc-green); flex-shrink: 0; }

    /* ---------- Cartes d'attente (aucune activité choisie ; devis pas encore calculé) ---------- */
    .husb-attente { max-width: 640px; }
    .husb-attente-tete { padding: 16px 20px; border-bottom: 1px solid var(--tmc-line); line-height: 1.3; }
    .husb-attente-titre { font-size: 15px; font-weight: 700; color: var(--tmc-encre); }
    .husb-attente-sous { font-size: 12px; color: var(--tmc-muted); }
    .husb-attente-corps { padding: 28px 20px; font-size: 14px; color: var(--tmc-muted); }
    #husbAttente { display: none; }
    #husbResult[style*="none"] ~ #husbAttente { display: flex; flex-direction: column; min-height: 320px; }

    /* ---------- Colonne de droite : le devis ---------- */
    #husbResult { display: flex; flex-direction: column; gap: 10px; }
    #husbResult .card > .card-header {
        background: #f6f8fa !important; color: var(--tmc-navy); font-size: 12.5px; letter-spacing: 0.2px;
        padding: 10px 20px; border-bottom: 1px solid var(--tmc-line); align-items: center; justify-content: flex-start;
    }
    #husbSectionH > .card-header, #husbPdaHeader > .card-header { justify-content: space-between; }
    #husbResult #husbPdaHeader > .card-header { background: #fff !important; padding: 16px 20px; gap: 12px; }
    .husb-devis-titre { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: var(--tmc-encre); line-height: 1.3; }
    #husbPdaHeader .husb-actions { flex-shrink: 0; }
    #husbPdaHeader .husb-actions .btn { white-space: nowrap; }
    .husb-devis-sous { font-size: 12px; font-weight: 400; color: var(--tmc-muted); }
    #husbResult .pda-header-body { padding: 12px 20px 14px; border-bottom: 0; }
    #husbResult .pda-header-grid { font-size: 12.5px; gap: 4px 20px; }
    #husbResult .pda-header-grid strong { color: var(--tmc-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
    .husb-sec-keep { margin-right: 9px; display: inline-flex; vertical-align: middle; }
    .husb-sec-keep input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--tmc-green); }
    #husbResult .result-table th {
        background: #fff; color: var(--tmc-muted); font-size: 11px; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.3px; border-bottom: 1px solid var(--tmc-line); padding: 8px 10px;
    }
    #husbResult .result-table td { border-bottom: 1px solid #eef1f4; padding: 7px 10px; }
    #husbResult .result-table td:first-child { padding-left: 20px; }
    #husbResult .result-table th:first-child { padding-left: 20px; }
    /* Six colonnes (case, #, description, détail, EUR, XAF) : la feuille de base fixe les largeurs pour les
       cinq colonnes du PDA (9/34/25/16/16 %), ce qui laissait 0 % au XAF — reprises ici, écran seulement.
       Le tableau H (.husb-table) porte ses propres largeurs en ligne : non touché. */
    #husbResult .result-table:not(.husb-table) th:nth-child(1) { width: 34px; }
    #husbResult .result-table:not(.husb-table) th:nth-child(2) { width: 32px; }
    #husbResult .result-table:not(.husb-table) th:nth-child(3) { width: auto; }
    #husbResult .result-table:not(.husb-table) th:nth-child(4) { width: 31%; }
    #husbResult .result-table:not(.husb-table) th:nth-child(5) { width: 96px; }
    #husbResult .result-table:not(.husb-table) th:nth-child(6) { width: 110px; }
    #husbResult .husb-col-case { width: 34px; } #husbResult .husb-col-num { width: 32px; } #husbResult .husb-col-detail { width: 31%; }
    #husbResult .husb-col-eur { width: 96px; } #husbResult .husb-col-xaf { width: 110px; }
    #husbResult .result-table:not(.husb-table) th:nth-child(3), #husbResult .result-table:not(.husb-table) td:nth-child(3),
    #husbResult .result-table:not(.husb-table) th:nth-child(4), #husbResult .result-table:not(.husb-table) td:nth-child(4) { text-align: left; }
    #husbResult .result-table:not(.husb-table) td:nth-child(5), #husbResult .result-table:not(.husb-table) td:nth-child(6) { white-space: nowrap; }
    #husbResult .result-table:not(.husb-table) td:nth-child(3) { font-weight: 500; }
    #husbResult .result-table td:nth-child(2) { color: var(--tmc-muted); font-size: 12px; }
    #husbResult .result-table .detail { color: var(--tmc-muted); font-size: 12px; }
    #husbResult .result-table .vat-row { background: #fff; }
    #husbResult .result-table .vat-row td { color: var(--tmc-muted); }
    #husbResult .result-table .subtotal { background: #fff; }
    #husbResult .result-table .subtotal td { border-top: 1px solid var(--tmc-line); font-weight: 600; color: var(--tmc-navy); }
    #husbResult .result-table input[type="checkbox"] { accent-color: var(--tmc-green); }
    #husbResult .husb-table thead th { background: #fff; color: var(--tmc-muted); }
    #husbResult .husb-cat, #husbResult .husb-svc, #husbResult .husb-unit, #husbResult .husb-desc,
    #husbResult .husb-price, #husbResult .husb-qty, #husbResult .husb-agency {
        border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; font-family: inherit;
    }
    #husbResult .husb-agency { width: 80px; text-align: right; padding: 3px 6px; }
    .husb-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .husb-btn-ligne {
        height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton); background: #fff;
        color: var(--tmc-encre); font-size: 12.5px; font-weight: 500; white-space: nowrap;
    }
    .husb-btn-ligne:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
    .husb-btn-pdf {
        height: 34px; padding: 0 14px; border-radius: 6px; background: #fff; color: var(--tmc-navy);
        border: 1px solid var(--tmc-bord-bouton); font-weight: 600; font-size: 12.5px;
    }
    .husb-btn-pdf:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
    .husb-btn-save { height: 34px; padding: 0 14px; border-radius: 6px; background: var(--tmc-navy); color: #fff; border: 1px solid var(--tmc-navy); font-weight: 600; font-size: 12.5px; }
    .husb-btn-save:hover { background: #10233a; }
    .husb-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 20px; flex-wrap: wrap; }
    .husb-total-libelle { font-weight: 700; font-size: 15px; }
    .husb-total-montants { display: flex; gap: 28px; align-items: baseline; }
    #husbGrandXAF { font-size: 20px; font-weight: 700; color: var(--tmc-encre); }
    #husbGrandEUR { font-size: 20px; font-weight: 700; color: var(--tmc-navy); }
    /* La fenêtre « + Catégorie » (husbAddCategory, .husb-popup ajoutée à #husbSection) : cadre de la charte. */
    #husbSection .husb-popup { border: 1px solid var(--tmc-line); box-shadow: 0 20px 60px rgba(23,50,77,0.35); font-family: inherit; }
}

/* ====================================================================================
   Tâche C9 (26/09/2026) — écran Information à la charte (planche Information.dc.html, habillage seul) :
   en-tête blanc avec la recherche AIS, cartes blanches à bord --tmc-line. Préfixé #infoSection ; écran
   seulement. Inventaire : docs/cloud/rapports/C9-inventaire-information.md.
   ==================================================================================== */
@media screen {
    #infoSection { font-family: 'IBM Plex Sans', Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--tmc-encre); }
    .info-tete {
        background: #fff; border-bottom: 1px solid var(--tmc-line); padding: 18px 32px;
        display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    }
    .info-tete-texte { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .info-titre { margin: 0; font-size: 22px; font-weight: 700; color: var(--tmc-navy); }
    .info-tete-sous { color: var(--tmc-muted); font-size: 14px; line-height: 18px; }
    .info-tete-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .info-tete-etiquette { font-size: 13px; color: var(--tmc-muted); }
    #aisVesselSearch {
        height: 40px; width: 260px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; padding: 0 12px;
        font-family: inherit; font-size: 14px; color: var(--tmc-encre); background: #fff;
    }
    #aisVesselSearch:focus { border-color: var(--tmc-navy); outline: 2px solid var(--tmc-green-clair); outline-offset: 1px; }
    .info-btn-principal {
        height: 40px; padding: 0 16px; border-radius: 6px; border: 0; background: var(--tmc-navy); color: #fff;
        font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
    }
    .info-btn-principal:hover { background: #10233a; }
    .info-btn {
        height: 40px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton); background: #fff;
        color: var(--tmc-encre); font-family: inherit; font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap;
        display: inline-flex; align-items: center; text-decoration: none;
    }
    .info-btn:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
    .info-btn:focus-visible, .info-btn-principal:focus-visible { outline: 2px solid var(--tmc-navy); outline-offset: 2px; }
    .info-corps { padding: 16px 32px 24px; display: flex; flex-direction: column; gap: 16px; }
    #infoSection .card { background: #fff; border: 1px solid var(--tmc-line); border-radius: 8px; box-shadow: none; margin: 0; }
    #infoSection .card > .card-header {
        background: #fff; color: var(--tmc-encre); font-size: 15px; font-weight: 700; padding: 14px 20px 0;
        border: 0; line-height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    }
    #infoSection .card > .card-body { padding: 10px 20px 16px; }
    .info-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    #infoSection .card-header .info-btn { height: 32px; font-size: 13px; padding: 0 12px; font-weight: 400; }
    .info-aide { font-size: 12.5px; color: var(--tmc-muted); line-height: 1.5; }
    .info-navires { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; min-height: 24px; }
    .info-vide { color: var(--tmc-muted); font-size: 13px; }
    /* Les jetons de navire sont écrits par renderVesselLinks() avec leurs styles en ligne (dossiers.js) : non touchés. */
    .info-rapport-rang { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0 8px; }
    .info-champ { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .info-champ label { font-size: 12px; color: var(--tmc-muted); }
    #reportQuery {
        height: 40px; width: 100%; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; padding: 0 12px;
        font-family: inherit; font-size: 14px; color: var(--tmc-encre); background: #fff;
    }
    #reportQuery:focus { border-color: var(--tmc-navy); outline: 2px solid var(--tmc-green-clair); outline-offset: 1px; }
    .info-rapport { margin-top: 14px; }
    .info-rapport:empty { display: none; }
    #infoSection .dossiers-table th { background: #fff; color: var(--tmc-muted); font-size: 11px; border-bottom: 1px solid var(--tmc-line); }
    #infoSection .dossiers-table td { border-bottom: 1px solid #eef1f4; }
}

/* ====================================================================================
   Tâche C9 (26/09/2026) — écran Admin à la charte (habillage seul) : en-tête blanc, cartes blanches à bord
   --tmc-line, la fiche navire reste un <details>. Préfixé #adminSection ; écran seulement. Les couleurs écrites
   en ligne par dossiers.js (pastilles de rôle, boutons des comptes, lien PDF) ne sont pas touchées.
   Inventaire : docs/cloud/rapports/C9-inventaire-admin.md.
   ==================================================================================== */
@media screen {
    #adminSection { font-family: 'IBM Plex Sans', Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--tmc-encre); }
    .admin-tete { background: #fff; border-bottom: 1px solid var(--tmc-line); padding: 18px 32px; display: flex; align-items: center; gap: 24px; }
    .admin-tete-texte { display: flex; flex-direction: column; gap: 4px; }
    .admin-titre { margin: 0; font-size: 22px; font-weight: 700; color: var(--tmc-navy); }
    .admin-tete-sous { color: var(--tmc-muted); font-size: 14px; line-height: 18px; }
    .admin-corps { padding: 16px 32px 24px; display: flex; flex-direction: column; gap: 16px; }
    #adminSection .card { background: #fff; border: 1px solid var(--tmc-line); border-radius: 8px; box-shadow: none; margin: 0; }
    #adminSection .card > .card-header {
        background: #fff; color: var(--tmc-encre); font-size: 15px; font-weight: 700; padding: 14px 20px 0;
        border: 0; line-height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    }
    #adminSection .card > .card-body { padding: 10px 20px 16px; }
    /* Le résumé du <details> : même ligne de titre, curseur, sans la flèche native ; la carte fermée tient sur son titre. */
    #adminSection summary.admin-summary { cursor: pointer; list-style: none; padding-bottom: 14px; }
    #adminSection summary.admin-summary::-webkit-details-marker { display: none; }
    #adminSection summary.admin-summary:hover .admin-summary-titre { color: var(--tmc-navy); }
    #adminSection #vesselsDbCard[open] > summary.admin-summary { border-bottom: 1px solid var(--tmc-line); }
    .admin-aide { font-size: 12.5px; font-weight: 400; color: var(--tmc-muted); line-height: 1.5; }
    .admin-libelle { font-size: 13px; font-weight: 600; color: var(--tmc-encre); }
    .admin-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
    .admin-actions input[type="file"] { font-size: 13px; font-family: inherit; color: var(--tmc-encre); }
    .admin-actions input[type="text"], .admin-actions input[type="date"] {
        height: 34px; padding: 0 10px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
        font-family: inherit; font-size: 13.5px; color: var(--tmc-encre); background: #fff; min-width: 200px;
    }
    .admin-logo { padding-top: 10px; border-top: 1px solid #eef1f4; }
    .admin-btn-principal {
        height: 34px; padding: 0 14px; border-radius: 6px; border: 0; background: var(--tmc-navy); color: #fff;
        font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
    }
    .admin-btn-principal:hover { background: #10233a; }
    .admin-btn {
        height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton); background: #fff;
        color: var(--tmc-encre); font-family: inherit; font-weight: 500; font-size: 13.5px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
    }
    .admin-btn:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
    .admin-btn:focus-visible, .admin-btn-principal:focus-visible { outline: 2px solid var(--tmc-navy); outline-offset: 2px; }
    .admin-retour { padding: 8px 12px; margin-bottom: 10px; border-radius: 6px; background: #e3f3e9; color: var(--tmc-green); font-size: 13px; }
    .admin-table { overflow-x: auto; font-size: 13px; }
    .admin-vide { text-align: center; padding: 16px; color: var(--tmc-muted); }
    #adminSection .dossiers-table th, #adminSection .result-table th { background: #fff; color: var(--tmc-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--tmc-line); }
    #adminSection .dossiers-table td, #adminSection .result-table td { border-bottom: 1px solid #eef1f4; }
    .admin-creation { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tmc-line); }
    .admin-sous-titre { font-size: 13px; font-weight: 600; color: var(--tmc-encre); margin-bottom: 8px; }
    .admin-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: center; }
    .admin-grille input, .admin-grille select {
        height: 34px; padding: 0 10px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
        font-family: inherit; font-size: 13.5px; color: var(--tmc-encre); background: #fff; min-width: 0;
    }
    /* Mot de passe provisoire, affiché une seule fois : encart qui doit se voir (jaune de la charte). */
    .admin-provisoire { margin-top: 10px; padding: 12px 14px; background: #fff3d6; border: 1px solid #f0c36d; border-radius: 8px; font-size: 14px; color: var(--tmc-encre); }
    .admin-journal { font-size: 13px; color: var(--tmc-muted); }
}
/* Tâche C9 : la base clients (renderClientsTable, dossiers.js) porte NEUF colonnes dans une .result-table dont
   la feuille de base fixe les largeurs pour les cinq colonnes du PDA — les quatre dernières (Email, Contact,
   TRN, Enregistrer) restaient rognées à droite. Écran Admin seulement : largeurs automatiques. */
@media screen {
    #adminSection .result-table { table-layout: auto; }
    #adminSection .result-table th:nth-child(n) { width: auto; }
    #adminSection .result-table th:nth-child(n+3), #adminSection .result-table td:nth-child(n+3) { text-align: left; }
    #adminSection .result-table td input[type="text"] { min-width: 120px; height: 30px; padding: 0 8px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; font-family: inherit; }
}

/* ====================================================================================
   D77 (propriétaire, 27/09/2026) — onglet « Paiements & SOA » à la charte : en-tête blanc, cartes blanches à bord
   --tmc-line, titres bleu marine, plus de bandeaux de couleur, l'action principale en vert ; mêmes composants que les
   écrans Dossiers et Admin refaits. Préfixé #paiementsSection / .paiements-* ; écran seulement (tout porte no-print).
   Les couleurs écrites en ligne par dossiers.js dans les résultats (rapprochement du relevé, import SOA, historique)
   ne sont pas touchées. Inventaire : docs/cloud/rapports/D77-inventaire.md.
   ==================================================================================== */
@media screen {
    #paiementsSection { font-family: 'IBM Plex Sans', Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--tmc-encre); }
    .paiements-tete { background: #fff; border-bottom: 1px solid var(--tmc-line); padding: 18px 32px; }
    .paiements-tete-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .paiements-titre { margin: 0; font-size: 22px; font-weight: 700; color: var(--tmc-navy); }
    .paiements-aide { margin: 0; font-size: 13px; font-weight: 400; color: var(--tmc-muted); line-height: 1.5; }
    .paiements-aide strong { font-weight: 600; color: var(--tmc-encre); }
    .paiements-corps { padding: 16px 32px 24px; display: flex; flex-direction: column; gap: 16px; }
    #paiementsSection .card { background: #fff; border: 1px solid var(--tmc-line); border-radius: 8px; box-shadow: none; margin: 0; }
    #paiementsSection .card > .card-header {
        background: #fff; color: var(--tmc-navy); font-size: 16px; font-weight: 700; line-height: 22px;
        padding: 14px 20px; border-bottom: 1px solid var(--tmc-line);
    }
    #paiementsSection .card > .card-body { padding: 0 20px; }
    /* Un bloc par ancienne carte : titre bleu marine, séparé du suivant par un filet. */
    .paiements-bloc { padding: 16px 0 18px; }
    .paiements-bloc + .paiements-bloc { border-top: 1px solid var(--tmc-line); }
    .paiements-bloc-titre { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--tmc-navy); }
    .paiements-bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
    .paiements-bloc-tete .paiements-bloc-titre { margin: 0; }
    .paiements-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
    .paiements-bloc-tete .paiements-actions { margin: 0; }
    .paiements-grille { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
    .paiements-champ { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; }
    .paiements-champ-court { flex: 0 1 170px; }
    .paiements-champ label { font-size: 12px; color: var(--tmc-muted); }
    .paiements-champ select, .paiements-champ input[type="number"], .paiements-bloc-tete input[type="text"] {
        height: 38px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
        font-family: inherit; font-size: 14px; color: var(--tmc-encre); background: #fff; min-width: 0;
    }
    .paiements-bloc-tete input[type="text"] { width: 260px; height: 34px; font-size: 13px; }
    .paiements-champ select:focus, .paiements-champ input[type="number"]:focus, .paiements-bloc-tete input[type="text"]:focus {
        border-color: var(--tmc-navy); outline: 2px solid var(--tmc-green-clair); outline-offset: 1px;
    }
    #paiementsSection input[type="file"] { font-family: inherit; font-size: 13px; color: var(--tmc-encre); }
    .paiements-champ input[type="file"] { height: 38px; line-height: 38px; }
    .paiements-btn-principal {
        height: 38px; padding: 0 16px; border-radius: 6px; border: 0; background: var(--tmc-green); color: #fff;
        font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
    }
    .paiements-btn-principal:hover { background: #176238; }
    .paiements-btn {
        height: 38px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton); background: #fff; color: var(--tmc-encre);
        font-family: inherit; font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
    }
    .paiements-btn:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
    .paiements-bloc-tete .paiements-btn { height: 34px; font-size: 13px; }
    .paiements-btn:focus-visible, .paiements-btn-principal:focus-visible { outline: 2px solid var(--tmc-navy); outline-offset: 2px; }
    .paiements-statut { font-size: 13px; color: var(--tmc-muted); }
    /* Colonnes du SOA PDF : même encart qu'avant, aux couleurs de la charte. */
    .paiements-colonnes {
        display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 4px; padding: 8px 12px;
        background: #f6f8fa; border: 1px solid var(--tmc-line); border-radius: 6px;
    }
    .paiements-colonnes-titre { font-size: 11px; font-weight: 600; color: var(--tmc-muted); letter-spacing: 0.3px; }
    #paiementsSection .soa-col-opt { font-size: 13px; color: var(--tmc-encre); }
    #paiementsSection .soa-col-opt input { accent-color: var(--tmc-green); }
    #paiementsSection .paiements-colonnes .paiements-aide { font-size: 12px; }
    /* Tableaux rendus par dossiers.js : en-têtes et filets de la charte partout. La feuille de base fixe les largeurs pour les
       cinq colonnes du PDA : le rapprochement du relevé (proposition coupée à 16 %) et l'historique des SOA passent en largeurs
       automatiques, texte à gauche — les montants restent à droite (alignement écrit en ligne par dossiers.js), comme dans
       Admin (C9). Les tableaux de l'import SOA gardent la disposition fixe : leurs boutons « Importer → » / « Lier » occupent
       100 % d'une colonne de 110 px, qu'une largeur automatique ferait déborder. */
    #paiementsSection .result-table th { background: #fff; color: var(--tmc-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; border-bottom: 1px solid var(--tmc-line); }
    #paiementsSection .result-table td { border-bottom: 1px solid #eef1f4; }
    #bankResults .result-table, #soaImportsList .result-table { table-layout: auto; }
    #bankResults .result-table th:nth-child(n), #soaImportsList .result-table th:nth-child(n) { width: auto; }
    #bankResults .result-table th:nth-child(n+3), #bankResults .result-table td:nth-child(n+3),
    #soaImportsList .result-table th:nth-child(n+3), #soaImportsList .result-table td:nth-child(n+3) { text-align: left; }
    /* Défaut antérieur à D77 (mesuré sur la version d'avant le déplacement, dans l'onglet Dossiers : bord droit du bouton à
       1 586 px, carte à 1 425 px) : dans l'import SOA, « Importer → » et « 🔗 Lier à un dossier » d'une ligne absente — deux
       boutons à 100 % de largeur, sans espace entre eux — restaient côte à côte ; « Lier » sortait de la carte, coupé,
       impossible à cliquer. Empilés, les deux se voient (tests/ui/paiements-soa.mjs, § 5). */
    #soaImportResults .result-table td > button[style*="width:100%"] { display: block; }

    /* Sous-onglet SOA de Dossiers : « Générer le SOA » (bouton secondaire de la charte, à la hauteur des filtres) n'apparaît que
       lorsque ce sous-onglet est actif — switchDossierTab() pose .tab-active sur #tabSOA, frère précédent de .dossiers-filtres.
       Un rôle sans droit sur l'onglet le reçoit en style.display = 'none' (appliquerDroitsOnglets, ctm.js), qui l'emporte. */
    #dossiersSection .dossiers-filtres > .dossiers-generer-soa { display: none; }
    #dossiersSection #tabSOA.tab-active ~ .dossiers-filtres > .dossiers-generer-soa { display: inline-flex; }
    #dossiersSection .dossiers-generer-soa {
        align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; background: #fff;
        color: var(--tmc-navy); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    }
    #dossiersSection .dossiers-generer-soa:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
    #dossiersSection .dossiers-generer-soa:focus-visible { outline: 2px solid var(--tmc-navy); outline-offset: 2px; }
}

/* ====================================================================================
   Tâche C12 (27/09/2026) — écran Cash to Master, planche HUSB-CTM.dc.html : même construction que l'écran PDA
   (AI-2) et l'écran HUSB (C9) — en-tête blanc #ctmTete, deux colonnes (560 px à gauche : la planche), cartes
   blanches à bord --tmc-line, grille de champs à trois colonnes, résultat à droite avec la barre d'actions sous
   le titre (D59). TOUT est enfermé dans @media screen et préfixé body[data-mode="ctm"] (les conteneurs .container,
   .sidebar, .main-content et les cartes Navire et Client sont PARTAGÉS avec l'écran PDA, qui n'est pas touché) ou
   #ctmTete / #ctmCard / #ctmResult / #ctmAttente (propres au CTM) : aucun autre onglet n'est peint, la feuille
   d'impression ne change pas, le PDF (jsPDF, downloadCTMPDF) ne lit rien à l'écran.
   Inventaire : docs/cloud/rapports/C12-inventaire.md ; correspondance ancien → nouveau : C12.md.
   ==================================================================================== */
@media screen {
    /* ---------- En-tête d'écran ---------- */
    .ctm-tete {
        background: #fff; border-bottom: 1px solid var(--tmc-line); padding: 14px 32px;
        display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
        font-family: 'IBM Plex Sans', Arial, sans-serif; color: var(--tmc-encre);
    }
    .ctm-tete-texte { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .ctm-titre-rang { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .ctm-tete-champ-ref { display: inline-flex; align-items: center; gap: 8px; }
    .ctm-tete-etiquette { font-size: 12px; color: var(--tmc-muted); white-space: nowrap; }
    .ctm-tete-ref {
        width: 172px; height: 38px; box-sizing: border-box; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px;
        padding: 0 10px; font-family: inherit; font-size: 19px; font-weight: 700; color: var(--tmc-navy); background: #fff;
        font-variant-numeric: tabular-nums;
    }
    .ctm-tete-ref:hover { border-color: var(--tmc-navy); }
    .ctm-tete-ref:focus { border-color: var(--tmc-navy); outline: 2px solid var(--tmc-green-clair); outline-offset: 1px; }
    .ctm-titre { margin: 0; font-size: 22px; font-weight: 700; color: var(--tmc-navy); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .ctm-titre-navire { color: var(--tmc-muted); font-weight: 500; }
    .ctm-tete-sous { color: var(--tmc-muted); font-size: 14px; line-height: 18px; }
    .ctm-tete-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    #ctmRetourHusb {
        height: 40px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton);
        background: #fff; color: var(--tmc-encre); font-weight: 500; font-size: 14px; font-family: inherit; justify-content: center;
    }
    #ctmRetourHusb:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
    #ctmCalculer {
        height: 40px; padding: 0 18px; border-radius: 6px; border: 0; background: var(--tmc-green); color: #fff;
        font-weight: 600; font-size: 14px; font-family: inherit; width: auto; justify-content: center;
    }
    #ctmCalculer:hover { background: #17633a; }
    #ctmRetourHusb:focus-visible, #ctmCalculer:focus-visible { outline: 2px solid var(--tmc-navy); outline-offset: 2px; }

    /* ---------- Les deux colonnes (560 px à gauche : la planche HUSB-CTM) ---------- */
    body[data-mode="ctm"] #pdaEcran {
        font-family: 'IBM Plex Sans', Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--tmc-encre);
        grid-template-columns: 560px minmax(0, 1fr); gap: 24px; padding: 16px 32px 24px;
    }
    @media (max-width: 1240px) { body[data-mode="ctm"] #pdaEcran { grid-template-columns: 1fr; } }
    body[data-mode="ctm"] #pdaEcran .sidebar { gap: 10px; }
    body[data-mode="ctm"] #pdaEcran .main-content { gap: 10px; }
    /* L'ordre de la planche (client et navire, puis le montant) sans toucher au DOM partagé : `order` de la colonne flex. */
    body[data-mode="ctm"] #pdaCarteClient { order: 1; }
    body[data-mode="ctm"] #pdaCarteNavire { order: 2; }
    body[data-mode="ctm"] #ctmCard { order: 3; }
    /* Les bandeaux du résultat PDA (ajustements manuels, Check & Balance) ne s'affichent jamais dans la colonne du CTM. */
    body[data-mode="ctm"] #pdaExclusionsBar, body[data-mode="ctm"] #fdaCheckBanner { display: none !important; }
    /* Titres et libellés de la charte sur les deux cartes partagées (les mêmes qu'en mode pda : « Navire », « Client »). */
    body[data-mode="ctm"] .pda-seul { display: inline; }
    body[data-mode="ctm"] .hors-pda { display: none; }

    /* ---------- Cartes : blanches, bord --tmc-line, rayon 8, plus de bandeau de couleur ---------- */
    body[data-mode="ctm"] #pdaEcran .card { background: #fff; border: 1px solid var(--tmc-line); border-radius: 8px; box-shadow: none; }
    body[data-mode="ctm"] #pdaEcran .sidebar .card > .card-header {
        background: #fff !important; color: var(--tmc-encre); font-size: 15px; font-weight: 700;
        padding: 12px 20px 0; border: 0; line-height: 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    }
    body[data-mode="ctm"] #pdaEcran .sidebar .card > .card-body { padding: 8px 20px 12px; }
    /* À 560 px, la note du dépôt Q88 ne tient pas à droite du titre « Navire » : elle passe dessous, sur sa ligne. */
    body[data-mode="ctm"] #pdaCarteNavire > .card-header { flex-wrap: wrap; }
    body[data-mode="ctm"] #pdaCarteNavire .pda-note-titre { flex: 1 1 100%; font-size: 12px; font-weight: 400; color: var(--tmc-muted); text-align: left; line-height: 16px; }
    .ctm-aide { font-size: 12px; font-weight: 400; color: var(--tmc-muted); text-align: right; }
    body[data-mode="ctm"] #pdaEcran .form-group label, body[data-mode="ctm"] #pdaEcran .tba-label {
        color: var(--tmc-muted); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 16px;
    }
    body[data-mode="ctm"] #pdaEcran .sidebar .form-group { gap: 3px; min-width: 0; }
    body[data-mode="ctm"] #pdaEcran .sidebar .form-row { gap: 8px 12px; margin-bottom: 8px; }
    body[data-mode="ctm"] #pdaEcran .sidebar input[type="text"], body[data-mode="ctm"] #pdaEcran .sidebar input[type="number"],
    body[data-mode="ctm"] #pdaEcran .sidebar input[type="date"], body[data-mode="ctm"] #pdaEcran .sidebar select {
        height: 32px; padding: 0 10px; border: 1px solid var(--tmc-bord-bouton); border-radius: 6px; font-family: inherit;
        font-size: 14px; color: var(--tmc-encre); background: #fff; min-width: 0; max-width: 100%;
    }
    body[data-mode="ctm"] #pdaEcran .sidebar input:focus, body[data-mode="ctm"] #pdaEcran .sidebar select:focus {
        outline: 2px solid var(--tmc-green-clair); outline-offset: 1px; border-color: var(--tmc-navy); background: #fff;
    }
    body[data-mode="ctm"] #pdaEcran .separator { border-top: 1px solid var(--tmc-line); }

    /* ---------- Carte Navire en grille (même construction que l'écran PDA, ronde 2) ----------
       Ligne 1 : nom (deux colonnes) et type, le code du type en petit à droite de son libellé ; ligne 2 : LOA, beam,
       summer draft, puis le volume en une ligne discrète ; ligne 3 : GT, NT (l'équipage est .pda-only, masqué par
       switchMode). Les rangées d'origine (.form-row) s'effacent de la mise en page (display: contents) : le DOM et
       les identifiants ne bougent pas. Le .form-group du nom reste le conteneur positionné de la liste flottante
       #vesselSuggestions (.form-group { position: relative }, feuille de base). */
    body[data-mode="ctm"] #pdaCarteNavire > .card-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: end; }
    body[data-mode="ctm"] #pdaCarteNavire .form-row { display: contents; }
    body[data-mode="ctm"] #pdaCarteNavire .form-group:empty { display: none; }
    body[data-mode="ctm"] #pdaCarteNavire .pda-navire-nom { grid-row: 1; grid-column: 1 / span 2; }
    body[data-mode="ctm"] #pdaCarteNavire .pda-navire-type { grid-row: 1; grid-column: 3; }
    body[data-mode="ctm"] #pdaCarteNavire .pda-navire-code {
        grid-row: 1; grid-column: 3; justify-self: end; align-self: start; flex-direction: row; align-items: baseline; gap: 4px;
    }
    body[data-mode="ctm"] #pdaCarteNavire #vesselCode {
        width: 3.2em; height: auto; padding: 0; border: 0; background: transparent; font-size: 12px; font-weight: 600; color: var(--tmc-muted);
    }
    body[data-mode="ctm"] #pdaCarteNavire .loading-suggestion, body[data-mode="ctm"] #pdaCarteNavire .volume-display,
    body[data-mode="ctm"] #pdaCarteNavire .pda-note { grid-column: 1 / -1; margin: 0; }
    body[data-mode="ctm"] #pdaCarteNavire .volume-display {
        display: flex; align-items: baseline; gap: 5px; background: none; padding: 0; margin-top: -4px; text-align: left; font-size: 12px; color: var(--tmc-muted);
    }
    body[data-mode="ctm"] #pdaCarteNavire .volume-display .vol-label, body[data-mode="ctm"] #pdaCarteNavire .volume-display .vol-unit { font-size: 12px; text-transform: none; color: var(--tmc-muted); }
    body[data-mode="ctm"] #pdaCarteNavire .volume-display .vol-value { font-size: 12px; font-weight: 600; color: var(--tmc-encre); }
    body[data-mode="ctm"] #pdaCarteNavire .gt-aide { color: var(--tmc-muted); font-size: 11px; }

    /* ---------- Carte Client en grille : le client (deux colonnes) et sa référence, puis l'adresse sur une ligne ---------- */
    body[data-mode="ctm"] #pdaCarteClient > .card-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
    body[data-mode="ctm"] #pdaCarteClient .form-row { display: contents; }
    body[data-mode="ctm"] #pdaCarteClient .form-group:has(> #clientName) { grid-row: 1; grid-column: 1 / span 2; }
    body[data-mode="ctm"] #pdaCarteClient .form-group:has(> #clientRef) { grid-row: 1; grid-column: 3; }
    body[data-mode="ctm"] #pdaCarteClient .form-group:has(> #clientAddr1) { grid-row: 2; grid-column: 1; }
    body[data-mode="ctm"] #pdaCarteClient .form-group:has(> #clientAddr2) { grid-row: 2; grid-column: 2; }
    body[data-mode="ctm"] #pdaCarteClient .form-group:has(> #clientCity) { grid-row: 2; grid-column: 3; }

    /* ---------- Carte « Montant à remettre au Master » : grille 3 colonnes, sous-titres, outils ---------- */
    .ctm-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: end; }
    .ctm-large-2 { grid-column: span 2; }
    .ctm-pleine { grid-column: 1 / -1; }
    .ctm-montant { display: flex; gap: 6px; min-width: 0; }
    .ctm-montant input { flex: 1 1 auto; min-width: 0; }
    .ctm-montant select { flex: 0 0 76px; font-weight: 600; }
    .ctm-montant-croisee select { flex-basis: 64px; }
    .ctm-croisee-fleche { align-self: center; font-size: 12px; color: var(--tmc-muted); white-space: nowrap; }
    body[data-mode="ctm"] #ctmCard #ctmAmount { text-align: right; font-size: 16px; font-weight: 600; }
    body[data-mode="ctm"] #ctmCard .date-tba { display: flex; align-items: center; gap: 6px; min-width: 0; }
    body[data-mode="ctm"] #ctmCard .date-tba input[type="date"] { flex: 1 1 auto; min-width: 0; padding-left: 6px; padding-right: 4px; }
    body[data-mode="ctm"] #ctmCard .tba-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--tmc-green); }
    .ctm-sous-titre {
        grid-column: 1 / -1; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--tmc-line);
        font-size: 13px; font-weight: 600; color: var(--tmc-encre); line-height: 18px;
    }
    .ctm-sous-titre span { font-size: 12px; font-weight: 400; color: var(--tmc-muted); margin-left: 6px; }
    .ctm-note { font-size: 12px; color: var(--tmc-muted); line-height: 15px; align-self: end; padding-bottom: 4px; }
    /* Le taux du jour (D60, comme les suggestions du PDA) : hauteur d'un champ, fond bleu pâle, « Appliquer » en bouton secondaire. */
    body[data-mode="ctm"] #ctmCard .loading-suggestion {
        min-height: 32px; box-sizing: border-box; background: #e8eef8; border: 0; border-radius: 6px;
        padding: 3px 4px 3px 12px; margin: 0; font-size: 14px; line-height: 20px; color: var(--tmc-encre); gap: 6px 12px; justify-content: space-between;
    }
    body[data-mode="ctm"] #ctmCard .btn-suggestion {
        flex: 0 0 auto; height: 26px; padding: 0 14px; background: #fff; color: var(--tmc-navy); border: 1px solid var(--tmc-navy);
        border-radius: 6px; font-size: 13px; font-weight: 600;
    }
    body[data-mode="ctm"] #ctmCard .btn-suggestion:hover { background: #f6f8fa; }
    .ctm-outil-bouton {
        height: 32px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--tmc-navy); background: #fff; color: var(--tmc-navy);
        font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; justify-content: center; width: 100%;
    }
    .ctm-outil-bouton:hover { background: #f6f8fa; }
    .ctm-outil-info {
        grid-column: 1 / -1; font-size: 13px; line-height: 1.45; background: #f6f8fa; border: 1px solid var(--tmc-line);
        border-radius: 6px; padding: 8px 12px; color: var(--tmc-encre);
    }

    /* ---------- Colonne de droite : le Cash to Master calculé ---------- */
    body[data-mode="ctm"] #ctmResult { display: flex; flex-direction: column; gap: 10px; }
    body[data-mode="ctm"] #ctmResult .card > .card-header {
        background: #f6f8fa !important; color: var(--tmc-navy); font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px;
        padding: 10px 20px; border-bottom: 1px solid var(--tmc-line); text-align: left; display: flex; align-items: center;
        justify-content: space-between; gap: 12px;
    }
    body[data-mode="ctm"] #ctmResult .ctm-resultat-tete { background: #fff !important; padding: 16px 20px; }
    .ctm-resultat-titre { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: var(--tmc-encre); line-height: 1.3; letter-spacing: 0; }
    body[data-mode="ctm"] #ctmResult .ctm-roe { text-align: left; font-size: 12px; font-weight: 400; color: var(--tmc-muted); padding: 2px 0 0; border: 0; }
    body[data-mode="ctm"] #ctmResult .actions-bar {
        background: #fff; border-top: 0; border-bottom: 1px solid var(--tmc-line); display: flex; gap: 8px; flex-wrap: wrap;
        padding: 12px 20px; align-items: center; justify-content: flex-start;
    }
    body[data-mode="ctm"] #ctmResult .actions-bar .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 6px; font-family: inherit; }
    body[data-mode="ctm"] #ctmResult .ctm-btn-save { background: var(--tmc-navy); color: #fff; border: 1px solid var(--tmc-navy); font-weight: 600; }
    body[data-mode="ctm"] #ctmResult .ctm-btn-save:hover { background: #10233a; }
    body[data-mode="ctm"] #ctmResult .ctm-btn-secondaire { background: #fff; color: var(--tmc-navy); border: 1px solid var(--tmc-bord-bouton); font-weight: 600; }
    body[data-mode="ctm"] #ctmResult .ctm-btn-secondaire:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
    body[data-mode="ctm"] #ctmResult .pda-info-table { background: #fff; border-bottom: 0; }
    body[data-mode="ctm"] #ctmResult .pda-info-table td { padding: 7px 20px; border-bottom: 1px solid var(--tmc-line); color: var(--tmc-encre); font-size: 12.5px; }
    body[data-mode="ctm"] #ctmResult .pda-info-table tr:last-child td { padding-bottom: 14px; }
    /* Les cellules d'étiquette (1re et 3e colonnes, sans id) en petites capitales grises, comme la PFDA calculée. */
    body[data-mode="ctm"] #ctmResult .pda-info-table td:nth-child(odd) {
        color: var(--tmc-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; width: 1%;
    }
    body[data-mode="ctm"] #ctmResult .result-table th {
        background: #fff; color: var(--tmc-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
        border-bottom: 1px solid var(--tmc-line); padding: 8px 20px;
    }
    body[data-mode="ctm"] #ctmResult .result-table td { border-bottom: 1px solid #eef1f4; padding: 7px 20px; }
    body[data-mode="ctm"] #ctmResult .result-table .subtotal td { border-top: 1px solid var(--tmc-line); font-weight: 600; color: var(--tmc-navy); padding-top: 7px; }
    body[data-mode="ctm"] #ctmResult .result-table tr:last-child td { border-bottom: none; }
    body[data-mode="ctm"] #ctmResult .grand-total { border-top: 0; padding: 16px 20px; }
    body[data-mode="ctm"] #ctmResult .grand-total .amount { color: #fff; }
    body[data-mode="ctm"] #ctmResult .card-body { padding: 10px 20px 14px; font-size: 13px; line-height: 1.6; }
    .ctm-statement-credit { text-align: center; font-size: 12.5px; margin: 0 0 4px; color: var(--tmc-muted); }
    body[data-mode="ctm"] #ctmResult .ctm-statement-solde td { font-weight: 700; border-top: 1px solid var(--tmc-line); padding: 8px 0 2px; }
    body[data-mode="ctm"] #ctmResult .ctm-statement-solde td:first-child { text-decoration: underline; }
    body[data-mode="ctm"] #ctmResult .ctm-statement-solde td:nth-child(2) { text-align: right; }
    body[data-mode="ctm"] #ctmDeliverySummary .card-body { padding: 12px 20px; }
    body[data-mode="ctm"] #ctmBankDetails .card-body p { margin: 0; }
    .ctm-transfert { font-weight: 700; }
    body[data-mode="ctm"] #ctmMargin .result-table td { padding: 6px 10px; }
    body[data-mode="ctm"] #ctmMargin .result-table td:first-child { padding-left: 0; }
    .ctm-suggestion { margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: #fff; border: 1px solid var(--tmc-line); border-left: 3px solid var(--tmc-green); font-size: 13px; }
    .ctm-suite { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: 13px; line-height: 1.4; color: var(--tmc-muted); background: #fff; border: 1px solid var(--tmc-line); border-radius: 8px; }
    .ctm-suite-puce { padding: 3px 9px; border-radius: 10px; background: #e6eef8; color: var(--tmc-info); font-weight: 600; font-size: 12px; white-space: nowrap; }

    /* ---------- Avant le calcul : la carte d'attente (CSS seul, même mécanisme que #pdaAttente et #husbAttente) ---------- */
    #ctmAttente { display: none; }
    body[data-mode="ctm"] #ctmResult[style*="none"] ~ #ctmAttente { display: flex; flex-direction: column; min-height: 320px; }
    #ctmAttente .ctm-attente-tete { padding: 16px 20px; border-bottom: 1px solid var(--tmc-line); line-height: 1.3; }
    #ctmAttente .ctm-attente-titre { font-size: 15px; font-weight: 700; color: var(--tmc-encre); }
    #ctmAttente .ctm-attente-sous { font-size: 12px; color: var(--tmc-muted); }
    #ctmAttente .ctm-attente-corps { padding: 28px 20px; font-size: 14px; color: var(--tmc-muted); }
}

/* ===== D78 (27/09/2026) : la barre d'en-tête de chaque tableau prend le bleu de la barre principale =====
   Une seule règle pour tous les écrans, avec les MÊMES sélecteurs que les règles d'écran plus haut (même
   spécificité, placée après : elle gagne) ; largeurs, alignements et tris inchangés. Les tableaux des réponses
   de l'assistant (.chat-table, contenu) restent clairs. */
.result-table th, .result-table thead th, .dossiers-table th, .husb-table thead th, .multi-cargo-table th,
.ct-table th, .sof-table th, .fda-table th, .fda-pieces-table th,
body[data-mode="pda"] #pdaEcran .ct-table th, body[data-mode="pda"] #pdaEcran .sof-table th,
body[data-mode="pda"] #pdaEcran .result-table th,
#husbResult .result-table th, #husbResult .husb-table thead th,
#infoSection .dossiers-table th, #adminSection .dossiers-table th, #adminSection .result-table th,
#paiementsSection .result-table th,
body[data-mode="ctm"] #ctmResult .result-table th {
    background: var(--tmc-navy);
    color: #fff;
}
.dossiers-table th.th-sort:hover { background: #24446a; color: #fff; }
.dossiers-table th.th-sort .sort-arrow { color: var(--tmc-green-clair); }
/* D78 bis : dans Dossiers, les deux cartes restées à l'ancienne (« Nominations reçues », « Importer un ancien
   dossier ») prennent l'en-tête de carte de la charte, le même qu'Admin. Seules cartes de #dossiersSection. */
#dossiersSection .card > .card-header {
    background: #fff; color: var(--tmc-encre); font-size: 15px; font-weight: 700; padding: 14px 20px 0;
    border: 0; line-height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
/* M3 (revue C12, 27/09/2026) : en-tête du Cash to Master — le motif « SH052-26 » du N° de dossier vide se lisait
   comme un numéro saisi (19 px gras) : placeholder en gris, sans gras (le texte du motif ne change pas). */
.ctm-tete-ref::placeholder { color: var(--tmc-muted); font-weight: 400; }
/* D80 (27/09/2026, harmonisation) : boutons de la carte « Importer un ancien dossier » (Dossiers) à la charte —
   principal vert (.dossiers-bouton-principal, déjà défini) et secondaire blanc à bord, même modèle que .paiements-btn. */
#dossiersSection .dossiers-bouton {
    height: 38px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--tmc-bord-bouton); background: #fff; color: var(--tmc-encre);
    font-family: inherit; font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
}
#dossiersSection .dossiers-bouton:hover { background: #f6f8fa; border-color: var(--tmc-navy); }
#dossiersSection .dossiers-bouton:focus-visible, #dossiersSection .dossiers-bouton-principal:focus-visible { outline: 2px solid var(--tmc-navy); outline-offset: 2px; }

/* ===== D81 (propriétaire, 27/09/2026 17:05) : la barre de TITRE de chaque carte dans le bleu de la barre principale =====
   « Tu n'as pas mis le bleu dans la barre de chaque tableau ? » : sur tous les écrans, l'en-tête de chaque carte
   (.card-header, <summary> compris) prend le bleu marine, texte blanc ; les boutons, cases, listes et champs qu'il
   contient restent lisibles (boutons blancs à texte marine, aides en blanc atténué, champs blancs). Placé après
   toutes les règles d'écran et en !important parce que l'écran PDA et le devis Husbandry forçaient déjà le blanc
   en !important. Les mêmes sélecteurs que les règles d'écran sont repris pour gagner à spécificité égale. */
.card > .card-header, .card > summary.card-header,
#assistantSection .card > .card-header, #assistantSection .assistant-chat-card > .card-header, #assistantSection #assistantEmailsCarte > .card-header,
#husbSection .card > .card-header, #husbResult .card > .card-header, #husbResult #husbPdaHeader > .card-header,
#infoSection .card > .card-header, #adminSection .card > .card-header, #paiementsSection .card > .card-header,
#dossiersSection .card > .card-header,
body[data-mode="pda"] #pdaEcran .card > .card-header, body[data-mode="pda"] #pdaEcran .card > summary.card-header,
body[data-mode="pda"] #pdaEcran .sidebar .card > .card-header, body[data-mode="pda"] #pdaEcran .sidebar .card > summary.card-header,
body[data-mode="pda"] #pdaEcran .sidebar .card > .card-header:not(summary), body[data-mode="pda"] #pdaEcran #pdaCarteCouts > .card-header,
body[data-mode="pda"] #pdaEcran .card-header.section-e, body[data-mode="pda"] #pdaEcran .card-header.total,
body[data-mode="ctm"] #pdaEcran .sidebar .card > .card-header, body[data-mode="ctm"] #ctmResult .card > .card-header {
    background: var(--tmc-navy) !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 7px 7px 0 0;
    border-bottom: 0 !important;
}
.card > .card-header * { color: #fff !important; }
.card > .card-header .assistant-aide, .card > .card-header .husb-aide, .card > .card-header .pda-note-titre,
.card > .card-header .husb-devis-sous, .card > .card-header small { color: rgba(255, 255, 255, 0.82) !important; }
.card > .card-header button, .card > .card-header button *, .card > .card-header .btn, .card > .card-header .btn *, .card > .card-header a.btn {
    background: #fff !important; color: var(--tmc-navy) !important; border-color: #fff !important; box-shadow: none !important;
}
.card > .card-header button:hover, .card > .card-header .btn:hover { background: #e6ecf3 !important; }
.card > .card-header input, .card > .card-header select, .card > .card-header textarea, .card > .card-header option {
    color: var(--tmc-encre) !important; background: #fff !important;
}
.card > .card-header input[type="checkbox"], .card > .card-header input[type="radio"] { background: transparent !important; accent-color: #fff; }
/* Liste FDA : « En cours (n) » / « FDA complétées récemment » sont la barre de leur tableau. */
#fdaListeCard .fda-liste-section-titre { background: var(--tmc-navy) !important; color: #fff !important; }
#fdaListeCard .fda-liste-section-titre * { color: #fff !important; }
#fdaListeCard .fda-liste-section-repli:hover { background: #24446a !important; }
/* Une seule bande bleue par tableau : sous un titre de carte (ou de section FDA) bleu, la ligne des colonnes (D78)
   repasse en clair. Les tableaux sans titre au-dessus (liste Dossiers sous ses sous-onglets) gardent la ligne bleue. */
.card:has(> .card-header) .result-table th, .card:has(> .card-header) .result-table thead th, .card:has(> .card-header) .dossiers-table th,
.card:has(> .card-header) .husb-table thead th, .card:has(> .card-header) .multi-cargo-table th, .card:has(> .card-header) .ct-table th,
.card:has(> .card-header) .sof-table th, .card:has(> .card-header) .fda-table th, .card:has(> .card-header) .fda-pieces-table th,
#husbResult .card:has(> .card-header) .result-table th, #husbResult .card:has(> .card-header) .husb-table thead th,
#adminSection .card:has(> .card-header) .dossiers-table th, #adminSection .card:has(> .card-header) .result-table th,
#paiementsSection .card:has(> .card-header) .result-table th, #infoSection .card:has(> .card-header) .dossiers-table th,
body[data-mode="pda"] #pdaEcran .card:has(> .card-header) .result-table th, body[data-mode="pda"] #pdaEcran .card:has(> .card-header) .ct-table th,
body[data-mode="pda"] #pdaEcran .card:has(> .card-header) .sof-table th, body[data-mode="ctm"] #ctmResult .card:has(> .card-header) .result-table th,
#fdaListeCard .fda-liste-table th {
    background: #f4f6f8;
    color: var(--tmc-navy);
    border-bottom: 1px solid var(--tmc-line);
}
.card:has(> .card-header) .dossiers-table th.th-sort:hover, #fdaListeCard .fda-liste-table th.th-sort:hover { background: #e6ecf3; color: var(--tmc-navy); }
.card:has(> .card-header) .dossiers-table th.th-sort .sort-arrow, #fdaListeCard .fda-liste-table th.th-sort .sort-arrow { color: var(--tmc-green); }
/* D83 (propriétaire, 27/09/2026 17:50) : « c'est trop busy, les dernières colonnes » — l'ancienneté d'une FDA envoyée en
   texte discret (plus de pastille) : gris, puis ambre / orange / rouge à 30 / 60 / 90 jours ; le % reçu sous l'acompte
   plus petit et plus clair. */
#dossiersSection .dossier-age-fda { color: var(--tmc-muted); font-weight: 400; }
#dossiersSection .dossier-age-fda.tard-30 { color: #b7950b; }
#dossiersSection .dossier-age-fda.tard-60 { color: #ca6f1e; font-weight: 600; }
#dossiersSection .dossier-age-fda.tard-90 { color: var(--tmc-block); font-weight: 600; }
#dossiersSection td.td-num .dossier-sous { font-size: 0.72rem; color: #8a949e; }
/* D87 (propriétaire, 28/09/2026) : « Pas d'opération portuaire — husbandry seul » (#husbOtherAgent) en bande lisible en
   tête de la carte « Client et activité ». Cochée (husbandry seul) : fond vert pâle, filet vert de la charte ; décochée
   (escale gérée par TMC) : fond gris-bleu, filet bleu marine. Écran seulement : le devis PDF ne change pas. */
@media screen {
    #husbSection .husb-choix-operation {
        display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; padding: 10px 14px;
        background: #eaf5ee; border: 1px solid #b9dcc6; border-left: 4px solid var(--tmc-green); border-radius: 6px;
    }
    #husbSection .husb-choix-operation:has(#husbOtherAgent:not(:checked)) { background: #eef2f7; border-color: var(--tmc-line); border-left-color: var(--tmc-navy); }
    #husbSection .husb-choix-case { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
    #husbSection .husb-choix-case input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--tmc-green); cursor: pointer; }
    #husbSection .husb-choix-libelle { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; font-weight: 700; line-height: 20px; color: var(--tmc-navy); }
    #husbSection .husb-choix-aide { font-size: 13px; font-weight: 400; line-height: 18px; color: var(--tmc-muted); }
    #husbSection .husb-choix-situation { padding-left: 30px; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--tmc-navy); }
}

/* Écran de connexion (propriétaire, 29/09/2026 : « regarde mon écran quand je me log ») : sur Edge, au chargement et au
   rechargement qui suit la connexion, les listes déroulantes du formulaire PDA passaient un instant DEVANT l'écran de
   connexion (artefact de rendu du navigateur : aucune règle ne les place au-dessus, .login-overlay est en z-index 9999).
   Tant que l'écran de connexion est affiché, tout ce qui le suit dans <body> — l'application entière — n'est pas peint :
   rien ne peut passer devant, et rien de l'application n'est visible derrière l'écran de connexion sur un poste partagé.
   La mise en page reste calculée (visibility, pas display) : les scripts qui mesurent la page au chargement ne changent
   pas. Vérifié à chaque test d'écran par connecterEtAttendrePret (tests/lib/ui.mjs). */
#loginOverlay:not(.hidden) ~ * { visibility: hidden; }