@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* _content/Sie.WebSite.GridPortal.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* Mobile styles */
@media (max-width: 768px) {
    .hide-on-mobile[b-xmk8cp14u6] {
        display: none !important;
    }

    .show-on-mobile[b-xmk8cp14u6] {
        display: block !important;
    }

    .header-content[b-xmk8cp14u6] {
        margin-right: 60px; /* Space for hamburger menu */
    }
}

/* Desktop styles */
@media (min-width: 769px) {
    .hide-on-mobile[b-xmk8cp14u6] {
        display: block !important;
    }

    .show-on-mobile[b-xmk8cp14u6] {
        display: none !important;
    }
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Layout/NavMenu.razor.rz.scp.css */
[b-9knnscsk47] .navLink {
    /*background-color: #fbfbfb !important;*/
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

    [b-9knnscsk47] .navLink:hover {
        /*background-color: #f1f1f1 !important;*/
    }

/* Chevron toggle button at the bottom */
[b-9knnscsk47] .navmenu-chevron {
    position: absolute;
    top: 50%;
    right: -14px; /* sits on the right edge, half outside */
    transform: translateY(-50%);
    background-color: darkgray;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1001;
}

    [b-9knnscsk47] .navmenu-chevron:hover {
        background-color: dimgray;
    }

[b-9knnscsk47] .navLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.navLink-text[b-9knnscsk47] {
    font-size: 0.85rem;
    margin-top: 2px;
}

[b-9knnscsk47] .navmenu > svg,
[b-9knnscsk47] .navmenu img {
    max-width: 100%;
    height: auto;
}

[b-9knnscsk47] .navmenu-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

    [b-9knnscsk47] .navmenu-logo svg,
    [b-9knnscsk47] .navmenu-logo img {
        max-width: 140px; /* tune to taste */
        height: auto;
    }

/* shrink logo further when collapsed */
[b-9knnscsk47] .navmenu.collapsed .navmenu-logo svg,
[b-9knnscsk47] .navmenu.collapsed .navmenu-logo img {
    max-width: 70px;
    max-height: 50px;
}

/* Shrink icons to fit the 80px rail */
[b-9knnscsk47] .navmenu.collapsed .navLink svg {
    width: 24px !important;
    height: 24px !important;
}

[b-9knnscsk47] .sitenav {
    flex: 1 1 auto; /* take remaining vertical space */
    overflow-y: auto; /* scroll when content overflows */
    overflow-x: hidden;
    min-height: 0; /* required for flex children to actually shrink */
    width: 100%;
}

    /* Optional: nicer scrollbar styling */
    [b-9knnscsk47] .sitenav::-webkit-scrollbar {
        width: 6px;
    }

    [b-9knnscsk47] .sitenav::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

        [b-9knnscsk47] .sitenav::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.4);
        }

    [b-9knnscsk47] .sitenav::-webkit-scrollbar-track {
        background: transparent;
    }

/* Smooth expand/collapse animation */
[b-9knnscsk47] .navmenu {
    width: 220px;
    flex-shrink: 0;
    overflow: visible;
    transition: width 0.25s ease-in-out;
}

.nav-header[b-9knnscsk47] {
    width: 220px;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.25s ease-in-out;
}

[b-9knnscsk47] .nav-header.collapsed {
    width: 100px;
}

/* Fade the labels in/out as they appear/disappear */
.navLink-text[b-9knnscsk47] {
    transition: opacity 0.2s ease-in-out;
}

[b-9knnscsk47] .navmenu.collapsed .navLink-text {
    opacity: 0;
}

/* The logo also resizes — animate that smoothly */
[b-9knnscsk47] .navmenu-logo svg,
[b-9knnscsk47] .navmenu-logo img {
    transition: max-width 0.25s ease-in-out;
}

/* The chevron rotates as it swaps direction — animate the icon swap */
[b-9knnscsk47] .navmenu-chevron svg {
    transition: transform 0.25s ease-in-out;
}

/* ---- COLLAPSED STATE ---- */
[b-9knnscsk47] .navmenu.collapsed {
    width: 100px !important;
}

    /* Hide the empty left icon slot Fluent reserves */
    [b-9knnscsk47] .navmenu.collapsed .fluent-nav-icon {
        display: none !important;
    }

    /* Give the text slot full width so our content has room */
    [b-9knnscsk47] .navmenu.collapsed .fluent-nav-text {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    /* Force the positioning + content regions to not clip */
    [b-9knnscsk47] .navmenu.collapsed .positioning-region,
    [b-9knnscsk47] .navmenu.collapsed .content-region {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    /* Force #main-menu wrapper width */
    [b-9knnscsk47] .navmenu.collapsed #main-menu {
        width: 80px !important;
        min-width: 80px !important;
    }

    /* Hide the text label, keep the icon */
    [b-9knnscsk47] .navmenu.collapsed .navLink-text {
        display: none !important;
    }

    /* Make sure .navLink lays out cleanly */
    [b-9knnscsk47] .navmenu.collapsed .navLink {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 4px !important;
    }

    /* Shrink logo when collapsed */
    [b-9knnscsk47] .navmenu.collapsed .navmenu-logo svg,
    [b-9knnscsk47] .navmenu.collapsed .navmenu-logo img {
        max-width: 50px !important;
        height: auto !important;
    }
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Agenda.razor.rz.scp.css */
[b-qa7ct9ocez] .agenda-stack {
    padding: 1.5rem;
}
[b-qa7ct9ocez] .activeTab {
    color: dodgerblue !important;
}
[b-qa7ct9ocez] .rcp-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
[b-qa7ct9ocez] .rcp-header {
    padding: 0.5rem 1rem;
    /*color: light;*/
    font-weight: bold;
    background-color: rgba(201, 211, 226, 0.4) !important;
    cursor: pointer;
}
[b-qa7ct9ocez] .rcp-steps-message {
    padding: 0.5rem 1rem;
    font-weight: normal;
}

[b-qa7ct9ocez] .rcp-steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
}

[b-qa7ct9ocez] .step {
    flex: 1;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: slategray;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    font-weight: 500;
    background-color: #64b5f6;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 1.5rem;
    position: relative;
    clip-path: polygon( 0% 0%, calc(100% - var(--point-offset)) 0%, 100% 50%, calc(100% - var(--point-offset)) 100%, 0% 100%, 0% var(--notch-bottom), var(--notch-depth) 50%, 0% var(--notch-top) );
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: clip-path 0.3s ease;
    --notch-depth: 15px;
    --notch-top: 5%;
    --notch-bottom: 95%;
    --point-offset: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, clip-path 0.3s ease;
}
    [b-qa7ct9ocez] .step:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    [b-qa7ct9ocez] .step:first-child {
        clip-path: polygon( 0% 0%, calc(100% - var(--point-offset)) 0%, 100% 50%, calc(100% - var(--point-offset)) 100%, 0% 100%, 0% var(--notch-bottom), var(--notch-depth) 50%, 0% var(--notch-top) );
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        transition: clip-path 0.3s ease;
        --notch-depth: 0px;
        --notch-top: 5%;
        --notch-bottom: 95%;
        --point-offset: 15px;
        margin-left:0.5rem;
    }
    [b-qa7ct9ocez] .step:last-child {
        clip-path: polygon( 0% 0%, calc(100% - var(--point-offset)) 0%, 100% 50%, calc(100% - var(--point-offset)) 100%, 0% 100%, 0% var(--notch-bottom), var(--notch-depth) 50%, 0% var(--notch-top) );
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        transition: clip-path 0.3s ease;
        --notch-depth: 15px;
        --notch-top: 5%;
        --notch-bottom: 95%;
        --point-offset: 0px;
        margin-right:0.5rem;
        
    }
