/* ═══════════════════════════════════════════════════════════
   UNIDET v2 — Dossiers client — CARD UNIFIÉE
   ═══════════════════════════════════════════════════════════ */

/* ═══ FILTRES ═══ */
.udc-panel {
    background: #fff; border: 1px solid #E5E9F0;
    border-radius: 14px; margin-bottom: 16px; overflow: hidden;
}
.udc-panel-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-bottom: 1px solid #E5E9F0;
}
.udc-panel-head-icon {
    width: 38px; height: 38px; min-width: 38px;
    border-radius: 10px; background: #0A0E17; color: #C9A227;
    display: inline-flex; align-items: center; justify-content: center;
}
.udc-panel-head-text { flex: 1; min-width: 0; }
.udc-panel-head-text h3 { margin: 0; font-size: 15px; font-weight: 800; color: #0A0E17; }
.udc-panel-head-text p { margin: 2px 0 0; font-size: 12px; color: #64748B; font-weight: 500; }
.udc-panel-reset {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; background: #fff;
    border: 1px solid #E2E8F0; border-radius: 8px;
    color: #475569; font-family: inherit;
    font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
}
.udc-panel-reset:hover { background: #0A0E17; border-color: #0A0E17; color: #C9A227; }
.udc-panel-reset:hover svg { stroke: #C9A227; }
.udc-panel-search { padding: 16px 20px 0; }
.udc-panel-search label {
    display: block; font-size: 11px; font-weight: 800;
    color: #475569; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px;
}
.udc-panel-search input {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #E2E8F0; border-radius: 9px;
    font-family: inherit; font-size: 13px; color: #0A0E17;
    background: #fff; outline: none; box-sizing: border-box; height: 42px;
}
.udc-panel-search input:focus { border-color: #0A0E17; box-shadow: 0 0 0 3px rgba(10, 14, 23, 0.07); }
.udc-panel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 14px 20px 20px; }
.udc-panel-field { display: flex; flex-direction: column; gap: 6px; }
.udc-panel-field label { font-size: 11px; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; }
.udc-panel-field select,
.udc-panel-field input {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid #E2E8F0; border-radius: 9px;
    font-family: inherit; font-size: 13px; color: #0A0E17;
    background: #fff; outline: none; height: 42px; box-sizing: border-box; font-weight: 600;
}
.udc-panel-field select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
.udc-panel-field select:focus,
.udc-panel-field input:focus { border-color: #0A0E17; box-shadow: 0 0 0 3px rgba(10, 14, 23, 0.07); }

/* ═══ TABS ═══ */
.udc-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
.udc-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; background: #fff;
    border: 1.5px solid #E5E9F0; border-radius: 8px;
    color: #64748B; font-family: inherit;
    font-size: 12px; font-weight: 700;
    cursor: pointer; white-space: nowrap; transition: all 0.15s; line-height: 1;
}
.udc-tab:hover { border-color: #C9A227; color: #A0824D; }
.udc-tab.is-active { background: #0A0E17; border-color: #0A0E17; color: #fff; }
.udc-tab.is-active .udc-tab-count { background: #C9A227; color: #0A0E17; }
.udc-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 6px;
    background: #F1F5F9; color: #475569;
    border-radius: 100px; font-size: 10.5px; font-weight: 800;
}

/* ═══ GRILLE 3 COLONNES ═══ */
.udc-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 20px;
    align-items: stretch;
}

/* ═══════════════════════════════════════════════════════════
   🎯 CARD — UNE SEULE CARD, sections séparées par lignes
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   🎯 CARD — Bordure visible + barre gauche colorée
   ═══════════════════════════════════════════════════════════ */
.udc-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 14px;
    background: #FFFFFF;
    /* BORDURE VISIBLE 2px */
    border: 2px solid #CBD5E1;
    /* Barre gauche colorée : 5px */
    border-left: 5px solid #94A3B8;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(10, 14, 23, 0.06);
    box-sizing: border-box;
    overflow: hidden;
}

/* Bordure + barre colorées selon statut */
.udc-card[data-statut="cloture_paye"] {
    border-color: #A7F3D0;
    border-left-color: #10B981;
}
.udc-card[data-statut="actif"],
.udc-card[data-statut="en_cours"] {
    border-color: #BFDBFE;
    border-left-color: #3B82F6;
}
.udc-card[data-statut="en_attente"] {
    border-color: #FED7AA;
    border-left-color: #F59E0B;
}
.udc-card[data-statut="paiement_recu"] {
    border-color: #FDE68A;
    border-left-color: #C9A227;
}
.udc-card[data-statut="cloture_impaye"] {
    border-color: #FECACA;
    border-left-color: #EF4444;
}
.udc-card[data-statut="refuse"] {
    border-color: #E2E8F0;
    border-left-color: #94A3B8;
}

.udc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px rgba(10, 14, 23, 0.18);
}
/* ═══ HEAD (réf + statut) ═══ */
.udc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid #EEF2F6;
}
.udc-card-head-left {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.udc-card-ref {
    font-family: 'Courier New', monospace;
    font-size: 15px; font-weight: 800;
    color: #0A0E17;
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.udc-card-date {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; color: #64748B;
    white-space: nowrap;
}
.udc-card-date svg { stroke: #94A3B8; flex-shrink: 0; }

.udc-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    border-radius: 100px;
    font-size: 9.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap; flex-shrink: 0; line-height: 1;
    background: #F1F5F9;
}
.udc-status-pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.udc-status-pill-cloture_paye   { color: #059669; background: #D1FAE5; }
html body.ud-v2-shell .udc-status-pill-en_attente     { color: #D97706; background: #FEF3C7; }
html body.ud-v2-shell .udc-status-pill-en_cours       { color: #2563EB; background: #DBEAFE; }
html body.ud-v2-shell .udc-status-pill-paiement_recu  { color: #92400E; background: #FEF3C7; }
html body.ud-v2-shell .udc-status-pill-cloture_paye   { color: #059669; background: #D1FAE5; }
html body.ud-v2-shell .udc-status-pill-cloture_impaye { color: #DC2626; background: #FEE2E2; }
html body.ud-v2-shell .udc-status-pill-refuse         { color: #475569; background: #E2E8F0; }

/* ═══ SECTIONS INTERNES (pas de fond, juste séparateurs) ═══ */
.udc-card-amount {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid #EEF2F6;
    background: #FAFBFC;              /* très léger gris pour marquer le bloc */
}
.udc-card-amount-label {
    font-size: 10px; font-weight: 800; color: #64748B;
    letter-spacing: 0.6px; text-transform: uppercase;
}
.udc-card-amount-value {
    font-family: 'Courier New', monospace;
    font-size: 22px; font-weight: 900;
    color: #0A0E17; letter-spacing: -0.5px; line-height: 1;
}

.udc-card-section {
    padding: 14px 16px;
    border-bottom: 1px solid #EEF2F6;
}
.udc-card-section:last-of-type {
    border-bottom: none;
}
.udc-card-section-title {
    font-size: 9.5px; font-weight: 800; color: #94A3B8;
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 10px;
}

.udc-grid-2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
.udc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.udc-info-label {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9px; font-weight: 800; color: #94A3B8;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.udc-info-label svg { stroke: #94A3B8; flex-shrink: 0; width: 10px; height: 10px; }
.udc-info-value {
    font-size: 12.5px; font-weight: 700; color: #0A0E17;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.udc-info-empty { color: #CBD5E1; font-style: italic; font-weight: 600; }

.udc-gest { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.udc-gest-av {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; min-width: 18px;
    border-radius: 50%; background: #E0E7FF; color: #3730A3;
    font-size: 8px; font-weight: 900; text-transform: uppercase;
}
.udc-gest-av.is-admin { background: #0A0E17; color: #C9A227; }

.udc-contract-mini { font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.udc-contract-mini.is-signed   { color: #047857; }
.udc-contract-mini.is-sent     { color: #C2410C; }
.udc-contract-mini.is-declined { color: #991B1B; }
.udc-contract-mini.is-none     { color: #94A3B8; font-style: italic; font-weight: 600; }

/* ═══ ACTIONS (dans la card) ═══ */
/* ═══════════════════════════════════════════════════════════
   🎯 ACTIONS CARD — Layout adaptatif
   - 2 boutons (sans contrat) : côte à côte
   - 3 boutons (avec contrat) : contrat en haut, 2 en bas
   ═══════════════════════════════════════════════════════════ */
html body.ud-v2-shell .udc-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 14px 16px 16px !important;
    border-top: 1px solid #EEF2F6 !important;
    margin-top: auto !important;
    background: #FAFBFC !important;
}

/* Quand un bouton "Contrat Signé" est présent → il prend 100% en haut */
html body.ud-v2-shell .udc-actions:has(.udc-btn-card-gold) .udc-btn-card-gold {
    grid-column: 1 / -1 !important;
}

html body.ud-v2-shell .udc-btn-card {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.15s !important;
    border: 1.5px solid transparent !important;
    line-height: 1 !important;
    min-height: 40px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}

html body.ud-v2-shell .udc-btn-card svg {
    stroke: currentColor !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
}

/* Bouton "Contrat Signé" — or foncé */
html body.ud-v2-shell .udc-btn-card-gold {
    background: linear-gradient(135deg, #A0824D 0%, #8B6F42 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(160, 130, 77, 0.25) !important;
}
html body.ud-v2-shell .udc-btn-card-gold:hover {
    background: linear-gradient(135deg, #8B6F42 0%, #6F5835 100%) !important;
    transform: translateY(-1px) !important;
    color: #FFFFFF !important;
}

/* Bouton "Voir" — doré */
html body.ud-v2-shell .udc-btn-card-primary {
    background: linear-gradient(135deg, #C9A227 0%, #A0824D 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(201, 162, 39, 0.25) !important;
}
html body.ud-v2-shell .udc-btn-card-primary:hover {
    background: linear-gradient(135deg, #A0824D 0%, #8B6F42 100%) !important;
    transform: translateY(-1px) !important;
    color: #FFFFFF !important;
}

/* Bouton "Discussion" — blanc */
html body.ud-v2-shell .udc-btn-card-secondary {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #0A0E17 !important;
}
html body.ud-v2-shell .udc-btn-card-secondary:hover {
    background: #0A0E17 !important;
    border-color: #0A0E17 !important;
    color: #C9A227 !important;
}
html body.ud-v2-shell .udc-btn-card-secondary:hover svg {
    stroke: #C9A227 !important;
}

/* ═══ PAGINATION ═══ */
.udc-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; padding: 14px 18px;
    background: #fff; border: 1px solid #E5E9F0;
    border-radius: 12px; flex-wrap: wrap;
}
.udc-page-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; background: #fff;
    border: 1.5px solid #E5E9F0; border-radius: 9px;
    color: #0A0E17; font-family: inherit;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: all 0.15s; line-height: 1;
}
.udc-page-btn:hover:not(:disabled) { background: #0A0E17; border-color: #0A0E17; color: #C9A227; }
.udc-page-btn:hover:not(:disabled) svg { stroke: #C9A227; }
.udc-page-btn svg { stroke: currentColor; }
.udc-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.udc-page-info { font-size: 12.5px; color: #64748B; font-weight: 600; }
.udc-page-info strong { color: #0A0E17; font-weight: 800; }

/* ═══ EMPTY ═══ */
.udc-empty {
    text-align: center; padding: 70px 24px;
    background: #fff; border: 2px dashed #E5E9F0;
    border-radius: 16px;
}
.udc-empty-icon { font-size: 52px; opacity: 0.35; margin-bottom: 14px; }
.udc-empty h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: #0A0E17; }
.udc-empty p { margin: 0; font-size: 13px; color: #64748B; }

/* ═══ MODAL DÉTAIL ═══ */
.ud-dossier-detail-modal {
    position: fixed !important; inset: 0 !important;
    z-index: 99999 !important;
    display: none; align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box;
}
.ud-dossier-detail-modal .ud-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(10, 14, 23, 0.72);
    backdrop-filter: blur(8px); cursor: pointer;
}
.ud-dossier-detail-modal .ud-modal-content {
    position: relative; width: 100%;
    max-width: 780px; max-height: 92vh;
    background: #fff; border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,0.4);
    display: flex; flex-direction: column;
}
.ud-dossier-detail-modal .ud-modal-close {
    position: absolute; top: 14px; right: 14px;
    z-index: 10; width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s; padding: 0;
}
.ud-dossier-detail-modal .ud-modal-close:hover {
    background: #C9A227; color: #0A0E17;
    border-color: #C9A227; transform: rotate(90deg);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1200px) {
    .udc-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
    .udc-panel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
    .udc-cards-grid { grid-template-columns: 1fr; }
    .udc-panel-grid { grid-template-columns: 1fr; }
    .udc-grid-2 { grid-template-columns: 1fr; }
    .udc-actions { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   🎯 FIX PRIORITAIRE — Neutralise le reset `article` du shell.css
   Le shell force border:none !important sur tous les <article>,
   ce qui écrase les bordures des .udc-card
   ═══════════════════════════════════════════════════════════ */

html body.ud-v2-shell article.udc-card,
html body.ud-v2-shell .ud-v2-layout article.udc-card,
html body.ud-v2-shell .ud-v2-layout .udc-card {
    border: 2px solid #E5E9F0 !important;
    border-left: 5px solid #94A3B8 !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
}

/* Couleurs par statut */
html body.ud-v2-shell article.udc-card[data-statut="cloture_paye"],
html body.ud-v2-shell .udc-card[data-statut="cloture_paye"] {
    border-color: #A7F3D0 !important;
    border-left-color: #10B981 !important;
}

html body.ud-v2-shell article.udc-card[data-statut="actif"],
html body.ud-v2-shell article.udc-card[data-statut="en_cours"],
html body.ud-v2-shell .udc-card[data-statut="en_cours"] {
    border-color: #BFDBFE !important;
    border-left-color: #3B82F6 !important;
}

html body.ud-v2-shell article.udc-card[data-statut="en_attente"],
html body.ud-v2-shell .udc-card[data-statut="en_attente"] {
    border-color: #FED7AA !important;
    border-left-color: #F59E0B !important;
}

html body.ud-v2-shell article.udc-card[data-statut="paiement_recu"],
html body.ud-v2-shell .udc-card[data-statut="paiement_recu"] {
    border-color: #FDE68A !important;
    border-left-color: #C9A227 !important;
}

html body.ud-v2-shell article.udc-card[data-statut="cloture_impaye"],
html body.ud-v2-shell .udc-card[data-statut="cloture_impaye"] {
    border-color: #FECACA !important;
    border-left-color: #EF4444 !important;
}

html body.ud-v2-shell article.udc-card[data-statut="refuse"],
html body.ud-v2-shell .udc-card[data-statut="refuse"] {
    border-color: #E2E8F0 !important;
    border-left-color: #94A3B8 !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 BORDURE CARD — Neutre autour + accent couleur à gauche
   Utilise une variable CSS pour éviter les conflits de priorité.
   ═══════════════════════════════════════════════════════════ */

/* Reset complet */
html body.ud-v2-shell .ud-v2-layout .udc-card,
html body.ud-v2-shell article.udc-card {
    border: 1.7px solid #94A3B8 !important;   
    border-radius: 14px !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    cursor: default !important;
    box-shadow: 0 1px 3px rgba(10, 14, 23, 0.04) !important;
}

/* Statut → couleur de bordure complète */
html body.ud-v2-shell .udc-card[data-statut="cloture_paye"] {
    border-color: #10B981 !important;
}

html body.ud-v2-shell .udc-card[data-statut="en_cours"] {
    border-color: #3B82F6 !important;
}
html body.ud-v2-shell .udc-card[data-statut="en_attente"] {
    border-color: #F59E0B !important;
}
html body.ud-v2-shell .udc-card[data-statut="paiement_recu"] {
    border-color: #C9A227 !important;
}
html body.ud-v2-shell .udc-card[data-statut="cloture_impaye"] {
    border-color: #EF4444 !important;
}
html body.ud-v2-shell .udc-card[data-statut="refuse"] {
    border-color: #94A3B8 !important;
}

html body.ud-v2-shell .udc-card:hover {
    box-shadow: 0 10px 24px -8px rgba(10, 14, 23, 0.12) !important;
}

/* 2. Override de la variable par statut (UNIQUEMENT la couleur) */
html body.ud-v2-shell article.udc-card[data-statut="cloture_paye"],
html body.ud-v2-shell .udc-card[data-statut="cloture_paye"] {
    --udc-accent: #10B981;
}

html body.ud-v2-shell article.udc-card[data-statut="en_cours"],
html body.ud-v2-shell .udc-card[data-statut="en_cours"] {
    --udc-accent: #3B82F6;
}
html body.ud-v2-shell article.udc-card[data-statut="en_attente"],
html body.ud-v2-shell .udc-card[data-statut="en_attente"] {
    --udc-accent: #F59E0B;
}
html body.ud-v2-shell article.udc-card[data-statut="paiement_recu"],
html body.ud-v2-shell .udc-card[data-statut="paiement_recu"] {
    --udc-accent: #C9A227;
}
html body.ud-v2-shell article.udc-card[data-statut="cloture_impaye"],
html body.ud-v2-shell .udc-card[data-statut="cloture_impaye"] {
    --udc-accent: #EF4444;
}
html body.ud-v2-shell article.udc-card[data-statut="refuse"],
html body.ud-v2-shell .udc-card[data-statut="refuse"] {
    --udc-accent: #94A3B8;
}

/* ═══════════════════════════════════════════════════════════
   🎯 FORCE L'AFFICHAGE DU HEADER DE CARD
   (shell.css cache tous les <header> sauf .ud-topbar)
   ═══════════════════════════════════════════════════════════ */

html body.ud-v2-shell header.udc-card-head,
html body.ud-v2-shell .ud-v2-layout header.udc-card-head,
html body.ud-v2-shell .ud-v2-layout article.udc-card header.udc-card-head,
html body.ud-v2-shell article.udc-card > header.udc-card-head,
html body.ud-v2-shell .udc-card > header.udc-card-head,
header.udc-card-head {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;

    /* Layout */
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;

    /* Style */
    padding: 16px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid #EEF2F6 !important;
    background: #FFFFFF !important;

    /* Reset tout ce que le reset article du shell a pu toucher */
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ses enfants aussi (au cas où) */
html body.ud-v2-shell header.udc-card-head > * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Le sous-élément gauche */
html body.ud-v2-shell .udc-card-head .udc-card-head-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* La référence */
html body.ud-v2-shell .udc-card-head .udc-card-ref {
    display: block !important;
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0A0E17 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* La date */
html body.ud-v2-shell .udc-card-head .udc-card-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748B !important;
    line-height: 1.2 !important;
}

/* Le badge de statut */
html body.ud-v2-shell .udc-card-head .udc-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 FIX DÉCALAGE HEADER — Force layout compact
   ═══════════════════════════════════════════════════════════ */

/* Le header : petit, aligné, pas de vide */
html body.ud-v2-shell header.udc-card-head,
html body.ud-v2-shell .udc-card > header.udc-card-head,
html body.ud-v2-shell article.udc-card header.udc-card-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    min-height: 0 !important;      /* ⭐ clé : pas de min-height */
    height: auto !important;
    max-height: none !important;
}

/* Le sous-bloc gauche : réf en haut, date juste en dessous */
html body.ud-v2-shell .udc-card-head .udc-card-head-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* La référence : block simple */
html body.ud-v2-shell .udc-card-head .udc-card-head-left .udc-card-ref {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0A0E17 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* La date : inline, sous la réf */
html body.ud-v2-shell .udc-card-head .udc-card-head-left .udc-card-date {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748B !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Le badge statut : petite pastille à droite */
html body.ud-v2-shell .udc-card-head .udc-status-pill {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    padding: 5px 11px !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 100px !important;
}

/* Neutralise tout min-height résiduel */
html body.ud-v2-shell .udc-card,
html body.ud-v2-shell .udc-card > *,
html body.ud-v2-shell .udc-card-head,
html body.ud-v2-shell .udc-card-head > *,
html body.ud-v2-shell .udc-card-head-left,
html body.ud-v2-shell .udc-card-head-left > * {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

/* Exception : le badge garde sa taille */
html body.ud-v2-shell .udc-card-head .udc-status-pill {
    min-height: 22px !important;
    height: 22px !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 FIX NUCLÉAIRE — Header card compact et aligné à GAUCHE
   ═══════════════════════════════════════════════════════════ */

/* 1. Header : hauteur fixe, layout flex propre */
html body.ud-v2-shell article.udc-card header.udc-card-head,
html body.ud-v2-shell .udc-card > header.udc-card-head,
html body.ud-v2-shell header.udc-card-head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    /* ⭐ HAUTEUR FIXE — pas de croissance */
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    box-sizing: border-box !important;

    padding: 14px 18px !important;
    gap: 12px !important;
    overflow: hidden !important;
    border-bottom: 1px solid #EEF2F6 !important;
    background: #FFF !important;
    text-align: left !important;
}

/* 2. Colonne gauche : NE DOIT PAS dépasser */
html body.ud-v2-shell .udc-card > .udc-card-head > .udc-card-head-left,
html body.ud-v2-shell .udc-card-head-left {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;

    /* ⭐ HAUTEUR = contenue */
    height: auto !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
    gap: 3px !important;
    text-align: left !important;
    overflow: hidden !important;
}

/* 3. Référence : un simple bloc à gauche */
html body.ud-v2-shell .udc-card-head-left > .udc-card-ref,
html body.ud-v2-shell .udc-card-ref {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
    float: none !important;
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0A0E17 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* 4. Date : inline-flex alignée à gauche, juste sous la réf */
html body.ud-v2-shell .udc-card-head-left > .udc-card-date,
html body.ud-v2-shell .udc-card-date {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
    align-self: flex-start !important;
    float: none !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;

    gap: 5px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748B !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

/* 5. Le SVG dans la date : taille FORCÉE */
html body.ud-v2-shell .udc-card-date > svg,
html body.ud-v2-shell .udc-card-ref > svg,
html body.ud-v2-shell .udc-card-head svg {
    display: inline-block !important;
    position: static !important;
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;
    max-width: 11px !important;
    max-height: 11px !important;

    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    stroke: currentColor !important;
    fill: none !important;
    overflow: visible !important;
    transform: none !important;
}

/* 6. Badge statut : reste petit en haut à droite */
html body.ud-v2-shell .udc-card-head > .udc-status-pill,
html body.ud-v2-shell .udc-card-head .udc-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;

    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 11px !important;
    margin: 0 !important;

    text-align: center !important;
    white-space: nowrap !important;
}

/* 7. Tue les pseudo-éléments parasites */
html body.ud-v2-shell .udc-card-head::before,
html body.ud-v2-shell .udc-card-head::after,
html body.ud-v2-shell .udc-card-head-left::before,
html body.ud-v2-shell .udc-card-head-left::after,
html body.ud-v2-shell .udc-card-ref::before,
html body.ud-v2-shell .udc-card-ref::after,
html body.ud-v2-shell .udc-card-date::before,
html body.ud-v2-shell .udc-card-date::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    width: 0 !important;
}

/* 8. Le conteneur card : pas de justify-content parasitе */
html body.ud-v2-shell article.udc-card,
html body.ud-v2-shell .udc-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 HEADER CARD — Labels Référence + Déposé le
   ═══════════════════════════════════════════════════════════ */

/* Row Référence */
html body.ud-v2-shell .udc-card-head .udc-card-ref-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

html body.ud-v2-shell .udc-card-head .udc-card-ref-label {
    display: inline-block !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

html body.ud-v2-shell .udc-card-head .udc-card-ref {
    display: inline-block !important;
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0A0E17 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Row Date */
html body.ud-v2-shell .udc-card-head .udc-card-date-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    color: #64748B !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

html body.ud-v2-shell .udc-card-head .udc-card-date-row svg {
    display: inline-block !important;
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;
    max-width: 11px !important;
    max-height: 11px !important;
    flex-shrink: 0 !important;
    stroke: #94A3B8 !important;
    fill: none !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

html body.ud-v2-shell .udc-card-head .udc-card-date-label {
    display: inline-block !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.ud-v2-shell .udc-card-head .udc-card-date {
    display: inline-block !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Reset ancien style .udc-card-date si il reste des résidus */
html body.ud-v2-shell .udc-card-head .udc-card-date-row .udc-card-date {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 BORDURE COLORÉE UNIFORME (2px partout)
   ═══════════════════════════════════════════════════════════ */
html body.ud-v2-shell article.udc-card,
html body.ud-v2-shell .ud-v2-layout article.udc-card,
html body.ud-v2-shell .ud-v2-layout .udc-card {
    --udc-accent: #94A3B8;
    border: 1px solid var(--udc-accent) !important; 
    border-radius: 14px !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    cursor: default !important;
    box-shadow: 0 1px 3px rgba(10, 14, 23, 0.04) !important;
}

/* Variantes par statut — une seule variable qui pilote TOUTE la bordure */
html body.ud-v2-shell .udc-card[data-statut="cloture_paye"]    { --udc-accent: #10B981; }
html body.ud-v2-shell .udc-card[data-statut="actif"],
html body.ud-v2-shell .udc-card[data-statut="en_cours"]        { --udc-accent: #3B82F6; }
html body.ud-v2-shell .udc-card[data-statut="en_attente"]      { --udc-accent: #F59E0B; }
html body.ud-v2-shell .udc-card[data-statut="paiement_recu"]   { --udc-accent: #C9A227; }
html body.ud-v2-shell .udc-card[data-statut="cloture_impaye"]  { --udc-accent: #EF4444; }
html body.ud-v2-shell .udc-card[data-statut="refuse"]          { --udc-accent: #94A3B8; }

html body.ud-v2-shell .udc-card:hover {
    box-shadow: 0 10px 24px -8px rgba(10, 14, 23, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 RÉFÉRENCE COPIABLE
   ═══════════════════════════════════════════════════════════ */
html body.ud-v2-shell .udc-card-head .udc-card-ref-copy {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 2px 8px 2px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0A0E17 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html body.ud-v2-shell .udc-card-head .udc-card-ref-copy:hover {
    color: #A0824D !important;
}

html body.ud-v2-shell .udc-card-head .udc-card-ref-copy .udc-card-ref-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

html body.ud-v2-shell .udc-card-head .udc-card-ref-copy .udc-copy-icon {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    flex-shrink: 0 !important;
    opacity: 0.4 !important;
    stroke: currentColor !important;
    fill: none !important;
    transition: opacity 0.15s !important;
}

html body.ud-v2-shell .udc-card-head .udc-card-ref-copy:hover .udc-copy-icon {
    opacity: 1 !important;
}

/* État "copié" */
html body.ud-v2-shell .udc-card-head .udc-card-ref-copy.is-copied {
    color: #10B981 !important;
}
html body.ud-v2-shell .udc-card-head .udc-card-ref-copy.is-copied .udc-copy-icon {
    opacity: 1 !important;
    stroke: #10B981 !important;
}

/* ═══════════════════════════════════════════════════════════
   💳 PAIEMENTS — Tuiles compactes (montants lisibles)
   ═══════════════════════════════════════════════════════════ */
html body.ud-v2-shell .udc-card-payments {
    padding: 12px 14px;
    background: #F8FAFC;
    border-top: 1px solid #EEF2F6;
    border-bottom: 1px solid #EEF2F6;
}

html body.ud-v2-shell .udc-pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}

html body.ud-v2-shell .udc-pay-head-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

html body.ud-v2-shell .udc-pay-head-left svg {
    stroke: #94A3B8;
    flex-shrink: 0;
}

html body.ud-v2-shell .udc-pay-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #ECFDF5;
    color: #047857;
    border-radius: 100px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

html body.ud-v2-shell .udc-pay-badge.is-empty {
    background: #FFF7ED;
    color: #C2410C;
}

/* ⭐ Tuiles : label au-dessus, valeur EN DESSOUS = largeur max */
html body.ud-v2-shell .udc-pay-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

html body.ud-v2-shell .udc-pay-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: #FFFFFF;
    border: 1px solid #E5E9F0;
    border-radius: 10px;
    min-width: 0;
    text-align: left;
}

html body.ud-v2-shell .udc-pay-tile-label {
    font-size: 8.5px;
    font-weight: 800;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html body.ud-v2-shell .udc-pay-tile-value {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 900;
    color: #0A0E17;
    letter-spacing: -0.3px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Variantes */
html body.ud-v2-shell .udc-pay-tile.is-due {
    background: #FFFFFF;
    border-color: #E5E9F0;
}
html body.ud-v2-shell .udc-pay-tile.is-due .udc-pay-tile-value {
    color: #0A0E17;
}

html body.ud-v2-shell .udc-pay-tile.is-paid {
    background: #F0FDF4;
    border-color: #A7F3D0;
}
html body.ud-v2-shell .udc-pay-tile.is-paid .udc-pay-tile-label { color: #047857; }
html body.ud-v2-shell .udc-pay-tile.is-paid .udc-pay-tile-value { color: #047857; }

html body.ud-v2-shell .udc-pay-tile.is-paid-empty {
    background: #F8FAFC;
    border-color: #E5E9F0;
}
html body.ud-v2-shell .udc-pay-tile.is-paid-empty .udc-pay-tile-value {
    color: #CBD5E1;
}

html body.ud-v2-shell .udc-pay-tile.is-remain {
    background: #FFFBEB;
    border-color: #FDE68A;
}
html body.ud-v2-shell .udc-pay-tile.is-remain .udc-pay-tile-label { color: #D97706; }
html body.ud-v2-shell .udc-pay-tile.is-remain .udc-pay-tile-value { color: #C2410C; }

html body.ud-v2-shell .udc-pay-tile.is-remain-full {
    background: #FFFFFF;
    border-color: #E5E9F0;
}
html body.ud-v2-shell .udc-pay-tile.is-remain-full .udc-pay-tile-value {
    color: #0A0E17;
}

/* Progress */
html body.ud-v2-shell .udc-pay-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
html body.ud-v2-shell .udc-pay-progress-bar {
    flex: 1;
    height: 6px;
    background: #E5E9F0;
    border-radius: 100px;
    overflow: hidden;
}
html body.ud-v2-shell .udc-pay-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #34D399);
    border-radius: 100px;
}
html body.ud-v2-shell .udc-pay-progress-pct {
    font-size: 10.5px;
    font-weight: 800;
    color: #047857;
    white-space: nowrap;
    min-width: 34px;
    text-align: right;
}

/* ─── Téléphone (sous le contact) ─── */
html body.ud-v2-shell .udc-card .udc-info-sub {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    margin-top: 2px;
    line-height: 1.2;
}
html body.ud-v2-shell .udc-card .udc-info-sub svg {
    width: 10px;
    height: 10px;
    stroke: #94A3B8;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   🎯 BORDURE CARD = couleur du statut (tout autour)
   ═══════════════════════════════════════════════════════════ */

/* Reset + valeur par défaut */
html body.ud-v2-shell .ud-v2-layout .udc-card,
html body.ud-v2-shell article.udc-card,
html body.ud-v2-shell .udc-card {
    --udc-accent: #94A3B8;
    border: 2px solid var(--udc-accent) !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    cursor: default !important;
    box-shadow: 0 1px 3px rgba(10, 14, 23, 0.04) !important;
}

/* Une seule variable pilote TOUTE la bordure */
html body.ud-v2-shell .udc-card[data-statut="cloture_paye"]    { --udc-accent: #10B981 !important; }
html body.ud-v2-shell .udc-card[data-statut="actif"],
html body.ud-v2-shell .udc-card[data-statut="en_cours"]        { --udc-accent: #3B82F6 !important; }
html body.ud-v2-shell .udc-card[data-statut="en_attente"]      { --udc-accent: #F59E0B !important; }
html body.ud-v2-shell .udc-card[data-statut="paiement_recu"]   { --udc-accent: #C9A227 !important; }
html body.ud-v2-shell .udc-card[data-statut="cloture_impaye"]  { --udc-accent: #EF4444 !important; }
html body.ud-v2-shell .udc-card[data-statut="refuse"]          { --udc-accent: #94A3B8 !important; }

html body.ud-v2-shell .udc-card:hover {
    box-shadow: 0 10px 24px -8px rgba(10, 14, 23, 0.12) !important;
}

html body.ud-v2-shell article.udc-card, html body.ud-v2-shell .ud-v2-layout article.udc-card, html body.ud-v2-shell .ud-v2-layout .udc-card {
  --udc-accent: #94A3B8;
  border: 2px solid var(--udc-accent) !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 FIX FILTRES — Classe is-hidden prioritaire
   (écrase le display:flex !important de .udc-card)
   ═══════════════════════════════════════════════════════════ */

html body.ud-v2-shell .udc-card.is-hidden,
html body.ud-v2-shell article.udc-card.is-hidden,
html body.ud-v2-shell .ud-v2-layout .udc-card.is-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 MODAL DÉTAIL DOSSIER — Design v3 (client)
   Structure : Header + Hero (3 chiffres) + Body sections + Footer
   ═══════════════════════════════════════════════════════════ */

/* ─── Overlay + container ─── */
html body.ud-v2-shell .ud-dossier-detail-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}
html body.ud-v2-shell .ud-dossier-detail-modal[style*="flex"],
html body.ud-v2-shell .ud-dossier-detail-modal[style*="display: flex"] {
    display: flex !important;
}

html body.ud-v2-shell .ud-dossier-detail-modal .ud-modal-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(10, 14, 23, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    cursor: pointer !important;
}

html body.ud-v2-shell .ud-dossier-detail-modal .ud-modal-content {
    position: relative !important;
    width: 100% !important;
    max-width: 780px !important;
    max-height: 92vh !important;
    background: #fff !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    animation: udmIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body.ud-v2-shell .ud-dossier-detail-modal .ud-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 10 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    padding: 0 !important;
    transition: all 0.2s !important;
}
html body.ud-v2-shell .ud-dossier-detail-modal .ud-modal-close:hover {
    background: #C9A227 !important;
    border-color: #C9A227 !important;
    color: #0A0E17 !important;
    transform: rotate(90deg) !important;
}

/* ─── Structure interne ─── */
html body.ud-v2-shell .udm3 {
    display: flex !important;
    flex-direction: column !important;
    max-height: 92vh !important;
    overflow: hidden !important;
}

/* ═══ HEADER sombre ═══ */
html body.ud-v2-shell .udm3-head {
    padding: 22px 26px 18px !important;
    background: linear-gradient(135deg, #0A0E17 0%, #1A1F2E 100%) !important;
    color: #fff !important;
    flex-shrink: 0 !important;
    position: relative !important;
    padding-right: 60px !important;
}
html body.ud-v2-shell .udm3-head::before {
    content: '' !important;
    position: absolute !important;
    top: -50px; right: -50px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.2) 0%, transparent 70%) !important;
    pointer-events: none !important;
}
html body.ud-v2-shell .udm3-head-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    position: relative !important;
}
html body.ud-v2-shell .udm3-head-ref {
    font-family: 'Courier New', monospace !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #C9A227 !important;
    letter-spacing: 0.5px !important;
    word-break: break-all !important;
    line-height: 1.2 !important;
}
html body.ud-v2-shell .udm3-head-date {
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
}
html body.ud-v2-shell .udm3-head-badges {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}
html body.ud-v2-shell .udm3-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 11px !important;
    border-radius: 100px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}
html body.ud-v2-shell .udm3-badge.is-signed    { background: #10B981 !important; color: #fff !important; }
html body.ud-v2-shell .udm3-badge.is-pending   { background: #F59E0B !important; color: #fff !important; }
html body.ud-v2-shell .udm3-badge.is-declined  { background: #EF4444 !important; color: #fff !important; }
html body.ud-v2-shell .udm3-badge.is-dossier   { background: rgba(59, 130, 246, 0.95) !important; color: #fff !important; }

/* ═══ HERO 3 chiffres ═══ */
html body.ud-v2-shell .udm3-hero {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 26px 20px !important;
    background: linear-gradient(180deg, #1A1F2E 0%, #0A0E17 100%) !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
html body.ud-v2-shell .udm3-hero-cell {
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}
html body.ud-v2-shell .udm3-hero-cell.is-main {
    background: linear-gradient(135deg, #C9A227 0%, #A0824D 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 20px rgba(201, 162, 39, 0.3) !important;
}
html body.ud-v2-shell .udm3-hero-label {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 6px !important;
}
html body.ud-v2-shell .udm3-hero-cell.is-main .udm3-hero-label {
    color: rgba(255, 255, 255, 0.9) !important;
}
html body.ud-v2-shell .udm3-hero-value {
    font-family: 'Courier New', monospace !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: -0.4px !important;
    line-height: 1.1 !important;
}
html body.ud-v2-shell .udm3-hero-cell.is-main .udm3-hero-value { font-size: 19px !important; }
html body.ud-v2-shell .udm3-hero-value.is-paid   { color: #34D399 !important; }
html body.ud-v2-shell .udm3-hero-value.is-remain { color: #FBBF24 !important; }

/* ═══ BODY scrollable ═══ */
html body.ud-v2-shell .udm3-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px 24px !important;
    background: #F8FAFC !important;
}
html body.ud-v2-shell .udm3-body::-webkit-scrollbar { width: 8px; }
html body.ud-v2-shell .udm3-body::-webkit-scrollbar-thumb {
    background: #CBD5E1; border-radius: 4px;
}

/* ═══ Sections ═══ */
html body.ud-v2-shell .udm3-section {
    background: #fff !important;
    border: 1px solid #E5E9F0 !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin-bottom: 12px !important;
}
html body.ud-v2-shell .udm3-section:last-child { margin-bottom: 0 !important; }

html body.ud-v2-shell .udm3-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    padding: 0 0 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #0A0E17 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}
html body.ud-v2-shell .udm3-section-title-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    background: #FEF3C7 !important;
    color: #92400E !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

/* ═══ Grille 2 colonnes ═══ */
html body.ud-v2-shell .udm3-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 18px !important;
}
html body.ud-v2-shell .udm3-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}
html body.ud-v2-shell .udm3-field.is-full { grid-column: 1 / -1 !important; }
html body.ud-v2-shell .udm3-field-label {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    line-height: 1.2 !important;
}
html body.ud-v2-shell .udm3-field-value {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0A0E17 !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
}
html body.ud-v2-shell .udm3-field-value.is-empty {
    color: #CBD5E1 !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

/* ═══ Description ═══ */
html body.ud-v2-shell .udm3-desc {
    padding: 12px 14px !important;
    background: #F8FAFC !important;
    border-left: 3px solid #C9A227 !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #334155 !important;
    white-space: pre-wrap !important;
}

/* ═══ Status box (contrat / certification) ═══ */
html body.ud-v2-shell .udm3-status-box {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
}
html body.ud-v2-shell .udm3-status-box-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
}
html body.ud-v2-shell .udm3-status-box.is-signed   { background: #ECFDF5 !important; color: #065F46 !important; }
html body.ud-v2-shell .udm3-status-box.is-signed .udm3-status-box-icon   { background: #10B981 !important; color: #fff !important; }
html body.ud-v2-shell .udm3-status-box.is-pending  { background: #FEF3C7 !important; color: #78350F !important; }
html body.ud-v2-shell .udm3-status-box.is-pending .udm3-status-box-icon  { background: #F59E0B !important; color: #fff !important; }
html body.ud-v2-shell .udm3-status-box.is-declined { background: #FEF2F2 !important; color: #7F1D1D !important; }
html body.ud-v2-shell .udm3-status-box.is-declined .udm3-status-box-icon { background: #EF4444 !important; color: #fff !important; }
html body.ud-v2-shell .udm3-status-box.is-none     { background: #F1F5F9 !important; color: #64748B !important; }
html body.ud-v2-shell .udm3-status-box.is-none .udm3-status-box-icon     { background: #CBD5E1 !important; color: #fff !important; }
html body.ud-v2-shell .udm3-status-box strong { color: inherit !important; font-weight: 800 !important; }

/* ═══ Paiements ═══ */
html body.ud-v2-shell .udm3-pay-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}
html body.ud-v2-shell .udm3-pay-kpi {
    padding: 12px 14px !important;
    background: #F8FAFC !important;
    border: 1px solid #E5E9F0 !important;
    border-radius: 10px !important;
}
html body.ud-v2-shell .udm3-pay-kpi.is-paid { background: #ECFDF5 !important; border-color: #A7F3D0 !important; }
html body.ud-v2-shell .udm3-pay-kpi.is-remaining { background: #FEF3C7 !important; border-color: #FDE68A !important; }
html body.ud-v2-shell .udm3-pay-kpi-label {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 4px !important;
}
html body.ud-v2-shell .udm3-pay-kpi.is-paid .udm3-pay-kpi-label { color: #047857 !important; }
html body.ud-v2-shell .udm3-pay-kpi.is-remaining .udm3-pay-kpi-label { color: #92400E !important; }
html body.ud-v2-shell .udm3-pay-kpi-value {
    font-family: 'Courier New', monospace !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #0A0E17 !important;
    line-height: 1.1 !important;
}
html body.ud-v2-shell .udm3-pay-kpi.is-paid .udm3-pay-kpi-value { color: #065F46 !important; }
html body.ud-v2-shell .udm3-pay-kpi.is-remaining .udm3-pay-kpi-value { color: #78350F !important; }

/* Échéancier */
html body.ud-v2-shell .udm3-plan {
    padding: 14px 16px !important;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
}
html body.ud-v2-shell .udm3-plan-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}
html body.ud-v2-shell .udm3-plan-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #1E40AF !important;
}
html body.ud-v2-shell .udm3-plan-count {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: #1E40AF !important;
    background: #fff !important;
    padding: 3px 9px !important;
    border-radius: 100px !important;
}
html body.ud-v2-shell .udm3-plan-bar {
    height: 8px !important;
    background: #BFDBFE !important;
    border-radius: 100px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}
html body.ud-v2-shell .udm3-plan-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #3B82F6, #2563EB) !important;
    border-radius: 100px !important;
}
html body.ud-v2-shell .udm3-plan-foot {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    font-size: 11px !important;
    color: #1E40AF !important;
    font-weight: 700 !important;
}
html body.ud-v2-shell .udm3-plan-next {
    padding: 8px 10px !important;
    background: #fff !important;
    border: 1px dashed #93C5FD !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
    font-size: 11.5px !important;
    color: #1E40AF !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-weight: 600 !important;
}
html body.ud-v2-shell .udm3-plan-next strong {
    font-family: 'Courier New', monospace !important;
    color: #0A0E17 !important;
    font-weight: 900 !important;
}

/* Liste paiements */
html body.ud-v2-shell .udm3-payments-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
html body.ud-v2-shell .udm3-payment {
    display: grid !important;
    grid-template-columns: 40px 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    border: 1px solid #E5E9F0 !important;
    border-radius: 10px !important;
    transition: all 0.15s !important;
}
html body.ud-v2-shell .udm3-payment:hover {
    border-color: #10B981 !important;
    background: #F0FDF4 !important;
}
html body.ud-v2-shell .udm3-payment-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #10B981, #059669) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}
html body.ud-v2-shell .udm3-payment-info { min-width: 0 !important; }
html body.ud-v2-shell .udm3-payment-label {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #0A0E17 !important;
    margin-bottom: 3px !important;
}
html body.ud-v2-shell .udm3-payment-meta {
    font-size: 11px !important;
    color: #64748B !important;
    font-weight: 500 !important;
}
html body.ud-v2-shell .udm3-payment-meta code {
    font-family: 'Courier New', monospace !important;
    font-size: 10px !important;
    background: #F1F5F9 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    color: #475569 !important;
}
html body.ud-v2-shell .udm3-payment-amount {
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #059669 !important;
    white-space: nowrap !important;
}

/* Empty */
html body.ud-v2-shell .udm3-empty {
    text-align: center !important;
    padding: 26px 20px !important;
    background: #F8FAFC !important;
    border: 1px dashed #E5E9F0 !important;
    border-radius: 10px !important;
    color: #94A3B8 !important;
    font-size: 12.5px !important;
    font-style: italic !important;
}
html body.ud-v2-shell .udm3-empty-icon {
    font-size: 32px !important;
    opacity: 0.5 !important;
    margin-bottom: 8px !important;
}

/* ═══ PJ grid ═══ */
html body.ud-v2-shell .udm3-pj-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 10px !important;
}
html body.ud-v2-shell .udm3-pj {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #F8FAFC !important;
    border: 1px solid #E5E9F0 !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    color: #0A0E17 !important;
    transition: all 0.15s !important;
    overflow: hidden !important;
}
html body.ud-v2-shell .udm3-pj:hover {
    border-color: #C9A227 !important;
    background: #FEFCF7 !important;
}
html body.ud-v2-shell .udm3-pj-icon { font-size: 20px !important; flex-shrink: 0 !important; }
html body.ud-v2-shell .udm3-pj-info { min-width: 0 !important; flex: 1 !important; }
html body.ud-v2-shell .udm3-pj-name {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body.ud-v2-shell .udm3-pj-meta {
    font-size: 10px !important;
    color: #94A3B8 !important;
    font-weight: 600 !important;
}

/* ═══ Gestionnaire ═══ */
html body.ud-v2-shell .udm3-gest {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
html body.ud-v2-shell .udm3-gest-av {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0A0E17, #1A1F2E) !important;
    color: #C9A227 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}
html body.ud-v2-shell .udm3-gest-av.is-admin {
    background: linear-gradient(135deg, #C9A227, #A0824D) !important;
    color: #0A0E17 !important;
}
html body.ud-v2-shell .udm3-gest-name {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0A0E17 !important;
}
html body.ud-v2-shell .udm3-gest-role {
    font-size: 11.5px !important;
    color: #64748B !important;
    margin-top: 2px !important;
}

/* ═══ FOOTER ═══ */
html body.ud-v2-shell .udm3-foot {
    flex-shrink: 0 !important;
    padding: 14px 24px !important;
    background: #fff !important;
    border-top: 1px solid #E5E9F0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
html body.ud-v2-shell .udm3-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 11px 22px !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: 1.5px solid transparent !important;
    transition: all 0.15s !important;
    min-height: 42px !important;
    line-height: 1 !important;
}
html body.ud-v2-shell .udm3-btn-secondary {
    background: #fff !important;
    border-color: #E5E9F0 !important;
    color: #475569 !important;
}
html body.ud-v2-shell .udm3-btn-secondary:hover {
    background: #0A0E17 !important;
    border-color: #0A0E17 !important;
    color: #C9A227 !important;
}
html body.ud-v2-shell .udm3-btn-primary {
    background: linear-gradient(135deg, #C9A227, #A0824D) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(201, 162, 39, 0.3) !important;
}
html body.ud-v2-shell .udm3-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(201, 162, 39, 0.45) !important;
    color: #fff !important;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 700px) {
    html body.ud-v2-shell .ud-dossier-detail-modal {
        padding: 0 !important;
    }
    html body.ud-v2-shell .ud-dossier-detail-modal .ud-modal-content {
        max-width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
    html body.ud-v2-shell .udm3 { max-height: 100vh !important; }
    html body.ud-v2-shell .udm3-head { padding: 18px 20px 14px !important; padding-right: 56px !important; }
    html body.ud-v2-shell .udm3-hero {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 10px !important;
        padding: 20px 26px 20px !important;   /* ⭐ 20px en haut au lieu de 0 */
        background: linear-gradient(180deg, #1A1F2E 0%, #0A0E17 100%) !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }
    html body.ud-v2-shell .udm3-body { padding: 16px 20px !important; }
    html body.ud-v2-shell .udm3-grid { grid-template-columns: 1fr !important; }
    html body.ud-v2-shell .udm3-pay-summary { grid-template-columns: 1fr !important; }
    html body.ud-v2-shell .udm3-foot {
        padding: 12px 20px !important;
        flex-direction: column-reverse !important;
    }
    html body.ud-v2-shell .udm3-btn { width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════
   🎯 Badge statut — compact
   ═══════════════════════════════════════════════════════════ */
html body.ud-v2-shell .udc-card-head .udc-status-pill {
    font-size: 9px !important;
    padding: 4px 9px !important;
    letter-spacing: 0.3px !important;
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Référence plus visible */
html body.ud-v2-shell .udc-card-head-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

html body.ud-v2-shell .udc-card-head .udc-card-ref-copy {
    min-width: 0 !important;
    overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 Header card — Layout vertical
   (réf en haut, badge en dessous)
   ═══════════════════════════════════════════════════════════ */
html body.ud-v2-shell .udc-card-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

html body.ud-v2-shell .udc-card-head .udc-status-pill {
    align-self: flex-start !important;
}