/* Animation d'apparition glissée */
@keyframes slideInLeft-b-qa7ct9ocez {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Appliquer à chaque étape */
[b-qa7ct9ocez] .rcp-steps .step {
    animation: slideInLeft-b-qa7ct9ocez 0.6s ease forwards;
    opacity: 0;
}

    /* Décalage progressif pour chaque élément (effet cascade) */
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(1) {
        animation-delay: 0.1s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(2) {
        animation-delay: 0.25s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(3) {
        animation-delay: 0.4s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(4) {
        animation-delay: 0.55s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(5) {
        animation-delay: 0.7s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(6) {
        animation-delay: 0.8s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(7) {
        animation-delay: 0.9s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(8) {
        animation-delay: 1s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(9) {
        animation-delay: 1.1s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(10) {
        animation-delay: 1.2s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(11) {
        animation-delay: 1.3s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(12) {
        animation-delay: 1.4s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(13) {
        animation-delay: 1.5s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(14) {
        animation-delay: 1.6s;
    }
    [b-qa7ct9ocez] .rcp-steps .step:nth-child(15) {
        animation-delay: 1.7s;
    }

/* Pour plus de 5 étapes, on peut généraliser : */
[b-qa7ct9ocez] .rcp-steps .step {
    animation-fill-mode: both;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Archives.razor.rz.scp.css */
[b-qhiu6bv5kl] .archives-stack {
    padding: 1.5rem;
}


.archives-toolbar[b-qhiu6bv5kl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding-bottom: 14px;
    overflow: visible;
}

.archives-toolbar-left[b-qhiu6bv5kl],
.archives-toolbar-right[b-qhiu6bv5kl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: visible;
}

.archives-toolbar-right[b-qhiu6bv5kl] {
    margin-left: auto;
}

/* 1. Let the wrapper scroll instead of clipping */
.archives-grid-wrap[b-qhiu6bv5kl] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto; /* was: hidden */
}

    /* 2. Real minimum width → table overflows → scrollbar appears */
    .archives-grid-wrap[b-qhiu6bv5kl]  table {
        width: 100% !important;
        min-width: 62rem; /* tune: the point where scrolling kicks in */
        max-width: none; /* remove the 100% ceiling */
        table-layout: fixed;
    }

    /* --- Retour à la ligne au lieu du débordement --- */
    .archives-grid-wrap table th[b-qhiu6bv5kl],
    .archives-grid-wrap table td[b-qhiu6bv5kl] {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: middle;
        line-height: 1.4;
    }

    .archives-grid-wrap table .col-title-text[b-qhiu6bv5kl],
    .archives-grid-wrap table .column-header[b-qhiu6bv5kl] {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* --- Largeurs de colonnes (total = 100%) --- */

    /* Nom du projet   */
    .archives-grid-wrap[b-qhiu6bv5kl]  table th:nth-child(1),
    .archives-grid-wrap[b-qhiu6bv5kl]  table td:nth-child(1) {
        width: 13%;
    }
    /* Référence       */
    .archives-grid-wrap[b-qhiu6bv5kl]  table th:nth-child(2),
    .archives-grid-wrap[b-qhiu6bv5kl]  table td:nth-child(2) {
        width: 17%;
    }
    /* Date création   */
    .archives-grid-wrap[b-qhiu6bv5kl]  table th:nth-child(3),
    .archives-grid-wrap[b-qhiu6bv5kl]  table td:nth-child(3) {
        width: 11%;
    }
    /* Type de demande */
    .archives-grid-wrap[b-qhiu6bv5kl]  table th:nth-child(4),
    .archives-grid-wrap[b-qhiu6bv5kl]  table td:nth-child(4) {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: middle;
    }
    /* Address column wraps onto several lines */
    .archives-grid-wrap[b-qhiu6bv5kl]  table td:nth-child(5),
    .archives-grid-wrap[b-qhiu6bv5kl]  table th:nth-child(5) {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: middle;
    }
    /* Étape en cours  */
    .archives-grid-wrap[b-qhiu6bv5kl]  table th:nth-child(6),
    .archives-grid-wrap[b-qhiu6bv5kl]  table td:nth-child(6) {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: middle;
        width: 12%;
    }
    /* Messages        */
    .archives-grid-wrap[b-qhiu6bv5kl]  table th:nth-child(7),
    .archives-grid-wrap[b-qhiu6bv5kl]  table td:nth-child(7) {
        width: 7%;
    }
    /* Action          */
    .archives-grid-wrap[b-qhiu6bv5kl]  table th:nth-child(8),
    .archives-grid-wrap[b-qhiu6bv5kl]  table td:nth-child(8) {
        width: 12%;
    }

    /* --- Lignes cliquables --- */
    .archives-grid-wrap table tbody tr[b-qhiu6bv5kl] {
        cursor: pointer;
        transition: background 0.2s ease;
    }

        .archives-grid-wrap table tbody tr:hover[b-qhiu6bv5kl] {
            background: #f8fafc;
        }
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Associate.razor.rz.scp.css */
[b-v0lhhvyjg5] .info {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    margin-top: 2rem;
    padding-bottom: 2rem;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/CELConsent.razor.rz.scp.css */
/* ============================================ */
/* === PAGE CONSENTEMENT CEL === */
/* ============================================ */

.consent-page[b-ndp53zzjoj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

/* ---- Bandeau d'accroche ---- */
.consent-intro-banner[b-ndp53zzjoj] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    border-radius: 16px;
    flex-wrap: wrap;
}

.consent-intro-icon[b-ndp53zzjoj] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: white;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18);
}

.consent-intro-content[b-ndp53zzjoj] {
    flex: 1;
    min-width: 200px;
}

.consent-intro-title[b-ndp53zzjoj] {
    font-size: 16px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 4px;
    line-height: 1.3;
}

.consent-intro-text[b-ndp53zzjoj] {
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
}

/* Tag rôle */
.consent-role-tag[b-ndp53zzjoj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex-shrink: 0;
}

    .consent-role-tag.tag-consumer[b-ndp53zzjoj] {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #1e40af;
        border: 1px solid #93c5fd;
    }

    .consent-role-tag.tag-producer[b-ndp53zzjoj] {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
        border: 1px solid #fcd34d;
    }

/* ---- Grille d'informations ---- */
.consent-info-grid[b-ndp53zzjoj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.consent-info-item[b-ndp53zzjoj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
}

    .consent-info-item:hover[b-ndp53zzjoj] {
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

.consent-info-item-wide[b-ndp53zzjoj] {
    grid-column: 1 / -1;
}

.consent-info-item-header[b-ndp53zzjoj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .consent-info-item-header > svg[b-ndp53zzjoj],
    .consent-info-item-header > fluent-icon[b-ndp53zzjoj] {
        color: #94a3b8;
        flex-shrink: 0;
    }

.consent-info-label[b-ndp53zzjoj] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    font-weight: 600;
}

.consent-info-value[b-ndp53zzjoj] {
    font-size: 14px;
    color: #0f172a;
    font-weight: 600;
    line-height: 1.45;
    margin-left: 24px;
}

.consent-info-link[b-ndp53zzjoj] {
    font-size: 13px;
    color: #3b82f6;
    text-decoration: none;
    margin-left: 24px;
    word-break: break-word;
}

    .consent-info-link:hover[b-ndp53zzjoj] {
        text-decoration: underline;
    }

.consent-info-empty[b-ndp53zzjoj] {
    color: #cbd5e1;
    font-style: italic;
    font-weight: 500;
}

/* POD en monospace */
.consent-pod[b-ndp53zzjoj] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    color: #1e293b;
    font-weight: 600;
    background: #f1f5f9;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    width: fit-content;
    word-break: break-all;
    margin-left: 24px;
}

/* ---- Bandeau "point à discuter" ---- */
.consent-discuss-banner[b-ndp53zzjoj] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #ddd6fe;
    border-left: 4px solid #8b5cf6;
    border-radius: 14px;
}

.consent-discuss-icon[b-ndp53zzjoj] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: white;
    color: #8b5cf6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.15);
}

.consent-discuss-title[b-ndp53zzjoj] {
    font-size: 14px;
    font-weight: 600;
    color: #5b21b6;
    margin-bottom: 4px;
}

.consent-discuss-text[b-ndp53zzjoj] {
    font-size: 13px;
    color: #6d28d9;
    line-height: 1.55;
}

/* ---- Bandeau délai ---- */
.consent-deadline-banner[b-ndp53zzjoj] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 14px;
}

.consent-deadline-icon[b-ndp53zzjoj] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: white;
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.18);
}

.consent-deadline-title[b-ndp53zzjoj] {
    font-size: 14px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 4px;
}

.consent-deadline-text[b-ndp53zzjoj] {
    font-size: 13px;
    color: #b45309;
    line-height: 1.55;
}

/* ---- Carte de consentement ---- */
.consent-agreement-card[b-ndp53zzjoj] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.consent-agreement-text p[b-ndp53zzjoj] {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #1e293b;
    line-height: 1.6;
}

    .consent-agreement-text p:last-child[b-ndp53zzjoj] {
        margin-bottom: 0;
    }

.consent-agreement-note[b-ndp53zzjoj] {
    font-size: 13px !important;
    color: #64748b !important;
    font-style: italic;
}

.consent-divider[b-ndp53zzjoj] {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 4px 0;
    width: 100%;
}

/* ---- Actions ---- */
.consent-actions[b-ndp53zzjoj] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 8px;
}

    .consent-actions[b-ndp53zzjoj]  .btn-refuse {
        color: #ef4444 !important;
        border-color: #fecaca !important;
    }

        .consent-actions[b-ndp53zzjoj]  .btn-refuse:hover {
            background: #fef2f2 !important;
        }

    .consent-actions[b-ndp53zzjoj]  .btn-accept {
        max-width: 100%;
    }

/* ---- Écrans d'état (succès / erreur / expiré) ---- */
.consent-state-card[b-ndp53zzjoj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 56px 32px;
    margin: 2rem auto;
    max-width: 620px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.consent-state-icon[b-ndp53zzjoj] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.consent-state-title[b-ndp53zzjoj] {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.consent-state-text[b-ndp53zzjoj] {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

/* Variantes d'état */
.consent-state-success[b-ndp53zzjoj] {
    border-color: #a7f3d0;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

    .consent-state-success .consent-state-icon[b-ndp53zzjoj] {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        color: #16a34a;
    }

.consent-state-refused[b-ndp53zzjoj] {
    border-color: #fecaca;
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}

    .consent-state-refused .consent-state-icon[b-ndp53zzjoj] {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #dc2626;
    }

.consent-state-expired[b-ndp53zzjoj] {
    border-color: #fde68a;
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}

    .consent-state-expired .consent-state-icon[b-ndp53zzjoj] {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #d97706;
    }

.consent-state-error[b-ndp53zzjoj] {
    border-color: #cbd5e1;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

    .consent-state-error .consent-state-icon[b-ndp53zzjoj] {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        color: #64748b;
    }

/* Responsive */
@media (max-width: 768px) {
    .consent-info-grid[b-ndp53zzjoj] {
        grid-template-columns: 1fr;
    }

    .consent-actions[b-ndp53zzjoj] {
        flex-direction: column-reverse;
    }

        .consent-actions[b-ndp53zzjoj]  fluent-button {
            width: 100%;
        }

    .consent-intro-banner[b-ndp53zzjoj] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Connection.razor.rz.scp.css */
[b-0c9iqr24tf] .connectionForm {
    display: grid;
    gap: 1rem;
    /*max-width: 600px;*/
    margin-top: 2rem;
}

[b-0c9iqr24tf] .isRequired {
    padding-left: 5px;
    color: var(--error);
}

[b-0c9iqr24tf] .formLabel {
    width: 20%;
}

[b-0c9iqr24tf] .formInput {
    width: 80%;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/ContactUs.razor.rz.scp.css */
/* the form fills the white card */
.page-content[b-wysje6pdkj] >  form {
    width: 100%;
}

/* two columns: form (3/5) + help panel (2/5) */
[b-wysje6pdkj] .contact-columns {
    width: 100%;
    align-items: flex-start;
}

[b-wysje6pdkj] .contact-main {
    flex: 3 1 0;
    min-width: 0;
}

[b-wysje6pdkj] .contact-aside {
    flex: 2 1 0;
    min-width: 0;
    padding-top: 3.25rem; /* aligns the card with the first field, below the section header */
}

/* blue note: "data comes from your account" */
[b-wysje6pdkj] .contact-note {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-left: 4px solid #3b82f6;
    padding: 0.75rem 1rem;
    width: 100%;
}

/* amber help card, same style as "Information sur les délais" */
[b-wysje6pdkj] .contact-info-card {
    background-color: #fff9e6;
    border-left: 4px solid #ffb900;
    padding: 1rem;
    width: 100%;
}

.contact-info-list[b-wysje6pdkj] {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    line-height: 1.6;
}

.contact-illustration[b-wysje6pdkj] {
    display: block;
    max-width: 60%;
    height: auto;
    margin: 1rem auto 0;
}

[b-wysje6pdkj] .submit-button-stack {
    margin-top: 1rem;
}

/* stack the columns on narrow screens */
@media (max-width: 900px) {
    [b-wysje6pdkj] .contact-columns {
        flex-direction: column;
    }

    [b-wysje6pdkj] .contact-aside {
        padding-top: 0;
    }

    .contact-illustration[b-wysje6pdkj] {
        max-width: 40%;
    }
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/DashboardView.razor.rz.scp.css */
/* ===== Palette slate / blue / emerald (style portail SIE) ===== */
.db[b-e6q50xlfhd] {
    --surface: #ffffff;
    --border: #e2e8f0;
    --track: #eef2f7;
    --ink: #1e293b;
    --muted: #64748b;
    --faint: #94a3b8;
    --accent: #3b82f6;
    --accent-d: #2563eb;
    --accent-soft: #dbeafe;
    --green: #10b981;
    --green-d: #047857;
    --green-soft: #d1fae5;
    --amber: #f59e0b;
    --red: #ef4444;
    --violet: #8b5cf6;
    --teal: #06b6d4;
    --rose: #f43f5e;
    --neutral: #cbd5e1;
    --radius: 16px;
    --radius-sm: 12px;
    --shadow: 0 2px 8px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.04);
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
}

.db-topbar[b-e6q50xlfhd] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 0 20px; }
    .db-topbar h1[b-e6q50xlfhd] { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--ink); }
    .db-topbar .db-sub[b-e6q50xlfhd] { font-size: 13px; color: var(--muted); margin-top: 3px; }

.db-seg[b-e6q50xlfhd] { display: inline-flex; background: #eef2f7; border-radius: 999px; padding: 3px; gap: 2px; }
    .db-seg button[b-e6q50xlfhd] { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: .15s; }
        .db-seg button.on[b-e6q50xlfhd] { background: var(--surface); color: var(--accent-d); font-weight: 700; box-shadow: 0 1px 3px rgba(15,23,42,.14); }

.db-ctx[b-e6q50xlfhd] { font-size: 11px; color: var(--accent-d); font-family: var(--mono); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px; margin-left: 6px; }

.db-kpis[b-e6q50xlfhd] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.db-grid[b-e6q50xlfhd] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: start; }

.db-card[b-e6q50xlfhd] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; animation: dbRise-b-e6q50xlfhd .35s ease both; }
@keyframes dbRise-b-e6q50xlfhd { from { opacity: 0; transform: translateY(6px); } }

.db-col-4[b-e6q50xlfhd] { grid-column: span 4; }
.db-col-5[b-e6q50xlfhd] { grid-column: span 5; }
.db-col-6[b-e6q50xlfhd] { grid-column: span 6; }
.db-col-7[b-e6q50xlfhd] { grid-column: span 7; }
.db-col-8[b-e6q50xlfhd] { grid-column: span 8; }
.db-col-12[b-e6q50xlfhd] { grid-column: span 12; }

/* ---- Tuiles KPI (style « besoin technique ») ---- */
.db-kpi[b-e6q50xlfhd] { display: flex; flex-direction: column; gap: 8px; }
.db-kpi-ico[b-e6q50xlfhd] { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-d); }
    .db-kpi-ico svg[b-e6q50xlfhd] { width: 19px; height: 19px; }
.db-kpi.warn .db-kpi-ico[b-e6q50xlfhd] { background: #fef3c7; color: #b45309; }
.db-kpi.bad .db-kpi-ico[b-e6q50xlfhd] { background: #fee2e2; color: #dc2626; }
.db-kpi.ok .db-kpi-ico[b-e6q50xlfhd] { background: var(--green-soft); color: var(--green-d); }
.db-kpi-label[b-e6q50xlfhd] { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; }
.db-num[b-e6q50xlfhd] { font-size: 32px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
    .db-num small[b-e6q50xlfhd] { font-size: 15px; font-weight: 700; color: var(--muted); }
.db-foot[b-e6q50xlfhd] { font-size: 12px; color: var(--faint); font-family: var(--mono); }

/* ---- Titres de carte (bleu + icône, style SectionHeader) ---- */
.db-card h3[b-e6q50xlfhd] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--accent-d); margin: 0 0 3px; }
    .db-card h3 svg[b-e6q50xlfhd] { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.db-hint[b-e6q50xlfhd] { font-size: 12px; color: var(--faint); margin-bottom: 16px; }

.db-empty[b-e6q50xlfhd] { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--faint); padding: 28px 0; font-size: 13px; }
    .db-empty svg[b-e6q50xlfhd] { width: 30px; height: 30px; opacity: .55; }

/* ---- Tooltip ---- */
.tip[b-e6q50xlfhd] { position: relative; }
    .tip:hover[b-e6q50xlfhd]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 11px; font-weight: 500; padding: 5px 9px; border-radius: 7px; white-space: nowrap; z-index: 6; pointer-events: none; box-shadow: 0 4px 12px rgba(15,23,42,.2); }
    .tip:hover[b-e6q50xlfhd]::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); z-index: 6; pointer-events: none; }

/* ---- Barres horizontales ---- */
.db-hbar[b-e6q50xlfhd] { display: grid; grid-template-columns: 130px 1fr 34px; gap: 10px; align-items: center; margin-bottom: 11px; font-size: 13px; border-radius: 8px; padding: 3px 5px; transition: background .15s; }
    .db-hbar.click[b-e6q50xlfhd] { cursor: pointer; }
    .db-hbar.click:hover[b-e6q50xlfhd] { background: #f1f5fb; }
    .db-hbar.click:hover .db-fill[b-e6q50xlfhd] { filter: brightness(1.08); }
    .db-hbar .db-name[b-e6q50xlfhd] { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .db-hbar .db-track[b-e6q50xlfhd] { height: 9px; background: var(--track); border-radius: 999px; overflow: hidden; }
    .db-hbar .db-fill[b-e6q50xlfhd] { width: var(--w, 0); height: 100%; border-radius: 999px; animation: dbGrow-b-e6q50xlfhd .6s cubic-bezier(.2,.8,.2,1) both; }
    .db-hbar .db-val[b-e6q50xlfhd] { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
@keyframes dbGrow-b-e6q50xlfhd { from { width: 0; } }

/* ---- Donut SVG (arcs cliquables) ---- */
.db-donut-wrap[b-e6q50xlfhd] { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.db-donut[b-e6q50xlfhd] { width: 140px; height: 140px; flex-shrink: 0; position: relative; }
.db-donut-svg[b-e6q50xlfhd] { width: 140px; height: 140px; display: block; animation: dbPop-b-e6q50xlfhd .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dbPop-b-e6q50xlfhd { from { opacity: 0; transform: scale(.9); } }
.db-arc[b-e6q50xlfhd] { stroke-width: 26px; cursor: pointer; transition: stroke-width .15s ease, opacity .15s ease; }
    .db-arc.hot[b-e6q50xlfhd] { stroke-width: 32px; }
.db-donut-svg:hover .db-arc:not(.hot)[b-e6q50xlfhd] { opacity: .4; }
.db-center[b-e6q50xlfhd] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
    .db-center b[b-e6q50xlfhd] { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
    .db-center span[b-e6q50xlfhd] { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; max-width: 86px; text-align: center; line-height: 1.2; }
.db-legend[b-e6q50xlfhd] { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }
    .db-legend .li[b-e6q50xlfhd] { display: grid; grid-template-columns: 11px 1fr auto; gap: 9px; align-items: center; font-size: 13px; padding: 4px 6px; border-radius: 8px; transition: background .15s; }
        .db-legend .li.click[b-e6q50xlfhd] { cursor: pointer; }
        .db-legend .li.click:hover[b-e6q50xlfhd] { background: #f1f5fb; }
    .db-legend .dot[b-e6q50xlfhd] { width: 11px; height: 11px; border-radius: 4px; }
    .db-legend .n[b-e6q50xlfhd] { color: var(--muted); }
    .db-legend .v[b-e6q50xlfhd] { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---- Aire ---- */
.db-area[b-e6q50xlfhd] { width: 100%; height: 160px; display: block; }
.db-area-line[b-e6q50xlfhd] { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dbDraw-b-e6q50xlfhd 1s ease forwards; }
@keyframes dbDraw-b-e6q50xlfhd { to { stroke-dashoffset: 0; } }
.db-pt[b-e6q50xlfhd] { fill: var(--accent); cursor: pointer; transition: r .15s ease; }
    .db-pt:hover[b-e6q50xlfhd] { r: 6; }
.db-xlabels[b-e6q50xlfhd] { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--faint); font-family: var(--mono); }

/* ---- Pile ancienneté ---- */
.db-stack[b-e6q50xlfhd] { display: flex; height: 34px; border-radius: 10px; overflow: hidden; margin: 6px 0 16px; }
    .db-stack div[b-e6q50xlfhd] { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 22px; transition: filter .15s; }
        .db-stack div:hover[b-e6q50xlfhd] { filter: brightness(1.08); }
.db-stack-leg[b-e6q50xlfhd] { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
    .db-stack-leg .li[b-e6q50xlfhd] { display: flex; align-items: center; gap: 6px; }
    .db-stack-leg .dot[b-e6q50xlfhd] { width: 9px; height: 9px; border-radius: 3px; }

/* ===== Pipeline en flèches « Lean » (ADN process SIE) ===== */
.db-flow[b-e6q50xlfhd] { display: flex; align-items: stretch; gap: 7px; margin-top: 4px; overflow-x: auto; padding: 4px 0 8px; }
.db-arrow[b-e6q50xlfhd] {
    flex: 1 1 0; min-width: 150px; position: relative; cursor: default;
    opacity: 0; animation: dbArrowIn-b-e6q50xlfhd .5s ease forwards; animation-delay: calc(var(--i) * .07s);
    transition: transform .2s ease;
}
@keyframes dbArrowIn-b-e6q50xlfhd { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
.db-arrow:hover[b-e6q50xlfhd] { transform: translateY(-3px); z-index: 5; }
.db-arrow-in[b-e6q50xlfhd] {
    height: 100%; min-height: 104px; padding: 14px 22px 14px 28px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, #fff) 0%, color-mix(in srgb, var(--c) 6%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--c) 34%, #fff);
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
    display: flex; flex-direction: column; gap: 4px; transition: box-shadow .2s ease;
}
.db-arrow:first-child .db-arrow-in[b-e6q50xlfhd] { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); padding-left: 18px; }
.db-arrow:last-child .db-arrow-in[b-e6q50xlfhd] { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); padding-right: 18px; }
.db-arrow:first-child:last-child .db-arrow-in[b-e6q50xlfhd] { clip-path: none; border-radius: var(--radius-sm); padding: 14px 18px; }
.db-arrow:hover .db-arrow-in[b-e6q50xlfhd] { box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 22%, transparent); }
.db-ph-n[b-e6q50xlfhd] { font-size: 10px; font-family: var(--mono); letter-spacing: .06em; color: color-mix(in srgb, var(--c) 65%, var(--muted)); font-weight: 600; }
.db-ph-c[b-e6q50xlfhd] { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: color-mix(in srgb, var(--c) 78%, #1e293b); }
.db-ph-l[b-e6q50xlfhd] { font-size: 12px; color: var(--ink); font-weight: 600; }

/* ---- Listes ---- */
.db-row[b-e6q50xlfhd] { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border); font-size: 13px; }
    .db-row:first-of-type[b-e6q50xlfhd] { border-top: 0; }
    .db-row .db-nm[b-e6q50xlfhd] { font-weight: 600; }
    .db-row .db-meta[b-e6q50xlfhd] { color: var(--muted); font-size: 12px; margin-top: 2px; }
.db-ref[b-e6q50xlfhd] { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent-d); background: var(--accent-soft); padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.db-pill[b-e6q50xlfhd] { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
    .db-pill.team[b-e6q50xlfhd] { background: var(--accent-soft); color: var(--accent-d); }
    .db-pill.due[b-e6q50xlfhd] { background: #fef3c7; color: #b45309; }
    .db-pill.late[b-e6q50xlfhd] { background: #fee2e2; color: #dc2626; }
.db-badge-msg[b-e6q50xlfhd] { background: var(--red); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; padding: 0 6px; }

@media (max-width: 880px) {
    .db-kpis[b-e6q50xlfhd] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .db-col-4[b-e6q50xlfhd], .db-col-5[b-e6q50xlfhd], .db-col-6[b-e6q50xlfhd], .db-col-7[b-e6q50xlfhd], .db-col-8[b-e6q50xlfhd] { grid-column: span 12; }
}

@media (prefers-reduced-motion: reduce) {
    .db-card[b-e6q50xlfhd], .db-donut-svg[b-e6q50xlfhd], .db-area-line[b-e6q50xlfhd], .db-fill[b-e6q50xlfhd], .db-arrow[b-e6q50xlfhd] { animation: none; opacity: 1; }
    .db-area-line[b-e6q50xlfhd] { stroke-dashoffset: 0; }
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Dialogs/NewProjectMessage.razor.rz.scp.css */
/* Rappel des limites sous le bouton d'ajout */
.attachment-limits[b-ipxfcb9ms8] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

/* ============================================ */
/* === PIÈCES JOINTES SÉLECTIONNÉES         === */
/* ============================================ */
.attachment-list[b-ipxfcb9ms8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}

.attachment-list-title[b-ipxfcb9ms8] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
}

.attachment-item[b-ipxfcb9ms8] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 6px 6px 10px;
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    animation: attachmentIn-b-ipxfcb9ms8 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .attachment-item:hover[b-ipxfcb9ms8] {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

@keyframes attachmentIn-b-ipxfcb9ms8 {
    from {
        opacity: 0;
        translate: 0 -4px;
    }
}

.attachment-icon[b-ipxfcb9ms8] {
    display: inline-flex;
    flex-shrink: 0;
}

.attachment-name[b-ipxfcb9ms8] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-size[b-ipxfcb9ms8] {
    flex-shrink: 0;
    font-size: 12px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .attachment-item[b-ipxfcb9ms8] {
        animation: none;
    }
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Dialogs/ReadProjectMessage.razor.rz.scp.css */
.date-send-read[b-rmshib0h1i] {
    color: gray;
    font-size: 0.9rem;
}

.body-subject-header[b-rmshib0h1i] {
    width: 100%;
    align-items: flex-start;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.body-subject[b-rmshib0h1i] {
    background-color: white;
    max-width: 100%;
    margin: auto;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.body-container[b-rmshib0h1i] {
    background-color: white;
    max-width: 100%;
    margin: auto;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.body-text-message[b-rmshib0h1i] {
    white-space: pre-wrap;
}

.footer-left[b-rmshib0h1i] {
    width: 50%;
    text-align: start;
}

.footer-right[b-rmshib0h1i] {
    width: 50%;
    text-align: end;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Forms/CELDownload.razor.rz.scp.css */
/* ============================================ */
/* === STYLES CARTE LEAFLET MODERNE === */
/* ============================================ */

[b-19gaqpfu7r] .map {
    height: 550px !important;
    width: 100%;
    border: none !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
    margin-bottom:1rem;
}

    [b-19gaqpfu7r] .map:hover {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
    }

/* === CONTRÔLE DES LAYERS === */
[b-19gaqpfu7r] .leaflet-control-layers {
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    background: white !important;
    min-width: 180px;
}

[b-19gaqpfu7r] .cel-control-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-19gaqpfu7r] .title-icon {
    font-size: 16px;
}

[b-19gaqpfu7r] .leaflet-control-layers-base input[type="radio"] {
    display: none;
}

[b-19gaqpfu7r] .leaflet-control-layers-base label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}

    [b-19gaqpfu7r] .leaflet-control-layers-base label:last-child {
        margin-bottom: 0;
    }

[b-19gaqpfu7r] .cel-option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

[b-19gaqpfu7r] .cel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

[b-19gaqpfu7r] .dot-20 {
    background: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

[b-19gaqpfu7r] .dot-40 {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

[b-19gaqpfu7r] .leaflet-control-layers-base label:hover .cel-option {
    background: #f1f5f9;
    transform: translateX(2px);
}

[b-19gaqpfu7r] .leaflet-control-layers-base input[type="radio"]:checked + .cel-option {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    border-color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

/* === LÉGENDE === */
[b-19gaqpfu7r] .cel-legend {
    background: white;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    min-width: 160px;
}

[b-19gaqpfu7r] .legend-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

[b-19gaqpfu7r] .legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    color: #475569;
}

[b-19gaqpfu7r] .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}


/* === ZOOM CONTROL === */
[b-19gaqpfu7r] .leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

    [b-19gaqpfu7r] .leaflet-control-zoom a {
        background: white !important;
        color: #475569 !important;
        border: none !important;
        font-weight: 600;
        transition: background 0.2s;
    }

        [b-19gaqpfu7r] .leaflet-control-zoom a:hover {
            background: #f1f5f9 !important;
            color: #1e293b !important;
        }

/* ============================================ */
/* === SECTION ADRESSES === */
/* ============================================ */

[b-19gaqpfu7r] .addresses-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Header avec stats et actions */
[b-19gaqpfu7r] .addresses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

[b-19gaqpfu7r] .addresses-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

[b-19gaqpfu7r] .stat-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

    [b-19gaqpfu7r] .stat-badge:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

[b-19gaqpfu7r] .stat-badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-19gaqpfu7r] .stat-badge-cities .stat-badge-icon {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

[b-19gaqpfu7r] .stat-badge-content {
    display: flex;
    flex-direction: column;
}

[b-19gaqpfu7r] .stat-badge-value {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

[b-19gaqpfu7r] .stat-badge-label {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
}

[b-19gaqpfu7r] .addresses-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Bouton de téléchargement principal */
[b-19gaqpfu7r] .download-btn {
    position: relative;
    overflow: hidden;
}

    [b-19gaqpfu7r] .download-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }

    [b-19gaqpfu7r] .download-btn:hover::before {
        left: 100%;
    }

/* Wrapper du tableau */
[b-19gaqpfu7r] .addresses-table-wrapper {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Customisation du FluentDataGrid */
[b-19gaqpfu7r] .addresses-datagrid {
    --grid-header-background: #fafbfc;
    --grid-row-hover-background: #f8fafc;
}

    [b-19gaqpfu7r] .addresses-datagrid::part(grid) {
        border: none !important;
    }

[b-19gaqpfu7r] .addresses-datagrid thead {
    background: #fafbfc;
}

    [b-19gaqpfu7r] .addresses-datagrid thead th {
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px;
        color: #64748b !important;
        /*padding: 14px 16px !important;*/
        border-bottom: 1px solid #e2e8f0 !important;
    }

/*::deep .addresses-datagrid tbody tr {
    transition: background 0.15s ease;
    border-bottom: 1px solid #f1f5f9;
}*/

/*    ::deep .addresses-datagrid tbody tr:hover {
        background: #f8fafc !important;
    }

    ::deep .addresses-datagrid tbody tr:last-child {
        border-bottom: none;
    }

::deep .addresses-datagrid tbody td {
    padding: 14px 16px !important;
    font-size: 13px;
    color: #1e293b;
}*/

[b-19gaqpfu7r] .row-delete-btn {
    padding: 0 !important;
    margin: 0 !important;
}

[b-19gaqpfu7r] .delete-btn {
    color: #ef4444 !important;
    opacity: 0.6;
    transition: opacity 0.2s;
}
    [b-19gaqpfu7r] .delete-btn:hover {
        opacity: 1;
        background: #fef2f2 !important;
    }

/* État vide */ 
[b-19gaqpfu7r] .addresses-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    background: linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 2px dashed #cbd5e1;
    text-align: center;
    gap: 12px;
}

[b-19gaqpfu7r] .empty-illustration {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 8px;
}

[b-19gaqpfu7r] .empty-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

[b-19gaqpfu7r] .empty-description {
    font-size: 14px;
    color: #64748b;
    max-width: 480px;
    margin: 0;
    line-height: 1.6;
}

[b-19gaqpfu7r] .empty-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 16px;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: 10px;
    color: #92400e;
    font-size: 12px;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    [b-19gaqpfu7r] .addresses-header {
        flex-direction: column;
        align-items: stretch;
    }

    [b-19gaqpfu7r] .addresses-stats {
        justify-content: space-between;
    }

    [b-19gaqpfu7r] .stat-badge {
        flex: 1;
    }

    [b-19gaqpfu7r] .addresses-actions {
        justify-content: stretch;
    }

        [b-19gaqpfu7r] .addresses-actions fluent-button {
            flex: 1;
        }
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Forms/DarkFiber.razor.rz.scp.css */
[b-gxmoreyyu5] .general-info {
    width: 100%;
    align-items: flex-start;
}

[b-gxmoreyyu5] .page-content {
    width: 100%;
}

    [b-gxmoreyyu5] .page-content > form {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

[b-gxmoreyyu5] .mapStart {
    position: relative;
    z-index: 0;
    height: 500px;
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
}

[b-gxmoreyyu5] .mapEnd {
    position: relative;
    z-index: 0;
    height: 500px;
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
}

[b-gxmoreyyu5] fluent-option {
    padding-left: 10px;
}

[b-gxmoreyyu5] .general-info {
    width: 100%;
    align-items: flex-start;
}

[b-gxmoreyyu5] .info-text-field {
    width: 80%;
}

[b-gxmoreyyu5] .info-label-field {
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 70%;
}

[b-gxmoreyyu5] .service-field {
    width: 250px;
}

[b-gxmoreyyu5] .submit-button-stack {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Forms/DeleteConnection.razor.rz.scp.css */
[b-rg5fhq878z] .general-info {
    width: 100%;
    align-items: flex-start;
}

[b-rg5fhq878z] .page-content {
    width: 100%;
}

    [b-rg5fhq878z] .page-content > form {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }
    
[b-rg5fhq878z] .map {
    height: 550px;
    width: 100%;
    border: 1px solid #ccc;
    position: relative;
    z-index: 0;
}

[b-rg5fhq878z] .info-text-field {
    width: 70%;
}

[b-rg5fhq878z] .info-label-field {
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 70%;
}

[b-rg5fhq878z] .submit-button-stack {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Forms/NewCEL.razor.rz.scp.css */

[b-7nku4oj595] .general-info {
    width: 100%;
    align-items: flex-start;
}

[b-7nku4oj595] .page-content {
    width: 100%;
}

    [b-7nku4oj595] .page-content > form {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

[b-7nku4oj595] .map {
    height: 550px;
    width: 100%;
    margin-bottom: 1rem;
    position: relative;
    z-index: 0;
}

[b-7nku4oj595] .general-info {
    width: 100%;
    align-items: flex-start;
}

[b-7nku4oj595] .info-text-field {
    width: 70%;
}

[b-7nku4oj595] .info-label-field {
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 70%;
}

[b-7nku4oj595] .submit-button-stack {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* === STYLES ACCORDION POD === */
/* green header bar */
[b-7nku4oj595] .pod-accordion fluent-accordion-item {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-left: 4px solid #3b82f6; /* blue to match; was #10b981 */
    border-radius: 8px;
    overflow: hidden;
}

    [b-7nku4oj595] .pod-accordion fluent-accordion-item::part(button),
    [b-7nku4oj595] .pod-accordion fluent-accordion-item::part(heading) {
        background: transparent;
    }

.pod-head[b-7nku4oj595] {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.pod-head-main[b-7nku4oj595] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1; /* pushes the trash to the right edge */
}

.pod-head-pod[b-7nku4oj595] {
    font-size: 13px;
    font-weight: 700;
    color: #064e3b;
}

.pod-head-name[b-7nku4oj595] {
    font-size: 13px;
    color: #065f46;
}

.pod-head-actions[b-7nku4oj595] {
    flex-shrink: 0;
}

[b-7nku4oj595] .pod-row {
    display: flex;
    align-items: center;
    gap: 12px;
    /*background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);*/
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    padding: 10px 16px;
}

    [b-7nku4oj595] .pod-row ::deep .participant-input {
        flex: 1; /* fills the middle, pushes actions right — like pod-head-main */
        min-width: 0;
    }

    [b-7nku4oj595] .pod-row ::deep .participant-actions {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Producer accordion header — green */
[b-7nku4oj595] .pod-accordion-producer fluent-accordion-item {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left: 4px solid #10b981;
}

/* row — blue */
[b-7nku4oj595] .pod-row-consumer {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-left: 4px solid #3b82f6; /* blue to match; was #10b981 */
}

/* row — green */
[b-7nku4oj595] .pod-row-producer {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left: 4px solid #10b981;
}

/* Champ de recherche d'adresse CEL */
.cel-search-box[b-7nku4oj595] {
    margin-bottom: 12px;
}

.cel-search-hint[b-7nku4oj595] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}

    .cel-search-hint > svg[b-7nku4oj595],
    .cel-search-hint > fluent-icon[b-7nku4oj595] {
        color: #94a3b8;
        flex-shrink: 0;
    }

/* === RÉSULTAT DE RECHERCHE POD === */

/* Restructure la carte pour empiler ligne + résultat */

[b-7nku4oj595] .participant-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
}

/* Quand un résultat est présent, on enlève le hover background pour éviter la confusion */
[b-7nku4oj595] .participant-card.has-result {
    background: white;
    border-color: #e2e8f0;
}

/* Bloc résultat */
[b-7nku4oj595] .pod-result {
    margin-top: 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: white;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    animation: pod-result-in-b-7nku4oj595 0.25s ease-out;
}

@keyframes pod-result-in-b-7nku4oj595 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-7nku4oj595] .pod-result-header {
    background: #f1f5f9;
    color: #1e293b;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
}

/* Bandeau vert pâle pour le succès */
[b-7nku4oj595] .pod-result-success .pod-result-header {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-bottom-color: #86efac;
}

[b-7nku4oj595] .pod-result-body {
    padding: 16px;
    background: white;
}

[b-7nku4oj595] .pod-result-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

[b-7nku4oj595] .pod-result-field-full {
    grid-column: span 2;
}

[b-7nku4oj595] .pod-result-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 3px;
}

[b-7nku4oj595] .pod-result-value {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    word-break: break-word;
}



/* Responsive */
@media (max-width: 768px) {
    [b-7nku4oj595] .pod-result-grid {
        grid-template-columns: 1fr;
    }

    [b-7nku4oj595] .pod-result-field-full {
        grid-column: span 1;
    }

    [b-7nku4oj595] .participant-row {
        flex-wrap: wrap;
    }
}
/* ============================================ */
/* === STYLES CARTE LEAFLET MODERNE === */
/* ============================================ */

#mymap1[b-7nku4oj595] {
    height: 550px !important;
    width: 100%;
    border: none !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
}

    #mymap1:hover[b-7nku4oj595] {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
    }

/* === CONTRÔLE DES LAYERS === */
[b-7nku4oj595] .leaflet-control-layers {
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    background: white !important;
    min-width: 180px;
}

[b-7nku4oj595] .cel-control-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-7nku4oj595] .title-icon {
    font-size: 16px;
}

[b-7nku4oj595] .leaflet-control-layers-base input[type="radio"] {
    display: none;
}

[b-7nku4oj595] .leaflet-control-layers-base label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}

    [b-7nku4oj595] .leaflet-control-layers-base label:last-child {
        margin-bottom: 0;
    }

[b-7nku4oj595] .cel-option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

[b-7nku4oj595] .cel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

[b-7nku4oj595] .dot-20 {
    background: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

[b-7nku4oj595] .dot-40 {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.leaflet-control-layers-base label:hover .cel-option[b-7nku4oj595] {
    background: #f1f5f9;
    transform: translateX(2px);
}

[b-7nku4oj595] .leaflet-control-layers-base input[type="radio"]:checked + .cel-option {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    border-color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

/* === LÉGENDE === */
[b-7nku4oj595] .cel-legend {
    background: white;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    min-width: 160px;
}

[b-7nku4oj595] .legend-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

[b-7nku4oj595] .legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    color: #475569;
}

[b-7nku4oj595] .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* === POPUP MODERNE === */
[b-7nku4oj595] .modern-popup .leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    overflow: hidden;
}

[b-7nku4oj595] .modern-popup .leaflet-popup-content {
    margin: 0 !important;
    width: 260px !important;
}

[b-7nku4oj595] .modern-popup .leaflet-popup-tip {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

[b-7nku4oj595] .custom-popup {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[b-7nku4oj595] .popup-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

[b-7nku4oj595] .popup-icon {
    font-size: 18px;
}

[b-7nku4oj595] .popup-body {
    padding: 14px 16px;
    background: white;
}

[b-7nku4oj595] .popup-row {
    display: flex;
    /*flex-direction: column;*/
    margin-bottom: 10px;
}

    [b-7nku4oj595] .popup-row:last-child {
        margin-bottom: 0;
    }

[b-7nku4oj595] .popup-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 2px;
}

[b-7nku4oj595] .popup-value {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
}

[b-7nku4oj595] .popup-tag {
    display: inline-block;
    background: #eff6ff;
    color: #2563eb;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
    margin-top: 2px;
}

/* === ZOOM CONTROL === */
[b-7nku4oj595] .leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

    [b-7nku4oj595] .leaflet-control-zoom a {
        background: white !important;
        color: #475569 !important;
        border: none !important;
        font-weight: 600;
        transition: background 0.2s;
    }

        [b-7nku4oj595] .leaflet-control-zoom a:hover {
            background: #f1f5f9 !important;
            color: #1e293b !important;
        }

/* ============================================ */
/* === SECTION REPRÉSENTANT === */
/* ============================================ */

[b-7nku4oj595] .representative-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Bandeau d'information */
[b-7nku4oj595] .info-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    border-left: 4px solid #3b82f6;
}

[b-7nku4oj595] .info-banner-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: white;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

[b-7nku4oj595] .info-banner-content {
    flex: 1;
}

[b-7nku4oj595] .info-banner-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e3a8a;
    margin-bottom: 4px;
}

[b-7nku4oj595] .info-banner-text {
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
}

/* Carte représentant */
[b-7nku4oj595] .representative-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Header avec avatar */
[b-7nku4oj595] .representative-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

[b-7nku4oj595] .representative-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    border: 3px solid white;
}

[b-7nku4oj595] .representative-identity {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-7nku4oj595] .representative-name {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

[b-7nku4oj595] .representative-company {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

[b-7nku4oj595] .representative-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
    margin-top: 4px;
    border: 1px solid #86efac;
}

/* Sections de la carte */
[b-7nku4oj595] .representative-section-block {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}

    [b-7nku4oj595] .representative-section-block:last-of-type {
        border-bottom: none;
    }

[b-7nku4oj595] .block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    margin-bottom: 16px;
}

    .block-title svg[b-7nku4oj595] {
        color: #94a3b8;
    }

/* Grille des champs */
[b-7nku4oj595] .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

[b-7nku4oj595] .form-field-full {
    grid-column: span 2;
}

[b-7nku4oj595] .form-field-small {
    grid-column: span 1;
    max-width: 180px;
}

[b-7nku4oj595] .form-field-large {
    grid-column: span 1;
}

/* Hint de modification */
[b-7nku4oj595] .edit-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}

/* ============================================ */
/* === STYLES SECTION PARTICIPANTS === */
/* ============================================ */

[b-7nku4oj595] .participants-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Stats Cards */
[b-7nku4oj595] .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

[b-7nku4oj595] .stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    background: white;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    [b-7nku4oj595] .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
    }

[b-7nku4oj595] .stat-members::before {
    background: linear-gradient(180deg, #3b82f6, #60a5fa);
}
[b-7nku4oj595] .stat-producers::before {
    background: linear-gradient(180deg, #10b981, #34d399);
}

[b-7nku4oj595] .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

[b-7nku4oj595] .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
}

[b-7nku4oj595] .stat-members .stat-icon {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #3b82f6;
}

[b-7nku4oj595] .stat-producers .stat-icon {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #10b981;
}

.stat-content[b-7nku4oj595] {
    flex: 1;
}

[b-7nku4oj595] .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

[b-7nku4oj595] .stat-label {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

/* Bloc participant */
[b-7nku4oj595] .participant-block {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    width: 50%;
}

[b-7nku4oj595] .participant-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}

[b-7nku4oj595] .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-7nku4oj595] .header-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-7nku4oj595] .badge-members {
    background: #eff6ff;
    color: #3b82f6;
}

.badge-producers[b-7nku4oj595] {
    background: #ecfdf5;
    color: #10b981;
}

[b-7nku4oj595] .header-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

[b-7nku4oj595] .header-count {
    background: #f1f5f9;
    color: #64748b;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Empty state */
[b-7nku4oj595] .empty-state {
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #94a3b8;
}

    [b-7nku4oj595] .empty-state p {
        margin: 0;
        font-size: 14px;
    }

/* Liste participants */
[b-7nku4oj595] .participant-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-7nku4oj595] .participant-card {
    display: flex;
    flex-direction: column; /* ← ajouté */
    align-items: stretch; /* ← changé de flex-end à stretch */
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: #fafbfc;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

    [b-7nku4oj595] .participant-card:hover {
        background: #f1f5f9;
        border-color: #e2e8f0;
    }

[b-7nku4oj595] .participant-number {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: #475569;
    flex-shrink: 0;
    margin-bottom: 4px;
}

[b-7nku4oj595] .producer-card .participant-number {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

[b-7nku4oj595] .participant-input {
    flex: 1;
}

[b-7nku4oj595] .participant-actions {
    display: flex;
    gap: 6px;
}

[b-7nku4oj595] .btn-delete {
    color: #ef4444 !important;
}

    [b-7nku4oj595] .btn-delete:hover {
        background: #fef2f2 !important;
    }

/* Responsive */
@media (max-width: 768px) {
    [b-7nku4oj595] .stats-grid {
        grid-template-columns: 1fr;
    }

    [b-7nku4oj595] .participant-row { /* ← changé de .participant-card */
        flex-wrap: wrap;
    }

    [b-7nku4oj595] .participant-input {
        width: 100%;
        order: 1;
    }

    [b-7nku4oj595] .participant-number {
        order: 0;
    }

    [b-7nku4oj595] .participant-actions {
        width: 100%;
        order: 2;
        justify-content: flex-end;
    }

    [b-7nku4oj595] .form-grid {
        grid-template-columns: 1fr;
    }

    [b-7nku4oj595] .form-field-full,
    [b-7nku4oj595] .form-field-small,
    [b-7nku4oj595] .form-field-large {
        grid-column: span 1;
        max-width: 100%;
    }

    [b-7nku4oj595] .representative-header {
        flex-direction: column;
        text-align: center;
    }

    [b-7nku4oj595] .representative-identity {
        align-items: center;
    }
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Forms/NewConnection.razor.rz.scp.css */
[b-eq5hhywmts] .general-info {
    width: 100%;
    align-items: flex-start;
}

[b-eq5hhywmts] .page-content {
    width: 100%;
}

    [b-eq5hhywmts] .page-content > form {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

[b-eq5hhywmts] .map {
    height: 500px;
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
    position: relative;
    z-index: 0;
}

[b-eq5hhywmts] .info-text-field {
    width: 70%;
}

[b-eq5hhywmts] .info-label-field {
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 70%;
}

[b-eq5hhywmts] .submit-button-stack {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

[b-eq5hhywmts] .upload-file-stack {
    margin-bottom: 2rem;
}

/* ============================================ */
/* === SECTION CONTACTS === */
/* ============================================ */

/*.contacts-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}*/

/* Variante du info-banner en warning (ambre) */
/*.info-banner-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
}

    .info-banner-warning .info-banner-icon {
        color: #d97706;
    }

    .info-banner-warning .info-banner-title {
        color: #92400e;
    }

    .info-banner-warning .info-banner-text {
        color: #b45309;
    }*/

/* Toolbar avec stats et bouton */
/*::deep .contacts-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

::deep .contacts-stats {
    display: flex;
    gap: 12px;
}

.contacts-actions {
    display: flex;
    gap: 10px;
    position: relative;
}*/

/* Empty state pour contacts */
/*::deep .contacts-empty {
    background: linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 60px 24px;
}*/

/* Grille des cartes de contacts */
/*::deep .contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}*/

/* Carte de contact */
/*::deep .contact-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

    ::deep .contact-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: #94a3b8;
    }

    ::deep .contact-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }*/

    /* Couleurs par rôle (bordure gauche + icône) */
    /*::deep .contact-card.role-architecte::before {
        background: linear-gradient(180deg, #8b5cf6, #a78bfa);
    }

    ::deep .contact-card.role-architecte .contact-role-icon {
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
        color: #8b5cf6;
    }

    ::deep .contact-card.role-maitre::before {
        background: linear-gradient(180deg, #f59e0b, #fbbf24);
    }

    ::deep .contact-card.role-maitre .contact-role-icon {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        color: #f59e0b;
    }

    ::deep .contact-card.role-proprietaire::before {
        background: linear-gradient(180deg, #3b82f6, #60a5fa);
    }

    ::deep .contact-card.role-proprietaire .contact-role-icon {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        color: #3b82f6;
    }

    ::deep .contact-card.role-installateur::before {
        background: linear-gradient(180deg, #10b981, #34d399);
    }

    ::deep .contact-card.role-installateur .contact-role-icon {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #10b981;
    }

    ::deep .contact-card.role-autre::before {
        background: linear-gradient(180deg, #64748b, #94a3b8);
    }

    ::deep .contact-card.role-autre .contact-role-icon {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        color: #64748b;
    }*/

/* Header de la carte */
/*::deep .contact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fafbfc;
    border-bottom: 1px solid #f1f5f9;
}

::deep .contact-role-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

::deep .contact-role-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

::deep .contact-role-info {
    display: flex;
    flex-direction: column;
}

::deep .contact-role-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    font-weight: 600;
    line-height: 1;
}

::deep .contact-role-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
    line-height: 1.2;
}*/

/* Verrou pour contact obligatoire */
/*::deep .contact-locked {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

/* Corps du formulaire */
/*::deep .contact-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

::deep .contact-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

::deep .contact-row-cp {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
}*/

/* Footer */
/*::deep .contact-card-footer {
    padding: 14px 20px;
    background: #fafbfc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
}*/

/* Responsive */
@media (max-width: 768px) {
    .contacts-grid[b-eq5hhywmts] {
        grid-template-columns: 1fr;
    }

    .contacts-toolbar[b-eq5hhywmts] {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-row-2[b-eq5hhywmts],
    .contact-row-cp[b-eq5hhywmts] {
        grid-template-columns: 1fr;
    }
}
/*fin du code pour les ajouts de contacts*/



/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Forms/NewRCPCA.razor.rz.scp.css */
#clickmap[b-pfl182i5vn] {
    height: 500px;
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
    position: relative;
    z-index: 0;
}

/* === POPUP MODERNE === */
/* === POPUP MODERNE === */
[b-pfl182i5vn] .modern-popup .leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    overflow: hidden;
}

[b-pfl182i5vn] .modern-popup .leaflet-popup-content {
    margin: 0 !important;
    width: 260px !important;
}

[b-pfl182i5vn] .modern-popup .leaflet-popup-tip {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

[b-pfl182i5vn] .custom-popup {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[b-pfl182i5vn] .popup-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

[b-pfl182i5vn] .popup-icon {
    font-size: 18px;
}

[b-pfl182i5vn] .popup-body {
    padding: 14px 16px;
    background: white;
}

[b-pfl182i5vn] .popup-row {
    display: flex;
    /*flex-direction: column;*/
    margin-bottom: 10px;
}

    [b-pfl182i5vn] .popup-row:last-child {
        margin-bottom: 0;
    }

[b-pfl182i5vn] .popup-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 2px;
}

[b-pfl182i5vn] .popup-value {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    max-width: 100% !important;
}

[b-pfl182i5vn] .popup-tag {
    display: inline-block;
    background: #eff6ff;
    color: #2563eb;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
    max-width: 100% !important;
}

/* === ZOOM CONTROL === */
[b-pfl182i5vn] .leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

    [b-pfl182i5vn] .leaflet-control-zoom a {
        background: white !important;
        color: #475569 !important;
        border: none !important;
        font-weight: 600;
        transition: background 0.2s;
    }

        [b-pfl182i5vn] .leaflet-control-zoom a:hover {
            background: #f1f5f9 !important;
            color: #1e293b !important;
        }
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Forms/TempConnection.razor.rz.scp.css */
[b-qpx3kgdv5t] .general-info {
    width: 100%;
    align-items: flex-start;
}

[b-qpx3kgdv5t] .page-content {
    width: 100%;
}

    [b-qpx3kgdv5t] .page-content > form {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

[b-qpx3kgdv5t] .map {
    height: 500px;
    width: 100%;
    border: 1px solid #ccc;
    position: relative;
    z-index: 0;
}

[b-qpx3kgdv5t] .info-text-field {
    width: 70%;
}

[b-qpx3kgdv5t] .info-label-field {
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 70%;
}

[b-qpx3kgdv5t] .submit-button-stack {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Forms/UpdateConnection.razor.rz.scp.css */
[b-6h71gs640q] .general-info {
    width: 100%;
    align-items: flex-start;
}

[b-6h71gs640q] .page-content {
    width: 100%;
}

    [b-6h71gs640q] .page-content > form {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

[b-6h71gs640q] .map {
    height: 500px;
    width: 100%;
    border: 1px solid #ccc;
    position: relative;
    z-index: 0;
}

[b-6h71gs640q] .general-info {
    width: 100%;
    align-items: flex-start;
}

[b-6h71gs640q] .info-label-field {
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 70%;
}

[b-6h71gs640q] .info-text-field {
    width: 70%;
}

[b-6h71gs640q] .upload-file-stack {
    margin-bottom: 2rem;
}

/* ============================================ */
/* === SECTION INTERVENANTS === */
/* ============================================ */

[b-6h71gs640q] .contacts-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Bandeau d'information (ambre) */
[b-6h71gs640q] .uc-info-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 14px;
}

[b-6h71gs640q] .uc-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: white;
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}

[b-6h71gs640q] .uc-info-content {
    flex: 1;
}

[b-6h71gs640q] .uc-info-title {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 4px;
}

[b-6h71gs640q] .uc-info-text {
    font-size: 13px;
    color: #b45309;
    line-height: 1.5;
}

/* Toolbar stats + bouton */
[b-6h71gs640q] .contacts-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

[b-6h71gs640q] .contacts-stats {
    display: flex;
    gap: 12px;
}

[b-6h71gs640q] .contacts-actions {
    display: flex;
    gap: 10px;
    position: relative;
}

[b-6h71gs640q] .stat-badge-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
}

[b-6h71gs640q] .stat-badge-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

[b-6h71gs640q] .stat-badge-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    font-weight: 600;
}

/* État vide */
[b-6h71gs640q] .contacts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: #94a3b8;
    background: linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 60px 24px;
}

    [b-6h71gs640q] .contacts-empty p {
        margin: 0;
        font-size: 14px;
    }

/* Grille */
[b-6h71gs640q] .contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

/* Carte */
[b-6h71gs640q] .contact-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

    [b-6h71gs640q] .contact-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: #94a3b8;
    }

    [b-6h71gs640q] .contact-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    /* Couleurs par rôle */
    [b-6h71gs640q] .contact-card.role-architecte::before {
        background: linear-gradient(180deg, #8b5cf6, #a78bfa);
    }

    [b-6h71gs640q] .contact-card.role-architecte .contact-role-icon {
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
        color: #8b5cf6;
    }

    [b-6h71gs640q] .contact-card.role-maitre::before {
        background: linear-gradient(180deg, #f59e0b, #fbbf24);
    }

    [b-6h71gs640q] .contact-card.role-maitre .contact-role-icon {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        color: #f59e0b;
    }

    [b-6h71gs640q] .contact-card.role-proprietaire::before {
        background: linear-gradient(180deg, #3b82f6, #60a5fa);
    }

    [b-6h71gs640q] .contact-card.role-proprietaire .contact-role-icon {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        color: #3b82f6;
    }

    [b-6h71gs640q] .contact-card.role-installateur::before {
        background: linear-gradient(180deg, #10b981, #34d399);
    }

    [b-6h71gs640q] .contact-card.role-installateur .contact-role-icon {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #10b981;
    }

    [b-6h71gs640q] .contact-card.role-autre::before {
        background: linear-gradient(180deg, #64748b, #94a3b8);
    }

    [b-6h71gs640q] .contact-card.role-autre .contact-role-icon {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        color: #64748b;
    }

/* Header */
[b-6h71gs640q] .contact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fafbfc;
    border-bottom: 1px solid #f1f5f9;
}

[b-6h71gs640q] .contact-role-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

[b-6h71gs640q] .contact-role-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-6h71gs640q] .contact-role-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[b-6h71gs640q] .contact-role-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    font-weight: 600;
    line-height: 1;
}

[b-6h71gs640q] .contact-role-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
    line-height: 1.2;
}

/* Verrou */
[b-6h71gs640q] .contact-locked {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Corps */
[b-6h71gs640q] .contact-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

[b-6h71gs640q] .contact-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

[b-6h71gs640q] .contact-row-cp {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
}

/* Footer */
[b-6h71gs640q] .contact-card-footer {
    padding: 14px 20px;
    background: #fafbfc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
}

/* Poubelle */
[b-6h71gs640q] .btn-delete {
    color: #ef4444 !important;
    opacity: 0.7;
    transition: all 0.2s ease;
}

    [b-6h71gs640q] .btn-delete:hover {
        opacity: 1;
        background: #fef2f2 !important;
    }

/* Responsive */
@media (max-width: 768px) {
    .contacts-grid[b-6h71gs640q] {
        grid-template-columns: 1fr;
    }

    .contacts-toolbar[b-6h71gs640q] {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-row-2[b-6h71gs640q],
    .contact-row-cp[b-6h71gs640q] {
        grid-template-columns: 1fr;
    }
}


/* === POPUP MODERNE === */
[b-6h71gs640q] .modern-popup .leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    overflow: hidden;
}

[b-6h71gs640q] .modern-popup .leaflet-popup-content {
    margin: 0 !important;
    width: 260px !important;
}

[b-6h71gs640q] .modern-popup .leaflet-popup-tip {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

[b-6h71gs640q] .custom-popup {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[b-6h71gs640q] .popup-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

[b-6h71gs640q] .popup-icon {
    font-size: 18px;
}

[b-6h71gs640q] .popup-body {
    padding: 14px 16px;
    background: white;
}

[b-6h71gs640q] .popup-row {
    display: flex;
    /*flex-direction: column;*/
    margin-bottom: 10px;
}

    [b-6h71gs640q] .popup-row:last-child {
        margin-bottom: 0;
    }

[b-6h71gs640q] .popup-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 0;
}

[b-6h71gs640q] .popup-value {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    max-width: 100% !important;
}

[b-6h71gs640q] .popup-tag {
    display: inline-block;
    background: #eff6ff;
    color: #2563eb;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
    max-width: 100% !important;
}

/* ============================================ */
/* === MA MODIFICATION CONCERNE : 2 CARTES  === */
/* ============================================ */
.uc-choice-group[b-6h71gs640q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
}

/* Carte de choix (bouton) */
.uc-choice[b-6h71gs640q] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 18px 52px 18px 20px;
    overflow: hidden;
    text-align: left;
    font: inherit;
    color: inherit;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease,
                background 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}

    .uc-choice:hover[b-6h71gs640q] {
        transform: translateY(-2px);
        border-color: #bfdbfe;
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12);
    }

    .uc-choice:active[b-6h71gs640q] {
        transform: translateY(0);
    }

    .uc-choice:focus-visible[b-6h71gs640q] {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

/* Pastille d'icône */
.uc-choice-icon[b-6h71gs640q] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.uc-choice:hover .uc-choice-icon[b-6h71gs640q] {
    transform: scale(1.06);
}

/* Textes */
.uc-choice-text[b-6h71gs640q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.uc-choice-title[b-6h71gs640q] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

.uc-choice-desc[b-6h71gs640q] {
    font-size: 13px;
    line-height: 1.45;
    color: #64748b;
}

/* Indicateur de sélection (rond en haut à droite) */
.uc-choice-check[b-6h71gs640q] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    box-sizing: border-box;
    transition: background 0.25s ease, border-color 0.25s ease;
}

    .uc-choice-check > *[b-6h71gs640q] {
        display: inline-flex;
        scale: 0;
        transition: scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

/* --- Carte sélectionnée --- */
.uc-choice.is-selected[b-6h71gs640q] {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 75%);
    border-color: #93c5fd;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.16);
}

    .uc-choice.is-selected .uc-choice-icon[b-6h71gs640q] {
        color: #2563eb;
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border-color: #bfdbfe;
    }

    .uc-choice.is-selected .uc-choice-title[b-6h71gs640q] {
        color: #1e3a8a;
    }

    .uc-choice.is-selected .uc-choice-desc[b-6h71gs640q] {
        color: #1e40af;
    }

    .uc-choice.is-selected .uc-choice-check[b-6h71gs640q] {
        background: #3b82f6;
        border-color: #3b82f6;
    }

        .uc-choice.is-selected .uc-choice-check > *[b-6h71gs640q] {
            scale: 1;
        }

/* --- L'autre carte, une fois un choix fait : atténuée (mais toujours cliquable) --- */
.uc-choice-group.has-selection .uc-choice:not(.is-selected)[b-6h71gs640q] {
    background: #fafbfc;
    box-shadow: none;
    opacity: 0.55;
    filter: grayscale(0.7);
}

    .uc-choice-group.has-selection .uc-choice:not(.is-selected):hover[b-6h71gs640q] {
        opacity: 0.85;
        filter: grayscale(0.3);
    }

/* ============================================ */
/* === SECTIONS QUI SE DÉPLIENT / REPLIENT  === */
/* ============================================ */
/* Les sections restent dans le DOM : on anime la hauteur (0fr -> 1fr),
   l'opacité et un léger glissement vers le bas. "inert" (posé dans le Razor)
   empêche le focus clavier dans une section repliée. */
.uc-collapse-group[b-6h71gs640q] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.uc-collapse[b-6h71gs640q] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.uc-collapse-inner[b-6h71gs640q] {
    min-height: 0;
    overflow: hidden;
    translate: 0 -12px;
    transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.uc-collapse.is-open[b-6h71gs640q] {
    grid-template-rows: 1fr;
    opacity: 1;
}

    /* Une fois ouverte, la section ne coupe plus les listes déroulantes / calendriers :
       overflow reste "hidden" pendant l'animation, puis repasse à "visible".
       translate: none évite de créer un repère qui décalerait ces popups. */
    .uc-collapse.is-open > .uc-collapse-inner[b-6h71gs640q] {
        overflow: visible;
        translate: none;
        animation: ucKeepClipped-b-6h71gs640q 0.45s;
    }

@keyframes ucKeepClipped-b-6h71gs640q {
    from, to {
        overflow: hidden;
    }
}

/* Carte de détail (remplace l'ancien style inline) */
.uc-detail-card[b-6h71gs640q] {
    margin: 1rem 0;
    padding: 24px;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 120px);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* ============================================ */
/* === INTÉRIEUR DES SECTIONS DÉPLIÉES      === */
/* ============================================ */
.uc-detail-body[b-6h71gs640q] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

/* Bloc thématique : en-tête (pastille + titre + sous-titre) puis contenu */
.uc-group[b-6h71gs640q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .uc-group + .uc-group[b-6h71gs640q],
    .uc-group + .uc-compare[b-6h71gs640q],
    .uc-group + .uc-attest[b-6h71gs640q] {
        padding-top: 24px;
        border-top: 1px dashed #e2e8f0;
    }

.uc-group-head[b-6h71gs640q] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.uc-group-icon[b-6h71gs640q] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12);
}

.uc-group-heading[b-6h71gs640q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.uc-group-title[b-6h71gs640q] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

.uc-group-sub[b-6h71gs640q] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748b;
}

/* Question oui / non : texte à gauche, état + interrupteur à droite */
.uc-question[b-6h71gs640q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .uc-question:hover[b-6h71gs640q] {
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    }

.uc-question-text[b-6h71gs640q] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #1e293b;
}

.uc-question-control[b-6h71gs640q] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Pastille Oui / Non */
.uc-yesno[b-6h71gs640q] {
    min-width: 44px;
    padding: 3px 10px;
    border-radius: 20px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .uc-yesno.is-yes[b-6h71gs640q] {
        color: #166534;
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        border-color: #86efac;
    }

/* Champs côte à côte */
.uc-field-grid[b-6h71gs640q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: start;
}

.uc-field[b-6h71gs640q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Deux colonnes Existant / Après transformation */
.uc-compare[b-6h71gs640q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

/* Panneau (colonne) */
.uc-panel[b-6h71gs640q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.uc-panel-head[b-6h71gs640q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.uc-panel-badge[b-6h71gs640q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.uc-panel.is-future .uc-panel-badge[b-6h71gs640q] {
    color: #1e40af;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
}

.uc-panel-hint[b-6h71gs640q] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
}

/* Liste de cases à cocher */
.uc-check-list[b-6h71gs640q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uc-check-item[b-6h71gs640q] {
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

    .uc-check-item:hover[b-6h71gs640q] {
        border-color: #cbd5e1;
    }

    .uc-check-item.is-checked[b-6h71gs640q] {
        background: #f5f9ff;
        border-color: #bfdbfe;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
    }

/* Champ complémentaire qui apparaît sous la case cochée */
.uc-check-extra[b-6h71gs640q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 10px 0 2px 28px;
    border-top: 1px dashed #dbeafe;
    animation: ucExtraIn-b-6h71gs640q 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes ucExtraIn-b-6h71gs640q {
    from {
        opacity: 0;
        translate: 0 -6px;
    }
}

/* Déplacement : situation actuelle  →  nouvelle situation */
.uc-move[b-6h71gs640q] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.uc-move-arrow[b-6h71gs640q] {
    align-self: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12);
}

/* Attestation (case à cocher mise en valeur) */
.uc-attest[b-6h71gs640q] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-radius: 14px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

    .uc-attest.is-checked[b-6h71gs640q] {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border-color: #86efac;
    }

.uc-attest-icon[b-6h71gs640q] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #d97706;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
    transition: color 0.25s ease, box-shadow 0.25s ease;
}

.uc-attest.is-checked .uc-attest-icon[b-6h71gs640q] {
    color: #16a34a;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.18);
}

.uc-attest-body[b-6h71gs640q] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #1e293b;
}

/* Responsive : les deux cartes l'une sous l'autre */
@media (max-width: 768px) {
    .uc-choice-group[b-6h71gs640q] {
        grid-template-columns: 1fr;
    }

    .uc-detail-card[b-6h71gs640q] {
        padding: 16px;
    }

    .uc-field-grid[b-6h71gs640q],
    .uc-compare[b-6h71gs640q],
    .uc-move[b-6h71gs640q] {
        grid-template-columns: 1fr;
    }

    .uc-move-arrow[b-6h71gs640q] {
        justify-self: center;
        rotate: 90deg;
    }

    .uc-question[b-6h71gs640q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Accessibilité : pas d'animation si l'utilisateur l'a demandé */
@media (prefers-reduced-motion: reduce) {
    .uc-choice[b-6h71gs640q],
    .uc-choice-icon[b-6h71gs640q],
    .uc-choice-check[b-6h71gs640q],
    .uc-choice-check > *[b-6h71gs640q],
    .uc-collapse[b-6h71gs640q],
    .uc-collapse-inner[b-6h71gs640q] {
        transition: none;
    }

    .uc-choice:hover[b-6h71gs640q],
    .uc-choice:hover .uc-choice-icon[b-6h71gs640q] {
        transform: none;
    }

    .uc-collapse.is-open > .uc-collapse-inner[b-6h71gs640q],
    .uc-check-extra[b-6h71gs640q] {
        animation: none;
    }

    .uc-question[b-6h71gs640q],
    .uc-yesno[b-6h71gs640q],
    .uc-check-item[b-6h71gs640q],
    .uc-attest[b-6h71gs640q],
    .uc-attest-icon[b-6h71gs640q] {
        transition: none;
    }
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Maps.razor.rz.scp.css */
.map[b-6jeywj06zv] {
    height: 500px;
    width: 100%;
    border: 1px solid #ccc;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Project.razor.rz.scp.css */

/* ============================================ */
/* === BOUTON EXPORT PDF === */
/* ============================================ */
.btn-export-pdf[b-mz60lo4oj4] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 12px;
    background: linear-gradient(135deg, #fcf0f0 0%, #fff7f7 100%);
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

    .btn-export-pdf:hover:not(:disabled)[b-mz60lo4oj4] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(220, 38, 38, 0.18);
        border-color: #fca5a5;
        border-left-color: #b91c1c;
    }

    .btn-export-pdf:active:not(:disabled)[b-mz60lo4oj4] {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15);
    }

    .btn-export-pdf:focus-visible[b-mz60lo4oj4] {
        outline: 2px solid #dc2626;
        outline-offset: 2px;
    }

    .btn-export-pdf:disabled[b-mz60lo4oj4] {
        cursor: wait;
        opacity: 0.8;
    }

/* Pastille blanche de l'icône */
.btn-export-pdf-icon[b-mz60lo4oj4] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: white;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15);
    transition: transform 0.25s ease;
}

.btn-export-pdf:hover:not(:disabled) .btn-export-pdf-icon[b-mz60lo4oj4] {
    transform: scale(1.08) rotate(-4deg);
}

/* Textes */
.btn-export-pdf-text[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.btn-export-pdf-title[b-mz60lo4oj4] {
    font-size: 14px;
    font-weight: 700;
    color: #991b1b;
}

.btn-export-pdf-sub[b-mz60lo4oj4] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #b91c1c;
    opacity: 0.75;
}

/* Flèche de téléchargement */
.btn-export-pdf-arrow[b-mz60lo4oj4] {
    display: flex;
    align-items: center;
    margin-left: 6px;
    color: #dc2626;
    opacity: 0.6;
    transition: all 0.25s ease;
}

.btn-export-pdf:hover:not(:disabled) .btn-export-pdf-arrow[b-mz60lo4oj4] {
    opacity: 1;
    animation: pdfArrowBounce-b-mz60lo4oj4 0.8s ease infinite;
}

@keyframes pdfArrowBounce-b-mz60lo4oj4 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}

/* Mobile : pleine largeur */
@media (max-width: 768px) {
    .btn-export-pdf[b-mz60lo4oj4] {
        width: 100%;
    }
}


/* "i" d'aide à côté d'un SectionHeader */
[b-mz60lo4oj4] .section-info-stack{
    margin-top: 2rem;
}

[b-mz60lo4oj4] .section-header-with-info {
    font-weight: bold;
    font-size: 1.2rem;
}

[b-mz60lo4oj4] .section-info-help {
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #3b82f6;
    cursor: help;
    transition: all 0.2s ease;
}

    [b-mz60lo4oj4] .section-info-help:hover {
        background: #dbeafe;
        border-color: #93c5fd;
    }

/* ============================================ */
/* === REPLI / DÉPLI DES SECTIONS CEL === */
/* ============================================ */
/* Bandeau cliquable */
.cel-banner-clickable[b-mz60lo4oj4] {
    cursor: pointer;
    user-select: none;
    transition: all 0.25s ease;
}

    .cel-banner-clickable:hover[b-mz60lo4oj4] {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    }

    .cel-banner-clickable:active[b-mz60lo4oj4] {
        transform: translateY(0);
    }

/* Zone chevron + libellé */
.cel-toggle-chevron[b-mz60lo4oj4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 12px;
}

.cel-toggle-hint[b-mz60lo4oj4] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.75;
    white-space: nowrap;
}

/* Le chevron lui-même : pastille blanche qui pivote */
.cel-toggle-chevron > svg[b-mz60lo4oj4],
.cel-toggle-chevron > fluent-icon[b-mz60lo4oj4] {
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

/* Rotation quand déplié */
.cel-banner-clickable.is-expanded .cel-toggle-chevron > svg[b-mz60lo4oj4],
.cel-banner-clickable.is-expanded .cel-toggle-chevron > fluent-icon[b-mz60lo4oj4] {
    transform: rotate(180deg);
}

/* Couleurs du chevron par section */
.cel-banner-consumers .cel-toggle-chevron[b-mz60lo4oj4] {
    color: #3b82f6;
}

.cel-banner-consumers .cel-toggle-hint[b-mz60lo4oj4] {
    color: #1e40af;
}

.cel-banner-producers .cel-toggle-chevron[b-mz60lo4oj4] {
    color: #d97706;
}

.cel-banner-producers .cel-toggle-hint[b-mz60lo4oj4] {
    color: #b45309;
}

/* Halo au survol du chevron */
.cel-banner-clickable:hover .cel-toggle-chevron > svg[b-mz60lo4oj4],
.cel-banner-clickable:hover .cel-toggle-chevron > fluent-icon[b-mz60lo4oj4] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

/* Conteneur repliable */
.cel-collapsible[b-mz60lo4oj4] {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease;
}

    .cel-collapsible.collapsed[b-mz60lo4oj4] {
        max-height: 0;
        opacity: 0;
        margin-top: -20px; /* compense le gap du parent flex */
        pointer-events: none;
    }

    .cel-collapsible.expanded[b-mz60lo4oj4] {
        max-height: 6000px;
        opacity: 1;
        margin-top: 0;
    }

/* Responsive */
@media (max-width: 768px) {
    .cel-toggle-hint[b-mz60lo4oj4] {
        display: none;
    }

    .cel-toggle-chevron[b-mz60lo4oj4] {
        padding-left: 8px;
    }
}

/* ============================================ */
/* === SECTIONS CEL (CONSOMMATEURS/PRODUCTEURS) === */
/* ============================================ */

.recap-cel-section[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-top: 16px;
}

/* Variantes du bandeau */
.cel-banner-consumers[b-mz60lo4oj4] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
}

    .cel-banner-consumers .recap-info-icon[b-mz60lo4oj4] {
        color: #3b82f6;
    }

.cel-banner-producers[b-mz60lo4oj4] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
}

    .cel-banner-producers .recap-info-icon[b-mz60lo4oj4] {
        color: #d97706;
    }

    .cel-banner-producers .recap-info-title[b-mz60lo4oj4] {
        color: #92400e;
    }

    .cel-banner-producers .recap-info-text[b-mz60lo4oj4] {
        color: #b45309;
    }

/* Grille des membres */
.recap-cel-grid[b-mz60lo4oj4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}

/* Carte membre */
.cel-member-card[b-mz60lo4oj4]::before {
    background: #94a3b8;
}

.cel-card-consumer[b-mz60lo4oj4]::before {
    background: linear-gradient(180deg, #3b82f6, #60a5fa);
}

.cel-card-producer[b-mz60lo4oj4]::before {
    background: linear-gradient(180deg, #f59e0b, #fbbf24);
}

/* Avatar initiales */
.cel-member-avatar[b-mz60lo4oj4] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: white;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.cel-card-consumer .cel-member-avatar[b-mz60lo4oj4] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.cel-card-producer .cel-member-avatar[b-mz60lo4oj4] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

/* Badge de consentement */
.cel-consent-badge[b-mz60lo4oj4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

    .cel-consent-badge.consent-ok[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        color: #166534;
        border: 1px solid #86efac;
    }
    .cel-consent-badge.consent-nok[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #d43a06;
        border: 1px solid #d43a06;
    }

    .cel-consent-badge.consent-pending[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
        border: 1px solid #fcd34d;
    }

/* Bloc technique */
.cel-tech-block[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}

.cel-tech-row[b-mz60lo4oj4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .cel-tech-row > svg[b-mz60lo4oj4],
    .cel-tech-row > fluent-icon[b-mz60lo4oj4] {
        color: #94a3b8;
        margin-top: 2px;
        flex-shrink: 0;
    }

/* Point de mesure (POD) en monospace */
.cel-tech-pod[b-mz60lo4oj4] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    color: #1e293b;
    font-weight: 600;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
    width: fit-content;
    word-break: break-all;
    border: 1px solid #e2e8f0;
}

/* Puissance mise en avant */
.cel-tech-power[b-mz60lo4oj4] {
    font-size: 15px;
    font-weight: 700;
    color: #d97706;
    font-variant-numeric: tabular-nums;
}

/* Footer code de consentement */
.cel-member-footer-ok[b-mz60lo4oj4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f0fdf4;
    border-top: 1px solid #dcfce7;
    font-size: 11px;
}

    .cel-member-footer-ok > svg[b-mz60lo4oj4],
    .cel-member-footer-ok > fluent-icon[b-mz60lo4oj4] {
        color: #16a34a;
        flex-shrink: 0;
    }

.cel-consent-code-label-ok[b-mz60lo4oj4] {
    color: #15803d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
}

.cel-consent-code-ok[b-mz60lo4oj4] {
    font-family: 'Consolas', 'Monaco', monospace;
    color: #166534;
    font-weight: 600;
    font-size: 11px;
    margin-left: auto;
    word-break: break-all;
}

.cel-member-footer-nok[b-mz60lo4oj4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-top: 1px solid #d42f06;
    font-size: 11px;
}

    .cel-member-footer-nok > svg[b-mz60lo4oj4],
    .cel-member-footer-nok > fluent-icon[b-mz60lo4oj4] {
        color: #d42f06;
        flex-shrink: 0;
    }

.cel-consent-code-label-nok[b-mz60lo4oj4] {
    color: #d42f06;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
}

.cel-consent-code-nok[b-mz60lo4oj4] {
    font-family: 'Consolas', 'Monaco', monospace;
    color: #d42f06;
    font-weight: 600;
    font-size: 11px;
    margin-left: auto;
    word-break: break-all;
}

/* État vide */
.recap-cel-empty[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 2px dashed #cbd5e1;
    text-align: center;
    gap: 12px;
    color: #94a3b8;
}

    .recap-cel-empty p[b-mz60lo4oj4] {
        margin: 0;
        font-size: 14px;
    }

/* Responsive */
@media (max-width: 768px) {
    .recap-cel-grid[b-mz60lo4oj4] {
        grid-template-columns: 1fr;
    }

    .cel-member-footer[b-mz60lo4oj4] {
        flex-wrap: wrap;
    }

    .cel-consent-code[b-mz60lo4oj4] {
        margin-left: 0;
        width: 100%;
    }
}

/* === CHAMP ÉDITABLE (encadré gris style intervenant) === */
[b-mz60lo4oj4] .editable-field {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
    width: fit-content;
    min-width: 320px;
    max-width: 100%;
}

    [b-mz60lo4oj4] .editable-field:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

[b-mz60lo4oj4] .editable-field-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: white;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}

[b-mz60lo4oj4] .editable-field-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

[b-mz60lo4oj4] .editable-field-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
}

[b-mz60lo4oj4] .editable-field-value {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
    word-break: break-word;
}

[b-mz60lo4oj4] .editable-field-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

[b-mz60lo4oj4] .btn-save {
    color: #10b981 !important;
}

    [b-mz60lo4oj4] .btn-save:hover {
        background: #ecfdf5 !important;
    }

[b-mz60lo4oj4] .btn-edit {
    color: #3b82f6 !important;
}

    [b-mz60lo4oj4] .btn-edit:hover {
        background: #eff6ff !important;
    }
/* Logo Abacus textuel */
[b-mz60lo4oj4] .editable-field-icon.abacus-logo {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 0 8px;
    width: auto;
    min-width: 56px;
}

[b-mz60lo4oj4] .abacus-logo-text {
    font-family: 'Segoe UI', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #dc2626;
    letter-spacing: -0.5px;
    text-transform: lowercase;
}

/* Marque "Abacus" en rouge dans le label */
[b-mz60lo4oj4] .abacus-brand {
    color: #dc2626;
    font-weight: 700;
}
[b-mz60lo4oj4] .abacus-logo-img {
    max-width: 34px;
    max-height: 20px;
    object-fit: contain;
}

/* ============================================ */
/* === SECTION DONNÉES TECHNIQUES === */
/* ============================================ */

.recap-technical-section[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-top: 16px;
}

/* Bandeau d'information technique */
.recap-tech-banner[b-mz60lo4oj4] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-left: 4px solid #64748b;
    border-radius: 14px;
}

.recap-tech-banner-icon[b-mz60lo4oj4] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: white;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.recap-tech-banner-content[b-mz60lo4oj4] {
    flex: 1;
}

.recap-tech-banner-title[b-mz60lo4oj4] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.recap-tech-banner-text[b-mz60lo4oj4] {
    font-size: 12px;
    color: #64748b;
}

/* Grille auto-responsive */
.recap-tech-grid[b-mz60lo4oj4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

/* Item technique */
.recap-tech-item[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

    .recap-tech-item[b-mz60lo4oj4]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(180deg, #cbd5e1, #94a3b8);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .recap-tech-item:hover[b-mz60lo4oj4] {
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
    }

        .recap-tech-item:hover[b-mz60lo4oj4]::before {
            opacity: 1;
        }

/* Header de l'item (label + icône) */
.recap-tech-item-header[b-mz60lo4oj4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .recap-tech-item-header > svg[b-mz60lo4oj4],
    .recap-tech-item-header > fluent-icon[b-mz60lo4oj4] {
        color: #94a3b8;
        flex-shrink: 0;
    }

.recap-tech-label[b-mz60lo4oj4] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    font-weight: 600;
    line-height: 1.2;
}

/* Wrapper de valeur */
.recap-tech-value-wrapper[b-mz60lo4oj4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: 24px;
}

/* Valeur par défaut */
.recap-tech-value[b-mz60lo4oj4] {
    font-size: 14px;
    color: #0f172a;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

/* Variante numérique (chiffres en plus grand) */
.recap-tech-value-number[b-mz60lo4oj4] {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

/* Variante tag (ValueList) */
.recap-tech-value-tag[b-mz60lo4oj4] {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1e40af;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #bfdbfe;
}

/* Variante valeur vide */
.recap-tech-value-empty[b-mz60lo4oj4] {
    color: #cbd5e1;
    font-style: italic;
    font-weight: 500;
}

/* Variante booléenne */
.recap-tech-value-boolean[b-mz60lo4oj4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .recap-tech-value-boolean.positive[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        color: #166534;
        border: 1px solid #86efac;
    }

    .recap-tech-value-boolean.negative[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
        color: #991b1b;
        border: 1px solid #fecaca;
    }

    .recap-tech-value-boolean[b-mz60lo4oj4]  svg,
    .recap-tech-value-boolean[b-mz60lo4oj4]  fluent-icon {
        flex-shrink: 0;
    }

/* Membres CEL (chips) */
.recap-tech-members[b-mz60lo4oj4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.recap-tech-member-chip[b-mz60lo4oj4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 12px;
    color: #1e293b;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .recap-tech-member-chip:hover[b-mz60lo4oj4] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.recap-tech-member-avatar[b-mz60lo4oj4] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .recap-tech-grid[b-mz60lo4oj4] {
        grid-template-columns: 1fr;
    }

    .recap-tech-value-wrapper[b-mz60lo4oj4] {
        margin-left: 0;
    }
}

/* ============================================ */
/* === SECTION INTERVENANTS (RÉCAPITULATIF) === */
/* ============================================ */
.recap-contact-actions[b-mz60lo4oj4]  .btn-save {
    color: #10b981 !important;
    opacity: 0.85;
    transition: all 0.2s ease;
}

    .recap-contact-actions[b-mz60lo4oj4]  .btn-save:hover {
        opacity: 1;
        background: #ecfdf5 !important;
    }
.recap-intervenants-section[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-top: 16px;
}

/* Bandeau d'information */
.recap-info-banner[b-mz60lo4oj4] {
    display: flex;
    /*align-items: flex-start;*/
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    border-radius: 14px;
}

.recap-info-icon[b-mz60lo4oj4] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: white;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

.recap-info-content[b-mz60lo4oj4] {
    flex: 1;
}

.recap-info-title[b-mz60lo4oj4] {
    font-size: 14px;
    font-weight: 600;
    color: #1e3a8a;
    margin-bottom: 4px;
}

.recap-info-text[b-mz60lo4oj4] {
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
}

/* Grille des cartes */
.recap-intervenants-grid[b-mz60lo4oj4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* Carte contact */
.recap-contact-card[b-mz60lo4oj4] {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

    .recap-contact-card[b-mz60lo4oj4]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: #94a3b8;
    }

    .recap-contact-card:hover[b-mz60lo4oj4] {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    /* Couleurs par rôle */
    .recap-contact-card.role-demandeur[b-mz60lo4oj4]::before {
        background: linear-gradient(180deg, #f59e0b, #fbbf24);
    }
    .recap-contact-card.role-demandeur .recap-contact-role-icon[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        color: #d97706;
    }

    .recap-contact-card.role-architecte[b-mz60lo4oj4]::before {
        background: linear-gradient(180deg, #8b5cf6, #a78bfa);
    }
    .recap-contact-card.role-architecte .recap-contact-role-icon[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
        color: #8b5cf6;
    }

    .recap-contact-card.role-maitre[b-mz60lo4oj4]::before {
        background: linear-gradient(180deg, #f59e0b, #fbbf24);
    }
    .recap-contact-card.role-maitre .recap-contact-role-icon[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        color: #f59e0b;
    }

    .recap-contact-card.role-proprietaire[b-mz60lo4oj4]::before {
        background: linear-gradient(180deg, #3b82f6, #60a5fa);
    }
    .recap-contact-card.role-proprietaire .recap-contact-role-icon[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        color: #3b82f6;
    }

    .recap-contact-card.role-installateur[b-mz60lo4oj4]::before {
        background: linear-gradient(180deg, #10b981, #34d399);
    }
    .recap-contact-card.role-installateur .recap-contact-role-icon[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #10b981;
    }

    .recap-contact-card.role-autre[b-mz60lo4oj4]::before {
        background: linear-gradient(180deg, #64748b, #94a3b8);
    }
    .recap-contact-card.role-autre .recap-contact-role-icon[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        color: #64748b;
    }

/* Header de la carte */
.recap-contact-header[b-mz60lo4oj4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fafbfc;
    border-bottom: 1px solid #f1f5f9;
}

.recap-contact-role-badge[b-mz60lo4oj4] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.recap-contact-role-icon[b-mz60lo4oj4] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.recap-contact-role-info[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.recap-contact-role-label[b-mz60lo4oj4] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    font-weight: 600;
    line-height: 1;
}

.recap-contact-role-name[b-mz60lo4oj4] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tag dans le header (pour le rôle du demandeur) */
.recap-contact-tag[b-mz60lo4oj4] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #86efac;
    flex-shrink: 0;
}

/* Corps de la carte */
.recap-contact-body[b-mz60lo4oj4] {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

/* Ligne d'information */
.recap-info-row[b-mz60lo4oj4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .recap-info-row > svg[b-mz60lo4oj4],
    .recap-info-row > fluent-icon[b-mz60lo4oj4] {
        color: #94a3b8;
        margin-top: 2px;
        flex-shrink: 0;
    }

.recap-info-text-block[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.recap-field-label[b-mz60lo4oj4] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
}

.recap-field-value[b-mz60lo4oj4] {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}

.recap-field-link[b-mz60lo4oj4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.recap-field-link[b-mz60lo4oj4] {
    font-size: 13px;
    color: #3b82f6;
    font-weight: 500;
    text-decoration: none;
    word-break: break-word;
    transition: color 0.15s;
}

    .recap-field-link:hover[b-mz60lo4oj4] {
        color: #2563eb;
        text-decoration: underline;
    }

/* Responsive */
@media (max-width: 768px) {
    .recap-intervenants-grid[b-mz60lo4oj4] {
        grid-template-columns: 1fr;
    }

    .recap-contact-header[b-mz60lo4oj4] {
        flex-wrap: wrap;
    }

    .recap-contact-tag[b-mz60lo4oj4] {
        margin-left: 52px;
    }
}
#section-cel[b-mz60lo4oj4],
#section-invervenant[b-mz60lo4oj4],
#section-technical-need[b-mz60lo4oj4] {
    width: 100%;
    box-sizing: border-box;
}
/* ============================================ */
/* === ACTIONS ET ÉDITION DES INTERVENANTS  === */
/* ============================================ */

/* Bandeau : ajustement pour accueillir le bouton à droite */
.recap-info-banner[b-mz60lo4oj4] {
    align-items: center;
}

.recap-info-actions[b-mz60lo4oj4] {
    flex-shrink: 0;
    position: relative;
}

 /* Actions dans le header de chaque carte */
.recap-contact-actions[b-mz60lo4oj4] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

    .recap-contact-actions[b-mz60lo4oj4]  .btn-edit {
        color: #3b82f6 !important;
        opacity: 0.7;
        transition: all 0.2s ease;
    }
    .recap-contact-actions[b-mz60lo4oj4]  .btn-edit:hover {
        opacity: 1;
        background: #eff6ff !important;
    }
    .recap-contact-actions[b-mz60lo4oj4]  .btn-delete {
        color: #ef4444 !important;
        opacity: 0.7;
        transition: all 0.2s ease;
    }
    .recap-contact-actions[b-mz60lo4oj4]  .btn-delete:hover {
        opacity: 1;
        background: #fef2f2 !important;
    }

 /* Carte en mode édition (nouveau intervenant) */
.recap-contact-card-editing[b-mz60lo4oj4] {
    border: 2px dashed #93c5fd !important;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    animation: cardSlideIn-b-mz60lo4oj4 0.4s ease;
}

@keyframes cardSlideIn-b-mz60lo4oj4 {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.recap-contact-card-editing .recap-contact-role-label[b-mz60lo4oj4] {
    color: #3b82f6;
    font-weight: 700;
}

/* Corps en mode édition (champs de formulaire) */
.recap-contact-body-edit[b-mz60lo4oj4] {
    gap: 10px;
}

.recap-row-cp[b-mz60lo4oj4] {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
}

/* Footer pour le bouton Enregistrer */
.recap-contact-footer[b-mz60lo4oj4] {
    padding: 14px 20px;
    background: #fafbfc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 768px) {
    .recap-info-banner[b-mz60lo4oj4] {
        flex-wrap: wrap;
    }

    .recap-info-actions[b-mz60lo4oj4] {
        width: 100%;
        margin-top: 12px;
    }

        .recap-info-actions[b-mz60lo4oj4]  fluent-button {
            width: 100%;
        }

    .recap-row-cp[b-mz60lo4oj4] {
        grid-template-columns: 1fr 2fr;
    }
}

/*FIN RECAP*/

[b-mz60lo4oj4] .activeTab {
    color: dodgerblue !important;
}

/* Cible le container interne de MudTabs */
[b-mz60lo4oj4] .mud-tabs-panels {
    overflow: visible !important;
}
[b-mz60lo4oj4] #recap-container {
    overflow-x: hidden !important;
}

[b-mz60lo4oj4] fluent-stack,
[b-mz60lo4oj4] .fluent-stack {
    overflow: visible !important;
}

[b-mz60lo4oj4] .mud-tab-panel {
    overflow: visible !important;
}

[b-mz60lo4oj4] .unread-message {
    font-style:italic;
    font-weight:bolder;
}
[b-mz60lo4oj4] .agenda-stack {
    padding: 1.5rem;
}

[b-mz60lo4oj4] .activeTab {
    color: dodgerblue !important;
}

[b-mz60lo4oj4] .rcp-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

[b-mz60lo4oj4] .rcp-header {
    padding: 0.5rem 1rem;
    /*color: light;*/
    font-weight: bold;
    background-color: rgba(201, 211, 226, 0.4) !important;
}

[b-mz60lo4oj4] .rcp-steps {
}

[b-mz60lo4oj4] .step {
    flex: 1; /* ← ne jamais rétrécir */
    white-space: normal; /* ← le texte dans le step peut wrapper */
    min-width: 100px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: slategray;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    font-weight: 500;
    background-color: #64b5f6;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 1.5rem;
    position: relative;
    clip-path: polygon( 0% 0%, calc(100% - var(--point-offset)) 0%, 100% 50%, calc(100% - var(--point-offset)) 100%, 0% 100%, 0% var(--notch-bottom), var(--notch-depth) 50%, 0% var(--notch-top) );
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: clip-path 0.3s ease;
    --notch-depth: 15px;
    --notch-top: 5%;
    --notch-bottom: 95%;
    --point-offset: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, clip-path 0.3s ease;
}

    /* Raise hovered step above its neighbours */
    [b-mz60lo4oj4] .step:hover {
        z-index: 10;
        transform: translateY(-2px);
    }

    [b-mz60lo4oj4] .step:first-child {
        clip-path: polygon( 0% 0%, calc(100% - var(--point-offset)) 0%, 100% 50%, calc(100% - var(--point-offset)) 100%, 0% 100%, 0% var(--notch-bottom), var(--notch-depth) 50%, 0% var(--notch-top) );
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        transition: clip-path 0.3s ease;
        --notch-depth: 0px;
        --notch-top: 5%;
        --notch-bottom: 95%;
        --point-offset: 15px;
        margin-left: 0.5rem;
    }

    [b-mz60lo4oj4] .step:last-child {
        clip-path: polygon( 0% 0%, calc(100% - var(--point-offset)) 0%, 100% 50%, calc(100% - var(--point-offset)) 100%, 0% 100%, 0% var(--notch-bottom), var(--notch-depth) 50%, 0% var(--notch-top) );
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        transition: clip-path 0.3s ease;
        --notch-depth: 15px;
        --notch-top: 5%;
        --notch-bottom: 95%;
        --point-offset: 0px;
        margin-right: 0.5rem;
    }
    
/* Animation d'apparition glissée */
@keyframes slideInLeft-b-mz60lo4oj4 {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Appliquer à chaque étape */
[b-mz60lo4oj4] .rcp-steps .step {
    animation: slideInLeft-b-mz60lo4oj4 0.6s ease forwards;
    opacity: 0;
}

    /* Décalage progressif pour chaque élément (effet cascade) */
    [b-mz60lo4oj4] .rcp-steps .step:nth-child(1) {
        animation-delay: 0.1s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(2) {
        animation-delay: 0.25s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(3) {
        animation-delay: 0.4s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(4) {
        animation-delay: 0.55s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(5) {
        animation-delay: 0.7s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(6) {
        animation-delay: 0.8s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(7) {
        animation-delay: 0.9s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(8) {
        animation-delay: 1s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(9) {
        animation-delay: 1.1s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(10) {
        animation-delay: 1.2s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(11) {
        animation-delay: 1.3s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(12) {
        animation-delay: 1.4s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(13) {
        animation-delay: 1.5s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(14) {
        animation-delay: 1.6s;
    }

    [b-mz60lo4oj4] .rcp-steps .step:nth-child(15) {
        animation-delay: 1.7s;
    }

/* Pour plus de 5 étapes, on peut généraliser : */
[b-mz60lo4oj4] .rcp-steps .step {
    animation-fill-mode: both;
}

[b-mz60lo4oj4] .project-steps {
    display: flex;
    flex-wrap: nowrap; /* ← nowrap explicite */
    align-items: stretch;
    gap: 0;
    width: max-content; /* ← force la vraie largeur calculée */
    padding-bottom: 0.5rem;
}

[b-mz60lo4oj4] #steps-container {
    margin-left:25px;
    width: 95% !important;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.75rem 1rem 0.75rem 1rem;
    box-sizing: border-box;
}


/* === POPUP MODERNE === */
/*::deep .modern-popup .leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    overflow: hidden;
}

::deep .modern-popup .leaflet-popup-content {
    margin: 0 !important;
    width: 260px !important;
}

::deep .modern-popup .leaflet-popup-tip {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

::deep .custom-popup {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

::deep .popup-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

::deep .popup-icon {
    font-size: 18px;
}

::deep .popup-body {
    padding: 14px 16px;
    background: white;
}

::deep .popup-row {
    display: flex;*/
    /*flex-direction: column;*/
    /*margin-bottom: 10px;
}

    ::deep .popup-row:last-child {
        margin-bottom: 0;
    }

::deep .popup-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 2px;
}

::deep .popup-value {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    max-width: 100% !important;
}

::deep .popup-tag {
    display: inline-block;
    background: #eff6ff;
    color: #2563eb;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
    max-width: 100% !important;*/
}
/* ============================================ */
/* === ÉTAPES PROJET — LEAN FLOW MODERNE === */
/* ============================================ */

[b-mz60lo4oj4] .lean-steps-wrapper {
    margin: 16px 0px;
    padding: 24px;
    background: linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

/* ===== Header avec stats + progress ===== */
[b-mz60lo4oj4] .lean-progress-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

[b-mz60lo4oj4] .lean-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 16px;
}

[b-mz60lo4oj4] .lean-progress-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

[b-mz60lo4oj4] .lean-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

[b-mz60lo4oj4] .lean-stat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

[b-mz60lo4oj4] .lean-stat-completed .lean-stat-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[b-mz60lo4oj4] .lean-stat-current .lean-stat-dot {
    background: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

[b-mz60lo4oj4] .lean-stat-upcoming .lean-stat-dot {
    background: #cbd5e1;
    box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.3);
}

[b-mz60lo4oj4] .lean-stat-value {
    font-weight: 700;
    color: #1e293b;
    font-size: 16px;
}

[b-mz60lo4oj4] .lean-stat-label {
    color: #64748b;
    font-weight: 500;
}

[b-mz60lo4oj4] .lean-progress-percent {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}

[b-mz60lo4oj4] .lean-percent-value {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[b-mz60lo4oj4] .lean-percent-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 4px;
}

[b-mz60lo4oj4] .lean-progress-track {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

[b-mz60lo4oj4] .lean-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #10b981 100%);
    background-size: 200% 100%;
    border-radius: 999px;
    transition: width 0.8s ease;
    animation: leanShimmer-b-mz60lo4oj4 3s ease-in-out infinite;
}

@keyframes leanShimmer-b-mz60lo4oj4 {
    0%, 100% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 0%;
    }
}

/* ===== Flow horizontal des flèches ===== */
[b-mz60lo4oj4] .lean-flow {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px 0 16px 0;
    gap: 0;
}

    /* Scrollbar customisée */
    [b-mz60lo4oj4] .lean-flow::-webkit-scrollbar {
        height: 8px;
    }

    [b-mz60lo4oj4] .lean-flow::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    [b-mz60lo4oj4] .lean-flow::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

        [b-mz60lo4oj4] .lean-flow::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* ===== Une flèche (étape) ===== */
[b-mz60lo4oj4] .lean-arrow {
    flex: 0 0 auto;
    min-width: 200px;
    position: relative;
    padding: 0;
    margin-right: 4px;
    opacity: 0;
    animation: leanArrowIn-b-mz60lo4oj4 0.5s ease forwards;
    animation-delay: calc(var(--step-index) * 0.08s);
    transition: transform 0.25s ease;
    cursor: pointer;
}

@keyframes leanArrowIn-b-mz60lo4oj4 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[b-mz60lo4oj4] .lean-arrow:hover {
    transform: translateY(-3px);
    z-index: 10;
}

[b-mz60lo4oj4] .lean-arrow:last-child {
    margin-right: 0;
}

/* Forme flèche via clip-path */
[b-mz60lo4oj4] .lean-arrow-content {
    position: relative;
    padding: 14px 28px 14px 32px;
    height: 100%;
    min-height: 130px;
    background: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    clip-path: polygon( 0% 0%, calc(100% - 18px) 0%, 100% 50%, calc(100% - 18px) 100%, 0% 100%, 18px 50% );
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Première étape (pas d'encoche à gauche) */
[b-mz60lo4oj4] .lean-arrow:first-child .lean-arrow-content {
    clip-path: polygon( 0% 0%, calc(100% - 18px) 0%, 100% 50%, calc(100% - 18px) 100%, 0% 100% );
    padding-left: 18px;
}

/* Dernière étape (pas de pointe à droite) */
[b-mz60lo4oj4] .lean-arrow:last-child .lean-arrow-content {
    clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%, 18px 50% );
    padding-right: 18px;
}

/* Cas spécial : une seule étape */
[b-mz60lo4oj4] .lean-arrow:first-child:last-child .lean-arrow-content {
    clip-path: none;
    padding: 14px 18px;
    border-radius: 12px;
}

/* ===== Couleurs par statut ===== */

/* Étape terminée (verte) */
[b-mz60lo4oj4] .lean-arrow.completed .lean-arrow-content {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #6ee7b7;
}

[b-mz60lo4oj4] .lean-arrow.completed:hover .lean-arrow-content {
    background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
}

[b-mz60lo4oj4] .lean-arrow.completed .lean-step-number {
    background: #10b981;
    color: white;
}

[b-mz60lo4oj4] .lean-arrow.completed .lean-step-status {
    color: #047857;
}

/* Étape en cours (bleue, avec pulsation) */
[b-mz60lo4oj4] .lean-arrow.current .lean-arrow-content {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #93c5fd;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18);
    animation: leanCurrentPulse-b-mz60lo4oj4 2.5s ease-in-out infinite;
}

@keyframes leanCurrentPulse-b-mz60lo4oj4 {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18);
    }

    50% {
        box-shadow: 0 4px 22px rgba(59, 130, 246, 0.4);
    }
}

[b-mz60lo4oj4] .lean-arrow.current:hover .lean-arrow-content {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
}

[b-mz60lo4oj4] .lean-arrow.current .lean-step-number {
    background: #3b82f6;
    color: white;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

[b-mz60lo4oj4] .lean-arrow.current .lean-step-status {
    color: #1e40af;
    font-weight: 700;
}

/* Étape à venir (grise) */
[b-mz60lo4oj4] .lean-arrow.upcoming .lean-arrow-content {
    background: white;
    border-color: #e2e8f0;
}

[b-mz60lo4oj4] .lean-arrow.upcoming:hover .lean-arrow-content {
    background: #f8fafc;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

[b-mz60lo4oj4] .lean-arrow.upcoming .lean-step-number {
    background: #e2e8f0;
    color: #64748b;
}

[b-mz60lo4oj4] .lean-arrow.upcoming .lean-step-status {
    color: #94a3b8;
}

/* ===== Contenu intérieur de chaque flèche ===== */

[b-mz60lo4oj4] .lean-arrow-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-mz60lo4oj4] .lean-step-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

[b-mz60lo4oj4] .lean-step-status {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    line-height: 1;
}

[b-mz60lo4oj4] .lean-arrow-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    word-break: break-word;
    margin-top: 2px;
}

[b-mz60lo4oj4] .lean-arrow-dates {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed rgba(15, 23, 42, 0.1);
}

[b-mz60lo4oj4] .lean-date-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.2;
}

[b-mz60lo4oj4] .lean-date-arrow {
    color: #94a3b8;
    font-size: 10px;
    flex-shrink: 0;
}

[b-mz60lo4oj4] .lean-date-label {
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 9px;
    min-width: 32px;
}

[b-mz60lo4oj4] .lean-date-value {
    color: #1e293b;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

[b-mz60lo4oj4] .lean-arrow.completed .lean-date-value {
    color: #047857;
}

[b-mz60lo4oj4] .lean-arrow.current .lean-date-value {
    color: #1e40af;
}

/* ===== Tooltip ===== */
[b-mz60lo4oj4] .tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px;
    min-width: 200px;
}

[b-mz60lo4oj4] .tooltip-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
}

    [b-mz60lo4oj4] .tooltip-row > svg,
    [b-mz60lo4oj4] .tooltip-row > fluent-icon {
        color: #94a3b8;
        margin-top: 1px;
        flex-shrink: 0;
    }

    [b-mz60lo4oj4] .tooltip-row > div {
        display: flex;
        flex-direction: column;
    }

[b-mz60lo4oj4] .tooltip-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
}

[b-mz60lo4oj4] .tooltip-value {
    font-size: 12px;
    color: #1e293b;
    font-weight: 600;
    margin-top: 1px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    [b-mz60lo4oj4] .lean-progress-info {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-mz60lo4oj4] .lean-progress-percent {
        align-items: flex-start;
    }

    [b-mz60lo4oj4] .lean-arrow {
        min-width: 180px;
    }
}

/* ============================================ */
/* === BOUTONS : ANIMATION COMMUNE          === */
/* ============================================ */
/* Appliquée aux FluentButton / FluentAnchor Accent (Class="btn-animated") */
[b-mz60lo4oj4] .btn-animated {
    border-radius: calc(var(--control-corner-radius) * 1px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

    [b-mz60lo4oj4] .btn-animated svg {
        transition: transform 0.2s ease;
    }

    [b-mz60lo4oj4] .btn-animated:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
        filter: brightness(1.05);
    }

        [b-mz60lo4oj4] .btn-animated:hover svg {
            transform: scale(1.15);
        }

    [b-mz60lo4oj4] .btn-animated:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
    }

/* Bouton "Exporter en PDF" : rouge Adobe Acrobat
   (on surcharge les design tokens Fluent : fond au repos / survol / clic) */
[b-mz60lo4oj4] .btn-pdf {
    --accent-fill-rest: #e1251b;
    --accent-fill-hover: #c41e15;
    --accent-fill-active: #a3190f;
    --accent-fill-focus: #e1251b;
    --foreground-on-accent-rest: #ffffff;
    --foreground-on-accent-hover: #ffffff;
    --foreground-on-accent-active: #ffffff;
}

    [b-mz60lo4oj4] .btn-pdf.btn-animated:hover {
        box-shadow: 0 6px 16px rgba(225, 37, 27, 0.3);
    }

    [b-mz60lo4oj4] .btn-pdf.btn-animated:active {
        box-shadow: 0 2px 6px rgba(225, 37, 27, 0.22);
    }

/* Boutons du workflow "Étapes de mon projet" (Class="btn-animated btn-step") :
   leurs couleurs varient (bleu / vert / rouge), on utilise donc une ombre neutre */
[b-mz60lo4oj4] .btn-step.btn-animated:hover {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
}

[b-mz60lo4oj4] .btn-step.btn-animated:active {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

/* MudButton : on garde son arrondi d'origine */
[b-mz60lo4oj4] .mud-button-root.btn-animated {
    border-radius: var(--mud-default-borderradius, 4px);
}

/* Pas d'animation sur un bouton désactivé */
[b-mz60lo4oj4] .btn-animated[disabled]:hover,
[b-mz60lo4oj4] .btn-animated:disabled:hover {
    transform: none;
    box-shadow: none;
    filter: none;
}

    [b-mz60lo4oj4] .btn-animated[disabled]:hover svg,
    [b-mz60lo4oj4] .btn-animated:disabled:hover svg {
        transform: none;
    }

/* Petits boutons "copier" (Stealth) */
[b-mz60lo4oj4] .btn-copy {
    color: #3b82f6 !important;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    [b-mz60lo4oj4] .btn-copy:hover {
        opacity: 1;
        transform: scale(1.1);
        background: #eff6ff !important;
    }

/* ============================================ */
/* === BANDEAU CODE D'ASSOCIATION           === */
/* ============================================ */
.assoc-banner[b-mz60lo4oj4] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 1.5rem;
    padding: 20px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
}

    /* Cercles décoratifs à droite */
    .assoc-banner[b-mz60lo4oj4]::before,
    .assoc-banner[b-mz60lo4oj4]::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .assoc-banner[b-mz60lo4oj4]::before {
        width: 220px;
        height: 220px;
        right: -60px;
        top: -70px;
        background: rgba(59, 130, 246, 0.08);
    }

    .assoc-banner[b-mz60lo4oj4]::after {
        width: 140px;
        height: 140px;
        right: 90px;
        bottom: -95px;
        background: rgba(59, 130, 246, 0.06);
    }

.assoc-banner-main[b-mz60lo4oj4] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.assoc-banner-icon[b-mz60lo4oj4] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

.assoc-banner-text[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.assoc-banner-title[b-mz60lo4oj4] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #1e3a8a;
}

.assoc-banner-subtitle[b-mz60lo4oj4] {
    margin: 0;
    max-width: 60ch;
    font-size: 13px;
    line-height: 1.5;
    color: #1e40af;
}

/* Code révélé */
.assoc-code-chip[b-mz60lo4oj4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 10px;
    padding: 2px 4px 2px 12px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1);
    animation: assocCodeReveal-b-mz60lo4oj4 0.25s ease;
}

@keyframes assocCodeReveal-b-mz60lo4oj4 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.assoc-code-value[b-mz60lo4oj4] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #1e3a8a;
    word-break: break-all;
    user-select: all;
}

.assoc-banner-actions[b-mz60lo4oj4] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .assoc-banner[b-mz60lo4oj4] {
        flex-direction: column;
        align-items: stretch;
    }

    .assoc-banner-actions[b-mz60lo4oj4] {
        flex-wrap: wrap;
    }

        .assoc-banner-actions[b-mz60lo4oj4]  fluent-button {
            flex: 1;
        }
}

/* ============================================ */
/* === CARTE MON PROJET                     === */
/* ============================================ */
.project-card[b-mz60lo4oj4] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 2fr) 3fr;
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

    /* Liseré bleu à gauche, comme les cartes intervenants */
    .project-card[b-mz60lo4oj4]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #3b82f6, #60a5fa);
    }

/* Colonne gauche */
.project-card-hero[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 24px 28px;
    background: #fafbfc;
    border-right: 1px solid #f1f5f9;
}

.project-type-tag[b-mz60lo4oj4] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border: 1px solid #86efac;
    color: #166534;
    font-size: 12px;
    font-weight: 600;
}

.project-address[b-mz60lo4oj4] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
    word-break: break-word;
}

.project-city[b-mz60lo4oj4] {
    margin: 0;
    font-size: 15px;
    color: #64748b;
}

/* Pousse le bouton en bas de la colonne, avec un écart minimum */
.project-hero-spacer[b-mz60lo4oj4] {
    flex: 1;
    min-height: 16px;
}

/* Colonne droite : tuiles */
.project-card-details[b-mz60lo4oj4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 12px;
    padding: 24px;
}

.project-tile[b-mz60lo4oj4] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    /* Liseré qui apparaît au survol */
    .project-tile[b-mz60lo4oj4]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(180deg, #3b82f6, #60a5fa);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.25s ease;
    }

    .project-tile:hover[b-mz60lo4oj4] {
        transform: translateY(-2px);
        border-color: #bfdbfe;
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12);
    }

        .project-tile:hover[b-mz60lo4oj4]::before {
            transform: scaleY(1);
        }

.project-tile-wide[b-mz60lo4oj4] {
    grid-column: 1 / -1;
}

.project-tile-icon[b-mz60lo4oj4] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.project-tile:hover .project-tile-icon[b-mz60lo4oj4] {
    background: #eff6ff;
    border-color: #bfdbfe;
    transform: scale(1.08);
}

.project-tile-text[b-mz60lo4oj4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.project-tile-label[b-mz60lo4oj4] {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.project-tile-value[b-mz60lo4oj4] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    word-break: break-word;
}

.project-tile-mono[b-mz60lo4oj4] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
}

@media (max-width: 900px) {
    .project-card[b-mz60lo4oj4] {
        grid-template-columns: 1fr;
    }

    .project-card-hero[b-mz60lo4oj4] {
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
    }
}

@media (max-width: 560px) {
    .project-card-details[b-mz60lo4oj4] {
        grid-template-columns: 1fr;
    }
}

/* Accessibilité : pas d'animation si l'utilisateur l'a demandé */
@media (prefers-reduced-motion: reduce) {
    .assoc-code-chip[b-mz60lo4oj4],
    .project-tile[b-mz60lo4oj4],
    .project-tile[b-mz60lo4oj4]::before,
    .project-tile-icon[b-mz60lo4oj4],
    [b-mz60lo4oj4] .btn-animated,
    [b-mz60lo4oj4] .btn-animated svg,
    [b-mz60lo4oj4] .btn-copy {
        animation: none;
        transition: none;
    }

    .project-tile:hover[b-mz60lo4oj4],
    .project-tile:hover .project-tile-icon[b-mz60lo4oj4],
    [b-mz60lo4oj4] .btn-animated:hover,
    [b-mz60lo4oj4] .btn-animated:hover svg,
    [b-mz60lo4oj4] .btn-copy:hover {
        transform: none;
    }
}

/* ============================================ */
/* === BOUTONS "RAFRAÎCHIR" : ICÔNE QUI TOURNE === */
/* ============================================ */
[b-mz60lo4oj4] .btn-refresh.btn-animated:not([disabled]) svg {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[b-mz60lo4oj4] .btn-refresh.btn-animated:not([disabled]):hover svg {
    transform: rotate(180deg) scale(1.1);
}

/* ============================================ */
/* === ÉTAPES DU WORKFLOW : ANIMATIONS      === */
/* ============================================ */
/* Les animations d'entrée utilisent les propriétés "translate" / "scale" (et non
   "transform") pour ne pas écraser les transformations internes de MudTimeline,
   et "backwards" pour ne laisser aucune transformation une fois terminées
   (sinon les calendriers / listes déroulantes des étapes seraient mal positionnés). */

/* En-tête de l'onglet */
[b-mz60lo4oj4] .wf-intro {
    animation: wfFadeDown-b-mz60lo4oj4 0.5s ease backwards;
}

@keyframes wfFadeDown-b-mz60lo4oj4 {
    from {
        opacity: 0;
        translate: 0 -10px;
    }
}

/* La ligne de la timeline se trace de haut en bas */
[b-mz60lo4oj4] .wf-timeline::before {
    animation: wfLineDraw-b-mz60lo4oj4 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.15s backwards;
}

@keyframes wfLineDraw-b-mz60lo4oj4 {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Chaque étape arrive de son côté, en cascade */
[b-mz60lo4oj4] .wf-step {
    --wf-delay: calc(var(--wf-i, 0) * 120ms + 250ms);
    animation: wfStepIn-b-mz60lo4oj4 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--wf-delay) backwards;
}

[b-mz60lo4oj4] .wf-step--start {
    --wf-from: -56px;
}

[b-mz60lo4oj4] .wf-step--end {
    --wf-from: 56px;
}

@keyframes wfStepIn-b-mz60lo4oj4 {
    from {
        opacity: 0;
        translate: var(--wf-from, 0) 18px;
        filter: blur(6px);
    }

    to {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
    }
}

/* Les pastilles "éclosent" juste après leur étape */
[b-mz60lo4oj4] .wf-step .mud-timeline-item-dot {
    animation: wfDotPop-b-mz60lo4oj4 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--wf-delay) + 200ms) backwards;
    transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wfDotPop-b-mz60lo4oj4 {
    from {
        scale: 0;
    }

    to {
        scale: 1;
    }
}

/* Étape en cours : halo qui pulse autour de la pastille */
[b-mz60lo4oj4] .wf-step--current .mud-timeline-item-dot {
    animation: wfDotPop-b-mz60lo4oj4 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--wf-delay) + 200ms) backwards,
               wfPulse-b-mz60lo4oj4 2.4s ease-in-out calc(var(--wf-delay) + 800ms) infinite;
}

@keyframes wfPulse-b-mz60lo4oj4 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(59, 130, 246, 0);
    }
}

/* Survol d'une étape : la carte se soulève, la pastille grossit */
[b-mz60lo4oj4] .wf-card {
    transition: box-shadow 0.3s ease, translate 0.3s ease;
}

[b-mz60lo4oj4] .wf-step:hover .wf-card {
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}

    /* pas de déplacement pendant une saisie (calendrier, liste…) */
    [b-mz60lo4oj4] .wf-step:hover .wf-card:not(:focus-within) {
        translate: 0 -4px;
    }

[b-mz60lo4oj4] .wf-step:hover .mud-timeline-item-dot {
    scale: 1.2;
}

/* Le contenu de l'alerte prend toute la largeur (titre à gauche, chevron à droite) */
[b-mz60lo4oj4] .wf-card .mud-alert-message {
    flex: 1;
    min-width: 0;
}

/* En-tête cliquable de l'étape */
.wf-step-header[b-mz60lo4oj4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 4px 0;
    padding: 2px 0;
    background: none;
    border: none;
    border-radius: 8px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .wf-step-header:focus-visible[b-mz60lo4oj4] {
        outline: 2px solid #3b82f6;
        outline-offset: 3px;
    }

.wf-step-title[b-mz60lo4oj4] {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.wf-chevron[b-mz60lo4oj4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.06);
    transition: rotate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}

    .wf-chevron.is-open[b-mz60lo4oj4] {
        rotate: 180deg;
    }

.wf-step-header:hover .wf-chevron[b-mz60lo4oj4] {
    background: rgba(15, 23, 42, 0.12);
}

/* Contenu de l'étape qui se déplie */
.wf-step-body[b-mz60lo4oj4] {
    padding-top: 6px;
    animation: wfBodyIn-b-mz60lo4oj4 0.35s ease backwards;
}

@keyframes wfBodyIn-b-mz60lo4oj4 {
    from {
        opacity: 0;
        translate: 0 -8px;
    }
}

/* ============================================ */
/* === DOCUMENTS : SUIVI DE L'AJOUT         === */
/* ============================================ */
.upload-panel[b-mz60lo4oj4] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    animation: uploadPanelIn-b-mz60lo4oj4 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition: background 0.3s ease, border-color 0.3s ease;
}

    .upload-panel.is-done[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border-color: #86efac;
        border-left-color: #16a34a;
    }

    .upload-panel.is-error[b-mz60lo4oj4] {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
        border-color: #fecaca;
        border-left-color: #ef4444;
    }

@keyframes uploadPanelIn-b-mz60lo4oj4 {
    from {
        opacity: 0;
        translate: 0 -8px;
    }
}

/* Visuel à gauche */
.upload-visual[b-mz60lo4oj4] {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #ffffff;
    color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.is-done .upload-visual[b-mz60lo4oj4] {
    color: #16a34a;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.18);
}

.is-error .upload-visual[b-mz60lo4oj4] {
    color: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.upload-icon[b-mz60lo4oj4] {
    display: inline-flex;
}

/* Envoi : la flèche monte et descend */
.upload-icon--bounce[b-mz60lo4oj4] {
    animation: uploadBounce-b-mz60lo4oj4 1.2s ease-in-out infinite;
}

@keyframes uploadBounce-b-mz60lo4oj4 {
    0%, 100% {
        translate: 0 3px;
    }

    50% {
        translate: 0 -4px;
    }
}

/* Enregistrement : anneau qui tourne autour du document */
.upload-spinner[b-mz60lo4oj4] {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 3px solid #dbeafe;
    border-top-color: #3b82f6;
    animation: uploadSpin-b-mz60lo4oj4 0.9s linear infinite;
}

@keyframes uploadSpin-b-mz60lo4oj4 {
    to {
        rotate: 360deg;
    }
}

/* Terminé : la coche apparaît */
.upload-icon--pop[b-mz60lo4oj4] {
    animation: uploadPop-b-mz60lo4oj4 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes uploadPop-b-mz60lo4oj4 {
    from {
        scale: 0;
    }

    to {
        scale: 1;
    }
}

/* Erreur : petite secousse */
.upload-icon--shake[b-mz60lo4oj4] {
    animation: uploadShake-b-mz60lo4oj4 0.45s ease;
}

@keyframes uploadShake-b-mz60lo4oj4 {
    0%, 100% { translate: 0 0; }
    20% { translate: -4px 0; }
    40% { translate: 4px 0; }
    60% { translate: -3px 0; }
    80% { translate: 3px 0; }
}

/* Texte */
.upload-body[b-mz60lo4oj4] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upload-head[b-mz60lo4oj4] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.upload-filename[b-mz60lo4oj4] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-size[b-mz60lo4oj4] {
    font-size: 12px;
    color: #64748b;
    flex-shrink: 0;
}

.upload-status[b-mz60lo4oj4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #1e40af;
}

.is-done .upload-status[b-mz60lo4oj4] {
    color: #166534;
}

.is-error .upload-status[b-mz60lo4oj4] {
    color: #991b1b;
}

.upload-percent[b-mz60lo4oj4] {
    font-size: 14px;
    color: #1e3a8a;
    font-variant-numeric: tabular-nums;
}

.upload-hint[b-mz60lo4oj4] {
    font-size: 12px;
    color: #1e40af;
    opacity: 0.85;
}

/* Barre de progression */
.upload-track[b-mz60lo4oj4] {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #bfdbfe;
    overflow: hidden;
}

.is-done .upload-track[b-mz60lo4oj4] {
    box-shadow: inset 0 0 0 1px #86efac;
}

.upload-fill[b-mz60lo4oj4] {
    height: 100%;
    border-radius: inherit;
    background-color: #3b82f6;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.28) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0.28) 75%, transparent 75%, transparent);
    background-size: 16px 16px;
    animation: uploadStripes-b-mz60lo4oj4 0.8s linear infinite;
    transition: width 0.3s ease;
}

@keyframes uploadStripes-b-mz60lo4oj4 {
    to {
        background-position: 16px 0;
    }
}

/* Enregistrement : durée inconnue, un segment glisse en boucle */
.upload-fill.is-indeterminate[b-mz60lo4oj4] {
    width: 40% !important;
    animation: uploadStripes-b-mz60lo4oj4 0.8s linear infinite, uploadSlide-b-mz60lo4oj4 1.4s ease-in-out infinite;
}

@keyframes uploadSlide-b-mz60lo4oj4 {
    from {
        translate: -100% 0;
    }

    to {
        translate: 250% 0;
    }
}

.is-done .upload-fill[b-mz60lo4oj4] {
    background-color: #16a34a;
    background-image: none;
    animation: none;
}

@media (max-width: 600px) {
    .upload-panel[b-mz60lo4oj4] {
        align-items: flex-start;
        padding: 14px;
        gap: 12px;
    }

    .upload-visual[b-mz60lo4oj4] {
        width: 44px;
        height: 44px;
    }
}

/* Accessibilité : animations réduites si l'utilisateur l'a demandé
   (on garde seulement l'anneau de chargement, qui indique une attente) */
@media (prefers-reduced-motion: reduce) {
    [b-mz60lo4oj4] .wf-intro,
    [b-mz60lo4oj4] .wf-timeline::before,
    [b-mz60lo4oj4] .wf-step,
    [b-mz60lo4oj4] .wf-step .mud-timeline-item-dot,
    [b-mz60lo4oj4] .wf-step--current .mud-timeline-item-dot,
    .wf-step-body[b-mz60lo4oj4],
    .upload-panel[b-mz60lo4oj4],
    .upload-icon--bounce[b-mz60lo4oj4],
    .upload-icon--pop[b-mz60lo4oj4],
    .upload-icon--shake[b-mz60lo4oj4],
    .upload-fill[b-mz60lo4oj4] {
        animation: none;
    }

    [b-mz60lo4oj4] .wf-step:hover .wf-card,
    [b-mz60lo4oj4] .wf-step:hover .mud-timeline-item-dot {
        translate: none;
        scale: none;
    }

    .wf-chevron[b-mz60lo4oj4],
    [b-mz60lo4oj4] .wf-card {
        transition: none;
    }

    .upload-fill.is-indeterminate[b-mz60lo4oj4] {
        width: 100% !important;
        animation: none;
    }
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/Requests.razor.rz.scp.css */
/* --- Barre d'outils : filtres à gauche, paginateur + bouton à droite --- */
.requests-toolbar[b-wq3w4uyjpw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding-bottom: 14px;
    overflow: visible;
}

.requests-toolbar-left[b-wq3w4uyjpw],
.requests-toolbar-right[b-wq3w4uyjpw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: visible;
}

.requests-toolbar-right[b-wq3w4uyjpw] {
    margin-left: auto;
}

/* 1. Let the wrapper scroll instead of clipping */
.requests-grid-wrap[b-wq3w4uyjpw] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto; /* was: hidden */
}

    /* 2. Real minimum width → table overflows → scrollbar appears */
    .requests-grid-wrap[b-wq3w4uyjpw]  table {
        width: 100% !important;
        min-width: 62rem; /* tune: the point where scrolling kicks in */
        max-width: none; /* remove the 100% ceiling */
        table-layout: fixed;
    }

        /* --- Retour à la ligne au lieu du débordement --- */
        .requests-grid-wrap table th[b-wq3w4uyjpw],
        .requests-grid-wrap table td[b-wq3w4uyjpw] {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            overflow-wrap: anywhere;
            word-break: break-word;
            vertical-align: middle;
            line-height: 1.4;
        }

        .requests-grid-wrap table .col-title-text[b-wq3w4uyjpw],
        .requests-grid-wrap table .column-header[b-wq3w4uyjpw] {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
        }

        /* --- Largeurs de colonnes (total = 100%) --- */
        
        /* Nom du projet   */
    .requests-grid-wrap[b-wq3w4uyjpw]  table th:nth-child(1),
    .requests-grid-wrap[b-wq3w4uyjpw]  table td:nth-child(1) {
        width: 13%;
    }
    /* Référence       */
    .requests-grid-wrap[b-wq3w4uyjpw]  table th:nth-child(2),
    .requests-grid-wrap[b-wq3w4uyjpw]  table td:nth-child(2) {
        width: 17%;
    }
    /* Date création   */
    .requests-grid-wrap[b-wq3w4uyjpw]  table th:nth-child(3),
    .requests-grid-wrap[b-wq3w4uyjpw]  table td:nth-child(3) {
        width: 11%;
    }
        /* Type de demande */
    .requests-grid-wrap[b-wq3w4uyjpw]  table th:nth-child(4),
    .requests-grid-wrap[b-wq3w4uyjpw]  table td:nth-child(4) {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: middle;
    }
    /* Address column wraps onto several lines */
    .requests-grid-wrap[b-wq3w4uyjpw]  table td:nth-child(5),
    .requests-grid-wrap[b-wq3w4uyjpw]  table th:nth-child(5) {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: middle;
    }
    /* Étape en cours  */
    .requests-grid-wrap[b-wq3w4uyjpw]  table th:nth-child(6),
    .requests-grid-wrap[b-wq3w4uyjpw]  table td:nth-child(6) {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: middle;
        width: 12%;
    }
    /* Messages        */
    .requests-grid-wrap[b-wq3w4uyjpw]  table th:nth-child(7),
    .requests-grid-wrap[b-wq3w4uyjpw]  table td:nth-child(7) {
        width: 7%;
    }
    /* Action          */
    .requests-grid-wrap[b-wq3w4uyjpw]  table th:nth-child(8),
    .requests-grid-wrap[b-wq3w4uyjpw]  table td:nth-child(8) {
        width: 12%;
    }

        /* --- Lignes cliquables --- */
        .requests-grid-wrap table tbody tr[b-wq3w4uyjpw] {
            cursor: pointer;
            transition: background 0.2s ease;
        }

            .requests-grid-wrap table tbody tr:hover[b-wq3w4uyjpw] {
                background: #f8fafc;
            }

/* --- Responsive --- */
@media (max-width: 768px) {
    .requests-toolbar-right[b-wq3w4uyjpw] {
        margin-left: 0;
    }

    .requests-grid-wrap table th:nth-child(2)[b-wq3w4uyjpw],
    .requests-grid-wrap table td:nth-child(2)[b-wq3w4uyjpw],
    .requests-grid-wrap table th:nth-child(3)[b-wq3w4uyjpw],
    .requests-grid-wrap table td:nth-child(3)[b-wq3w4uyjpw],
    .requests-grid-wrap table th:nth-child(4)[b-wq3w4uyjpw],
    .requests-grid-wrap table td:nth-child(4)[b-wq3w4uyjpw] {
        display: none;
    }

    .requests-grid-wrap table th:nth-child(1)[b-wq3w4uyjpw],
    .requests-grid-wrap table td:nth-child(1)[b-wq3w4uyjpw] {
        width: 32%;
    }

    .requests-grid-wrap table th:nth-child(5)[b-wq3w4uyjpw],
    .requests-grid-wrap table td:nth-child(5)[b-wq3w4uyjpw] {
        width: 34%;
    }

    .requests-grid-wrap table th:nth-child(6)[b-wq3w4uyjpw],
    .requests-grid-wrap table td:nth-child(6)[b-wq3w4uyjpw] {
        width: 24%;
    }
}


/* Badge color overrides for FluentBadge - circular, white text */
[b-wq3w4uyjpw] .badge-blue {
    background-color: #2750F5 !important; /* blue */
    color: #ffffff !important; /* white text */
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important; /* size for single-digit */
    height: 24px !important;
    padding: 0 8px !important; /* extra padding for multi-digit */
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    border-radius: 9999px !important; /* pill/circle */
    box-sizing: border-box !important;
}

/* If you truly want a perfect circle for single-digit values, use a fixed width:
   .badge-blue.circle { width: 24px !important; padding: 0 !important; } */

[b-wq3w4uyjpw] .badge-red {
    background-color: #F54927 !important; /* red */
    color: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Pages/UserProfile.razor.rz.scp.css */
[b-typ9mj475p] .activeTab {
    color: dodgerblue !important;
}


[b-typ9mj475p] .divider {
    width: 100%;
    margin-bottom: 1.5rem;
}

[b-typ9mj475p] .form_change_password {
    max-width: 700px;
}

.profile-grid[b-typ9mj475p] {
    display: grid;
    grid-template-columns: 200px 1fr;
    row-gap: 0.75rem;
    margin-top: 1rem;
}

.tabs-container[b-typ9mj475p] {
    overflow: hidden;
}

.slide-content[b-typ9mj475p] {
    transition: all 0.5s ease-in-out;
}

.slide-in-left[b-typ9mj475p] {
    animation: slideInLeft-b-typ9mj475p 0.5s ease-out;
}

.slide-in-right[b-typ9mj475p] {
    animation: slideInRight-b-typ9mj475p 0.5s ease-out;
}

.slide-out-left[b-typ9mj475p] {
    animation: slideOutLeft-b-typ9mj475p 0.5s ease-out;
    opacity: 0;
}

.slide-out-right[b-typ9mj475p] {
    animation: slideOutRight-b-typ9mj475p 0.5s ease-out;
    opacity: 0;
}

@keyframes slideInLeft-b-typ9mj475p {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight-b-typ9mj475p {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutLeft-b-typ9mj475p {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideOutRight-b-typ9mj475p {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Routes.razor.rz.scp.css */

.error-message[b-u8er54zg0e] {
    font-size: 1.2rem !important;
    color: #333 !important;
    text-align: center !important;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Shared/CheckboxListbox.razor.rz.scp.css */
.checkbox-listbox[b-d8we9igmpy] {
    position: relative;
    font-family: inherit;
}

/* Toggle button */
.listbox-toggle[b-d8we9igmpy] {
    width: 100%;
    padding: 7px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

    .listbox-toggle:hover[b-d8we9igmpy] {
        border-color: #888;
    }

.listbox-arrow[b-d8we9igmpy] {
    font-size: 11px;
    color: #666;
}

/* Dropdown panel */
.listbox-panel[b-d8we9igmpy] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow-y: auto;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 4px;
}

/* Items */
.listbox-item[b-d8we9igmpy] {
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 3px;
    font-size: 14px;
}

    .listbox-item:hover[b-d8we9igmpy] {
        background-color: #f0f0f0;
    }

    .listbox-item.selected[b-d8we9igmpy] {
        background-color: #e0eeff;
    }
/* _content/Sie.WebSite.GridPortal.Web/Components/Shared/ParticipantCard.razor.rz.scp.css */
[b-9p0njmwpu7] .contact-card {
    padding: 0 !important;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

    [b-9p0njmwpu7] .contact-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: #94a3b8;
    }

    [b-9p0njmwpu7] .contact-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    /* type-requestor — amber */
    [b-9p0njmwpu7] .contact-card.requestor::before {
        background: linear-gradient(180deg, #f59e0b, #fbbf24);
    }
    [b-9p0njmwpu7] .contact-card.requestor .contact-role-icon {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        color: #d97706;
    }

    /* type-owner — blue */
    [b-9p0njmwpu7] .contact-card.type-owner::before {
        background: linear-gradient(180deg, #3b82f6, #60a5fa);
    }
    [b-9p0njmwpu7] .contact-card.type-owner .contact-role-icon {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        color: #3b82f6;
    }

    /* type-project-owner — rose (changed, was amber) */
    [b-9p0njmwpu7] .contact-card.type-project-owner::before {
        background: linear-gradient(180deg, #f43f5e, #fb7185);
    }
    [b-9p0njmwpu7] .contact-card.type-project-owner .contact-role-icon {
        background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
        color: #f43f5e;
    }

    /* type-architect — violet */
    [b-9p0njmwpu7] .contact-card.type-architect::before {
        background: linear-gradient(180deg, #8b5cf6, #a78bfa);
    }
    [b-9p0njmwpu7] .contact-card.type-architect .contact-role-icon {
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
        color: #8b5cf6;
    }

    /* type-engineer — indigo */
    [b-9p0njmwpu7] .contact-card.type-engineer::before {
        background: linear-gradient(180deg, #6366f1, #818cf8);
    }
    [b-9p0njmwpu7] .contact-card.type-engineer .contact-role-icon {
        background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
        color: #6366f1;
    }

    /* type-masonry-company — orange */
    [b-9p0njmwpu7] .contact-card.type-masonry-company::before {
        background: linear-gradient(180deg, #f97316, #fb923c);
    }
    [b-9p0njmwpu7] .contact-card.type-masonry-company .contact-role-icon {
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
        color: #f97316;
    }

    /* type-electrical-installer — emerald */
    [b-9p0njmwpu7] .contact-card.type-electrical-installer::before {
        background: linear-gradient(180deg, #10b981, #34d399);
    }
    [b-9p0njmwpu7] .contact-card.type-electrical-installer .contact-role-icon {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #10b981;
    }

    /* type-service-billing — teal */
    [b-9p0njmwpu7] .contact-card.type-service-billing::before {
        background: linear-gradient(180deg, #14b8a6, #2dd4bf);
    }
    [b-9p0njmwpu7] .contact-card.type-service-billing .contact-role-icon {
        background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
        color: #14b8a6;
    }

    /* type-energy-billing — cyan */
    [b-9p0njmwpu7] .contact-card.type-energy-billing::before {
        background: linear-gradient(180deg, #06b6d4, #22d3ee);
    }
    [b-9p0njmwpu7] .contact-card.type-energy-billing .contact-role-icon {
        background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
        color: #06b6d4;
    }

    /* type-other — slate */
    [b-9p0njmwpu7] .contact-card.type-other::before {
        background: linear-gradient(180deg, #64748b, #94a3b8);
    }
    [b-9p0njmwpu7] .contact-card.type-other .contact-role-icon {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        color: #64748b;
    }

[b-9p0njmwpu7] .contact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fafbfc;
    border-bottom: 1px solid #f1f5f9;
}

[b-9p0njmwpu7] .contact-role-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-9p0njmwpu7] .contact-role-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-9p0njmwpu7] .contact-role-info {
    display: flex;
    flex-direction: column;
}

[b-9p0njmwpu7] .contact-role-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    font-weight: 600;
    line-height: 1;
}

[b-9p0njmwpu7] .contact-role-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
    line-height: 1.2;
    white-space: nowrap; /* auto width, never wraps */
}

[b-9p0njmwpu7] .contact-locked {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-9p0njmwpu7] .contact-delete::part(control) {
    background: transparent;
    transition: background-color 0.2s ease;
}

[b-9p0njmwpu7] .contact-delete:hover::part(control) {
    background: #fee2e2; /* light red on hover */
}

[b-9p0njmwpu7] .contact-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

[b-9p0njmwpu7] .contact-card-checkbox-label {
    width: 90%;
    padding-bottom: 1rem
}

[b-9p0njmwpu7] .contact-card-checkbox {
    width: 10%;
    padding-bottom: 1rem
}

[b-9p0njmwpu7] .contact-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

[b-9p0njmwpu7] .contact-row-cp {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
}

[b-9p0njmwpu7] .contact-card-footer {
    padding: 14px 20px;
    background: #fafbfc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Shared/ParticipantSection.razor.rz.scp.css */
.participant-section[b-q1a825npzs] {
    width: 100%;
}
/* Corps de la carte */
[b-q1a825npzs] .requestor-contact-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
/* Tag dans le header (pour le rôle du demandeur) */
[b-q1a825npzs] .requestor-contact-badge {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #86efac;
    flex-shrink: 0;
}

/* Ligne d'information */
[b-q1a825npzs] .requestor-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    [b-q1a825npzs] .requestor-info-row > svg,
    [b-q1a825npzs] .requestor-info-row > fluent-icon {
        color: #94a3b8;
        margin-top: 2px;
        flex-shrink: 0;
    }

[b-q1a825npzs] .requestor-info-text-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

[b-q1a825npzs] .requestor-field-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
}

[b-q1a825npzs] .requestor-field-value {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}

[b-q1a825npzs] .requestor-field-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[b-q1a825npzs] .requestor-field-link:hover {
    color: #2563eb;
    text-decoration: underline;
}


[b-q1a825npzs] .contact-card {
    padding: 0 !important;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

    [b-q1a825npzs] .contact-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: #94a3b8;
    }

    [b-q1a825npzs] .contact-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    /* type-requestor — amber */
    [b-q1a825npzs] .contact-card.requestor::before {
        background: linear-gradient(180deg, #f59e0b, #fbbf24);
    }
    [b-q1a825npzs] .contact-card.requestor .contact-role-icon {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        color: #d97706;
    }

    /* type-owner — blue */
    [b-q1a825npzs] .contact-card.type-owner::before {
        background: linear-gradient(180deg, #3b82f6, #60a5fa);
    }
    [b-q1a825npzs] .contact-card.type-owner .contact-role-icon {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        color: #3b82f6;
    }

    /* type-project-owner — rose (changed, was amber) */
    [b-q1a825npzs] .contact-card.type-project-owner::before {
        background: linear-gradient(180deg, #f43f5e, #fb7185);
    }
    [b-q1a825npzs] .contact-card.type-project-owner .contact-role-icon {
        background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
        color: #f43f5e;
    }

    /* type-architect — violet */
    [b-q1a825npzs] .contact-card.type-architect::before {
        background: linear-gradient(180deg, #8b5cf6, #a78bfa);
    }
    [b-q1a825npzs] .contact-card.type-architect .contact-role-icon {
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
        color: #8b5cf6;
    }

    /* type-engineer — indigo */
    [b-q1a825npzs] .contact-card.type-engineer::before {
        background: linear-gradient(180deg, #6366f1, #818cf8);
    }
    [b-q1a825npzs] .contact-card.type-engineer .contact-role-icon {
        background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
        color: #6366f1;
    }

    /* type-masonry-company — orange */
    [b-q1a825npzs] .contact-card.type-masonry-company::before {
        background: linear-gradient(180deg, #f97316, #fb923c);
    }
    [b-q1a825npzs] .contact-card.type-masonry-company .contact-role-icon {
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
        color: #f97316;
    }

    /* type-electrical-installer — emerald */
    [b-q1a825npzs] .contact-card.type-electrical-installer::before {
        background: linear-gradient(180deg, #10b981, #34d399);
    }
    [b-q1a825npzs] .contact-card.type-electrical-installer .contact-role-icon {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #10b981;
    }

    /* type-service-billing — teal */
    [b-q1a825npzs] .contact-card.type-service-billing::before {
        background: linear-gradient(180deg, #14b8a6, #2dd4bf);
    }
    [b-q1a825npzs] .contact-card.type-service-billing .contact-role-icon {
        background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
        color: #14b8a6;
    }

    /* type-energy-billing — cyan */
    [b-q1a825npzs] .contact-card.type-energy-billing::before {
        background: linear-gradient(180deg, #06b6d4, #22d3ee);
    }
    [b-q1a825npzs] .contact-card.type-energy-billing .contact-role-icon {
        background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
        color: #06b6d4;
    }

    /* type-other — slate */
    [b-q1a825npzs] .contact-card.type-other::before {
        background: linear-gradient(180deg, #64748b, #94a3b8);
    }
    [b-q1a825npzs] .contact-card.type-other .contact-role-icon {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        color: #64748b;
    }

[b-q1a825npzs] .contact-info-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    border-radius: 14px;
    width: 100%;
}

[b-q1a825npzs] .contact-info-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px;
    background: white;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

[b-q1a825npzs] .contact-info-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e3a8a;
    margin-bottom: 4px;
}

[b-q1a825npzs] .contact-info-text {
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
}

[b-q1a825npzs] .contact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fafbfc;
    border-bottom: 1px solid #f1f5f9;
}

[b-q1a825npzs] .contact-role-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-q1a825npzs] .contact-role-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-q1a825npzs] .contact-role-info {
    display: flex;
    flex-direction: column;
}

[b-q1a825npzs] .contact-role-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    font-weight: 600;
    line-height: 1;
}

[b-q1a825npzs] .contact-role-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
    line-height: 1.2;
    white-space: nowrap; /* auto width, never wraps */
}

[b-q1a825npzs] .contact-locked {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-q1a825npzs] .contact-delete::part(control) {
    background: transparent;
    transition: background-color 0.2s ease;
}

[b-q1a825npzs] .contact-delete:hover::part(control) {
    background: #fee2e2; /* light red on hover */
}

[b-q1a825npzs] .contact-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

[b-q1a825npzs] .contact-card-checkbox-label {
    width: 90%;
    padding-bottom: 1rem
}

[b-q1a825npzs] .contact-card-checkbox {
    width: 10%;
    padding-bottom: 1rem
}

[b-q1a825npzs] .contact-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

[b-q1a825npzs] .contact-row-cp {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
}

[b-q1a825npzs] .contact-card-footer {
    padding: 14px 20px;
    background: #fafbfc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
}

[b-q1a825npzs] .contacts-empty {
    background: linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
/*    border-radius: 16px;
    padding: 30px;
    height: 2rem;
*/    width: 100%;
    /*border-left: 4px solid #ffb900;*/
    padding: 1rem;
}

/* _content/Sie.WebSite.GridPortal.Web/Components/Shared/Spinner.razor.rz.scp.css */
.spinner-overlay[b-uhkn2qowbi] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: rgba(255,255,255,0.7); */
    z-index: 9999;
}

.spinner-container[b-uhkn2qowbi] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loader[b-uhkn2qowbi] {
    border: 10px solid #f3f3f3;
    border-top: 10px solid #0078d4;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin-b-uhkn2qowbi 1s linear infinite;
    margin-bottom: 18px;
}

@keyframes spin-b-uhkn2qowbi {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner-message[b-uhkn2qowbi] {
    font-size: 1.2rem;
    color: #333;
    text-align: center;
}
/* _content/Sie.WebSite.GridPortal.Web/Components/Shared/UploadProgressPanel.razor.rz.scp.css */
/* ============================================ */
/* === SUIVI DE L'AJOUT DE DOCUMENT         === */
/* ============================================ */
.upload-panel[b-u1wdemjrok] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    animation: uploadPanelIn-b-u1wdemjrok 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition: background 0.3s ease, border-color 0.3s ease;
}

    .upload-panel.is-done[b-u1wdemjrok] {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border-color: #86efac;
        border-left-color: #16a34a;
    }

    .upload-panel.is-error[b-u1wdemjrok] {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
        border-color: #fecaca;
        border-left-color: #ef4444;
    }

@keyframes uploadPanelIn-b-u1wdemjrok {
    from {
        opacity: 0;
        translate: 0 -8px;
    }
}

/* Visuel à gauche */
.upload-visual[b-u1wdemjrok] {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #ffffff;
    color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.is-done .upload-visual[b-u1wdemjrok] {
    color: #16a34a;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.18);
}

.is-error .upload-visual[b-u1wdemjrok] {
    color: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.upload-icon[b-u1wdemjrok] {
    display: inline-flex;
}

/* Envoi : la flèche monte et descend */
.upload-icon--bounce[b-u1wdemjrok] {
    animation: uploadBounce-b-u1wdemjrok 1.2s ease-in-out infinite;
}

@keyframes uploadBounce-b-u1wdemjrok {
    0%, 100% {
        translate: 0 3px;
    }

    50% {
        translate: 0 -4px;
    }
}

/* Enregistrement : anneau qui tourne autour du document */
.upload-spinner[b-u1wdemjrok] {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 3px solid #dbeafe;
    border-top-color: #3b82f6;
    animation: uploadSpin-b-u1wdemjrok 0.9s linear infinite;
}

@keyframes uploadSpin-b-u1wdemjrok {
    to {
        rotate: 360deg;
    }
}

/* Terminé : la coche apparaît */
.upload-icon--pop[b-u1wdemjrok] {
    animation: uploadPop-b-u1wdemjrok 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes uploadPop-b-u1wdemjrok {
    from {
        scale: 0;
    }

    to {
        scale: 1;
    }
}

/* Erreur : petite secousse */
.upload-icon--shake[b-u1wdemjrok] {
    animation: uploadShake-b-u1wdemjrok 0.45s ease;
}

@keyframes uploadShake-b-u1wdemjrok {
    0%, 100% { translate: 0 0; }
    20% { translate: -4px 0; }
    40% { translate: 4px 0; }
    60% { translate: -3px 0; }
    80% { translate: 3px 0; }
}

/* Texte */
.upload-body[b-u1wdemjrok] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upload-head[b-u1wdemjrok] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.upload-filename[b-u1wdemjrok] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-size[b-u1wdemjrok] {
    font-size: 12px;
    color: #64748b;
    flex-shrink: 0;
}

.upload-status[b-u1wdemjrok] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #1e40af;
}

.is-done .upload-status[b-u1wdemjrok] {
    color: #166534;
}

.is-error .upload-status[b-u1wdemjrok] {
    color: #991b1b;
}

.upload-percent[b-u1wdemjrok] {
    font-size: 14px;
    color: #1e3a8a;
    font-variant-numeric: tabular-nums;
}

.upload-hint[b-u1wdemjrok] {
    font-size: 12px;
    color: #1e40af;
    opacity: 0.85;
}

/* Barre de progression */
.upload-track[b-u1wdemjrok] {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #bfdbfe;
    overflow: hidden;
}

.is-done .upload-track[b-u1wdemjrok] {
    box-shadow: inset 0 0 0 1px #86efac;
}

.upload-fill[b-u1wdemjrok] {
    height: 100%;
    border-radius: inherit;
    background-color: #3b82f6;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.28) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0.28) 75%, transparent 75%, transparent);
    background-size: 16px 16px;
    animation: uploadStripes-b-u1wdemjrok 0.8s linear infinite;
    transition: width 0.3s ease;
}

@keyframes uploadStripes-b-u1wdemjrok {
    to {
        background-position: 16px 0;
    }
}

/* Enregistrement : durée inconnue, un segment glisse en boucle */
.upload-fill.is-indeterminate[b-u1wdemjrok] {
    width: 40% !important;
    animation: uploadStripes-b-u1wdemjrok 0.8s linear infinite, uploadSlide-b-u1wdemjrok 1.4s ease-in-out infinite;
}

@keyframes uploadSlide-b-u1wdemjrok {
    from {
        translate: -100% 0;
    }

    to {
        translate: 250% 0;
    }
}

.is-done .upload-fill[b-u1wdemjrok] {
    background-color: #16a34a;
    background-image: none;
    animation: none;
}

@media (max-width: 600px) {
    .upload-panel[b-u1wdemjrok] {
        align-items: flex-start;
        padding: 14px;
        gap: 12px;
    }

    .upload-visual[b-u1wdemjrok] {
        width: 44px;
        height: 44px;
    }
}

/* Accessibilité : animations réduites si l'utilisateur l'a demandé
   (on garde seulement l'anneau de chargement, qui indique une attente) */
@media (prefers-reduced-motion: reduce) {
    .upload-panel[b-u1wdemjrok],
    .upload-icon--bounce[b-u1wdemjrok],
    .upload-icon--pop[b-u1wdemjrok],
    .upload-icon--shake[b-u1wdemjrok],
    .upload-fill[b-u1wdemjrok] {
        animation: none;
    }

    .upload-fill.is-indeterminate[b-u1wdemjrok] {
        width: 100% !important;
        animation: none;
    }
}