/* /Components/Cards/AbonnementCards.razor.rz.scp.css */
html[b-guxzocvz01],
body[b-guxzocvz01] {
    overflow-anchor: none;
}


/* ========================================
   GRILLE
   ======================================== */

.abonnement-grid[b-guxzocvz01] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.8rem;
    width: max-content;
    min-width: 100%;
    height: 100%;
    padding: 0.3rem;
    box-sizing: border-box;
    overflow: visible;
    overflow-anchor: none;
}


/* ========================================
   CARTE
   ======================================== */

.abonnement-card[b-guxzocvz01] {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    top: 100px;
    flex: 0 0 300px;
    width: 300px;
    height: calc(100vh - 300px - 10px);
    max-height: calc(100vh - 200px - 10px);
    padding: 1.1rem 0.9rem;
    margin: 0;
    background: #fff;
    border: 2px solid #fdecec;
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    scroll-margin: 0;
}

.abonnement-card:hover[b-guxzocvz01] {
    transform: translateY(-3px);
    border-color: #fdecec;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.abonnement-card.active[b-guxzocvz01] {
    background: #fdecec;
    border: 2px solid #c92a2a;
    box-shadow: 0 6px 14px rgba(201, 42, 42, 0.15);
}


/* ========================================
   DÉJÀ PAYÉ ET NON EXPIRÉ : CARTE GRISÉE
   ======================================== */

.abonnement-card.paid[b-guxzocvz01],
.abonnement-card.paid:hover[b-guxzocvz01] {
    transform: none;
    background: #f3f4f6;
    border: 2px solid #d1d5db;
    box-shadow: none;
    filter: grayscale(1);
    opacity: 0.8;
    cursor: not-allowed;
}

.abonnement-card.paid .abonnement-badge[b-guxzocvz01] {
    background: #e5e7eb;
    color: #6b7280;
}

.abonnement-card.paid .abonnement-price[b-guxzocvz01] {
    color: #6b7280;
}


/* ========================================
   DATE D'EXPIRATION (CARTE GRISÉE)
   ======================================== */

.abonnement-expire[b-guxzocvz01] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 700;
    color: #374151;
    background: #e5e7eb;
    padding: 0.25rem 0.6rem;
    border-radius: 980px;
    flex-shrink: 0;
}

.abonnement-expire i[b-guxzocvz01] {
    color: #6b7280;
    font-size: 0.62rem;
}


/* ========================================
   PROMO
   ======================================== */

.abonnement-promo[b-guxzocvz01] {
    position: absolute;
    top: -10px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: #fff;
    background: #c92a2a;
    border-radius: 980px;
    box-shadow: 0 3px 8px rgba(201, 42, 42, 0.35);
}


/* ========================================
   BADGE, NOM, PRIX, OBJECTIF, DÉLAI
   ======================================== */

.abonnement-badge[b-guxzocvz01] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.abonnement-card.active .abonnement-badge[b-guxzocvz01] {
    background: #fff;
    color: #c92a2a;
}

.abonnement-name[b-guxzocvz01] {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    flex-shrink: 0;
}

.abonnement-price[b-guxzocvz01] {
    font-size: 1rem;
    font-weight: 800;
    color: #c92a2a;
    flex-shrink: 0;
}

.abonnement-objective[b-guxzocvz01] {
    font-size: 0.62rem;
    line-height: 1.3;
    color: #6b7280;
    flex-shrink: 0;
}

.abonnement-delai[b-guxzocvz01] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: #1d1d1f;
    background: #f5f5f7;
    padding: 0.25rem 0.6rem;
    border-radius: 980px;
    flex-shrink: 0;
}

.abonnement-delai i[b-guxzocvz01] {
    color: #c92a2a;
    font-size: 0.62rem;
}


/* ========================================
   FEATURES
   ======================================== */

.abonnement-features[b-guxzocvz01] {
    flex: 1;
    width: 100%;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0 0.3rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c92a2a #f5f5f7;
    overflow-anchor: none;
}

.abonnement-features[b-guxzocvz01]::-webkit-scrollbar {
    width: 4px;
}

.abonnement-features[b-guxzocvz01]::-webkit-scrollbar-track {
    background: #f5f5f7;
    border-radius: 10px;
}

.abonnement-features[b-guxzocvz01]::-webkit-scrollbar-thumb {
    background: #c92a2a;
    border-radius: 10px;
}

.abonnement-features li[b-guxzocvz01] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.feature-icon[b-guxzocvz01] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    flex-shrink: 0;
}

.feature-icon i[b-guxzocvz01] {
    font-size: 0.6rem;
    line-height: 1;
}

.abonnement-features li.included[b-guxzocvz01] {
    color: #1d1d1f;
}

.abonnement-features li.included .feature-icon[b-guxzocvz01] {
    background: #16a34a;
}

.abonnement-features li.included .feature-icon i[b-guxzocvz01] {
    color: #fff;
}

.abonnement-features li.excluded[b-guxzocvz01] {
    color: #9ca3af;
}

.abonnement-features li.excluded .feature-icon[b-guxzocvz01] {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.abonnement-features li.excluded .feature-icon i[b-guxzocvz01] {
    color: #9ca3af;
}

.feature-label[b-guxzocvz01] {
    flex: 1;
}


/* ========================================
   BOUTON
   ======================================== */

.abonnement-cta[b-guxzocvz01] {
    width: 100%;
    padding: 0.5rem 0.6rem;
    font-size: 0.66rem;
    font-weight: 600;
    color: #1d1d1f;
    background: #f5f5f7;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 980px;
    cursor: pointer;
    transition: 0.2s ease;
    flex-shrink: 0;
    scroll-margin: 0;
}

.abonnement-card:hover .abonnement-cta[b-guxzocvz01] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #f5b8b8;
}

.abonnement-card.active .abonnement-cta[b-guxzocvz01] {
    background: #c92a2a;
    color: #fff;
    border-color: #c92a2a;
}

.abonnement-card.paid .abonnement-cta[b-guxzocvz01],
.abonnement-card.paid:hover .abonnement-cta[b-guxzocvz01] {
    background: #e5e7eb;
    color: #6b7280;
    border-color: #d1d5db;
    cursor: not-allowed;
}


/* ========================================
   BANDEAU STATISTIQUE FIXE — BAS D'ÉCRAN
   ======================================== */

.stats-ticker-bottom[b-guxzocvz01] {
    position: fixed;
    bottom: 0;
    left: 250px;
    right: 70px;
    height: 52px;
    overflow: hidden;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(0, 0, 0, .06);
    z-index: 800;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.stats-ticker-bottom-track[b-guxzocvz01] {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    gap: .85rem;
    padding: 0 1rem;
    animation: ticker-scroll-bottom-b-guxzocvz01 38s linear infinite;
}

.stats-ticker-bottom:hover .stats-ticker-bottom-track[b-guxzocvz01] {
    animation-play-state: paused;
}

@keyframes ticker-scroll-bottom-b-guxzocvz01 {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.stats-ticker-bottom .ticker-item[b-guxzocvz01] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem;
    border-radius: 10px;
    background: var(--accent-bg);
    white-space: nowrap;
}

.stats-ticker-bottom .ticker-item i[b-guxzocvz01] {
    font-size: .8rem;
    color: var(--accent);
}

.stats-ticker-bottom .ticker-label[b-guxzocvz01] {
    font-size: .64rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.stats-ticker-bottom .ticker-value[b-guxzocvz01] {
    font-size: .9rem;
    font-weight: 800;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
}

.stats-ticker-bottom .ticker-trend[b-guxzocvz01] {
    display: flex;
    align-items: center;
    gap: .15rem;
    font-size: .6rem;
    font-weight: 700;
}

.stats-ticker-bottom .ticker-trend--up[b-guxzocvz01]   { color: #1a7f37; }
.stats-ticker-bottom .ticker-trend--down[b-guxzocvz01] { color: #c92a2a; }
.stats-ticker-bottom .ticker-trend--flat[b-guxzocvz01] { color: #9ca3af; }

.stats-ticker-bottom .stat-card--red[b-guxzocvz01]    { --accent: #c92a2a; --accent-bg: #fdecec; }
.stats-ticker-bottom .stat-card--blue[b-guxzocvz01]   { --accent: #2563eb; --accent-bg: #eaf2fe; }
.stats-ticker-bottom .stat-card--green[b-guxzocvz01]  { --accent: #1a7f37; --accent-bg: #e8f7ee; }
.stats-ticker-bottom .stat-card--purple[b-guxzocvz01] { --accent: #7c3aed; --accent-bg: #f2ecfb; }
.stats-ticker-bottom .stat-card--amber[b-guxzocvz01]  { --accent: #b45309; --accent-bg: #fef6e7; }
.stats-ticker-bottom .stat-card--teal[b-guxzocvz01]   { --accent: #0f766e; --accent-bg: #e6f7f5; }


/* ========================================
   MODALE — OVERLAY (popover : top layer)
   ======================================== */

.modal-overlay[b-guxzocvz01] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 1rem;
    box-sizing: border-box;
    overflow: auto;
    color: inherit;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-overlay:not(:popover-open)[b-guxzocvz01] {
    display: none;
}

.modal-overlay:popover-open[b-guxzocvz01] {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ========================================
   MODALE — BOÎTE
   --pad : marge intérieure (l'en-tête fixe s'étend jusqu'aux bords)
   --head-h : hauteur estimée de l'en-tête (pour la barre fixe en dessous)
   ======================================== */

.modal-box[b-guxzocvz01] {
    --pad: 1.1rem;
    --head-h: 3.2rem;

    position: relative;
    width: 100%;
    max-width: 380px;
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    color: #1d1d1f;
    border-radius: 16px;
    padding: 0 var(--pad) .9rem;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    font-size: .66rem;
}

.modal-box-form[b-guxzocvz01] {
    max-width: 440px;
}

.modal-box-checkout[b-guxzocvz01] {
    max-width: 400px;
}

/* Pas de dégradé en haut et en bas de la fenêtre */
html body .modal-box[b-guxzocvz01],
html body .modal-box[data-fy][b-guxzocvz01],
html body .modal-box[data-fx][b-guxzocvz01] {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}


/* ========================================
   MODALE — EN-TÊTE FIXE
   ======================================== */

.modal-box .modal-close[b-guxzocvz01] {
    position: sticky;
    top: .6rem;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 0 -26px auto;          /* se superpose à l'en-tête, à droite */
    border: none;
    border-radius: 50%;
    background: #f5f5f7;
    color: #1d1d1f;
    cursor: pointer;
    font-size: 0.7rem;
}

.modal-close:hover[b-guxzocvz01] {
    background: #fdecec;
    color: #c92a2a;
}

.modal-close:disabled[b-guxzocvz01] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-box .modal-header[b-guxzocvz01] {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 calc(var(--pad) * -1) .2rem;
    padding: 1.1rem calc(var(--pad) + 1.4rem) .4rem var(--pad);
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.modal-header h3[b-guxzocvz01] {
    margin: 0;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.modal-subtitle[b-guxzocvz01] {
    margin: .15rem 0 0;
    font-size: .66rem;
    color: #6b7280;
}


/* ========================================
   MODALE — SECTIONS
   ======================================== */

.modal-sec[b-guxzocvz01] {
    margin-top: .6rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.modal-sec-title[b-guxzocvz01] {
    margin: 0 0 .35rem;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #c92a2a;
}

.modal-plan-row[b-guxzocvz01] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
}

.plan-name[b-guxzocvz01] {
    font-size: .78rem;
    font-weight: 700;
    color: #1d1d1f;
}

.plan-price[b-guxzocvz01] {
    font-size: .72rem;
    font-weight: 700;
    color: #c92a2a;
}

.modal-plan-obj[b-guxzocvz01] {
    margin: .15rem 0 .35rem;
    font-size: .6rem;
    line-height: 1.35;
    color: #6b7280;
}

.modal-plan-delai[b-guxzocvz01] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .12rem .55rem;
    border-radius: 980px;
    background: #f5f5f7;
    font-size: .58rem;
    font-weight: 600;
}

.modal-plan-delai i[b-guxzocvz01] {
    color: #c92a2a;
    font-size: .58rem;
}

.modal-renouv[b-guxzocvz01] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .45rem;
    font-size: .62rem;
    font-weight: 600;
    color: #1d1d1f;
    cursor: pointer;
}

.modal-renouv input[b-guxzocvz01] {
    margin: 0;
    accent-color: #c92a2a;
    cursor: pointer;
}


/* ========================================
   MODALE — CHAMPS
   ======================================== */

.modal-fields-grid[b-guxzocvz01] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem .6rem;
}

.modal-field[b-guxzocvz01] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.modal-fields-grid .modal-field:first-child[b-guxzocvz01] {
    grid-column: 1 / -1;
}

.modal-field label[b-guxzocvz01] {
    font-size: .58rem;
    font-weight: 600;
    color: #1d1d1f;
}

.modal-opt[b-guxzocvz01] {
    font-weight: 400;
    color: #9ca3af;
}

.modal-field input[b-guxzocvz01] {
    width: 100%;
    height: 28px;
    padding: 0 .55rem;
    box-sizing: border-box;
    font: inherit;
    font-size: .66rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s ease;
}

.modal-field input:focus[b-guxzocvz01] {
    border-color: #c92a2a;
}

.modal-field input:disabled[b-guxzocvz01] {
    background: #f5f5f7;
    opacity: 0.7;
}


/* ========================================
   MODALE — MESSAGES
   ======================================== */

.modal-error[b-guxzocvz01] {
    margin-top: .55rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: #c92a2a;
    background: #fdecec;
    border-radius: 8px;
}

.modal-validation[b-guxzocvz01] {
    margin-top: .4rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: #c92a2a;
}


/* ========================================
   MODALE — TOTAL, PAIEMENT, ANNULATION
   ======================================== */

.modal-summary[b-guxzocvz01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.65rem;
    margin-bottom: .5rem;
    background: #f5f5f7;
    border-radius: 8px;
    font-size: 0.66rem;
}

.modal-summary strong[b-guxzocvz01] {
    color: #c92a2a;
    font-size: .76rem;
}

.modal-confirm[b-guxzocvz01] {
    width: 100%;
    height: 30px;
    padding: 0 .7rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: #c92a2a;
    border: none;
    border-radius: 980px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.modal-confirm:hover:not(:disabled)[b-guxzocvz01] {
    background: #a52323;
}

.modal-confirm:disabled[b-guxzocvz01] {
    opacity: 0.6;
    cursor: not-allowed;
}

.modal-cancel[b-guxzocvz01] {
    display: block;
    margin: .4rem auto 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .62rem;
    color: #6b7280;
    cursor: pointer;
}

.modal-cancel:hover:not(:disabled)[b-guxzocvz01] {
    color: #c92a2a;
    text-decoration: underline;
}

.modal-cancel:disabled[b-guxzocvz01] {
    opacity: .5;
    cursor: not-allowed;
}


/* ========================================
   MODALE — PAIEMENT INTÉGRÉ (iframe Stripe)
   ======================================== */

.embedded-checkout-container[b-guxzocvz01] {
    min-height: 260px;
    zoom: .78;
}

/* Barre « Paiement sécurisé / ← Modifier » : reste sous l'en-tête */
.modal-box .modal-sec-bar[b-guxzocvz01] {
    position: sticky;
    top: var(--head-h);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 calc(var(--pad) * -1) .35rem;
    padding: .3rem var(--pad);
    background: #fff;
}

.modal-sec-bar .modal-sec-title[b-guxzocvz01] { margin: 0; }

.modal-back[b-guxzocvz01] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .58rem;
    font-weight: 600;
    color: #c92a2a;
    cursor: pointer;
}

.modal-back:hover:not(:disabled)[b-guxzocvz01] { text-decoration: underline; }
.modal-back:disabled[b-guxzocvz01] { opacity: .5; cursor: not-allowed; }


/* ========================================
   BOUTONS ADMINISTRATEUR ET PASTILLE
   ======================================== */

.abonnement-edit-actions[b-guxzocvz01] {
    position: absolute;
    top: .45rem;
    right: .5rem;
    display: flex;
    gap: .25rem;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 2;
}

.abonnement-card:hover .abonnement-edit-actions[b-guxzocvz01],
.abonnement-edit-actions:focus-within[b-guxzocvz01] { opacity: 1; }

@media (hover: none) { .abonnement-edit-actions[b-guxzocvz01] { opacity: .55; } }

.abonnement-edit-btn[b-guxzocvz01] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #c92a2a;
    color: #fff;
    font-size: .62rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    cursor: pointer;
}

.abonnement-edit-btn:hover[b-guxzocvz01] { background: #a52323; color: #fff; }

.feature-tag[b-guxzocvz01] {
    display: inline-block;
    margin-left: .3rem;
    padding: .02rem .4rem;
    border-radius: 980px;
    background: #fdecec;
    color: #c92a2a;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}


/* ========================================
   TABLETTE
   ======================================== */

@media (max-width: 900px) {

    .abonnement-grid[b-guxzocvz01] {
        min-width: 100%;
        height: 100%;
        margin-top: 70px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .abonnement-card[b-guxzocvz01] {
        flex: 0 0 210px;
        width: 210px;
        height: calc(100vh - 70px - 10px);
        max-height: calc(100vh - 70px - 10px);
    }
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 480px) {

    .abonnement-card[b-guxzocvz01] {
        flex: 0 0 180px;
        width: 180px;
        height: calc(100vh - 60px);
        max-height: calc(100vh - 60px);
        padding: 0.9rem 0.6rem;
    }

    .abonnement-features li[b-guxzocvz01] {
        font-size: 0.56rem;
    }

    .stats-ticker-bottom[b-guxzocvz01] {
        left: 0;
        right: 0;
    }
}

@media (max-width: 560px) {

    .modal-box-form[b-guxzocvz01],
    .modal-box-checkout[b-guxzocvz01] {
        max-width: 380px;
    }

    .modal-fields-grid[b-guxzocvz01] {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   MOBILE + PAYSAGE COMPACT : 2 cartes visibles, glissement
   carte par carte. La hauteur des cartes suit la carte la plus
   longue (le contenu), jamais la hauteur de la page.
   (doit rester après tous les blocs ci-dessus)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* ---------- Grille : hauteur = carte la plus longue ---------- */
    html body .abonnement-grid[b-guxzocvz01] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;          /* toutes les cartes = la plus haute */
        width: calc(100% - 20px) !important;
        min-width: 0 !important;
        max-width: calc(100% - 20px) !important;
        height: auto !important;
        max-height: none !important;
        margin: 70px 10px 0 !important;                /* plus de 70px sous « Plans » */
        padding: 14px 0 .6rem !important;         /* 14px : place pour la pastille promo */
        gap: .5rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scroll-padding: 0;
        scrollbar-width: none;
    }

    .abonnement-grid[b-guxzocvz01]::-webkit-scrollbar { display: none; }

    /* ---------- Cartes : exactement 2 par écran ---------- */
    html body .abonnement-card[b-guxzocvz01] {
        flex: 0 0 calc((100% - .5rem) / 2) !important;
        width: calc((100% - .5rem) / 2) !important;
        min-width: 0 !important;
        top: 0 !important;
        margin: 0 !important;
        height: auto !important;                  /* annule calc(100vh - ...) */
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        gap: .3rem;
        padding: .6rem .4rem;
        border-radius: 10px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .abonnement-card:hover[b-guxzocvz01] { transform: none; }

    .abonnement-badge[b-guxzocvz01] { width: 28px; height: 28px; min-height: 28px; font-size: .8rem; }
    .abonnement-name[b-guxzocvz01] { font-size: .7rem; }
    .abonnement-price[b-guxzocvz01] { font-size: .72rem; }
    .abonnement-objective[b-guxzocvz01] { font-size: .5rem; line-height: 1.25; }

    .abonnement-delai[b-guxzocvz01],
    .abonnement-expire[b-guxzocvz01] { font-size: .48rem; padding: .15rem .45rem; }
    .abonnement-delai i[b-guxzocvz01],
    .abonnement-expire i[b-guxzocvz01] { font-size: .5rem; }

    .abonnement-promo[b-guxzocvz01] { top: -8px; right: 8px; font-size: .46rem; padding: .15rem .4rem; }

    /* ---------- Liste : jamais coupée, ni défilante ---------- */
    html body .abonnement-features[b-guxzocvz01] {
        flex: 1 0 auto !important;                /* occupe l'espace libre, ne rétrécit pas */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0;
        gap: .25rem;
        -webkit-mask-image: none !important;
        mask-image: none !important;              /* retire l'estompage en bas */
    }

    .abonnement-features li[b-guxzocvz01] { font-size: .48rem; gap: .3rem; line-height: 1.25; }
    .feature-icon[b-guxzocvz01] { width: 13px; height: 13px; min-width: 13px; }
    .feature-icon i[b-guxzocvz01] { font-size: .44rem; }
    .feature-tag[b-guxzocvz01] { font-size: .4rem; padding: 0 .3rem; margin-left: .2rem; }

    /* ---------- Bouton : toujours en bas de chaque carte ---------- */
    html body .abonnement-cta[b-guxzocvz01] {
        margin-top: auto;
        padding: .3rem .4rem;
        font-size: .55rem;
    }

    /* ---------- Boutons administrateur ---------- */
    .abonnement-edit-actions[b-guxzocvz01] { top: .3rem; right: .3rem; gap: .15rem; }
    .abonnement-edit-btn[b-guxzocvz01] { width: 16px; height: 16px; font-size: .45rem; }

    /* ---------- Fenêtre (plan, informations, paiement) ---------- */
    .modal-overlay[b-guxzocvz01] { padding: .5rem; }

    .modal-box[b-guxzocvz01],
    .modal-box-form[b-guxzocvz01],
    .modal-box-checkout[b-guxzocvz01] {
        --pad: .65rem;
        --head-h: 2.8rem;
        max-width: 300px;
        height: auto;
        max-height: 86dvh;
        border-radius: 12px;
        font-size: .52rem;
    }

    .modal-box .modal-close[b-guxzocvz01] { width: 20px; height: 20px; font-size: .5rem; top: .45rem; margin-bottom: -20px; }

    .modal-box .modal-header[b-guxzocvz01] { padding-top: .6rem; padding-bottom: .4rem; }
    .modal-header h3[b-guxzocvz01] { font-size: .7rem; }
    .modal-subtitle[b-guxzocvz01] { font-size: .52rem; }

    .modal-sec[b-guxzocvz01] { margin-top: .4rem; padding-top: .35rem; }
    .modal-sec-title[b-guxzocvz01] { font-size: .45rem; margin-bottom: .2rem; }

    .plan-name[b-guxzocvz01] { font-size: .62rem; }
    .plan-price[b-guxzocvz01] { font-size: .58rem; }
    .modal-plan-obj[b-guxzocvz01] { font-size: .5rem; margin: .1rem 0 .25rem; }
    .modal-plan-delai[b-guxzocvz01] { font-size: .47rem; padding: .08rem .4rem; }
    .modal-plan-delai i[b-guxzocvz01] { font-size: .47rem; }

    .modal-renouv[b-guxzocvz01] { font-size: .5rem; gap: .3rem; margin-top: .3rem; }
    .modal-renouv input[b-guxzocvz01] { width: 10px; height: 10px; }

    .modal-fields-grid[b-guxzocvz01] { grid-template-columns: 1fr; gap: .3rem; }
    .modal-field label[b-guxzocvz01] { font-size: .48rem; }
    .modal-field input[b-guxzocvz01] { height: 22px; font-size: .52rem; padding: 0 .4rem; border-radius: 6px; }

    .modal-error[b-guxzocvz01] { font-size: .5rem; padding: .25rem .4rem; margin-top: .35rem; }
    .modal-validation[b-guxzocvz01] { font-size: .48rem; }

    .modal-summary[b-guxzocvz01] { font-size: .52rem; padding: .25rem .45rem; margin-bottom: .35rem; }
    .modal-summary strong[b-guxzocvz01] { font-size: .6rem; }

    .modal-confirm[b-guxzocvz01] { height: 24px; font-size: .55rem; padding: 0 .5rem; }
    .modal-cancel[b-guxzocvz01] { font-size: .5rem; margin-top: .3rem; }
    .modal-back[b-guxzocvz01] { font-size: .47rem; }

    /* Formulaire Stripe réduit (zoom ignoré sur iOS : on utilise scale) */
    .embedded-checkout-container[b-guxzocvz01] {
        zoom: 1;
        width: 166.7%;               /* 100 / 0.60 */
        max-width: none;
        min-height: 0;
        margin: 0 0 -110% 0;         /* à ajuster : plus négatif = moins de vide en bas */
        transform: scale(.60);
        transform-origin: top left;
    }
}


/* ---------- Paysage compact : 3 cartes visibles ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    html body .abonnement-card[b-guxzocvz01] {
        flex: 0 0 calc((100% - 1rem) / 3) !important;
        width: calc((100% - 1rem) / 3) !important;
    }

    .modal-box[b-guxzocvz01],
    .modal-box-form[b-guxzocvz01],
    .modal-box-checkout[b-guxzocvz01] { max-width: 340px; max-height: 92vh; }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Tout parent de la grille : hauteur libre, rien n'est coupé */
    html body :has(> .abonnement-grid)[b-guxzocvz01],
    html body :has(> * > .abonnement-grid)[b-guxzocvz01] {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: visible !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}
/* /Components/Cards/AgentsCards.razor.rz.scp.css */
.agents-scroll[b-5i76favgs8]{
    display:flex;
    gap:1rem;
    padding:.4rem .2rem .6rem;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.agents-scroll[b-5i76favgs8]::-webkit-scrollbar{
    display:none;
}

.agents-scroll.dragging[b-5i76favgs8]{
    cursor:grabbing;
    user-select:none;
}

.agents-track[b-5i76favgs8]{
    display:flex;
    gap:1rem;
    width:max-content;
}

.agent-card[b-5i76favgs8]{
    position:relative;
    flex:0 0 250px;
    height:90px;
    display:flex;
    gap:.05rem;
    padding:.3rem;
    background:#fff;
    border:1px solid #eee;
    border-radius:8px;
    cursor:pointer;
    transition:.2s;
}

.agent-card:hover[b-5i76favgs8]{
    transform:translateY(-2px);
    border-color:#fdecec;
    box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.agent-card.selected[b-5i76favgs8]{
    background:#fdecec;
    border:2px solid #fdecec;
    box-shadow:0 4px 10px #e5e7eb;
}

.agent-card.selected .agent-photo[b-5i76favgs8]{
    border-color:#ff0000;
    transform:scale(1.04);
}

.agent-profile[b-5i76favgs8]{
    width:26%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.agent-photo[b-5i76favgs8]{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #c92a2a;
    transition:.2s;
}

.agent-name[b-5i76favgs8]{
    margin-top:.35rem;
    font-size:.65rem;
    font-weight:700;
    line-height:1;
}

.agent-role[b-5i76favgs8]{
    font-size:.5rem;
    color:#6b7280;
    line-height:1;
    margin-top:.2rem;
}

.agent-performance[b-5i76favgs8]{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;
    padding-top:1.5rem;
    padding-left:1.3rem;
    padding-right:1rem;
}

.agent-initial[b-5i76favgs8]{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fdecec;
    color:#c92a2a;
    font-weight:800;
    font-size:.9rem;
}

.avg-badge[b-5i76favgs8]{
    position:absolute;
    top:3px;
    right:3px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:12px;
    padding:0 .4rem 0 .6rem;
    border-radius:16px;
    color:#fff;
    font-size:.62rem;
    font-weight:800;
    line-height:1;
    z-index:2;
    clip-path:polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%);
}

.badge-excellent[b-5i76favgs8]{ background:#16a34a; }
.badge-bon[b-5i76favgs8]{ background:#2563eb; }
.badge-moyen[b-5i76favgs8]{ background:#f59e0b; }
.badge-faible[b-5i76favgs8]{ background:#c92a2a; }

.performance-row[b-5i76favgs8]{
    display:flex;
    align-items:center;
    gap:.4rem;
}

.performance-row i[b-5i76favgs8]{
    width:7px;
    font-size:.6rem;
    color:#a1a1a1;
}

.performance-row span[b-5i76favgs8]{
    width:22px;
    font-size:.5rem;
    font-weight:700;
    text-align:right;
}

.progress[b-5i76favgs8]{
    flex:1;
    height:4px;
    background:#fff;
    border-radius:999px;
    overflow:hidden;
}

.progress-fill[b-5i76favgs8]{
    height:100%;
    background:#c92a2a;
    font-size:.6rem;
}

.progress-fill.blue[b-5i76favgs8]{ background:#2563eb; }
.progress-fill.green[b-5i76favgs8]{ background:#16a34a; }
.progress-fill.orange[b-5i76favgs8]{ background:#f59e0b; }

/* ==========================
   Skeleton (chargement)
========================== */

.agent-card-skeleton[b-5i76favgs8]{
    cursor:default;
    pointer-events:none;
}

.skeleton[b-5i76favgs8]{
    position:relative;
    display:block;
    background:#e5e7eb;
    border-radius:6px;
    overflow:hidden;
}

.skeleton[b-5i76favgs8]::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.6) 50%,
        rgba(255,255,255,0) 100%
    );
    animation:skeleton-shimmer-b-5i76favgs8 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-5i76favgs8{
    100%{ transform:translateX(100%); }
}

.skeleton-circle[b-5i76favgs8]{ border-radius:50%; }

.skeleton-line[b-5i76favgs8]{
    height:8px;
    margin-top:.3rem;
}

.skeleton-line--name[b-5i76favgs8]{ width:60%; }
.skeleton-line--role[b-5i76favgs8]{ width:45%; }

.skeleton-line--pct[b-5i76favgs8]{
    width:18px;
    height:6px;
}

.skeleton-icon[b-5i76favgs8]{
    width:7px;
    height:7px;
    border-radius:2px;
}

.skeleton-progress[b-5i76favgs8]{
    width:100%;
    height:100%;
    border-radius:999px;
}
/* /Components/Cards/AgentServiceCards.razor.rz.scp.css */
/* ==========================================
   Défilement horizontal
========================================== */

.agentService-scroll[b-68f5rckymo] {
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    padding: .2rem;
    scrollbar-width: none;
}

.agentService-scroll[b-68f5rckymo]::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   Carte
========================================== */

.agentService-card[b-68f5rckymo] {
    position: relative;               /* repère du cercle du nombre de services */
    flex: 0 0 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .3rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: .2s;
}

.agentService-card:hover[b-68f5rckymo] {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px #e5e7eb;
}

.agentService-card.active[b-68f5rckymo] {
    background: #fdecec;
    border-color: #fdecec;
}


/* ==========================================
   Image
========================================== */

.agentService-image[b-68f5rckymo] {
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fdecec;
    flex-shrink: 0;
}

.agentService-image img[b-68f5rckymo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.active .agentService-image[b-68f5rckymo] {
    border-color: #c92a2a;
}

/* Lettre de secours si l'image ne charge pas */
.agentService-avatar-letter[b-68f5rckymo] {
    position: absolute;
    top: 0;
    left: 0;

    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: #fdecec;
    color: #c92a2a;
    font-size: 1.2rem;
    font-weight: 700;
}


/* ==========================================
   Texte
   RENOMMÉ : ".agentService-content" entrait en collision avec le
   conteneur principal de la page (position: fixed).
========================================== */

.agentService-card-content[b-68f5rckymo] {
    position: relative;               /* repère de l'icône de message */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.agentService-name[b-68f5rckymo] {
    font-size: .77rem;
    font-weight: 700;
    color: #111827;
}

.agentService-info[b-68f5rckymo] {
    font-size: .55rem;
    font-weight: 600;
    color: #c92a2a;
}

.agentService-objective[b-68f5rckymo] {
    font-size: .5rem;
    color: #6b7280;
}


/* ==========================================
   Cercle du nombre de services
   (apparaît au survol de la carte, en haut à droite)
========================================== */

.agentService-nb-services[b-68f5rckymo] {
    position: absolute;
    top: .25rem;
    right: .25rem;

    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #c92a2a;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;

    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 5;
}

.agentService-card:hover .agentService-nb-services[b-68f5rckymo] {
    opacity: 1;
    transform: scale(1);
}


/* ==========================================
   Icône de message
   (apparaît seulement au survol du nom ou du type de compte)
========================================== */

.agentService-message-btn[b-68f5rckymo] {
    position: absolute;
    bottom: 0;
    right: 0;

    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    line-height: 1;
    cursor: pointer;

    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease, color .15s ease;
    z-index: 5;
}

.agentService-card-content:hover .agentService-message-btn[b-68f5rckymo] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.agentService-message-btn:hover[b-68f5rckymo] {
    background: #c92a2a;
    color: #fff;
}


/* ==========================================
   Skeleton Shimmer
========================================== */

.skeleton-card[b-68f5rckymo] {
    cursor: default;
    pointer-events: none;
}

.skeleton[b-68f5rckymo] {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}

.skeleton[b-68f5rckymo]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translateX(-100%);
    animation: shine-b-68f5rckymo 1.3s infinite;
}

@keyframes shine-b-68f5rckymo {
    100% {
        transform: translateX(100%);
    }
}

.agentService-image.skeleton[b-68f5rckymo] {
    border: 0;
}

.text[b-68f5rckymo] {
    height: 10px;
    border-radius: 8px;
    margin: auto;
}

.name[b-68f5rckymo] {
    width: 90%;
    height: 13px;
}

.info[b-68f5rckymo] {
    width: 70%;
}

.country[b-68f5rckymo] {
    width: 55%;
}

/* Décalage de la lumière d'une carte à l'autre */
.skeleton-card:nth-child(2n) .skeleton[b-68f5rckymo]::after {
    animation-delay: .2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-68f5rckymo]::after {
    animation-delay: .4s;
}

.skeleton-card:nth-child(5n) .skeleton[b-68f5rckymo]::after {
    animation-delay: .6s;
}


/* ==========================================
   Messages
========================================== */

.agentService-error[b-68f5rckymo] {
    padding: .9rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #c92a2a;
    font-size: .75rem;
}

.agentService-empty[b-68f5rckymo] {
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {
    .agentService-card[b-68f5rckymo] {
        flex-basis: 150px;
        padding: .6rem;
    }

    .agentService-image[b-68f5rckymo] {
        width: 60px;
        height: 60px;
    }
}


/* ==========================================
   MOBILE : cartes compactes (bande de 84 px)
========================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .agentService-scroll[b-68f5rckymo] {
        gap: .4rem;
        padding: .15rem .2rem;
        height: 100%;
        align-items: center;
    }

    .agentService-card[b-68f5rckymo] {
        flex: 0 0 84px;
        height: 70px;
        gap: .15rem;
        padding: .25rem;
        border-radius: 10px;
        justify-content: center;
    }

    .agentService-image[b-68f5rckymo] {
        width: 28px;
        height: 28px;
        border-width: 2px;
    }

    .agentService-avatar-letter[b-68f5rckymo] { font-size: .7rem; }

    .agentService-name[b-68f5rckymo] {
        font-size: .55rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .agentService-info[b-68f5rckymo] {
        font-size: .42rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .agentService-nb-services[b-68f5rckymo] { width: .9rem; height: .9rem; font-size: .45rem; }
    .agentService-message-btn[b-68f5rckymo] { width: .9rem; height: .9rem; font-size: .5rem; }

    /* Skeleton à la taille compacte */
    .agentService-card-content .text[b-68f5rckymo] { height: 6px; }
    .agentService-card-content .name[b-68f5rckymo] { height: 8px; }
}

@media (max-height: 500px) and (orientation: landscape) {

    .agentService-card[b-68f5rckymo] {
        flex: 0 0 64px;
        height: 44px;
        padding: .15rem;
    }

    .agentService-image[b-68f5rckymo] {
        width: 18px;
        height: 18px;
    }

    .agentService-name[b-68f5rckymo] { font-size: .4rem; }
    .agentService-info[b-68f5rckymo] { display: none; }
}
/* /Components/Cards/AlertesCards.razor.rz.scp.css */
/* ==========================================
   Défilement horizontal
========================================== */

.alertes-scroll[b-jjggv5f9yu]{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
gap:.7rem;

overflow-x:auto;
overflow-y:hidden;

padding:.2rem;

scrollbar-width:none;
-ms-overflow-style:none;
}

.alertes-scroll[b-jjggv5f9yu]::-webkit-scrollbar{
display:none;
}

/* ==========================================
   Carte
========================================== */

.alertes-card[b-jjggv5f9yu]{
flex:0 0 125px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
height:100%;
gap:.2rem;

padding:.2rem;

background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;

cursor:pointer;
transition:.2s;

text-align:center;
}

.alertes-card:hover[b-jjggv5f9yu]{
transform:translateY(-3px);
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.alertes-card.active[b-jjggv5f9yu]{
background:#fdecec;
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

/* ==========================================
   Image
========================================== */

.alertes-image[b-jjggv5f9yu]{
width:50px;
height:50px;
position:relative;

border-radius:50%;
overflow:hidden;

border:3px solid #fdecec;
background:#fff;

flex-shrink:0;
}

.alertes-image img[b-jjggv5f9yu]{
width:100%;
height:100%;
object-fit:cover;
}

.alertes-card.active .alertes-image[b-jjggv5f9yu]{
border-color:#c92a2a;
}

/* ==========================================
   Avatar lettre de secours
========================================== */

.alertes-avatar-letter[b-jjggv5f9yu]{
position:absolute;
top:0;
left:0;

display:none;
width:100%;
height:100%;
align-items:center;
justify-content:center;
background:#fdecec;
color:#c92a2a;
font-size:1.2rem;
font-weight:700;
}

/* ==========================================
   Contenu
========================================== */

.alertes-content[b-jjggv5f9yu]{
display:flex;
flex-direction:column;
gap:.2rem;

width:100%;
}

.alertes-name[b-jjggv5f9yu]{
font-size:.75rem;
font-weight:700;
color:#111827;
}

.alertes-info[b-jjggv5f9yu]{
font-size:.6rem;
font-weight:600;
color:#c92a2a;
}

.alertes-objective[b-jjggv5f9yu]{
font-size:.5rem;
color:#6b7280;
line-height:1.3;
}

/* ==========================================
   Skeleton Shimmer
========================================== */

.skeleton-card[b-jjggv5f9yu]{
cursor:default;
pointer-events:none;
}

.skeleton[b-jjggv5f9yu]{
position:relative;
overflow:hidden;
background:#e5e7eb;
}

.skeleton[b-jjggv5f9yu]::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
transform:translateX(-100%);
animation:alertes-shine-b-jjggv5f9yu 1.3s infinite;
}

@keyframes alertes-shine-b-jjggv5f9yu{
100%{ transform:translateX(100%); }
}

.alertes-image.skeleton[b-jjggv5f9yu]{
border:0;
}

.text[b-jjggv5f9yu]{
height:10px;
border-radius:8px;
margin:auto;
}

.name[b-jjggv5f9yu]{
width:90%;
height:13px;
}

.info[b-jjggv5f9yu]{
width:70%;
}

.skeleton-card:nth-child(2n) .skeleton[b-jjggv5f9yu]::after{
animation-delay:.2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-jjggv5f9yu]::after{
animation-delay:.4s;
}

/* ==========================================
   Messages
========================================== */

.alertes-error[b-jjggv5f9yu]{
padding:.9rem;
background:#fef2f2;
border:1px solid #fecaca;
border-radius:10px;
color:#c92a2a;
font-size:.75rem;
}

.empty-alertes[b-jjggv5f9yu]{
padding:1.5rem;
text-align:center;
color:#9ca3af;
}

/* ==========================================
   Mobile
========================================== */

@media(max-width:768px){

.alertes-card[b-jjggv5f9yu]{
flex:0 0 150px;
padding:.6rem;
    }

.alertes-image[b-jjggv5f9yu]{
width:60px;
height:60px;
    }

.alertes-name[b-jjggv5f9yu]{
font-size:.75rem;
    }

.alertes-info[b-jjggv5f9yu]{
font-size:.65rem;
    }

.alertes-objective[b-jjggv5f9yu]{
font-size:.60rem;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .alertes-scroll[b-jjggv5f9yu] { gap: .4rem; padding: .1rem; height: 100%; align-items: center; }
    .alertes-scroll .alertes-card[b-jjggv5f9yu] { flex: 0 0 84px; height: 70px; padding: .2rem; gap: .1rem; border-radius: 10px; justify-content: center; }
    .alertes-scroll .alertes-image[b-jjggv5f9yu] { width: 28px; height: 28px; border-width: 2px; }
    .alertes-scroll .alertes-avatar-letter[b-jjggv5f9yu] { font-size: .7rem; }
    .alertes-scroll .alertes-name[b-jjggv5f9yu] { font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .alertes-scroll .alertes-info[b-jjggv5f9yu] { font-size: .42rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .alertes-scroll .alertes-objective[b-jjggv5f9yu] { display: none; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .alertes-scroll .alertes-card[b-jjggv5f9yu] { flex: 0 0 64px; height: 44px; }
    .alertes-scroll .alertes-image[b-jjggv5f9yu] { width: 18px; height: 18px; }
    .alertes-scroll .alertes-name[b-jjggv5f9yu] { font-size: .4rem; }
    .alertes-scroll .alertes-info[b-jjggv5f9yu] { display: none; }
}
/* /Components/Cards/CalendarStrip.razor.rz.scp.css */
.calendarStrip[b-9rnivsulxv] {
    display: flex;
    align-items: center;
    gap: .5rem;

    width: 100%;
    height: 100%;
}

.calendarStrip-arrow[b-9rnivsulxv] {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    background: #f3f4f6;
    border: none;
    border-radius: 50%;

    color: #6b7280;
    font-size: .9rem;

    cursor: pointer;
    transition: .2s;
}

.calendarStrip-arrow:hover[b-9rnivsulxv] {
    background: #fdecec;
    color: #c92a2a;
}

.calendarStrip-track[b-9rnivsulxv] {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* =========================
   Cartes des jours
   (les marges intérieures, compensées par des marges négatives, laissent la place
   au halo d'échéance de la carte du jour : sans elles, le défilement les rognerait)
========================= */

.calendarStrip-cards[b-9rnivsulxv] {
    display: flex;
    gap: .5rem;

    padding: 22px 14px;
    margin: -22px 0;

    overflow-x: auto;
    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.calendarStrip-cards[b-9rnivsulxv]::-webkit-scrollbar {
    display: none;
}

.calendarStrip-card[b-9rnivsulxv] {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;

    width: 48px;
    height: 56px;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    cursor: pointer;
    transition: .2s;
    position: relative;
}

.calendarStrip-card:hover[b-9rnivsulxv] {
    background: #fdecec;
    border-color: #fdecec;
}

.calendarStrip-dayName[b-9rnivsulxv] {
    font-size: .6rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.calendarStrip-dayNumber[b-9rnivsulxv] {
    font-size: .95rem;
    font-weight: 700;
    color: #111827;
}


/* =========================
   Bulle : le <span> ne sert que de source du texte.
   L'affichage est fait par calendarStripHelpers.initTips, dans une bulle unique
   ajoutée à <body> : ainsi aucun parent (overflow, z-index, bandeau fixe)
   ne peut la cacher ou la passer sous un autre élément.
========================= */

.calendarStrip-tip[b-9rnivsulxv] {
    display: none;
}


/* =========================
   Carte sélectionnée
========================= */

.calendarStrip-card.active[b-9rnivsulxv] {
    background: #f8d4d4;
    border-color: #eba5a5;
    outline: 2px solid #e57373;
    outline-offset: -2px;
}

.calendarStrip-card.active .calendarStrip-dayName[b-9rnivsulxv],
.calendarStrip-card.active .calendarStrip-dayNumber[b-9rnivsulxv] {
    color: #c92a2a;
}


/* =========================
   Aujourd'hui : carte neutre (fond clair), repérée par son petit point rouge ;
   la couleur vient uniquement de l'éclat d'échéance ci-dessous
========================= */

.calendarStrip-card.today[b-9rnivsulxv] {
    background: #fff;
    border-color: #d1d5db;
}

.calendarStrip-card.today .calendarStrip-dayName[b-9rnivsulxv] {
    color: #6b7280;
}

.calendarStrip-card.today .calendarStrip-dayNumber[b-9rnivsulxv] {
    color: #111827;
}

.calendarStrip-todayDot[b-9rnivsulxv] {
    position: absolute;
    bottom: 4px;

    width: 4px;
    height: 4px;
    border-radius: 50%;

    background: #c92a2a;
}


/* =========================
   Échéance : éclat doux autour de la carte du jour
   rouge très clair : 30 jours ou moins avant la date de fin
   rouge clair, un peu plus soutenu : 7 jours ou moins
   (date dépassée ou plus de 30 jours : aucun éclat)
========================= */

.calendarStrip-card.alert.warn[b-9rnivsulxv]   { --alerte: 255, 105, 105; --duree: 1.1s; }
.calendarStrip-card.alert.danger[b-9rnivsulxv] { --alerte: 240, 55, 55;   --duree: .65s; }

.calendarStrip-card.alert[b-9rnivsulxv] {
    margin: 0 8px;   /* laisse la place à l'éclat entre les cartes voisines */
    box-shadow:
        0 0 0 1px rgba(var(--alerte), .85),
        0 0 12px 1px rgba(var(--alerte), .45);
    animation: calendarStrip-douce-b-9rnivsulxv var(--duree) ease-in-out infinite;
}

/* Même style que les alertes (.alertes-phaseBar-alert, .alertes-typeDemand) :
   fond « surface », bordure « line-strong », coins de 12 px.
   Les variables --a-* viennent de la page des alertes ; les valeurs de repli
   servent si elles ne sont pas définies autour du calendrier. */
.calendarStrip-card.alert:not(.active)[b-9rnivsulxv] {
    background: var(--a-surface, #fff);
    border: 1px solid var(--a-line-strong, #eba5a5);
}

.calendarStrip-card.alert[b-9rnivsulxv] {
    border-radius: 12px;
    transition: box-shadow .2s ease, border-color .2s ease;
}

/* Pulsation rapide et bien visible : l'éclat s'allume franchement puis retombe */
@keyframes calendarStrip-douce-b-9rnivsulxv {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(var(--alerte), .35),
            0 0 3px 0 rgba(var(--alerte), .15);
    }
    45% {
        box-shadow:
            0 0 0 1px rgba(var(--alerte), 1),
            0 0 16px 2px rgba(var(--alerte), .65);
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendarStrip-card.alert[b-9rnivsulxv] { animation: none; }
}


/* =========================
   Intervalle dateDebut -> dateFin — rouge clair
========================= */

.calendarStrip-card.in-range[b-9rnivsulxv] {
    background: #fdecec;
    border-radius: 12px;
}

.calendarStrip-card.in-range .calendarStrip-dayName[b-9rnivsulxv],
.calendarStrip-card.in-range .calendarStrip-dayNumber[b-9rnivsulxv] {
    color: #c92a2a;
}


/* Si aujourd'hui tombe DANS l'intervalle : fond blanc, texte rouge, pour rester distinct */
.calendarStrip-card.today.in-range[b-9rnivsulxv] {
    background: #fff;
    border-color: #f3b4b4;
}

.calendarStrip-card.today.in-range .calendarStrip-dayName[b-9rnivsulxv],
.calendarStrip-card.today.in-range .calendarStrip-dayNumber[b-9rnivsulxv] {
    color: #c92a2a;
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .calendarStrip[b-9rnivsulxv] { gap: .2rem; }

    /* Spécificité plus forte pour passer devant les styles globaux de <button> */
    .calendarStrip .calendarStrip-arrow[b-9rnivsulxv] {
        display: flex;
        flex: 0 0 24px;          /* largeur fixe, ne rétrécit pas */
        box-sizing: border-box;
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        padding: 0;
        margin: 0;
        line-height: 0;
        border-radius: 50%;
        -webkit-appearance: none;
        appearance: none;
    }

    .calendarStrip .calendarStrip-arrow svg[b-9rnivsulxv] {
        display: block;
        flex: none;
        width: 10px;
        height: 10px;
        pointer-events: none;
    }

    .calendarStrip-cards[b-9rnivsulxv] { gap: .2rem; padding: 12px 8px; margin: -12px 0; }
    .calendarStrip-card[b-9rnivsulxv] { width: 30px; height: 36px; border-radius: 7px; gap: .05rem; }
    .calendarStrip-dayName[b-9rnivsulxv] { font-size: .38rem; }
    .calendarStrip-dayNumber[b-9rnivsulxv] { font-size: .6rem; }
    .calendarStrip-todayDot[b-9rnivsulxv] { width: 3px; height: 3px; bottom: 2px; }
    .calendarStrip-card.alert[b-9rnivsulxv] { margin: 0 4px; }
}
/* /Components/Cards/DemandeCards.razor.rz.scp.css */
/* ==========================================
   Liste des demandes
========================================== */

.demande-list[b-spv5wjvgcf] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


/* ==========================================
   Carte demande
========================================== */

.demande-item[b-spv5wjvgcf] {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: .5rem;

    width: 100%;
    padding: .45rem;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    cursor: pointer;
    color: #374151;

    transition: all .2s ease;
}

.demande-item:hover[b-spv5wjvgcf] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.demande-item:active[b-spv5wjvgcf] {
    transform: scale(.98);
}

.demande-item.active[b-spv5wjvgcf] {
    background: #fdecec;
    border-color: #fdecec;
    color: #7a1f1f;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   Icône
========================================== */

.demande-item i[b-spv5wjvgcf] {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 12px;
    height: 12px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #fdecec;
    color: #fff;

    font-size: .7rem;

    transition: .2s ease;
}

.demande-item:hover i[b-spv5wjvgcf] {
    transform: rotate(8deg) scale(1.1);
}

.demande-item.active i[b-spv5wjvgcf] {
    background: #fff;
    color: #fdecec;
}


/* ==========================================
   Contenu
========================================== */

.demande-content[b-spv5wjvgcf] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
    padding-right: 48px; /* évite que le texte passe sous les icônes d'action */
}

.demande-name[b-spv5wjvgcf] {
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.1;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .2s ease;
}

.demande-description[b-spv5wjvgcf] {
    font-size: .65rem;
    line-height: 1.25;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demande-info[b-spv5wjvgcf] {
    margin-top: .01rem;
    font-size: .5rem;
    color: #c92a2a;
}

.demande-item.active .demande-name[b-spv5wjvgcf],
.demande-item.active .demande-description[b-spv5wjvgcf] {
    color: #7a1f1f;
}

.demande-item:hover .demande-content[b-spv5wjvgcf] {
    transform: translateX(3px);
}


/* ==========================================
   Message vide
========================================== */

.empty-demande[b-spv5wjvgcf] {
    padding: 2rem;
    text-align: center;
    color: black;
}


/* ==========================================
   Image
========================================== */

.demande-image[b-spv5wjvgcf] {
    width: 22px;
    height: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    border: 2px solid #fdecec;
}

.demande-image img[b-spv5wjvgcf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.demande-item.active .demande-image[b-spv5wjvgcf] {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}


/* ==========================================
   Actions (modifier / supprimer)
========================================== */

.demande-actions[b-spv5wjvgcf] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
}

.demande-item:hover .demande-actions[b-spv5wjvgcf] {
    opacity: 1;
}

.demande-action-btn[b-spv5wjvgcf] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.demande-action-btn:hover[b-spv5wjvgcf] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.demande-action-btn:active[b-spv5wjvgcf] {
    transform: scale(.95);
}


/* ==========================================
   Responsive
========================================== */

@media (max-width: 640px) {

    .demande-item[b-spv5wjvgcf] {
        padding: .45rem;
    }

    .demande-item i[b-spv5wjvgcf] {
        width: 20px;
        height: 20px;
        font-size: .65rem;
    }

    .demande-name[b-spv5wjvgcf] {
        font-size: .72rem;
    }

    .demande-description[b-spv5wjvgcf] {
        font-size: .62rem;
    }

    .demande-actions[b-spv5wjvgcf] {
        opacity: 1; /* toujours visible sur mobile, pas de hover */
    }
}

/* ==========================================================
   MOBILE : liste des demandes en miniature (à placer en dernier)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .demande-list[b-spv5wjvgcf] { gap: .25rem; }

    .demande-item[b-spv5wjvgcf] {
        padding: .25rem;
        gap: .3rem;
        border-radius: 8px;
    }

    /* l'ovale aplati venait de height: 2px */
    .demande-image[b-spv5wjvgcf] {
        width: 18px;
        height: 18px;
        border-width: 1px;
    }

    .demande-item i[b-spv5wjvgcf] {
        width: 12px;
        height: 12px;
        font-size: .5rem;
    }

    .demande-content[b-spv5wjvgcf] {
        gap: .05rem;
        padding-right: 36px;
    }

    .demande-name[b-spv5wjvgcf] { font-size: .7rem; line-height: 1.15; }
    .demande-description[b-spv5wjvgcf] { font-size: .5rem; line-height: 1.15; }
    .demande-info[b-spv5wjvgcf] { font-size: .4rem; }

    .demande-actions[b-spv5wjvgcf] { top: 3px; right: 3px; gap: 2px; opacity: 1; }
    .demande-action-btn[b-spv5wjvgcf] { width: 14px; height: 14px; font-size: .4rem; }

    /* pas d'effet de survol qui décale la carte sur tactile */
    .demande-item:hover[b-spv5wjvgcf],
    .demande-item:hover .demande-content[b-spv5wjvgcf] { transform: none; }
}
/* /Components/Cards/DossierStatusCharts.razor.rz.scp.css */
:root[b-x5o5y5z11q] {
  --net-bg: #ffffff;
  --net-border: rgba(0, 0, 0, 0.08);
  --net-text: #0f172a;
  --net-muted: #64748b;
  --net-accent-red: #dc2626;
  --net-red-glow: rgba(220, 38, 38, 0.35);
}

*[b-x5o5y5z11q] {
  box-sizing: border-box;
}

/* --- LAYOUT ET STRUCTURE PRINCIPALE --- */
.dfd-shell[b-x5o5y5z11q] {
  position: relative;
  background: var(--net-bg);
  color: var(--net-text);
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  width: 100%;
  height: calc(100vh - 330px);
  min-height: 520px;
  overflow: hidden;
}

.dfd-body[b-x5o5y5z11q] {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  height: 100%;
  overflow: hidden;
}

/* --- SIDEBARS --- */
.dfd-side[b-x5o5y5z11q] {
  padding: 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  z-index: 10;
  height: 100%;
  overflow: hidden;
}

.dfd-side--left[b-x5o5y5z11q] {
  border-right: 1px solid var(--net-border);
  gap: 1rem;
  overflow: hidden;
}

.dfd-side--right[b-x5o5y5z11q] {
  border-left: 1px solid var(--net-border);
  justify-content: flex-start;
  gap: 0.8rem;
  overflow: hidden;
}

.dfd-badge[b-x5o5y5z11q] {
  background: #dc2626;
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 0.8rem;
}

.dfd-desc[b-x5o5y5z11q] {
  font-size: 0.64rem;
  line-height: 1.4;
  color: var(--net-muted);
  margin: 0;
}

/* PILLS ANNÉES */
.year-pills[b-x5o5y5z11q] {
  display: flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 6px;
  gap: 2px;
  border: 1px solid var(--net-border);
}

.pill-btn[b-x5o5y5z11q] {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--net-muted);
  font-size: 0.62rem;
  padding: 0.35rem 0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pill-btn.active[b-x5o5y5z11q] {
  background: #0f172a;
  color: #ffffff;
  font-weight: 700;
}

/* STATS SIDEBAR GAUCHE */
.main-stat-block .stat-label[b-x5o5y5z11q] {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.3px;
}

.dfd-stat-big[b-x5o5y5z11q] {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0.2rem 0;
  color: #0f172a;
}

.dfd-stat-sub[b-x5o5y5z11q] {
  font-size: 0.66rem;
  color: var(--net-muted);
}

.dfd-stat-sub--row[b-x5o5y5z11q] {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.dfd-stat-sub--row .dsc-edit-btn[b-x5o5y5z11q] {
  opacity: 0;
}

.dfd-stat-sub--row:hover .dsc-edit-btn[b-x5o5y5z11q],
.dfd-stat-sub--row .dsc-edit-btn:focus-visible[b-x5o5y5z11q] {
  opacity: 1;
}

.sparkline-container[b-x5o5y5z11q] {
  height: 60px;
  width: 100%;
}

/* LISTE DES CONSULTANTS (GAUCHE) */
.consultant-section h2[b-x5o5y5z11q] {
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0;
  color: #0f172a;
}

.section-header-row[b-x5o5y5z11q] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.section-header-label[b-x5o5y5z11q] {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0f172a;
}

.consultant-list[b-x5o5y5z11q] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.consultant-item[b-x5o5y5z11q] {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 0.64rem;
  gap: 0.5rem;
}

.consultant-item .dot[b-x5o5y5z11q] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.consultant-info[b-x5o5y5z11q] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.consultant-info .name[b-x5o5y5z11q] { color: #0f172a; font-weight: 500; }
.consultant-info .role[b-x5o5y5z11q] { color: var(--net-muted); font-size: 0.56rem; }

.consultant-item .pct[b-x5o5y5z11q] { color: var(--net-muted); width: 32px; text-align: right; }
.consultant-item .count[b-x5o5y5z11q] { color: #0f172a; font-weight: 600; width: 45px; text-align: right; }

/* --- CONTENEUR RÉSEAU CENTRAL SVG --- */
.dfd-network[b-x5o5y5z11q] {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  background: #ffffff;
}

.dfd-pan[b-x5o5y5z11q] {
  width: 100%;
  height: 100%;
  display: block;
}

.network-svg[b-x5o5y5z11q] {
  width: 100%;
  height: 100%;
  display: block;
}

/* Lignes et Anneaux */
.ring-guide[b-x5o5y5z11q] {
  stroke: rgba(0, 0, 0, 0.06);
  stroke-width: 1px;
  fill: none;
}

.hub-tick[b-x5o5y5z11q] {
  stroke: #dc2626;
  stroke-width: 1.5px;
}

.net-line[b-x5o5y5z11q] {
  stroke: rgba(220, 38, 38, 0.2);
  stroke-width: 1.2px;
  transition: all 0.3s ease;
}

/* HUB CENTRAL CLAIR */
.hub-label[b-x5o5y5z11q] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-align: center;
  color: #0f172a !important;
  pointer-events: none;
}

.hub-icon[b-x5o5y5z11q] {
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 2px;
}

.hub-value[b-x5o5y5z11q] {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #dc2626 !important;
  line-height: 1.1;
}

.hub-sub[b-x5o5y5z11q] {
  font-size: 0.54rem !important;
  color: #64748b !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
  font-weight: 600;
}

/* CONTENU DANS LES BOULES PRINCIPALES */
.node-label[b-x5o5y5z11q] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  user-select: none;
}

.node-label .value[b-x5o5y5z11q] {
  font-size: clamp(0.46rem, 0.75vw, 0.55rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
}

.node-label .code[b-x5o5y5z11q] {
  font-size: clamp(0.46rem, 0.55vw, 0.58rem);
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

.node-label .value-compact[b-x5o5y5z11q] {
  display: none;
}

/* Icône crayon flottant au-dessus de chaque nœud de province */
.node-edit-wrap[b-x5o5y5z11q] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-edit-btn[b-x5o5y5z11q] {
  width: 18px;
  height: 18px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  color: #dc2626;
  border: 1px solid #e7e2e2;
  border-radius: 50%;

  font-size: 0.5rem;
  cursor: pointer;

  opacity: 0;
  transition: opacity 0.15s ease;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.net-node-group:hover .node-edit-btn[b-x5o5y5z11q] {
  opacity: 1;
}

/* BULLES DE POURCENTAGE */
.pct-label[b-x5o5y5z11q] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.46rem;
  font-weight: 700;
  color: #0d9488;
}

/* --- VILLES AUX EXTRÉMITÉS --- */
.leaf-node[b-x5o5y5z11q] {
  cursor: pointer;
}

.leaf-label-text[b-x5o5y5z11q] {
  font-size: 11px;
  font-weight: 500;
  fill: #0f172a;
  paint-order: stroke fill;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.leaf-label-text .city-val[b-x5o5y5z11q] {
  font-size: 6.5px;
  font-weight: 400;
  fill: var(--net-muted);
}

.leaf-node[data-side="right"] .leaf-label-text[b-x5o5y5z11q] {
  text-anchor: start;
  transform: translateX(8px);
}

.leaf-node[data-side="left"] .leaf-label-text[b-x5o5y5z11q] {
  text-anchor: end;
  transform: translateX(-8px);
}

/* --- EFFET SOLEIL INCANDESCENT AU SURVOL --- */
@keyframes sunGlowRed-b-x5o5y5z11q {
  0% {
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.9))
            drop-shadow(0 0 25px rgba(245, 158, 11, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(254, 202, 202, 1))
            drop-shadow(0 0 40px rgba(220, 38, 38, 0.9));
  }
  100% {
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.9))
            drop-shadow(0 0 25px rgba(245, 158, 11, 0.8));
  }
}

.net-node-group[b-x5o5y5z11q] {
  cursor: pointer;
}

.main-node-circle[b-x5o5y5z11q] {
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.net-node-group:hover .main-node-circle[b-x5o5y5z11q] {
  transform: scale(1);
  stroke: #ffffff;
  stroke-width: 3px;
  animation: sunGlowRed-b-x5o5y5z11q 1.8s infinite ease-in-out;
}

.pct-node-circle[b-x5o5y5z11q] {
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.7s ease;
}

.net-node-group:hover .pct-node-circle[b-x5o5y5z11q] {
  transform: scale(1.2);
}

/* Bouton "+" flottant pour ajouter une province */
.dsc-add-btn--network[b-x5o5y5z11q] {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
}

/* --- CERCLE STATISTIQUE EN HAUT DE LA SIDEBAR DROITE --- */
.province-stat-header[b-x5o5y5z11q] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--net-border);
}

.stat-circle-wrapper[b-x5o5y5z11q] {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  perspective: 500px;
}

.multi-color-donut[b-x5o5y5z11q] {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: rotateX(58deg) rotateZ(-15deg);
  transform-style: preserve-3d;
  box-shadow: none;   /* ombre / épaisseur 3D retirée */
}

.donut-cut-line[b-x5o5y5z11q] {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 50%;
  background: #ffffff;
  transform-origin: bottom center;
  z-index: 2;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

.donut-hole[b-x5o5y5z11q] {
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateZ(2px);
  position: relative;
  z-index: 3;
}

.stat-circle-val[b-x5o5y5z11q] {
  font-size: 0.4rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.stat-circle-sub[b-x5o5y5z11q] {
  font-size: 0.44rem;
  color: var(--net-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.stat-header-text h2[b-x5o5y5z11q] {
  font-size: 0.7rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.stat-header-text .sub-text[b-x5o5y5z11q] {
  font-size: 0.57rem;
  color: var(--net-muted);
}

/* --- SIDEBAR DROITE : LISTE DES TIRAGES --- */
.province-bar-list[b-x5o5y5z11q] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.55rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.province-bar-item[b-x5o5y5z11q] {
  display: flex;
  flex-direction: column;
}

.pbar-row[b-x5o5y5z11q] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}

.pbar-title[b-x5o5y5z11q] {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 24px;
  flex-shrink: 0;
  margin-right: 6px;
}

.pbar-circle[b-x5o5y5z11q] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #dc2626;
  display: inline-block;
  flex-shrink: 0;
}

.pbar-name[b-x5o5y5z11q] {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.6rem;
}

.pbar-val[b-x5o5y5z11q] {
  width: 38px;
  flex-shrink: 0;
  text-align: right;
  color: var(--net-muted);
  font-size: 0.48rem;
  font-weight: 600;
  white-space: nowrap;
}

.pbar-track[b-x5o5y5z11q] {
  position: relative;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  height: 16px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.pbar-fill[b-x5o5y5z11q] {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
}

.pbar-fill-animated[b-x5o5y5z11q] {
  width: 0;
  animation: fillBar-b-x5o5y5z11q 0.9s ease-out forwards;
}

@keyframes fillBar-b-x5o5y5z11q {
  from { width: 0; }
  to   { width: var(--target-width); }
}

.pbar-track-label[b-x5o5y5z11q] {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.44rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  line-height: 1;
  z-index: 0;
}

.pbar-fill-label[b-x5o5y5z11q] {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.44rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1;
  z-index: 1;
}

/* ========================================
   BOUTONS AJOUTER / MODIFIER (communs)
   ======================================== */

.dsc-add-btn[b-x5o5y5z11q] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 50%;

  font-size: 0.55rem;
  cursor: pointer;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}

.dsc-add-btn:hover[b-x5o5y5z11q] {
  transform: scale(1.08);
}

.dsc-edit-btn[b-x5o5y5z11q] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  color: #dc2626;
  border: 1px solid var(--net-border);
  border-radius: 50%;

  font-size: 0.45rem;
  cursor: pointer;

  opacity: 0;
  transition: opacity 0.15s ease;
}

.consultant-item:hover .dsc-edit-btn[b-x5o5y5z11q],
.pbar-row:hover .dsc-edit-btn[b-x5o5y5z11q],
.dsc-edit-btn:focus-visible[b-x5o5y5z11q] {
  opacity: 1;
}

/* ========================================
   POPUP D'AJOUT / ÉDITION
   ======================================== */

.dsc-modal-backdrop[b-x5o5y5z11q] {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1rem;

  background: rgba(0, 0, 0, .45);
}

.dsc-modal[b-x5o5y5z11q] {
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: .5rem;

  padding: 1rem 1.1rem 1.1rem;

  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .2);

  cursor: default;
}

.dsc-modal-header[b-x5o5y5z11q] {
  display: flex;
  align-items: center;
  gap: .4rem;

  margin-bottom: .2rem;

  font-size: .82rem;
  font-weight: 800;
  color: #0f172a;
}

.dsc-modal-header i[b-x5o5y5z11q] {
  font-size: .78rem;
  color: #9ca3af;
}

.dsc-edit-row[b-x5o5y5z11q] {
  display: flex;
  gap: .5rem;
}

.dsc-edit-row .dsc-edit-label[b-x5o5y5z11q] {
  flex: 1 1 0;
  min-width: 0;
}

.dsc-edit-label[b-x5o5y5z11q] {
  display: flex;
  flex-direction: column;
  gap: .2rem;

  font-size: .56rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.dsc-edit-input[b-x5o5y5z11q] {
  width: 100%;

  padding: .25rem .4rem;

  font-size: .68rem;
  font-family: inherit;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;

  color: #0f172a;
  background: #fff;
  border: 1px solid var(--net-border);
  border-radius: 6px;

  cursor: text;
}

.dsc-edit-input:focus[b-x5o5y5z11q] {
  outline: none;
  border-color: #dc2626;
}

.dsc-edit-select[b-x5o5y5z11q] {
  cursor: pointer;
}

.dsc-edit-actions[b-x5o5y5z11q] {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;

  margin-top: .4rem;
}

.dsc-edit-cancel[b-x5o5y5z11q],
.dsc-edit-save[b-x5o5y5z11q] {
  padding: .28rem .6rem;

  font-size: .6rem;
  font-weight: 700;

  border-radius: 6px;
  cursor: pointer;

  transition: background-color .15s ease, opacity .15s ease;
}

.dsc-edit-cancel[b-x5o5y5z11q] {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid var(--net-border);
}

.dsc-edit-cancel:hover[b-x5o5y5z11q] {
  background: #e5e7eb;
}

.dsc-edit-save[b-x5o5y5z11q] {
  background: #dc2626;
  color: #fff;
  border: 1px solid #dc2626;
}

.dsc-edit-save:hover[b-x5o5y5z11q] {
  opacity: .9;
}

.dsc-edit-cancel:disabled[b-x5o5y5z11q],
.dsc-edit-save:disabled[b-x5o5y5z11q] {
  opacity: .6;
  cursor: not-allowed;
}

/* Écrans tactiles : pas de survol, donc crayons toujours visibles */
@media (hover: none) {
  .dsc-edit-btn[b-x5o5y5z11q],
  .node-edit-btn[b-x5o5y5z11q],
  .dfd-stat-sub--row .dsc-edit-btn[b-x5o5y5z11q] { opacity: 1; }
}

/* Éléments propres au mobile : cachés sur desktop */
.dfd-toggle[b-x5o5y5z11q],
.dfd-backdrop[b-x5o5y5z11q] { display: none; }

/* Bureau : colonne de droite un peu plus large, contenu poussé vers l'intérieur */
@media (min-width: 769px) and (min-height: 501px) {
  .dfd-body[b-x5o5y5z11q] { grid-template-columns: 280px 1fr 330px; }

  .dfd-side--right[b-x5o5y5z11q] { padding-right: 2.4rem; }

  .province-bar-list[b-x5o5y5z11q] { padding-right: 8px; }
}

/* ========================================
   MOBILE — un seul bloc
   ======================================== */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

  /* Bas des tiroirs ET du voile : au-dessus du pied de page / bandeau du bas.
     Le voile s'arrête ici, donc le bas de la page n'est jamais grisé. */
  .dfd-shell[b-x5o5y5z11q] {
    --dfd-drawer-top: 100px;
    --dfd-drawer-bottom: 54px;
    --dfd-drawer-w: min(72vw, 270px);   /* largeur des deux tiroirs (ancienne valeur : plus large) */
  }

  /* --- Structure --- */
  .dfd-shell[b-x5o5y5z11q] {
    width: 100%;
    height: 0;
    min-height: 0;
    overflow: visible;
  }

  .dfd-body[b-x5o5y5z11q] {
    display: block;
    height: auto;
    overflow: visible;
  }

  /* Cadre fixé entre la languette « Statistics » (haut) et le bandeau de cartes (bas) */
  .dfd-network[b-x5o5y5z11q] {
    position: fixed;
    top: 90px;
    left: 0;
    right: 0;
    bottom: calc(44px + 3px + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    display: block;
    z-index: 1;
  }

  /* Zone de déplacement : gauche/droite et haut/bas */
  .dfd-pan[b-x5o5y5z11q] {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: block;
    overflow: scroll;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
  }
  .dfd-pan[b-x5o5y5z11q]::-webkit-scrollbar { display: none; }
  .dfd-pan.dragging[b-x5o5y5z11q] { cursor: grabbing; user-select: none; }

  .network-svg[b-x5o5y5z11q] {
    flex: none;
    height: 101%;
    width: auto;
    aspect-ratio: 1000 / 720;   /* même ratio que le viewBox (0 20 1000 720) */
    min-width: 180%;
    max-width: none;
    max-height: none;
    display: block;
  }

  /* --- Textes du SVG (réduits) --- */
  .leaf-label-text[b-x5o5y5z11q]           { font-size: 13.5px; stroke-width: 4px; }
  .leaf-label-text .city-val[b-x5o5y5z11q] { font-size: 8.5px; }

  .node-label .value-full[b-x5o5y5z11q]    { display: none; }
  .node-label .value-compact[b-x5o5y5z11q] { display: inline; }
  .node-label .value[b-x5o5y5z11q]         { font-size: 14px; letter-spacing: -.3px; }
  .node-label .code[b-x5o5y5z11q]          { font-size: 10px; margin-top: 0; }

  .pct-label[b-x5o5y5z11q]  { font-size: 9px; }
  .hub-icon[b-x5o5y5z11q]   { font-size: 18px; }
  .hub-value[b-x5o5y5z11q]  { font-size: 25px !important; }
  .hub-sub[b-x5o5y5z11q]    { font-size: 9px !important; }

  /* --- Panneaux latéraux = tiroirs fixes, coins arrondis --- */
  .dfd-side[b-x5o5y5z11q] {
    position: fixed;
    top: var(--dfd-drawer-top);
    bottom: var(--dfd-drawer-bottom);   /* au-dessus du pied de page : le bas arrondi est visible */
    width: var(--dfd-drawer-w);
    height: auto;
    z-index: 1200;
    overflow-y: auto;
    padding: .9rem .8rem;
    background: #ffffff;
    border: 1px solid var(--net-border);
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .dfd-side--left[b-x5o5y5z11q] {
    left: 0;
    border-left: none;
    border-radius: 0 14px 14px 0;
    transform: translateX(-110%);
  }

  .dfd-side--right[b-x5o5y5z11q] {
    right: 0;
    top: 146px;                 /* laisse visible la languette de RightNavMenu */
    border-right: none;
    border-radius: 14px 0 0 14px;
    transform: translateX(110%);
  }

  .dfd-side.open[b-x5o5y5z11q] { transform: translateX(0); }

  /* Ombre élevée (plusieurs couches), seulement quand le tiroir est ouvert */
  .dfd-side--left.open[b-x5o5y5z11q] {
    box-shadow:
      2px 0 4px rgba(0, 0, 0, .12),
      8px 0 16px rgba(0, 0, 0, .18),
      16px 0 40px rgba(0, 0, 0, .22);
  }
  .dfd-side--right.open[b-x5o5y5z11q] {
    box-shadow:
      -2px 0 4px rgba(0, 0, 0, .12),
      -8px 0 16px rgba(0, 0, 0, .18),
      -16px 0 40px rgba(0, 0, 0, .22);
  }

  /* Voile : même bas que les tiroirs → le bandeau du bas et le pied de page
     restent clairs, sans fond gris */
  .dfd-backdrop[b-x5o5y5z11q] {
    display: block;
    position: fixed;
    top: var(--dfd-drawer-top);
    left: 0;
    right: 0;
    bottom: var(--dfd-drawer-bottom);
    background: transparent;   /* pas de grisage : seule l'ombre du tiroir le détache */
    z-index: 1100;
  }

  /* Languettes des tiroirs */
  .dfd-toggle[b-x5o5y5z11q] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    z-index: 1210;
    width: 22px;
    height: 64px;
    margin-top: -32px;
    padding: 0;
    background: #f87171;
    color: #fff;
    border: none;
    font-size: .8rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    transition: left .25s ease, right .25s ease;
  }
  .dfd-toggle--left[b-x5o5y5z11q]        { left: env(safe-area-inset-left, 0px);  border-radius: 0 14px 14px 0; }
  .dfd-toggle--right[b-x5o5y5z11q]       { right: env(safe-area-inset-right, 0px); border-radius: 14px 0 0 14px; }
  .dfd-toggle--left.open[b-x5o5y5z11q]   { left:  calc(var(--dfd-drawer-w) + env(safe-area-inset-left, 0px)); }
  .dfd-toggle--right.open[b-x5o5y5z11q]  { right: calc(var(--dfd-drawer-w) + env(safe-area-inset-right, 0px)); }

  /* Quand un tiroir est ouvert, la languette de l'autre côté est masquée */
  .dfd-shell:has(.dfd-toggle--left.open)  .dfd-toggle--right[b-x5o5y5z11q],
  .dfd-shell:has(.dfd-toggle--right.open) .dfd-toggle--left[b-x5o5y5z11q] { display: none; }

  /* --- Contenu des tiroirs (réduit) --- */
  .dfd-stat-big[b-x5o5y5z11q]        { font-size: 1.55rem; }
  .dfd-desc[b-x5o5y5z11q]            { font-size: .62rem; }
  .consultant-item[b-x5o5y5z11q]     { font-size: .62rem; }
  .stat-circle-wrapper[b-x5o5y5z11q] { width: 80px; height: 80px; }

  /* --- Popup : champs à 16px pour éviter le zoom automatique d'iOS --- */
  .dsc-modal[b-x5o5y5z11q]       { max-width: 92vw; }
  .dsc-edit-input[b-x5o5y5z11q]  { font-size: 16px; padding: .4rem .5rem; }
  .dsc-edit-label[b-x5o5y5z11q]  { font-size: .62rem; }
  .dsc-edit-cancel[b-x5o5y5z11q],
  .dsc-edit-save[b-x5o5y5z11q]   { font-size: .8rem; padding: .5rem .9rem; }
}

/* ========================================
   PAYSAGE (téléphone) — un seul bloc
   Diagramme plein cadre, bord à bord.
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {

  .dfd-shell[b-x5o5y5z11q] {
    --dfd-bar-bottom: calc(36px + env(safe-area-inset-bottom, 0px));  /* hauteur de la barre du bas */
    --dfd-bar-h: 28px;                                                /* hauteur des languettes = hauteur de la barre */
    --dfd-drawer-top: 96px;
    --dfd-drawer-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  }

  .dfd-network[b-x5o5y5z11q] {
    top: 48px;                                                /* sous la barre du haut seulement */
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));    /* hauteur du pied de page */
    left: 0;
    right: 0;
  }

  /* Schéma plus petit : tout rétrécit (boules, lignes, textes) */
  .network-svg[b-x5o5y5z11q] {
    flex: none;
    width: 90%;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    aspect-ratio: 1000 / 720;
    display: block;
  }

  /* Chiffres et textes plus petits */
  .node-label .value[b-x5o5y5z11q]         { font-size: 11px; }
  .node-label .code[b-x5o5y5z11q]          { font-size: 8px; }
  .pct-label[b-x5o5y5z11q]                 { font-size: 7.5px; }
  .leaf-label-text[b-x5o5y5z11q]           { font-size: 11px; stroke-width: 3px; }
  .leaf-label-text .city-val[b-x5o5y5z11q] { font-size: 7.2px; }
  .hub-icon[b-x5o5y5z11q]                  { font-size: 13px; }
  .hub-value[b-x5o5y5z11q]                 { font-size: 18px !important; }
  .hub-sub[b-x5o5y5z11q]                   { font-size: 7px !important; }

  /* Le « + » flottant reste sous la barre d'outils */
  .dsc-add-btn--network[b-x5o5y5z11q] { top: 52px; }

  /* Tiroirs : superposés, sous la barre d'outils */
  .dfd-side--right[b-x5o5y5z11q] {
    top: var(--dfd-drawer-top);
    /* place pour la languette de RightNavMenu (16px) collée au bord droit */
    padding-right: calc(1.4rem + env(safe-area-inset-right, 0px));
  }
  .dfd-side--left[b-x5o5y5z11q] {
    padding-left: calc(.8rem + env(safe-area-inset-left, 0px));
  }

  /* Languettes gauche et droite : sur la ligne de la barre du bas, collées à ses extrémités */
  .dfd-toggle[b-x5o5y5z11q] {
    top: auto;
    bottom: var(--dfd-bar-bottom);
    height: var(--dfd-bar-h);
    width: 14px;
    margin-top: 0;
  }
  .dfd-toggle--left[b-x5o5y5z11q]  { left:  max(0px, calc(env(safe-area-inset-left, 0px) - 6px)); }
  .dfd-toggle--right[b-x5o5y5z11q] { right: calc(42px + env(safe-area-inset-right, 0px)); }   /* entre la barre et le bouton « + » */

  /* Tiroir ouvert : la languette suit le bord du tiroir */
  .dfd-toggle--left.open[b-x5o5y5z11q]  { left:  calc(var(--dfd-drawer-w) + env(safe-area-inset-left, 0px)); }
  .dfd-toggle--right.open[b-x5o5y5z11q] { right: calc(var(--dfd-drawer-w) + env(safe-area-inset-right, 0px)); }
}

/* ========================================
   TIROIRS MOBILE : polices réduites
   (gauche : statistiques / droite : tirages récents)
   ======================================== */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

  /* ----- Tiroir gauche ----- */
  .dfd-side[b-x5o5y5z11q] { padding: .75rem .7rem; }
  .dfd-side--left[b-x5o5y5z11q] { gap: .7rem; }

  .dfd-badge[b-x5o5y5z11q]        { font-size: .56rem; padding: .28rem .6rem; margin-bottom: .5rem; }
  .dfd-desc[b-x5o5y5z11q]         { font-size: .54rem; line-height: 1.35; }

  .pill-btn[b-x5o5y5z11q]         { font-size: .54rem; padding: .28rem 0; }

  .main-stat-block .stat-label[b-x5o5y5z11q] { font-size: .78rem; }
  .dfd-stat-big[b-x5o5y5z11q]     { font-size: 1.3rem; margin: .1rem 0; }
  .dfd-stat-sub[b-x5o5y5z11q]     { font-size: .56rem; }
  .sparkline-container[b-x5o5y5z11q] { height: 48px; }

  .consultant-section h2[b-x5o5y5z11q],
  .section-header-label[b-x5o5y5z11q] { font-size: .64rem; }

  .consultant-list[b-x5o5y5z11q]  { gap: .5rem; }
  .consultant-item[b-x5o5y5z11q]  { font-size: .54rem; gap: .4rem; }
  .consultant-info .role[b-x5o5y5z11q] { font-size: .48rem; }
  .consultant-item .pct[b-x5o5y5z11q]   { width: 28px; }
  .consultant-item .count[b-x5o5y5z11q] { width: 36px; }

  /* ----- Tiroir droit ----- */
  .stat-circle-wrapper[b-x5o5y5z11q] { width: 68px; height: 68px; }
  .stat-circle-val[b-x5o5y5z11q]  { font-size: .34rem; }
  .stat-circle-sub[b-x5o5y5z11q]  { font-size: .38rem; }

  .stat-header-text h2[b-x5o5y5z11q]        { font-size: .6rem; }
  .stat-header-text .sub-text[b-x5o5y5z11q] { font-size: .5rem; }

  .province-bar-list[b-x5o5y5z11q] { gap: .4rem; }

  /* Le numéro de tirage ne déborde plus sur la barre (#321, #320…) */
  .pbar-title[b-x5o5y5z11q] { width: 34px; margin-right: 4px; }
  .pbar-name[b-x5o5y5z11q]  { font-size: .5rem; }
  .pbar-val[b-x5o5y5z11q]   { width: 34px; font-size: .44rem; }

  .pbar-track[b-x5o5y5z11q] { height: 14px; }
  .pbar-track-label[b-x5o5y5z11q],
  .pbar-fill-label[b-x5o5y5z11q] { font-size: .4rem; left: 5px; }

  /* Boutons + et crayons un peu plus petits */
  .dsc-add-btn[b-x5o5y5z11q]  { width: 18px; height: 18px; font-size: .5rem; }
  .dsc-edit-btn[b-x5o5y5z11q] { width: 14px; height: 14px; font-size: .4rem; }
}

/* ========================================
   INFO-BULLE DE SURVOL DES BOULES
   Nom de la province + pourcentage, fond rouge clair
   ======================================== */

.node-tip[b-x5o5y5z11q] {
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.node-tip-wrap[b-x5o5y5z11q] {
  display: flex;
  justify-content: center;
  width: 100%;
}

.node-tip-box[b-x5o5y5z11q] {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  background: #fdecec;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  color: #991b1b;
  font-size: 10.5px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(220, 38, 38, .18);
}

.node-tip-box strong[b-x5o5y5z11q] { font-weight: 700; }
.node-tip-box span[b-x5o5y5z11q]   { font-weight: 600; color: #dc2626; }

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .node-tip-box[b-x5o5y5z11q] {
    font-size: 12px;
    gap: 5px;
    padding: 2px 6px;
    border-radius: 5px;
  }
}

/* Ordinateur : diagramme agrandi, centré sur le contenu */
@media (min-width: 769px) and (min-height: 501px) {
  .network-svg[b-x5o5y5z11q] {
    transform: scale(1.15);
    transform-origin: 53% 53%;   /* centre du contenu (hub + boules) */
  }
}

/* ===== Bureau : bandes gauche et droite qui rétrécissent avec la fenêtre ===== */
@media (min-width: 769px) and (min-height: 501px) {

    .dfd-body[b-x5o5y5z11q] {
        grid-template-columns:
            clamp(170px, 20vw, 280px)      /* gauche  : 280px à partir de 1400px de large */
            minmax(0, 1fr)
            clamp(190px, 23.5vw, 330px);   /* droite : 330px à partir de 1404px de large */
    }

    .dfd-side--right[b-x5o5y5z11q] { padding-right: clamp(.9rem, 2.4vw, 2.4rem); }
}

/* Fenêtre moyenne : contenu des bandes un peu plus petit */
@media (min-width: 769px) and (min-height: 501px) and (max-width: 1250px) {

    .dfd-side[b-x5o5y5z11q] { padding: .8rem .65rem; }
    .dfd-side--left[b-x5o5y5z11q] { gap: .7rem; }

    .dfd-desc[b-x5o5y5z11q] { font-size: .56rem; }
    .dfd-badge[b-x5o5y5z11q] { font-size: .56rem; padding: .28rem .6rem; }
    .pill-btn[b-x5o5y5z11q] { font-size: .54rem; }

    .main-stat-block .stat-label[b-x5o5y5z11q] { font-size: .8rem; }
    .dfd-stat-big[b-x5o5y5z11q] { font-size: 1.6rem; }
    .dfd-stat-sub[b-x5o5y5z11q] { font-size: .58rem; }

    .consultant-item[b-x5o5y5z11q] { font-size: .56rem; gap: .35rem; }
    .consultant-info .role[b-x5o5y5z11q] { font-size: .5rem; }
    .consultant-item .pct[b-x5o5y5z11q] { width: 26px; }
    .consultant-item .count[b-x5o5y5z11q] { width: 34px; }

    .stat-circle-wrapper[b-x5o5y5z11q] { width: 76px; height: 76px; }
    .stat-header-text h2[b-x5o5y5z11q] { font-size: .62rem; }
    .stat-header-text .sub-text[b-x5o5y5z11q] { font-size: .52rem; }

    .pbar-title[b-x5o5y5z11q] { width: 32px; margin-right: 4px; }
    .pbar-name[b-x5o5y5z11q] { font-size: .52rem; }
    .pbar-val[b-x5o5y5z11q] { width: 32px; font-size: .44rem; }
    .pbar-track[b-x5o5y5z11q] { height: 14px; }
    .pbar-track-label[b-x5o5y5z11q],
    .pbar-fill-label[b-x5o5y5z11q] { font-size: .4rem; left: 5px; }
}

/* ===== Bureau, fenêtre réduite : bandes gauche/droite en tiroirs à languettes ===== */
@media (min-width: 769px) and (max-width: 1100px) and (min-height: 501px) {

    .dfd-shell[b-x5o5y5z11q] {
        --dfd-drawer-w: clamp(240px, 34vw, 300px);
    }

    /* Le diagramme prend toute la largeur */
    .dfd-body[b-x5o5y5z11q] { grid-template-columns: minmax(0, 1fr); }

    /* Bandes = tiroirs, repliés par défaut */
    .dfd-side[b-x5o5y5z11q] {
        position: absolute;
        top: 0;
        bottom: 0;
        width: var(--dfd-drawer-w);
        height: auto;
        z-index: 1200;
        overflow-y: auto;
        padding: .9rem .8rem !important;
        background: #ffffff;
        border: 1px solid var(--net-border);
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .dfd-side--left[b-x5o5y5z11q] {
        left: 0;
        border-left: none;
        border-radius: 0 14px 14px 0;
        transform: translateX(-110%);
    }

    .dfd-side--right[b-x5o5y5z11q] {
        right: 0;
        border-right: none;
        border-radius: 14px 0 0 14px;
        transform: translateX(110%);
    }

    .dfd-side.open[b-x5o5y5z11q] { transform: translateX(0); }

    .dfd-side--left.open[b-x5o5y5z11q] {
        box-shadow: 2px 0 4px rgba(0,0,0,.12), 8px 0 16px rgba(0,0,0,.18), 16px 0 40px rgba(0,0,0,.22);
    }
    .dfd-side--right.open[b-x5o5y5z11q] {
        box-shadow: -2px 0 4px rgba(0,0,0,.12), -8px 0 16px rgba(0,0,0,.18), -16px 0 40px rgba(0,0,0,.22);
    }

    /* Voile transparent : un clic à côté referme le tiroir */
    .dfd-backdrop[b-x5o5y5z11q] {
        display: block;
        position: absolute;
        inset: 0;
        background: transparent;
        z-index: 1100;
    }

    /* Languettes avec flèche */
    .dfd-toggle[b-x5o5y5z11q] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        z-index: 1210;
        width: 22px;
        height: 64px;
        margin-top: -32px;
        padding: 0;
        background: #f87171;
        color: #fff;
        border: none;
        font-size: .8rem;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,.3);
        transition: left .25s ease, right .25s ease;
    }

    .dfd-toggle--left[b-x5o5y5z11q]       { left: 0;  border-radius: 0 14px 14px 0; }
    .dfd-toggle--right[b-x5o5y5z11q]      { right: 0; border-radius: 14px 0 0 14px; }
    .dfd-toggle--left.open[b-x5o5y5z11q]  { left:  var(--dfd-drawer-w); }
    .dfd-toggle--right.open[b-x5o5y5z11q] { right: var(--dfd-drawer-w); }

    /* Tiroir ouvert : la languette de l'autre côté est masquée */
    .dfd-shell:has(.dfd-toggle--left.open)  .dfd-toggle--right[b-x5o5y5z11q],
    .dfd-shell:has(.dfd-toggle--right.open) .dfd-toggle--left[b-x5o5y5z11q] { display: none; }
}

/* ===== Bureau, fenêtre réduite : languette de droite bien visible ===== */
@media (min-width: 769px) and (max-width: 1100px) and (min-height: 501px) {

    /* Décalée du bord (la languette de RightNavMenu occupe ~16-22 px) et plus bas */
    .dfd-toggle--right[b-x5o5y5z11q] {
        right: 26px;
        top: 62%;
        z-index: 1300;
        background: #ef4444;
        border-radius: 14px;
    }

    /* Tiroir ouvert : la languette suit le bord du tiroir */
    .dfd-toggle--right.open[b-x5o5y5z11q] {
        right: calc(var(--dfd-drawer-w) + 26px);
    }

    /* Le tiroir de droite s'arrête avant la languette de RightNavMenu */
    .dfd-side--right[b-x5o5y5z11q] {
        right: 26px;
        border-radius: 14px;
        border-right: 1px solid var(--net-border);
    }
}

/* ===== Bureau, fenêtre réduite : languette de gauche = même design que la droite ===== */
@media (min-width: 769px) and (max-width: 1100px) and (min-height: 501px) {

    /* Même design, en miroir : décalée du bord, même hauteur, même couleur */
    .dfd-toggle--left[b-x5o5y5z11q] {
        left: 26px;
        top: 62%;
        z-index: 1300;
        background: #ef4444;
        border-radius: 14px;
    }

    /* Tiroir ouvert : la languette suit le bord du tiroir */
    .dfd-toggle--left.open[b-x5o5y5z11q] {
        left: calc(var(--dfd-drawer-w) + 26px);
    }

    /* Le tiroir de gauche est décalé de la même valeur, coins arrondis complets */
    .dfd-side--left[b-x5o5y5z11q] {
        left: 26px;
        border-radius: 14px;
        border-left: 1px solid var(--net-border);
    }
}
/* /Components/Cards/EmploiCards.razor.rz.scp.css */
/* ==========================
   Liste
========================== */

.emploi-scroll[b-tzlwiyeqat]{
display:flex;
flex-direction:row;
flex-wrap:nowrap;

gap:.6rem;

overflow-x:auto;
overflow-y:hidden;

padding:.2rem;

scrollbar-width:none;
-ms-overflow-style:none;

white-space:nowrap;
}

.emploi-scroll[b-tzlwiyeqat]::-webkit-scrollbar{
display:none;
}

/* ==========================
   Carte
========================== */

.emploi-card[b-tzlwiyeqat]{
flex:0 0 240px;

display:flex;
align-items:center;
gap:.5rem;

padding:.45rem;

background:#fff;

border:1px solid #e5e7eb;
border-radius:10px;

cursor:pointer;

transition:.2s ease;
}

.emploi-card:hover[b-tzlwiyeqat]{
transform:translateY(-2px);
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.emploi-card.active[b-tzlwiyeqat]{
background:#fdecec;
border:2px solid #fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

/* ==========================
   Icône
========================== */

.emploi-icon[b-tzlwiyeqat]{
display:flex;
align-items:center;
justify-content:center;

width:22px;
height:22px;

flex-shrink:0;

border-radius:50%;

background:#fdecec;
color:#fff;

font-size:.7rem;
}

.emploi-card.active .emploi-icon[b-tzlwiyeqat]{
background:#fff;
color:#fdecec;
}

/* ==========================
   Contenu
========================== */

.emploi-content[b-tzlwiyeqat]{
display:flex;
flex-direction:column;
gap:.1rem;

min-width:0;
}

.emploi-name[b-tzlwiyeqat]{
font-size:.82rem;
font-weight:700;
line-height:1.15;
}

.emploi-info[b-tzlwiyeqat]{
font-size:.6rem;
font-weight:600;
color:#c92a2a;
}

.emploi-objective[b-tzlwiyeqat]{
font-size:.58rem;
line-height:1.15;
color:#6b7280;
}

/* ==========================
   Mobile
========================== */

@media(max-width:768px){

.emploi-card[b-tzlwiyeqat]{
flex:0 0 190px;
padding:.4rem;
    }

.emploi-name[b-tzlwiyeqat]{
font-size:.7rem;
    }

.emploi-info[b-tzlwiyeqat],
.emploi-objective[b-tzlwiyeqat]{
font-size:.56rem;
    }
}
/* /Components/Cards/EvaluationCards.razor.rz.scp.css */
.evaluation-scroll[b-igy5wo91tu]{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
gap:.6rem;
overflow-x:auto;
overflow-y:hidden;
padding:.2rem;
scrollbar-width:none;
-ms-overflow-style:none;
white-space:nowrap;
}

.evaluation-scroll[b-igy5wo91tu]::-webkit-scrollbar{
display:none;
}

.evaluation-card[b-igy5wo91tu]{
flex:0 0 240px;
display:flex;
align-items:center;
gap:.5rem;
padding:.45rem;
background:#fff;
border:1px solid #e5e7eb;
border-radius:10px;
cursor:pointer;
transition:.2s ease;
}

.evaluation-card:hover[b-igy5wo91tu]{
transform:translateY(-2px);
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.evaluation-card.active[b-igy5wo91tu]{
background:#fdecec;
border:2px solid #fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.evaluation-icon[b-igy5wo91tu]{
display:flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
flex-shrink:0;
border-radius:50%;
background:#fdecec;
color:#fff;
font-size:.7rem;
}

.evaluation-card.active .evaluation-icon[b-igy5wo91tu]{
background:#fff;
color:#fdecec;
}

.evaluation-content[b-igy5wo91tu]{
display:flex;
flex-direction:column;
gap:.1rem;
min-width:0;
}

.evaluation-name[b-igy5wo91tu]{
font-size:.82rem;
font-weight:700;
line-height:1.15;
}

.evaluation-info[b-igy5wo91tu]{
font-size:.6rem;
font-weight:600;
color:#c92a2a;
}

.evaluation-objective[b-igy5wo91tu]{
font-size:.58rem;
line-height:1.15;
color:#6b7280;
}

@media(max-width:768px){
.evaluation-card[b-igy5wo91tu]{
flex:0 0 190px;
padding:.4rem;
    }
.evaluation-name[b-igy5wo91tu]{
font-size:.7rem;
    }
.evaluation-info[b-igy5wo91tu],
.evaluation-objective[b-igy5wo91tu]{
font-size:.56rem;
    }
}
/* /Components/Cards/FinanceCards.razor.rz.scp.css */
/* ==========================================
   LISTE HORIZONTALE DES FINANCES
   Design commun : carte à taille fixe, contenu centré.
   Taille : modifier les 3 variables ci-dessous (--tile-*).
========================================== */

.finance-scroll[b-rh2qutqnyj] {
    --tile-w: 110px;
    --tile-h: 170px;
    --tile-icon: 40px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.finance-scroll[b-rh2qutqnyj]::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   CARTE FINANCE (taille fixe, contenu centré)
========================================== */

.finance-card[b-rh2qutqnyj] {
    position:relative;              /* repère du badge en haut à droite */
    flex:0 0 110px;
    height:118px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:.4rem;
    padding:.6rem;
    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    cursor:pointer;
    box-shadow:0 4px 10px #e5e7eb;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.finance-card:hover[b-rh2qutqnyj] {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px #e5e7eb;
}


/* Finance sélectionnée */

.finance-card.active[b-rh2qutqnyj] {
    border: 1px solid red;
    background: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   ICÔNE
========================================== */

.finance-icon[b-rh2qutqnyj] {
    width: var(--tile-icon, 40px);
    height: var(--tile-icon, 40px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.finance-card.active .finance-icon[b-rh2qutqnyj] {
    background: #fff;
}


/* ==========================================
   INFOS (centrées, retour à la ligne autorisé)
========================================== */

.finance-content[b-rh2qutqnyj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Titre : 3 lignes max puis « … » */
.finance-name[b-rh2qutqnyj] {
    font-size: .7rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    text-wrap: balance;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.finance-info[b-rh2qutqnyj] {
    margin-top: .2rem;
    font-size: .68rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.finance-objective[b-rh2qutqnyj] {
    margin-top: .3rem;
    font-size: .6rem;
    color: #c92a2a;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================
   ACTIONS — visibles uniquement au survol
   Modifier : haut droite | Supprimer : haut gauche
========================================== */

.finance-btn-edit[b-rh2qutqnyj],
.finance-btn-delete[b-rh2qutqnyj] {
    position: absolute;
    top: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

.finance-card:hover .finance-btn-edit[b-rh2qutqnyj],
.finance-card:hover .finance-btn-delete[b-rh2qutqnyj] {
    opacity: 1;
    pointer-events: auto;
}

.finance-btn-edit[b-rh2qutqnyj] {
    right: 6px;
}

.finance-btn-delete[b-rh2qutqnyj] {
    left: 6px;
}

.finance-btn-edit:hover[b-rh2qutqnyj],
.finance-btn-delete:hover[b-rh2qutqnyj] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.finance-btn-edit:active[b-rh2qutqnyj],
.finance-btn-delete:active[b-rh2qutqnyj] {
    transform: scale(.95);
}


/* ==========================================
   MESSAGE VIDE / SKELETON
========================================== */

.empty-finance[b-rh2qutqnyj] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* Skeleton : même taille fixe que la carte */
.skeleton-card[b-rh2qutqnyj] {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--tile-w, 110px);
    min-width: var(--tile-w, 110px);
    max-width: var(--tile-w, 110px);
    height: var(--tile-h, 170px);
    min-height: var(--tile-h, 170px);
    max-height: var(--tile-h, 170px);
    border-radius: 14px;
    background: #e5e7eb;
    position: relative;
    overflow: hidden;
}

.skeleton-card[b-rh2qutqnyj]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translateX(-100%);
    animation: finance-shine-b-rh2qutqnyj 1.3s infinite;
}

@keyframes finance-shine-b-rh2qutqnyj {
    100% {
        transform: translateX(100%);
    }
}


/* ==========================================
   TACTILE / MOBILE — pas de survol : boutons visibles
   (la taille de la carte ne change pas)
========================================== */

/* ==========================================
   MOBILE : cartes compactes (bande de 84 px)
========================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .finance-scroll[b-rh2qutqnyj] {
        gap: .4rem;
        padding: .15rem .2rem;
        height: 100%;
        align-items: center;
    }

    .finance-card[b-rh2qutqnyj] {
        flex: 0 0 84px;
        height: 70px;
        gap: .15rem;
        padding: .25rem;
        border-radius: 10px;
    }

    .finance-icon[b-rh2qutqnyj] {
        width: 24px;
        height: 24px;
        font-size: .75rem;
    }

    .finance-name[b-rh2qutqnyj] {
        font-size: .55rem;
        -webkit-line-clamp: 2;
    }

    .finance-info[b-rh2qutqnyj] {
        display: none;
    }

    .finance-btn-edit[b-rh2qutqnyj],
    .finance-btn-delete[b-rh2qutqnyj] {
        width: 16px;
        height: 16px;
        top: 3px;
        font-size: .45rem;
    }

    .finance-btn-edit[b-rh2qutqnyj]   { right: 3px; }
    .finance-btn-delete[b-rh2qutqnyj] { left: 3px; }
}

@media (max-height: 500px) and (orientation: landscape) {

    .finance-card[b-rh2qutqnyj] {
        flex: 0 0 64px;
        height: 44px;
        padding: .15rem;
    }

    .finance-icon[b-rh2qutqnyj] {
        width: 16px;
        height: 16px;
        font-size: .5rem;
    }

    .finance-name[b-rh2qutqnyj] {
        font-size: .4rem;
    }
}
/* /Components/Cards/ImmigrationCards.razor.rz.scp.css */
/* ==========================================
   LISTE HORIZONTALE DES IMMIGRATIONS
   Design commun : carte à taille fixe, contenu centré.
========================================== */

.immigration-scroll[b-k4pqxjcwdf] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.immigration-scroll[b-k4pqxjcwdf]::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   CARTE IMMIGRATION (taille fixe, contenu centré)
========================================== */

.immigration-card[b-k4pqxjcwdf] {
    position: relative;              /* repère des boutons en haut */
    flex: 0 0 110px;
    height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    padding: .6rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 10px #e5e7eb;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.immigration-card:hover[b-k4pqxjcwdf] {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px #e5e7eb;
}

/* Immigration sélectionnée */
.immigration-card.active[b-k4pqxjcwdf] {
    border: 1px solid red;
    background: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   ICÔNE
========================================== */

.immigration-icon[b-k4pqxjcwdf] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.immigration-card.active .immigration-icon[b-k4pqxjcwdf] {
    background: #fff;
}


/* ==========================================
   INFOS (centrées, retour à la ligne autorisé)
========================================== */

.immigration-content[b-k4pqxjcwdf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Titre : 3 lignes max puis « … » */
.immigration-name[b-k4pqxjcwdf] {
    font-size: .7rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    text-wrap: balance;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.immigration-info[b-k4pqxjcwdf] {
    margin-top: .2rem;
    font-size: .68rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.immigration-objective[b-k4pqxjcwdf] {
    margin-top: .3rem;
    font-size: .6rem;
    color: #c92a2a;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================
   ACTIONS — visibles uniquement au survol
   Modifier : haut droite | Supprimer : haut gauche
========================================== */

.immigration-btn-edit[b-k4pqxjcwdf],
.immigration-btn-delete[b-k4pqxjcwdf] {
    position: absolute;
    top: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

.immigration-card:hover .immigration-btn-edit[b-k4pqxjcwdf],
.immigration-card:hover .immigration-btn-delete[b-k4pqxjcwdf] {
    opacity: 1;
    pointer-events: auto;
}

.immigration-btn-edit[b-k4pqxjcwdf] {
    right: 6px;
}

.immigration-btn-delete[b-k4pqxjcwdf] {
    left: 6px;
}

.immigration-btn-edit:hover[b-k4pqxjcwdf],
.immigration-btn-delete:hover[b-k4pqxjcwdf] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.immigration-btn-edit:active[b-k4pqxjcwdf],
.immigration-btn-delete:active[b-k4pqxjcwdf] {
    transform: scale(.95);
}


/* ==========================================
   MESSAGE VIDE
========================================== */

.empty-immigration[b-k4pqxjcwdf] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}


/* ==========================================
   TACTILE — pas de survol : boutons toujours visibles
   (la taille de la carte ne change pas)
========================================== */

@media (hover: none) {

    .immigration-btn-edit[b-k4pqxjcwdf],
    .immigration-btn-delete[b-k4pqxjcwdf] {
        opacity: 1;
        pointer-events: auto;
    }
}


/* ==========================================
   MOBILE (écrans tactiles uniquement) : cartes compactes
   Sur ordinateur, la carte garde sa taille normale,
   même si la fenêtre est étroite ou zoomée.
========================================== */

@media (max-width: 900px) and (pointer: coarse),
       (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {

    .immigration-scroll[b-k4pqxjcwdf] {
        gap: .4rem;
        padding: .15rem .2rem;
        height: 100%;
        align-items: center;
    }

    .immigration-card[b-k4pqxjcwdf] {
        flex: 0 0 84px;
        height: 70px;
        gap: .15rem;
        padding: .25rem;
        border-radius: 10px;
    }

    .immigration-icon[b-k4pqxjcwdf] {
        width: 24px;
        height: 24px;
        font-size: .75rem;
    }

    .immigration-name[b-k4pqxjcwdf] {
        font-size: .6rem;
        -webkit-line-clamp: 2;
    }

    .immigration-info[b-k4pqxjcwdf] {
        display: none;
    }

    .immigration-btn-edit[b-k4pqxjcwdf],
    .immigration-btn-delete[b-k4pqxjcwdf] {
        width: 16px;
        height: 16px;
        top: 3px;
        font-size: .45rem;
    }

    .immigration-btn-edit[b-k4pqxjcwdf]   { right: 3px; }
    .immigration-btn-delete[b-k4pqxjcwdf] { left: 3px; }
}

/* Paysage téléphone : encore plus compact */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {

    .immigration-card[b-k4pqxjcwdf] {
        flex: 0 0 64px;
        height: 44px;
        padding: .15rem;
    }

    .immigration-icon[b-k4pqxjcwdf] {
        width: 16px;
        height: 16px;
        font-size: .5rem;
    }

    .immigration-name[b-k4pqxjcwdf] {
        font-size: .6rem;
    }
}
/* /Components/Cards/IndicatorBar.razor.rz.scp.css */
.ind-bar[b-eciqpncrwg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.ind-bar-header[b-eciqpncrwg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ind-bar-label[b-eciqpncrwg] {
    font-size: 0.7rem;
    font-weight: 500;
    color: #6e6e73;
}

.ind-bar-value[b-eciqpncrwg] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
}

.ind-bar-track[b-eciqpncrwg] {
    height: 6px;
    width: 100%;
    background: #f0f0f2;
    border-radius: 999px;
    overflow: hidden;
}

.ind-bar-fill[b-eciqpncrwg] {
    height: 100%;
    background: linear-gradient(90deg, rgb(174, 1, 1), rgb(220, 20, 20));
    border-radius: 999px;
    transition: width .4s ease;
}

.ind-bar-caption[b-eciqpncrwg] {
    font-size: 0.62rem;
    color: #a1a1a6;
}
/* /Components/Cards/JuridiqueCards.razor.rz.scp.css */
/* ==========================================
   LISTE HORIZONTALE DU JURIDIQUE
   Design commun : carte à taille fixe, contenu centré.
   Taille : modifier les 3 variables ci-dessous (--tile-*).
========================================== */

.juridique-scroll[b-6fv0qp0agj] {
    --tile-w: 110px;
    --tile-h: 170px;
    --tile-icon: 40px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.juridique-scroll[b-6fv0qp0agj]::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   CARTE JURIDIQUE (taille fixe, contenu centré)
========================================== */

.juridique-card[b-6fv0qp0agj] {
    position:relative;              /* repère du badge en haut à droite */
    flex:0 0 110px;
    height:118px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:.4rem;
    padding:.6rem;
    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    cursor:pointer;
    box-shadow:0 4px 10px #e5e7eb;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.juridique-card:hover[b-6fv0qp0agj] {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px #e5e7eb;
}


/* Juridique sélectionné */

.juridique-card.active[b-6fv0qp0agj] {
    border: 1px solid red;
    background: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   ICÔNE
========================================== */

.juridique-icon[b-6fv0qp0agj] {
    width: var(--tile-icon, 40px);
    height: var(--tile-icon, 40px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.juridique-card.active .juridique-icon[b-6fv0qp0agj] {
    background: #fff;
}


/* ==========================================
   INFOS (centrées, retour à la ligne autorisé)
========================================== */

.juridique-content[b-6fv0qp0agj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Titre : 3 lignes max puis « … » */
.juridique-name[b-6fv0qp0agj] {
    font-size: .7rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    text-wrap: balance;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.juridique-info[b-6fv0qp0agj] {
    margin-top: .2rem;
    font-size: .68rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.juridique-objective[b-6fv0qp0agj] {
    margin-top: .3rem;
    font-size: .6rem;
    color: #c92a2a;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================
   ACTIONS — visibles uniquement au survol
   Modifier : haut droite | Supprimer : haut gauche
========================================== */

.juridique-btn-edit[b-6fv0qp0agj],
.juridique-btn-delete[b-6fv0qp0agj] {
    position: absolute;
    top: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

.juridique-card:hover .juridique-btn-edit[b-6fv0qp0agj],
.juridique-card:hover .juridique-btn-delete[b-6fv0qp0agj] {
    opacity: 1;
    pointer-events: auto;
}

.juridique-btn-edit[b-6fv0qp0agj] {
    right: 6px;
}

.juridique-btn-delete[b-6fv0qp0agj] {
    left: 6px;
}

.juridique-btn-edit:hover[b-6fv0qp0agj],
.juridique-btn-delete:hover[b-6fv0qp0agj] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.juridique-btn-edit:active[b-6fv0qp0agj],
.juridique-btn-delete:active[b-6fv0qp0agj] {
    transform: scale(.95);
}


/* ==========================================
   MESSAGE VIDE / SKELETON
========================================== */

.empty-juridique-list[b-6fv0qp0agj] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* Skeleton : même taille fixe que la carte */
.skeleton-card[b-6fv0qp0agj] {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--tile-w, 110px);
    min-width: var(--tile-w, 110px);
    max-width: var(--tile-w, 110px);
    height: var(--tile-h, 170px);
    min-height: var(--tile-h, 170px);
    max-height: var(--tile-h, 170px);
    border-radius: 14px;
    background: #e5e7eb;
    position: relative;
    overflow: hidden;
}

.skeleton-card[b-6fv0qp0agj]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translateX(-100%);
    animation: juridique-shine-b-6fv0qp0agj 1.3s infinite;
}

@keyframes juridique-shine-b-6fv0qp0agj {
    100% {
        transform: translateX(100%);
    }
}


/* ==========================================
   TACTILE / MOBILE — pas de survol : boutons visibles
   (la taille de la carte ne change pas)
========================================== */

@media (hover: none), (max-width: 640px) {

    .juridique-btn-edit[b-6fv0qp0agj],
    .juridique-btn-delete[b-6fv0qp0agj] {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ==========================================
   MOBILE : cartes compactes (bande de 84 px)
========================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .juridique-scroll[b-6fv0qp0agj] {
        gap: .4rem;
        padding: .15rem .2rem;
        height: 100%;
        align-items: center;
    }

    .juridique-card[b-6fv0qp0agj] {
        flex: 0 0 84px;
        height: 70px;
        gap: .15rem;
        padding: .25rem;
        border-radius: 10px;
    }

    .juridique-icon[b-6fv0qp0agj] {
        width: 24px;
        height: 24px;
        font-size: .75rem;
    }

    .juridique-name[b-6fv0qp0agj] {
        font-size: .55rem;
        -webkit-line-clamp: 2;
    }

    .juridique-info[b-6fv0qp0agj] {
        display: none;
    }

    .juridique-btn-edit[b-6fv0qp0agj],
    .juridique-btn-delete[b-6fv0qp0agj] {
        width: 16px;
        height: 16px;
        top: 3px;
        font-size: .45rem;
    }

    .juridique-btn-edit[b-6fv0qp0agj]   { right: 3px; }
    .juridique-btn-delete[b-6fv0qp0agj] { left: 3px; }
}

@media (max-height: 500px) and (orientation: landscape) {

    .juridique-card[b-6fv0qp0agj] {
        flex: 0 0 64px;
        height: 44px;
        padding: .15rem;
    }

    .juridique-icon[b-6fv0qp0agj] {
        width: 16px;
        height: 16px;
        font-size: .5rem;
    }

    .juridique-name[b-6fv0qp0agj] {
        font-size: .4rem;
    }
}

   .skeleton-card[b-6fv0qp0agj] { width: 84px; min-width: 84px; max-width: 84px; height: 70px; min-height: 70px; max-height: 70px; }
/* /Components/Cards/LogementCards.razor.rz.scp.css */
/* ==========================================
   LISTE HORIZONTALE DES LOGEMENTS
   Design commun : carte à taille fixe, contenu centré.
   Taille : modifier les 3 variables ci-dessous (--tile-*).
========================================== */

.logement-scroll[b-ki2f4sly8i] {
    --tile-w: 110px;
    --tile-h: 170px;
    --tile-icon: 40px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.logement-scroll[b-ki2f4sly8i]::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   CARTE LOGEMENT (taille fixe, contenu centré)
========================================== */

.logement-card[b-ki2f4sly8i] {
    position:relative;              /* repère du badge en haut à droite */
    flex:0 0 110px;
    height:118px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:.4rem;
    padding:.6rem;
    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    cursor:pointer;
    box-shadow:0 4px 10px #e5e7eb;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.logement-card:hover[b-ki2f4sly8i] {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px #e5e7eb;
}


/* Logement sélectionné */

.logement-card.active[b-ki2f4sly8i] {
    border: 1px solid red;
    background: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   ICÔNE
========================================== */

.logement-icon[b-ki2f4sly8i] {
    width: var(--tile-icon, 40px);
    height: var(--tile-icon, 40px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.logement-card.active .logement-icon[b-ki2f4sly8i] {
    background: #fff;
}


/* ==========================================
   INFOS (centrées, retour à la ligne autorisé)
========================================== */

.logement-content[b-ki2f4sly8i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Titre : 3 lignes max puis « … » */
.logement-name[b-ki2f4sly8i] {
    font-size: .7rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    text-wrap: balance;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.logement-info[b-ki2f4sly8i] {
    margin-top: .2rem;
    font-size: .68rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.logement-objective[b-ki2f4sly8i] {
    margin-top: .3rem;
    font-size: .6rem;
    color: #c92a2a;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================
   ACTIONS — visibles uniquement au survol
   Modifier : haut droite | Supprimer : haut gauche
========================================== */

.logement-btn-edit[b-ki2f4sly8i],
.logement-btn-delete[b-ki2f4sly8i] {
    position: absolute;
    top: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

.logement-card:hover .logement-btn-edit[b-ki2f4sly8i],
.logement-card:hover .logement-btn-delete[b-ki2f4sly8i] {
    opacity: 1;
    pointer-events: auto;
}

.logement-btn-edit[b-ki2f4sly8i] {
    right: 6px;
}

.logement-btn-delete[b-ki2f4sly8i] {
    left: 6px;
}

.logement-btn-edit:hover[b-ki2f4sly8i],
.logement-btn-delete:hover[b-ki2f4sly8i] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.logement-btn-edit:active[b-ki2f4sly8i],
.logement-btn-delete:active[b-ki2f4sly8i] {
    transform: scale(.95);
}


/* ==========================================
   MESSAGE VIDE / SKELETON
========================================== */

.empty-logement[b-ki2f4sly8i] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* Skeleton : la vraie carte (mêmes dimensions, même centrage),
   avec des blocs shimmer à la place du contenu */
.logement-card.skeleton-tile[b-ki2f4sly8i] {
    cursor: default;
    pointer-events: none;
}

.logement-card.skeleton-tile:hover[b-ki2f4sly8i] {
    transform: none;
}

.skeleton-tile-icon[b-ki2f4sly8i] {
    width: var(--tile-icon, 40px);
    height: var(--tile-icon, 40px);
    flex-shrink: 0;
    border-radius: 50%;
}

.skeleton-tile-line[b-ki2f4sly8i] {
    height: 10px;
    margin: .25rem auto 0;
    border-radius: 6px;
}

.skeleton-tile-line--name[b-ki2f4sly8i]  { width: 85%; }
.skeleton-tile-line--short[b-ki2f4sly8i] { width: 60%; }
.skeleton-tile-line--info[b-ki2f4sly8i]  { width: 70%; height: 8px; margin-top: .45rem; }


/* ==========================================
   TACTILE / MOBILE — pas de survol : boutons visibles
   (la taille de la carte ne change pas)
========================================== */

@media (hover: none), (max-width: 640px) {

    .logement-btn-edit[b-ki2f4sly8i],
    .logement-btn-delete[b-ki2f4sly8i] {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .logement-scroll[b-ki2f4sly8i] {
        --tile-icon: 24px;
        gap: .4rem;
        padding: .15rem .2rem;
        height: 100%;
        align-items: center;
    }

    .logement-card[b-ki2f4sly8i] {
        flex: 0 0 84px;
        height: 70px;
        gap: .15rem;
        padding: .25rem;
        border-radius: 10px;
    }

    .logement-icon[b-ki2f4sly8i] {
        width: 24px;
        height: 24px;
        font-size: .75rem;
    }

    .logement-name[b-ki2f4sly8i] {
        font-size: .55rem;
        -webkit-line-clamp: 2;
    }

    .logement-info[b-ki2f4sly8i] { display: none; }

    .logement-btn-edit[b-ki2f4sly8i],
    .logement-btn-delete[b-ki2f4sly8i] {
        width: 16px;
        height: 16px;
        top: 3px;
        font-size: .45rem;
    }

    .logement-btn-edit[b-ki2f4sly8i]   { right: 3px; }
    .logement-btn-delete[b-ki2f4sly8i] { left: 3px; }

    .skeleton-tile-icon[b-ki2f4sly8i] { width: 24px; height: 24px; }
}

@media (max-height: 500px) and (orientation: landscape) {

    .logement-card[b-ki2f4sly8i] {
        flex: 0 0 64px;
        height: 44px;
        padding: .15rem;
    }

    .logement-icon[b-ki2f4sly8i] {
        width: 16px;
        height: 16px;
        font-size: .5rem;
    }

    .logement-name[b-ki2f4sly8i] { font-size: .4rem; }
}
/* /Components/Cards/NewsCards.razor.rz.scp.css */
/* ==========================
   Pastilles de pagination (pilule active avec barre de progression)
========================== */

/* Glisser gauche / droite (js/swipe.js) : le navigateur garde le défilement vertical
   mais ne détourne pas le glissement horizontal (retour arrière, rebond). */
.news-feed[b-808h62qqc8],
.news-pager[b-808h62qqc8]{
    touch-action:pan-y;
    overscroll-behavior-x:contain;
}

.news-wrapper[b-808h62qqc8]{
    position:relative;
    z-index:50;            /* au-dessus de la grande carte (.news-feed) : la carte des pastilles ne passe plus dessous */
    display:flex;
    align-items:center;
    justify-content:center;
    height:10px;           /* barre fine : la pilule fait 7 px */
    min-height:0;
}

.news-pager[b-808h62qqc8]{
    position:relative;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 5rem;     /* laisse la place aux boutons ✏️ et + à droite */
}

.pager-item[b-808h62qqc8]{
    position:relative;
    display:flex;
    align-items:center;
}

.pager-item:hover[b-808h62qqc8],
.pager-item:focus-within[b-808h62qqc8]{
    z-index:40;
}

.pager-dot[b-808h62qqc8]{
    position:relative;
    flex:0 0 auto;
    padding:0;
    border:0;
    border-radius:50%;
    background:#808085;
    cursor:pointer;
    overflow:hidden;
    transition:width .3s ease, height .3s ease, transform .2s ease, background-color .2s ease;
}

.pager-dot:hover[b-808h62qqc8]{ transform:scale(1.3); }

.pager-dot:focus-visible[b-808h62qqc8]{
    outline:2px solid #c92a2a;
    outline-offset:3px;
}

/* Plus la pastille est loin de l'actualité en cours, plus elle est petite */
.pager-dot--d1[b-808h62qqc8]{ width:7px; height:7px; }
.pager-dot--d2[b-808h62qqc8]{ width:5px; height:5px; }
.pager-dot--d3[b-808h62qqc8]{ width:6px;  height:6px; }
.pager-dot--d4[b-808h62qqc8]{ width:6px;  height:6px; }

/* Actualité en cours : pilule avec barre de progression du défilement automatique */
.pager-dot--current[b-808h62qqc8]{
    width:58px;
    height:7px;
    border-radius:980px;
}

.pager-dot--current:hover[b-808h62qqc8]{ transform:none; }

.pager-fill[b-808h62qqc8]{
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:#0a0a0a;
    transform-origin:left center;
    transform:scaleX(0);
    animation:pager-progress-b-808h62qqc8 var(--dur, 4s) linear forwards;
}

@keyframes pager-progress-b-808h62qqc8{
    to{ transform:scaleX(1); }
}

/* Pause (souris sur l'actualité ou sur les pastilles) : la barre s'arrête */
.news-pager.is-paused .pager-fill[b-808h62qqc8]{
    animation-play-state:paused;
}

@media (prefers-reduced-motion: reduce){
    .pager-dot[b-808h62qqc8]{ transition:none; }
    .pager-fill[b-808h62qqc8]{ animation:none; transform:scaleX(1); }
}

.pager-empty[b-808h62qqc8]{
    font-size:.75rem;
    color:#6b7280;
}

/* ==========================
   Carte : apparaît au survol de la pastille (ou de la carte elle-même)
========================== */

/* La carte est un popover (top layer) : placée en JS (pagerCards.js), au-dessus de tout.
   Attention : pas de "display" ici, le navigateur masque lui-même un popover fermé. */
.pager-card[b-808h62qqc8]{
    position:fixed;
    inset:auto;
    margin:0;
    padding:0;
    width:200px;
    background:#fff;
    border:1px solid #ececec;
    border-radius:12px;
    box-shadow:0 10px 28px rgba(0,0,0,.25);
    overflow:hidden;
    cursor:pointer;
    text-align:left;
    color:inherit;
}

/* Sécurité : une carte non ouverte n'est jamais affichée */
.pager-card:not(:popover-open)[b-808h62qqc8]{
    display:none;
}

.pager-card:popover-open[b-808h62qqc8]{
    display:flex;
    animation:pager-card-in-b-808h62qqc8 .18s ease;
}

@keyframes pager-card-in-b-808h62qqc8{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
    .pager-card:popover-open[b-808h62qqc8]{ animation:none; }
}

.pager-card.is-current[b-808h62qqc8]{
    background:#fdecec;
    border-color:#c92a2a;
}

.pager-card-img[b-808h62qqc8]{
    width:54px;
    align-self:stretch;
    object-fit:cover;
    flex-shrink:0;
}

.pager-card-body[b-808h62qqc8]{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:.15rem;
    padding:.4rem .5rem;
}

.pager-card-title[b-808h62qqc8]{
    font-size:.64rem;
    font-weight:700;
    color:#111827;
    line-height:1.25;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    padding-right:2.2rem;   /* place pour les boutons modifier / supprimer */
}

.pager-card-desc[b-808h62qqc8]{
    font-size:.54rem;
    color:#6b7280;
    line-height:1.3;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.pager-card-footer[b-808h62qqc8]{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    gap:.4rem;
    font-size:.5rem;
    color:#9ca3af;
}

/* ==========================
   Bouton + : à droite, centré sur la barre, visible au survol de sa zone
========================== */

/* La zone de survol dépasse de la barre fine (10 px) : plus facile à atteindre à la souris */
.news-add-zone[b-808h62qqc8]{
    position:absolute;
    top:-10px;
    bottom:-10px;
    right:.25rem;
    min-width:44px;
    gap:6px;
    padding:0 .25rem;
    z-index:35;
    display:flex;
    align-items:center;
    justify-content:center;
}

.news-add-btn[b-808h62qqc8],
.news-edit-btn[b-808h62qqc8]{
    display:grid;
    place-items:center;      /* le « + » reste centré dans le rond */
    width:18px;
    height:18px;
    padding:0 0 1px;
    border:none;
    border-radius:50%;
    background:transparent;   /* bouton invisible : seule l'icône blanche se voit */
    color:#fff;
    font-size:.95rem;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    box-shadow:none;
    opacity:0;
    transform:translateX(8px) scale(.9);
    transition:opacity .25s ease, transform .25s ease, box-shadow .2s ease;
}

.news-add-zone:hover .news-add-btn[b-808h62qqc8],
.news-add-zone:hover .news-edit-btn[b-808h62qqc8],
.news-add-btn:focus-visible[b-808h62qqc8],
.news-edit-btn:focus-visible[b-808h62qqc8]{
    opacity:1;
    transform:translateX(0) scale(1);
}

.news-add-zone .news-add-btn:hover[b-808h62qqc8],
.news-add-zone .news-edit-btn:hover[b-808h62qqc8]{
    box-shadow:none;
    transform:translateX(0) scale(1.2);
}

/* Bouton ✏️ (modifier l'information en cours) : à gauche du « + », sans fond, icône blanche */
.news-edit-btn[b-808h62qqc8]{
    padding:0;
    background:transparent;
    font-size:.7rem;
    filter:brightness(0) invert(1);   /* rend l'émoji ✏️ entièrement blanc */
}

/* Écrans tactiles : pas de survol, le bouton + reste visible et les cartes s'ouvrent au toucher de la pastille */
@media (hover:none){
    .news-add-btn[b-808h62qqc8],
    .news-edit-btn[b-808h62qqc8]{
        opacity:1;
        transform:none;
    }
}

/* ==========================
   Boutons modifier / supprimer (dans la carte)
========================== */

.news-actions[b-808h62qqc8]{
    position:absolute;
    top:4px;
    right:4px;
    display:flex;
    gap:3px;
    z-index:4;
}

.news-action-btn[b-808h62qqc8]{
    width:7px;
    height:7px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    box-shadow:0 1px 3px rgba(0,0,0,.2);
    font-size:.52rem;
    line-height:1;
    cursor:pointer;
    transition:transform .2s ease;
}

.news-action-btn:hover[b-808h62qqc8]{
    transform:scale(1.15);
}

/* ==========================
   Bande rouge d'importance (bord gauche de la carte)
========================== */

.news-importance-band[b-808h62qqc8]{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:5px;
    background:#dc2626;
    z-index:3;
}

.news-importance-band.level-2[b-808h62qqc8]{
    width:8px;
    background:#991b1b;
    animation:importance-pulse-b-808h62qqc8 1.6s ease-in-out infinite;
}

@keyframes importance-pulse-b-808h62qqc8{
    50%{ opacity:.55; }
}

/* ==========================
   Modal d'ajout / modification (popover = top layer, au-dessus de tout)
========================== */

/* L'élément est un [popover="manual"] ouvert par js/topLayer.js : il est rendu dans le
   top layer du navigateur, donc au-dessus de tous les éléments de la page.
   On neutralise les styles par défaut du popover et on ne déclare "display"
   que lorsqu'il est ouvert (un popover fermé reste masqué par le navigateur). */
.modal-backdrop-custom[b-808h62qqc8]{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    margin:0;
    border:0;
    padding:1rem;
    box-sizing:border-box;
    overflow:auto;
    background:rgba(0,0,0,.45);
    color:inherit;
}

.modal-backdrop-custom:not(:popover-open)[b-808h62qqc8]{
    display:none;
}

.modal-backdrop-custom:popover-open[b-808h62qqc8]{
    display:flex;
    align-items:center;
    justify-content:center;
}

.modal-card[b-808h62qqc8]{
    width:100%;
    max-width:440px;
    max-height:92vh;
    overflow-y:auto;
    background:#fff;
    border-radius:12px;
    padding:.8rem 1rem;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.modal-card--small[b-808h62qqc8]{
    max-width:360px;
}

.modal-header-custom[b-808h62qqc8]{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:.5rem;
}

.modal-header-custom h3[b-808h62qqc8]{
    margin:0;
    font-size:.95rem;
    font-weight:700;
    color:#111827;
}

.modal-close[b-808h62qqc8]{
    border:none;
    background:none;
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    color:#6b7280;
}

/* --- Champs compacts --- */

.form-field[b-808h62qqc8]{
    display:flex;
    flex-direction:column;
    gap:.1rem;
    margin-bottom:.45rem;
    flex:1;
    min-width:0;
}

.form-row[b-808h62qqc8]{
    display:flex;
    gap:.45rem;
}

.form-field label[b-808h62qqc8]{
    font-size:.68rem;
    font-weight:600;
    color:#374151;
    margin:0;
}

.form-field input[b-808h62qqc8],
.form-field textarea[b-808h62qqc8]{
    border:1px solid #d1d5db;
    border-radius:6px;
    padding:.28rem .45rem;
    font-size:.78rem;
    font-family:inherit;
    min-width:0;
}

.form-field textarea[b-808h62qqc8]{
    resize:vertical;
    min-height:3.4rem;
}

.form-field input:focus[b-808h62qqc8],
.form-field textarea:focus[b-808h62qqc8]{
    outline:none;
    border-color:#c92a2a;
    box-shadow:0 0 0 2px #fdecec;
}

.validation-message[b-808h62qqc8],
.form-error[b-808h62qqc8]{
    font-size:.66rem;
    color:#c92a2a;
}

.form-error[b-808h62qqc8]{
    margin-bottom:.4rem;
}

.form-hint[b-808h62qqc8]{
    font-size:.62rem;
    font-weight:400;
    color:#9ca3af;
}

/* ==========================
   Zone de saisie du code (avant le formulaire)
========================== */

.code-zone[b-808h62qqc8]{
    display:flex;
    flex-direction:column;
    gap:.2rem;
    margin-bottom:.55rem;
    padding:.5rem .6rem;
    border:1px dashed #d1d5db;
    border-radius:8px;
    background:#f9fafb;
}

.code-zone label[b-808h62qqc8]{
    font-size:.68rem;
    font-weight:600;
    color:#374151;
}

.code-row[b-808h62qqc8]{
    display:flex;
    gap:.4rem;
}

.code-input[b-808h62qqc8]{
    flex:1;
    min-width:0;
    border:1px solid #d1d5db;
    border-radius:6px;
    padding:.3rem .5rem;
    font-size:.8rem;
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.code-field[b-808h62qqc8]{
    flex:1;
    min-width:0;
    border:1px solid #d1d5db;
    border-radius:6px;
    padding:.3rem .5rem;
    font-size:.78rem;
    font-family:inherit;
}

.code-input:focus[b-808h62qqc8],
.code-field:focus[b-808h62qqc8]{
    outline:none;
    border-color:#c92a2a;
    box-shadow:0 0 0 2px #fdecec;
}

.code-actions[b-808h62qqc8]{
    display:flex;
    justify-content:flex-end;
    margin-top:.1rem;
}

.code-zone.is-ok[b-808h62qqc8]{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    border-style:solid;
    border-color:#86efac;
    background:#f0fdf4;
    font-size:.72rem;
    font-weight:600;
    color:#166534;
}

/* ==========================
   Confirmation d'ajout
========================== */

.success-box[b-808h62qqc8]{
    margin-bottom:.6rem;
    padding:.6rem .7rem;
    border:1px solid #86efac;
    border-radius:8px;
    background:#f0fdf4;
}

.success-title[b-808h62qqc8]{
    font-size:.82rem;
    font-weight:700;
    color:#166534;
}

.success-box p[b-808h62qqc8]{
    margin:.2rem 0 0;
    font-size:.74rem;
    color:#374151;
}

/* ==========================
   Import d'image
========================== */

.image-current[b-808h62qqc8]{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:.2rem;
}

.image-preview[b-808h62qqc8]{
    width:48px;
    height:36px;
    object-fit:cover;
    border-radius:6px;
    border:1px solid #e5e7eb;
}

.image-file-name[b-808h62qqc8]{
    flex:1;
    min-width:0;
    font-size:.72rem;
    color:#374151;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.link-btn[b-808h62qqc8]{
    border:none;
    background:none;
    padding:0;
    font-size:.7rem;
    font-weight:600;
    color:#c92a2a;
    cursor:pointer;
    text-decoration:underline;
}

.image-row[b-808h62qqc8]{
    display:flex;
    gap:.4rem;
    align-items:center;
}

.image-row > *[b-808h62qqc8]{
    flex:1;
    min-width:0;
}

.form-field .image-input[b-808h62qqc8]{
    padding:.2rem;
    font-size:.7rem;
    background:#f9fafb;
    cursor:pointer;
}

/* Dernière ligne du formulaire : URL de l'image + boutons (gagne une ligne, évite le défilement) */
.modal-actions--footer[b-808h62qqc8]{
    align-items:center;
}

.url-input[b-808h62qqc8]{
    flex:1;
    min-width:0;
    border:1px solid #d1d5db;
    border-radius:6px;
    padding:.3rem .5rem;
    font-size:.74rem;
    font-family:inherit;
}

.url-input:focus[b-808h62qqc8]{
    outline:none;
    border-color:#c92a2a;
    box-shadow:0 0 0 2px #fdecec;
}

/* ==========================
   Sélecteur d'importance (formulaire)
========================== */

.importance-row[b-808h62qqc8]{
    display:flex;
    align-items:center;
    gap:.6rem;
    margin-bottom:.5rem;
}

.importance-row label[b-808h62qqc8]{
    flex:0 0 auto;
    font-size:.68rem;
    font-weight:600;
    color:#374151;
    margin:0;
}

.importance-picker[b-808h62qqc8]{
    flex:1;
    display:flex;
    gap:.3rem;
}

.importance-option[b-808h62qqc8]{
    flex:1;
    padding:.22rem .4rem;
    border:1px solid #d1d5db;
    border-radius:6px;
    background:#fff;
    color:#374151;
    font-size:.72rem;
    font-weight:600;
    cursor:pointer;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}

.importance-option.active.level-0[b-808h62qqc8]{
    background:#f3f4f6;
    border-color:#6b7280;
}

.importance-option.active.level-1[b-808h62qqc8]{
    background:#dc2626;
    border-color:#dc2626;
    color:#fff;
}

.importance-option.active.level-2[b-808h62qqc8]{
    background:#991b1b;
    border-color:#991b1b;
    color:#fff;
}

/* ==========================
   Boutons du modal
========================== */

.modal-actions[b-808h62qqc8]{
    display:flex;
    justify-content:flex-end;
    gap:.5rem;
    margin-top:.3rem;
}

.btn-cancel[b-808h62qqc8],
.btn-save[b-808h62qqc8],
.btn-delete[b-808h62qqc8]{
    border:none;
    border-radius:6px;
    padding:.35rem .85rem;
    font-size:.78rem;
    font-weight:600;
    cursor:pointer;
}

.btn-compact[b-808h62qqc8]{
    padding:.3rem .7rem;
    white-space:nowrap;
}

.btn-cancel[b-808h62qqc8]{
    background:#f3f4f6;
    color:#374151;
}

.btn-save[b-808h62qqc8]{
    background:#c92a2a;
    color:#fff;
}

.btn-delete[b-808h62qqc8]{
    background:#991b1b;
    color:#fff;
}

.btn-save:disabled[b-808h62qqc8],
.btn-cancel:disabled[b-808h62qqc8],
.btn-delete:disabled[b-808h62qqc8]{
    opacity:.6;
    cursor:not-allowed;
}

.delete-text[b-808h62qqc8]{
    margin:0 0 .6rem;
    font-size:.8rem;
    color:#374151;
    line-height:1.4;
}

/* ==========================
   Skeleton (chargement)
========================== */

.skeleton[b-808h62qqc8]{
    position:relative;
    display:block;
    background:#e5e7eb;
    border-radius:6px;
    overflow:hidden;
}

.skeleton[b-808h62qqc8]::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.6) 50%,
        rgba(255,255,255,0) 100%
    );
    animation:skeleton-shimmer-b-808h62qqc8 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-808h62qqc8{
    100%{ transform:translateX(100%); }
}

.pager-dot--skeleton[b-808h62qqc8]{
    width:10px;
    height:10px;
    border-radius:50%;
    cursor:default;
}
/* Squelette : bande d'importance en haut à droite, comme la vraie */
.news-rating-overlay.is-skeleton[b-808h62qqc8]{
    background:rgba(20,20,22,.35);
}

.news-rating-overlay.is-skeleton .skeleton-line--rating[b-808h62qqc8]{
    width:80px;
    height:10px;
}
/* /Components/Cards/OrganismesCards.razor.rz.scp.css */
/* ==========================================
   Liste des organismes
========================================== */

.procedure-list[b-hjoqplsibe] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .5rem;
}

/* Défilement horizontal (si utilisé) */

.procedure-scroll[b-hjoqplsibe] {
    display: flex;
    gap: 1rem;
    padding: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.procedure-scroll[b-hjoqplsibe]::-webkit-scrollbar {
    display: none;
}

/* ==========================================
   Carte
========================================== */

.procedure-card[b-hjoqplsibe] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    padding: .45rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s ease;
}

.procedure-card:hover[b-hjoqplsibe] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.procedure-card.active[b-hjoqplsibe] {
    background: #fdecec;
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.procedure-card.active .procedure-name[b-hjoqplsibe],
.procedure-card.active .procedure-description[b-hjoqplsibe],
.procedure-card.active .procedure-info[b-hjoqplsibe] {
    color: #7a1f1f;
}

/* ==========================================
   Icône
========================================== */

.procedure-icon[b-hjoqplsibe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fdecec;
    color: #fff;
    font-size: .7rem;
}

/* ==========================================
   Contenu
========================================== */

.procedure-content[b-hjoqplsibe] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
    padding-right: 48px;
}

.procedure-name[b-hjoqplsibe] {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.procedure-description[b-hjoqplsibe] {
    font-size: .65rem;
    line-height: 1.25;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.procedure-info[b-hjoqplsibe] {
    margin-top: .15rem;
    font-size: .6rem;
    color: #c92a2a;
}

/* ==========================================
   Actions (modifier / supprimer)
========================================== */

.procedure-actions[b-hjoqplsibe] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
}

.procedure-card:hover .procedure-actions[b-hjoqplsibe] {
    opacity: 1;
}

.procedure-action-btn[b-hjoqplsibe] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.procedure-action-btn:hover[b-hjoqplsibe] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.procedure-action-btn:active[b-hjoqplsibe] {
    transform: scale(.95);
}

/* ==========================================
   Message vide
========================================== */

.empty-procedure[b-hjoqplsibe] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* ==========================================
   Responsive
========================================== */

@media (max-width: 640px) {

    .procedure-card[b-hjoqplsibe] {
        gap: .4rem;
        padding: .45rem;
    }

    .procedure-icon[b-hjoqplsibe] {
        width: 20px;
        height: 20px;
        font-size: .65rem;
    }

    .procedure-name[b-hjoqplsibe] { font-size: .72rem; }
    .procedure-description[b-hjoqplsibe] { font-size: .62rem; }
    .procedure-info[b-hjoqplsibe] { font-size: .58rem; }

    .procedure-actions[b-hjoqplsibe] {
        opacity: 1;
    }
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : tiroir gauche
   Cartes compactes lisibles (comme Procédures), SANS ombre
========================================================== */

/* ==========================================================
   MOBILE : liste en miniature (même rendu qu'Immigration)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .procedure-list[b-hjoqplsibe] { gap: .25rem; justify-content: flex-start; }

    .procedure-card[b-hjoqplsibe] {
        padding: .25rem .4rem;
        gap: .4rem;
        align-items: center;
        border-radius: 8px;
    }

    .procedure-icon[b-hjoqplsibe] { width: 18px; height: 18px; font-size: .6rem; }

    .procedure-content[b-hjoqplsibe] { padding-right: 46px; gap: .05rem; }
    .procedure-name[b-hjoqplsibe] { font-size: .7rem; line-height: 1.15; }
    .procedure-description[b-hjoqplsibe] { font-size: .54rem; line-height: 1.15; }
    .procedure-info[b-hjoqplsibe] { font-size: .5rem; }

    .procedure-actions[b-hjoqplsibe] {
        top: 50%;
        right: 6px;
        transform: translateY(-50%);
        gap: 4px;
        opacity: 1;
    }

    .procedure-action-btn[b-hjoqplsibe] { width: 18px; height: 18px; font-size: .55rem; }

    /* pas d'effet de survol qui décale la carte sur tactile */
    .procedure-card:hover[b-hjoqplsibe],
    .procedure-card:hover .procedure-content[b-hjoqplsibe] { transform: none; }
}

/* Paysage compact : un peu plus petit */
@media (max-height: 500px) and (orientation: landscape) {

    .procedure-card[b-hjoqplsibe] { padding: .2rem .3rem; }
    .procedure-icon[b-hjoqplsibe] { width: 14px; height: 14px; font-size: .45rem; }
    .procedure-name[b-hjoqplsibe] { font-size: .5rem; }
    .procedure-description[b-hjoqplsibe] { font-size: .44rem; }
    .procedure-content[b-hjoqplsibe] { padding-right: 36px; }
    .procedure-action-btn[b-hjoqplsibe] { width: 14px; height: 14px; font-size: .42rem; }
}
/* /Components/Cards/OutilsAgentServiceCards.razor.rz.scp.css */
/* ==========================================
   Liste des services réglementés
========================================== */

.outilsAgentService-list[b-hvzzbia1h2] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .2rem;
}


/* ==========================================
   Carte
========================================== */

.outilsAgentService-card[b-hvzzbia1h2] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;

    width: 100%;
    padding: .45rem;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    cursor: pointer;
    transition: all .2s ease;
}

.outilsAgentService-card:hover[b-hvzzbia1h2] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsAgentService-card:active[b-hvzzbia1h2] {
    transform: scale(.98);
}

.outilsAgentService-card.active[b-hvzzbia1h2] {
    background: #fdecec;
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsAgentService-card.active .outilsAgentService-name[b-hvzzbia1h2],
.outilsAgentService-card.active .outilsAgentService-delai[b-hvzzbia1h2],
.outilsAgentService-card.active .outilsAgentService-cout[b-hvzzbia1h2] {
    color: #7a1f1f;
}

/* ==========================================
   Icône
========================================== */

.outilsAgentService-icon[b-hvzzbia1h2] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .7rem;
}

.outilsAgentService-card.active .outilsAgentService-icon[b-hvzzbia1h2] {
    background: #c92a2a;
    color: #fff;
}


/* ==========================================
   Contenu
========================================== */

.outilsAgentService-content[b-hvzzbia1h2] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1;
    min-width: 0;
}

.outilsAgentService-name[b-hvzzbia1h2] {
    width: 100%;

    font-size: .75rem;
    font-weight: 500;
    line-height: 1.1;
    color: #111827;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.outilsAgentService-row[b-hvzzbia1h2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.outilsAgentService-delai[b-hvzzbia1h2],
.outilsAgentService-cout[b-hvzzbia1h2] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;

    font-size: .7rem;
    font-weight: 400;
    color: #656262;
    white-space: nowrap;
}


/* ==========================================
   Skeleton (shimmer)
========================================== */

.skeleton-card[b-hvzzbia1h2] {
    cursor: default;
    pointer-events: none;
}

.skeleton[b-hvzzbia1h2] {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}

.skeleton[b-hvzzbia1h2]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translateX(-100%);
    animation: outilsAgentService-shine-b-hvzzbia1h2 1.3s infinite;
}

@keyframes outilsAgentService-shine-b-hvzzbia1h2 {
    100% { transform: translateX(100%); }
}

.outilsAgentService-icon.skeleton[b-hvzzbia1h2] { border: 0; }

.text[b-hvzzbia1h2]  { height: 9px; border-radius: 8px; }
.name[b-hvzzbia1h2]  { width: 70%; height: 11px; }
.delai[b-hvzzbia1h2] { width: 45%; }
.cout[b-hvzzbia1h2]  { width: 25%; }

/* Décalage de la lumière d'une carte à l'autre */
.skeleton-card:nth-child(2n) .skeleton[b-hvzzbia1h2]::after { animation-delay: .2s; }
.skeleton-card:nth-child(3n) .skeleton[b-hvzzbia1h2]::after { animation-delay: .4s; }
.skeleton-card:nth-child(5n) .skeleton[b-hvzzbia1h2]::after { animation-delay: .6s; }


/* ==========================================
   Messages
========================================== */

.outilsAgentService-error[b-hvzzbia1h2] {
    padding: .7rem .8rem;

    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;

    color: #c92a2a;
    font-size: .65rem;
}

.empty-outilsAgentService[b-hvzzbia1h2] {
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
    font-size: .75rem;
}


/* ==========================================
   Responsive
========================================== */

@media (max-width: 640px) {

    .outilsAgentService-name[b-hvzzbia1h2] { font-size: .72rem; }

    .outilsAgentService-delai[b-hvzzbia1h2],
    .outilsAgentService-cout[b-hvzzbia1h2] { font-size: .65rem; }
}

/* ==========================================================
   MOBILE : liste en miniature (même rendu que Finance)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .outilsAgentService-list[b-hvzzbia1h2] { gap: .25rem; padding: .1rem 0; }

    .outilsAgentService-card[b-hvzzbia1h2] {
        padding: .25rem;
        gap: .3rem;
        border-radius: 8px;
    }

    .outilsAgentService-icon[b-hvzzbia1h2] {
        width: 18px;
        height: 18px;
        font-size: .55rem;
    }

    .outilsAgentService-content[b-hvzzbia1h2] { gap: .1rem; }

    .outilsAgentService-name[b-hvzzbia1h2] { font-size: .7rem; line-height: 1.15; }

    .outilsAgentService-delai[b-hvzzbia1h2],
    .outilsAgentService-cout[b-hvzzbia1h2] { font-size: .55rem; }

    /* pas d'effet de survol qui décale la carte sur tactile */
    .outilsAgentService-card:hover[b-hvzzbia1h2] { transform: none; }
}
/* /Components/Cards/OutilsAlertesCards.razor.rz.scp.css */
/* ==========================================
   Défilement horizontal
========================================== */

.outilsAlertes-scroll[b-ogc685yopj]{
display:flex;
gap:1rem;
overflow-x:auto;
overflow-y:hidden;
padding:.5rem;
scrollbar-width:none;
-ms-overflow-style:none;
}

.outilsAlertes-scroll[b-ogc685yopj]::-webkit-scrollbar{
display:none;
}

.outilsAlertes-list[b-ogc685yopj]{
display:flex;
flex-direction:row;
gap:.5rem;
overflow-x:auto;
overflow-y:hidden;
padding:.5rem;
scrollbar-width:none;
-ms-overflow-style:none;
}

.outilsAlertes-list[b-ogc685yopj]::-webkit-scrollbar{
display:none;
}


/* ==========================================
   Carte
========================================== */

.outilsAlertes-card[b-ogc685yopj]{
flex:0 0 auto;
width:230px;
height:46px;
padding:.4rem .5rem;

display:flex;
align-items:center;
gap:.4rem;

background:#fff;
border:1px solid #eee;
border-radius:10px;

cursor:pointer;
transition:.2s;
}

.outilsAlertes-card:hover[b-ogc685yopj]{
transform:translateX(3px);
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.outilsAlertes-card.active[b-ogc685yopj]{
background:#fdecec;
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}


/* ==========================================
   Icône
========================================== */

.outilsAlertes-icon[b-ogc685yopj]{
width:22px;
height:22px;
flex-shrink:0;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;
background:#fdecec;
color:#c92a2a;

font-size:.7rem;
}

.outilsAlertes-card.active .outilsAlertes-icon[b-ogc685yopj]{
background:#c92a2a;
color:#fff;
}


/* ==========================================
   Contenu
========================================== */

.outilsAlertes-content[b-ogc685yopj]{
flex:1;
min-width:0;

display:flex;
flex-direction:column;
gap:.25rem;
}

.outilsAlertes-name[b-ogc685yopj]{
font-size:.7rem;
font-weight:700;
line-height:1;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

color:#111827;
}


/* ==========================================
   Ligne délai (gauche) + coût (droite)
========================================== */

.outilsAlertes-row[b-ogc685yopj]{
display:flex;
align-items:center;
justify-content:space-between;

width:100%;
}

.outilsAlertes-delai[b-ogc685yopj],
.outilsAlertes-cout[b-ogc685yopj]{
display:inline-flex;
align-items:center;
gap:.2rem;

font-size:.6rem;
font-weight:600;
color:#c92a2a;

white-space:nowrap;
}

.outilsAlertes-card.active .outilsAlertes-name[b-ogc685yopj],
.outilsAlertes-card.active .outilsAlertes-delai[b-ogc685yopj],
.outilsAlertes-card.active .outilsAlertes-cout[b-ogc685yopj]{
color:#7a1f1f;
}


/* ==========================================
   Skeleton Shimmer
========================================== */

.skeleton-card[b-ogc685yopj]{
cursor:default;
pointer-events:none;
}

.skeleton[b-ogc685yopj]{
position:relative;
overflow:hidden;
background:#e5e7eb;
}

.skeleton[b-ogc685yopj]::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.85),
transparent
);
transform:translateX(-100%);
animation:outilsAlertes-shine-b-ogc685yopj 1.3s infinite;
}

@keyframes outilsAlertes-shine-b-ogc685yopj{
100%{
transform:translateX(100%);
}
}

.outilsAlertes-icon.skeleton[b-ogc685yopj]{
border:0;
}

.text[b-ogc685yopj]{
height:8px;
border-radius:6px;
}

.name[b-ogc685yopj]{
width:70%;
height:10px;
}

.delai[b-ogc685yopj]{
width:45%;
}

.cout[b-ogc685yopj]{
width:25%;
}

.skeleton-card:nth-child(2n) .skeleton[b-ogc685yopj]::after{
animation-delay:.2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-ogc685yopj]::after{
animation-delay:.4s;
}


/* ==========================================
   Messages
========================================== */

.outilsAlertes-error[b-ogc685yopj]{
padding:.7rem .8rem;
background:#fef2f2;
border:1px solid #fecaca;
border-radius:10px;
color:#c92a2a;
font-size:.65rem;
}

.empty-outilsAlertes[b-ogc685yopj]{
padding:2rem;
text-align:center;
color:#6b7280;
}


/* ==========================================
   Mobile
========================================== */

@media(max-width:640px){
.outilsAlertes-card[b-ogc685yopj]{
width:240px;
padding:.35rem .4rem;
    }
.outilsAlertes-icon[b-ogc685yopj]{
width:20px;
height:20px;
font-size:.65rem;
    }
.outilsAlertes-name[b-ogc685yopj]{
font-size:.68rem;
    }
.outilsAlertes-delai[b-ogc685yopj],
.outilsAlertes-cout[b-ogc685yopj]{
font-size:.58rem;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .outilsAlertes-list[b-ogc685yopj] { gap: .3rem; padding: .1rem; }
    .outilsAlertes-card[b-ogc685yopj] { width: 120px; height: 34px; padding: .1rem .3rem; gap: .25rem; border-radius: 7px; }
    .outilsAlertes-icon[b-ogc685yopj] { width: 14px; height: 14px; font-size: .45rem; }
    .outilsAlertes-name[b-ogc685yopj] { font-size: .5rem; }
    .outilsAlertes-delai[b-ogc685yopj],
    .outilsAlertes-cout[b-ogc685yopj] { font-size: .4rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .outilsAlertes-card[b-ogc685yopj] { width: 100px; height: 28px; }
}
/* /Components/Cards/OutilsEmploiCards.razor.rz.scp.css */
/* ==========================================
   Défilement horizontal
========================================== */

.outilsEmploi-scroll[b-ojr5c7mk4s]{
display:flex;
gap:1rem;

overflow-x:auto;
overflow-y:hidden;

padding:.5rem;

scrollbar-width:none;
-ms-overflow-style:none;
}

.outilsEmploi-scroll[b-ojr5c7mk4s]::-webkit-scrollbar{
display:none;
}

/* ==========================================
   Liste verticale
========================================== */

.outilsEmploi-list[b-ojr5c7mk4s]{
display:flex;
flex-direction:column;
gap:.5rem;
}

/* ==========================================
   Carte
========================================== */

.outilsEmploi-card[b-ojr5c7mk4s]{
display:flex;
align-items:flex-start;
gap:.5rem;

width:100%;

padding:.4rem .3rem;

background:#fff;

border:1px solid #e5e7eb;
border-radius:10px;

cursor:pointer;

transition:.2s;
}

.outilsEmploi-card:hover[b-ojr5c7mk4s]{
transform:translateX(3px);

border-color:#fdecec;

box-shadow:0 4px 10px #e5e7eb;
}

.outilsEmploi-card.active[b-ojr5c7mk4s]{
background:#fdecec;

border-color:#fdecec;

box-shadow:0 4px 10px #e5e7eb;
}

.outilsEmploi-card.active .outilsEmploi-name[b-ojr5c7mk4s],
.outilsEmploi-card.active .outilsEmploi-description[b-ojr5c7mk4s]{
color:#7a1f1f;
}

/* ==========================================
   Icône
========================================== */

.outilsEmploi-icon[b-ojr5c7mk4s]{
width:22px;
height:22px;

flex-shrink:0;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:#fdecec;

color:#fff;

font-size:.7rem;
}

/* ==========================================
   Contenu
========================================== */

.outilsEmploi-content[b-ojr5c7mk4s]{
display:flex;
flex-direction:column;
gap:.15rem;
}

.outilsEmploi-name[b-ojr5c7mk4s]{
font-size:.8rem;
font-weight:700;
line-height:1;

color:#111827;
}

.outilsEmploi-description[b-ojr5c7mk4s]{
font-size:.65rem;
line-height:1.2;

color:#6b7280;
}

.outilsEmploi-info[b-ojr5c7mk4s]{
margin-top:.2rem;

font-size:.6rem;

color:#c92a2a;
}

/* ==========================================
   Message vide
========================================== */

.empty-outilsEmploi[b-ojr5c7mk4s]{
padding:2rem;

text-align:center;

color:#6b7280;
}

/* ==========================================
   Responsive
========================================== */

@media(max-width:640px){

.outilsEmploi-card[b-ojr5c7mk4s]{
padding:.45rem .5rem;
    }

.outilsEmploi-icon[b-ojr5c7mk4s]{
width:20px;
height:20px;

font-size:.65rem;
    }

.outilsEmploi-name[b-ojr5c7mk4s]{
font-size:.72rem;
    }

}
/* /Components/Cards/OutilsEvaluationCards.razor.rz.scp.css */
.outilsEvaluation-scroll[b-fbu10hjoi2]{
display:flex;
gap:1rem;
overflow-x:auto;
overflow-y:hidden;
padding:.5rem;
scrollbar-width:none;
-ms-overflow-style:none;
}

.outilsEvaluation-scroll[b-fbu10hjoi2]::-webkit-scrollbar{
display:none;
}

.outilsEvaluation-list[b-fbu10hjoi2]{
display:flex;
flex-direction:column;
gap:.5rem;
}

.outilsEvaluation-card[b-fbu10hjoi2]{
display:flex;
align-items:flex-start;
gap:.5rem;
width:100%;
padding:.4rem .3rem;
background:#fff;
border:1px solid #e5e7eb;
border-radius:10px;
cursor:pointer;
transition:.2s;
}

.outilsEvaluation-card:hover[b-fbu10hjoi2]{
transform:translateX(3px);
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.outilsEvaluation-card.active[b-fbu10hjoi2]{
background:#fdecec;
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.outilsEvaluation-card.active .outilsEvaluation-name[b-fbu10hjoi2],
.outilsEvaluation-card.active .outilsEvaluation-description[b-fbu10hjoi2]{
color:#7a1f1f;
}

.outilsEvaluation-icon[b-fbu10hjoi2]{
width:22px;
height:22px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#fdecec;
color:#fff;
font-size:.7rem;
}

.outilsEvaluation-content[b-fbu10hjoi2]{
display:flex;
flex-direction:column;
gap:.15rem;
}

.outilsEvaluation-name[b-fbu10hjoi2]{
font-size:.8rem;
font-weight:700;
line-height:1;
color:#111827;
}

.outilsEvaluation-description[b-fbu10hjoi2]{
font-size:.65rem;
line-height:1.2;
color:#6b7280;
}

.outilsEvaluation-info[b-fbu10hjoi2]{
margin-top:.2rem;
font-size:.6rem;
color:#c92a2a;
}

.empty-outilsEvaluation[b-fbu10hjoi2]{
padding:2rem;
text-align:center;
color:#6b7280;
}

@media(max-width:640px){
.outilsEvaluation-card[b-fbu10hjoi2]{
padding:.45rem .5rem;
    }
.outilsEvaluation-icon[b-fbu10hjoi2]{
width:20px;
height:20px;
font-size:.65rem;
    }
.outilsEvaluation-name[b-fbu10hjoi2]{
font-size:.72rem;
    }
}
/* /Components/Cards/OutilsFinanceCards.razor.rz.scp.css */
/* ==========================================
   Liste des outils financiers
========================================== */

.outilsFinance-list[b-s24xeasjd6] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


/* ==========================================
   Carte outil financier
========================================== */

.outilsFinance-item[b-s24xeasjd6] {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: .5rem;

    width: 100%;
    padding: .45rem;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    cursor: pointer;
    color: #374151;

    transition: all .2s ease;
}

.outilsFinance-item:hover[b-s24xeasjd6] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsFinance-item:active[b-s24xeasjd6] {
    transform: scale(.98);
}

.outilsFinance-item.active[b-s24xeasjd6] {
    background: #fdecec;
    border-color: #fdecec;
    color: #7a1f1f;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   Contenu
========================================== */

.outilsFinance-content[b-s24xeasjd6] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
    padding-right: 48px; /* évite que le texte passe sous les icônes d'action */
}

.outilsFinance-name[b-s24xeasjd6] {
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.1;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .2s ease;
}

.outilsFinance-description[b-s24xeasjd6] {
    font-size: .65rem;
    line-height: 1.25;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outilsFinance-item.active .outilsFinance-name[b-s24xeasjd6],
.outilsFinance-item.active .outilsFinance-description[b-s24xeasjd6] {
    color: #7a1f1f;
}

.outilsFinance-item:hover .outilsFinance-content[b-s24xeasjd6] {
    transform: translateX(3px);
}


/* ==========================================
   Message vide
========================================== */

.empty-outilsFinance[b-s24xeasjd6] {
    padding: 2rem;
    text-align: center;
    color: black;
}


/* ==========================================
   Image
========================================== */

.outilsFinance-image[b-s24xeasjd6] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    border: 2px solid #fdecec;
}

.outilsFinance-image img[b-s24xeasjd6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.outilsFinance-item.active .outilsFinance-image[b-s24xeasjd6] {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}


/* ==========================================
   Actions (modifier / supprimer)
========================================== */

.outilsFinance-actions[b-s24xeasjd6] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
}

.outilsFinance-item:hover .outilsFinance-actions[b-s24xeasjd6] {
    opacity: 1;
}

.outilsFinance-action-btn[b-s24xeasjd6] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.outilsFinance-action-btn:hover[b-s24xeasjd6] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.outilsFinance-action-btn:active[b-s24xeasjd6] {
    transform: scale(.95);
}


/* ==========================================
   Responsive
========================================== */

@media (max-width: 640px) {

    .outilsFinance-item[b-s24xeasjd6] {
        padding: .45rem;
    }

    .outilsFinance-name[b-s24xeasjd6] {
        font-size: .72rem;
    }

    .outilsFinance-description[b-s24xeasjd6] {
        font-size: .62rem;
    }

    .outilsFinance-actions[b-s24xeasjd6] {
        opacity: 1; /* toujours visible sur mobile, pas de hover */
    }
}

/* ==========================================================
   MOBILE : liste des outils en miniature (même rendu qu'Immigration)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .outilsFinance-list[b-s24xeasjd6] { gap: .25rem; }

    .outilsFinance-item[b-s24xeasjd6] {
        padding: .25rem;
        gap: .3rem;
        border-radius: 8px;
    }

    .outilsFinance-image[b-s24xeasjd6] {
        width: 18px;
        height: 18px;
        border-width: 1px;
    }

    .outilsFinance-content[b-s24xeasjd6] {
        gap: .05rem;
        padding-right: 36px;
    }

    .outilsFinance-name[b-s24xeasjd6] { font-size: .7rem; line-height: 1.15; }
    .outilsFinance-description[b-s24xeasjd6] { font-size: .5rem; line-height: 1.15; }

    .outilsFinance-actions[b-s24xeasjd6] { top: 3px; right: 3px; gap: 2px; opacity: 1; }
    .outilsFinance-action-btn[b-s24xeasjd6] { width: 14px; height: 14px; font-size: .4rem; }

    /* pas d'effet de survol qui décale la carte sur tactile */
    .outilsFinance-item:hover[b-s24xeasjd6],
    .outilsFinance-item:hover .outilsFinance-content[b-s24xeasjd6] { transform: none; }
}
/* /Components/Cards/OutilsJuridiqueCards.razor.rz.scp.css */
/* ==========================================
   Liste des outils juridiques
========================================== */

.outilsJuridique-list[b-px6sgpluc9] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


/* ==========================================
   Carte outil juridique
========================================== */

.outilsJuridique-item[b-px6sgpluc9] {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: .5rem;

    width: 100%;
    padding: .45rem;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    cursor: pointer;
    color: #374151;

    transition: all .2s ease;
}

.outilsJuridique-item:hover[b-px6sgpluc9] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsJuridique-item:active[b-px6sgpluc9] {
    transform: scale(.98);
}

.outilsJuridique-item.active[b-px6sgpluc9] {
    background: #fdecec;
    border-color: #fdecec;
    color: #7a1f1f;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   Contenu
========================================== */

.outilsJuridique-content[b-px6sgpluc9] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
    padding-right: 48px; /* évite que le texte passe sous les icônes d'action */
}

.outilsJuridique-name[b-px6sgpluc9] {
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.1;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .2s ease;
}

.outilsJuridique-description[b-px6sgpluc9] {
    font-size: .65rem;
    line-height: 1.25;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outilsJuridique-item.active .outilsJuridique-name[b-px6sgpluc9],
.outilsJuridique-item.active .outilsJuridique-description[b-px6sgpluc9] {
    color: #7a1f1f;
}

.outilsJuridique-item:hover .outilsJuridique-content[b-px6sgpluc9] {
    transform: translateX(3px);
}


/* ==========================================
   Message vide
========================================== */

.empty-outilsJuridique[b-px6sgpluc9] {
    padding: 2rem;
    text-align: center;
    color: black;
}


/* ==========================================
   Image
========================================== */

.outilsJuridique-image[b-px6sgpluc9] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    border: 2px solid #fdecec;
}

.outilsJuridique-image img[b-px6sgpluc9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.outilsJuridique-item.active .outilsJuridique-image[b-px6sgpluc9] {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}


/* ==========================================
   Actions (modifier / supprimer)
========================================== */

.outilsJuridique-actions[b-px6sgpluc9] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
}

.outilsJuridique-item:hover .outilsJuridique-actions[b-px6sgpluc9] {
    opacity: 1;
}

.outilsJuridique-action-btn[b-px6sgpluc9] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.outilsJuridique-action-btn:hover[b-px6sgpluc9] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.outilsJuridique-action-btn:active[b-px6sgpluc9] {
    transform: scale(.95);
}


/* ==========================================
   Responsive
========================================== */

@media (max-width: 640px) {

    .outilsJuridique-item[b-px6sgpluc9] {
        padding: .45rem;
    }

    .outilsJuridique-name[b-px6sgpluc9] {
        font-size: .72rem;
    }

    .outilsJuridique-description[b-px6sgpluc9] {
        font-size: .62rem;
    }

    .outilsJuridique-actions[b-px6sgpluc9] {
        opacity: 1; /* toujours visible sur mobile, pas de hover */
    }
}

/* ==========================================================
   MOBILE : liste des outils en miniature (même rendu que Finance)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .outilsJuridique-list[b-px6sgpluc9] { gap: .25rem; }

    .outilsJuridique-item[b-px6sgpluc9] {
        padding: .25rem;
        gap: .3rem;
        border-radius: 8px;
    }

    .outilsJuridique-image[b-px6sgpluc9] {
        width: 18px;
        height: 18px;
        border-width: 1px;
    }

    .outilsJuridique-content[b-px6sgpluc9] {
        gap: .05rem;
        padding-right: 36px;
    }

    .outilsJuridique-name[b-px6sgpluc9] { font-size: .7rem; line-height: 1.15; }
    .outilsJuridique-description[b-px6sgpluc9] { font-size: .5rem; line-height: 1.15; }

    .outilsJuridique-actions[b-px6sgpluc9] { top: 3px; right: 3px; gap: 2px; opacity: 1; }
    .outilsJuridique-action-btn[b-px6sgpluc9] { width: 14px; height: 14px; font-size: .4rem; }

    /* pas d'effet de survol qui décale la carte sur tactile */
    .outilsJuridique-item:hover[b-px6sgpluc9],
    .outilsJuridique-item:hover .outilsJuridique-content[b-px6sgpluc9] { transform: none; }
}
/* /Components/Cards/OutilsLogementCards.razor.rz.scp.css */
/* ==========================================
   Liste des outils de logement
========================================== */

.outilsLogement-list[b-148lnz5zgq] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


/* ==========================================
   Carte outil de logement
========================================== */

.outilsLogement-item[b-148lnz5zgq] {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: .5rem;

    width: 100%;
    padding: .45rem;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    cursor: pointer;
    color: #374151;

    transition: all .2s ease;
}

.outilsLogement-item:hover[b-148lnz5zgq] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsLogement-item:active[b-148lnz5zgq] {
    transform: scale(.98);
}

.outilsLogement-item.active[b-148lnz5zgq] {
    background: #fdecec;
    border-color: #fdecec;
    color: #7a1f1f;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   Contenu
========================================== */

.outilsLogement-content[b-148lnz5zgq] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
    padding-right: 48px; /* évite que le texte passe sous les icônes d'action */
}

.outilsLogement-name[b-148lnz5zgq] {
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.1;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .2s ease;
}

.outilsLogement-description[b-148lnz5zgq] {
    font-size: .65rem;
    line-height: 1.25;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outilsLogement-item.active .outilsLogement-name[b-148lnz5zgq],
.outilsLogement-item.active .outilsLogement-description[b-148lnz5zgq] {
    color: #7a1f1f;
}

.outilsLogement-item:hover .outilsLogement-content[b-148lnz5zgq] {
    transform: translateX(3px);
}


/* ==========================================
   Message vide
========================================== */

.empty-outilsLogement[b-148lnz5zgq] {
    padding: 2rem;
    text-align: center;
    color: black;
}


/* ==========================================
   Image
========================================== */

.outilsLogement-image[b-148lnz5zgq] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    border: 2px solid #fdecec;
}

.outilsLogement-image img[b-148lnz5zgq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.outilsLogement-item.active .outilsLogement-image[b-148lnz5zgq] {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}


/* ==========================================
   Actions (modifier / supprimer)
========================================== */

.outilsLogement-actions[b-148lnz5zgq] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
}

.outilsLogement-item:hover .outilsLogement-actions[b-148lnz5zgq] {
    opacity: 1;
}

.outilsLogement-action-btn[b-148lnz5zgq] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.outilsLogement-action-btn:hover[b-148lnz5zgq] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.outilsLogement-action-btn:active[b-148lnz5zgq] {
    transform: scale(.95);
}


/* ==========================================
   Responsive
========================================== */

@media (max-width: 640px) {

    .outilsLogement-item[b-148lnz5zgq] {
        padding: .45rem;
    }

    .outilsLogement-name[b-148lnz5zgq] {
        font-size: .72rem;
    }

    .outilsLogement-description[b-148lnz5zgq] {
        font-size: .62rem;
    }

    .outilsLogement-actions[b-148lnz5zgq] {
        opacity: 1; /* toujours visible sur mobile, pas de hover */
    }
}

/* ==========================================================
   MOBILE : liste des outils en miniature (même rendu que Finance)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .outilsLogement-list[b-148lnz5zgq] { gap: .25rem; }

    .outilsLogement-item[b-148lnz5zgq] {
        padding: .25rem;
        gap: .3rem;
        border-radius: 8px;
    }

    .outilsLogement-image[b-148lnz5zgq] {
        width: 18px;
        height: 18px;
        border-width: 1px;
    }

    .outilsLogement-content[b-148lnz5zgq] {
        gap: .05rem;
        padding-right: 36px;
    }

    .outilsLogement-name[b-148lnz5zgq] { font-size: .7rem; line-height: 1.15; }
    .outilsLogement-description[b-148lnz5zgq] { font-size: .5rem; line-height: 1.15; }

    .outilsLogement-actions[b-148lnz5zgq] { top: 3px; right: 3px; gap: 2px; opacity: 1; }
    .outilsLogement-action-btn[b-148lnz5zgq] { width: 14px; height: 14px; font-size: .4rem; }

    /* pas d'effet de survol qui décale la carte sur tactile */
    .outilsLogement-item:hover[b-148lnz5zgq],
    .outilsLogement-item:hover .outilsLogement-content[b-148lnz5zgq] { transform: none; }
}
/* /Components/Cards/OutilsPaiementsCards.razor.rz.scp.css */
.outilsPaiements-scroll[b-vc8hs6bszc]{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    overflow-y:hidden;
    padding:.5rem;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.outilsPaiements-scroll[b-vc8hs6bszc]::-webkit-scrollbar{
    display:none;
}

.outilsPaiements-list[b-vc8hs6bszc]{
    display:flex;
    flex-direction:column;
    gap:.5rem;
}

.outilsPaiements-card[b-vc8hs6bszc]{
    display:flex;
    align-items:flex-start;
    gap:.5rem;
    width:100%;
    padding:.4rem .3rem;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    cursor:pointer;
    transition:.2s;
}

.outilsPaiements-card:hover[b-vc8hs6bszc]{
    transform:translateX(3px);
    border-color:#fdecec;
    box-shadow:0 4px 10px #e5e7eb;
}

.outilsPaiements-card.active[b-vc8hs6bszc]{
    background:#fdecec;
    border-color:#fdecec;
    box-shadow:0 4px 10px #e5e7eb;
}

.outilsPaiements-card.active .outilsPaiements-name[b-vc8hs6bszc],
.outilsPaiements-card.active .outilsPaiements-namefull[b-vc8hs6bszc],
.outilsPaiements-card.active .outilsPaiements-date[b-vc8hs6bszc]{
    color:#7a1f1f;
}

.outilsPaiements-icon[b-vc8hs6bszc]{
    width:22px;
    height:22px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fdecec;
    color:#c92a2a;
    font-size:.7rem;
}

.outilsPaiements-content[b-vc8hs6bszc]{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:.25rem;
}

/* wrap : permet à namefull de passer à la ligne */
.outilsPaiements-row[b-vc8hs6bszc]{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:.15rem .5rem;
}

.outilsPaiements-name[b-vc8hs6bszc]{
    order:1;
    flex:1;
    min-width:0;
    font-size:.72rem;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#111827;
}

.outilsPaiements-amount[b-vc8hs6bszc]{
    order:2;
    font-size:.72rem;
    font-weight:700;
    line-height:1;
    color:#111827;
    flex-shrink:0;
}

/* nom complet : sur sa propre ligne, sous le nom et le montant */
.outilsPaiements-namefull[b-vc8hs6bszc]{
    font-size:.6rem;
    line-height:1;
    color:#6b7280;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.outilsPaiements-date[b-vc8hs6bszc]{
    font-size:.6rem;
    line-height:1;
    color:#6b7280;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.outilsPaiements-status[b-vc8hs6bszc]{
    font-size:.5rem;
    font-weight:700;
    line-height:1;
    flex-shrink:0;
    padding:.1rem .4rem;
    border-radius:999px;
}

.outilsPaiements-status.status-attente[b-vc8hs6bszc]{
    background:#fef2f2;
    color:#c92a2a;
}

.outilsPaiements-status.status-paye[b-vc8hs6bszc]{
    background:#ecfdf5;
    color:#059669;
}

.empty-outilsPaiements[b-vc8hs6bszc]{
    padding:2rem;
    text-align:center;
    color:#6b7280;
}

.paiements-error[b-vc8hs6bszc]{
    padding:.9rem;
    background:#fef2f2;
    border:1px solid #fecaca;
    border-radius:10px;
    color:#c92a2a;
    font-size:.75rem;
}

@media(max-width:640px){
    .outilsPaiements-card[b-vc8hs6bszc]{
        padding:.45rem .5rem;
    }
    .outilsPaiements-icon[b-vc8hs6bszc]{
        width:20px;
        height:20px;
        font-size:.65rem;
    }
    .outilsPaiements-name[b-vc8hs6bszc],
    .outilsPaiements-amount[b-vc8hs6bszc]{
        font-size:.68rem;
    }
}

.outilsPaiements-separator[b-vc8hs6bszc]{
    margin-top:.5rem;
    padding:.25rem .3rem 0;
    border-top:1px dashed #e5e7eb;
    font-size:.6rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#6b7280;
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .outilsPaiements-list[b-vc8hs6bszc] { gap: .3rem; }
    .outilsPaiements-card[b-vc8hs6bszc] { padding: .3rem .35rem; gap: .35rem; border-radius: 8px; }
    .outilsPaiements-card:hover[b-vc8hs6bszc] { transform: none; }   /* pas de décalage au toucher */
    .outilsPaiements-icon[b-vc8hs6bszc] { width: 18px; height: 18px; font-size: .55rem; }
    .outilsPaiements-content[b-vc8hs6bszc] { gap: .2rem; }
    .outilsPaiements-name[b-vc8hs6bszc],
    .outilsPaiements-amount[b-vc8hs6bszc] { font-size: .7rem; }
    .outilsPaiements-namefull[b-vc8hs6bszc],
    .outilsPaiements-date[b-vc8hs6bszc] { font-size: .55rem; }
    .outilsPaiements-status[b-vc8hs6bszc] { font-size: .5rem; padding: .08rem .35rem; }
    .outilsPaiements-separator[b-vc8hs6bszc] { font-size: .55rem; margin-top: .3rem; }
    .paiements-error[b-vc8hs6bszc] { font-size: .62rem; padding: .5rem; }
}
/* /Components/Cards/OutilsPreferencesCards.razor.rz.scp.css */
.outilsPreferences-scroll[b-xjos966d2z]{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    overflow-y:hidden;
    padding:.5rem;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.outilsPreferences-scroll[b-xjos966d2z]::-webkit-scrollbar{
    display:none;
}

.outilsPreferences-list[b-xjos966d2z]{
    display:flex;
    flex-direction:column;
    gap:.5rem;
}

.outilsPreferences-card[b-xjos966d2z]{
    display:flex;
    align-items:flex-start;
    gap:.5rem;
    width:100%;
    padding:.4rem .3rem;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    cursor:pointer;
    transition:.2s;
}

.outilsPreferences-card:hover[b-xjos966d2z]{
    transform:translateX(3px);
    border-color:#fdecec;
    box-shadow:0 4px 10px #e5e7eb;
}

.outilsPreferences-card.active[b-xjos966d2z]{
    background:#fdecec;
    border-color:#fdecec;
    box-shadow:0 4px 10px #e5e7eb;
}

.outilsPreferences-card.active .outilsPreferences-name[b-xjos966d2z],
.outilsPreferences-card.active .outilsPreferences-description[b-xjos966d2z]{
    color:#7a1f1f;
}

.outilsPreferences-icon[b-xjos966d2z]{
    width:22px;
    height:22px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fdecec;
    color:#c92a2a;
    font-size:.7rem;
}

.outilsPreferences-content[b-xjos966d2z]{
    display:flex;
    flex-direction:column;
    gap:.15rem;
}

.outilsPreferences-name[b-xjos966d2z]{
    font-size:.7rem;
    font-weight:700;
    line-height:1;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:#111827;
}

.outilsPreferences-description[b-xjos966d2z]{
    font-size:.6rem;
    line-height:1;
    color:#6b7280;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.outilsPreferences-info[b-xjos966d2z]{
    margin-top:.2rem;
    font-size:.6rem;
    color:#c92a2a;
}

.empty-outilsPreferences[b-xjos966d2z]{
    padding:2rem;
    text-align:center;
    color:#6b7280;
}

.preferences-error[b-xjos966d2z]{
    padding:.9rem;
    background:#fef2f2;
    border:1px solid #fecaca;
    border-radius:10px;
    color:#c92a2a;
    font-size:.75rem;
}

@media(max-width:640px){
    .outilsPreferences-card[b-xjos966d2z]{
        padding:.45rem .5rem;
    }
    .outilsPreferences-icon[b-xjos966d2z]{
        width:20px;
        height:20px;
        font-size:.65rem;
    }
    .outilsPreferences-name[b-xjos966d2z]{
        font-size:.72rem;
    }
}
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .outilsPreferences-list[b-xjos966d2z] { gap: .3rem; }

    .outilsPreferences-card[b-xjos966d2z] {
        padding: .3rem .35rem;
        gap: .35rem;
        border-radius: 8px;
        align-items: center;
    }

    .outilsPreferences-card:hover[b-xjos966d2z] { transform: none; }

    .outilsPreferences-icon[b-xjos966d2z] {
        width: 18px;
        height: 18px;
        font-size: .55rem;
    }

    .outilsPreferences-name[b-xjos966d2z] {
        font-size: .68rem;
        line-height: 1.15;
    }

    .outilsPreferences-description[b-xjos966d2z] {
        font-size: .52rem;
        line-height: 1.15;
    }
}
/* /Components/Cards/OutilsProgressionCards.razor.rz.scp.css */
/* =========================
   Scroll
========================= */

.outilsProgression-scroll[b-yc98iiumrr] {
display:flex;
gap:1rem;
overflow-x:auto;
overflow-y:hidden;
padding:.5rem;
scrollbar-width:none;
-ms-overflow-style:none;
}

.outilsProgression-scroll[b-yc98iiumrr]::-webkit-scrollbar {
    display: none;
}


/* =========================
   Liste
========================= */

.outilsProgression-list[b-yc98iiumrr] {
    display: flex;
    flex-direction: row;
    gap: .5rem;
}


/* =========================
   Carte
========================= */

.outilsProgression-card[b-yc98iiumrr] {
flex:0 0 auto;
width:230px;
height:46px;
padding:.2rem .5rem;

display:flex;
align-items:center;
gap:.4rem;

border:1px solid #eee;
border-radius:10px;
background:#fff;

cursor:pointer;
transition:.2s;
}

.outilsProgression-card:hover[b-yc98iiumrr] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsProgression-card.active[b-yc98iiumrr] {
    background: #fdecec;
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsProgression-card.active .outilsProgression-name[b-yc98iiumrr],
.outilsProgression-card.active .outilsProgression-description[b-yc98iiumrr] {
    color: #7a1f1f;
}


/* =========================
   Icône
========================= */

.outilsProgression-icon[b-yc98iiumrr] {
    width: 22px;
    height: 22px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fdecec;
    color: #c92a2a;

    font-size: .7rem;
}

.outilsProgression-card.active .outilsProgression-icon[b-yc98iiumrr] {
    background: #c92a2a;
    color: #fff;
}


/* =========================
   Contenu
========================= */

.outilsProgression-content[b-yc98iiumrr] {
    display: flex;
    flex-direction: column;
    gap: .15rem;

    flex: 1;
    min-width: 0;
}

.outilsProgression-name[b-yc98iiumrr] {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;

    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================
   Ligne Délai / Coût
========================= */

.outilsProgression-row[b-yc98iiumrr] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .5rem;
}

.outilsProgression-description[b-yc98iiumrr] {
    font-size: .65rem;
    line-height: 1.2;

    color: #6b7280;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outilsProgression-info[b-yc98iiumrr] {
    margin-left: auto;
    margin-top: 0;

    font-size: .6rem;
    color: #c92a2a;

    white-space: nowrap;
    flex-shrink: 0;
}


/* =========================
   Aucun résultat
========================= */

.empty-outilsProgression[b-yc98iiumrr] {
    padding: 2rem;

    text-align: center;

    color: #6b7280;
}


/* =========================
   Erreur
========================= */

.outilsProgression-error[b-yc98iiumrr] {
    padding: .7rem .8rem;

    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;

    color: #c92a2a;
    font-size: .65rem;
}


/* =========================
   Skeleton
========================= */

.skeleton-card[b-yc98iiumrr] {
    cursor: default;
    pointer-events: none;
}

.skeleton[b-yc98iiumrr] {
    position: relative;
    overflow: hidden;

    background: #e5e7eb;
}

.skeleton[b-yc98iiumrr]::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .85),
        transparent
    );

    transform: translateX(-100%);

    animation: outilsProgression-shine-b-yc98iiumrr 1.3s infinite;
}

.outilsProgression-bottom[b-yc98iiumrr] {
    position: fixed;
    bottom: 23px;
    left: 250px;
    right: 70px;

    z-index: 900;

    background: #fff;
    padding: .3rem;

    border-radius: 12px 12px 0 0;

    overflow: hidden;

    animation: slideDown .3s ease;
}

@keyframes outilsProgression-shine-b-yc98iiumrr {
    100% {
        transform: translateX(100%);
    }
}

.outilsProgression-icon.skeleton[b-yc98iiumrr] {
    border: 0;
}


/* =========================
   Skeleton texte
========================= */

.text[b-yc98iiumrr] {
    height: 9px;
    border-radius: 8px;
}

.name[b-yc98iiumrr] {
    width: 70%;
    height: 11px;
}

.description[b-yc98iiumrr] {
    width: 50%;
    margin-top: .2rem;
}


/* =========================
   Décalage shimmer
========================= */

.skeleton-card:nth-child(2n) .skeleton[b-yc98iiumrr]::after {
    animation-delay: .2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-yc98iiumrr]::after {
    animation-delay: .4s;
}


/* =========================
   Mobile
========================= */
@media (max-width: 640px) {

    .outilsProgression-card[b-yc98iiumrr] {
        width: 180px;
        padding: .45rem .5rem;
    }

    .outilsProgression-icon[b-yc98iiumrr] {
        width: 20px;
        height: 20px;

        font-size: .65rem;
    }

    .outilsProgression-name[b-yc98iiumrr] {
        font-size: .72rem;
    }

    .outilsProgression-description[b-yc98iiumrr] {
        font-size: .6rem;
    }

    .outilsProgression-info[b-yc98iiumrr] {
        font-size: .55rem;
    }

    .outilsProgression-bottom[b-yc98iiumrr] {
        left: 0;
        right: 0;
        bottom: 0;

        height: 90px;

        border-radius: 16px 16px 0 0;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .outilsProgression-bottom[b-yc98iiumrr] { left: 6px; right: 6px; bottom: 6px; height: 54px; padding: .15rem; border-radius: 10px; }
    .outilsProgression-scroll[b-yc98iiumrr] { gap: .3rem; padding: .1rem; }
    .outilsProgression-card[b-yc98iiumrr] { width: 120px; height: 34px; padding: .1rem .3rem; gap: .25rem; border-radius: 7px; }
    .outilsProgression-icon[b-yc98iiumrr] { width: 14px; height: 14px; font-size: .45rem; }
    .outilsProgression-name[b-yc98iiumrr] { font-size: .5rem; }
    .outilsProgression-description[b-yc98iiumrr] { font-size: .4rem; }
    .outilsProgression-info[b-yc98iiumrr] { font-size: .4rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .outilsProgression-bottom[b-yc98iiumrr] { height: 40px; }
    .outilsProgression-card[b-yc98iiumrr] { width: 100px; height: 28px; }
}
/* /Components/Cards/OutilsRapportAgentCards.razor.rz.scp.css */
/* =====================
   Scroll horizontal
===================== */

.outilsRapportAgent-scroll[b-s86himmlso] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: .2rem;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.outilsRapportAgent-scroll[b-s86himmlso]::-webkit-scrollbar {
    display: none;
}


/* =====================
   Carte
===================== */

.outilsRapportAgent-card[b-s86himmlso] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;

    flex: 0 0 220px;

    padding: .4rem .3rem;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    cursor: pointer;
    transition: .2s;
}

.outilsRapportAgent-card:hover[b-s86himmlso] {
    transform: translateY(-3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsRapportAgent-card.active[b-s86himmlso] {
    background: #fdecec;
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsRapportAgent-card.active .outilsRapportAgent-name[b-s86himmlso],
.outilsRapportAgent-card.active .outilsRapportAgent-delai[b-s86himmlso],
.outilsRapportAgent-card.active .outilsRapportAgent-cout[b-s86himmlso] {
    color: #7a1f1f;
}


/* =====================
   Icône
===================== */

.outilsRapportAgent-icon[b-s86himmlso] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;

    font-size: .7rem;
}

.outilsRapportAgent-card.active .outilsRapportAgent-icon[b-s86himmlso] {
    background: #c92a2a;
    color: #fff;
}


/* =====================
   Contenu
===================== */

.outilsRapportAgent-content[b-s86himmlso] {
    display: flex;
    flex-direction: column;
    gap: .25rem;

    flex: 1;
    min-width: 0;
}

.outilsRapportAgent-name[b-s86himmlso] {
    width: 100%;

    font-size: .85rem;
    font-weight: 600;
    line-height: 1;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    overflow: hidden;

    color: #111827;
}


/* =====================
   Informations
===================== */

.outilsRapportAgent-row[b-s86himmlso] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
}

.outilsRapportAgent-delai[b-s86himmlso],
.outilsRapportAgent-cout[b-s86himmlso] {
    display: inline-flex;
    align-items: center;

    gap: .2rem;

    font-size: .7rem;
    font-weight: 500;

    color: #656262;
    white-space: nowrap;
}


/* =====================
   Skeleton
===================== */

.skeleton-card[b-s86himmlso] {
    cursor: default;
    pointer-events: none;
}

.skeleton[b-s86himmlso] {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}

.skeleton[b-s86himmlso]::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .85),
        transparent
    );

    transform: translateX(-100%);
    animation: outilsRapportAgent-shine-b-s86himmlso 1.3s infinite;
}

@keyframes outilsRapportAgent-shine-b-s86himmlso {
    100% {
        transform: translateX(100%);
    }
}


/* =====================
   Skeleton Icône
===================== */

.outilsRapportAgent-icon.skeleton[b-s86himmlso] {
    border: 0;
}


/* =====================
   Skeleton Texte
===================== */

.text[b-s86himmlso] {
    height: 9px;
    border-radius: 8px;
}

.name[b-s86himmlso] {
    width: 70%;
    height: 11px;
}

.delai[b-s86himmlso] {
    width: 45%;
}

.cout[b-s86himmlso] {
    width: 25%;
}


/* =====================
   Décalage Shimmer
===================== */

.skeleton-card:nth-child(2n) .skeleton[b-s86himmlso]::after {
    animation-delay: .2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-s86himmlso]::after {
    animation-delay: .4s;
}

.skeleton-card:nth-child(5n) .skeleton[b-s86himmlso]::after {
    animation-delay: .6s;
}


/* =====================
   Erreur
===================== */

.outilsRapportAgent-error[b-s86himmlso] {
    padding: .7rem .8rem;

    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;

    color: #c92a2a;
    font-size: .65rem;
}


/* =====================
   Aucun résultat
===================== */

.empty-outilsRapportAgent[b-s86himmlso] {
    padding: 1.5rem;

    text-align: center;

    color: #9ca3af;
    font-size: .75rem;
}


/* =====================
   Mobile
===================== */

@media (max-width: 640px) {

    .outilsRapportAgent-scroll[b-s86himmlso] {
        gap: 1rem;
    }

    .outilsRapportAgent-card[b-s86himmlso] {
        flex-basis: 180px;
        padding: .45rem .5rem;
    }

    .outilsRapportAgent-icon[b-s86himmlso] {
        width: 24px;
        height: 24px;
        font-size: .75rem;
    }

    .outilsRapportAgent-name[b-s86himmlso] {
        font-size: .72rem;
    }

    .outilsRapportAgent-delai[b-s86himmlso],
    .outilsRapportAgent-cout[b-s86himmlso] {
        font-size: .65rem;
    }
}
/* /Components/Cards/OutilsRapportsProcessusCards.razor.rz.scp.css */
/* ==========================================
   Défilement horizontal
========================================== */

.outilsRapportsProcessus-scroll[b-s0e2otqxg6]{
display:flex;
gap:1rem;
overflow-x:auto;
overflow-y:hidden;
padding:.5rem;
scrollbar-width:none;
-ms-overflow-style:none;
}

.outilsRapportsProcessus-scroll[b-s0e2otqxg6]::-webkit-scrollbar{
display:none;
}


/* ==========================================
   Carte
========================================== */

.outilsRapportsProcessus-card[b-s0e2otqxg6]{
flex:0 0 auto;
width:230px;
height:46px;
padding:.2rem .5rem;

display:flex;
align-items:center;
gap:.4rem;

border:1px solid #eee;
border-radius:10px;
background:#fff;

cursor:pointer;
transition:.2s;
}

.outilsRapportsProcessus-card:hover[b-s0e2otqxg6]{
transform:translateX(3px);
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.outilsRapportsProcessus-card.active[b-s0e2otqxg6]{
background:#fdecec;
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}


/* ==========================================
   Icône
========================================== */

.outilsRapportsProcessus-icon[b-s0e2otqxg6]{
width:22px;
height:22px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#fdecec;
color:#c92a2a;
font-size:.7rem;
}

.outilsRapportsProcessus-card.active .outilsRapportsProcessus-icon[b-s0e2otqxg6]{
background:#c92a2a;
color:#fff;
}


/* ==========================================
   Contenu
========================================== */

.outilsRapportsProcessus-content[b-s0e2otqxg6]{
flex:1;
min-width:0;

display:flex;
flex-direction:column;
gap:.25rem;
}

.outilsRapportsProcessus-name[b-s0e2otqxg6]{
font-size:.7rem;
font-weight:700;
line-height:1;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

color:#111827;
}

.outilsRapportsProcessus-card.active .outilsRapportsProcessus-name[b-s0e2otqxg6]{
color:#7a1f1f;
}


/* ==========================================
   Ligne délai (extrémité gauche) + coût (extrémité droite)
========================================== */

.outilsRapportsProcessus-row[b-s0e2otqxg6]{
display:flex;
align-items:center;
justify-content:space-between;

width:100%;
}

.outilsRapportsProcessus-delai[b-s0e2otqxg6],
.outilsRapportsProcessus-cout[b-s0e2otqxg6]{
display:inline-flex;
align-items:center;
gap:.2rem;

font-size:.6rem;
font-weight:600;
color:#c92a2a;

white-space:nowrap;
}

.outilsRapportsProcessus-card.active .outilsRapportsProcessus-delai[b-s0e2otqxg6],
.outilsRapportsProcessus-card.active .outilsRapportsProcessus-cout[b-s0e2otqxg6]{
color:#7a1f1f;
}


/* ==========================================
   Skeleton Shimmer
========================================== */

.skeleton-card[b-s0e2otqxg6]{
cursor:default;
pointer-events:none;
}

.skeleton[b-s0e2otqxg6]{
position:relative;
overflow:hidden;
background:#e5e7eb;
}

.skeleton[b-s0e2otqxg6]::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.85),
transparent
);
transform:translateX(-100%);
animation:outilsRapportsProcessus-shine-b-s0e2otqxg6 1.3s infinite;
}

@keyframes outilsRapportsProcessus-shine-b-s0e2otqxg6{
100%{
transform:translateX(100%);
}
}

.outilsRapportsProcessus-icon.skeleton[b-s0e2otqxg6]{
border:0;
}

.text[b-s0e2otqxg6]{
height:8px;
border-radius:6px;
}

.name[b-s0e2otqxg6]{
width:70%;
height:10px;
}

.delai[b-s0e2otqxg6]{
width:45%;
}

.cout[b-s0e2otqxg6]{
width:25%;
}

.skeleton-card:nth-child(2n) .skeleton[b-s0e2otqxg6]::after{
animation-delay:.2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-s0e2otqxg6]::after{
animation-delay:.4s;
}


/* ==========================================
   Messages
========================================== */

.outilsRapportsProcessus-error[b-s0e2otqxg6]{
padding:.7rem .8rem;
background:#fef2f2;
border:1px solid #fecaca;
border-radius:10px;
color:#c92a2a;
font-size:.65rem;
}

.empty-outilsRapportsProcessus[b-s0e2otqxg6]{
padding:2rem;
text-align:center;
color:#6b7280;
}


/* ==========================================
   Mobile
========================================== */

@media(max-width:640px){
.outilsRapportsProcessus-card[b-s0e2otqxg6]{
width:240px;
padding:.35rem .4rem;
    }
.outilsRapportsProcessus-icon[b-s0e2otqxg6]{
width:20px;
height:20px;
font-size:.65rem;
    }
.outilsRapportsProcessus-name[b-s0e2otqxg6]{
font-size:.68rem;
    }
.outilsRapportsProcessus-delai[b-s0e2otqxg6],
.outilsRapportsProcessus-cout[b-s0e2otqxg6]{
font-size:.58rem;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .outilsRapportsProcessus-scroll[b-s0e2otqxg6] { gap: .3rem; padding: .1rem; }
    .outilsRapportsProcessus-card[b-s0e2otqxg6] { width: 120px; height: 34px; padding: .1rem .3rem; gap: .25rem; border-radius: 7px; }
    .outilsRapportsProcessus-icon[b-s0e2otqxg6] { width: 14px; height: 14px; font-size: .45rem; }
    .outilsRapportsProcessus-name[b-s0e2otqxg6] { font-size: .5rem; }
    .outilsRapportsProcessus-delai[b-s0e2otqxg6],
    .outilsRapportsProcessus-cout[b-s0e2otqxg6] { font-size: .4rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .outilsRapportsProcessus-card[b-s0e2otqxg6] { width: 100px; height: 28px; }
}
/* /Components/Cards/OutilsRechercheEmploiCards.razor.rz.scp.css */
/* ==========================================
   Liste des outils de recherche d'emploi
========================================== */

.outilsRechercheEmploi-list[b-ntqp9aqcvp] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


/* ==========================================
   Carte outil de rechercheEmploi
========================================== */

.outilsRechercheEmploi-item[b-ntqp9aqcvp] {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: .5rem;

    width: 100%;
    padding: .45rem;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    cursor: pointer;
    color: #374151;

    transition: all .2s ease;
}

.outilsRechercheEmploi-item:hover[b-ntqp9aqcvp] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsRechercheEmploi-item:active[b-ntqp9aqcvp] {
    transform: scale(.98);
}

.outilsRechercheEmploi-item.active[b-ntqp9aqcvp] {
    background: #fdecec;
    border-color: #fdecec;
    color: #7a1f1f;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   Contenu
========================================== */

.outilsRechercheEmploi-content[b-ntqp9aqcvp] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
    padding-right: 48px; /* évite que le texte passe sous les icônes d'action */
}

.outilsRechercheEmploi-name[b-ntqp9aqcvp] {
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.1;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .2s ease;
}

.outilsRechercheEmploi-description[b-ntqp9aqcvp] {
    font-size: .65rem;
    line-height: 1.25;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outilsRechercheEmploi-item.active .outilsRechercheEmploi-name[b-ntqp9aqcvp],
.outilsRechercheEmploi-item.active .outilsRechercheEmploi-description[b-ntqp9aqcvp] {
    color: #7a1f1f;
}

.outilsRechercheEmploi-item:hover .outilsRechercheEmploi-content[b-ntqp9aqcvp] {
    transform: translateX(3px);
}


/* ==========================================
   Message vide
========================================== */

.empty-outilsRechercheEmploi[b-ntqp9aqcvp] {
    padding: 2rem;
    text-align: center;
    color: black;
}


/* ==========================================
   Image
========================================== */

.outilsRechercheEmploi-image[b-ntqp9aqcvp] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    border: 2px solid #fdecec;
}

.outilsRechercheEmploi-image img[b-ntqp9aqcvp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.outilsRechercheEmploi-item.active .outilsRechercheEmploi-image[b-ntqp9aqcvp] {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}


/* ==========================================
   Actions (modifier / supprimer)
========================================== */

.outilsRechercheEmploi-actions[b-ntqp9aqcvp] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
}

.outilsRechercheEmploi-item:hover .outilsRechercheEmploi-actions[b-ntqp9aqcvp] {
    opacity: 1;
}

.outilsRechercheEmploi-action-btn[b-ntqp9aqcvp] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.outilsRechercheEmploi-action-btn:hover[b-ntqp9aqcvp] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.outilsRechercheEmploi-action-btn:active[b-ntqp9aqcvp] {
    transform: scale(.95);
}


/* ==========================================
   Skeleton : la vraie ligne (même hauteur, même disposition),
   avec des blocs shimmer à la place du contenu
========================================== */

.outilsRechercheEmploi-item.skeleton-orow[b-ntqp9aqcvp] {
    align-items: center;
    cursor: default;
    pointer-events: none;
}

.outilsRechercheEmploi-item.skeleton-orow:hover[b-ntqp9aqcvp] {
    transform: none;
    border-color: #e5e7eb;
    box-shadow: none;
}

.skeleton-orow-image[b-ntqp9aqcvp] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
}

.skeleton-orow-name[b-ntqp9aqcvp] {
    width: 70%;
    height: 11px;
    border-radius: 6px;
}

.skeleton-orow-desc[b-ntqp9aqcvp] {
    width: 45%;
    height: 9px;
    margin-top: .15rem;
    border-radius: 6px;
}


/* ==========================================
   Responsive
========================================== */

@media (max-width: 640px) {

    .outilsRechercheEmploi-item[b-ntqp9aqcvp] {
        padding: .45rem;
    }

    .outilsRechercheEmploi-name[b-ntqp9aqcvp] {
        font-size: .72rem;
    }

    .outilsRechercheEmploi-description[b-ntqp9aqcvp] {
        font-size: .62rem;
    }

    .outilsRechercheEmploi-actions[b-ntqp9aqcvp] {
        opacity: 1; /* toujours visible sur mobile, pas de hover */
    }
}

/* ==========================================================
   MOBILE : liste des outils en miniature (même rendu que Finance)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .outilsRechercheEmploi-list[b-ntqp9aqcvp] { gap: .25rem; }

    .outilsRechercheEmploi-item[b-ntqp9aqcvp] {
        padding: .25rem;
        gap: .3rem;
        border-radius: 8px;
    }

    .outilsRechercheEmploi-image[b-ntqp9aqcvp] {
        width: 18px;
        height: 18px;
        border-width: 1px;
    }

    .outilsRechercheEmploi-content[b-ntqp9aqcvp] {
        gap: .05rem;
        padding-right: 36px;
    }

    .outilsRechercheEmploi-name[b-ntqp9aqcvp] { font-size: .7rem; line-height: 1.15; }
    .outilsRechercheEmploi-description[b-ntqp9aqcvp] { font-size: .5rem; line-height: 1.15; }

    .outilsRechercheEmploi-actions[b-ntqp9aqcvp] { top: 3px; right: 3px; gap: 2px; opacity: 1; }
    .outilsRechercheEmploi-action-btn[b-ntqp9aqcvp] { width: 14px; height: 14px; font-size: .4rem; }

    /* pas d'effet de survol qui décale la carte sur tactile */
    .outilsRechercheEmploi-item:hover[b-ntqp9aqcvp],
    .outilsRechercheEmploi-item:hover .outilsRechercheEmploi-content[b-ntqp9aqcvp] { transform: none; }

    .skeleton-orow-image[b-ntqp9aqcvp] { width: 18px; height: 18px; }
    .skeleton-orow-name[b-ntqp9aqcvp] { height: 8px; }
    .skeleton-orow-desc[b-ntqp9aqcvp] { height: 6px; }
}
/* /Components/Cards/OutilsReglementesCards.razor.rz.scp.css */
/* ==========================================
   Liste des services réglementés
========================================== */

.outilsReglementes-list[b-2nmbueh75d] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .2rem;
}


/* ==========================================
   Carte
========================================== */

.outilsReglementes-card[b-2nmbueh75d] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;

    width: 100%;
    padding: .45rem;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    cursor: pointer;
    transition: all .2s ease;
}

.outilsReglementes-card:hover[b-2nmbueh75d] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsReglementes-card:active[b-2nmbueh75d] {
    transform: scale(.98);
}

.outilsReglementes-card.active[b-2nmbueh75d] {
    background: #fdecec;
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsReglementes-card.active .outilsReglementes-name[b-2nmbueh75d],
.outilsReglementes-card.active .outilsReglementes-delai[b-2nmbueh75d],
.outilsReglementes-card.active .outilsReglementes-cout[b-2nmbueh75d] {
    color: #7a1f1f;
}

/* Carte floue et non cliquable (code de catégorie absent de la liste) */
.outilsReglementes-card.disabled[b-2nmbueh75d] {
    opacity: .6;
    filter: blur(1.5px);
    cursor: not-allowed;
}

.outilsReglementes-card.disabled:hover[b-2nmbueh75d] {
    transform: none;
    border-color: #e5e7eb;
    box-shadow: none;
}


/* ==========================================
   Icône
========================================== */

.outilsReglementes-icon[b-2nmbueh75d] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .7rem;
}

.outilsReglementes-card.active .outilsReglementes-icon[b-2nmbueh75d] {
    background: #c92a2a;
    color: #fff;
}


/* ==========================================
   Contenu
========================================== */

.outilsReglementes-content[b-2nmbueh75d] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1;
    min-width: 0;
}

.outilsReglementes-name[b-2nmbueh75d] {
    width: 100%;

    font-size: .8rem;
    font-weight: 500;
    line-height: 1.1;
    color: #111827;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.outilsReglementes-row[b-2nmbueh75d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.outilsReglementes-delai[b-2nmbueh75d],
.outilsReglementes-cout[b-2nmbueh75d] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;

    font-size: .7rem;
    font-weight: 500;
    color: #656262;
    white-space: nowrap;
}


/* ==========================================
   Skeleton (shimmer)
========================================== */

.skeleton-card[b-2nmbueh75d] {
    cursor: default;
    pointer-events: none;
}

.skeleton[b-2nmbueh75d] {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}

.skeleton[b-2nmbueh75d]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translateX(-100%);
    animation: outilsReglementes-shine-b-2nmbueh75d 1.3s infinite;
}

@keyframes outilsReglementes-shine-b-2nmbueh75d {
    100% { transform: translateX(100%); }
}

.outilsReglementes-icon.skeleton[b-2nmbueh75d] { border: 0; }

.text[b-2nmbueh75d]  { height: 9px; border-radius: 8px; }
.name[b-2nmbueh75d]  { width: 70%; height: 11px; }
.delai[b-2nmbueh75d] { width: 45%; }
.cout[b-2nmbueh75d]  { width: 25%; }

/* Décalage de la lumière d'une carte à l'autre */
.skeleton-card:nth-child(2n) .skeleton[b-2nmbueh75d]::after { animation-delay: .2s; }
.skeleton-card:nth-child(3n) .skeleton[b-2nmbueh75d]::after { animation-delay: .4s; }
.skeleton-card:nth-child(5n) .skeleton[b-2nmbueh75d]::after { animation-delay: .6s; }


/* ==========================================
   Messages
========================================== */

.outilsReglementes-error[b-2nmbueh75d] {
    padding: .7rem .8rem;

    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;

    color: #c92a2a;
    font-size: .65rem;
}

.empty-outilsReglementes[b-2nmbueh75d] {
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
    font-size: .75rem;
}


/* ==========================================
   Responsive
========================================== */

@media (max-width: 640px) {

    .outilsReglementes-name[b-2nmbueh75d] { font-size: .72rem; }

    .outilsReglementes-delai[b-2nmbueh75d],
    .outilsReglementes-cout[b-2nmbueh75d] { font-size: .65rem; }
}

/* ==========================================================
   MOBILE : liste en miniature (même rendu que Finance)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .outilsReglementes-list[b-2nmbueh75d] { gap: .25rem; padding: .1rem 0; }

    .outilsReglementes-card[b-2nmbueh75d] {
        padding: .25rem;
        gap: .3rem;
        border-radius: 8px;
    }

    .outilsReglementes-icon[b-2nmbueh75d] {
        width: 18px;
        height: 18px;
        font-size: .55rem;
    }

    .outilsReglementes-content[b-2nmbueh75d] { gap: .1rem; }

    .outilsReglementes-name[b-2nmbueh75d] { font-size: .7rem; line-height: 1.15; }

    .outilsReglementes-delai[b-2nmbueh75d],
    .outilsReglementes-cout[b-2nmbueh75d] { font-size: .55rem; }

    /* pas d'effet de survol qui décale la carte sur tactile */
    .outilsReglementes-card:hover[b-2nmbueh75d] { transform: none; }
}
/* /Components/Cards/OutilsServiceAgentsCards.razor.rz.scp.css */
/* ==========================================
   Liste
========================================== */

.outilsServiceAgents-scroll[b-ehlxg5jhd4]{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:.5rem;
}


/* ==========================================
   Carte
========================================== */

.outilsServiceAgents-card[b-ehlxg5jhd4]{
  display:flex;
  align-items:center;
  gap:.6rem;
  width:100%;
  padding:.6rem .7rem;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  cursor:pointer;
  transition:.2s;
}

.outilsServiceAgents-card:hover[b-ehlxg5jhd4]{
  transform:translateX(3px);
  border-color:#fdecec;
  box-shadow:0 4px 10px #e5e7eb;
}

.outilsServiceAgents-card.active[b-ehlxg5jhd4]{
  background:#fdecec;
  border-color:#fdecec;
  box-shadow:0 4px 10px #e5e7eb;
}


/* ==========================================
   Contenu (nom du service)
========================================== */

.outilsServiceAgents-content[b-ehlxg5jhd4]{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
  flex:1;
}

.outilsServiceAgents-name[b-ehlxg5jhd4]{
  font-size:.8rem;
  font-weight:700;
  line-height:1.2;
  color:#111827;
}


/* ==========================================
   Délai / Coût
========================================== */

.outilsServiceAgents-meta[b-ehlxg5jhd4]{
  margin-left:auto;

  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.2rem;

  flex-shrink:0;
}

.outilsServiceAgents-delai[b-ehlxg5jhd4],
.outilsServiceAgents-cout[b-ehlxg5jhd4]{
  display:inline-flex;
  align-items:center;
  gap:.2rem;

  font-size:.65rem;
  font-weight:600;
  color:#c92a2a;

  white-space:nowrap;
}

.outilsServiceAgents-card.active .outilsServiceAgents-delai[b-ehlxg5jhd4],
.outilsServiceAgents-card.active .outilsServiceAgents-cout[b-ehlxg5jhd4]{
  color:#7a1f1f;
}


/* ==========================================
   Skeleton Shimmer
========================================== */

.skeleton-card[b-ehlxg5jhd4]{
  cursor:default;
  pointer-events:none;
}

.skeleton[b-ehlxg5jhd4]{
  position:relative;
  overflow:hidden;
  background:#e5e7eb;
}

.skeleton[b-ehlxg5jhd4]::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.85),
    transparent
  );
  transform:translateX(-100%);
  animation:outilsServiceAgents-shine-b-ehlxg5jhd4 1.3s infinite;
}

@keyframes outilsServiceAgents-shine-b-ehlxg5jhd4{
  100%{
    transform:translateX(100%);
  }
}

.text[b-ehlxg5jhd4]{
  height:9px;
  border-radius:8px;
}

.name[b-ehlxg5jhd4]{
  width:60%;
  height:11px;
}

.delai[b-ehlxg5jhd4]{
  width:45px;
  margin-bottom:.3rem;
  margin-left:auto;
}

.cout[b-ehlxg5jhd4]{
  width:35px;
  margin-left:auto;
}

.skeleton-card:nth-child(2n) .skeleton[b-ehlxg5jhd4]::after{
  animation-delay:.2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-ehlxg5jhd4]::after{
  animation-delay:.4s;
}

.skeleton-card:nth-child(5n) .skeleton[b-ehlxg5jhd4]::after{
  animation-delay:.6s;
}


/* ==========================================
   Messages
========================================== */

.outilsServiceAgents-error[b-ehlxg5jhd4]{
  padding:.7rem .8rem;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:10px;
  color:#c92a2a;
  font-size:.75rem;
}

.empty-outilsServiceAgents[b-ehlxg5jhd4]{
  padding:2rem;
  text-align:center;
  color:#6b7280;
}


/* ==========================================
   Mobile
========================================== */

@media(max-width:640px){
  .outilsServiceAgents-card[b-ehlxg5jhd4]{
    padding:.5rem .6rem;
  }
  .outilsServiceAgents-name[b-ehlxg5jhd4]{
    font-size:.72rem;
  }
}
/* /Components/Cards/OutilsServiceStatistiquesCards.razor.rz.scp.css */
/* ==========================================
   Bande horizontale
========================================== */

.outilsStatistique-scroll[b-ffu64058ba]{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:.5rem;
    padding:.1rem;
    overflow-x:auto;
}


/* ==========================================
   Carte
========================================== */

.outilsStatistique-card[b-ffu64058ba]{
    flex:0 0 auto;
    width:220px;
    height:46px;
    padding:.2rem .5rem;

    display:flex;
    align-items:center;
    gap:.4rem;

    border:1px solid #eee;
    border-radius:10px;
    background:#fff;

    cursor:pointer;
    transition:.2s;
}

.outilsStatistique-card:hover[b-ffu64058ba]{
    transform:translateY(-2px);
    border-color:#fdecec;
    box-shadow:0 4px 10px #e5e7eb;
}

.outilsStatistique-card:focus-visible[b-ffu64058ba]{
    outline:2px solid #c92a2a;
    outline-offset:2px;
}

.outilsStatistique-card.active[b-ffu64058ba]{
    background:#fdecec;
    border-color:#fdecec;
    box-shadow:0 4px 10px #e5e7eb;
}


/* ==========================================
   Contenu (nom + délai)
========================================== */

.outilsStatistique-content[b-ffu64058ba]{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.25rem;
    min-width:0;
    flex:1;
}

.outilsStatistique-name[b-ffu64058ba]{
    font-size:.8rem;
    font-weight:700;
    line-height:1.2;
    color:#111827;
}


/* ==========================================
   Délai / Coût
========================================== */

.outilsStatistique-meta[b-ffu64058ba]{
    margin-left:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:.2rem;
    flex-shrink:0;
}

.outilsStatistique-delai[b-ffu64058ba],
.outilsStatistique-cout[b-ffu64058ba]{
    display:inline-flex;
    align-items:center;
    gap:.2rem;
    font-size:.65rem;
    font-weight:600;
    color:#c92a2a;
    white-space:nowrap;
}

.outilsStatistique-card.active .outilsStatistique-delai[b-ffu64058ba],
.outilsStatistique-card.active .outilsStatistique-cout[b-ffu64058ba]{
    color:#7a1f1f;
}


/* ==========================================
   Skeleton Shimmer
========================================== */

.skeleton-card[b-ffu64058ba]{
    cursor:default;
    pointer-events:none;
}

.skeleton[b-ffu64058ba]{
    position:relative;
    overflow:hidden;
    background:#e5e7eb;
}

.skeleton[b-ffu64058ba]::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.85),
        transparent
    );
    transform:translateX(-100%);
    animation:outilsStatistique-shine-b-ffu64058ba 1.3s infinite;
}

@keyframes outilsStatistique-shine-b-ffu64058ba{
    100%{
        transform:translateX(100%);
    }
}

.skeleton-text[b-ffu64058ba]{
    height:9px;
    border-radius:8px;
}

.skeleton-name[b-ffu64058ba]{
    width:60%;
    height:11px;
}

.skeleton-info[b-ffu64058ba]{
    width:45%;
}

.skeleton-delai[b-ffu64058ba]{
    width:45px;
    margin-bottom:.3rem;
    margin-left:auto;
}

.skeleton-cout[b-ffu64058ba]{
    width:35px;
    margin-left:auto;
}

.skeleton-card:nth-child(2n) .skeleton[b-ffu64058ba]::after{
    animation-delay:.2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-ffu64058ba]::after{
    animation-delay:.4s;
}

.skeleton-card:nth-child(5n) .skeleton[b-ffu64058ba]::after{
    animation-delay:.6s;
}

@media (prefers-reduced-motion:reduce){
    .skeleton[b-ffu64058ba]::after{
        animation:none;
    }
}


/* ==========================================
   Messages
========================================== */

.outilsStatistique-error[b-ffu64058ba]{
    padding:.7rem .8rem;
    background:#fef2f2;
    border:1px solid #fecaca;
    border-radius:10px;
    color:#c92a2a;
    font-size:.75rem;
}

.empty-outilsStatistique[b-ffu64058ba]{
    padding:2rem;
    text-align:center;
    color:#6b7280;
}


/* ==========================================
   Mobile
========================================== */

@media(max-width:640px){
    .outilsStatistique-card[b-ffu64058ba]{
        min-width:190px;
        padding:.5rem .6rem;
    }
    .outilsStatistique-name[b-ffu64058ba]{
        font-size:.72rem;
    }
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : bande en miniature
   (placé après la règle 640 px pour la remplacer)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .outilsStatistique-scroll[b-ffu64058ba] { gap: .35rem; padding: .1rem; align-items: center; height: 100%; }

    .outilsStatistique-card[b-ffu64058ba] {
        width: 140px;
        min-width: 0;
        height: 38px;
        padding: .15rem .4rem;
        gap: .3rem;
        border-radius: 8px;
    }

    .outilsStatistique-card:hover[b-ffu64058ba] { transform: none; }

    .outilsStatistique-content[b-ffu64058ba] { gap: .1rem; }

    .outilsStatistique-name[b-ffu64058ba] {
        font-size: .62rem;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .outilsStatistique-delai[b-ffu64058ba],
    .outilsStatistique-cout[b-ffu64058ba] { font-size: .5rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .outilsStatistique-card[b-ffu64058ba] { width: 120px; height: 30px; }
}
/* /Components/Cards/OutilsStatistiquesCards.razor.rz.scp.css */
.outilsStatistiques-scroll[b-si2sylkxfv]{
display:flex;
gap:1rem;
overflow-x:auto;
overflow-y:hidden;
padding:.5rem;
scrollbar-width:none;
-ms-overflow-style:none;
}

.outilsStatistiques-scroll[b-si2sylkxfv]::-webkit-scrollbar{
display:none;
}

.outilsStatistiques-list[b-si2sylkxfv]{
display:flex;
flex-direction:column;
gap:.5rem;
}

.outilsStatistiques-card[b-si2sylkxfv]{
display:flex;
align-items:flex-start;
gap:.5rem;
width:100%;
padding:.4rem .3rem;
background:#fff;
border:1px solid #e5e7eb;
border-radius:10px;
cursor:pointer;
transition:.2s;
}

.outilsStatistiques-card:hover[b-si2sylkxfv]{
transform:translateX(3px);
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.outilsStatistiques-card.active[b-si2sylkxfv]{
background:#fdecec;
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.outilsStatistiques-card.active .outilsStatistiques-name[b-si2sylkxfv],
.outilsStatistiques-card.active .outilsStatistiques-description[b-si2sylkxfv]{
color:#7a1f1f;
}

.outilsStatistiques-icon[b-si2sylkxfv]{
width:22px;
height:22px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#fdecec;
color:#fff;
font-size:.7rem;
}

.outilsStatistiques-content[b-si2sylkxfv]{
display:flex;
flex-direction:column;
gap:.15rem;
}

.outilsStatistiques-name[b-si2sylkxfv]{
font-size:.8rem;
font-weight:700;
line-height:1;
color:#111827;
}

.outilsStatistiques-description[b-si2sylkxfv]{
font-size:.65rem;
line-height:1.2;
color:#6b7280;
}

.outilsStatistiques-info[b-si2sylkxfv]{
margin-top:.2rem;
font-size:.6rem;
color:#c92a2a;
}

.empty-outilsStatistiques[b-si2sylkxfv]{
padding:2rem;
text-align:center;
color:#6b7280;
}

@media(max-width:640px){
.outilsStatistiques-card[b-si2sylkxfv]{
padding:.45rem .5rem;
    }
.outilsStatistiques-icon[b-si2sylkxfv]{
width:20px;
height:20px;
font-size:.65rem;
    }
.outilsStatistiques-name[b-si2sylkxfv]{
font-size:.72rem;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .outilsStatistique-scroll[b-si2sylkxfv] { gap: .3rem; padding: .1rem; }
    .outilsStatistique-card[b-si2sylkxfv] { width: 120px; min-width: 0; height: 34px; padding: .1rem .3rem; gap: .25rem; border-radius: 7px; }
    .outilsStatistique-content[b-si2sylkxfv] { gap: .1rem; }
    .outilsStatistique-name[b-si2sylkxfv] { font-size: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .outilsStatistique-delai[b-si2sylkxfv],
    .outilsStatistique-cout[b-si2sylkxfv] { font-size: .4rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .outilsStatistique-card[b-si2sylkxfv] { width: 100px; height: 28px; }
}
/* /Components/Cards/OutilsStatsCards.razor.rz.scp.css */
/* ========================================
   POSITIONNEMENT FIXE (bandeau + bouton flottant)
   ======================================== */

.stats-ticker-bottom-wrapper[b-a7ppvrhx8u] {
    position: fixed;
    bottom: 20px;
    left: 250px;
    right: 70px;

    height: 42px;

    z-index: 800;
}

.stats-ticker-bottom[b-a7ppvrhx8u] {
    position: relative;
    height: 70%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;

    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border-top: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;

    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.stats-ticker-bottom-track[b-a7ppvrhx8u] {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    gap: .85rem;
    padding: 0 1rem;
}

/* ========================================
   BOUTON "+" FLOTTANT (ajouter une catégorie)
   ======================================== */

.ticker-add-btn[b-a7ppvrhx8u] {
    position: absolute;
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
    z-index: 810;

    width: 24px;
    height: 24px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #1d1d1f;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%;

    font-size: .6rem;
    cursor: pointer;

    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    transition: transform .15s ease, box-shadow .15s ease;
}

.ticker-add-btn:hover[b-a7ppvrhx8u] {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

/* ========================================
   CARTES DU BANDEAU
   ======================================== */

.ticker-item[b-a7ppvrhx8u] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;

    padding: .4rem .9rem;
    border-radius: 10px;
    background: var(--accent-bg);

    white-space: nowrap;
    height: 25px;
}

.ticker-province[b-a7ppvrhx8u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;
    border-radius: 50%;

    background: var(--accent);
    color: #ffffff;

    font-size: .45rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.ticker-program[b-a7ppvrhx8u] {
    font-size: .68rem;
    font-weight: 700;
    color: var(--accent);
}

.ticker-score[b-a7ppvrhx8u],
.ticker-invitations[b-a7ppvrhx8u] {
    font-size: .68rem;
    font-weight: 600;
    color: #1d1d1f;
}

.ticker-date[b-a7ppvrhx8u] {
    font-size: .62rem;
    font-weight: 500;
    color: #9ca3af;
}

/* ========================================
   BOUTON MODIFIER (par carte)
   ======================================== */

.ticker-edit-btn[b-a7ppvrhx8u] {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, .7);
    color: var(--accent);
    border: none;
    border-radius: 50%;

    font-size: .5rem;
    cursor: pointer;

    opacity: 0;
    transition: opacity .15s ease;
}

.ticker-item:hover .ticker-edit-btn[b-a7ppvrhx8u],
.ticker-edit-btn:focus-visible[b-a7ppvrhx8u] {
    opacity: 1;
}

/* ========================================
   COULEURS PAR CATÉGORIE
   ======================================== */

.stat-card--red[b-a7ppvrhx8u]    { --accent: #c92a2a; --accent-bg: #fdecec; }
.stat-card--blue[b-a7ppvrhx8u]   { --accent: #2563eb; --accent-bg: #eaf2fe; }
.stat-card--green[b-a7ppvrhx8u]  { --accent: #1a7f37; --accent-bg: #e8f7ee; }
.stat-card--purple[b-a7ppvrhx8u] { --accent: #7c3aed; --accent-bg: #f2ecfb; }
.stat-card--amber[b-a7ppvrhx8u]  { --accent: #b45309; --accent-bg: #fef6e7; }
.stat-card--teal[b-a7ppvrhx8u]   { --accent: #0f766e; --accent-bg: #e6f7f5; }

/* ========================================
   POPUP D'AJOUT / ÉDITION
   ======================================== */

.draw-modal-backdrop[b-a7ppvrhx8u] {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;

    background: rgba(0, 0, 0, .45);
}

.draw-modal[b-a7ppvrhx8u] {
    width: 100%;
    max-width: 360px;

    display: flex;
    flex-direction: column;
    gap: .5rem;

    padding: 1rem 1.1rem 1.1rem;

    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .2);

    cursor: default;
}

.draw-modal-header[b-a7ppvrhx8u] {
    display: flex;
    align-items: center;
    gap: .4rem;

    margin-bottom: .2rem;

    font-size: .82rem;
    font-weight: 800;
    color: #1d1d1f;
}

.draw-modal-header i[b-a7ppvrhx8u] {
    font-size: .78rem;
    color: #9ca3af;
}

.draw-edit-row[b-a7ppvrhx8u] {
    display: flex;
    gap: .5rem;
}

.draw-edit-row .draw-edit-label[b-a7ppvrhx8u] {
    flex: 1 1 0;
    min-width: 0;
}

.draw-edit-label[b-a7ppvrhx8u] {
    display: flex;
    flex-direction: column;
    gap: .2rem;

    font-size: .56rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.draw-edit-input[b-a7ppvrhx8u] {
    width: 100%;

    padding: .25rem .4rem;

    font-size: .68rem;
    font-family: inherit;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;

    color: #1d1d1f;
    background: #fff;
    border: 1px solid #e7e2e2;
    border-radius: 6px;

    cursor: text;
}

.draw-edit-input:focus[b-a7ppvrhx8u] {
    outline: none;
    border-color: #c92a2a;
}

.draw-edit-select[b-a7ppvrhx8u] {
    cursor: pointer;
}

.draw-edit-actions[b-a7ppvrhx8u] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;

    margin-top: .4rem;
}

.draw-edit-cancel[b-a7ppvrhx8u],
.draw-edit-save[b-a7ppvrhx8u] {
    padding: .28rem .6rem;

    font-size: .6rem;
    font-weight: 700;

    border-radius: 6px;
    cursor: pointer;

    transition: background-color .15s ease, opacity .15s ease;
}

.draw-edit-cancel[b-a7ppvrhx8u] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e7e2e2;
}

.draw-edit-cancel:hover[b-a7ppvrhx8u] {
    background: #e5e7eb;
}

.draw-edit-save[b-a7ppvrhx8u] {
    background: #c92a2a;
    color: #fff;
    border: 1px solid #c92a2a;
}

.draw-edit-save:hover[b-a7ppvrhx8u] {
    opacity: .9;
}

.draw-edit-cancel:disabled[b-a7ppvrhx8u],
.draw-edit-save:disabled[b-a7ppvrhx8u] {
    opacity: .6;
    cursor: not-allowed;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
    .stats-ticker-bottom-wrapper[b-a7ppvrhx8u] {
        left: calc(8px + env(safe-area-inset-left, 0px));
        right: calc(56px + env(safe-area-inset-right, 0px));
        bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    }

    .ticker-add-btn[b-a7ppvrhx8u] { right: -38px; }

    .ticker-program[b-a7ppvrhx8u],
    .ticker-date[b-a7ppvrhx8u] { display: none; }

    .ticker-item[b-a7ppvrhx8u] { gap: .1rem; padding: .3rem .6rem; }
    .ticker-score[b-a7ppvrhx8u],
    .ticker-invitations[b-a7ppvrhx8u] { font-size: .5rem; }

    /* Le fondu de 40 px masquait la première carte au début du défilement */
    .stats-ticker-bottom[b-a7ppvrhx8u] {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Écrans tactiles : pas de survol, crayon toujours visible */
@media (hover: none) {
    .ticker-edit-btn[b-a7ppvrhx8u] { opacity: 1; }
}
/* /Components/Cards/OutilsStrategieEmploiCards.razor.rz.scp.css */
/* ==========================================
   Liste des outils de stratégie d'emploi
========================================== */

.outilsStrategieEmploi-list[b-9c3ifl8d42] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


/* ==========================================
   Carte outil de strategieEmploi
========================================== */

.outilsStrategieEmploi-item[b-9c3ifl8d42] {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: .5rem;

    width: 100%;
    padding: .45rem;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    cursor: pointer;
    color: #374151;

    transition: all .2s ease;
}

.outilsStrategieEmploi-item:hover[b-9c3ifl8d42] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsStrategieEmploi-item:active[b-9c3ifl8d42] {
    transform: scale(.98);
}

.outilsStrategieEmploi-item.active[b-9c3ifl8d42] {
    background: #fdecec;
    border-color: #fdecec;
    color: #7a1f1f;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   Contenu
========================================== */

.outilsStrategieEmploi-content[b-9c3ifl8d42] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
    padding-right: 48px; /* évite que le texte passe sous les icônes d'action */
}

.outilsStrategieEmploi-name[b-9c3ifl8d42] {
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.1;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .2s ease;
}

.outilsStrategieEmploi-description[b-9c3ifl8d42] {
    font-size: .65rem;
    line-height: 1.25;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outilsStrategieEmploi-item.active .outilsStrategieEmploi-name[b-9c3ifl8d42],
.outilsStrategieEmploi-item.active .outilsStrategieEmploi-description[b-9c3ifl8d42] {
    color: #7a1f1f;
}

.outilsStrategieEmploi-item:hover .outilsStrategieEmploi-content[b-9c3ifl8d42] {
    transform: translateX(3px);
}


/* ==========================================
   Message vide
========================================== */

.empty-outilsStrategieEmploi[b-9c3ifl8d42] {
    padding: 2rem;
    text-align: center;
    color: black;
}


/* ==========================================
   Image
========================================== */

.outilsStrategieEmploi-image[b-9c3ifl8d42] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    border: 2px solid #fdecec;
}

.outilsStrategieEmploi-image img[b-9c3ifl8d42] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.outilsStrategieEmploi-item.active .outilsStrategieEmploi-image[b-9c3ifl8d42] {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}


/* ==========================================
   Actions (modifier / supprimer)
========================================== */

.outilsStrategieEmploi-actions[b-9c3ifl8d42] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
}

.outilsStrategieEmploi-item:hover .outilsStrategieEmploi-actions[b-9c3ifl8d42] {
    opacity: 1;
}

.outilsStrategieEmploi-action-btn[b-9c3ifl8d42] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.outilsStrategieEmploi-action-btn:hover[b-9c3ifl8d42] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.outilsStrategieEmploi-action-btn:active[b-9c3ifl8d42] {
    transform: scale(.95);
}


/* ==========================================
   Responsive
========================================== */

@media (max-width: 640px) {

    .outilsStrategieEmploi-item[b-9c3ifl8d42] {
        padding: .45rem;
    }

    .outilsStrategieEmploi-name[b-9c3ifl8d42] {
        font-size: .72rem;
    }

    .outilsStrategieEmploi-description[b-9c3ifl8d42] {
        font-size: .62rem;
    }

    .outilsStrategieEmploi-actions[b-9c3ifl8d42] {
        opacity: 1; /* toujours visible sur mobile, pas de hover */
    }
}

/* ==========================================================
   MOBILE : liste des outils en miniature (même rendu que Finance)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .outilsStrategieEmploi-list[b-9c3ifl8d42] { gap: .25rem; }

    .outilsStrategieEmploi-item[b-9c3ifl8d42] {
        padding: .25rem;
        gap: .3rem;
        border-radius: 8px;
    }

    .outilsStrategieEmploi-image[b-9c3ifl8d42] {
        width: 18px;
        height: 18px;
        border-width: 1px;
    }

    .outilsStrategieEmploi-content[b-9c3ifl8d42] {
        gap: .05rem;
        padding-right: 36px;
    }

    .outilsStrategieEmploi-name[b-9c3ifl8d42] { font-size: .7rem; line-height: 1.15; }
    .outilsStrategieEmploi-description[b-9c3ifl8d42] { font-size: .5rem; line-height: 1.15; }

    .outilsStrategieEmploi-actions[b-9c3ifl8d42] { top: 3px; right: 3px; gap: 2px; opacity: 1; }
    .outilsStrategieEmploi-action-btn[b-9c3ifl8d42] { width: 14px; height: 14px; font-size: .4rem; }

    /* pas d'effet de survol qui décale la carte sur tactile */
    .outilsStrategieEmploi-item:hover[b-9c3ifl8d42],
    .outilsStrategieEmploi-item:hover .outilsStrategieEmploi-content[b-9c3ifl8d42] { transform: none; }
}
/* /Components/Cards/OutilsTeleversementCards.razor.rz.scp.css */
/* ==========================================
   Conteneur défilant
========================================== */

.outilsTeleversement-scroll[b-16mwdebuqv] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.outilsTeleversement-scroll[b-16mwdebuqv]::-webkit-scrollbar { display: none; }

/* ==========================================
   Liste et carte
========================================== */

.outilsTeleversement-list[b-16mwdebuqv] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.outilsTeleversement-card[b-16mwdebuqv] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    padding: .4rem .3rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s;
}

.outilsTeleversement-card:hover[b-16mwdebuqv] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsTeleversement-card.active[b-16mwdebuqv] {
    background: #fdecec;
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.outilsTeleversement-card.active .outilsTeleversement-name[b-16mwdebuqv],
.outilsTeleversement-card.active .outilsTeleversement-delai[b-16mwdebuqv],
.outilsTeleversement-card.active .outilsTeleversement-cout[b-16mwdebuqv],
.outilsTeleversement-card.active .outilsTeleversement-nbdocs[b-16mwdebuqv] {
    color: #7a1f1f;
}

/* ==========================================
   Icône ronde
========================================== */

.outilsTeleversement-icon[b-16mwdebuqv] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .7rem;
}

/* ==========================================
   Contenu
========================================== */

.outilsTeleversement-content[b-16mwdebuqv] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.outilsTeleversement-row[b-16mwdebuqv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .15rem .5rem;
}

.outilsTeleversement-name[b-16mwdebuqv] {
    order: 1;
    flex: 1;
    min-width: 0;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #111827;
}

/* Prix et nombre de documents superposés au même endroit */
.outilsTeleversement-right[b-16mwdebuqv] {
    order: 2;
    flex-shrink: 0;
    display: grid;
    justify-items: end;
    align-items: center;
}

.outilsTeleversement-cout[b-16mwdebuqv],
.outilsTeleversement-nbdocs[b-16mwdebuqv] {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: opacity .15s ease;
}

.outilsTeleversement-cout[b-16mwdebuqv]   { color: #111827; }
.outilsTeleversement-nbdocs[b-16mwdebuqv] { color: #c92a2a; opacity: 0; }

/* Au survol : le prix s'efface, le nombre de documents apparaît */
.outilsTeleversement-card:hover .has-docs .outilsTeleversement-cout[b-16mwdebuqv]   { opacity: 0; }
.outilsTeleversement-card:hover .has-docs .outilsTeleversement-nbdocs[b-16mwdebuqv] { opacity: 1; }

.outilsTeleversement-delai[b-16mwdebuqv] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .6rem;
    line-height: 1;
    color: #6b7280;
    white-space: nowrap;
}

/* ==========================================
   Skeleton
========================================== */

.tv-sk-card[b-16mwdebuqv] { cursor: default; pointer-events: none; }

.skeleton[b-16mwdebuqv] {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}

.skeleton[b-16mwdebuqv]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translateX(-100%);
    animation: outilsTeleversement-shine-b-16mwdebuqv 1.3s infinite;
}

@keyframes outilsTeleversement-shine-b-16mwdebuqv { 100% { transform: translateX(100%); } }

.tv-sk-icon-dot[b-16mwdebuqv]   { width: 100%; height: 100%; border-radius: 50%; }
.tv-sk-tool-name[b-16mwdebuqv]  { width: 60%; height: 11px; border-radius: 8px; }
.tv-sk-tool-cout[b-16mwdebuqv]  { width: 35px; height: 11px; border-radius: 8px; }
.tv-sk-tool-delai[b-16mwdebuqv] { width: 45px; height: 9px; border-radius: 8px; }

.tv-sk-card:nth-child(2n) .skeleton[b-16mwdebuqv]::after { animation-delay: .2s; }
.tv-sk-card:nth-child(3n) .skeleton[b-16mwdebuqv]::after { animation-delay: .4s; }

/* ==========================================
   Messages
========================================== */

.outilsTeleversement-error[b-16mwdebuqv] {
    padding: .9rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #c92a2a;
    font-size: .75rem;
}

.empty-outilsTeleversement[b-16mwdebuqv] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* ==========================================
   Mobile
========================================== */

@media (max-width: 640px) {
    .outilsTeleversement-card[b-16mwdebuqv] { padding: .45rem .5rem; }

    .outilsTeleversement-icon[b-16mwdebuqv] {
        width: 20px;
        height: 20px;
        font-size: .65rem;
    }

    .outilsTeleversement-name[b-16mwdebuqv],
    .outilsTeleversement-cout[b-16mwdebuqv],
    .outilsTeleversement-nbdocs[b-16mwdebuqv] { font-size: .68rem; }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .outilsTeleversement-list[b-16mwdebuqv] { gap: .3rem; padding: .1rem; }
    .outilsTeleversement-card[b-16mwdebuqv] { padding: .3rem .35rem; gap: .35rem; border-radius: 8px; }
    .outilsTeleversement-card:hover[b-16mwdebuqv] { transform: none; }   /* pas de décalage au toucher */
    .outilsTeleversement-icon[b-16mwdebuqv] { width: 18px; height: 18px; font-size: .55rem; }
    .outilsTeleversement-content[b-16mwdebuqv] { gap: .15rem; }
    .outilsTeleversement-name[b-16mwdebuqv] { font-size: .7rem; }
    .outilsTeleversement-cout[b-16mwdebuqv],
    .outilsTeleversement-nbdocs[b-16mwdebuqv] { font-size: .65rem; }
    .outilsTeleversement-delai[b-16mwdebuqv] { font-size: .55rem; }
}
/* /Components/Cards/PaiementsCards.razor.rz.scp.css */
/* Scroll */
.paiements-scroll[b-zi1o0qqu1v] {
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  padding: .2rem;
  scrollbar-width: none;
}

.paiements-scroll[b-zi1o0qqu1v]::-webkit-scrollbar {
  display: none;
}

/* Carte */
.paiements-card[b-zi1o0qqu1v] {
  position: relative;
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .3rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: .2s;
}

.paiements-card:hover[b-zi1o0qqu1v] {
  transform: translateY(-3px);
  border-color: #fdecec;
  box-shadow: 0 4px 10px #e5e7eb;
}

.paiements-card.active[b-zi1o0qqu1v] {
  background: #fdecec;
  border-color: #fdecec;
}

/* Icône */
.paiements-icon[b-zi1o0qqu1v] {
  font-size: .9rem;
  color: #c92a2a;
}

/* Image */
.paiements-image[b-zi1o0qqu1v] {
  width: 50px;
  height: 50px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fdecec;
  flex-shrink: 0;
}

.paiements-image img[b-zi1o0qqu1v] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.active .paiements-image[b-zi1o0qqu1v] {
  border-color: #c92a2a;
}

/* Texte */
.paiements-content[b-zi1o0qqu1v] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.paiements-name[b-zi1o0qqu1v] {
  font-size: .65rem;
  font-weight: 700;
  color: #111827;
}

.paiements-info[b-zi1o0qqu1v] {
  font-size: .5rem;
  font-weight: 600;
  color: #c92a2a;
}

.paiements-type[b-zi1o0qqu1v] {
  font-size: .55rem;
  font-weight: 600;
  color: #6b7280;
}

.paiements-objective[b-zi1o0qqu1v] {
  font-size: .5rem;
  color: #6b7280;
}

/* Badge de statut — en haut à droite de la carte */
/* Badge de statut — en haut à droite de la carte */
.paiements-badge[b-zi1o0qqu1v] {
    position: absolute;
    top: .35rem;
    right: .35rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .65rem;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.paiements-badge.badge-attente[b-zi1o0qqu1v] {
    background: #fef2f2;
    color: #c92a2a;
}

.paiements-badge.badge-ok[b-zi1o0qqu1v] {
    background: #ecfdf5;
    color: #059669;
}

.paiements-count-badge[b-zi1o0qqu1v] {
    position: absolute;
    top: .1rem;
    right: .1rem;
    min-width: 20px;
    height: 20px;
    padding: 0 .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #c92a2a;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    z-index: 2;
}

/* Skeleton */
.skeleton-card[b-zi1o0qqu1v] {
  cursor: default;
  pointer-events: none;
}

.skeleton[b-zi1o0qqu1v] {
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
}

.skeleton[b-zi1o0qqu1v]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-100%);
  animation: paiements-shine-b-zi1o0qqu1v 1.3s infinite;
}

@keyframes paiements-shine-b-zi1o0qqu1v {
  100% {
    transform: translateX(100%);
  }
}

.paiements-image.skeleton[b-zi1o0qqu1v] {
  border: 0;
}

.text[b-zi1o0qqu1v] {
  height: 10px;
  border-radius: 8px;
  margin: auto;
}

.name[b-zi1o0qqu1v] {
  width: 90%;
  height: 13px;
}

.info[b-zi1o0qqu1v] {
  width: 70%;
}

.objective[b-zi1o0qqu1v] {
  width: 55%;
}

.skeleton-card:nth-child(2n) .skeleton[b-zi1o0qqu1v]::after {
  animation-delay: .2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-zi1o0qqu1v]::after {
  animation-delay: .4s;
}

.skeleton-card:nth-child(5n) .skeleton[b-zi1o0qqu1v]::after {
  animation-delay: .6s;
}

/* Messages */
.paiements-error[b-zi1o0qqu1v] {
  padding: .9rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  color: #c92a2a;
  font-size: .75rem;
}

.empty-paiements[b-zi1o0qqu1v] {
  padding: 1.5rem;
  text-align: center;
  color: #9ca3af;
}

/* Lettre de secours si l'image ne charge pas */
.paiements-avatar-letter[b-zi1o0qqu1v] {
  display: none;

  width: 100%;
  height: 100%;

  align-items: center;
  justify-content: center;

  background: #fdecec;
  color: #c92a2a;

  font-size: 1.2rem;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
  .paiements-card[b-zi1o0qqu1v] {
    flex-basis: 150px;
    padding: .6rem;
  }

  .paiements-image[b-zi1o0qqu1v] {
    width: 60px;
    height: 60px;
  }
}

.paiements-card[b-zi1o0qqu1v],
.televersement-card[b-zi1o0qqu1v] {
    position: relative;
}

.hover-nb-services[b-zi1o0qqu1v] {
    position: absolute;
    top: .25rem;
    right: .25rem;

    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #c92a2a;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;

    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 5;
}

.paiements-card:hover .hover-nb-services[b-zi1o0qqu1v],
.televersement-card:hover .hover-nb-services[b-zi1o0qqu1v] {
    opacity: 1;
    transform: scale(1);
}

.paiements-card[b-zi1o0qqu1v],
.televersement-card[b-zi1o0qqu1v] {
    position: relative;
}

/* Cercle du nombre de services, en haut à droite */
/* ===========================
   Repères de position
=========================== */

/* La carte positionne le cercle du nombre de services */
.paiements-card[b-zi1o0qqu1v],
.televersement-card[b-zi1o0qqu1v] {
    position: relative;
}

/* Le bloc nom + type positionne l'icône de message */
.paiements-content[b-zi1o0qqu1v],
.televersement-content[b-zi1o0qqu1v] {
    position: relative;
}

/* ===========================
   Cercle du nombre de services
   (apparaît au survol de la carte, en haut à droite)
=========================== */

.hover-nb-services[b-zi1o0qqu1v] {
    position: absolute;
    top: .25rem;
    right: .25rem;

    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #c92a2a;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;

    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 5;
}

.paiements-card:hover .hover-nb-services[b-zi1o0qqu1v],
.televersement-card:hover .hover-nb-services[b-zi1o0qqu1v] {
    opacity: 1;
    transform: scale(1);
}

/* ===========================
   Icône de message
   (apparaît seulement au survol du nom ou du type de compte)
=========================== */

.hover-message-btn[b-zi1o0qqu1v] {
    position: absolute;
    bottom: 0;
    right: 0;

    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    line-height: 1;
    cursor: pointer;

    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease, color .15s ease;
    z-index: 5;
}

.paiements-content:hover .hover-message-btn[b-zi1o0qqu1v],
.televersement-content:hover .hover-message-btn[b-zi1o0qqu1v] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.hover-message-btn:hover[b-zi1o0qqu1v] {
    background: #c92a2a;
    color: #fff;
}

/* ===========================
   Badge « Client » (Téléversement)
   Espace entre le type de compte et le badge
=========================== */

.televersement-badge-client[b-zi1o0qqu1v] {
    margin-left: .35rem;
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .paiements-scroll[b-zi1o0qqu1v] { gap: .4rem; padding: .1rem; height: 100%; align-items: center; }
    .paiements-card[b-zi1o0qqu1v] { flex: 0 0 84px; height: 70px; padding: .2rem; gap: .1rem; border-radius: 10px; justify-content: center; }
    .paiements-image[b-zi1o0qqu1v] { width: 28px; height: 28px; border-width: 2px; }
    .paiements-avatar-letter[b-zi1o0qqu1v] { font-size: .7rem; }
    .paiements-name[b-zi1o0qqu1v] { font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .paiements-info[b-zi1o0qqu1v],
    .paiements-type[b-zi1o0qqu1v] { font-size: .42rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hover-nb-services[b-zi1o0qqu1v] { width: .9rem; height: .9rem; font-size: .45rem; }
    .hover-message-btn[b-zi1o0qqu1v] { width: .9rem; height: .9rem; font-size: .5rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .paiements-card[b-zi1o0qqu1v] { flex: 0 0 64px; height: 44px; padding: .15rem; }
    .paiements-image[b-zi1o0qqu1v] { width: 18px; height: 18px; }
    .paiements-name[b-zi1o0qqu1v] { font-size: .4rem; }
    .paiements-info[b-zi1o0qqu1v],
    .paiements-type[b-zi1o0qqu1v] { display: none; }
}
/* /Components/Cards/PreferencesCards.razor.rz.scp.css */
/* Scroll */
.preferences-scroll[b-ysmwz0rj8k] {
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    padding: .2rem;
    scrollbar-width: none;
}

.preferences-scroll[b-ysmwz0rj8k]::-webkit-scrollbar {
    display: none;
}

/* Carte */
.preferences-card[b-ysmwz0rj8k] {
    position: relative;
    flex: 0 0 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .3rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: .2s;
}

.preferences-card:hover[b-ysmwz0rj8k] {
    transform: translateY(-3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.preferences-card.active[b-ysmwz0rj8k] {
    background: #fdecec;
    border-color: #fdecec;
}

/* Carte de l'utilisateur connecté — non cliquable, style distinct */
.preferences-card.connecte[b-ysmwz0rj8k] {
    cursor: default;
    background: #f3f4f6;
    border-color: #d1d5db;
}

.preferences-card.connecte.active[b-ysmwz0rj8k] {
    background: #fdecec;
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.preferences-card.connecte:hover[b-ysmwz0rj8k] {
    transform: none;
    box-shadow: none;
}

/* Icône */
.preferences-icon[b-ysmwz0rj8k] {
    font-size: .9rem;
    color: #c92a2a;
}

/* Image */
.preferences-image[b-ysmwz0rj8k] {
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fdecec;
    flex-shrink: 0;
}

.preferences-image img[b-ysmwz0rj8k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.active .preferences-image[b-ysmwz0rj8k] {
    border-color: #c92a2a;
}

/* Texte */
.preferences-content[b-ysmwz0rj8k] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.preferences-name[b-ysmwz0rj8k] {
    font-size: .75rem;
    font-weight: 700;
    color: #111827;
}

.preferences-info[b-ysmwz0rj8k] {
    font-size: .6rem;
    font-weight: 600;
    color: #c92a2a;
}

.preferences-type[b-ysmwz0rj8k] {
    font-size: .55rem;
    font-weight: 600;
    color: #6b7280;
}

.preferences-objective[b-ysmwz0rj8k] {
    font-size: .5rem;
    color: #6b7280;
}

/* Badge de statut — en haut à droite de la carte */
.preferences-badge[b-ysmwz0rj8k] {
    position: absolute;
    top: .35rem;
    right: .35rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .65rem;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.preferences-badge.badge-attente[b-ysmwz0rj8k] {
    background: #fef2f2;
    color: #c92a2a;
}

.preferences-badge.badge-ok[b-ysmwz0rj8k] {
    background: #ecfdf5;
    color: #059669;
}

.preferences-count-badge[b-ysmwz0rj8k] {
    position: absolute;
    top: -.4rem;
    right: -.4rem;
    min-width: 20px;
    height: 20px;
    padding: 0 .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #c92a2a;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    z-index: 2;
}

/* Skeleton */
.skeleton-card[b-ysmwz0rj8k] {
    cursor: default;
    pointer-events: none;
}

.skeleton[b-ysmwz0rj8k] {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}

.skeleton[b-ysmwz0rj8k]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translateX(-100%);
    animation: preferences-shine-b-ysmwz0rj8k 1.3s infinite;
}

@keyframes preferences-shine-b-ysmwz0rj8k {
    100% {
        transform: translateX(100%);
    }
}

.preferences-image.skeleton[b-ysmwz0rj8k] {
    border: 0;
}

.text[b-ysmwz0rj8k] {
    height: 10px;
    border-radius: 8px;
    margin: auto;
}

.name[b-ysmwz0rj8k] {
    width: 90%;
    height: 13px;
}

.info[b-ysmwz0rj8k] {
    width: 70%;
}

.objective[b-ysmwz0rj8k] {
    width: 55%;
}

.skeleton-card:nth-child(2n) .skeleton[b-ysmwz0rj8k]::after {
    animation-delay: .2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-ysmwz0rj8k]::after {
    animation-delay: .4s;
}

.skeleton-card:nth-child(5n) .skeleton[b-ysmwz0rj8k]::after {
    animation-delay: .6s;
}

/* Messages */
.preferences-error[b-ysmwz0rj8k] {
    padding: .9rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #c92a2a;
    font-size: .75rem;
}

.empty-preferences[b-ysmwz0rj8k] {
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
}

/* Lettre de secours si l'image ne charge pas */
.preferences-avatar-letter[b-ysmwz0rj8k] {
    display: none;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;

    background: #fdecec;
    color: #c92a2a;

    font-size: 1.2rem;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
    .preferences-card[b-ysmwz0rj8k] {
        flex-basis: 150px;
        padding: .6rem;
    }

    .preferences-image[b-ysmwz0rj8k] {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .preferences-scroll[b-ysmwz0rj8k] {
        gap: .35rem;
        padding: .1rem .15rem;
        height: 100%;
        align-items: center;
    }

    .preferences-card[b-ysmwz0rj8k] {
        flex: 0 0 76px;
        gap: .1rem;
        padding: .2rem;
        border-radius: 9px;
    }

    .preferences-card:hover[b-ysmwz0rj8k] { transform: none; }

    .preferences-image[b-ysmwz0rj8k] {
        width: 32px;
        height: 32px;
        border-width: 2px;
    }

    .preferences-avatar-letter[b-ysmwz0rj8k] { font-size: .75rem; }

    .preferences-content[b-ysmwz0rj8k] { gap: .05rem; }
    .preferences-name[b-ysmwz0rj8k] { font-size: .55rem; line-height: 1.1; }
    .preferences-info[b-ysmwz0rj8k] { font-size: .46rem; }
    .preferences-type[b-ysmwz0rj8k],
    .preferences-objective[b-ysmwz0rj8k] { display: none; }

    .preferences-badge[b-ysmwz0rj8k] {
        width: 14px;
        height: 14px;
        font-size: .45rem;
        top: .1rem;
        right: .1rem;
    }

    .preferences-count-badge[b-ysmwz0rj8k] {
        min-width: 14px;
        height: 14px;
        font-size: .45rem;
    }
}

@media (max-height: 500px) and (orientation: landscape) {

    .preferences-card[b-ysmwz0rj8k] {
        flex: 0 0 60px;
        padding: .1rem;
    }

    .preferences-image[b-ysmwz0rj8k] {
        width: 22px;
        height: 22px;
    }

    .preferences-name[b-ysmwz0rj8k] { font-size: .45rem; }
    .preferences-info[b-ysmwz0rj8k] { display: none; }
}
/* /Components/Cards/ProcedureCards.razor.rz.scp.css */
/* ==========================================
   Liste des procédures
   (même style que OrganismesCards)
========================================== */

.procedure-list[b-p9oscgl6kp] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* les cartes commencent en haut */
    gap: .5rem;
}

/* Défilement horizontal (si utilisé) */

.procedure-scroll[b-p9oscgl6kp] {
    display: flex;
    gap: 1rem;
    padding: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.procedure-scroll[b-p9oscgl6kp]::-webkit-scrollbar {
    display: none;
}

/* ==========================================
   Carte procédure
========================================== */

.procedure-card[b-p9oscgl6kp] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    padding: .45rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s ease;
}

.procedure-card:hover[b-p9oscgl6kp] {
    transform: translateX(3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

/* Carte sélectionnée : fond rose, sans bordure rouge */
.procedure-card.active[b-p9oscgl6kp] {
    background: #fdecec;
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.procedure-card.active .procedure-name[b-p9oscgl6kp],
.procedure-card.active .procedure-description[b-p9oscgl6kp],
.procedure-card.active .procedure-info[b-p9oscgl6kp] {
    color: #7a1f1f;
}

/* ==========================================
   Icône
========================================== */

.procedure-icon[b-p9oscgl6kp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fdecec;
    color: #fff;
    font-size: .7rem;
}

/* ==========================================
   Contenu
========================================== */

.procedure-content[b-p9oscgl6kp] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0; /* requis pour que text-overflow fonctionne dans un flex item */
    padding-right: 48px; /* évite que le texte passe sous les icônes d'action */
}

.procedure-name[b-p9oscgl6kp] {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.procedure-description[b-p9oscgl6kp] {
    font-size: .65rem;
    line-height: 1.25;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.procedure-info[b-p9oscgl6kp] {
    margin-top: .15rem;
    font-size: .6rem;
    color: #c92a2a;
}

/* ==========================================
   Actions (modifier / supprimer)
========================================== */

.procedure-actions[b-p9oscgl6kp] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
}

.procedure-card:hover .procedure-actions[b-p9oscgl6kp] {
    opacity: 1;
}

.procedure-action-btn[b-p9oscgl6kp] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.procedure-action-btn:hover[b-p9oscgl6kp] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.procedure-action-btn:active[b-p9oscgl6kp] {
    transform: scale(.95);
}

/* ==========================================
   Message vide
========================================== */

.empty-procedure[b-p9oscgl6kp] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* ==========================================
   Responsive
========================================== */

@media (max-width: 640px) {

    .procedure-card[b-p9oscgl6kp] {
        gap: .4rem;
        padding: .45rem;
    }

    .procedure-icon[b-p9oscgl6kp] {
        width: 20px;
        height: 20px;
        font-size: .65rem;
    }

    .procedure-name[b-p9oscgl6kp] {
        font-size: .72rem;
    }

    .procedure-description[b-p9oscgl6kp] {
        font-size: .62rem;
    }

    .procedure-info[b-p9oscgl6kp] {
        font-size: .58rem;
    }

    .procedure-actions[b-p9oscgl6kp] {
        opacity: 1; /* toujours visible sur mobile, pas de hover */
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .procedure-list[b-p9oscgl6kp] { gap: .3rem; }

    .procedure-card[b-p9oscgl6kp] { padding: .2rem .3rem; gap: .35rem; border-radius: 8px; }
    .procedure-card:hover[b-p9oscgl6kp] { transform: none; box-shadow: none; }

    .procedure-icon[b-p9oscgl6kp] { width: 16px; height: 16px; font-size: .55rem; }

    .procedure-content[b-p9oscgl6kp] { padding-right: 38px; gap: .1rem; }
    .procedure-name[b-p9oscgl6kp] { font-size: .7rem; line-height: 1.1; }
    .procedure-description[b-p9oscgl6kp] { font-size: .54rem; line-height: 1.15; }

    .procedure-actions[b-p9oscgl6kp] { top: 4px; right: 4px; gap: 3px; opacity: 1; }
    .procedure-action-btn[b-p9oscgl6kp] { width: 16px; height: 16px; font-size: .5rem; }
}

/* ==========================================================
   PORTRAIT TÉLÉPHONE
   Ligne 1 : [ liste des services | responsable / liens / tendance ]
   Ligne 2 : onglets + diagramme, pleine largeur
========================================================== */
@media (max-width: 900px) and (orientation: portrait) {

  .procedures-page .procedures-content[b-p9oscgl6kp] {
    display: grid !important;
    grid-template-columns: 45% minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: start;
    gap: 4px !important;
    flex-direction: initial !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Ces conteneurs disparaissent : leurs enfants deviennent des cellules de la grille */
  .procedures-page .procedure-right[b-p9oscgl6kp],
  .procedures-page .procedure-right[b-p9oscgl6kp]  .InfoProgrammes-content,
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-details {
    display: contents !important;
  }

  /* Colonne 1 : liste des services */
  .procedures-page .procedure-left[b-p9oscgl6kp] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    flex: none !important;
    width: auto !important;
    height: auto !important;
    max-height: 30vh !important;
    min-width: 0;
    overflow-y: auto !important;
  }

  /* Colonne 2 : informations sur le responsable */
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-details-side {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 0 !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    height: auto !important;
    max-height: 30vh !important;
    overflow-y: auto !important;
    gap: 3px !important;
  }

  /* Ligne 2 : onglets + contenu */
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-details-main {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    order: 0 !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* ---------- Liste des services miniaturisée ---------- */
  .procedures-page .procedure-left .procedure-card[b-p9oscgl6kp]        { padding: .2rem .25rem; gap: .25rem; }
  .procedures-page .procedure-left .procedure-name[b-p9oscgl6kp]        { font-size: .55rem; }
  .procedures-page .procedure-left .procedure-description[b-p9oscgl6kp] { font-size: .46rem; }
  .procedures-page .procedure-left .procedure-icon[b-p9oscgl6kp]        { width: 13px; height: 13px; font-size: .45rem; }
  .procedures-page .procedure-left .procedure-content[b-p9oscgl6kp]     { padding-right: 30px; }
  .procedures-page .procedure-left .procedure-actions[b-p9oscgl6kp]     { top: 3px; right: 3px; gap: 2px; }
  .procedures-page .procedure-left .procedure-action-btn[b-p9oscgl6kp]  { width: 13px; height: 13px; font-size: .4rem; }

  /* ---------- Informations du responsable miniaturisées ---------- */
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-side-top,
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-side-middle,
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-side-bottom {
    padding: .25rem .35rem;
    margin-top: 0;
  }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-identity-avatar { width: 22px; height: 22px; font-size: .5rem; }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-identity-name   { font-size: .55rem; }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-identity-type   { font-size: .46rem; }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-side-details    { gap: .1rem; padding-top: .2rem; margin-top: .1rem; }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-field-label     { font-size: .38rem; }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-field-value     { font-size: .46rem; }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-side-title      { font-size: .55rem; }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-link            { font-size: .46rem; padding: .12rem .25rem; }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-trend-svg       { height: 30px; }

  /* ---------- Diagramme miniaturisé ---------- */
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-tab-content {
    max-height: none !important;
    overflow-x: hidden !important;
  }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-tab-content > * {
    min-width: 0 !important;
  }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .parcours-wrapper {
    width: 560px !important;
    min-width: 0 !important;
    zoom: .6;
    padding: .2rem .3rem .6rem;
  }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .timeline-scroll {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .timeline-s-container {
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Cercles numérotés */
  .procedures-page .procedure-right[b-p9oscgl6kp]  .node-circle {
    width: 26px !important;
    height: 26px !important;
    border-width: 1.5px;
  }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .node-number { font-size: .7rem !important; }

  /* Textes à côté des cercles : plus petits et plus étroits */
  .procedures-page .procedure-right[b-p9oscgl6kp]  .node-label {
    width: 64px !important;
  }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .node-label.label-left  { right: 18px !important; }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .node-label.label-right { left: 18px !important; }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .node-label.label-top   { bottom: 18px !important; }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .label-title {
    font-size: .5rem !important;
    line-height: 1.05 !important;
    font-weight: 700;
  }
}

/* Languettes et fond : cachés sur bureau / paysage */
.drawer-toggle[b-p9oscgl6kp],
.drawer-backdrop[b-p9oscgl6kp] {
  display: none;
}

@media (max-width: 900px) and (orientation: portrait) {

  .procedures-page[b-p9oscgl6kp] {
    --drawer-top: calc(var(--hdr) + var(--btn-room, 34px) + var(--strip-h) + var(--gap) * 2);
    --drawer-w: 72vw;
  }

  /* Une seule colonne : l'onglet + diagramme prennent toute la largeur */
  .procedures-page .procedures-content[b-p9oscgl6kp] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-details-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* ---------- Languettes collées aux bords ---------- */
  .procedures-page .drawer-toggle[b-p9oscgl6kp] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(var(--drawer-top) + 40px);
    z-index: 1002;

    width: 22px;
    height: 56px;
    padding: 0;

    background: #c92a2a;
    color: #fff;
    border: none;
    font-size: .8rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transition: left .25s ease, right .25s ease;
  }
  .procedures-page .drawer-toggle-left[b-p9oscgl6kp] {
    left: 0;
    border-radius: 0 10px 10px 0;
  }
  .procedures-page .drawer-toggle-right[b-p9oscgl6kp] {
    right: 0;
    border-radius: 10px 0 0 10px;
  }

  /* La languette suit le bord du tiroir ouvert */
  .procedures-page .procedures-content.list-open .drawer-toggle-left[b-p9oscgl6kp] { left: var(--drawer-w); }
  .procedures-page .procedures-content.info-open .drawer-toggle-right[b-p9oscgl6kp] { right: var(--drawer-w); }

  /* ---------- Fond cliquable ---------- */
  .procedures-page .drawer-backdrop[b-p9oscgl6kp] {
    display: block;
    position: fixed;
    top: var(--drawer-top);
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.25);
    z-index: 1000;
  }

  /* ---------- Tiroir gauche : liste des services (cartes en haut) ---------- */
  .procedures-page .procedure-left[b-p9oscgl6kp] {
    display: none !important;
  }
  .procedures-page .procedures-content.list-open .procedure-left[b-p9oscgl6kp] {
    display: block !important;
    position: fixed;
    top: var(--drawer-top);
    bottom: 44px;
    left: 0;
    width: var(--drawer-w) !important;
    max-height: none !important;
    height: auto !important;
    z-index: 1001;
    padding: 4px;
    border-radius: 0 12px 12px 0;
    background: #fff;
    box-shadow: 4px 0 14px rgba(0,0,0,.2);
    overflow-y: auto !important;
  }

  /* ---------- Tiroir droit : informations du responsable ---------- */
  .procedures-page .procedure-right[b-p9oscgl6kp]  .infoProgrammes-details-side {
    display: none !important;
  }
  .procedures-page .procedures-content.info-open .procedure-right[b-p9oscgl6kp]  .infoProgrammes-details-side {
    display: flex !important;
    position: fixed;
    top: var(--drawer-top);
    bottom: 44px;
    right: 0;
    left: auto;
    width: var(--drawer-w) !important;
    max-height: none !important;
    height: auto !important;
    z-index: 1001;
    padding: 4px;
    border-radius: 12px 0 0 12px;
    background: #fff;
    box-shadow: -4px 0 14px rgba(0,0,0,.2);
    overflow-y: auto !important;
  }
}

/* ==========================================================
   TIROIR GAUCHE (portrait téléphone) : cartes compactes,
   même rendu que la liste des organismes
========================================================== */
@media (max-width: 900px) and (orientation: portrait) {

  .procedures-page .procedures-content.list-open .procedure-left .procedure-list[b-p9oscgl6kp] {
    gap: .25rem;
    justify-content: flex-start;
  }

  .procedures-page .procedures-content.list-open .procedure-left .procedure-card[b-p9oscgl6kp] {
    padding: .25rem .4rem;
    gap: .4rem;
    align-items: center;
    border-radius: 8px;
  }

  .procedures-page .procedures-content.list-open .procedure-left .procedure-icon[b-p9oscgl6kp] {
    width: 18px;
    height: 18px;
    font-size: .6rem;
  }

  .procedures-page .procedures-content.list-open .procedure-left .procedure-content[b-p9oscgl6kp] {
    padding-right: 46px;
    gap: .05rem;
  }

  .procedures-page .procedures-content.list-open .procedure-left .procedure-name[b-p9oscgl6kp] {
    font-size: .6rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .procedures-page .procedures-content.list-open .procedure-left .procedure-description[b-p9oscgl6kp] {
    font-size: .54rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Boutons modifier / supprimer centrés verticalement */
  .procedures-page .procedures-content.list-open .procedure-left .procedure-actions[b-p9oscgl6kp] {
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    gap: 4px;
  }

  .procedures-page .procedures-content.list-open .procedure-left .procedure-action-btn[b-p9oscgl6kp] {
    width: 18px;
    height: 18px;
    font-size: .55rem;
  }
}
/* /Components/Cards/ProgressionCards.razor.rz.scp.css */
/* ==========================================
   Défilement horizontal
========================================== */

.progression-scroll[b-pj7xaki83z]{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:.7rem;

    overflow-x:auto;
    overflow-y:hidden;

    padding:.2rem;

    scrollbar-width:none;
    -ms-overflow-style:none;
}

.progression-scroll[b-pj7xaki83z]::-webkit-scrollbar{
    display:none;
}

/* ==========================================
   Carte
========================================== */

.progression-card[b-pj7xaki83z]{
    flex:0 0 125px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    gap:.2rem;

    padding:.2rem;

    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;

    cursor:pointer;
    transition:.2s;

    text-align:center;
}

.progression-card:hover[b-pj7xaki83z]{
    transform:translateY(-3px);
    border-color:#fdecec;
    box-shadow:0 4px 10px #e5e7eb;
}

.progression-card.active[b-pj7xaki83z]{
    background:#fdecec;
    border-color:#fdecec;
    box-shadow:0 4px 10px #e5e7eb;
}

/* ==========================================
   Image
========================================== */

.progression-image[b-pj7xaki83z]{
    width:50px;
    height:50px;

    border-radius:50%;
    overflow:hidden;

    border:3px solid #fdecec;
    background:#fff;

    flex-shrink:0;
}

.progression-image img[b-pj7xaki83z]{
    width:100%;
    height:100%;
    object-fit:cover;
}

.progression-card.active .progression-image[b-pj7xaki83z]{
    border-color:#c92a2a;
}

/* ==========================================
   Avatar lettre de secours
========================================== */

.progression-avatar-letter[b-pj7xaki83z]{
display:none;
width:100%;
height:100%;
align-items:center;
justify-content:center;
background:#fdecec;
color:#c92a2a;
font-size:1.2rem;
font-weight:700;
}

/* ==========================================
   Skeleton Shimmer
========================================== */

.skeleton-card[b-pj7xaki83z]{
cursor:default;
pointer-events:none;
}

.skeleton[b-pj7xaki83z]{
position:relative;
overflow:hidden;
background:#e5e7eb;
}

.skeleton[b-pj7xaki83z]::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
transform:translateX(-100%);
animation:progression-shine-b-pj7xaki83z 1.3s infinite;
}

@keyframes progression-shine-b-pj7xaki83z{
100%{ transform:translateX(100%); }
}

.progression-image.skeleton[b-pj7xaki83z]{
border:0;
}

.text[b-pj7xaki83z]{
height:10px;
border-radius:8px;
margin:auto;
}

.name[b-pj7xaki83z]{
width:90%;
height:13px;
}

.info[b-pj7xaki83z]{
width:70%;
}

.skeleton-card:nth-child(2n) .skeleton[b-pj7xaki83z]::after{
animation-delay:.2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-pj7xaki83z]::after{
animation-delay:.4s;
}

/* ==========================================
   Erreur
========================================== */

.progression-error[b-pj7xaki83z]{
padding:.9rem;
background:#fef2f2;
border:1px solid #fecaca;
border-radius:10px;
color:#c92a2a;
font-size:.75rem;
}

/* ==========================================
   Contenu
========================================== */

.progression-content[b-pj7xaki83z]{
    display:flex;
    flex-direction:column;
    gap:.2rem;

    width:100%;
}

.progression-name[b-pj7xaki83z]{
    font-size:.75rem;
    font-weight:700;
    color:#111827;
}

.progression-info[b-pj7xaki83z]{
    font-size:.6rem;
    font-weight:600;
    color:#c92a2a;
}

.progression-objective[b-pj7xaki83z]{
    font-size:.5rem;
    color:#6b7280;
    line-height:1.3;
}

/* ==========================================
   Mobile
========================================== */

@media(max-width:768px){

    .progression-card[b-pj7xaki83z]{
        flex:0 0 150px;
        padding:.6rem;
    }

    .progression-image[b-pj7xaki83z]{
        width:60px;
        height:60px;
    }

    .progression-name[b-pj7xaki83z]{
        font-size:.75rem;
    }

    .progression-info[b-pj7xaki83z]{
        font-size:.65rem;
    }

    .progression-objective[b-pj7xaki83z]{
        font-size:.60rem;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .progression-scroll[b-pj7xaki83z] { gap: .4rem; padding: .1rem; height: 100%; align-items: center; }
    .progression-card[b-pj7xaki83z] { flex: 0 0 84px; height: 70px; padding: .2rem; gap: .1rem; border-radius: 10px; justify-content: center; }
    .progression-image[b-pj7xaki83z] { width: 28px; height: 28px; border-width: 2px; }
    .progression-avatar-letter[b-pj7xaki83z] { font-size: .7rem; }
    .progression-name[b-pj7xaki83z] { font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .progression-info[b-pj7xaki83z] { font-size: .42rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .progression-objective[b-pj7xaki83z] { display: none; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .progression-card[b-pj7xaki83z] { flex: 0 0 64px; height: 44px; }
    .progression-image[b-pj7xaki83z] { width: 18px; height: 18px; }
    .progression-name[b-pj7xaki83z] { font-size: .4rem; }
    .progression-info[b-pj7xaki83z] { display: none; }
}
/* /Components/Cards/ProvincesCards.razor.rz.scp.css */
/* ==========================================
   LISTE HORIZONTALE DES PROVINCES
========================================== */

.stats-scroll[b-k7nw2y2dci] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 6px 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.stats-scroll[b-k7nw2y2dci]::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   CARTE PROVINCE
========================================== */

.stat-card[b-k7nw2y2dci] {
    position: relative;
    flex: 0 0 110px;
    height: 110px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 10px #e5e7eb;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.stat-card.selected[b-k7nw2y2dci] {
    border: 1px solid red;
    background: #fdecec;
}


/* ==========================================
   BADGE : NOMBRE DE PROGRAMMES
   Masqué par défaut. S'applique aussi à la pastille
   fantôme (skeleton-badge) des vraies cartes.
========================================== */

.programs-badge[b-k7nw2y2dci] {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #c92a2a;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    opacity: 0;
    transform: scale(.8);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

/* Appareil avec vraie souris : visible seulement au survol */
@media (hover: hover) and (pointer: fine) {
    .stat-card:hover[b-k7nw2y2dci] {
        transform: translateY(-4px);
    }

    .stat-card:hover .programs-badge[b-k7nw2y2dci],
    .stat-card:focus-within .programs-badge[b-k7nw2y2dci] {
        opacity: 1;
        transform: scale(1);
    }
}

/* Appareil tactile : visible seulement sur la carte touchée (sélectionnée) */
@media (hover: none), (pointer: coarse) {
    .stat-card.selected .programs-badge[b-k7nw2y2dci] {
        opacity: 1;
        transform: scale(1);
    }
}

/* Squelette de chargement initial (cartes factices) : toujours visible.
   Doit rester APRÈS les règles ci-dessus. */
.stat-card.skeleton-stat-card .programs-badge[b-k7nw2y2dci] {
    opacity: 1;
    transform: none;
}

/* Pastille fantôme : même forme et même place que la vraie, mais grise et animée */
.programs-badge.skeleton-badge[b-k7nw2y2dci] {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: badge-shimmer-b-k7nw2y2dci 1.2s ease-in-out infinite;
    box-shadow: none;
    color: transparent;
    min-width: 22px;
    width: 22px;
    padding: 0;
}

@keyframes badge-shimmer-b-k7nw2y2dci {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .programs-badge.skeleton-badge[b-k7nw2y2dci] {
        min-width: 15px;
        width: 15px;
        padding: 0;
    }
}


/* ==========================================
   DRAPEAU
========================================== */

.province-flag[b-k7nw2y2dci] {
    width: 56px;
    height: 56px;
    border-radius: 100%;
    overflow: hidden;
    background: #f3f4f6;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.province-flag img[b-k7nw2y2dci] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================
   INFOS
========================================== */

.stat-info[b-k7nw2y2dci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-value[b-k7nw2y2dci] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .5rem;
    font-weight: 700;
    color: #000;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3e6e6;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.stat-label[b-k7nw2y2dci] {
    margin-top: .2rem;
    font-size: .68rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
}


/* ==========================================
   MOBILE / PETIT ÉCRAN
========================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .stats-scroll[b-k7nw2y2dci] {
        gap: 6px;
        height: auto;
        padding: 4px 6px 6px;
    }

    .stat-card[b-k7nw2y2dci] {
        flex: 0 0 84px;
        height: 73px;
        gap: 3px;
        padding: 4px;
        border-radius: 10px;
        box-shadow: 0 2px 6px #e5e7eb;
    }

    .stat-card:hover[b-k7nw2y2dci] {
        transform: none;
    }

    .province-flag[b-k7nw2y2dci] {
        width: 36px;
        height: 36px;
    }

    .stat-value[b-k7nw2y2dci] {
        width: 14px;
        height: 14px;
        font-size: .45rem;
    }

    .stat-label[b-k7nw2y2dci] {
        margin-top: .1rem;
        font-size: .53rem;
        line-height: 1.15;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .programs-badge[b-k7nw2y2dci] {
        top: 2px;
        right: 2px;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        font-size: .5rem;
    }
}
/* /Components/Cards/RapportAgentCards.razor.rz.scp.css */
/* Scroll horizontal */
.rapportAgent-scroll[b-ajajx4yeu9]{
display:flex;
gap:.7rem;
overflow-x:auto;
padding:.2rem;
scrollbar-width:none;
-ms-overflow-style:none;
}

.rapportAgent-scroll[b-ajajx4yeu9]::-webkit-scrollbar{
display:none;
}

/* Carte */
.rapportAgent-card[b-ajajx4yeu9]{
flex:0 0 130px;
display:flex;
flex-direction:column;
align-items:center;
gap:.1rem;
padding:.3rem;
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
text-align:center;
cursor:pointer;
transition:.2s;
}

.rapportAgent-card:hover[b-ajajx4yeu9]{
transform:translateY(-3px);
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.rapportAgent-card.active[b-ajajx4yeu9]{
background:#fdecec;
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

/* Image */
.rapportAgent-image[b-ajajx4yeu9]{
width:50px;
height:50px;
border-radius:50%;
overflow:hidden;
border:3px solid #fdecec;
background:#fff;
flex-shrink:0;
}

.rapportAgent-image img[b-ajajx4yeu9]{
width:100%;
height:100%;
object-fit:cover;
}

.rapportAgent-card.active .rapportAgent-image[b-ajajx4yeu9]{
border-color:#c92a2a;
}

/* Fallback première lettre */
.rapportAgent-avatar-letter[b-ajajx4yeu9]{
display:none;
width:100%;
height:100%;
align-items:center;
justify-content:center;
background:#fdecec;
color:#c92a2a;
font-size:1.2rem;
font-weight:700;
}

.rapportAgent-card.active .rapportAgent-avatar-letter[b-ajajx4yeu9]{
background:#c92a2a;
color:#fff;
}

/* Contenu */
.rapportAgent-content[b-ajajx4yeu9]{
width:100%;
display:flex;
flex-direction:column;
gap:.1rem;
}

.rapportAgent-name[b-ajajx4yeu9]{
font-size:.77rem;
font-weight:700;
color:#111827;
}

.rapportAgent-info[b-ajajx4yeu9]{
font-size:.55rem;
font-weight:600;
color:#c92a2a;
}

.rapportAgent-objective[b-ajajx4yeu9]{
font-size:.5rem;
color:#6b7280;
}

/* Skeleton */
.skeleton-card[b-ajajx4yeu9]{
cursor:default;
pointer-events:none;
}

.skeleton[b-ajajx4yeu9]{
position:relative;
overflow:hidden;
background:#e5e7eb;
}

.skeleton[b-ajajx4yeu9]::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.85),
transparent
);
transform:translateX(-100%);
animation:rapportAgent-shine-b-ajajx4yeu9 1.3s infinite;
}

@keyframes rapportAgent-shine-b-ajajx4yeu9{
100%{
transform:translateX(100%);
}
}

/* Image skeleton */
.rapportAgent-image.skeleton[b-ajajx4yeu9]{
border:0;
}

/* Texte skeleton */
.text[b-ajajx4yeu9]{
height:10px;
border-radius:8px;
margin:auto;
}

.name[b-ajajx4yeu9]{
width:90%;
height:13px;
}

.info[b-ajajx4yeu9]{
width:70%;
}

.country[b-ajajx4yeu9]{
width:55%;
}

/* Décalage lumière */
.skeleton-card:nth-child(2n) .skeleton[b-ajajx4yeu9]::after{
animation-delay:.2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-ajajx4yeu9]::after{
animation-delay:.4s;
}

.skeleton-card:nth-child(5n) .skeleton[b-ajajx4yeu9]::after{
animation-delay:.6s;
}

.skeleton-card:nth-child(7n) .skeleton[b-ajajx4yeu9]::after{
animation-delay:.8s;
}

/* Erreur */
.rapportAgent-error[b-ajajx4yeu9]{
padding:.9rem;
background:#fef2f2;
border:1px solid #fecaca;
border-radius:10px;
color:#c92a2a;
font-size:.75rem;
}

/* Vide */
.rapportAgent-empty[b-ajajx4yeu9]{
padding:1.5rem;
text-align:center;
color:#9ca3af;
font-size:.75rem;
}

/* Mobile */
@media(max-width:768px){

.rapportAgent-card[b-ajajx4yeu9]{
flex-basis:150px;
padding:.6rem;
}

.rapportAgent-image[b-ajajx4yeu9]{
width:60px;
height:60px;
}

.rapportAgent-name[b-ajajx4yeu9]{
font-size:.75rem;
}

.rapportAgent-info[b-ajajx4yeu9]{
font-size:.65rem;
}

.rapportAgent-objective[b-ajajx4yeu9]{
font-size:.6rem;
}

}
/* /Components/Cards/RapportsProcessusCards.razor.rz.scp.css */
/* ==========================================
   Défilement horizontal
========================================== */

.rapportsProcessus-scroll[b-ozd0izb0kw]{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
gap:.7rem;

overflow-x:auto;
overflow-y:hidden;

padding:.2rem;

scrollbar-width:none;
-ms-overflow-style:none;
}

.rapportsProcessus-scroll[b-ozd0izb0kw]::-webkit-scrollbar{
display:none;
}


/* ==========================================
   Carte
========================================== */

.rapportsProcessus-card[b-ozd0izb0kw]{
flex:0 0 125px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
height:100%;
gap:.2rem;

padding:.2rem;

background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;

cursor:pointer;
transition:.2s;

text-align:center;
}

.rapportsProcessus-card:hover[b-ozd0izb0kw]{
transform:translateY(-3px);
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.rapportsProcessus-card.active[b-ozd0izb0kw]{
background:#fdecec;
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}


/* ==========================================
   Image
========================================== */

.rapportsProcessus-image[b-ozd0izb0kw]{
width:50px;
height:50px;
position:relative;

border-radius:50%;
overflow:hidden;

border:3px solid #fdecec;
background:#fff;

flex-shrink:0;
}

.rapportsProcessus-image img[b-ozd0izb0kw]{
width:100%;
height:100%;
object-fit:cover;
}

.rapportsProcessus-card.active .rapportsProcessus-image[b-ozd0izb0kw]{
border-color:#c92a2a;
}


/* ==========================================
   Avatar lettre de secours
========================================== */

.rapportsProcessus-avatar-letter[b-ozd0izb0kw]{
position:absolute;
top:0;
left:0;

display:none;
width:100%;
height:100%;
align-items:center;
justify-content:center;
background:#fdecec;
color:#c92a2a;
font-size:1.2rem;
font-weight:700;
}


/* ==========================================
   Contenu
========================================== */

.rapportsProcessus-content[b-ozd0izb0kw]{
display:flex;
flex-direction:column;
gap:.2rem;

width:100%;
}

.rapportsProcessus-name[b-ozd0izb0kw]{
font-size:.75rem;
font-weight:700;
color:#111827;
}

.rapportsProcessus-info[b-ozd0izb0kw]{
font-size:.6rem;
font-weight:600;
color:#c92a2a;
}

.rapportsProcessus-objective[b-ozd0izb0kw]{
font-size:.5rem;
color:#6b7280;
line-height:1.3;
}


/* ==========================================
   Skeleton Shimmer
========================================== */

.skeleton-card[b-ozd0izb0kw]{
cursor:default;
pointer-events:none;
}

.skeleton[b-ozd0izb0kw]{
position:relative;
overflow:hidden;
background:#e5e7eb;
}

.skeleton[b-ozd0izb0kw]::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
transform:translateX(-100%);
animation:rapportsProcessus-shine-b-ozd0izb0kw 1.3s infinite;
}

@keyframes rapportsProcessus-shine-b-ozd0izb0kw{
100%{ transform:translateX(100%); }
}

.rapportsProcessus-image.skeleton[b-ozd0izb0kw]{
border:0;
}

.text[b-ozd0izb0kw]{
height:10px;
border-radius:8px;
margin:auto;
}

.name[b-ozd0izb0kw]{
width:90%;
height:13px;
}

.info[b-ozd0izb0kw]{
width:70%;
}

.skeleton-card:nth-child(2n) .skeleton[b-ozd0izb0kw]::after{
animation-delay:.2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-ozd0izb0kw]::after{
animation-delay:.4s;
}


/* ==========================================
   Messages
========================================== */

.rapportsProcessus-error[b-ozd0izb0kw]{
padding:.9rem;
background:#fef2f2;
border:1px solid #fecaca;
border-radius:10px;
color:#c92a2a;
font-size:.75rem;
}

.empty-rapportsProcessus[b-ozd0izb0kw]{
padding:1.5rem;
text-align:center;
color:#9ca3af;
}


/* ==========================================
   Mobile
========================================== */

@media(max-width:768px){

.rapportsProcessus-card[b-ozd0izb0kw]{
flex:0 0 150px;
padding:.6rem;
    }

.rapportsProcessus-image[b-ozd0izb0kw]{
width:60px;
height:60px;
    }

.rapportsProcessus-name[b-ozd0izb0kw]{
font-size:.75rem;
    }

.rapportsProcessus-info[b-ozd0izb0kw]{
font-size:.65rem;
    }

.rapportsProcessus-objective[b-ozd0izb0kw]{
font-size:.60rem;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .rapportsProcessus-scroll[b-ozd0izb0kw] { gap: .4rem; padding: .1rem; height: 100%; align-items: center; }
    .rapportsProcessus-scroll .rapportsProcessus-card[b-ozd0izb0kw] { flex: 0 0 84px; height: 70px; padding: .2rem; gap: .1rem; border-radius: 10px; justify-content: center; }
    .rapportsProcessus-scroll .rapportsProcessus-image[b-ozd0izb0kw] { width: 28px; height: 28px; border-width: 2px; }
    .rapportsProcessus-scroll .rapportsProcessus-avatar-letter[b-ozd0izb0kw] { font-size: .7rem; }
    .rapportsProcessus-scroll .rapportsProcessus-name[b-ozd0izb0kw] { font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rapportsProcessus-scroll .rapportsProcessus-info[b-ozd0izb0kw] { font-size: .42rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rapportsProcessus-scroll .rapportsProcessus-objective[b-ozd0izb0kw] { display: none; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .rapportsProcessus-scroll .rapportsProcessus-card[b-ozd0izb0kw] { flex: 0 0 64px; height: 44px; }
    .rapportsProcessus-scroll .rapportsProcessus-image[b-ozd0izb0kw] { width: 18px; height: 18px; }
    .rapportsProcessus-scroll .rapportsProcessus-name[b-ozd0izb0kw] { font-size: .4rem; }
    .rapportsProcessus-scroll .rapportsProcessus-info[b-ozd0izb0kw] { display: none; }
}
/* /Components/Cards/RechercheEmploiCards.razor.rz.scp.css */
/* ==========================================
   LISTE HORIZONTALE DE RECHERCHE D'EMPLOI
   Design commun : carte à taille fixe, contenu centré.
   Taille : modifier les 3 variables ci-dessous (--tile-*).
========================================== */

.rechercheemploi-scroll[b-1e1ye4ka6q] {
    --tile-w: 110px;
    --tile-h: 170px;
    --tile-icon: 40px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rechercheemploi-scroll[b-1e1ye4ka6q]::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   CARTE RECHERCHE D'EMPLOI (taille fixe, contenu centré)
========================================== */

.rechercheemploi-card[b-1e1ye4ka6q] {
    position:relative;              /* repère du badge en haut à droite */
    flex:0 0 110px;
    height:118px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:.4rem;
    padding:.6rem;
    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    cursor:pointer;
    box-shadow:0 4px 10px #e5e7eb;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.rechercheemploi-card:hover[b-1e1ye4ka6q] {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px #e5e7eb;
}


/* Élément sélectionné */

.rechercheemploi-card.active[b-1e1ye4ka6q] {
    border: 1px solid red;
    background: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   ICÔNE
========================================== */

.rechercheemploi-icon[b-1e1ye4ka6q] {
    width: var(--tile-icon, 40px);
    height: var(--tile-icon, 40px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.rechercheemploi-card.active .rechercheemploi-icon[b-1e1ye4ka6q] {
    background: #fff;
}


/* ==========================================
   INFOS (centrées, retour à la ligne autorisé)
========================================== */

.rechercheemploi-content[b-1e1ye4ka6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Titre : 3 lignes max puis « … » */
.rechercheemploi-name[b-1e1ye4ka6q] {
    font-size: .7rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    text-wrap: balance;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rechercheemploi-info[b-1e1ye4ka6q] {
    margin-top: .2rem;
    font-size: .68rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rechercheemploi-objective[b-1e1ye4ka6q] {
    margin-top: .3rem;
    font-size: .6rem;
    color: #c92a2a;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================
   ACTIONS — visibles uniquement au survol
   Modifier : haut droite | Supprimer : haut gauche
========================================== */

.rechercheemploi-btn-edit[b-1e1ye4ka6q],
.rechercheemploi-btn-delete[b-1e1ye4ka6q] {
    position: absolute;
    top: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

.rechercheemploi-card:hover .rechercheemploi-btn-edit[b-1e1ye4ka6q],
.rechercheemploi-card:hover .rechercheemploi-btn-delete[b-1e1ye4ka6q] {
    opacity: 1;
    pointer-events: auto;
}

.rechercheemploi-btn-edit[b-1e1ye4ka6q] {
    right: 6px;
}

.rechercheemploi-btn-delete[b-1e1ye4ka6q] {
    left: 6px;
}

.rechercheemploi-btn-edit:hover[b-1e1ye4ka6q],
.rechercheemploi-btn-delete:hover[b-1e1ye4ka6q] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.rechercheemploi-btn-edit:active[b-1e1ye4ka6q],
.rechercheemploi-btn-delete:active[b-1e1ye4ka6q] {
    transform: scale(.95);
}


/* ==========================================
   MESSAGE VIDE / SKELETON
========================================== */

.empty-rechercheemploi[b-1e1ye4ka6q] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* Skeleton : la vraie carte (mêmes dimensions, même centrage),
   avec des blocs shimmer à la place du contenu */
.rechercheemploi-card.skeleton-tile[b-1e1ye4ka6q] {
    cursor: default;
    pointer-events: none;
}

.rechercheemploi-card.skeleton-tile:hover[b-1e1ye4ka6q] {
    transform: none;
}

.skeleton-tile-icon[b-1e1ye4ka6q] {
    width: var(--tile-icon, 40px);
    height: var(--tile-icon, 40px);
    flex-shrink: 0;
    border-radius: 50%;
}

.skeleton-tile-line[b-1e1ye4ka6q] {
    height: 10px;
    margin: .25rem auto 0;
    border-radius: 6px;
}

.skeleton-tile-line--name[b-1e1ye4ka6q]  { width: 85%; }
.skeleton-tile-line--short[b-1e1ye4ka6q] { width: 60%; }
.skeleton-tile-line--info[b-1e1ye4ka6q]  { width: 70%; height: 8px; margin-top: .45rem; }


/* ==========================================
   TACTILE / MOBILE — pas de survol : boutons visibles
   (la taille de la carte ne change pas)
========================================== */

@media (hover: none), (max-width: 640px) {

    .rechercheemploi-btn-edit[b-1e1ye4ka6q],
    .rechercheemploi-btn-delete[b-1e1ye4ka6q] {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ==========================================
   MOBILE : cartes compactes (bande de 84 px)
========================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .rechercheemploi-scroll[b-1e1ye4ka6q] {
        gap: .4rem;
        padding: .15rem .2rem;
        height: 100%;
        align-items: center;
    }

    .rechercheemploi-card[b-1e1ye4ka6q] {
        flex: 0 0 84px;
        height: 70px;
        gap: .15rem;
        padding: .25rem;
        border-radius: 10px;
    }

    .rechercheemploi-icon[b-1e1ye4ka6q] {
        width: 24px;
        height: 24px;
        font-size: .75rem;
    }

    .rechercheemploi-name[b-1e1ye4ka6q] {
        font-size: .55rem;
        -webkit-line-clamp: 2;
    }

    .rechercheemploi-info[b-1e1ye4ka6q] {
        display: none;
    }

    .rechercheemploi-btn-edit[b-1e1ye4ka6q],
    .rechercheemploi-btn-delete[b-1e1ye4ka6q] {
        width: 16px;
        height: 16px;
        top: 3px;
        font-size: .45rem;
    }

    .rechercheemploi-btn-edit[b-1e1ye4ka6q]   { right: 3px; }
    .rechercheemploi-btn-delete[b-1e1ye4ka6q] { left: 3px; }
}

@media (max-height: 500px) and (orientation: landscape) {

    .rechercheemploi-card[b-1e1ye4ka6q] {
        flex: 0 0 64px;
        height: 44px;
        padding: .15rem;
    }

    .rechercheemploi-icon[b-1e1ye4ka6q] {
        width: 16px;
        height: 16px;
        font-size: .5rem;
    }

    .rechercheemploi-name[b-1e1ye4ka6q] {
        font-size: .4rem;
    }
}
/* /Components/Cards/ReglementesCards.razor.rz.scp.css */
/* Scroll */
.reglementes-scroll[b-fl5ptcg4l3] {
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    padding: .2rem;
    scrollbar-width: none;
}

.reglementes-scroll[b-fl5ptcg4l3]::-webkit-scrollbar {
    display: none;
}

/* Carte */
.reglementes-card[b-fl5ptcg4l3] {
    position: relative;               /* repère du cercle du nombre de services */
    flex: 0 0 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .3rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: .2s;
}

.reglementes-card:hover[b-fl5ptcg4l3] {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px #e5e7eb;
}

.reglementes-card.active[b-fl5ptcg4l3] {
    background: #fdecec;
    border-color: #fdecec;
}

/* Image */
.reglementes-image[b-fl5ptcg4l3] {
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fdecec;
    flex-shrink: 0;
}

.reglementes-image img[b-fl5ptcg4l3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.active .reglementes-image[b-fl5ptcg4l3] {
    border-color: #c92a2a;
}

/* Texte
   RENOMMÉ : ".reglementes-content" entrait en collision avec le conteneur
   principal de la page (position: fixed). */
.reglementes-card-content[b-fl5ptcg4l3] {
    position: relative;               /* repère de l'icône de message */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.reglementes-name[b-fl5ptcg4l3] {
    font-size: .77rem;
    font-weight: 700;
    color: #111827;
}

.reglementes-info[b-fl5ptcg4l3] {
    font-size: .55rem;
    font-weight: 600;
    color: #c92a2a;
}

.reglementes-objective[b-fl5ptcg4l3] {
    font-size: .5rem;
    color: #6b7280;
}

/* ==========================================
   Cercle du nombre de services
   (apparaît au survol de la carte, en haut à droite)
========================================== */

.reglementes-nb-services[b-fl5ptcg4l3] {
    position: absolute;
    top: .25rem;
    right: .25rem;

    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #c92a2a;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;

    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 5;
}

.reglementes-card:hover .reglementes-nb-services[b-fl5ptcg4l3] {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================
   Icône de message
   (apparaît seulement au survol du nom ou du type de compte)
========================================== */

.reglementes-message-btn[b-fl5ptcg4l3] {
    position: absolute;
    bottom: 0;
    right: 0;

    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    line-height: 1;
    cursor: pointer;

    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease, color .15s ease;
    z-index: 5;
}

.reglementes-card-content:hover .reglementes-message-btn[b-fl5ptcg4l3] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.reglementes-message-btn:hover[b-fl5ptcg4l3] {
    background: #c92a2a;
    color: #fff;
}

/* Skeleton Shimmer */
.skeleton-card[b-fl5ptcg4l3] {
    cursor: default;
    pointer-events: none;
}

.skeleton[b-fl5ptcg4l3] {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}

.skeleton[b-fl5ptcg4l3]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translateX(-100%);
    animation: shine-b-fl5ptcg4l3 1.3s infinite;
}

@keyframes shine-b-fl5ptcg4l3 {
    100% {
        transform: translateX(100%);
    }
}

.reglementes-image.skeleton[b-fl5ptcg4l3] {
    border: 0;
}

.text[b-fl5ptcg4l3] {
    height: 10px;
    border-radius: 8px;
    margin: auto;
}

.name[b-fl5ptcg4l3] {
    width: 90%;
    height: 13px;
}

.info[b-fl5ptcg4l3] {
    width: 70%;
}

.country[b-fl5ptcg4l3] {
    width: 55%;
}

.skeleton-card:nth-child(2n) .skeleton[b-fl5ptcg4l3]::after {
    animation-delay: .2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-fl5ptcg4l3]::after {
    animation-delay: .4s;
}

.skeleton-card:nth-child(5n) .skeleton[b-fl5ptcg4l3]::after {
    animation-delay: .6s;
}

/* Messages */
.reglementes-error[b-fl5ptcg4l3] {
    padding: .9rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #c92a2a;
    font-size: .75rem;
}

.reglementes-empty[b-fl5ptcg4l3] {
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
}

/* Lettre de secours si l'image ne charge pas */
.reglementes-avatar-letter[b-fl5ptcg4l3] {
    position: absolute;
    top: 0;
    left: 0;

    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: #fdecec;
    color: #c92a2a;
    font-size: 1.2rem;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
    .reglementes-card[b-fl5ptcg4l3] {
        flex-basis: 150px;
        padding: .6rem;
    }

    .reglementes-image[b-fl5ptcg4l3] {
        width: 60px;
        height: 60px;
    }
}

/* ==========================================
   MOBILE : cartes compactes (bande de 84 px)
========================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .reglementes-scroll[b-fl5ptcg4l3] {
        gap: .4rem;
        padding: .15rem .2rem;
        height: 100%;
        align-items: center;
    }

    .reglementes-card[b-fl5ptcg4l3] {
        flex: 0 0 84px;
        height: 70px;
        gap: .15rem;
        padding: .25rem;
        border-radius: 10px;
        justify-content: center;
    }

    .reglementes-image[b-fl5ptcg4l3] {
        width: 28px;
        height: 28px;
        border-width: 2px;
    }

    .reglementes-avatar-letter[b-fl5ptcg4l3] { font-size: .7rem; }

    .reglementes-name[b-fl5ptcg4l3] {
        font-size: .55rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .reglementes-info[b-fl5ptcg4l3] {
        font-size: .42rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .reglementes-nb-services[b-fl5ptcg4l3] { width: .9rem; height: .9rem; font-size: .45rem; }
    .reglementes-message-btn[b-fl5ptcg4l3] { width: .9rem; height: .9rem; font-size: .5rem; }
}

@media (max-height: 500px) and (orientation: landscape) {

    .reglementes-card[b-fl5ptcg4l3] {
        flex: 0 0 64px;
        height: 44px;
        padding: .15rem;
    }

    .reglementes-image[b-fl5ptcg4l3] {
        width: 18px;
        height: 18px;
    }

    .reglementes-name[b-fl5ptcg4l3] { font-size: .4rem; }
    .reglementes-info[b-fl5ptcg4l3] { display: none; }
}
/* /Components/Cards/ServiceAgentsCards.razor.rz.scp.css */
/* Scroll */
.serviceAgents-scroll[b-9gw8b3tynv]{
display:flex;
gap:.7rem;
overflow-x:auto;
padding:.2rem;
scrollbar-width:none;
}

.serviceAgents-scroll[b-9gw8b3tynv]::-webkit-scrollbar{
display:none;
}

/* Carte */
.serviceAgents-card[b-9gw8b3tynv]{
flex:0 0 130px;
display:flex;
flex-direction:column;
align-items:center;
gap:.25rem;
padding:.3rem;
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
text-align:center;
cursor:pointer;
transition:.2s;
}

.serviceAgents-card:hover[b-9gw8b3tynv]{
transform:translateY(-3px);
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.serviceAgents-card.active[b-9gw8b3tynv]{
background:#fdecec;
border-color:#fdecec;
}

/* Image */
.serviceAgents-image[b-9gw8b3tynv]{
width:50px;
height:50px;
position:relative;   /* 👈 ajouté pour que l'avatar-letter se superpose correctement */
border-radius:50%;
overflow:hidden;
border:3px solid #fdecec;
flex-shrink:0;
}

.serviceAgents-image img[b-9gw8b3tynv]{
width:100%;
height:100%;
object-fit:cover;
}

.active .serviceAgents-image[b-9gw8b3tynv]{
border-color:#c92a2a;
}

/* Texte */
.serviceAgents-content[b-9gw8b3tynv]{
width:100%;
display:flex;
flex-direction:column;
gap:.2rem;
}

.serviceAgents-name[b-9gw8b3tynv]{
font-size:.75rem;
font-weight:700;
color:#111827;
}

.serviceAgents-info[b-9gw8b3tynv]{
font-size:.6rem;
font-weight:600;
color:#c92a2a;
}

.serviceAgents-objective[b-9gw8b3tynv]{
font-size:.5rem;
color:#6b7280;
}

/* Skeleton */
.skeleton-card[b-9gw8b3tynv]{
cursor:default;
pointer-events:none;
}

.skeleton[b-9gw8b3tynv]{
position:relative;
overflow:hidden;
background:#e5e7eb;
}

.skeleton[b-9gw8b3tynv]::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
transform:translateX(-100%);
animation:serviceAgents-shine-b-9gw8b3tynv 1.3s infinite;
}

@keyframes serviceAgents-shine-b-9gw8b3tynv{
100%{ transform:translateX(100%); }
}

.serviceAgents-image.skeleton[b-9gw8b3tynv]{
border:0;
}

.text[b-9gw8b3tynv]{
height:10px;
border-radius:8px;
margin:auto;
}

.name[b-9gw8b3tynv]{
width:90%;
height:13px;
}

.info[b-9gw8b3tynv]{
width:70%;
}

.objective[b-9gw8b3tynv]{
width:55%;
}

.skeleton-card:nth-child(2n) .skeleton[b-9gw8b3tynv]::after{
animation-delay:.2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-9gw8b3tynv]::after{
animation-delay:.4s;
}

.skeleton-card:nth-child(5n) .skeleton[b-9gw8b3tynv]::after{
animation-delay:.6s;
}

/* Messages */
.serviceAgents-error[b-9gw8b3tynv]{
padding:.9rem;
background:#fef2f2;
border:1px solid #fecaca;
border-radius:10px;
color:#c92a2a;
font-size:.75rem;
}

.empty-serviceAgents[b-9gw8b3tynv]{
padding:1.5rem;
text-align:center;
color:#9ca3af;
}

/* Lettre de secours si l'image ne charge pas */
.serviceAgents-avatar-letter[b-9gw8b3tynv]{
display:none;

width:100%;
height:100%;

align-items:center;
justify-content:center;

background:#fdecec;
color:#c92a2a;

font-size:1.2rem;
font-weight:700;
}

/* Mobile */
@media(max-width:768px){
.serviceAgents-card[b-9gw8b3tynv]{
flex-basis:150px;
padding:.6rem;
    }
.serviceAgents-image[b-9gw8b3tynv]{
width:60px;
height:60px;
    }
}
/* /Components/Cards/ServiceStatistiquesCards.razor.rz.scp.css */
/* Scroll */
.statistique-scroll[b-wx2udkvhd5]{
    display:flex;
    gap:.7rem;
    overflow-x:auto;
    padding:.2rem;
    scrollbar-width:none;
}

.statistique-scroll[b-wx2udkvhd5]::-webkit-scrollbar{
    display:none;
}

/* Carte */
.statistique-card[b-wx2udkvhd5]{
    flex:0 0 130px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.25rem;
    padding:.3rem;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    text-align:center;
    cursor:pointer;
    transition:.2s;
}

.statistique-card:hover[b-wx2udkvhd5]{
    transform:translateY(-3px);
    border-color:#fdecec;
    box-shadow:0 4px 10px #e5e7eb;
}

.statistique-card.active[b-wx2udkvhd5]{
    background:#fdecec;
    border-color:#fdecec;
}

/* Image */
.statistique-image[b-wx2udkvhd5]{
    width:50px;
    height:50px;
    position:relative;   /* pour que l'avatar-letter se superpose correctement */
    border-radius:50%;
    overflow:hidden;
    border:3px solid #fdecec;
    flex-shrink:0;
}

.statistique-image img[b-wx2udkvhd5]{
    width:100%;
    height:100%;
    object-fit:cover;
}

.active .statistique-image[b-wx2udkvhd5]{
    border-color:#c92a2a;
}

/* Texte */
.statistique-content[b-wx2udkvhd5]{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:.2rem;
}

.statistique-name[b-wx2udkvhd5]{
    font-size:.75rem;
    font-weight:700;
    color:#111827;
}

.statistique-info[b-wx2udkvhd5]{
    font-size:.6rem;
    font-weight:600;
    color:#c92a2a;
}

.statistique-objective[b-wx2udkvhd5]{
    font-size:.5rem;
    color:#6b7280;
}

/* Skeleton */
.skeleton-card[b-wx2udkvhd5]{
    cursor:default;
    pointer-events:none;
}

.skeleton[b-wx2udkvhd5]{
    position:relative;
    overflow:hidden;
    background:#e5e7eb;
}

.skeleton[b-wx2udkvhd5]::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    transform:translateX(-100%);
    animation:statistique-shine-b-wx2udkvhd5 1.3s infinite;
}

@keyframes statistique-shine-b-wx2udkvhd5{
    100%{ transform:translateX(100%); }
}

.statistique-image.skeleton[b-wx2udkvhd5]{
    border:0;
}

.text[b-wx2udkvhd5]{
    height:10px;
    border-radius:8px;
    margin:auto;
}

.name[b-wx2udkvhd5]{
    width:90%;
    height:13px;
}

.info[b-wx2udkvhd5]{
    width:70%;
}

.objective[b-wx2udkvhd5]{
    width:55%;
}

.skeleton-card:nth-child(2n) .skeleton[b-wx2udkvhd5]::after{
    animation-delay:.2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-wx2udkvhd5]::after{
    animation-delay:.4s;
}

.skeleton-card:nth-child(5n) .skeleton[b-wx2udkvhd5]::after{
    animation-delay:.6s;
}

/* Messages */
.statistique-error[b-wx2udkvhd5]{
    padding:.9rem;
    background:#fef2f2;
    border:1px solid #fecaca;
    border-radius:10px;
    color:#c92a2a;
    font-size:.75rem;
}

.empty-statistique[b-wx2udkvhd5]{
    padding:1.5rem;
    text-align:center;
    color:#9ca3af;
}

/* Lettre de secours si l'image ne charge pas */
.statistique-avatar-letter[b-wx2udkvhd5]{
    display:none;

    width:100%;
    height:100%;

    align-items:center;
    justify-content:center;

    background:#fdecec;
    color:#c92a2a;

    font-size:1.2rem;
    font-weight:700;
}

/* Mobile */
@media(max-width:768px){
    .statistique-card[b-wx2udkvhd5]{
        flex-basis:150px;
        padding:.6rem;
    }
    .statistique-image[b-wx2udkvhd5]{
        width:60px;
        height:60px;
    }
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : cartes en miniature (bande de 84 px)
   (placé après la règle 768 px pour la remplacer)
========================================================== */
@media (max-width:900px), (max-height:500px) and (orientation:landscape){
    .statistique-scroll[b-wx2udkvhd5]{
        gap:.4rem;
        padding:.1rem;
    }

    .statistique-card[b-wx2udkvhd5]{
        flex:0 0 84px;
        height:70px;
        padding:.2rem;
        gap:.1rem;
        border-radius:10px;
        justify-content:center;
    }

    .statistique-image[b-wx2udkvhd5]{
        width:28px;
        height:28px;
        border-width:2px;
    }

    .statistique-avatar-letter[b-wx2udkvhd5]{ font-size:.7rem; }

    .statistique-name[b-wx2udkvhd5]{
        font-size:.55rem;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .statistique-info[b-wx2udkvhd5]{
        font-size:.42rem;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .statistique-objective[b-wx2udkvhd5]{ display:none; }
}

@media (max-height:500px) and (orientation:landscape){
    .statistique-card[b-wx2udkvhd5]{
        flex:0 0 64px;
        height:44px;
        padding:.15rem;
    }

    .statistique-image[b-wx2udkvhd5]{
        width:18px;
        height:18px;
    }

    .statistique-name[b-wx2udkvhd5]{ font-size:.4rem; }
    .statistique-info[b-wx2udkvhd5]{ display:none; }
}
/* /Components/Cards/StatistiquesCards.razor.rz.scp.css */
.statistiques-scroll[b-kvasywn82o]{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
gap:.6rem;
overflow-x:auto;
overflow-y:hidden;
padding:.2rem;
scrollbar-width:none;
-ms-overflow-style:none;
white-space:nowrap;
}

.statistiques-scroll[b-kvasywn82o]::-webkit-scrollbar{
display:none;
}

.statistiques-card[b-kvasywn82o]{
display:flex;
align-items:flex-start;
gap:.5rem;
width:100%;
padding:.4rem .3rem;
background:#fff;
border:1px solid #e5e7eb;
border-radius:10px;
cursor:pointer;
transition:.2s;
}

.statistiques-card:hover[b-kvasywn82o]{
transform:translateY(-2px);
border-color:#fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.statistiques-card.active[b-kvasywn82o]{
background:#fdecec;
border:2px solid #fdecec;
box-shadow:0 4px 10px #e5e7eb;
}

.statistiques-icon[b-kvasywn82o]{
display:flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
flex-shrink:0;
border-radius:50%;
background:#fdecec;
color:#fff;
font-size:.7rem;
}

.statistiques-card.active .statistiques-icon[b-kvasywn82o]{
background:#fff;
color:#fdecec;
}

.statistiques-content[b-kvasywn82o]{
display:flex;
flex-direction:column;
gap:.1rem;
min-width:0;
}

.statistiques-name[b-kvasywn82o]{
font-size:.82rem;
font-weight:700;
line-height:1.15;
}

.statistiques-info[b-kvasywn82o]{
font-size:.6rem;
font-weight:600;
color:#c92a2a;
}

.statistiques-objective[b-kvasywn82o]{
font-size:.58rem;
line-height:1.15;
color:#6b7280;
}

@media(max-width:768px){
.statistiques-card[b-kvasywn82o]{
flex:0 0 190px;
padding:.4rem;
    }
.statistiques-name[b-kvasywn82o]{
font-size:.7rem;
    }
.statistiques-info[b-kvasywn82o],
.statistiques-objective[b-kvasywn82o]{
font-size:.56rem;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .statistique-scroll[b-kvasywn82o] { gap: .4rem; padding: .1rem; }
    .statistique-card[b-kvasywn82o] { flex: 0 0 84px; height: 70px; padding: .2rem; gap: .1rem; border-radius: 10px; justify-content: center; }
    .statistique-image[b-kvasywn82o] { width: 28px; height: 28px; border-width: 2px; }
    .statistique-avatar-letter[b-kvasywn82o] { font-size: .7rem; }
    .statistique-name[b-kvasywn82o] { font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .statistique-info[b-kvasywn82o] { font-size: .42rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .statistique-objective[b-kvasywn82o] { display: none; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .statistique-card[b-kvasywn82o] { flex: 0 0 64px; height: 44px; padding: .15rem; }
    .statistique-image[b-kvasywn82o] { width: 18px; height: 18px; }
    .statistique-name[b-kvasywn82o] { font-size: .4rem; }
    .statistique-info[b-kvasywn82o] { display: none; }
}
/* /Components/Cards/StatsCards.razor.rz.scp.css */
.top-row[b-fe9n2dzu8r] {
    display: flex;
    justify-content: flex-end;
    padding-top: 11rem;
    padding-bottom: .5rem;
}

.about-btn:hover[b-fe9n2dzu8r] {
    background: rgba(201,42,42,.08);
}

/* ===========================
   BANDEAU DE STATISTIQUES
=========================== */
.stats-wrapper[b-fe9n2dzu8r] {
    max-width: 1180px;
    margin: 0 auto;
}

/* Languette de dépliage : visible seulement sur mobile (voir @media plus bas) */
.stats-toggle[b-fe9n2dzu8r] {
    display: none;
}

.stats-scroll[b-fe9n2dzu8r] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
    padding: 1rem .5rem 1.25rem;
    overflow: visible;
}

/* ========================================
   CARTE — FICHE DE DOSSIER
   ======================================== */

.stat-card[b-fe9n2dzu8r] {
    flex: 0 0 auto;

    position: relative;
    cursor: pointer;

    width: 148px;

    background: #ffffff;

    border: 1px solid #e7e2e2;
    border-top: none;
    border-radius: 2px 10px 10px 10px;

    padding-top: 1.65rem;

    overflow: hidden;

    box-shadow: 0 1px 2px rgba(0,0,0,.03);

    transition: box-shadow .2s ease, transform .2s ease,
                background-color .2s ease, border-color .2s ease;
}

.stat-card:hover[b-fe9n2dzu8r] {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
    background: color-mix(in srgb, var(--accent-bg) 45%, #ffffff);
    border-color: color-mix(in srgb, var(--accent) 20%, #e7e2e2);
}

/* État sélectionné (au clic) */
.stat-card--active[b-fe9n2dzu8r] {
    background: var(--accent-bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent),
                0 6px 14px rgba(0,0,0,.06);
}

.stat-card--active:hover[b-fe9n2dzu8r] {
    background: color-mix(in srgb, var(--accent-bg) 75%, #ffffff);
    transform: translateY(-2px);
}

/* ========================================
   ONGLET DE DOSSIER
   ======================================== */

.stat-tab[b-fe9n2dzu8r] {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    align-items: center;
    gap: .3rem;

    padding: .0rem .65rem .32rem .6rem;

    font-size: .62rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;

    background: var(--accent-bg);
    color: var(--accent);

    clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%);
    border-radius: 2px 0 0 0;

    transition: background-color .2s ease;
}

.stat-tab i[b-fe9n2dzu8r] {
    font-size: .72rem;
}

/* ========================================
   BOUTON MODIFIER
   ======================================== */

.stat-edit-btn[b-fe9n2dzu8r] {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 2;

    width: 20px;
    height: 20px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    color: #9ca3af;
    border: 1px solid #e7e2e2;
    border-radius: 50%;

    font-size: .6rem;
    cursor: pointer;

    opacity: 0;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}

.stat-card:hover .stat-edit-btn[b-fe9n2dzu8r],
.stat-edit-btn:focus-visible[b-fe9n2dzu8r] {
    opacity: 1;
}

.stat-edit-btn:hover[b-fe9n2dzu8r] {
    color: var(--accent, #c92a2a);
    border-color: var(--accent, #c92a2a);
}

/* ========================================
   POPUP D'ÉDITION
   Fond transparent (pas d'assombrissement) : seule l'ombre de la carte
   la détache de la page. Le fond reste cliquable pour fermer.
   ======================================== */

.stat-modal-backdrop[b-fe9n2dzu8r] {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;

    background: transparent;
}

.stat-modal[b-fe9n2dzu8r] {
    width: 100%;
    max-width: 320px;

    display: flex;
    flex-direction: column;
    gap: .5rem;

    padding: 1rem 1.1rem 1.1rem;

    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25),
                0 2px 6px rgba(0, 0, 0, .08);

    cursor: default;
}

.stat-modal-header[b-fe9n2dzu8r] {
    display: flex;
    align-items: center;
    gap: .4rem;

    margin-bottom: .2rem;

    font-size: .85rem;
    font-weight: 800;
    color: #1d1d1f;
}

.stat-modal-header i[b-fe9n2dzu8r] {
    font-size: .8rem;
    color: #9ca3af;
}

.stat-edit-label[b-fe9n2dzu8r] {
    display: flex;
    flex-direction: column;
    gap: .2rem;

    font-size: .56rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.stat-edit-input[b-fe9n2dzu8r],
.stat-edit-textarea[b-fe9n2dzu8r] {
    width: 100%;

    padding: .25rem .4rem;

    font-size: .68rem;
    font-family: inherit;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;

    color: #1d1d1f;
    background: #fff;
    border: 1px solid #e7e2e2;
    border-radius: 6px;

    cursor: text;
}

.stat-edit-input:focus[b-fe9n2dzu8r],
.stat-edit-textarea:focus[b-fe9n2dzu8r] {
    outline: none;
    border-color: var(--accent, #c92a2a);
}

.stat-edit-select[b-fe9n2dzu8r] {
    cursor: pointer;
}

.stat-edit-textarea[b-fe9n2dzu8r] {
    min-height: 3.2em;
    resize: vertical;
}

.stat-edit-tendance[b-fe9n2dzu8r] {
    display: flex;
    gap: .3rem;
}

.stat-edit-tendance .stat-edit-select[b-fe9n2dzu8r] {
    flex: 0 0 auto;
    width: auto;
}

.stat-edit-tendance input[b-fe9n2dzu8r] {
    flex: 1 1 auto;
    min-width: 0;
}

.stat-edit-actions[b-fe9n2dzu8r] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;

    margin-top: .4rem;
}

.stat-edit-cancel[b-fe9n2dzu8r],
.stat-edit-save[b-fe9n2dzu8r] {
    padding: .28rem .6rem;

    font-size: .6rem;
    font-weight: 700;

    border-radius: 6px;
    cursor: pointer;

    transition: background-color .15s ease, opacity .15s ease;
}

.stat-edit-cancel[b-fe9n2dzu8r] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e7e2e2;
}

.stat-edit-cancel:hover[b-fe9n2dzu8r] {
    background: #e5e7eb;
}

.stat-edit-save[b-fe9n2dzu8r] {
    background: var(--accent, #c92a2a);
    color: #fff;
    border: 1px solid var(--accent, #c92a2a);
}

.stat-edit-save:hover[b-fe9n2dzu8r] {
    opacity: .9;
}

.stat-edit-cancel:disabled[b-fe9n2dzu8r],
.stat-edit-save:disabled[b-fe9n2dzu8r] {
    opacity: .6;
    cursor: not-allowed;
}

/* ========================================
   COULEURS PAR CATÉGORIE — centralisées
   ======================================== */

.stat-card--red[b-fe9n2dzu8r]    { --accent: #c92a2a; --accent-bg: #fdecec; }
.stat-card--blue[b-fe9n2dzu8r]   { --accent: #2563eb; --accent-bg: #eaf2fe; }
.stat-card--green[b-fe9n2dzu8r]  { --accent: #1a7f37; --accent-bg: #e8f7ee; }
.stat-card--purple[b-fe9n2dzu8r] { --accent: #7c3aed; --accent-bg: #f2ecfb; }
.stat-card--amber[b-fe9n2dzu8r]  { --accent: #b45309; --accent-bg: #fef6e7; }
.stat-card--teal[b-fe9n2dzu8r]   { --accent: #0f766e; --accent-bg: #e6f7f5; }

/* ========================================
   CORPS DE LA FICHE
   ======================================== */

.stat-body[b-fe9n2dzu8r] {
    padding: .7rem .8rem .8rem;
}

/* ========================================
   VALEUR + TENDANCE
   ======================================== */

.stat-value-row[b-fe9n2dzu8r] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;

    margin-bottom: .35rem;
}

.stat-value[b-fe9n2dzu8r] {
    font-size: 1.4rem;
    font-weight: 800;

    color: #1d1d1f;
    line-height: 1;

    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.stat-trend[b-fe9n2dzu8r] {
    display: flex;
    align-items: center;
    gap: .15rem;

    font-size: .58rem;
    font-weight: 700;

    white-space: nowrap;
}

.stat-trend--up[b-fe9n2dzu8r] {
    color: #1a7f37;
}

.stat-trend--down[b-fe9n2dzu8r] {
    color: #c92a2a;
}

.stat-trend--flat[b-fe9n2dzu8r] {
    color: #9ca3af;
}

.trend-arrow[b-fe9n2dzu8r] {
    font-size: .4rem;
}

/* ========================================
   DESCRIPTION
   ======================================== */

.stat-description[b-fe9n2dzu8r] {
    font-size: .54rem;
    line-height: 1.35;

    color: #6b7280;

    min-height: 2.2em;

    margin-bottom: .5rem;
}

/* ========================================
   PIED DE FICHE
   ======================================== */

.stat-footer[b-fe9n2dzu8r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;

    padding-top: .4rem;

    border-top: 1px dashed #ecebeb;
}

.stat-code[b-fe9n2dzu8r] {
    font-size: .56rem;
    font-weight: 700;

    color: #9ca3af;

    letter-spacing: .03em;
}

.stat-period[b-fe9n2dzu8r] {
    font-size: .56rem;
    font-weight: 600;

    color: #9ca3af;

    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ========================================
   COIN DE PAGE (effet corne relevée au survol)
   ======================================== */

.stat-card[b-fe9n2dzu8r]::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;

    width: 0;
    height: 0;

    border-style: solid;
    border-width: 0 0 13px 13px;
    border-color: transparent transparent #f2efec transparent;

    filter: drop-shadow(-1px -1px 1px rgba(0,0,0,.05));

    transition: border-width .2s ease;
}

.stat-card:hover[b-fe9n2dzu8r]::after {
    border-width: 0 0 19px 19px;
}

.stats-panel[b-fe9n2dzu8r] { display: contents; }

/* Écrans tactiles : pas de survol, crayon toujours visible */
@media (hover: none) {
    .stat-edit-btn[b-fe9n2dzu8r] { opacity: 1; }
}

@media (min-width: 769px) and (min-height: 501px) {
    .stats-panel[b-fe9n2dzu8r] { display: contents; }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    /* Emplacement réservé dans la page */
    .stats-wrapper[b-fe9n2dzu8r] {
        height: 40px;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Panneau fixe sous la barre d'outils : cartes + languette */
    .stats-panel[b-fe9n2dzu8r] {
        display: block;
        position: fixed;
        top: 92px;
        left: 0;
        right: 0;
        z-index: 840;
    }

    .stats-scroll[b-fe9n2dzu8r] {
        position: static;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        gap: .5rem;
        margin: 0;
        padding: .6rem .5rem .8rem;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
        -webkit-overflow-scrolling: touch;
    }

    /* Languette accrochée sous le panneau : repliée = avec le texte */
    .stats-toggle[b-fe9n2dzu8r] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .3rem;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 845;
        height: 20px;
        padding: 0 .7rem 0 .5rem;
        background: #fca5a5;
        color: #991b1b;
        border: none;
        border-radius: 0 18px 18px 0;
        font-size: .6rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* Cartes ouvertes : languette compacte (flèche seule), sous les cartes,
       déclarée APRÈS la règle de base pour ne pas être écrasée */
    .stats-wrapper:not(.collapsed) .stats-toggle[b-fe9n2dzu8r] {
        top: calc(100%);
        width: 40px;
        height: 15px;
        padding: 0;
        border-radius: 0 0 12px 12px;
        font-size: .9rem;
    }

    .stats-wrapper:not(.collapsed) .stats-toggle span[b-fe9n2dzu8r] {
        display: none;
    }

    .stats-wrapper.collapsed .stats-scroll[b-fe9n2dzu8r] { display: none; }

    /* Pas de squelette en haut sur mobile */
    .stats-scroll[aria-busy][b-fe9n2dzu8r] { display: none; }

    .stat-card[b-fe9n2dzu8r] { width: 120px; padding-top: 1.45rem; }
    .stat-tab[b-fe9n2dzu8r] { font-size: .55rem; padding-right: .5rem; }
    .stat-value[b-fe9n2dzu8r] { font-size: 1.1rem; }
    .stat-trend[b-fe9n2dzu8r] { font-size: .5rem; }
    .stat-description[b-fe9n2dzu8r] { font-size: .5rem; }
    .stat-body[b-fe9n2dzu8r] { padding: .6rem .7rem .7rem; }

    /* Popup : champs à 16px pour éviter le zoom automatique d'iOS */
    .stat-modal[b-fe9n2dzu8r] { max-width: 92vw; }
    .stat-edit-input[b-fe9n2dzu8r],
    .stat-edit-textarea[b-fe9n2dzu8r] { font-size: 16px; padding: .4rem .5rem; }
    .stat-edit-label[b-fe9n2dzu8r] { font-size: .62rem; }
    .stat-edit-cancel[b-fe9n2dzu8r],
    .stat-edit-save[b-fe9n2dzu8r] { font-size: .8rem; padding: .5rem .9rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .stat-card[b-fe9n2dzu8r] { width: 110px; }
  .stats-scroll[b-fe9n2dzu8r] { padding: .4rem .5rem .5rem; }
}

/* ===== Bureau : une seule ligne de cartes, défilement horizontal si la fenêtre est étroite ===== */
@media (min-width: 769px) and (min-height: 501px) {

    .stats-scroll[b-fe9n2dzu8r] {
        flex-wrap: nowrap;
        justify-content: flex-start;   /* pas de "center" : il couperait le début de la liste */
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1rem .5rem 1.5rem;    /* marge pour le survol (translateY) et l'ombre */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Centrage quand tout tient ; les marges auto tombent à 0 dès que ça déborde */
    .stats-scroll > .stat-card:first-child[b-fe9n2dzu8r] { margin-left: auto; }
    .stats-scroll > .stat-card:last-child[b-fe9n2dzu8r]  { margin-right: auto; }
}
/* /Components/Cards/StrategieEmploiCards.razor.rz.scp.css */
/* ==========================================
   LISTE HORIZONTALE DE STRATÉGIE D'EMPLOI
   Design commun : carte à taille fixe, contenu centré.
   Taille : modifier les 3 variables ci-dessous (--tile-*).
========================================== */

.strategieemploi-scroll[b-jzftfquvkp] {
    --tile-w: 110px;
    --tile-h: 170px;
    --tile-icon: 40px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.strategieemploi-scroll[b-jzftfquvkp]::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   CARTE STRATÉGIE D'EMPLOI (taille fixe, contenu centré)
========================================== */

.strategieemploi-card[b-jzftfquvkp] {
    position:relative;              /* repère du badge en haut à droite */
    flex:0 0 110px;
    height:118px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:.4rem;
    padding:.6rem;
    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    cursor:pointer;
    box-shadow:0 4px 10px #e5e7eb;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.strategieemploi-card:hover[b-jzftfquvkp] {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px #e5e7eb;
}


/* Élément sélectionné */

.strategieemploi-card.active[b-jzftfquvkp] {
    border: 1px solid red;
    background: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}


/* ==========================================
   ICÔNE
========================================== */

.strategieemploi-icon[b-jzftfquvkp] {
    width: var(--tile-icon, 40px);
    height: var(--tile-icon, 40px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.strategieemploi-card.active .strategieemploi-icon[b-jzftfquvkp] {
    background: #fff;
}


/* ==========================================
   INFOS (centrées, retour à la ligne autorisé)
========================================== */

.strategieemploi-content[b-jzftfquvkp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Titre : 3 lignes max puis « … » */
.strategieemploi-name[b-jzftfquvkp] {
    font-size: .7rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    text-wrap: balance;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.strategieemploi-info[b-jzftfquvkp] {
    margin-top: .2rem;
    font-size: .68rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.strategieemploi-objective[b-jzftfquvkp] {
    margin-top: .3rem;
    font-size: .6rem;
    color: #c92a2a;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================
   ACTIONS — visibles uniquement au survol
   Modifier : haut droite | Supprimer : haut gauche
========================================== */

.strategieemploi-btn-edit[b-jzftfquvkp],
.strategieemploi-btn-delete[b-jzftfquvkp] {
    position: absolute;
    top: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

.strategieemploi-card:hover .strategieemploi-btn-edit[b-jzftfquvkp],
.strategieemploi-card:hover .strategieemploi-btn-delete[b-jzftfquvkp] {
    opacity: 1;
    pointer-events: auto;
}

.strategieemploi-btn-edit[b-jzftfquvkp] {
    right: 6px;
}

.strategieemploi-btn-delete[b-jzftfquvkp] {
    left: 6px;
}

.strategieemploi-btn-edit:hover[b-jzftfquvkp],
.strategieemploi-btn-delete:hover[b-jzftfquvkp] {
    background: #c92a2a;
    color: #ffffff;
    transform: scale(1.05);
}

.strategieemploi-btn-edit:active[b-jzftfquvkp],
.strategieemploi-btn-delete:active[b-jzftfquvkp] {
    transform: scale(.95);
}


/* ==========================================
   MESSAGE VIDE / SKELETON
========================================== */

.empty-strategieemploi[b-jzftfquvkp] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* Skeleton : la vraie carte (mêmes dimensions, même centrage),
   avec des blocs shimmer à la place du contenu */
.strategieemploi-card.skeleton-tile[b-jzftfquvkp] {
    cursor: default;
    pointer-events: none;
}

.strategieemploi-card.skeleton-tile:hover[b-jzftfquvkp] {
    transform: none;
}

.skeleton-tile-icon[b-jzftfquvkp] {
    width: var(--tile-icon, 40px);
    height: var(--tile-icon, 40px);
    flex-shrink: 0;
    border-radius: 50%;
}

.skeleton-tile-line[b-jzftfquvkp] {
    height: 10px;
    margin: .25rem auto 0;
    border-radius: 6px;
}

.skeleton-tile-line--name[b-jzftfquvkp]  { width: 85%; }
.skeleton-tile-line--short[b-jzftfquvkp] { width: 60%; }
.skeleton-tile-line--info[b-jzftfquvkp]  { width: 70%; height: 8px; margin-top: .45rem; }


/* ==========================================
   TACTILE / MOBILE — pas de survol : boutons visibles
   (la taille de la carte ne change pas)
========================================== */

@media (hover: none), (max-width: 640px) {

    .strategieemploi-btn-edit[b-jzftfquvkp],
    .strategieemploi-btn-delete[b-jzftfquvkp] {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ==========================================
   MOBILE : cartes compactes (bande de 84 px)
========================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .strategieemploi-scroll[b-jzftfquvkp] {
        gap: .4rem;
        padding: .15rem .2rem;
        height: 100%;
        align-items: center;
    }

    .strategieemploi-card[b-jzftfquvkp] {
        flex: 0 0 84px;
        height: 70px;
        gap: .15rem;
        padding: .25rem;
        border-radius: 10px;
    }

    .strategieemploi-icon[b-jzftfquvkp] {
        width: 24px;
        height: 24px;
        font-size: .75rem;
    }

    .strategieemploi-name[b-jzftfquvkp] {
        font-size: .55rem;
        -webkit-line-clamp: 2;
    }

    .strategieemploi-info[b-jzftfquvkp] {
        display: none;
    }

    .strategieemploi-btn-edit[b-jzftfquvkp],
    .strategieemploi-btn-delete[b-jzftfquvkp] {
        width: 16px;
        height: 16px;
        top: 3px;
        font-size: .45rem;
    }

    .strategieemploi-btn-edit[b-jzftfquvkp]   { right: 3px; }
    .strategieemploi-btn-delete[b-jzftfquvkp] { left: 3px; }
}

@media (max-height: 500px) and (orientation: landscape) {

    .strategieemploi-card[b-jzftfquvkp] {
        flex: 0 0 64px;
        height: 44px;
        padding: .15rem;
    }

    .strategieemploi-icon[b-jzftfquvkp] {
        width: 16px;
        height: 16px;
        font-size: .5rem;
    }

    .strategieemploi-name[b-jzftfquvkp] {
        font-size: .4rem;
    }
}
/* /Components/Cards/TeleversementCards.razor.rz.scp.css */
/* Scroll */
.televersement-scroll[b-zsmonlgrhx] {
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    padding: .2rem;
    scrollbar-width: none;
}

.televersement-scroll[b-zsmonlgrhx]::-webkit-scrollbar {
    display: none;
}

/* Carte */
.televersement-card[b-zsmonlgrhx] {
    flex: 0 0 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .3rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: .2s;
}

.televersement-card:hover[b-zsmonlgrhx] {
    transform: translateY(-3px);
    border-color: #fdecec;
    box-shadow: 0 4px 10px #e5e7eb;
}

.televersement-card.active[b-zsmonlgrhx] {
    background: #fdecec;
    border-color: #fdecec;
}

/* Icône */
.televersement-icon[b-zsmonlgrhx] {
    font-size: .9rem;
    color: #c92a2a;
}

/* Image */
.televersement-image[b-zsmonlgrhx] {
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fdecec;
    flex-shrink: 0;
}

.televersement-image img[b-zsmonlgrhx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.active .televersement-image[b-zsmonlgrhx] {
    border-color: #c92a2a;
}

/* Texte */
.televersement-content[b-zsmonlgrhx] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.televersement-name[b-zsmonlgrhx] {
    font-size: .65rem;
    font-weight: 700;
    color: #111827;
}

.televersement-info[b-zsmonlgrhx] {
    font-size: .5rem;
    font-weight: 600;
    color: #c92a2a;
}

.televersement-objective[b-zsmonlgrhx] {
    font-size: .5rem;
    color: #6b7280;
}

/* Skeleton */
.skeleton-card[b-zsmonlgrhx] {
    cursor: default;
    pointer-events: none;
}

.skeleton[b-zsmonlgrhx] {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}

.skeleton[b-zsmonlgrhx]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translateX(-100%);
    animation: televersement-shine-b-zsmonlgrhx 1.3s infinite;
}

@keyframes televersement-shine-b-zsmonlgrhx {
    100% {
        transform: translateX(100%);
    }
}

.televersement-image.skeleton[b-zsmonlgrhx] {
    border: 0;
}

.text[b-zsmonlgrhx] {
    height: 10px;
    border-radius: 8px;
    margin: auto;
}

.name[b-zsmonlgrhx] {
    width: 90%;
    height: 13px;
}

.info[b-zsmonlgrhx] {
    width: 70%;
}

.objective[b-zsmonlgrhx] {
    width: 55%;
}

.skeleton-card:nth-child(2n) .skeleton[b-zsmonlgrhx]::after {
    animation-delay: .2s;
}

.skeleton-card:nth-child(3n) .skeleton[b-zsmonlgrhx]::after {
    animation-delay: .4s;
}

.skeleton-card:nth-child(5n) .skeleton[b-zsmonlgrhx]::after {
    animation-delay: .6s;
}

/* Messages */
.televersement-error[b-zsmonlgrhx] {
    padding: .9rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #c92a2a;
    font-size: .75rem;
}

.empty-televersement[b-zsmonlgrhx] {
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
}

/* Lettre de secours si l'image ne charge pas */
.televersement-avatar-letter[b-zsmonlgrhx] {
    display: none;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;

    background: #fdecec;
    color: #c92a2a;

    font-size: 1.2rem;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
    .televersement-card[b-zsmonlgrhx] {
        flex-basis: 150px;
        padding: .6rem;
    }

    .televersement-image[b-zsmonlgrhx] {
        width: 60px;
        height: 60px;
    }
}
.paiements-card[b-zsmonlgrhx],
.televersement-card[b-zsmonlgrhx] {
    position: relative;
}

.hover-nb-services[b-zsmonlgrhx] {
    position: absolute;
    top: .25rem;
    right: .25rem;

    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #c92a2a;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;

    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 5;
}

.paiements-card:hover .hover-nb-services[b-zsmonlgrhx],
.televersement-card:hover .hover-nb-services[b-zsmonlgrhx] {
    opacity: 1;
    transform: scale(1);
}

.paiements-card[b-zsmonlgrhx],
.televersement-card[b-zsmonlgrhx] {
    position: relative;
}

/* Cercle du nombre de services, en haut à droite */
/* ===========================
   Repères de position
=========================== */

/* La carte positionne le cercle du nombre de services */
.paiements-card[b-zsmonlgrhx],
.televersement-card[b-zsmonlgrhx] {
    position: relative;
}

/* Le bloc nom + type positionne l'icône de message */
.paiements-content[b-zsmonlgrhx],
.televersement-content[b-zsmonlgrhx] {
    position: relative;
}

/* ===========================
   Cercle du nombre de services
   (apparaît au survol de la carte, en haut à droite)
=========================== */

.hover-nb-services[b-zsmonlgrhx] {
    position: absolute;
    top: .25rem;
    right: .25rem;

    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #c92a2a;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;

    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 5;
}

.paiements-card:hover .hover-nb-services[b-zsmonlgrhx],
.televersement-card:hover .hover-nb-services[b-zsmonlgrhx] {
    opacity: 1;
    transform: scale(1);
}

/* ===========================
   Icône de message
   (apparaît seulement au survol du nom ou du type de compte)
=========================== */

.hover-message-btn[b-zsmonlgrhx] {
    position: absolute;
    bottom: 0;
    right: 0;

    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fdecec;
    color: #c92a2a;
    font-size: .65rem;
    line-height: 1;
    cursor: pointer;

    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease, color .15s ease;
    z-index: 5;
}

.paiements-content:hover .hover-message-btn[b-zsmonlgrhx],
.televersement-content:hover .hover-message-btn[b-zsmonlgrhx] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.hover-message-btn:hover[b-zsmonlgrhx] {
    background: #c92a2a;
    color: #fff;
}

/* ===========================
   Badge « Client » (Téléversement)
   Espace entre le type de compte et le badge
=========================== */

.televersement-badge-client[b-zsmonlgrhx] {
    margin-left: .35rem;
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .televersement-scroll[b-zsmonlgrhx] { gap: .4rem; padding: .1rem; height: 100%; align-items: center; }
    .televersement-card[b-zsmonlgrhx] { flex: 0 0 84px; height: 70px; padding: .2rem; gap: .1rem; border-radius: 10px; justify-content: center; }
    .televersement-image[b-zsmonlgrhx] { width: 28px; height: 28px; border-width: 2px; }
    .televersement-avatar-letter[b-zsmonlgrhx] { font-size: .7rem; }
    .televersement-name[b-zsmonlgrhx] { font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .televersement-info[b-zsmonlgrhx] { font-size: .42rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hover-nb-services[b-zsmonlgrhx] { width: .9rem; height: .9rem; font-size: .45rem; }
    .hover-message-btn[b-zsmonlgrhx] { width: .9rem; height: .9rem; font-size: .5rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .televersement-card[b-zsmonlgrhx] { flex: 0 0 64px; height: 44px; padding: .15rem; }
    .televersement-image[b-zsmonlgrhx] { width: 18px; height: 18px; }
    .televersement-name[b-zsmonlgrhx] { font-size: .4rem; }
    .televersement-info[b-zsmonlgrhx] { display: none; }
}
/* /Components/Cards/VillesCards.razor.rz.scp.css */
/* ===========================
   Police système, cohérence avec le reste de l'app
   =========================== */

.vc-scroll[b-p8n8otaf8v],
.vc-placeholder[b-p8n8otaf8v],
.vc-error[b-p8n8otaf8v] {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.vc-placeholder[b-p8n8otaf8v],
.vc-error[b-p8n8otaf8v] {
    font-size: 0.78rem;
    color: #6e6e73;
    padding: .4rem .1rem;
}

.vc-error[b-p8n8otaf8v] {
    color: #dc3545;
}

/* ===========================
   Rangée scrollable, sans barre visible
   =========================== */

.vc-scroll[b-p8n8otaf8v] {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .5rem .1rem;
    max-height: 160px;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vc-scroll[b-p8n8otaf8v]::-webkit-scrollbar {
    display: none;
}

/* ===========================
   Carte ville — épurée, style Apple
   =========================== */

.vc-card[b-p8n8otaf8v] {
    position: relative;
    flex: 0 0 auto;
    width: 176px;
    height: 60px;
    padding: .5rem .65rem;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: .55rem;

    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);

    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);

    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.vc-card:hover[b-p8n8otaf8v] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.vc-card.active[b-p8n8otaf8v] {
    border-color: rgba(220, 20, 20, .35);
    background: rgba(255, 245, 245, .92);
    box-shadow: 0 4px 14px rgba(220, 20, 20, .12);
}

/* ===========================
   Icône ville
   =========================== */

.vc-icon[b-p8n8otaf8v] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
    background: rgba(220, 20, 20, .08);
    color: rgb(174, 1, 1);
    font-size: .68rem;

    transition: background-color .2s ease, color .2s ease;
}

.vc-card.active .vc-icon[b-p8n8otaf8v] {
    background: rgb(174, 1, 1);
    color: #fff;
}

/* ===========================
   Contenu texte
   =========================== */

.vc-content[b-p8n8otaf8v] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
}

.vc-name[b-p8n8otaf8v] {
    font-size: .8rem;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-info[b-p8n8otaf8v] {
    font-size: .64rem;
    font-weight: 400;
    color: #86868b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================
   Actions modifier / supprimer
   apparaissent au survol, dans le coin supérieur droit,
   à l'intérieur du cadre
   =========================== */

.vc-actions[b-p8n8otaf8v] {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 4px;

    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .15s ease, transform .15s ease;
}

.vc-card:hover .vc-actions[b-p8n8otaf8v] {
    opacity: 1;
    transform: translateY(0);
}

.vc-action-btn[b-p8n8otaf8v] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    font-size: .55rem;
    color: #fff;
    cursor: pointer;

    background: rgba(255, 255, 255, .95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    transition: background-color .15s ease, transform .1s ease;
}

.vc-action-btn:active[b-p8n8otaf8v] {
    transform: scale(.9);
}

.vc-action-btn.edit[b-p8n8otaf8v] {
    color: #0071e3;
}

.vc-action-btn.edit:hover[b-p8n8otaf8v] {
    background: #0071e3;
    color: #fff;
}

.vc-action-btn.delete[b-p8n8otaf8v] {
    color: rgb(174, 1, 1);
}

.vc-action-btn.delete:hover[b-p8n8otaf8v] {
    background: rgb(174, 1, 1);
    color: #fff;
}
/* /Components/Cards/VillesCardsIntegration.razor.rz.scp.css */
/* ===========================
   Police système, cohérence avec le reste de l'app
   =========================== */

.vc-scroll[b-s59cga11zr],
.vc-placeholder[b-s59cga11zr],
.vc-error[b-s59cga11zr] {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.vc-placeholder[b-s59cga11zr],
.vc-error[b-s59cga11zr] {
    font-size: 0.78rem;
    color: #6e6e73;
    padding: .4rem .1rem;
}

.vc-error[b-s59cga11zr] {
    color: #dc3545;
}

/* ===========================
   Rangée scrollable, sans barre visible
   =========================== */

.vc-scroll[b-s59cga11zr] {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .5rem .1rem;
    max-height: 160px;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vc-scroll[b-s59cga11zr]::-webkit-scrollbar {
    display: none;
}

/* ===========================
   Carte ville — épurée, style Apple
   =========================== */

.vc-card[b-s59cga11zr] {
    position: relative;
    flex: 0 0 auto;
    width: 176px;
    height: 60px;
    padding: .5rem .65rem;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: .55rem;

    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);

    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);

    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.vc-card:hover[b-s59cga11zr] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.vc-card.active[b-s59cga11zr] {
    border-color: rgba(220, 20, 20, .35);
    background: rgba(255, 245, 245, .92);
    box-shadow: 0 4px 14px rgba(220, 20, 20, .12);
}

/* ===========================
   Icône ville
   =========================== */

.vc-icon[b-s59cga11zr] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
    background: rgba(220, 20, 20, .08);
    color: rgb(174, 1, 1);
    font-size: .68rem;

    transition: background-color .2s ease, color .2s ease;
}

.vc-card.active .vc-icon[b-s59cga11zr] {
    background: rgb(174, 1, 1);
    color: #fff;
}

/* ===========================
   Contenu texte
   =========================== */

.vc-content[b-s59cga11zr] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
}

.vc-name[b-s59cga11zr] {
    font-size: .8rem;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-info[b-s59cga11zr] {
    font-size: .64rem;
    font-weight: 400;
    color: #86868b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================
   Actions modifier / supprimer
   apparaissent au survol, dans le coin supérieur droit,
   à l'intérieur du cadre
   =========================== */

.vc-actions[b-s59cga11zr] {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 4px;

    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .15s ease, transform .15s ease;
}

.vc-card:hover .vc-actions[b-s59cga11zr] {
    opacity: 1;
    transform: translateY(0);
}

.vc-action-btn[b-s59cga11zr] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    font-size: .55rem;
    color: #fff;
    cursor: pointer;

    background: rgba(255, 255, 255, .95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    transition: background-color .15s ease, transform .1s ease;
}

.vc-action-btn:active[b-s59cga11zr] {
    transform: scale(.9);
}

.vc-action-btn.edit[b-s59cga11zr] {
    color: #0071e3;
}

.vc-action-btn.edit:hover[b-s59cga11zr] {
    background: #0071e3;
    color: #fff;
}

.vc-action-btn.delete[b-s59cga11zr] {
    color: rgb(174, 1, 1);
}

.vc-action-btn.delete:hover[b-s59cga11zr] {
    background: rgb(174, 1, 1);
    color: #fff;
}
/* /Components/Layout/Formulaires/AccueilConfigForm.razor.rz.scp.css */
/* ===================================
   Fenêtre d'information (style Apple compact)
   Les variables --panel, --ink, --accent... viennent de .accueil (page Accueil) par héritage.
=================================== */

.inf-overlay[b-71ivf7lb9v] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.inf-modal[b-71ivf7lb9v] {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.1rem 1.1rem .9rem;
    background: var(--panel);
    color: var(--ink);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    font-size: .72rem;
    line-height: 1.35;
    text-align: left;
}

.inf-modal[b-71ivf7lb9v],
.inf-modal *[b-71ivf7lb9v],
.inf-modal *[b-71ivf7lb9v]::before,
.inf-modal *[b-71ivf7lb9v]::after { box-sizing: border-box; }

.inf-close[b-71ivf7lb9v] {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--alt);
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.inf-close:hover[b-71ivf7lb9v] { color: var(--accent); }

.inf-head[b-71ivf7lb9v] { padding-right: 1.8rem; }
.inf-head h2[b-71ivf7lb9v] { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.inf-meta[b-71ivf7lb9v] { margin: .05rem 0 0; font-size: .64rem; color: var(--muted); }

/* Sections : un bloc par thème, séparé par un filet */
.inf-sec[b-71ivf7lb9v] {
    margin-top: .65rem;
    padding-top: .55rem;
    border-top: 1px solid var(--line);
}

.inf-h[b-71ivf7lb9v] {
    margin: 0 0 .3rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent);
}

.inf-p[b-71ivf7lb9v] {
    margin: 0;
    font-size: .68rem;
    line-height: 1.5;
    color: var(--muted);
}

/* Coordonnées : libellé à gauche, valeur à droite */
.inf-coord[b-71ivf7lb9v] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .8rem;
    margin: .35rem 0 0;
    font-size: .68rem;
    line-height: 1.45;
}

.inf-coord dt[b-71ivf7lb9v] { color: var(--muted); }
.inf-coord dd[b-71ivf7lb9v] { margin: 0; color: var(--ink); font-weight: 500; word-break: break-word; }
.inf-coord a[b-71ivf7lb9v] { color: var(--accent); text-decoration: none; }
.inf-coord a:hover[b-71ivf7lb9v] { text-decoration: underline; }
/* /Components/Layout/Formulaires/AccueilContact.razor.rz.scp.css */
/* ===================================
   Fenêtre d'information (style Apple compact)
   Les variables --panel, --ink, --accent... viennent de .accueil (page Accueil) par héritage.
=================================== */

.inf-overlay[b-fvk14036qz] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.inf-modal[b-fvk14036qz] {
    position: relative;
    width: 100%;
    max-width: 460px; /* élargi pour les 2 colonnes */
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.1rem 1.1rem .9rem;
    background: var(--panel);
    color: var(--ink);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    font-size: .72rem;
    line-height: 1.35;
    text-align: left;
}

.inf-modal[b-fvk14036qz],
.inf-modal *[b-fvk14036qz],
.inf-modal *[b-fvk14036qz]::before,
.inf-modal *[b-fvk14036qz]::after { box-sizing: border-box; }

.inf-close[b-fvk14036qz] {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--alt);
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.inf-close:hover[b-fvk14036qz] { color: var(--accent); }

.inf-head[b-fvk14036qz] { padding-right: 1.8rem; }
.inf-head h2[b-fvk14036qz] { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.inf-meta[b-fvk14036qz] { margin: .05rem 0 0; font-size: .64rem; color: var(--muted); }

/* Sections : un bloc par thème, séparé par un filet */
.inf-sec[b-fvk14036qz] {
    margin-top: .65rem;
    padding-top: .55rem;
    border-top: 1px solid var(--line);
}

.inf-h[b-fvk14036qz] {
    margin: 0 0 .3rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Quatre tuiles d'information sur 2 colonnes : icône au-dessus, valeur en dessous */
.inf-tiles[b-fvk14036qz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    margin-top: .65rem;
}

.inf-tile[b-fvk14036qz] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    min-width: 0;
    padding: .45rem .6rem;
    background: var(--alt);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .2s ease, transform .15s ease;
}

a.inf-tile:hover[b-fvk14036qz] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.inf-tile-ico[b-fvk14036qz] { flex: 0 0 auto; font-size: 1.1rem; line-height: 1; }

.inf-tile strong[b-fvk14036qz] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* une seule ligne */
    text-align: right;
    font-size: .64rem;
    font-weight: 600;
}

/* Très petit écran : retour à 1 colonne */
@media (max-width: 360px) {
    .inf-tiles[b-fvk14036qz] { grid-template-columns: 1fr; }
}

/* Formulaire */
.inf-alert[b-fvk14036qz],
.inf-ok[b-fvk14036qz] { margin-bottom: .6rem; padding: .5rem .65rem; border-radius: 8px; font-size: .7rem; }
.inf-alert[b-fvk14036qz] { background: #fdecec; color: #c92a2a; }
.inf-ok[b-fvk14036qz] { background: #ecf8ef; color: #15803d; }

.inf-field[b-fvk14036qz] { margin-bottom: .55rem; min-width: 0; }
.inf-label[b-fvk14036qz] { display: block; margin-bottom: .2rem; font-size: .64rem; font-weight: 500; color: var(--muted); }

.inf-input[b-fvk14036qz] {
    width: 100%;
    height: 30px;
    padding: 0 .6rem;
    font: inherit;
    font-size: .76rem;
    color: var(--ink);
    background: var(--alt);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: border-color .15s ease, background-color .15s ease;
}

.inf-input:focus[b-fvk14036qz] {
    outline: none;
    background: var(--panel);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, .12);
}

.inf-textarea[b-fvk14036qz] { height: auto; min-height: 84px; padding: .45rem .6rem; line-height: 1.4; resize: vertical; }
.inf-select[b-fvk14036qz] { appearance: auto; }

.inf-btn[b-fvk14036qz] {
    width: 100%;
    height: 30px;
    border: 0;
    border-radius: 980px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: .74rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.inf-btn:hover[b-fvk14036qz] { background: var(--accent-hover); }
.inf-btn:active[b-fvk14036qz] { transform: scale(.98); }
/* /Components/Layout/Formulaires/AccueilMentionLegalForm.razor.rz.scp.css */
/* ===================================
   Fenêtre d'information (style Apple compact)
   Les variables --panel, --ink, --accent... viennent de .accueil (page Accueil) par héritage.
=================================== */

.inf-overlay[b-vzatmsncbi] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.inf-modal[b-vzatmsncbi] {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.1rem 1.1rem .9rem;
    background: var(--panel);
    color: var(--ink);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    font-size: .72rem;
    line-height: 1.35;
    text-align: left;
}

.inf-modal[b-vzatmsncbi],
.inf-modal *[b-vzatmsncbi],
.inf-modal *[b-vzatmsncbi]::before,
.inf-modal *[b-vzatmsncbi]::after { box-sizing: border-box; }

.inf-close[b-vzatmsncbi] {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--alt);
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.inf-close:hover[b-vzatmsncbi] { color: var(--accent); }

.inf-head[b-vzatmsncbi] { padding-right: 1.8rem; }
.inf-head h2[b-vzatmsncbi] { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.inf-meta[b-vzatmsncbi] { margin: .05rem 0 0; font-size: .64rem; color: var(--muted); }

/* Sections : un bloc par thème, séparé par un filet */
.inf-sec[b-vzatmsncbi] {
    margin-top: .65rem;
    padding-top: .55rem;
    border-top: 1px solid var(--line);
}

.inf-h[b-vzatmsncbi] {
    margin: 0 0 .3rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent);
}

.inf-p[b-vzatmsncbi] {
    margin: 0;
    font-size: .68rem;
    line-height: 1.5;
    color: var(--muted);
}

/* Coordonnées : libellé à gauche, valeur à droite */
.inf-coord[b-vzatmsncbi] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .8rem;
    margin: .35rem 0 0;
    font-size: .68rem;
    line-height: 1.45;
}

.inf-coord dt[b-vzatmsncbi] { color: var(--muted); }
.inf-coord dd[b-vzatmsncbi] { margin: 0; color: var(--ink); font-weight: 500; word-break: break-word; }
.inf-coord a[b-vzatmsncbi] { color: var(--accent); text-decoration: none; }
.inf-coord a:hover[b-vzatmsncbi] { text-decoration: underline; }
/* /Components/Layout/Formulaires/AddServicePortal.razor.rz.scp.css */
/* ===== Overlay ===== */
.task-form-overlay[b-oxvwexlkdf] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    animation: task-form-fade-in-b-oxvwexlkdf .15s ease-out;
}

@keyframes task-form-fade-in-b-oxvwexlkdf { from { opacity: 0; } to { opacity: 1; } }
@keyframes task-form-pop-in-b-oxvwexlkdf  { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ===== Carte ===== */
.task-form-card[b-oxvwexlkdf] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    max-height: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: task-form-pop-in-b-oxvwexlkdf .18s ease-out;
}

.task-form-header[b-oxvwexlkdf] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .7rem;
}

.task-form-title[b-oxvwexlkdf] { margin: 0; font-size: .82rem; font-weight: 600; color: #111827; }

.task-form-close[b-oxvwexlkdf] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}
.task-form-close:hover[b-oxvwexlkdf] { color: #111827; }

.task-form-scroll[b-oxvwexlkdf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .7rem .1rem;
}

.task-form-actions[b-oxvwexlkdf] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .35rem;
    padding: .3rem .7rem;
    background: #fff;
}

/* ===== Contenu fourni par le parent ===== */
.task-form-card[b-oxvwexlkdf]  .task-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 6px;
    align-items: start;
}

.task-form-card[b-oxvwexlkdf]  .task-form-field-full { grid-column: 1 / -1; }

.task-form-card[b-oxvwexlkdf]  .task-form-field { position: relative; margin-bottom: 6px; min-width: 0; }

.task-form-card[b-oxvwexlkdf]  .task-form-label {
    position: absolute;
    top: -5px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .6rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

.task-form-card[b-oxvwexlkdf]  .task-form-field:focus-within .task-form-label { color: #dc2626; }

.task-form-card[b-oxvwexlkdf]  .task-form-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .15rem .45rem;
    font-size: .72rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.task-form-card[b-oxvwexlkdf]  .task-form-input:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

.task-form-card[b-oxvwexlkdf]  textarea.task-form-input { resize: vertical; min-height: 3.2rem; }

.task-form-card[b-oxvwexlkdf]  select.task-form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 1.4rem;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%236e6e73' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .45rem center;
    background-size: 8px 6px;
}

.task-form-card[b-oxvwexlkdf]  select.task-form-input optgroup { font-weight: 600; color: #c92a2a; }
.task-form-card[b-oxvwexlkdf]  select.task-form-input option   { font-weight: 400; color: #111827; }

.task-form-card[b-oxvwexlkdf]  .task-form-alert {
    padding: .35rem .55rem;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: .7rem;
    line-height: 1.35;
}

.task-form-card[b-oxvwexlkdf]  .task-form-alert-error {
    background: rgba(201, 42, 42, .08);
    border: 1px solid rgba(201, 42, 42, .18);
    color: #8a1f1f;
}

/* ===== Boutons ===== */
.task-form-card[b-oxvwexlkdf]  .task-form-btn {
    padding: .15rem .7rem;
    border-radius: 36px;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.task-form-card[b-oxvwexlkdf]  .task-form-btn:disabled { opacity: .5; cursor: not-allowed; }

.task-form-card[b-oxvwexlkdf]  .task-form-btn-cancel { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.task-form-card[b-oxvwexlkdf]  .task-form-btn-cancel:hover:not(:disabled) { background: #e5e7eb; }

.task-form-card[b-oxvwexlkdf]  .task-form-btn-save { background: #ee5b5b; color: #fff; }
.task-form-card[b-oxvwexlkdf]  .task-form-btn-save:hover:not(:disabled) { background: #dc2626; }

@media (max-width: 480px) {
    .task-form-card[b-oxvwexlkdf]  .task-form-grid { grid-template-columns: 1fr; }
}
/* /Components/Layout/Formulaires/AfficheDocumentTeleverseForm.razor.rz.scp.css */
/* ==========================================
   Modale d'affichage d'un document téléversé
   (même design compact que les formulaires)
========================================== */

.doc-viewer-overlay[b-fuevomeflz] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2147483647;
}

.doc-viewer-modal[b-fuevomeflz] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    max-height: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.doc-viewer-header[b-fuevomeflz] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .7rem;
}

.doc-viewer-title[b-fuevomeflz] {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: #111827;
}

.doc-viewer-close[b-fuevomeflz] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.doc-viewer-close:hover[b-fuevomeflz] { color: #111827; }

.doc-viewer-body-base[b-fuevomeflz] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.doc-viewer-body[b-fuevomeflz] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .7rem .1rem;
}

.doc-viewer-filename[b-fuevomeflz] {
    font-size: .72rem;
    color: #15803d;
    margin: 0;
}

.doc-viewer-loading[b-fuevomeflz] {
    font-size: .72rem;
    color: #9ca3af;
    margin: 0;
}

.doc-viewer-frame-wrapper[b-fuevomeflz] {
    flex: 1 1 auto;
    min-height: 60vh;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
}

.doc-viewer-frame[b-fuevomeflz] {
    width: 100%;
    height: 100%;
    min-height: 60vh;
    border: none;
    display: block;
}

.doc-viewer-note[b-fuevomeflz] {
    font-size: .66rem;
    color: #9ca3af;
    margin: 0;
    line-height: 1.3;
}

.doc-viewer-actions[b-fuevomeflz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.doc-viewer-link[b-fuevomeflz] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    color: #c92a2a;
    text-decoration: none;
    width: fit-content;
}

.doc-viewer-link:hover[b-fuevomeflz] {
    text-decoration: underline;
}

.doc-viewer-download[b-fuevomeflz] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 500;
    color: #fff;
    background: #ee5b5b;
    padding: .15rem .7rem;
    border-radius: 36px;
    text-decoration: none;
    width: fit-content;
}

.doc-viewer-download:hover[b-fuevomeflz] {
    background: #dc2626;
}

.doc-viewer-footer[b-fuevomeflz] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: .3rem .7rem;
    background: #fff;
}

.doc-viewer-cancel[b-fuevomeflz] {
    padding: .15rem .7rem;
    border: 1px solid #d1d5db;
    border-radius: 36px;
    background: #f3f4f6;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 500;
    color: #374151;
}

.doc-viewer-cancel:hover[b-fuevomeflz] {
    background: #e5e7eb;
}
/* /Components/Layout/Formulaires/CanBot.razor.rz.scp.css */
.cb[b-8ik69rjd8g] {
    --cb-bottom: calc(var(--footer-h, 26px) + 14px);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    letter-spacing: -.01em;
}

/* ---------- Bouton rond, en bas à droite ---------- */

.cb-launcher[b-8ik69rjd8g] {
    position: fixed;
    right: 1rem;
    bottom: var(--cb-bottom);
    z-index: 1800;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--accent, #b01e1e);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .15s ease, background-color .2s ease;
}

.cb-launcher:hover[b-8ik69rjd8g] { background: var(--accent-hover, #8f1717); transform: scale(1.06); }
.cb-launcher:active[b-8ik69rjd8g] { transform: scale(.94); }
.cb-launcher-open[b-8ik69rjd8g] { background: var(--ink, #1d1d1f); }

.cb-badge[b-8ik69rjd8g] {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #fff;
    color: var(--accent, #b01e1e);
    font-size: .65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* ---------- Panneau ---------- */

.cb-panel[b-8ik69rjd8g] {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--cb-bottom) + 52px);
    z-index: 1800;
    width: 320px;
    max-width: calc(100vw - 2rem);
    height: 400px;
    max-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: color-mix(in srgb, var(--panel, #fff) 94%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    color: var(--ink, #1d1d1f);
    border: 1px solid var(--line, rgba(0, 0, 0, .08));
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
    animation: cb-in-b-8ik69rjd8g .18s ease both;
}

@keyframes cb-in-b-8ik69rjd8g {
    from { opacity: 0; transform: translateY(8px); }
}

.cb-head[b-8ik69rjd8g] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, .08));
}

.cb-avatar[b-8ik69rjd8g] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent, #b01e1e);
    color: #fff;
}

.cb-avatar svg[b-8ik69rjd8g] { width: 14px; height: 14px; }

.cb-id[b-8ik69rjd8g] { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.cb-id strong[b-8ik69rjd8g] { font-size: .76rem; }
.cb-id small[b-8ik69rjd8g] { font-size: .6rem; color: var(--muted, #6e6e73); }

.cb-x[b-8ik69rjd8g] {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted, #6e6e73);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.cb-x:hover[b-8ik69rjd8g] { background: var(--alt, #f5f5f7); color: var(--accent, #b01e1e); }

/* ---------- Messages : le plus récent reste visible en bas ---------- */

.cb-scroll[b-8ik69rjd8g] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse; /* défilement ancré en bas, sans JavaScript */
    scrollbar-width: thin;
}

.cb-list[b-8ik69rjd8g] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .6rem .75rem;
}

.cb-msg[b-8ik69rjd8g] { display: flex; flex-direction: column; max-width: 86%; }
.cb-mine[b-8ik69rjd8g] { align-self: flex-end; align-items: flex-end; }
.cb-bot[b-8ik69rjd8g] { align-self: flex-start; align-items: flex-start; }

.cb-bubble[b-8ik69rjd8g] {
    padding: .35rem .6rem;
    border-radius: 12px;
    font-size: .7rem;
    line-height: 1.35;
    word-break: break-word;
}

.cb-mine .cb-bubble[b-8ik69rjd8g] {
    background: var(--accent, #b01e1e);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.cb-bot .cb-bubble[b-8ik69rjd8g] {
    background: var(--alt, #f5f5f7);
    color: var(--ink, #1d1d1f);
    border-bottom-left-radius: 4px;
}

.cb-time[b-8ik69rjd8g] { margin-top: 2px; padding: 0 .3rem; font-size: .56rem; color: var(--muted, #6e6e73); }

/* ---------- Réponses rapides ---------- */

.cb-chips[b-8ik69rjd8g] { display: flex; flex-wrap: wrap; gap: .3rem; }

.cb-chip[b-8ik69rjd8g] {
    padding: .18rem .55rem;
    border: 1px solid var(--accent, #b01e1e);
    border-radius: 980px;
    background: transparent;
    color: var(--accent, #b01e1e);
    font: inherit;
    font-size: .64rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.cb-chip:hover[b-8ik69rjd8g] { background: var(--accent, #b01e1e); color: #fff; }

/* ---------- Saisie ---------- */

.cb-error[b-8ik69rjd8g] {
    flex-shrink: 0;
    padding: .25rem .75rem;
    background: #fdecec;
    color: #c92a2a;
    font-size: .62rem;
}

.cb-input[b-8ik69rjd8g] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .65rem;
    border-top: 1px solid var(--line, rgba(0, 0, 0, .08));
}

.cb-field[b-8ik69rjd8g] {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    padding: 0 .65rem;
    border: 1px solid var(--line, rgba(0, 0, 0, .1));
    border-radius: 980px;
    background: var(--alt, #f5f5f7);
    color: var(--ink, #1d1d1f);
    font: inherit;
    font-size: .72rem;
    outline: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.cb-field:focus[b-8ik69rjd8g] { border-color: var(--accent, #b01e1e); background: var(--panel, #fff); }

.cb-send[b-8ik69rjd8g] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--accent, #b01e1e);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}

.cb-send:hover:not(:disabled)[b-8ik69rjd8g] { background: var(--accent-hover, #8f1717); }
.cb-send:active:not(:disabled)[b-8ik69rjd8g] { transform: scale(.92); }
.cb-send:disabled[b-8ik69rjd8g] { opacity: .35; cursor: not-allowed; }

.cb-spinner[b-8ik69rjd8g] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cb-spin-b-8ik69rjd8g .7s linear infinite;
}

@keyframes cb-spin-b-8ik69rjd8g { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
    .cb-panel[b-8ik69rjd8g] { right: .5rem; width: calc(100vw - 1rem); max-width: none; }
    .cb-launcher[b-8ik69rjd8g] { right: .75rem; }
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : CanBot (taille moyenne)
========================================================== */
/* ==========================================================
   MOBILE + PAYSAGE COMPACT : CanBot (polices un peu plus grandes)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .cb[b-8ik69rjd8g] { --cb-bottom: calc(var(--footer-h, 26px) + 8px); }

    .cb-launcher[b-8ik69rjd8g] { width: 38px; height: 38px; right: .5rem; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
    .cb-launcher svg[b-8ik69rjd8g] { width: 19px; height: 19px; }
    .cb-badge[b-8ik69rjd8g] { min-width: 16px; height: 16px; padding: 0 3px; font-size: .56rem; line-height: 16px; top: -2px; right: -2px; }

    .cb-panel[b-8ik69rjd8g] {
        right: .4rem;
        bottom: calc(var(--cb-bottom) + 44px);
        width: min(285px, calc(100vw - .8rem));   /* était 250px */
        max-width: none;
        height: 350px;                            /* était 310px */
        max-height: calc(100vh - 200px);
        border-radius: 12px;
    }

    .cb-head[b-8ik69rjd8g] { gap: .4rem; padding: .45rem .6rem; }
    .cb-avatar[b-8ik69rjd8g] { width: 24px; height: 24px; }
    .cb-avatar svg[b-8ik69rjd8g] { width: 13px; height: 13px; }
    .cb-id strong[b-8ik69rjd8g] { font-size: .72rem; }          /* était .62rem */
    .cb-id small[b-8ik69rjd8g] { font-size: .58rem; }           /* était .5rem */
    .cb-x[b-8ik69rjd8g] { width: 22px; height: 22px; font-size: 1rem; }

    .cb-list[b-8ik69rjd8g] { gap: .35rem; padding: .5rem .6rem; }
    .cb-bubble[b-8ik69rjd8g] { padding: .3rem .55rem; border-radius: 10px; font-size: .68rem; line-height: 1.35; }  /* était .56rem */
    .cb-time[b-8ik69rjd8g] { font-size: .54rem; }               /* était .46rem */

    .cb-chips[b-8ik69rjd8g] { gap: .3rem; }
    .cb-chip[b-8ik69rjd8g] { padding: .16rem .5rem; font-size: .62rem; }   /* était .52rem */

    .cb-error[b-8ik69rjd8g] { padding: .22rem .6rem; font-size: .58rem; }  /* était .5rem */

    .cb-input[b-8ik69rjd8g] { gap: .35rem; padding: .4rem .55rem; }
    .cb-field[b-8ik69rjd8g] { height: 28px; padding: 0 .6rem; }
    .cb-send[b-8ik69rjd8g] { width: 28px; height: 28px; }
    .cb-send svg[b-8ik69rjd8g] { width: 14px; height: 14px; }
    .cb-spinner[b-8ik69rjd8g] { width: 12px; height: 12px; border-width: 1.5px; }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .cb .cb-panel .cb-field[b-8ik69rjd8g] {
        font-size: .7rem !important;              /* était .56rem */
        line-height: 1.2 !important;
        -webkit-appearance: none;
        appearance: none;
    }
}

/* ==========================================================
   MOBILE : CanBot, même taille que le panneau d'assistance
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .cb .cb-panel[b-8ik69rjd8g] {
        right: .4rem;
        bottom: calc(var(--cb-bottom) + 44px);
        width: min(280px, calc(100vw - .8rem));
        height: 360px;
        max-height: calc(100svh - 200px);
        border-radius: 12px;
    }

    .cb .cb-head[b-8ik69rjd8g] { gap: .4rem; padding: .4rem .6rem; }
    .cb .cb-avatar[b-8ik69rjd8g] { width: 22px; height: 22px; }
    .cb .cb-avatar svg[b-8ik69rjd8g] { width: 12px; height: 12px; }
    .cb .cb-id strong[b-8ik69rjd8g] { font-size: .68rem; }
    .cb .cb-id small[b-8ik69rjd8g] { font-size: .52rem; }
    .cb .cb-x[b-8ik69rjd8g] { width: 20px; height: 20px; font-size: .9rem; }

    .cb .cb-list[b-8ik69rjd8g] { gap: .3rem; padding: .5rem .6rem; }
    .cb .cb-bubble[b-8ik69rjd8g] { padding: .28rem .5rem; border-radius: 10px; font-size: .62rem; line-height: 1.35; }
    .cb .cb-time[b-8ik69rjd8g] { font-size: .5rem; }
    .cb .cb-chips[b-8ik69rjd8g] { gap: .25rem; }
    .cb .cb-chip[b-8ik69rjd8g] { padding: .14rem .45rem; font-size: .56rem; }
    .cb .cb-error[b-8ik69rjd8g] { padding: .2rem .6rem; font-size: .54rem; }

    .cb .cb-input[b-8ik69rjd8g] { gap: .3rem; padding: .4rem .5rem; }
    .cb .cb-field[b-8ik69rjd8g] { height: 26px; padding: 0 .5rem; }
    .cb .cb-send[b-8ik69rjd8g] { width: 26px; height: 26px; }
    .cb .cb-send svg[b-8ik69rjd8g] { width: 13px; height: 13px; }
    .cb .cb-spinner[b-8ik69rjd8g] { width: 12px; height: 12px; border-width: 2px; }

    /* Texte tapé : 16px (sinon iOS zoome la page). Texte indicatif : petit. */
    html body .cb .cb-panel .cb-field[b-8ik69rjd8g] {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    html body .cb .cb-panel .cb-field[b-8ik69rjd8g]::placeholder {
        font-size: 11px;
    }
}
/* /Components/Layout/Formulaires/CanSupport.razor.rz.scp.css */
.cs[b-uhuttxjb3v] {
    --cs-bottom: calc(var(--footer-h, 26px) + 14px);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    letter-spacing: -.01em;
}

.cs-launcher[b-uhuttxjb3v] {
    position: fixed; right: 1rem; bottom: var(--cs-bottom); z-index: 1800;
    width: 42px; height: 42px; display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--accent, #b01e1e); color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25); cursor: pointer;
    transition: transform .15s ease, background-color .2s ease;
}
.cs-launcher:hover[b-uhuttxjb3v] { background: var(--accent-hover, #8f1717); transform: scale(1.06); }
.cs-launcher:active[b-uhuttxjb3v] { transform: scale(.94); }
.cs-launcher-open[b-uhuttxjb3v] { background: var(--ink, #1d1d1f); }

.cs-panel[b-uhuttxjb3v] {
    position: fixed; right: 1rem; bottom: calc(var(--cs-bottom) + 52px); z-index: 1800;
    width: 320px; max-width: calc(100vw - 2rem);
    height: 400px; max-height: calc(100vh - 150px);
    display: flex; flex-direction: column; overflow: hidden;
    background: color-mix(in srgb, var(--panel, #fff) 94%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    color: var(--ink, #1d1d1f);
    border: 1px solid var(--line, rgba(0, 0, 0, .08));
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
    animation: cs-in-b-uhuttxjb3v .18s ease both;
}
@keyframes cs-in-b-uhuttxjb3v { from { opacity: 0; transform: translateY(8px); } }

.cs-head[b-uhuttxjb3v] {
    flex-shrink: 0; display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; border-bottom: 1px solid var(--line, rgba(0, 0, 0, .08));
}
.cs-avatar[b-uhuttxjb3v] {
    flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: 50%; background: var(--accent, #b01e1e); color: #fff;
}
.cs-id[b-uhuttxjb3v] { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.cs-id strong[b-uhuttxjb3v] { font-size: .76rem; }
.cs-id small[b-uhuttxjb3v] { font-size: .6rem; color: var(--muted, #6e6e73); }

.cs-x[b-uhuttxjb3v] {
    width: 22px; height: 22px; border: 0; border-radius: 50%;
    background: none; color: var(--muted, #6e6e73); font-size: 1rem; line-height: 1; cursor: pointer;
}
.cs-x:hover[b-uhuttxjb3v] { background: var(--alt, #f5f5f7); color: var(--accent, #b01e1e); }

.cs-scroll[b-uhuttxjb3v] {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column-reverse; /* ancré en bas, sans JavaScript */
    scrollbar-width: thin;
}
.cs-list[b-uhuttxjb3v] { display: flex; flex-direction: column; gap: .4rem; padding: .6rem .75rem; }

.cs-msg[b-uhuttxjb3v] { display: flex; flex-direction: column; max-width: 86%; }
.cs-mine[b-uhuttxjb3v] { align-self: flex-end; align-items: flex-end; }
.cs-bot[b-uhuttxjb3v] { align-self: flex-start; align-items: flex-start; }

.cs-bubble[b-uhuttxjb3v] { padding: .35rem .6rem; border-radius: 12px; font-size: .7rem; line-height: 1.35; word-break: break-word; }
.cs-mine .cs-bubble[b-uhuttxjb3v] { background: var(--accent, #b01e1e); color: #fff; border-bottom-right-radius: 4px; }
.cs-bot .cs-bubble[b-uhuttxjb3v] { background: var(--alt, #f5f5f7); color: var(--ink, #1d1d1f); border-bottom-left-radius: 4px; }
.cs-time[b-uhuttxjb3v] { margin-top: 2px; padding: 0 .3rem; font-size: .56rem; color: var(--muted, #6e6e73); }

.cs-chips[b-uhuttxjb3v] { display: flex; flex-wrap: wrap; gap: .3rem; }
.cs-chip[b-uhuttxjb3v] {
    padding: .18rem .55rem; border: 1px solid var(--accent, #b01e1e); border-radius: 980px;
    background: transparent; color: var(--accent, #b01e1e);
    font: inherit; font-size: .64rem; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.cs-chip:hover[b-uhuttxjb3v] { background: var(--accent, #b01e1e); color: #fff; }

.cs-error[b-uhuttxjb3v] { flex-shrink: 0; padding: .25rem .75rem; background: #fdecec; color: #c92a2a; font-size: .62rem; }

.cs-input[b-uhuttxjb3v] {
    flex-shrink: 0; display: flex; align-items: center; gap: .4rem;
    padding: .45rem .65rem; border-top: 1px solid var(--line, rgba(0, 0, 0, .08));
}
.cs-field[b-uhuttxjb3v] {
    flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 .65rem;
    border: 1px solid var(--line, rgba(0, 0, 0, .1)); border-radius: 980px;
    background: var(--alt, #f5f5f7); color: var(--ink, #1d1d1f);
    font: inherit; font-size: .72rem; outline: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.cs-field:focus[b-uhuttxjb3v] { border-color: var(--accent, #b01e1e); background: var(--panel, #fff); }

.cs-send[b-uhuttxjb3v] {
    flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: var(--accent, #b01e1e); color: #fff; cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}
.cs-send:hover:not(:disabled)[b-uhuttxjb3v] { background: var(--accent-hover, #8f1717); }
.cs-send:active:not(:disabled)[b-uhuttxjb3v] { transform: scale(.92); }
.cs-send:disabled[b-uhuttxjb3v] { opacity: .35; cursor: not-allowed; }

.cs-spinner[b-uhuttxjb3v] {
    width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff; border-radius: 50%; animation: cs-spin-b-uhuttxjb3v .7s linear infinite;
}
@keyframes cs-spin-b-uhuttxjb3v { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
    .cs-panel[b-uhuttxjb3v] { right: .5rem; width: calc(100vw - 1rem); max-width: none; }
    .cs-launcher[b-uhuttxjb3v] { right: .75rem; }
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : CanSupport (petit)
   Préfixe « .cs » : spécificité supérieure aux règles de base
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .cs[b-uhuttxjb3v] { --cs-bottom: calc(var(--footer-h, 26px) + 8px); }

    .cs .cs-launcher[b-uhuttxjb3v] { width: 30px; height: 30px; right: .5rem; }
    .cs .cs-launcher svg[b-uhuttxjb3v] { width: 15px; height: 15px; }

    .cs .cs-panel[b-uhuttxjb3v] {
        right: .4rem;
        left: auto;
        bottom: calc(var(--cs-bottom) + 36px);
        width: 220px;
        max-width: calc(100vw - .8rem);
        height: 280px;
        max-height: calc(100vh - 200px);
        border-radius: 10px;
    }

    .cs .cs-head[b-uhuttxjb3v] { gap: .3rem; padding: .3rem .45rem; }
    .cs .cs-avatar[b-uhuttxjb3v] { width: 18px; height: 18px; }
    .cs .cs-avatar svg[b-uhuttxjb3v] { width: 10px; height: 10px; }
    .cs .cs-id strong[b-uhuttxjb3v] { font-size: .5rem; }
    .cs .cs-id small[b-uhuttxjb3v] { font-size: .4rem; }
    .cs .cs-x[b-uhuttxjb3v] { width: 16px; height: 16px; font-size: .75rem; }

    .cs .cs-list[b-uhuttxjb3v] { gap: .25rem; padding: .35rem .45rem; }
    .cs .cs-bubble[b-uhuttxjb3v] { padding: .2rem .4rem; border-radius: 8px; font-size: .46rem; line-height: 1.3; }
    .cs .cs-time[b-uhuttxjb3v] { font-size: .38rem; }

    .cs .cs-chips[b-uhuttxjb3v] { gap: .2rem; }
    .cs .cs-chip[b-uhuttxjb3v] { padding: .1rem .35rem; font-size: .42rem; }

    .cs .cs-error[b-uhuttxjb3v] { padding: .15rem .45rem; font-size: .4rem; }

    .cs .cs-input[b-uhuttxjb3v] { gap: .25rem; padding: .3rem .4rem; }
    .cs .cs-field[b-uhuttxjb3v] { height: 20px; padding: 0 .4rem; }
    .cs .cs-send[b-uhuttxjb3v] { width: 20px; height: 20px; }
    .cs .cs-send svg[b-uhuttxjb3v] { width: 10px; height: 10px; }
    .cs .cs-spinner[b-uhuttxjb3v] { width: 9px; height: 9px; border-width: 1.5px; }

    /* Champ de saisie : iOS impose 16 px, on bat cette règle */
    html body .cs .cs-panel .cs-field[b-uhuttxjb3v] {
        font-size: 16px !important;
        line-height: 1.2 !important;
        -webkit-appearance: none;
        appearance: none;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .cs[b-uhuttxjb3v] { --cs-bottom: calc(var(--footer-h, 26px) + 6px); }

    /* Bouton flottant */
    .cs .cs-launcher[b-uhuttxjb3v] { width: 24px; height: 24px; right: .4rem; }
    .cs .cs-launcher svg[b-uhuttxjb3v] { width: 12px; height: 12px; }

    /* Panneau */
    .cs .cs-panel[b-uhuttxjb3v] {
        right: .3rem;
        bottom: calc(var(--cs-bottom) + 30px);
        width: 180px;
        height: 220px;
        max-height: calc(100vh - 180px);
        border-radius: 8px;
    }

    .cs .cs-head[b-uhuttxjb3v] { padding: .25rem .35rem; }
    .cs .cs-avatar[b-uhuttxjb3v] { width: 15px; height: 15px; }
    .cs .cs-avatar svg[b-uhuttxjb3v] { width: 8px; height: 8px; }
    .cs .cs-id strong[b-uhuttxjb3v] { font-size: .46rem; }
    .cs .cs-id small[b-uhuttxjb3v] { font-size: .36rem; }
    .cs .cs-x[b-uhuttxjb3v] { width: 14px; height: 14px; font-size: .65rem; }

    .cs .cs-list[b-uhuttxjb3v] { padding: .3rem .35rem; }
    .cs .cs-bubble[b-uhuttxjb3v] { padding: .16rem .32rem; font-size: .42rem; }
    .cs .cs-time[b-uhuttxjb3v] { font-size: .34rem; }
    .cs .cs-chip[b-uhuttxjb3v] { padding: .08rem .28rem; font-size: .38rem; }

    .cs .cs-input[b-uhuttxjb3v] { padding: .25rem .3rem; }
    .cs .cs-field[b-uhuttxjb3v] { height: 20px; }
    .cs .cs-send[b-uhuttxjb3v] { width: 18px; height: 18px; }
    .cs .cs-send svg[b-uhuttxjb3v] { width: 9px; height: 9px; }
}
/* /Components/Layout/Formulaires/CrsDetailedForm.razor.rz.scp.css */
.cd-overlay[b-owgiv99m1y] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5000;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

.cd-modal[b-owgiv99m1y] {
    width: min(500px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .97);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .08);
}

/* ---------- En-tête ---------- */
.cd-header[b-owgiv99m1y] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
}

.cd-title[b-owgiv99m1y] {
    flex: 1;
    font-size: .74rem;
    font-weight: 600;
    color: #1d1d1f;
}

.cd-title i[b-owgiv99m1y] { color: #c0392b; margin-right: .3rem; }

.cd-live[b-owgiv99m1y] {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    padding: .15rem .6rem;
    background: #fdecea;
    border-radius: 999px;
}

.cd-live small[b-owgiv99m1y] { font-size: .58rem; color: #8f1d12; }
.cd-live strong[b-owgiv99m1y] { font-size: .8rem; color: #c0392b; }

.cd-close[b-owgiv99m1y] {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f0f0f2;
    color: #6e6e73;
    font-size: .55rem;
    cursor: pointer;
}

.cd-close:hover[b-owgiv99m1y] { background: #e4e4e7; }

/* ---------- Étapes ---------- */
.cd-stepper[b-owgiv99m1y] {
    display: flex;
    gap: 5px;
    padding: 0 .9rem .4rem;
}

.cd-dot[b-owgiv99m1y] {
    flex: 1;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: #e5e5ea;
    cursor: pointer;
    transition: background .2s;
}

.cd-dot.done[b-owgiv99m1y] { background: #e8a79f; }
.cd-dot.on[b-owgiv99m1y] { background: #c0392b; }

/* ---------- Corps ---------- */
.cd-body[b-owgiv99m1y] {
    flex: 1;
    padding: .6rem .9rem .4rem;
    overflow-y: auto;
    min-height: 260px;
}

.cd-step-count[b-owgiv99m1y] {
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #86868b;
}

.cd-question[b-owgiv99m1y] {
    margin: .2rem 0 .1rem;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #1d1d1f;
}

.cd-sub[b-owgiv99m1y] {
    margin: 0 0 .6rem;
    font-size: .66rem;
    color: #86868b;
}

.cd-note-box[b-owgiv99m1y] {
    margin-bottom: .6rem;
    padding: .4rem .6rem;
    font-size: .64rem;
    line-height: 1.35;
    color: #8f1d12;
    background: #fdecea;
    border-radius: 8px;
}

/* ---------- Champs ---------- */
.cd-fields[b-owgiv99m1y] {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .6rem;
}

.cd-field[b-owgiv99m1y] { flex: 1 1 100%; }
.cd-field.half[b-owgiv99m1y] { flex: 1 1 calc(50% - .3rem); }

.cd-label[b-owgiv99m1y] {
    display: block;
    margin-bottom: .15rem;
    font-size: .68rem;
    font-weight: 500;
    color: #1d1d1f;
}

.cd-help[b-owgiv99m1y] {
    margin-bottom: .25rem;
    font-size: .6rem;
    line-height: 1.3;
    color: #86868b;
}

.cd-select[b-owgiv99m1y] {
    width: 100%;
    padding: .4rem .55rem;
    font-size: .7rem;
    color: #1d1d1f;
    background: #f5f5f7;
    border: 1.5px solid transparent;
    border-radius: 9px;
    outline: none;
}

.cd-select:focus[b-owgiv99m1y] { border-color: #c0392b; }

.cd-seg[b-owgiv99m1y] {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: #f2f2f4;
    border-radius: 9px;
}

.cd-seg.stacked[b-owgiv99m1y] { flex-direction: column; }

.cd-seg-btn[b-owgiv99m1y] {
    flex: 1;
    padding: .38rem .5rem;
    font-size: .68rem;
    line-height: 1.25;
    text-align: center;
    color: #3a3a3c;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.cd-seg.stacked .cd-seg-btn[b-owgiv99m1y] { text-align: left; }
.cd-seg-btn:hover[b-owgiv99m1y] { background: #e8e8ec; }

.cd-seg-btn.on[b-owgiv99m1y] {
    color: #c0392b;
    font-weight: 600;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* ---------- Pied ---------- */
.cd-footer[b-owgiv99m1y] {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .9rem .75rem;
}

.cd-btn[b-owgiv99m1y] {
    padding: .36rem .8rem;
    font-size: .68rem;
    font-weight: 500;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}

.cd-btn:disabled[b-owgiv99m1y] { opacity: .35; cursor: not-allowed; }
.cd-btn-primary[b-owgiv99m1y] { margin-left: auto; background: #c0392b; color: #fff; }
.cd-btn-primary:hover:not(:disabled)[b-owgiv99m1y] { background: #a93226; }
.cd-btn-secondary[b-owgiv99m1y] { background: #f0f0f2; color: #1d1d1f; }
.cd-btn-secondary:hover:not(:disabled)[b-owgiv99m1y] { background: #e4e4e7; }

/* ---------- Résultat ---------- */
.cd-score-card[b-owgiv99m1y] {
    margin-bottom: .6rem;
    padding: .7rem;
    text-align: center;
    background: #fdecea;
    border-radius: 12px;
}

.cd-score-label[b-owgiv99m1y] { font-size: .62rem; color: #8f1d12; }

.cd-score[b-owgiv99m1y] {
    margin: .05rem 0 .35rem;
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing: -.03em;
    color: #c0392b;
}

.cd-score small[b-owgiv99m1y] { font-size: .72rem; font-weight: 400; color: #c98a83; }

.cd-gauge[b-owgiv99m1y] {
    height: 5px;
    background: #f7c9c4;
    border-radius: 3px;
    overflow: hidden;
}

.cd-gauge-fill[b-owgiv99m1y] {
    height: 100%;
    background: #c0392b;
    border-radius: 3px;
    transition: width .4s ease;
}

.cd-score-sub[b-owgiv99m1y] {
    display: block;
    margin-top: .35rem;
    font-size: .58rem;
    color: #8f1d12;
}

.cd-section[b-owgiv99m1y] {
    margin-bottom: .55rem;
    padding: .5rem .65rem;
    background: #f9f9fa;
    border-radius: 10px;
}

.cd-section-head[b-owgiv99m1y] {
    display: flex;
    justify-content: space-between;
    margin-bottom: .3rem;
    font-size: .7rem;
    font-weight: 600;
    color: #1d1d1f;
}

.cd-section-head small[b-owgiv99m1y],
.cd-line-main small[b-owgiv99m1y] { font-weight: 400; color: #aeaeb2; }

.cd-line[b-owgiv99m1y] { padding: .2rem 0; }

.cd-line-main[b-owgiv99m1y] {
    display: flex;
    justify-content: space-between;
    font-size: .64rem;
    color: #3a3a3c;
}

.cd-bar[b-owgiv99m1y] {
    height: 3px;
    margin-top: .2rem;
    background: #ececef;
    border-radius: 2px;
    overflow: hidden;
}

.cd-bar div[b-owgiv99m1y] {
    height: 100%;
    background: #c0392b;
    border-radius: 2px;
}

.cd-detail[b-owgiv99m1y] {
    margin-top: .15rem;
    font-size: .56rem;
    color: #86868b;
}

.cd-tip[b-owgiv99m1y] {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    padding: .25rem 0;
    font-size: .64rem;
    color: #3a3a3c;
    border-top: .5px solid #e5e5ea;
}

.cd-tip strong[b-owgiv99m1y] { color: #c0392b; white-space: nowrap; }

.cd-note[b-owgiv99m1y] {
    margin: .3rem 0 0;
    font-size: .56rem;
    line-height: 1.4;
    color: #86868b;
}

@media (max-width: 480px) {
    .cd-field.half[b-owgiv99m1y] { flex: 1 1 100%; }
}

/* ===== Mobile : simulation CRS détaillée compacte ===== */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    .cd-overlay[b-owgiv99m1y] {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .cd-modal[b-owgiv99m1y] {
        width: min(360px, 94vw);
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 14px;
    }

    .cd-header[b-owgiv99m1y] { gap: .4rem; padding: .4rem .65rem; }
    .cd-title[b-owgiv99m1y] { font-size: .64rem; }
    .cd-title i[b-owgiv99m1y] { margin-right: .2rem; }
    .cd-live[b-owgiv99m1y] { padding: .1rem .45rem; }
    .cd-live small[b-owgiv99m1y] { font-size: .5rem; }
    .cd-live strong[b-owgiv99m1y] { font-size: .68rem; }
    .cd-close[b-owgiv99m1y] { width: 18px; height: 18px; font-size: .5rem; }

    .cd-stepper[b-owgiv99m1y] { gap: 4px; padding: 0 .65rem .3rem; }
    .cd-dot[b-owgiv99m1y] { height: 3px; }

    .cd-body[b-owgiv99m1y] { padding: .45rem .65rem .25rem; min-height: 0; }

    .cd-step-count[b-owgiv99m1y] { font-size: .5rem; }
    .cd-question[b-owgiv99m1y] { margin: .15rem 0 .05rem; font-size: .78rem; }
    .cd-sub[b-owgiv99m1y] { margin-bottom: .4rem; font-size: .56rem; }
    .cd-note-box[b-owgiv99m1y] { margin-bottom: .4rem; padding: .3rem .45rem; font-size: .54rem; border-radius: 7px; }

    .cd-fields[b-owgiv99m1y] { gap: .4rem .45rem; }
    /* Garde les demi-champs côte à côte (annule max-width: 480px) */
    .cd-field.half[b-owgiv99m1y] { flex: 1 1 calc(50% - .25rem); }
    .cd-label[b-owgiv99m1y] { margin-bottom: .1rem; font-size: .6rem; }
    .cd-help[b-owgiv99m1y] { margin-bottom: .15rem; font-size: .52rem; }

    /* 16px : évite le zoom automatique d'iOS */
    .cd-select[b-owgiv99m1y] { padding: .25rem .45rem; font-size: 16px; border-radius: 8px; }

    .cd-seg[b-owgiv99m1y] { border-radius: 8px; }
    .cd-seg-btn[b-owgiv99m1y] { padding: .28rem .35rem; font-size: .58rem; border-radius: 6px; }

    .cd-footer[b-owgiv99m1y] { gap: .35rem; padding: .4rem .65rem .55rem; }
    .cd-btn[b-owgiv99m1y] { padding: .28rem .65rem; font-size: .6rem; }

    /* Résultat */
    .cd-score-card[b-owgiv99m1y] { margin-bottom: .4rem; padding: .5rem; border-radius: 10px; }
    .cd-score-label[b-owgiv99m1y] { font-size: .54rem; }
    .cd-score[b-owgiv99m1y] { margin: 0 0 .25rem; font-size: 1.8rem; }
    .cd-score small[b-owgiv99m1y] { font-size: .62rem; }
    .cd-gauge[b-owgiv99m1y] { height: 4px; }
    .cd-score-sub[b-owgiv99m1y] { margin-top: .25rem; font-size: .5rem; }

    .cd-section[b-owgiv99m1y] { margin-bottom: .4rem; padding: .4rem .5rem; border-radius: 8px; }
    .cd-section-head[b-owgiv99m1y] { margin-bottom: .2rem; font-size: .62rem; }
    .cd-line[b-owgiv99m1y] { padding: .12rem 0; }
    .cd-line-main[b-owgiv99m1y] { font-size: .56rem; }
    .cd-bar[b-owgiv99m1y] { height: 2px; margin-top: .15rem; }
    .cd-detail[b-owgiv99m1y] { font-size: .5rem; }
    .cd-tip[b-owgiv99m1y] { padding: .18rem 0; font-size: .56rem; }
    .cd-note[b-owgiv99m1y] { font-size: .5rem; line-height: 1.35; }
}
/* /Components/Layout/Formulaires/CrsSimulationForm.razor.rz.scp.css */
/* ---------- Fenêtre ---------- */
.crs-overlay[b-sfrvskdpmn] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5000;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

.crs-modal[b-sfrvskdpmn] {
    width: min(380px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .96);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .08);
}

/* ---------- En-tête ---------- */
.crs-header[b-sfrvskdpmn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .9rem;
    font-size: .74rem;
    font-weight: 600;
    color: #1d1d1f;
}

.crs-header i[b-sfrvskdpmn] {
    color: #c0392b;
    margin-right: .3rem;
}

.crs-close[b-sfrvskdpmn] {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f0f0f2;
    color: #6e6e73;
    font-size: .55rem;
    cursor: pointer;
    transition: background .15s;
}

.crs-close:hover[b-sfrvskdpmn] { background: #e4e4e7; }

/* ---------- Progression ---------- */
.crs-progress[b-sfrvskdpmn] {
    height: 2px;
    margin: 0 .9rem;
    background: #ececef;
    border-radius: 2px;
    overflow: hidden;
}

.crs-progress-bar[b-sfrvskdpmn] {
    height: 100%;
    background: #c0392b;
    border-radius: 2px;
    transition: width .3s ease;
}

/* ---------- Corps ---------- */
.crs-body[b-sfrvskdpmn] {
    flex: 1;
    padding: .85rem .9rem .4rem;
    overflow-y: auto;
    min-height: 200px;
}

.crs-step-count[b-sfrvskdpmn] {
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #86868b;
}

.crs-question[b-sfrvskdpmn] {
    margin: .2rem 0 .15rem;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #1d1d1f;
}

.crs-help[b-sfrvskdpmn] {
    margin: 0 0 .5rem;
    font-size: .64rem;
    color: #86868b;
}

/* ---------- Choix ---------- */
.crs-options[b-sfrvskdpmn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    margin-top: .65rem;
}

.crs-option[b-sfrvskdpmn] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .55rem;
    font-size: .68rem;
    line-height: 1.25;
    text-align: left;
    color: #1d1d1f;
    background: #f5f5f7;
    border: 1.5px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.crs-option:hover[b-sfrvskdpmn] { background: #ececef; }

.crs-option.selected[b-sfrvskdpmn] {
    background: #fdecea;
    border-color: #c0392b;
    color: #8f1d12;
}

.crs-radio[b-sfrvskdpmn] {
    flex: 0 0 11px;
    height: 11px;
    border: 1.5px solid #c7c7cc;
    border-radius: 50%;
    background: #fff;
}

.crs-option.selected .crs-radio[b-sfrvskdpmn] {
    border-color: #c0392b;
    background: radial-gradient(#c0392b 42%, #fff 46%);
}

.crs-select[b-sfrvskdpmn] {
    width: 100%;
    margin-top: .65rem;
    padding: .45rem .6rem;
    font-size: .72rem;
    color: #1d1d1f;
    background: #f5f5f7;
    border: 1.5px solid transparent;
    border-radius: 9px;
    outline: none;
}

.crs-select:focus[b-sfrvskdpmn] { border-color: #c0392b; }

/* ---------- Pied ---------- */
.crs-footer[b-sfrvskdpmn] {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .9rem .75rem;
}

.crs-btn[b-sfrvskdpmn] {
    padding: .36rem .8rem;
    font-size: .68rem;
    font-weight: 500;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}

.crs-btn:disabled[b-sfrvskdpmn] {
    opacity: .35;
    cursor: not-allowed;
}

.crs-btn-primary[b-sfrvskdpmn] {
    margin-left: auto;
    background: #c0392b;
    color: #fff;
}

.crs-btn-primary:hover:not(:disabled)[b-sfrvskdpmn] { background: #a93226; }

.crs-btn-secondary[b-sfrvskdpmn] {
    background: #f0f0f2;
    color: #1d1d1f;
}

.crs-btn-secondary:hover:not(:disabled)[b-sfrvskdpmn] { background: #e4e4e7; }

/* ---------- Résultat ---------- */
.crs-result[b-sfrvskdpmn] { text-align: center; }

.crs-result-label[b-sfrvskdpmn] {
    font-size: .64rem;
    color: #86868b;
}

.crs-result-score[b-sfrvskdpmn] {
    margin: .1rem 0 .5rem;
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -.03em;
    color: #c0392b;
}

.crs-result-score small[b-sfrvskdpmn] {
    font-size: .72rem;
    font-weight: 400;
    color: #aeaeb2;
}

.crs-breakdown[b-sfrvskdpmn] {
    width: 100%;
    margin: .2rem 0 .5rem;
    border-collapse: collapse;
    font-size: .66rem;
    text-align: left;
}

.crs-breakdown td[b-sfrvskdpmn] {
    padding: .25rem .1rem;
    color: #3a3a3c;
    border-bottom: .5px solid #e5e5ea;
}

.crs-breakdown td:last-child[b-sfrvskdpmn] {
    text-align: right;
    font-weight: 600;
}

.crs-total td[b-sfrvskdpmn] {
    border-bottom: 0;
    font-weight: 600;
    color: #1d1d1f;
}

.crs-note[b-sfrvskdpmn] {
    margin: 0;
    font-size: .58rem;
    line-height: 1.4;
    color: #86868b;
}

@media (max-width: 480px) {
    .crs-options[b-sfrvskdpmn] { grid-template-columns: 1fr; }
}

/* ===== Mobile : simulation CRS compacte ===== */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    .crs-overlay[b-sfrvskdpmn] {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .crs-modal[b-sfrvskdpmn] {
        width: min(320px, 92vw);
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 14px;
    }

    .crs-header[b-sfrvskdpmn] { padding: .4rem .65rem; font-size: .64rem; }
    .crs-header i[b-sfrvskdpmn] { margin-right: .2rem; }
    .crs-close[b-sfrvskdpmn] { width: 18px; height: 18px; font-size: .5rem; }

    .crs-progress[b-sfrvskdpmn] { margin: 0 .65rem; }

    .crs-body[b-sfrvskdpmn] { padding: .55rem .65rem .25rem; min-height: 0; }

    .crs-step-count[b-sfrvskdpmn] { font-size: .5rem; }
    .crs-question[b-sfrvskdpmn] { margin: .15rem 0 .1rem; font-size: .76rem; line-height: 1.25; }
    .crs-help[b-sfrvskdpmn] { margin-bottom: .35rem; font-size: .56rem; }

    /* Choix sur 2 colonnes, plus petits (annule le 1 colonne de max-width: 480px) */
    .crs-options[b-sfrvskdpmn] { grid-template-columns: 1fr 1fr; gap: .25rem; margin-top: .45rem; }
    .crs-option[b-sfrvskdpmn] { gap: .3rem; padding: .3rem .4rem; font-size: .6rem; border-radius: 8px; }
    .crs-radio[b-sfrvskdpmn] { flex: 0 0 9px; height: 9px; }

    /* 16px : évite le zoom automatique d'iOS à la sélection */
    .crs-select[b-sfrvskdpmn] { margin-top: .45rem; padding: .25rem .5rem; font-size: 16px; border-radius: 8px; }

    .crs-footer[b-sfrvskdpmn] { gap: .35rem; padding: .4rem .65rem .55rem; }
    .crs-btn[b-sfrvskdpmn] { padding: .28rem .65rem; font-size: .6rem; }

    /* Résultat */
    .crs-result-label[b-sfrvskdpmn] { font-size: .56rem; }
    .crs-result-score[b-sfrvskdpmn] { margin: 0 0 .3rem; font-size: 1.7rem; }
    .crs-result-score small[b-sfrvskdpmn] { font-size: .62rem; }
    .crs-breakdown[b-sfrvskdpmn] { margin: .1rem 0 .35rem; font-size: .58rem; }
    .crs-breakdown td[b-sfrvskdpmn] { padding: .18rem .1rem; }
    .crs-note[b-sfrvskdpmn] { font-size: .5rem; line-height: 1.35; }
}
/* /Components/Layout/Formulaires/DemandeForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-oi8fnii69o] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-oi8fnii69o .15s ease;
}

@keyframes programme-form-fade-in-b-oi8fnii69o {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-oi8fnii69o {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-oi8fnii69o] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-oi8fnii69o .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-oi8fnii69o] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-oi8fnii69o] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-oi8fnii69o] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-oi8fnii69o] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-oi8fnii69o] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-oi8fnii69o] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-oi8fnii69o] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-oi8fnii69o]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-oi8fnii69o] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-oi8fnii69o] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-oi8fnii69o] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-oi8fnii69o] .programme-form-input,
[b-oi8fnii69o] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-oi8fnii69o] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-oi8fnii69o] .programme-form-input:focus,
[b-oi8fnii69o] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-oi8fnii69o] .programme-form-input::placeholder,
[b-oi8fnii69o] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-oi8fnii69o] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-oi8fnii69o] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-oi8fnii69o] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-oi8fnii69o] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-oi8fnii69o] { background: #e5e7eb; }

.programme-form-btn-save[b-oi8fnii69o] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-oi8fnii69o] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-oi8fnii69o] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-oi8fnii69o] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-oi8fnii69o] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-oi8fnii69o] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-oi8fnii69o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-oi8fnii69o] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-oi8fnii69o] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */

@media (max-width: 640px) {
    .programme-form-grid[b-oi8fnii69o] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .programme-form-grid[b-oi8fnii69o] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-oi8fnii69o] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-oi8fnii69o] { padding: 8px; }

    .programme-form-card[b-oi8fnii69o] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-oi8fnii69o] { padding: .3rem .6rem; }
    .programme-form-title[b-oi8fnii69o]  { font-size: .76rem; }
    .programme-form-close[b-oi8fnii69o]  { font-size: 1rem; }

    .programme-form-scroll[b-oi8fnii69o] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-oi8fnii69o] { margin-bottom: 6px; }

    .programme-form-outline-label[b-oi8fnii69o] {
        top: -5px;
        font-size: .56rem;
    }

    [b-oi8fnii69o] .programme-form-input,
    [b-oi8fnii69o] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-oi8fnii69o] { font-size: .66rem; }

    .programme-form-actions[b-oi8fnii69o] { padding: .3rem .6rem; }

    .programme-form-btn[b-oi8fnii69o] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-oi8fnii69o] .validation-message,
    [b-oi8fnii69o] .validation-errors,
    .programme-form-error-inline[b-oi8fnii69o] { font-size: .6rem; }
}

/* ==== EXTRAS (identité, conseillers) ==== */

/* ===========================
   Identité : photo à gauche, champs à droite
   =========================== */

.programme-form-identity[b-oi8fnii69o] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.programme-form-identity > .programme-form-grid[b-oi8fnii69o] { flex: 1; min-width: 0; }

.programme-form-photo[b-oi8fnii69o] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    width: 64px;
}

.programme-form-photo-preview[b-oi8fnii69o] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .95rem;
    font-weight: 600;
}

.programme-form-photo-preview img[b-oi8fnii69o] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.programme-form-photo-actions[b-oi8fnii69o] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* « Photo », « Changer » et « Retirer » : liens textuels (le champ fichier est masqué) */
.programme-form-link-btn[b-oi8fnii69o] {
    padding: 0;
    background: none;
    border: none;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    text-decoration: underline;
    cursor: pointer;
}

/* ===========================
   Conseillers (liste)
   =========================== */

.programme-form-btn-add[b-oi8fnii69o] {
    padding: .1rem .6rem;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    background: #fdecec;
    border: none;
    border-radius: 36px;
    cursor: pointer;
}

.programme-form-btn-add:hover[b-oi8fnii69o] { background: #fbd5d5; }

.programme-form-list-scroll[b-oi8fnii69o] {
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.programme-form-list-item[b-oi8fnii69o] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
}

.programme-form-list-item-fields[b-oi8fnii69o] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: .35rem;
}

.programme-form-list-item-fields > .programme-form-input[b-oi8fnii69o] {
    flex: 1 1 0;
    min-width: 0;
}

.programme-form-btn-remove[b-oi8fnii69o] {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: .85rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.programme-form-btn-remove:hover[b-oi8fnii69o] {
    background: #fdecec;
    color: #c92a2a;
}

.programme-form-empty-hint[b-oi8fnii69o] {
    margin: 0 0 .35rem;
    font-size: .7rem;
    font-style: italic;
    color: #9ca3af;
}

.programme-form-consultant-photo[b-oi8fnii69o] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    width: 52px;
}

.programme-form-consultant-avatar[b-oi8fnii69o] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .75rem;
    font-weight: 600;
}

.programme-form-consultant-avatar img[b-oi8fnii69o] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 50%;
}

/* ===========================
   Responsive (extras)
   =========================== */

@media (max-width: 480px) {
    .programme-form-identity[b-oi8fnii69o] { flex-direction: column; align-items: stretch; }
    .programme-form-photo[b-oi8fnii69o] { flex-direction: row; width: auto; }
    .programme-form-list-item-fields[b-oi8fnii69o] { flex-direction: column; }
    .programme-form-consultant-photo[b-oi8fnii69o] { flex-direction: row; width: auto; }
}

/* ===========================
   Mobile : extras réduits
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-photo-preview[b-oi8fnii69o] {
        width: 32px;
        height: 32px;
        font-size: .8rem;
    }

    .programme-form-link-btn[b-oi8fnii69o] { font-size: .58rem; }

    .programme-form-btn-add[b-oi8fnii69o] {
        padding: .05rem .4rem;
        font-size: .58rem;
    }

    .programme-form-list-scroll[b-oi8fnii69o] { max-height: 110px; }

    .programme-form-btn-remove[b-oi8fnii69o] {
        width: 16px;
        height: 16px;
        font-size: .7rem;
    }

    .programme-form-empty-hint[b-oi8fnii69o] { font-size: .58rem; }

    .programme-form-consultant-photo[b-oi8fnii69o] { width: 44px; }

    .programme-form-consultant-avatar[b-oi8fnii69o] {
        width: 26px;
        height: 26px;
        min-width: 26px;
        flex-basis: 26px;
        font-size: .65rem;
    }
}
/* /Components/Layout/Formulaires/EditeurPlan.razor.rz.scp.css */
/* Styles isolés : ils ne s'appliquent qu'à ce composant. */

/* [popover="manual"] ouvert par js/topLayer.js (même principe que la fenêtre du plan) */
.editeur-overlay[b-46ssnejhnk] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 1rem;
    box-sizing: border-box;
    overflow: auto;
    color: inherit;

    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.editeur-overlay:not(:popover-open)[b-46ssnejhnk] {
    display: none;
}

.editeur-overlay:popover-open[b-46ssnejhnk] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.editeur-box[b-46ssnejhnk] {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.1rem 1.1rem .95rem;
    background: #fff;
    color: #1d1d1f;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    font-size: .7rem;
}

.editeur-close[b-46ssnejhnk] {
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: #f5f5f7;
    color: #1d1d1f;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.editeur-close:hover:not(:disabled)[b-46ssnejhnk] { background: #fdecec; color: #c92a2a; }
.editeur-close:disabled[b-46ssnejhnk] { opacity: .5; cursor: not-allowed; }

.editeur-head[b-46ssnejhnk] { padding-right: 1.8rem; }

.editeur-title[b-46ssnejhnk] {
    margin: 0 0 .15rem;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.editeur-sub[b-46ssnejhnk] {
    margin: 0;
    font-size: .66rem;
    line-height: 1.35;
    color: #6b7280;
}

.editeur-erreur[b-46ssnejhnk] {
    margin-top: .6rem;
    padding: .4rem .6rem;
    border-radius: 8px;
    background: #fdecec;
    color: #c92a2a;
    font-size: .66rem;
    font-weight: 600;
}

.editeur-entete[b-46ssnejhnk] {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    margin-top: .8rem;
    padding: 0 .1rem .3rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #c92a2a;
}

.editeur-liste[b-46ssnejhnk] {
    list-style: none;
    margin: 0;
    padding: .35rem 0 0;
    max-height: 48vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.editeur-ligne[b-46ssnejhnk] {
    display: grid;
    grid-template-columns: 2.6rem 1fr 1.6rem;
    align-items: center;
    gap: .3rem;
}

.editeur-case[b-46ssnejhnk] {
    justify-self: center;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #16a34a;
    cursor: pointer;
}

.editeur-texte[b-46ssnejhnk] {
    width: 100%;
    height: 28px;
    padding: 0 .55rem;
    box-sizing: border-box;
    font: inherit;
    font-size: .68rem;
    color: #1d1d1f;
    background: #f5f5f7;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    outline: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.editeur-texte:focus[b-46ssnejhnk] {
    background: #fff;
    border-color: #c92a2a;
}

.editeur-texte:disabled[b-46ssnejhnk] { opacity: .65; }

.editeur-suppr[b-46ssnejhnk] {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #9ca3af;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}

.editeur-suppr:hover:not(:disabled)[b-46ssnejhnk] { background: #fdecec; color: #c92a2a; }
.editeur-suppr:disabled[b-46ssnejhnk] { opacity: .5; cursor: not-allowed; }

.editeur-ajout[b-46ssnejhnk] {
    margin-top: .55rem;
    padding: .3rem .7rem;
    border: 1px dashed #c92a2a;
    border-radius: 980px;
    background: none;
    color: #c92a2a;
    font: inherit;
    font-size: .64rem;
    font-weight: 600;
    cursor: pointer;
}

.editeur-ajout:hover:not(:disabled)[b-46ssnejhnk] { background: #fdecec; }
.editeur-ajout:disabled[b-46ssnejhnk] { opacity: .5; cursor: not-allowed; }

.editeur-note[b-46ssnejhnk] {
    margin: .6rem 0 0;
    font-size: .6rem;
    color: #6b7280;
}

.editeur-actions[b-46ssnejhnk] {
    margin-top: .7rem;
}

.editeur-enregistrer[b-46ssnejhnk] {
    width: 100%;
    height: 32px;
    border: 0;
    border-radius: 980px;
    background: #c92a2a;
    color: #fff;
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}

.editeur-enregistrer:hover:not(:disabled)[b-46ssnejhnk] { background: #a52323; }
.editeur-enregistrer:disabled[b-46ssnejhnk] { opacity: .6; cursor: not-allowed; }

.editeur-annuler[b-46ssnejhnk] {
    display: block;
    margin: .45rem auto 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .64rem;
    color: #6b7280;
    cursor: pointer;
}

.editeur-annuler:hover:not(:disabled)[b-46ssnejhnk] { color: #c92a2a; text-decoration: underline; }
.editeur-annuler:disabled[b-46ssnejhnk] { opacity: .5; cursor: not-allowed; }
/* /Components/Layout/Formulaires/EmailComposeModal.razor.rz.scp.css */
.progression-email-overlay[b-zi5yz73gwl] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.progression-email-modal[b-zi5yz73gwl] {
    background: #fff;
    border-radius: 8px;
    padding: 1rem;
    width: 720px;
    max-width: 88vw;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.progression-email-modal-header[b-zi5yz73gwl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.progression-email-modal-header h3[b-zi5yz73gwl] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progression-email-close[b-zi5yz73gwl] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: #888;
    line-height: 1;
    padding: 2px 4px;
    flex-shrink: 0;
}

.progression-email-close:hover[b-zi5yz73gwl] {
    color: #1a1a1a;
}

.progression-email-meta[b-zi5yz73gwl] {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 0.6rem;
}

.progression-email-field[b-zi5yz73gwl] {
    margin-bottom: 0.5rem;
}

.progression-email-field input[b-zi5yz73gwl],
.progression-email-field textarea[b-zi5yz73gwl] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font: inherit;
    font-size: 0.82rem;
    resize: vertical;
}

.progression-email-field textarea[b-zi5yz73gwl] {
    min-height: 160px;
}

.progression-email-field input:focus[b-zi5yz73gwl],
.progression-email-field textarea:focus[b-zi5yz73gwl] {
    outline: none;
    border-color: #8f0606;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.progression-email-assistants-label[b-zi5yz73gwl] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.3rem;
}

.progression-email-assistants-input-row[b-zi5yz73gwl] {
    display: flex;
    gap: 0.4rem;
}

.progression-email-assistants-input-row input[b-zi5yz73gwl] {
    flex: 1;
}

.progression-email-assistants-erreur[b-zi5yz73gwl] {
    font-size: 0.72rem;
    color: #c0392b;
    margin-top: 0.3rem;
}

.progression-email-assistants-chips[b-zi5yz73gwl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.progression-email-chip[b-zi5yz73gwl] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #eef2ff;
    color: #2563eb;
    border-radius: 14px;
    padding: 0.2rem 0.5rem 0.2rem 0.7rem;
    font-size: 0.75rem;
}

.progression-email-chip-remove[b-zi5yz73gwl] {
    background: none;
    border: none;
    cursor: pointer;
    color: #2563eb;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
}

.progression-email-chip-remove:hover[b-zi5yz73gwl] {
    color: #1d4ed8;
}

.progression-email-actions[b-zi5yz73gwl] {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.progression-btn-primary[b-zi5yz73gwl],
.progression-btn-secondary[b-zi5yz73gwl] {
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    border: none;
    font-size: 0.6rem;
    font-weight: 500;
    cursor: pointer;
    height: 25px;
    width: 100px;
}

.progression-btn-primary[b-zi5yz73gwl] {
    background: #8f0606;
    color: #fff;
}

.progression-btn-primary:hover[b-zi5yz73gwl] {
    background: #ff3333;
}

.progression-btn-secondary[b-zi5yz73gwl] {
    background: #f1f1f1;
    color: #333;
}

.progression-btn-secondary:hover[b-zi5yz73gwl] {
    background: #e4e4e4;
}
/* /Components/Layout/Formulaires/FinanceDetailsForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-ftt00h3pic] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-ftt00h3pic .15s ease;
}

@keyframes programme-form-fade-in-b-ftt00h3pic {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-ftt00h3pic {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-ftt00h3pic] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-ftt00h3pic .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-ftt00h3pic] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-ftt00h3pic] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-ftt00h3pic] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-ftt00h3pic] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-ftt00h3pic] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-ftt00h3pic] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-ftt00h3pic] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-ftt00h3pic]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-ftt00h3pic] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-ftt00h3pic] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-ftt00h3pic] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-ftt00h3pic] .programme-form-input,
[b-ftt00h3pic] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-ftt00h3pic] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-ftt00h3pic] .programme-form-input:focus,
[b-ftt00h3pic] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-ftt00h3pic] .programme-form-input::placeholder,
[b-ftt00h3pic] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-ftt00h3pic] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-ftt00h3pic] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-ftt00h3pic] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-ftt00h3pic] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-ftt00h3pic] { background: #e5e7eb; }

.programme-form-btn-save[b-ftt00h3pic] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-ftt00h3pic] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-ftt00h3pic] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-ftt00h3pic] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-ftt00h3pic] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-ftt00h3pic] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-ftt00h3pic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-ftt00h3pic] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-ftt00h3pic] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */

@media (max-width: 640px) {
    .programme-form-grid[b-ftt00h3pic] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .programme-form-grid[b-ftt00h3pic] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-ftt00h3pic] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-ftt00h3pic] { padding: 8px; }

    .programme-form-card[b-ftt00h3pic] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-ftt00h3pic] { padding: .3rem .6rem; }
    .programme-form-title[b-ftt00h3pic]  { font-size: .76rem; }
    .programme-form-close[b-ftt00h3pic]  { font-size: 1rem; }

    .programme-form-scroll[b-ftt00h3pic] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-ftt00h3pic] { margin-bottom: 6px; }

    .programme-form-outline-label[b-ftt00h3pic] {
        top: -5px;
        font-size: .56rem;
    }

    [b-ftt00h3pic] .programme-form-input,
    [b-ftt00h3pic] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-ftt00h3pic] { font-size: .66rem; }

    .programme-form-actions[b-ftt00h3pic] { padding: .3rem .6rem; }

    .programme-form-btn[b-ftt00h3pic] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-ftt00h3pic] .validation-message,
    [b-ftt00h3pic] .validation-errors,
    .programme-form-error-inline[b-ftt00h3pic] { font-size: .6rem; }
}

/* ==== EXTRAS (identité, conseillers) ==== */

/* ===========================
   Identité : photo à gauche, champs à droite
   =========================== */

.programme-form-identity[b-ftt00h3pic] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.programme-form-identity > .programme-form-grid[b-ftt00h3pic] { flex: 1; min-width: 0; }

.programme-form-photo[b-ftt00h3pic] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    width: 64px;
}

.programme-form-photo-preview[b-ftt00h3pic] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .95rem;
    font-weight: 600;
}

.programme-form-photo-preview img[b-ftt00h3pic] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.programme-form-photo-actions[b-ftt00h3pic] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* « Photo », « Changer » et « Retirer » : liens textuels (le champ fichier est masqué) */
.programme-form-link-btn[b-ftt00h3pic] {
    padding: 0;
    background: none;
    border: none;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    text-decoration: underline;
    cursor: pointer;
}

/* ===========================
   Conseillers (liste)
   =========================== */

.programme-form-btn-add[b-ftt00h3pic] {
    padding: .1rem .6rem;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    background: #fdecec;
    border: none;
    border-radius: 36px;
    cursor: pointer;
}

.programme-form-btn-add:hover[b-ftt00h3pic] { background: #fbd5d5; }

.programme-form-list-scroll[b-ftt00h3pic] {
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.programme-form-list-item[b-ftt00h3pic] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
}

.programme-form-list-item-fields[b-ftt00h3pic] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: .35rem;
}

.programme-form-list-item-fields > .programme-form-input[b-ftt00h3pic] {
    flex: 1 1 0;
    min-width: 0;
}

.programme-form-btn-remove[b-ftt00h3pic] {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: .85rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.programme-form-btn-remove:hover[b-ftt00h3pic] {
    background: #fdecec;
    color: #c92a2a;
}

.programme-form-empty-hint[b-ftt00h3pic] {
    margin: 0 0 .35rem;
    font-size: .7rem;
    font-style: italic;
    color: #9ca3af;
}

.programme-form-consultant-photo[b-ftt00h3pic] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    width: 52px;
}

.programme-form-consultant-avatar[b-ftt00h3pic] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .75rem;
    font-weight: 600;
}

.programme-form-consultant-avatar img[b-ftt00h3pic] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 50%;
}

/* ===========================
   Responsive (extras)
   =========================== */

@media (max-width: 480px) {
    .programme-form-identity[b-ftt00h3pic] { flex-direction: column; align-items: stretch; }
    .programme-form-photo[b-ftt00h3pic] { flex-direction: row; width: auto; }
    .programme-form-list-item-fields[b-ftt00h3pic] { flex-direction: column; }
    .programme-form-consultant-photo[b-ftt00h3pic] { flex-direction: row; width: auto; }
}

/* ===========================
   Mobile : extras réduits
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-photo-preview[b-ftt00h3pic] {
        width: 32px;
        height: 32px;
        font-size: .8rem;
    }

    .programme-form-link-btn[b-ftt00h3pic] { font-size: .58rem; }

    .programme-form-btn-add[b-ftt00h3pic] {
        padding: .05rem .4rem;
        font-size: .58rem;
    }

    .programme-form-list-scroll[b-ftt00h3pic] { max-height: 110px; }

    .programme-form-btn-remove[b-ftt00h3pic] {
        width: 16px;
        height: 16px;
        font-size: .7rem;
    }

    .programme-form-empty-hint[b-ftt00h3pic] { font-size: .58rem; }

    .programme-form-consultant-photo[b-ftt00h3pic] { width: 44px; }

    .programme-form-consultant-avatar[b-ftt00h3pic] {
        width: 26px;
        height: 26px;
        min-width: 26px;
        flex-basis: 26px;
        font-size: .65rem;
    }
}
/* /Components/Layout/Formulaires/FinanceForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-y3c5loyvca] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-y3c5loyvca .15s ease;
}

@keyframes programme-form-fade-in-b-y3c5loyvca {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-y3c5loyvca {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-y3c5loyvca] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-y3c5loyvca .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-y3c5loyvca] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-y3c5loyvca] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-y3c5loyvca] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-y3c5loyvca] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-y3c5loyvca] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-y3c5loyvca] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-y3c5loyvca] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-y3c5loyvca]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-y3c5loyvca] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-y3c5loyvca] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-y3c5loyvca] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-y3c5loyvca] .programme-form-input,
[b-y3c5loyvca] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-y3c5loyvca] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-y3c5loyvca] .programme-form-input:focus,
[b-y3c5loyvca] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-y3c5loyvca] .programme-form-input::placeholder,
[b-y3c5loyvca] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-y3c5loyvca] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-y3c5loyvca] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-y3c5loyvca] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-y3c5loyvca] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-y3c5loyvca] { background: #e5e7eb; }

.programme-form-btn-save[b-y3c5loyvca] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-y3c5loyvca] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-y3c5loyvca] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-y3c5loyvca] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-y3c5loyvca] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-y3c5loyvca] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-y3c5loyvca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-y3c5loyvca] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-y3c5loyvca] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */


@media (max-width: 480px) {
    .programme-form-grid[b-y3c5loyvca] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-y3c5loyvca] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-y3c5loyvca] { padding: 8px; }

    .programme-form-card[b-y3c5loyvca] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-y3c5loyvca] { padding: .3rem .6rem; }
    .programme-form-title[b-y3c5loyvca]  { font-size: .76rem; }
    .programme-form-close[b-y3c5loyvca]  { font-size: 1rem; }

    .programme-form-scroll[b-y3c5loyvca] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-y3c5loyvca] { margin-bottom: 6px; }

    .programme-form-outline-label[b-y3c5loyvca] {
        top: -5px;
        font-size: .56rem;
    }

    [b-y3c5loyvca] .programme-form-input,
    [b-y3c5loyvca] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-y3c5loyvca] { font-size: .66rem; }

    .programme-form-actions[b-y3c5loyvca] { padding: .3rem .6rem; }

    .programme-form-btn[b-y3c5loyvca] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-y3c5loyvca] .validation-message,
    [b-y3c5loyvca] .validation-errors,
    .programme-form-error-inline[b-y3c5loyvca] { font-size: .6rem; }
}
/* /Components/Layout/Formulaires/GroupForm.razor.rz.scp.css */
/* ===========================
   Overlay
   =========================== */

.task-form-overlay[b-9ayenc0zyt] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    animation: task-form-fade-in-b-9ayenc0zyt .15s ease-out;
}

@keyframes task-form-fade-in-b-9ayenc0zyt {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes task-form-pop-in-b-9ayenc0zyt {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte
   =========================== */

.task-form-card[b-9ayenc0zyt] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    max-height: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: task-form-pop-in-b-9ayenc0zyt .15s ease-out;
}

/* ===========================
   En-tête
   =========================== */

.task-form-header[b-9ayenc0zyt] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .7rem;
}

.task-form-title[b-9ayenc0zyt] {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: #111827;
}

.task-form-close[b-9ayenc0zyt] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.task-form-close:hover[b-9ayenc0zyt] { color: #111827; }

/* ===========================
   Corps
   =========================== */

[b-9ayenc0zyt] .task-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.task-form-scroll[b-9ayenc0zyt] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .7rem .1rem;
}

/* ===========================
   Alerte (succès / échec)
   =========================== */

.task-form-alert[b-9ayenc0zyt] {
    padding: .35rem .55rem;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: .7rem;
    line-height: 1.35;
}

.task-form-alert-error[b-9ayenc0zyt] {
    background: rgba(201, 42, 42, .08);
    border: 1px solid rgba(201, 42, 42, .18);
    color: #8a1f1f;
}

.task-form-alert-success[b-9ayenc0zyt] {
    background: rgba(48, 133, 79, .08);
    border: 1px solid rgba(48, 133, 79, .2);
    color: #216b45;
}

/* ===========================
   Champs — label sur le contour
   =========================== */

.task-form-field[b-9ayenc0zyt] {
    position: relative;
    margin-bottom: 6px;
    min-width: 0;
}

.task-form-label[b-9ayenc0zyt] {
    position: absolute;
    top: -5px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .6rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

.task-form-field:focus-within .task-form-label[b-9ayenc0zyt] {
    color: #dc2626;
}

[b-9ayenc0zyt] .task-form-input,
[b-9ayenc0zyt] .task-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .15rem .45rem;
    font-size: .72rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-9ayenc0zyt] .task-form-textarea {
    resize: vertical;
    min-height: 0;
    max-height: 120px;
    line-height: 1.25;
}

[b-9ayenc0zyt] .task-form-input:focus,
[b-9ayenc0zyt] .task-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-9ayenc0zyt] .task-form-input::placeholder,
[b-9ayenc0zyt] .task-form-textarea::placeholder { color: #9ca3af; }

/* Neutraliser la bordure verte de Blazor (valid.modified) */
[b-9ayenc0zyt] .task-form-input.valid.modified,
[b-9ayenc0zyt] .task-form-textarea.valid.modified {
    outline: none;
    border-color: #d1d5db;
}

[b-9ayenc0zyt] .task-form-input.valid.modified:focus,
[b-9ayenc0zyt] .task-form-textarea.valid.modified:focus {
    border-color: #dc2626;
}

/* Champ invalide : anneau rouge */
[b-9ayenc0zyt] .task-form-input.invalid,
[b-9ayenc0zyt] .task-form-textarea.invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-9ayenc0zyt] .task-form-validation {
    display: block;
    margin: .1rem 0 0;
    font-size: .66rem;
    color: #dc2626;
}

/* ===========================
   Sélection d'utilisateurs
   =========================== */

.task-form-users-field[b-9ayenc0zyt] {
    margin-top: 2px;
}

.task-form-users-search[b-9ayenc0zyt] {
    margin-bottom: 4px;
}

.task-form-users-list[b-9ayenc0zyt] {
    max-height: 120px;
    overflow-y: auto;
    border: 1px solid #d1d5db;
    border-radius: 5px;
}

.task-form-user-row[b-9ayenc0zyt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .2rem .45rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    transition: background-color .12s ease;
}

.task-form-user-row:last-child[b-9ayenc0zyt] {
    border-bottom: none;
}

.task-form-user-row:hover[b-9ayenc0zyt] {
    background: #f9fafb;
}

.task-form-user-checkbox[b-9ayenc0zyt] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 13px;
    height: 13px;
    border: 1px solid #c4c7cc;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: background-color .12s ease, border-color .12s ease;
}

.task-form-user-checkbox:checked[b-9ayenc0zyt] {
    background: #ee5b5b;
    border-color: #ee5b5b;
}

.task-form-user-checkbox:checked[b-9ayenc0zyt]::after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: 1px;
    width: 3px;
    height: 6px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.task-form-user-name[b-9ayenc0zyt] {
    font-size: .72rem;
    color: #111827;
}

.task-form-user-groupe[b-9ayenc0zyt] {
    margin-left: auto;
    font-size: .62rem;
    color: #86868b;
}

.task-form-users-empty[b-9ayenc0zyt] {
    margin: 0;
    padding: .4rem;
    font-size: .7rem;
    color: #9ca3af;
    text-align: center;
}

.task-form-users-count[b-9ayenc0zyt] {
    margin: 3px 2px 0;
    font-size: .62rem;
    color: #86868b;
}

/* ===========================
   Actions
   =========================== */

.task-form-actions[b-9ayenc0zyt] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .35rem;
    padding: .3rem .7rem;
    background: #fff;
}

.task-form-btn[b-9ayenc0zyt] {
    padding: .15rem .7rem;
    border-radius: 36px;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.task-form-btn:disabled[b-9ayenc0zyt] {
    opacity: .5;
    cursor: not-allowed;
}

.task-form-btn-cancel[b-9ayenc0zyt] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.task-form-btn-cancel:hover[b-9ayenc0zyt] { background: #e5e7eb; }

.task-form-btn-save[b-9ayenc0zyt] {
    background: #ee5b5b;
    color: #fff;
}

.task-form-btn-save:hover[b-9ayenc0zyt] { background: #dc2626; }
/* /Components/Layout/Formulaires/ImmigrationForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-jhcqs6fd17] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-jhcqs6fd17 .15s ease;
}

@keyframes programme-form-fade-in-b-jhcqs6fd17 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-jhcqs6fd17 {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-jhcqs6fd17] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-jhcqs6fd17 .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-jhcqs6fd17] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-jhcqs6fd17] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-jhcqs6fd17] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-jhcqs6fd17] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-jhcqs6fd17] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-jhcqs6fd17] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-jhcqs6fd17] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-jhcqs6fd17]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-jhcqs6fd17] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-jhcqs6fd17] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-jhcqs6fd17] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-jhcqs6fd17] .programme-form-input,
[b-jhcqs6fd17] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-jhcqs6fd17] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-jhcqs6fd17] .programme-form-input:focus,
[b-jhcqs6fd17] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-jhcqs6fd17] .programme-form-input::placeholder,
[b-jhcqs6fd17] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-jhcqs6fd17] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-jhcqs6fd17] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-jhcqs6fd17] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-jhcqs6fd17] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-jhcqs6fd17] { background: #e5e7eb; }

.programme-form-btn-save[b-jhcqs6fd17] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-jhcqs6fd17] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-jhcqs6fd17] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-jhcqs6fd17] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-jhcqs6fd17] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-jhcqs6fd17] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-jhcqs6fd17] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-jhcqs6fd17] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-jhcqs6fd17] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */


@media (max-width: 480px) {
    .programme-form-grid[b-jhcqs6fd17] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-jhcqs6fd17] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-jhcqs6fd17] { padding: 8px; }

    .programme-form-card[b-jhcqs6fd17] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-jhcqs6fd17] { padding: .3rem .6rem; }
    .programme-form-title[b-jhcqs6fd17]  { font-size: .76rem; }
    .programme-form-close[b-jhcqs6fd17]  { font-size: 1rem; }

    .programme-form-scroll[b-jhcqs6fd17] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-jhcqs6fd17] { margin-bottom: 6px; }

    .programme-form-outline-label[b-jhcqs6fd17] {
        top: -5px;
        font-size: .56rem;
    }

    [b-jhcqs6fd17] .programme-form-input,
    [b-jhcqs6fd17] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-jhcqs6fd17] { font-size: .66rem; }

    .programme-form-actions[b-jhcqs6fd17] { padding: .3rem .6rem; }

    .programme-form-btn[b-jhcqs6fd17] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-jhcqs6fd17] .validation-message,
    [b-jhcqs6fd17] .validation-errors,
    .programme-form-error-inline[b-jhcqs6fd17] { font-size: .6rem; }
}
/* /Components/Layout/Formulaires/InscriptionClient.razor.rz.scp.css */
/* ==========================================================
   FENÊTRE
   --pad : marge intérieure (l'en-tête fixe s'étend jusqu'aux bords)
   --head-h : hauteur estimée de l'en-tête (pour la barre fixe en dessous)
========================================================== */

.auth-overlay[b-qybzz20bw1] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.auth-card[b-qybzz20bw1] {
    --pad: 1rem;
    --head-h: 3.6rem;

    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 340px;
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--pad) .85rem;
    background: var(--panel, #fff);
    color: var(--ink, #1d1d1f);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    font-size: .72rem;
    letter-spacing: -.01em;
}

.auth-card-large[b-qybzz20bw1] { max-width: 400px; }

/* Pas de dégradé en haut et en bas de la fenêtre */
html body .auth-card[b-qybzz20bw1],
html body .auth-card[data-fy][b-qybzz20bw1],
html body .auth-card[data-fx][b-qybzz20bw1] {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}


/* ---------- En-tête fixe : titre, sous-titre et bouton fermer ---------- */

.auth-card .auth-close[b-qybzz20bw1] {
    position: sticky;
    top: .6rem;
    z-index: 4;
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 0 -24px auto;          /* se superpose à l'en-tête, à droite */
    border: 0;
    border-radius: 50%;
    background: var(--alt, #f5f5f7);
    color: var(--ink, #1d1d1f);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}

.auth-close:hover[b-qybzz20bw1] { color: var(--accent, #b01e1e); }
.auth-close:disabled[b-qybzz20bw1] { opacity: .5; cursor: not-allowed; }

.auth-card .auth-head[b-qybzz20bw1] {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 calc(var(--pad) * -1);
    padding: 1rem calc(var(--pad) + 1.6rem) .45rem var(--pad);
    background: var(--panel, #fff);
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, .08));
}

.auth-title[b-qybzz20bw1] {
    margin: 0 0 .1rem;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.auth-sub[b-qybzz20bw1] {
    margin: 0;
    font-size: .68rem;
    color: var(--muted, #6e6e73);
}

.auth-alert[b-qybzz20bw1] {
    margin-top: .6rem;
    padding: .4rem .6rem;
    border-radius: 8px;
    background: #fdecec;
    color: #c92a2a;
    font-size: .66rem;
}


/* ---------- Sections ---------- */

.auth-sec[b-qybzz20bw1] {
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px solid var(--line, rgba(0, 0, 0, .08));
}

/* Barre « Paiement sécurisé / ← Changer de plan » : reste sous l'en-tête */
.auth-card .auth-sec-bar[b-qybzz20bw1] {
    position: sticky;
    top: var(--head-h);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 calc(var(--pad) * -1) .35rem;
    padding: .3rem var(--pad);
    background: var(--panel, #fff);
}

.auth-sec-title[b-qybzz20bw1] {
    margin: 0 0 .35rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent, #b01e1e);
}

.auth-sec-bar .auth-sec-title[b-qybzz20bw1] { margin: 0; }


/* ---------- Champs ---------- */

.auth-field[b-qybzz20bw1] { margin-bottom: .45rem; min-width: 0; }
.auth-sec .auth-field:last-child[b-qybzz20bw1] { margin-bottom: 0; }

.auth-row[b-qybzz20bw1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.auth-row .auth-field[b-qybzz20bw1] { margin-bottom: 0; }
.auth-field + .auth-row[b-qybzz20bw1] { margin-top: .45rem; }

.auth-label[b-qybzz20bw1] {
    display: block;
    margin-bottom: .15rem;
    font-size: .62rem;
    font-weight: 600;
    color: var(--ink, #1d1d1f);
}

.auth-opt[b-qybzz20bw1] { font-weight: 400; color: var(--muted, #6e6e73); }

.auth-input[b-qybzz20bw1] {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
    padding: 0 .55rem;
    font: inherit;
    font-size: .72rem;
    color: var(--ink, #1d1d1f);
    background: var(--alt, #f5f5f7);
    border: 1px solid var(--line, rgba(0, 0, 0, .1));
    border-radius: 8px;
    transition: border-color .15s ease, background-color .15s ease;
}

.auth-input:focus[b-qybzz20bw1] {
    outline: none;
    background: var(--panel, #fff);
    border-color: var(--accent, #b01e1e);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, .12);
}

.auth-input:disabled[b-qybzz20bw1] { opacity: .65; }


/* ---------- Choix du plan ---------- */

.auth-plans[b-qybzz20bw1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem;
    margin-bottom: .45rem;
}

.auth-plan[b-qybzz20bw1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: .3rem .55rem;
    background: var(--alt, #f5f5f7);
    border: 1.5px solid transparent;
    border-radius: 9px;
    color: var(--ink, #1d1d1f);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.auth-plan:hover[b-qybzz20bw1] { border-color: var(--accent, #b01e1e); }

.auth-plan.active[b-qybzz20bw1] {
    border-color: var(--accent, #b01e1e);
    background: var(--soft, #fdecec);
}

.auth-plan:disabled[b-qybzz20bw1] { opacity: .65; cursor: not-allowed; }

.auth-plan-nom[b-qybzz20bw1] { font-size: .7rem; font-weight: 600; }
.auth-plan-prix[b-qybzz20bw1] { font-size: .62rem; color: var(--accent, #b01e1e); }

.auth-renouv[b-qybzz20bw1] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .5rem;
    font-size: .64rem;
    font-weight: 600;
    color: var(--ink, #1d1d1f);
    cursor: pointer;
}

.auth-renouv input[b-qybzz20bw1] {
    margin: 0;
    accent-color: var(--accent, #b01e1e);
    cursor: pointer;
}

.auth-renouv input:disabled[b-qybzz20bw1] { cursor: not-allowed; }


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

.auth-btn[b-qybzz20bw1] {
    width: 100%;
    height: 30px;
    margin-top: .65rem;
    border: 0;
    border-radius: 980px;
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}

.auth-btn:active:not(:disabled)[b-qybzz20bw1] { transform: scale(.98); }
.auth-btn:disabled[b-qybzz20bw1] { opacity: .6; cursor: not-allowed; }

.auth-btn-primary[b-qybzz20bw1] { background: var(--accent, #b01e1e); color: #fff; }
.auth-btn-primary:hover:not(:disabled)[b-qybzz20bw1] { background: var(--accent-hover, #8f1717); }

.auth-switch[b-qybzz20bw1] {
    margin: .5rem 0 0;
    font-size: .66rem;
    color: var(--muted, #6e6e73);
    text-align: center;
}

.auth-lien-inline[b-qybzz20bw1] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--accent, #b01e1e);
    cursor: pointer;
}

.auth-lien-inline:hover[b-qybzz20bw1] { text-decoration: underline; }
.auth-lien-inline:disabled[b-qybzz20bw1] { opacity: .5; cursor: not-allowed; text-decoration: none; }

.auth-back[b-qybzz20bw1] { font-size: .66rem; }


/* ---------- Paiement (iframe Stripe) ---------- */

.auth-checkout[b-qybzz20bw1] { min-height: 260px; zoom: .78; }


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 520px) {
    .auth-row[b-qybzz20bw1] { grid-template-columns: 1fr; gap: .45rem; }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .auth-overlay[b-qybzz20bw1] { padding: .5rem; }

    .auth-card[b-qybzz20bw1],
    .auth-card-large[b-qybzz20bw1] {
        --pad: .75rem;
        --head-h: 3.4rem;
        height: auto;
        max-height: 86dvh;
    }

    .auth-card-large[b-qybzz20bw1] { max-width: 300px; }

    .auth-card .auth-head[b-qybzz20bw1] { padding-top: .7rem; }
    .auth-card-large .auth-sec[b-qybzz20bw1] { margin-top: .35rem; padding-top: .3rem; }

    /* Formulaire Stripe réduit (zoom ignoré sur iOS : on utilise scale) */
    .auth-checkout[b-qybzz20bw1] {
        zoom: 1;
        width: 166.7%;               /* 100 / 0.60 */
        max-width: none;
        min-height: 0;
        margin: 0 0 -110% 0;         /* à ajuster : plus négatif = moins de vide en bas */
        transform: scale(.60);
        transform-origin: top left;
    }
}
/* /Components/Layout/Formulaires/InstallationVilleForm.razor.rz.scp.css */
/* ===========================
   Overlay
   =========================== */

.ivf-overlay[b-8b3fk729hu] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: ivf-fade-in-b-8b3fk729hu .15s ease-out;
}

@keyframes ivf-fade-in-b-8b3fk729hu {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ivf-pop-in-b-8b3fk729hu {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte : hauteur = contenu de l'onglet actif (plafonnée à l'écran)
   =========================== */

.ivf-card[b-8b3fk729hu] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    height: auto;
    max-height: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    animation: ivf-pop-in-b-8b3fk729hu .15s ease-out;
}

/* Le <form> ne crée pas de boîte : ses blocs deviennent les enfants flex de la carte.
   (aussi appliqué en style inline dans le Razor, au cas où le CSS est isolé) */
.ivf-body-wrapper[b-8b3fk729hu] {
    display: contents;
}

/* ===========================
   En-tête
   =========================== */

.ivf-header[b-8b3fk729hu] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .7rem;
}

.ivf-header-text[b-8b3fk729hu] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ivf-title[b-8b3fk729hu] {
    margin: .4rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.ivf-subtitle[b-8b3fk729hu] {
    font-size: .64rem;
    color: #86868b;
    line-height: 1.2;
}

.ivf-close[b-8b3fk729hu] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.ivf-close:hover[b-8b3fk729hu] { color: #111827; }

/* ===========================
   Section Identité (en haut, défile si trop longue)
   =========================== */

.ivf-identite[b-8b3fk729hu] {
    flex: 0 0 auto;
    max-height: 34vh;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .7rem .1rem;
    border-bottom: 1px solid #e5e7eb;
}

/* ===========================
   Onglets
   =========================== */

.ivf-tabs[b-8b3fk729hu] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem;
    padding: .25rem .7rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ivf-tabs[b-8b3fk729hu]::-webkit-scrollbar {
    display: none;
}

.ivf-tab-btn[b-8b3fk729hu] {
    flex-shrink: 0;
    padding: .18rem .6rem;
    border: none;
    background: transparent;
    border-radius: 36px;
    cursor: pointer;
    font-size: .66rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.ivf-tab-btn:hover[b-8b3fk729hu] {
    color: #111827;
    background: rgba(255, 255, 255, .8);
}

.ivf-tab-btn.active[b-8b3fk729hu] {
    background: #fff;
    color: #dc2626;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* ===========================
   Contenu de l'onglet actif
   =========================== */

/* Hauteur = contenu de l'onglet ; ne défile que si la carte atteint la hauteur de l'écran */
.ivf-scroll[b-8b3fk729hu] {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .7rem .1rem;
    background: #fff;
}

.ivf-section[b-8b3fk729hu] {
    animation: ivf-fade-in-b-8b3fk729hu .2s ease;
}

/* ===========================
   Grille 3 colonnes égales
   =========================== */

.ivf-grid-2col[b-8b3fk729hu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 0 6px;
    align-items: start;
}

.ivf-field-full[b-8b3fk729hu],
.ivf-outline-full[b-8b3fk729hu] {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .ivf-grid-2col[b-8b3fk729hu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ivf-grid-2col[b-8b3fk729hu] {
        grid-template-columns: 1fr;
    }

    .ivf-identite[b-8b3fk729hu] {
        max-height: 40vh;
    }
}

/* ===========================
   Champs — libellé sur le contour
   =========================== */

.ivf-outline[b-8b3fk729hu] {
    position: relative;
    margin-bottom: 6px;
    min-width: 0;
}

.ivf-outline-label[b-8b3fk729hu] {
    position: absolute;
    top: -5px;
    left: 7px;
    max-width: calc(100% - 14px);
    padding: 0 3px;
    background: #fff;
    font-size: .6rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 1;
}

.ivf-outline:focus-within .ivf-outline-label[b-8b3fk729hu] {
    color: #dc2626;
}

.ivf-required-mark[b-8b3fk729hu] {
    color: #dc2626;
    margin-left: 2px;
    font-weight: 700;
}

.ivf-input[b-8b3fk729hu],
.ivf-textarea[b-8b3fk729hu] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .15rem .45rem;
    font-size: .72rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ivf-textarea[b-8b3fk729hu] {
    resize: vertical;
    min-height: 0;
    max-height: 120px;
    line-height: 1.25;
}

.ivf-input:focus[b-8b3fk729hu],
.ivf-textarea:focus[b-8b3fk729hu] {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

.ivf-input[b-8b3fk729hu]::placeholder,
.ivf-textarea[b-8b3fk729hu]::placeholder {
    color: #9ca3af;
}

.ivf-card select.ivf-input[b-8b3fk729hu] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 1.4rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%236e6e73' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .45rem center;
    background-size: 8px 6px;
}

/* ===========================
   Actions
   =========================== */

.ivf-actions[b-8b3fk729hu] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    padding: .3rem .7rem;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

.ivf-btn[b-8b3fk729hu] {
    padding: .15rem .7rem;
    border-radius: 36px;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.ivf-btn:disabled[b-8b3fk729hu] {
    opacity: .5;
    cursor: not-allowed;
}

.ivf-btn-cancel[b-8b3fk729hu] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.ivf-btn-cancel:hover[b-8b3fk729hu] { background: #e5e7eb; }

.ivf-btn-save[b-8b3fk729hu] {
    background: #ee5b5b;
    color: #fff;
}

.ivf-btn-save:hover[b-8b3fk729hu] { background: #dc2626; }

/* ===========================
   Champs invalides
   =========================== */

.ivf-input.invalid[b-8b3fk729hu],
.ivf-textarea.invalid[b-8b3fk729hu] {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

.ivf-validation-msg[b-8b3fk729hu] {
    display: block;
    margin-top: .1rem;
    font-size: .66rem;
    color: #dc2626;
}

/* ===========================
   Mobile : formulaire réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .ivf-overlay[b-8b3fk729hu] {
        padding: 8px;
    }

    .ivf-card[b-8b3fk729hu] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .ivf-header[b-8b3fk729hu] { padding: .25rem .6rem; }

    .ivf-title[b-8b3fk729hu] {
        margin: .25rem 0;
        font-size: .8rem;
    }

    .ivf-subtitle[b-8b3fk729hu] { font-size: .56rem; }
    .ivf-close[b-8b3fk729hu]    { font-size: 1rem; }

    .ivf-identite[b-8b3fk729hu] {
        max-height: 30dvh;
        padding: .4rem .6rem .05rem;
    }

    .ivf-tabs[b-8b3fk729hu] {
        padding: .2rem .6rem;
        gap: .2rem;
    }

    .ivf-tab-btn[b-8b3fk729hu] {
        padding: .14rem .5rem;
        font-size: .58rem;
    }

    .ivf-scroll[b-8b3fk729hu] { padding: .4rem .6rem .05rem; }

    .ivf-outline[b-8b3fk729hu] { margin-bottom: 5px; }

    .ivf-outline-label[b-8b3fk729hu] {
        top: -5px;
        font-size: .54rem;
    }

    .ivf-input[b-8b3fk729hu],
    .ivf-textarea[b-8b3fk729hu] {
        padding: .12rem .4rem;
        font-size: .64rem;
    }

    .ivf-textarea[b-8b3fk729hu] { max-height: 80px; }

    .ivf-actions[b-8b3fk729hu] { padding: .25rem .6rem; }

    .ivf-btn[b-8b3fk729hu] {
        padding: .12rem .6rem;
        font-size: .62rem;
    }

    .ivf-validation-msg[b-8b3fk729hu] { font-size: .58rem; }
}
/* /Components/Layout/Formulaires/IntegrationVilleForm.razor.rz.scp.css */
/* ===========================
   Overlay
   =========================== */

.ivf-overlay[b-x49vci66ix] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: ivf-fade-in-b-x49vci66ix .15s ease-out;
}

@keyframes ivf-fade-in-b-x49vci66ix {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ivf-pop-in-b-x49vci66ix {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte : hauteur = contenu de l'onglet actif (plafonnée à l'écran)
   =========================== */

.ivf-card[b-x49vci66ix] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    height: auto;
    max-height: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    animation: ivf-pop-in-b-x49vci66ix .15s ease-out;
}

/* Le <form> ne crée pas de boîte : ses blocs deviennent les enfants flex de la carte.
   (aussi appliqué en style inline dans le Razor, au cas où le CSS est isolé) */
.ivf-body-wrapper[b-x49vci66ix] {
    display: contents;
}

/* ===========================
   En-tête
   =========================== */

.ivf-header[b-x49vci66ix] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .7rem;
}

.ivf-header-text[b-x49vci66ix] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ivf-title[b-x49vci66ix] {
    margin: .4rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.ivf-subtitle[b-x49vci66ix] {
    font-size: .64rem;
    color: #86868b;
    line-height: 1.2;
}

.ivf-close[b-x49vci66ix] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.ivf-close:hover[b-x49vci66ix] { color: #111827; }

/* ===========================
   Section Identité (en haut, défile si trop longue)
   =========================== */

.ivf-identite[b-x49vci66ix] {
    flex: 0 0 auto;
    max-height: 34vh;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .7rem .1rem;
    border-bottom: 1px solid #e5e7eb;
}

/* ===========================
   Onglets
   =========================== */

.ivf-tabs[b-x49vci66ix] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem;
    padding: .25rem .7rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ivf-tabs[b-x49vci66ix]::-webkit-scrollbar {
    display: none;
}

.ivf-tab-btn[b-x49vci66ix] {
    flex-shrink: 0;
    padding: .18rem .6rem;
    border: none;
    background: transparent;
    border-radius: 36px;
    cursor: pointer;
    font-size: .66rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.ivf-tab-btn:hover[b-x49vci66ix] {
    color: #111827;
    background: rgba(255, 255, 255, .8);
}

.ivf-tab-btn.active[b-x49vci66ix] {
    background: #fff;
    color: #dc2626;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* ===========================
   Contenu de l'onglet actif
   =========================== */

/* Hauteur = contenu de l'onglet ; ne défile que si la carte atteint la hauteur de l'écran */
.ivf-scroll[b-x49vci66ix] {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .7rem .1rem;
    background: #fff;
}

.ivf-section[b-x49vci66ix] {
    animation: ivf-fade-in-b-x49vci66ix .2s ease;
}

/* ===========================
   Grille 3 colonnes égales
   =========================== */

.ivf-grid-2col[b-x49vci66ix] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 0 6px;
    align-items: start;
}

.ivf-field-full[b-x49vci66ix],
.ivf-outline-full[b-x49vci66ix] {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .ivf-grid-2col[b-x49vci66ix] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ivf-grid-2col[b-x49vci66ix] {
        grid-template-columns: 1fr;
    }

    .ivf-identite[b-x49vci66ix] {
        max-height: 40vh;
    }
}

/* ===========================
   Champs — libellé sur le contour
   =========================== */

.ivf-outline[b-x49vci66ix] {
    position: relative;
    margin-bottom: 6px;
    min-width: 0;
}

.ivf-outline-label[b-x49vci66ix] {
    position: absolute;
    top: -5px;
    left: 7px;
    max-width: calc(100% - 14px);
    padding: 0 3px;
    background: #fff;
    font-size: .6rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 1;
}

.ivf-outline:focus-within .ivf-outline-label[b-x49vci66ix] {
    color: #dc2626;
}

.ivf-required-mark[b-x49vci66ix] {
    color: #dc2626;
    margin-left: 2px;
    font-weight: 700;
}

.ivf-input[b-x49vci66ix],
.ivf-textarea[b-x49vci66ix] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .15rem .45rem;
    font-size: .72rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ivf-textarea[b-x49vci66ix] {
    resize: vertical;
    min-height: 0;
    max-height: 120px;
    line-height: 1.25;
}

.ivf-input:focus[b-x49vci66ix],
.ivf-textarea:focus[b-x49vci66ix] {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

.ivf-input[b-x49vci66ix]::placeholder,
.ivf-textarea[b-x49vci66ix]::placeholder {
    color: #9ca3af;
}

.ivf-card select.ivf-input[b-x49vci66ix] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 1.4rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%236e6e73' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .45rem center;
    background-size: 8px 6px;
}

/* ===========================
   Actions
   =========================== */

.ivf-actions[b-x49vci66ix] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    padding: .3rem .7rem;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

.ivf-btn[b-x49vci66ix] {
    padding: .15rem .7rem;
    border-radius: 36px;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.ivf-btn:disabled[b-x49vci66ix] {
    opacity: .5;
    cursor: not-allowed;
}

.ivf-btn-cancel[b-x49vci66ix] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.ivf-btn-cancel:hover[b-x49vci66ix] { background: #e5e7eb; }

.ivf-btn-save[b-x49vci66ix] {
    background: #ee5b5b;
    color: #fff;
}

.ivf-btn-save:hover[b-x49vci66ix] { background: #dc2626; }

/* ===========================
   Champs invalides
   =========================== */

.ivf-input.invalid[b-x49vci66ix],
.ivf-textarea.invalid[b-x49vci66ix] {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

.ivf-validation-msg[b-x49vci66ix] {
    display: block;
    margin-top: .1rem;
    font-size: .66rem;
    color: #dc2626;
}

/* ===========================
   Mobile : formulaire réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .ivf-overlay[b-x49vci66ix] {
        padding: 8px;
    }

    .ivf-card[b-x49vci66ix] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .ivf-header[b-x49vci66ix] { padding: .25rem .6rem; }

    .ivf-title[b-x49vci66ix] {
        margin: .25rem 0;
        font-size: .8rem;
    }

    .ivf-subtitle[b-x49vci66ix] { font-size: .56rem; }
    .ivf-close[b-x49vci66ix]    { font-size: 1rem; }

    .ivf-identite[b-x49vci66ix] {
        max-height: 30dvh;
        padding: .4rem .6rem .05rem;
    }

    .ivf-tabs[b-x49vci66ix] {
        padding: .2rem .6rem;
        gap: .2rem;
    }

    .ivf-tab-btn[b-x49vci66ix] {
        padding: .14rem .5rem;
        font-size: .58rem;
    }

    .ivf-scroll[b-x49vci66ix] { padding: .4rem .6rem .05rem; }

    .ivf-outline[b-x49vci66ix] { margin-bottom: 5px; }

    .ivf-outline-label[b-x49vci66ix] {
        top: -5px;
        font-size: .54rem;
    }

    .ivf-input[b-x49vci66ix],
    .ivf-textarea[b-x49vci66ix] {
        padding: .12rem .4rem;
        font-size: .64rem;
    }

    .ivf-textarea[b-x49vci66ix] { max-height: 80px; }

    .ivf-actions[b-x49vci66ix] { padding: .25rem .6rem; }

    .ivf-btn[b-x49vci66ix] {
        padding: .12rem .6rem;
        font-size: .62rem;
    }

    .ivf-validation-msg[b-x49vci66ix] { font-size: .58rem; }
}
/* /Components/Layout/Formulaires/JuridiqueDetailsForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-75v58ncj1p] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-75v58ncj1p .15s ease;
}

@keyframes programme-form-fade-in-b-75v58ncj1p {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-75v58ncj1p {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-75v58ncj1p] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-75v58ncj1p .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-75v58ncj1p] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-75v58ncj1p] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-75v58ncj1p] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-75v58ncj1p] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-75v58ncj1p] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-75v58ncj1p] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-75v58ncj1p] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-75v58ncj1p]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-75v58ncj1p] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-75v58ncj1p] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-75v58ncj1p] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-75v58ncj1p] .programme-form-input,
[b-75v58ncj1p] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-75v58ncj1p] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-75v58ncj1p] .programme-form-input:focus,
[b-75v58ncj1p] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-75v58ncj1p] .programme-form-input::placeholder,
[b-75v58ncj1p] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-75v58ncj1p] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-75v58ncj1p] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-75v58ncj1p] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-75v58ncj1p] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-75v58ncj1p] { background: #e5e7eb; }

.programme-form-btn-save[b-75v58ncj1p] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-75v58ncj1p] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-75v58ncj1p] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-75v58ncj1p] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-75v58ncj1p] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-75v58ncj1p] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-75v58ncj1p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-75v58ncj1p] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-75v58ncj1p] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */

@media (max-width: 640px) {
    .programme-form-grid[b-75v58ncj1p] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .programme-form-grid[b-75v58ncj1p] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-75v58ncj1p] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-75v58ncj1p] { padding: 8px; }

    .programme-form-card[b-75v58ncj1p] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-75v58ncj1p] { padding: .3rem .6rem; }
    .programme-form-title[b-75v58ncj1p]  { font-size: .76rem; }
    .programme-form-close[b-75v58ncj1p]  { font-size: 1rem; }

    .programme-form-scroll[b-75v58ncj1p] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-75v58ncj1p] { margin-bottom: 6px; }

    .programme-form-outline-label[b-75v58ncj1p] {
        top: -5px;
        font-size: .56rem;
    }

    [b-75v58ncj1p] .programme-form-input,
    [b-75v58ncj1p] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-75v58ncj1p] { font-size: .66rem; }

    .programme-form-actions[b-75v58ncj1p] { padding: .3rem .6rem; }

    .programme-form-btn[b-75v58ncj1p] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-75v58ncj1p] .validation-message,
    [b-75v58ncj1p] .validation-errors,
    .programme-form-error-inline[b-75v58ncj1p] { font-size: .6rem; }
}

/* ==== EXTRAS (identité, conseillers) ==== */

/* ===========================
   Identité : photo à gauche, champs à droite
   =========================== */

.programme-form-identity[b-75v58ncj1p] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.programme-form-identity > .programme-form-grid[b-75v58ncj1p] { flex: 1; min-width: 0; }

.programme-form-photo[b-75v58ncj1p] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    width: 64px;
}

.programme-form-photo-preview[b-75v58ncj1p] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .95rem;
    font-weight: 600;
}

.programme-form-photo-preview img[b-75v58ncj1p] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.programme-form-photo-actions[b-75v58ncj1p] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* « Photo », « Changer » et « Retirer » : liens textuels (le champ fichier est masqué) */
.programme-form-link-btn[b-75v58ncj1p] {
    padding: 0;
    background: none;
    border: none;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    text-decoration: underline;
    cursor: pointer;
}

/* ===========================
   Conseillers (liste)
   =========================== */

.programme-form-btn-add[b-75v58ncj1p] {
    padding: .1rem .6rem;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    background: #fdecec;
    border: none;
    border-radius: 36px;
    cursor: pointer;
}

.programme-form-btn-add:hover[b-75v58ncj1p] { background: #fbd5d5; }

.programme-form-list-scroll[b-75v58ncj1p] {
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.programme-form-list-item[b-75v58ncj1p] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
}

.programme-form-list-item-fields[b-75v58ncj1p] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: .35rem;
}

.programme-form-list-item-fields > .programme-form-input[b-75v58ncj1p] {
    flex: 1 1 0;
    min-width: 0;
}

.programme-form-btn-remove[b-75v58ncj1p] {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: .85rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.programme-form-btn-remove:hover[b-75v58ncj1p] {
    background: #fdecec;
    color: #c92a2a;
}

.programme-form-empty-hint[b-75v58ncj1p] {
    margin: 0 0 .35rem;
    font-size: .7rem;
    font-style: italic;
    color: #9ca3af;
}

.programme-form-consultant-photo[b-75v58ncj1p] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    width: 52px;
}

.programme-form-consultant-avatar[b-75v58ncj1p] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .75rem;
    font-weight: 600;
}

.programme-form-consultant-avatar img[b-75v58ncj1p] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 50%;
}

/* ===========================
   Responsive (extras)
   =========================== */

@media (max-width: 480px) {
    .programme-form-identity[b-75v58ncj1p] { flex-direction: column; align-items: stretch; }
    .programme-form-photo[b-75v58ncj1p] { flex-direction: row; width: auto; }
    .programme-form-list-item-fields[b-75v58ncj1p] { flex-direction: column; }
    .programme-form-consultant-photo[b-75v58ncj1p] { flex-direction: row; width: auto; }
}

/* ===========================
   Mobile : extras réduits
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-photo-preview[b-75v58ncj1p] {
        width: 32px;
        height: 32px;
        font-size: .8rem;
    }

    .programme-form-link-btn[b-75v58ncj1p] { font-size: .58rem; }

    .programme-form-btn-add[b-75v58ncj1p] {
        padding: .05rem .4rem;
        font-size: .58rem;
    }

    .programme-form-list-scroll[b-75v58ncj1p] { max-height: 110px; }

    .programme-form-btn-remove[b-75v58ncj1p] {
        width: 16px;
        height: 16px;
        font-size: .7rem;
    }

    .programme-form-empty-hint[b-75v58ncj1p] { font-size: .58rem; }

    .programme-form-consultant-photo[b-75v58ncj1p] { width: 44px; }

    .programme-form-consultant-avatar[b-75v58ncj1p] {
        width: 26px;
        height: 26px;
        min-width: 26px;
        flex-basis: 26px;
        font-size: .65rem;
    }
}
/* /Components/Layout/Formulaires/JuridiqueForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-zh5s842jnj] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-zh5s842jnj .15s ease;
}

@keyframes programme-form-fade-in-b-zh5s842jnj {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-zh5s842jnj {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-zh5s842jnj] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-zh5s842jnj .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-zh5s842jnj] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-zh5s842jnj] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-zh5s842jnj] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-zh5s842jnj] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-zh5s842jnj] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-zh5s842jnj] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-zh5s842jnj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-zh5s842jnj]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-zh5s842jnj] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-zh5s842jnj] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-zh5s842jnj] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-zh5s842jnj] .programme-form-input,
[b-zh5s842jnj] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-zh5s842jnj] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-zh5s842jnj] .programme-form-input:focus,
[b-zh5s842jnj] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-zh5s842jnj] .programme-form-input::placeholder,
[b-zh5s842jnj] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-zh5s842jnj] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-zh5s842jnj] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-zh5s842jnj] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-zh5s842jnj] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-zh5s842jnj] { background: #e5e7eb; }

.programme-form-btn-save[b-zh5s842jnj] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-zh5s842jnj] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-zh5s842jnj] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-zh5s842jnj] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-zh5s842jnj] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-zh5s842jnj] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-zh5s842jnj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-zh5s842jnj] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-zh5s842jnj] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */


@media (max-width: 480px) {
    .programme-form-grid[b-zh5s842jnj] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-zh5s842jnj] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-zh5s842jnj] { padding: 8px; }

    .programme-form-card[b-zh5s842jnj] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-zh5s842jnj] { padding: .3rem .6rem; }
    .programme-form-title[b-zh5s842jnj]  { font-size: .76rem; }
    .programme-form-close[b-zh5s842jnj]  { font-size: 1rem; }

    .programme-form-scroll[b-zh5s842jnj] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-zh5s842jnj] { margin-bottom: 6px; }

    .programme-form-outline-label[b-zh5s842jnj] {
        top: -5px;
        font-size: .56rem;
    }

    [b-zh5s842jnj] .programme-form-input,
    [b-zh5s842jnj] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-zh5s842jnj] { font-size: .66rem; }

    .programme-form-actions[b-zh5s842jnj] { padding: .3rem .6rem; }

    .programme-form-btn[b-zh5s842jnj] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-zh5s842jnj] .validation-message,
    [b-zh5s842jnj] .validation-errors,
    .programme-form-error-inline[b-zh5s842jnj] { font-size: .6rem; }
}
/* /Components/Layout/Formulaires/LogementDetailsForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-el3iqdxlur] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-el3iqdxlur .15s ease;
}

@keyframes programme-form-fade-in-b-el3iqdxlur {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-el3iqdxlur {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-el3iqdxlur] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-el3iqdxlur .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-el3iqdxlur] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-el3iqdxlur] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-el3iqdxlur] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-el3iqdxlur] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-el3iqdxlur] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-el3iqdxlur] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-el3iqdxlur] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-el3iqdxlur]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-el3iqdxlur] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-el3iqdxlur] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-el3iqdxlur] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-el3iqdxlur] .programme-form-input,
[b-el3iqdxlur] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-el3iqdxlur] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-el3iqdxlur] .programme-form-input:focus,
[b-el3iqdxlur] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-el3iqdxlur] .programme-form-input::placeholder,
[b-el3iqdxlur] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-el3iqdxlur] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-el3iqdxlur] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-el3iqdxlur] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-el3iqdxlur] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-el3iqdxlur] { background: #e5e7eb; }

.programme-form-btn-save[b-el3iqdxlur] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-el3iqdxlur] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-el3iqdxlur] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-el3iqdxlur] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-el3iqdxlur] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-el3iqdxlur] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-el3iqdxlur] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-el3iqdxlur] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-el3iqdxlur] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */

@media (max-width: 640px) {
    .programme-form-grid[b-el3iqdxlur] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .programme-form-grid[b-el3iqdxlur] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-el3iqdxlur] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-el3iqdxlur] { padding: 8px; }

    .programme-form-card[b-el3iqdxlur] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-el3iqdxlur] { padding: .3rem .6rem; }
    .programme-form-title[b-el3iqdxlur]  { font-size: .76rem; }
    .programme-form-close[b-el3iqdxlur]  { font-size: 1rem; }

    .programme-form-scroll[b-el3iqdxlur] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-el3iqdxlur] { margin-bottom: 6px; }

    .programme-form-outline-label[b-el3iqdxlur] {
        top: -5px;
        font-size: .56rem;
    }

    [b-el3iqdxlur] .programme-form-input,
    [b-el3iqdxlur] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-el3iqdxlur] { font-size: .66rem; }

    .programme-form-actions[b-el3iqdxlur] { padding: .3rem .6rem; }

    .programme-form-btn[b-el3iqdxlur] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-el3iqdxlur] .validation-message,
    [b-el3iqdxlur] .validation-errors,
    .programme-form-error-inline[b-el3iqdxlur] { font-size: .6rem; }
}

/* ==== EXTRAS (identité, conseillers) ==== */

/* ===========================
   Identité : photo à gauche, champs à droite
   =========================== */

.programme-form-identity[b-el3iqdxlur] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.programme-form-identity > .programme-form-grid[b-el3iqdxlur] { flex: 1; min-width: 0; }

.programme-form-photo[b-el3iqdxlur] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    width: 64px;
}

.programme-form-photo-preview[b-el3iqdxlur] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .95rem;
    font-weight: 600;
}

.programme-form-photo-preview img[b-el3iqdxlur] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.programme-form-photo-actions[b-el3iqdxlur] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* « Photo », « Changer » et « Retirer » : liens textuels (le champ fichier est masqué) */
.programme-form-link-btn[b-el3iqdxlur] {
    padding: 0;
    background: none;
    border: none;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    text-decoration: underline;
    cursor: pointer;
}

/* ===========================
   Conseillers (liste)
   =========================== */

.programme-form-btn-add[b-el3iqdxlur] {
    padding: .1rem .6rem;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    background: #fdecec;
    border: none;
    border-radius: 36px;
    cursor: pointer;
}

.programme-form-btn-add:hover[b-el3iqdxlur] { background: #fbd5d5; }

.programme-form-list-scroll[b-el3iqdxlur] {
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.programme-form-list-item[b-el3iqdxlur] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
}

.programme-form-list-item-fields[b-el3iqdxlur] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: .35rem;
}

.programme-form-list-item-fields > .programme-form-input[b-el3iqdxlur] {
    flex: 1 1 0;
    min-width: 0;
}

.programme-form-btn-remove[b-el3iqdxlur] {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: .85rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.programme-form-btn-remove:hover[b-el3iqdxlur] {
    background: #fdecec;
    color: #c92a2a;
}

.programme-form-empty-hint[b-el3iqdxlur] {
    margin: 0 0 .35rem;
    font-size: .7rem;
    font-style: italic;
    color: #9ca3af;
}

.programme-form-consultant-photo[b-el3iqdxlur] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    width: 52px;
}

.programme-form-consultant-avatar[b-el3iqdxlur] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .75rem;
    font-weight: 600;
}

.programme-form-consultant-avatar img[b-el3iqdxlur] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 50%;
}

/* ===========================
   Responsive (extras)
   =========================== */

@media (max-width: 480px) {
    .programme-form-identity[b-el3iqdxlur] { flex-direction: column; align-items: stretch; }
    .programme-form-photo[b-el3iqdxlur] { flex-direction: row; width: auto; }
    .programme-form-list-item-fields[b-el3iqdxlur] { flex-direction: column; }
    .programme-form-consultant-photo[b-el3iqdxlur] { flex-direction: row; width: auto; }
}

/* ===========================
   Mobile : extras réduits
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-photo-preview[b-el3iqdxlur] {
        width: 32px;
        height: 32px;
        font-size: .8rem;
    }

    .programme-form-link-btn[b-el3iqdxlur] { font-size: .58rem; }

    .programme-form-btn-add[b-el3iqdxlur] {
        padding: .05rem .4rem;
        font-size: .58rem;
    }

    .programme-form-list-scroll[b-el3iqdxlur] { max-height: 110px; }

    .programme-form-btn-remove[b-el3iqdxlur] {
        width: 16px;
        height: 16px;
        font-size: .7rem;
    }

    .programme-form-empty-hint[b-el3iqdxlur] { font-size: .58rem; }

    .programme-form-consultant-photo[b-el3iqdxlur] { width: 44px; }

    .programme-form-consultant-avatar[b-el3iqdxlur] {
        width: 26px;
        height: 26px;
        min-width: 26px;
        flex-basis: 26px;
        font-size: .65rem;
    }
}
/* /Components/Layout/Formulaires/LogementForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-9ijw6u11jg] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-9ijw6u11jg .15s ease;
}

@keyframes programme-form-fade-in-b-9ijw6u11jg {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-9ijw6u11jg {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-9ijw6u11jg] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-9ijw6u11jg .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-9ijw6u11jg] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-9ijw6u11jg] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-9ijw6u11jg] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-9ijw6u11jg] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-9ijw6u11jg] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-9ijw6u11jg] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-9ijw6u11jg] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-9ijw6u11jg]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-9ijw6u11jg] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-9ijw6u11jg] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-9ijw6u11jg] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-9ijw6u11jg] .programme-form-input,
[b-9ijw6u11jg] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-9ijw6u11jg] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-9ijw6u11jg] .programme-form-input:focus,
[b-9ijw6u11jg] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-9ijw6u11jg] .programme-form-input::placeholder,
[b-9ijw6u11jg] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-9ijw6u11jg] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-9ijw6u11jg] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-9ijw6u11jg] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-9ijw6u11jg] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-9ijw6u11jg] { background: #e5e7eb; }

.programme-form-btn-save[b-9ijw6u11jg] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-9ijw6u11jg] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-9ijw6u11jg] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-9ijw6u11jg] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-9ijw6u11jg] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-9ijw6u11jg] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-9ijw6u11jg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-9ijw6u11jg] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-9ijw6u11jg] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */


@media (max-width: 480px) {
    .programme-form-grid[b-9ijw6u11jg] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-9ijw6u11jg] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-9ijw6u11jg] { padding: 8px; }

    .programme-form-card[b-9ijw6u11jg] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-9ijw6u11jg] { padding: .3rem .6rem; }
    .programme-form-title[b-9ijw6u11jg]  { font-size: .76rem; }
    .programme-form-close[b-9ijw6u11jg]  { font-size: 1rem; }

    .programme-form-scroll[b-9ijw6u11jg] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-9ijw6u11jg] { margin-bottom: 6px; }

    .programme-form-outline-label[b-9ijw6u11jg] {
        top: -5px;
        font-size: .56rem;
    }

    [b-9ijw6u11jg] .programme-form-input,
    [b-9ijw6u11jg] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-9ijw6u11jg] { font-size: .66rem; }

    .programme-form-actions[b-9ijw6u11jg] { padding: .3rem .6rem; }

    .programme-form-btn[b-9ijw6u11jg] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-9ijw6u11jg] .validation-message,
    [b-9ijw6u11jg] .validation-errors,
    .programme-form-error-inline[b-9ijw6u11jg] { font-size: .6rem; }
}
/* /Components/Layout/Formulaires/OrganismeForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-24g2uent4y] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-24g2uent4y .15s ease;
}

@keyframes programme-form-fade-in-b-24g2uent4y {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-24g2uent4y {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte
   =========================== */

.programme-form-card[b-24g2uent4y] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-24g2uent4y .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-24g2uent4y] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-24g2uent4y] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-24g2uent4y] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-24g2uent4y] { color: #111827; }

.programme-form-state[b-24g2uent4y] {
    margin: 0;
    padding: .5rem .8rem;
    font-size: .76rem;
    color: #6b7280;
}

.programme-form-error[b-24g2uent4y] { color: #dc2626; }

/* ===========================
   Formulaire + zone qui défile
   =========================== */

[b-24g2uent4y] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-24g2uent4y] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-24g2uent4y] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-24g2uent4y]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-24g2uent4y] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-24g2uent4y] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-24g2uent4y] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-24g2uent4y] .programme-form-input,
[b-24g2uent4y] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-24g2uent4y] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-24g2uent4y] .programme-form-input:focus,
[b-24g2uent4y] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-24g2uent4y] .programme-form-input::placeholder,
[b-24g2uent4y] .programme-form-textarea::placeholder { color: #9ca3af; }

[b-24g2uent4y] select.programme-form-input { cursor: pointer; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-24g2uent4y] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-24g2uent4y] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-24g2uent4y] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-24g2uent4y] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-24g2uent4y] { background: #e5e7eb; }

.programme-form-btn-save[b-24g2uent4y] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-24g2uent4y] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-24g2uent4y] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-24g2uent4y] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-24g2uent4y] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-24g2uent4y] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-24g2uent4y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-24g2uent4y] {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

/* ===========================
   Listes (conditions, documents, liens, statistiques)
   =========================== */

.programme-form-btn-add[b-24g2uent4y] {
    padding: .08rem .5rem;
    font-size: .68rem;
    font-weight: 500;
    color: #c92a2a;
    background: #fdecec;
    border: none;
    border-radius: 36px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.programme-form-btn-add:hover[b-24g2uent4y] { background: #fbd5d5; }

.programme-form-list-scroll[b-24g2uent4y] {
    max-height: 110px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.programme-form-list-item[b-24g2uent4y] {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .25rem;
}

.programme-form-list-item-fields[b-24g2uent4y] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: .3rem;
}

.programme-form-list-item-fields > *[b-24g2uent4y] {
    flex: 1;
    min-width: 0;
}

.programme-form-btn-remove[b-24g2uent4y] {
    flex: none;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: .8rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.programme-form-btn-remove:hover[b-24g2uent4y] {
    background: #fdecec;
    color: #c92a2a;
}

.programme-form-empty-hint[b-24g2uent4y] {
    margin: 0 0 .25rem;
    font-size: .68rem;
    font-style: italic;
    color: #9ca3af;
}

/* ===========================
   Logo
   =========================== */

.programme-form-upload[b-24g2uent4y] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .3rem;
}

.programme-form-upload-preview[b-24g2uent4y] {
    display: block;
    height: 30px;
    max-width: 120px;
    object-fit: contain;
    border-radius: 4px;
}

.programme-form-upload-hint[b-24g2uent4y] {
    font-size: .68rem;
    color: #9ca3af;
}

/* ===========================
   Responsable : photo à gauche, champs à droite
   =========================== */

.programme-form-identity[b-24g2uent4y] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.programme-form-identity > .programme-form-grid[b-24g2uent4y] { flex: 1; min-width: 0; }

.programme-form-photo[b-24g2uent4y] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    width: 72px;
}

.programme-form-photo-preview[b-24g2uent4y] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: 1rem;
    font-weight: 600;
}

.programme-form-photo-preview img[b-24g2uent4y] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.programme-form-photo-actions[b-24g2uent4y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.programme-form-photo-btn[b-24g2uent4y] {
    position: relative;
    overflow: hidden;
}

.programme-form-photo-actions .programme-form-btn[b-24g2uent4y],
.programme-form-upload .programme-form-btn[b-24g2uent4y] {
    padding: .15rem .55rem;
    font-size: .66rem;
}

[b-24g2uent4y] .programme-form-photo-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 760px) {
    .programme-form-grid[b-24g2uent4y] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .programme-form-grid[b-24g2uent4y] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-24g2uent4y] { grid-column: 1 / -1; }
    .programme-form-identity[b-24g2uent4y] { flex-direction: column; align-items: stretch; }
    .programme-form-photo[b-24g2uent4y] { flex-direction: row; width: auto; }
    .programme-form-photo-actions[b-24g2uent4y] { flex-direction: row; }
    .programme-form-list-item-fields[b-24g2uent4y] { flex-direction: column; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-24g2uent4y] { padding: 8px; }

    .programme-form-card[b-24g2uent4y] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-24g2uent4y] { padding: .3rem .6rem; }
    .programme-form-title[b-24g2uent4y]  { font-size: .76rem; }
    .programme-form-close[b-24g2uent4y]  { font-size: 1rem; }

    .programme-form-state[b-24g2uent4y] { font-size: .66rem; padding: .4rem .6rem; }

    .programme-form-scroll[b-24g2uent4y] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-24g2uent4y] { margin-bottom: 6px; }

    .programme-form-outline-label[b-24g2uent4y] {
        top: -5px;
        font-size: .56rem;
    }

    [b-24g2uent4y] .programme-form-input,
    [b-24g2uent4y] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-24g2uent4y] { font-size: .66rem; }

    .programme-form-btn-add[b-24g2uent4y] {
        padding: .05rem .4rem;
        font-size: .58rem;
    }

    .programme-form-list-scroll[b-24g2uent4y] { max-height: 90px; }

    .programme-form-btn-remove[b-24g2uent4y] {
        width: 16px;
        height: 16px;
        font-size: .7rem;
    }

    .programme-form-empty-hint[b-24g2uent4y] { font-size: .58rem; }

    .programme-form-upload-preview[b-24g2uent4y] {
        height: 24px;
        max-width: 100px;
    }

    .programme-form-upload-hint[b-24g2uent4y] { font-size: .58rem; }

    .programme-form-photo-preview[b-24g2uent4y] {
        width: 32px;
        height: 32px;
        font-size: .8rem;
    }

    .programme-form-photo-actions .programme-form-btn[b-24g2uent4y],
    .programme-form-upload .programme-form-btn[b-24g2uent4y] {
        padding: .1rem .45rem;
        font-size: .58rem;
    }

    .programme-form-actions[b-24g2uent4y] { padding: .3rem .6rem; }

    .programme-form-btn[b-24g2uent4y] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-24g2uent4y] .validation-message,
    [b-24g2uent4y] .validation-errors,
    .programme-form-error-inline[b-24g2uent4y] { font-size: .6rem; }
}
/* /Components/Layout/Formulaires/ProgrammeForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-ktazb2f2xt] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000; /* au-dessus des éléments fixes (sticky : 900-1000) */
    animation: programme-form-fade-in-b-ktazb2f2xt .15s ease;
}

@keyframes programme-form-fade-in-b-ktazb2f2xt {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===========================
   Carte : plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-ktazb2f2xt] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-ktazb2f2xt .18s cubic-bezier(.2, .8, .2, 1);
}

@keyframes programme-form-scale-in-b-ktazb2f2xt {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-ktazb2f2xt] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-ktazb2f2xt] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-ktazb2f2xt] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-ktazb2f2xt] { color: #111827; }

.programme-form-state[b-ktazb2f2xt] {
    margin: 0;
    padding: .5rem .8rem;
    font-size: .76rem;
    color: #6b7280;
}

.programme-form-error[b-ktazb2f2xt] { color: #dc2626; }

/* ===========================
   Formulaire + zone qui défile
   =========================== */

[b-ktazb2f2xt] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-ktazb2f2xt] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-ktazb2f2xt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-ktazb2f2xt]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-ktazb2f2xt] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-ktazb2f2xt] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-ktazb2f2xt] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-ktazb2f2xt] .programme-form-input,
[b-ktazb2f2xt] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-ktazb2f2xt] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-ktazb2f2xt] .programme-form-input:focus,
[b-ktazb2f2xt] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-ktazb2f2xt] .programme-form-input::placeholder,
[b-ktazb2f2xt] .programme-form-textarea::placeholder { color: #9ca3af; }

[b-ktazb2f2xt] select.programme-form-input { cursor: pointer; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-ktazb2f2xt] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-ktazb2f2xt] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn-cancel[b-ktazb2f2xt] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-ktazb2f2xt] { background: #e5e7eb; }

.programme-form-btn-save[b-ktazb2f2xt] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-ktazb2f2xt] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-ktazb2f2xt] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-ktazb2f2xt] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-ktazb2f2xt] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-ktazb2f2xt] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-ktazb2f2xt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-ktazb2f2xt] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-ktazb2f2xt] { margin-bottom: 0; }

/* ===========================
   Listes (étapes, documents, liens)
   =========================== */

.programme-form-btn-add[b-ktazb2f2xt] {
    padding: .08rem .5rem;
    font-size: .68rem;
    font-weight: 500;
    color: #c92a2a;
    background: #fdecec;
    border: none;
    border-radius: 36px;
    cursor: pointer;
}

.programme-form-btn-add:hover[b-ktazb2f2xt] { background: #fbd5d5; }

.programme-form-list-scroll[b-ktazb2f2xt] {
    max-height: 110px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.programme-form-list-item[b-ktazb2f2xt] {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .25rem;
}

.programme-form-list-item-fields[b-ktazb2f2xt] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: .3rem;
}

.programme-form-list-item-fields[b-ktazb2f2xt] >  .programme-form-input,
.programme-form-list-item-fields > .programme-form-input[b-ktazb2f2xt],
.programme-form-list-item-fields > .programme-form-textarea[b-ktazb2f2xt] {
    flex: 1 1 0;
    min-width: 0;
}

.programme-form-btn-remove[b-ktazb2f2xt] {
    flex: none;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: .8rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.programme-form-btn-remove:hover[b-ktazb2f2xt] {
    background: #fdecec;
    color: #c92a2a;
}

.programme-form-empty-hint[b-ktazb2f2xt] {
    margin: 0 0 .25rem;
    font-size: .68rem;
    font-style: italic;
    color: #9ca3af;
}

/* ===========================
   Responsable : photo à gauche, champs à droite
   =========================== */

.programme-form-identity[b-ktazb2f2xt] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.programme-form-identity > .programme-form-grid[b-ktazb2f2xt] { flex: 1; min-width: 0; }

.programme-form-photo[b-ktazb2f2xt] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    width: 64px;
}

.programme-form-photo-preview[b-ktazb2f2xt] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .95rem;
    font-weight: 600;
}

.programme-form-photo-preview img[b-ktazb2f2xt] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.programme-form-photo-actions[b-ktazb2f2xt] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* « Photo », « Changer » et « Retirer » : liens textuels (le champ fichier est masqué) */
.programme-form-link-btn[b-ktazb2f2xt] {
    padding: 0;
    background: none;
    border: none;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    text-decoration: underline;
    cursor: pointer;
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 760px) {
    .programme-form-grid[b-ktazb2f2xt] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .programme-form-grid[b-ktazb2f2xt] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-ktazb2f2xt] { grid-column: 1 / -1; }
    .programme-form-identity[b-ktazb2f2xt] { flex-direction: column; align-items: stretch; }
    .programme-form-photo[b-ktazb2f2xt] { flex-direction: row; width: auto; }
    .programme-form-list-item-fields[b-ktazb2f2xt] { flex-direction: column; }
}

/* ===========================
   Mobile : formulaire réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-ktazb2f2xt] {
        padding: 8px;
    }

    .programme-form-card[b-ktazb2f2xt] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-ktazb2f2xt] { padding: .3rem .6rem; }
    .programme-form-title[b-ktazb2f2xt]  { font-size: .76rem; }
    .programme-form-close[b-ktazb2f2xt]  { font-size: 1rem; }

    .programme-form-scroll[b-ktazb2f2xt] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-ktazb2f2xt] { margin-bottom: 6px; }

    .programme-form-outline-label[b-ktazb2f2xt] {
        top: -5px;
        font-size: .56rem;
    }

    [b-ktazb2f2xt] .programme-form-input,
    [b-ktazb2f2xt] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-ktazb2f2xt] { font-size: .66rem; }

    .programme-form-btn-add[b-ktazb2f2xt] {
        padding: .05rem .4rem;
        font-size: .58rem;
    }

    .programme-form-btn-remove[b-ktazb2f2xt] {
        width: 16px;
        height: 16px;
        font-size: .7rem;
    }

    .programme-form-empty-hint[b-ktazb2f2xt] { font-size: .58rem; }

    .programme-form-photo-preview[b-ktazb2f2xt] {
        width: 32px;
        height: 32px;
        font-size: .8rem;
    }

    .programme-form-link-btn[b-ktazb2f2xt] { font-size: .58rem; }

    .programme-form-actions[b-ktazb2f2xt] { padding: .3rem .6rem; }

    .programme-form-btn[b-ktazb2f2xt] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-ktazb2f2xt] .validation-message,
    [b-ktazb2f2xt] .validation-errors,
    .programme-form-error-inline[b-ktazb2f2xt] { font-size: .6rem; }
}
/* /Components/Layout/Formulaires/RechercheEmploiDetailsForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-uurac9qvk7] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-uurac9qvk7 .15s ease;
}

@keyframes programme-form-fade-in-b-uurac9qvk7 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-uurac9qvk7 {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-uurac9qvk7] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-uurac9qvk7 .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-uurac9qvk7] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-uurac9qvk7] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-uurac9qvk7] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-uurac9qvk7] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-uurac9qvk7] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-uurac9qvk7] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-uurac9qvk7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-uurac9qvk7]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-uurac9qvk7] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-uurac9qvk7] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-uurac9qvk7] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-uurac9qvk7] .programme-form-input,
[b-uurac9qvk7] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-uurac9qvk7] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-uurac9qvk7] .programme-form-input:focus,
[b-uurac9qvk7] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-uurac9qvk7] .programme-form-input::placeholder,
[b-uurac9qvk7] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-uurac9qvk7] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-uurac9qvk7] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-uurac9qvk7] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-uurac9qvk7] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-uurac9qvk7] { background: #e5e7eb; }

.programme-form-btn-save[b-uurac9qvk7] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-uurac9qvk7] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-uurac9qvk7] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-uurac9qvk7] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-uurac9qvk7] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-uurac9qvk7] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-uurac9qvk7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-uurac9qvk7] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-uurac9qvk7] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */

@media (max-width: 640px) {
    .programme-form-grid[b-uurac9qvk7] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .programme-form-grid[b-uurac9qvk7] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-uurac9qvk7] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-uurac9qvk7] { padding: 8px; }

    .programme-form-card[b-uurac9qvk7] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-uurac9qvk7] { padding: .3rem .6rem; }
    .programme-form-title[b-uurac9qvk7]  { font-size: .76rem; }
    .programme-form-close[b-uurac9qvk7]  { font-size: 1rem; }

    .programme-form-scroll[b-uurac9qvk7] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-uurac9qvk7] { margin-bottom: 6px; }

    .programme-form-outline-label[b-uurac9qvk7] {
        top: -5px;
        font-size: .56rem;
    }

    [b-uurac9qvk7] .programme-form-input,
    [b-uurac9qvk7] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-uurac9qvk7] { font-size: .66rem; }

    .programme-form-actions[b-uurac9qvk7] { padding: .3rem .6rem; }

    .programme-form-btn[b-uurac9qvk7] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-uurac9qvk7] .validation-message,
    [b-uurac9qvk7] .validation-errors,
    .programme-form-error-inline[b-uurac9qvk7] { font-size: .6rem; }
}

/* ==== EXTRAS (identité, conseillers) ==== */

/* ===========================
   Identité : photo à gauche, champs à droite
   =========================== */

.programme-form-identity[b-uurac9qvk7] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.programme-form-identity > .programme-form-grid[b-uurac9qvk7] { flex: 1; min-width: 0; }

.programme-form-photo[b-uurac9qvk7] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    width: 64px;
}

.programme-form-photo-preview[b-uurac9qvk7] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .95rem;
    font-weight: 600;
}

.programme-form-photo-preview img[b-uurac9qvk7] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.programme-form-photo-actions[b-uurac9qvk7] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* « Photo », « Changer » et « Retirer » : liens textuels (le champ fichier est masqué) */
.programme-form-link-btn[b-uurac9qvk7] {
    padding: 0;
    background: none;
    border: none;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    text-decoration: underline;
    cursor: pointer;
}

/* ===========================
   Conseillers (liste)
   =========================== */

.programme-form-btn-add[b-uurac9qvk7] {
    padding: .1rem .6rem;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    background: #fdecec;
    border: none;
    border-radius: 36px;
    cursor: pointer;
}

.programme-form-btn-add:hover[b-uurac9qvk7] { background: #fbd5d5; }

.programme-form-list-scroll[b-uurac9qvk7] {
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.programme-form-list-item[b-uurac9qvk7] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
}

.programme-form-list-item-fields[b-uurac9qvk7] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: .35rem;
}

.programme-form-list-item-fields > .programme-form-input[b-uurac9qvk7] {
    flex: 1 1 0;
    min-width: 0;
}

.programme-form-btn-remove[b-uurac9qvk7] {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: .85rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.programme-form-btn-remove:hover[b-uurac9qvk7] {
    background: #fdecec;
    color: #c92a2a;
}

.programme-form-empty-hint[b-uurac9qvk7] {
    margin: 0 0 .35rem;
    font-size: .7rem;
    font-style: italic;
    color: #9ca3af;
}

.programme-form-consultant-photo[b-uurac9qvk7] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    width: 52px;
}

.programme-form-consultant-avatar[b-uurac9qvk7] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .75rem;
    font-weight: 600;
}

.programme-form-consultant-avatar img[b-uurac9qvk7] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 50%;
}

/* ===========================
   Responsive (extras)
   =========================== */

@media (max-width: 480px) {
    .programme-form-identity[b-uurac9qvk7] { flex-direction: column; align-items: stretch; }
    .programme-form-photo[b-uurac9qvk7] { flex-direction: row; width: auto; }
    .programme-form-list-item-fields[b-uurac9qvk7] { flex-direction: column; }
    .programme-form-consultant-photo[b-uurac9qvk7] { flex-direction: row; width: auto; }
}

/* ===========================
   Mobile : extras réduits
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-photo-preview[b-uurac9qvk7] {
        width: 32px;
        height: 32px;
        font-size: .8rem;
    }

    .programme-form-link-btn[b-uurac9qvk7] { font-size: .58rem; }

    .programme-form-btn-add[b-uurac9qvk7] {
        padding: .05rem .4rem;
        font-size: .58rem;
    }

    .programme-form-list-scroll[b-uurac9qvk7] { max-height: 110px; }

    .programme-form-btn-remove[b-uurac9qvk7] {
        width: 16px;
        height: 16px;
        font-size: .7rem;
    }

    .programme-form-empty-hint[b-uurac9qvk7] { font-size: .58rem; }

    .programme-form-consultant-photo[b-uurac9qvk7] { width: 44px; }

    .programme-form-consultant-avatar[b-uurac9qvk7] {
        width: 26px;
        height: 26px;
        min-width: 26px;
        flex-basis: 26px;
        font-size: .65rem;
    }
}
/* /Components/Layout/Formulaires/RechercheEmploiForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-32eoulaupd] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-32eoulaupd .15s ease;
}

@keyframes programme-form-fade-in-b-32eoulaupd {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-32eoulaupd {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-32eoulaupd] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-32eoulaupd .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-32eoulaupd] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-32eoulaupd] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-32eoulaupd] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-32eoulaupd] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-32eoulaupd] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-32eoulaupd] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-32eoulaupd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-32eoulaupd]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-32eoulaupd] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-32eoulaupd] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-32eoulaupd] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-32eoulaupd] .programme-form-input,
[b-32eoulaupd] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-32eoulaupd] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-32eoulaupd] .programme-form-input:focus,
[b-32eoulaupd] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-32eoulaupd] .programme-form-input::placeholder,
[b-32eoulaupd] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-32eoulaupd] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-32eoulaupd] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-32eoulaupd] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-32eoulaupd] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-32eoulaupd] { background: #e5e7eb; }

.programme-form-btn-save[b-32eoulaupd] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-32eoulaupd] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-32eoulaupd] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-32eoulaupd] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-32eoulaupd] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-32eoulaupd] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-32eoulaupd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-32eoulaupd] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-32eoulaupd] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */


@media (max-width: 480px) {
    .programme-form-grid[b-32eoulaupd] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-32eoulaupd] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-32eoulaupd] { padding: 8px; }

    .programme-form-card[b-32eoulaupd] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-32eoulaupd] { padding: .3rem .6rem; }
    .programme-form-title[b-32eoulaupd]  { font-size: .76rem; }
    .programme-form-close[b-32eoulaupd]  { font-size: 1rem; }

    .programme-form-scroll[b-32eoulaupd] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-32eoulaupd] { margin-bottom: 6px; }

    .programme-form-outline-label[b-32eoulaupd] {
        top: -5px;
        font-size: .56rem;
    }

    [b-32eoulaupd] .programme-form-input,
    [b-32eoulaupd] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-32eoulaupd] { font-size: .66rem; }

    .programme-form-actions[b-32eoulaupd] { padding: .3rem .6rem; }

    .programme-form-btn[b-32eoulaupd] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-32eoulaupd] .validation-message,
    [b-32eoulaupd] .validation-errors,
    .programme-form-error-inline[b-32eoulaupd] { font-size: .6rem; }
}
/* /Components/Layout/Formulaires/RenouvellementAbonnement.razor.rz.scp.css */
/* Styles isolés : ils ne s'appliquent qu'à ce composant, aucune dépendance aux autres feuilles de style. */

.renouv-overlay[b-092wo9ibt4] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.renouv-card[b-092wo9ibt4] {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.1rem 1.1rem .95rem;
    background: #fff;
    color: #1d1d1f;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    font-size: .72rem;
    letter-spacing: -.01em;
}

.renouv-close[b-092wo9ibt4] {
    position: absolute;
    top: .6rem;
    right: .6rem;
    border: 0;
    border-radius: 50%;
    background: #f5f5f7;
    color: #1d1d1f;
    line-height: 1;
    cursor: pointer;
    width: 22px; height: 22px; font-size: .85rem;
}

.renouv-close:hover[b-092wo9ibt4] { color: #c92a2a; }
.renouv-close:disabled[b-092wo9ibt4] { opacity: .5; cursor: not-allowed; }

.renouv-head[b-092wo9ibt4] { padding-right: 1.6rem; }

.renouv-title[b-092wo9ibt4] {
    margin: 0 0 .15rem;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.renouv-sub[b-092wo9ibt4] {
    margin: 0;
    font-size: .68rem;
    line-height: 1.35;
    color: #6e6e73;
}

.renouv-alert[b-092wo9ibt4] {
    margin: .6rem 0;
    padding: .4rem .6rem;
    border-radius: 8px;
    background: #fdecec;
    color: #c92a2a;
    font-size: .66rem;
}

.renouv-sec[b-092wo9ibt4] {
    margin-top: .65rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.renouv-sec-title[b-092wo9ibt4] {
    margin: 0 0 .35rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #c92a2a;
}

.renouv-bar[b-092wo9ibt4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.renouv-bar .renouv-sec-title[b-092wo9ibt4] { margin: 0; }

.renouv-back[b-092wo9ibt4] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .66rem;
    font-weight: 600;
    color: #c92a2a;
    cursor: pointer;
}

.renouv-back:hover:not(:disabled)[b-092wo9ibt4] { text-decoration: underline; }
.renouv-back:disabled[b-092wo9ibt4] { opacity: .5; cursor: not-allowed; }

/* Plan proposé */
.renouv-plan-row[b-092wo9ibt4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
}

.renouv-plan-nom[b-092wo9ibt4] { font-size: .85rem; font-weight: 700; }
.renouv-plan-prix[b-092wo9ibt4] { font-size: .8rem; font-weight: 700; color: #c92a2a; }

/* Case « Renouvellement automatique » */
.renouv-check[b-092wo9ibt4] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
    font-size: .64rem;
    font-weight: 600;
    color: #1d1d1f;
    cursor: pointer;
}

.renouv-check input[b-092wo9ibt4] {
    margin: 0;
    accent-color: #c92a2a;
    cursor: pointer;
}

.renouv-check input:disabled[b-092wo9ibt4] { cursor: not-allowed; }

.renouv-recap[b-092wo9ibt4] {
    margin: 0 0 .4rem;
    font-size: .64rem;
    font-weight: 600;
    color: #6e6e73;
}

.renouv-btn[b-092wo9ibt4] {
    width: 100%;
    height: 28px; font-size: .7rem; 
    border: 0;
    border-radius: 980px;
    background: #c92a2a;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}
.renouv-select[b-092wo9ibt4] { height: 28px !important; }

.renouv-btn:hover:not(:disabled)[b-092wo9ibt4] { background: #a61e1e; }
.renouv-btn:disabled[b-092wo9ibt4] { opacity: .6; cursor: not-allowed; }

.renouv-note[b-092wo9ibt4] {
    margin: .2rem 0 .4rem;
    font-size: .66rem;
    color: #6e6e73;
    text-align: center;
}

/* Le formulaire Stripe est dans un iframe : « zoom » réduit tout le bloc (texte, champs, boutons) */
.renouv-checkout[b-092wo9ibt4] {
    min-height: 0;
    zoom: .66;                 /* plus petit = boutons moins hauts */
    width: calc(100% / .66);   /* compense : le formulaire remplit toute la largeur */
}

@media (max-width: 820px), (max-height: 500px) and (orientation: landscape) {

    .renouv-overlay[b-092wo9ibt4] { padding: .5rem; }

    .renouv-card[b-092wo9ibt4] {
        max-width: 300px;
        max-height: 86dvh;
        padding: .75rem .8rem .7rem;
        border-radius: 14px;
        font-size: .62rem;
    }

    .renouv-close[b-092wo9ibt4] { 
        top: .5rem; 
        right: .5rem; 
        width: 18px;
        height: 18px;
        font-size: .7rem;
        line-height: 1;
    }

    .renouv-title[b-092wo9ibt4] { font-size: .82rem; }
    .renouv-sub[b-092wo9ibt4]   { font-size: .58rem; line-height: 1.3; }

    .renouv-alert[b-092wo9ibt4],
    .renouv-note[b-092wo9ibt4]  { font-size: .58rem; padding: .3rem .5rem; }

    .renouv-sec[b-092wo9ibt4]       { margin-top: .5rem; padding-top: .45rem; }
    .renouv-sec-title[b-092wo9ibt4] { font-size: .5rem; }
    .renouv-back[b-092wo9ibt4]      { font-size: .58rem; }

    .renouv-plan-nom[b-092wo9ibt4]  { font-size: .74rem; }
    .renouv-plan-prix[b-092wo9ibt4] { font-size: .7rem; }
    .renouv-recap[b-092wo9ibt4]     { font-size: .56rem; }
    .renouv-check[b-092wo9ibt4]     { font-size: .58rem; }

    /* 16px minimum pour éviter le zoom automatique d'iOS */
    .renouv-select[b-092wo9ibt4] {
        padding: 0 1.3rem 0 .5rem !important;
        margin-bottom: .4rem !important;
        background-position: right .45rem center;
        background-size: .55rem;
        height: 22px !important;
        font-size: 13px !important;
    }

    /* Bouton principal : plus bas et texte plus petit */
    .renouv-btn[b-092wo9ibt4] {
        height: 22px;
        font-size: .6rem;
    }

        /* Évite le défilement horizontal causé par la largeur compensée */
    .renouv-card[b-092wo9ibt4] { overflow-x: hidden; }

    /* Formulaire Stripe : réduit à 68 % */
    .renouv-checkout[b-092wo9ibt4] {
        zoom: 1;                       /* annule le zoom de base */
        min-height: 0;      /* ...puis est réduite pour tenir dans la fenêtre */
        transform-origin: top left;      /* supprime le vide laissé en bas par la réduction */
        width: calc(100% / .6);
        transform: scale(.6);
        margin-bottom: -280px;
    }
}

.renouv-select[b-092wo9ibt4] {
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c92a2a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .55rem center / .6rem;
    border: 1px solid rgba(0, 0, 0, .15);
    color: #1d1d1f;
    font: inherit;
    font-size: .72rem;
    padding-right: 1.5rem !important; /* place pour la flèche (le style en ligne impose le padding) */
    cursor: pointer;
}

.renouv-select:focus[b-092wo9ibt4],
.renouv-select:focus-visible[b-092wo9ibt4] {
    outline: none;
    border-color: #c92a2a;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .2);
}

.renouv-select option:checked[b-092wo9ibt4] {
    background: #c92a2a;
    color: #fff;
}

/* /Components/Layout/Formulaires/StatsCards.razor.rz.scp.css */
.top-row[b-go6lbwqyyq] {
    display: flex;
    justify-content: flex-end;
    padding-top: 11rem;
    padding-bottom: .5rem;
}

.about-btn:hover[b-go6lbwqyyq] {
    background: rgba(201,42,42,.08);
}

/* ===========================
   BANDEAU DE STATISTIQUES
=========================== */
.stats-wrapper[b-go6lbwqyyq] {
    max-width: 1180px;
    margin: 0 auto;
}

.stats-scroll[b-go6lbwqyyq] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
    padding: 1rem .5rem 1.25rem;   /* ← .1rem → 1rem */
    overflow: visible;              /* ← scroll → visible */
}

/* ========================================
   CARTE — FICHE DE DOSSIER
   ======================================== */

.stat-card[b-go6lbwqyyq] {
    flex: 0 0 auto;

    position: relative;
    cursor: pointer;

    width: 148px;

    background: #ffffff;

    border: 1px solid #e7e2e2;
    border-top: none;
    border-radius: 2px 10px 10px 10px;

    padding-top: 1.65rem;

    overflow: hidden;

    box-shadow: 0 1px 2px rgba(0,0,0,.03);

    transition: box-shadow .2s ease, transform .2s ease,
                background-color .2s ease, border-color .2s ease;
}

.stat-card:hover[b-go6lbwqyyq] {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
    background: color-mix(in srgb, var(--accent-bg) 45%, #ffffff);
    border-color: color-mix(in srgb, var(--accent) 20%, #e7e2e2);
}

/* État sélectionné (au clic) */
.stat-card--active[b-go6lbwqyyq] {
    background: var(--accent-bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent),
                0 6px 14px rgba(0,0,0,.06);
}

.stat-card--active:hover[b-go6lbwqyyq] {
    background: color-mix(in srgb, var(--accent-bg) 75%, #ffffff);
    transform: translateY(-2px);
}

/* ========================================
   ONGLET DE DOSSIER
   ======================================== */

.stat-tab[b-go6lbwqyyq] {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    align-items: center;
    gap: .3rem;

    padding: .0rem .65rem .32rem .6rem;

    font-size: .62rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;

    background: var(--accent-bg);
    color: var(--accent);

    clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%);
    border-radius: 2px 0 0 0;

    transition: background-color .2s ease;
}

.stat-tab i[b-go6lbwqyyq] {
    font-size: .72rem;
}

/* ========================================
   BOUTON MODIFIER
   ======================================== */

.stat-edit-btn[b-go6lbwqyyq] {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 2;

    width: 20px;
    height: 20px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    color: #9ca3af;
    border: 1px solid #e7e2e2;
    border-radius: 50%;

    font-size: .6rem;
    cursor: pointer;

    opacity: 0;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}

.stat-card:hover .stat-edit-btn[b-go6lbwqyyq],
.stat-edit-btn:focus-visible[b-go6lbwqyyq] {
    opacity: 1;
}

.stat-edit-btn:hover[b-go6lbwqyyq] {
    color: var(--accent, #c92a2a);
    border-color: var(--accent, #c92a2a);
}

/* ========================================
   POPUP D'ÉDITION
   ======================================== */

.stat-modal-backdrop[b-go6lbwqyyq] {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;

    background: rgba(0, 0, 0, .45);
}

.stat-modal[b-go6lbwqyyq] {
    width: 100%;
    max-width: 320px;

    display: flex;
    flex-direction: column;
    gap: .5rem;

    padding: 1rem 1.1rem 1.1rem;

    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .2);

    cursor: default;
}

.stat-modal-header[b-go6lbwqyyq] {
    display: flex;
    align-items: center;
    gap: .4rem;

    margin-bottom: .2rem;

    font-size: .85rem;
    font-weight: 800;
    color: #1d1d1f;
}

.stat-modal-header i[b-go6lbwqyyq] {
    font-size: .8rem;
    color: #9ca3af;
}

.stat-edit-label[b-go6lbwqyyq] {
    display: flex;
    flex-direction: column;
    gap: .2rem;

    font-size: .56rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.stat-edit-input[b-go6lbwqyyq],
.stat-edit-textarea[b-go6lbwqyyq] {
    width: 100%;

    padding: .25rem .4rem;

    font-size: .68rem;
    font-family: inherit;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;

    color: #1d1d1f;
    background: #fff;
    border: 1px solid #e7e2e2;
    border-radius: 6px;

    cursor: text;
}

.stat-edit-input:focus[b-go6lbwqyyq],
.stat-edit-textarea:focus[b-go6lbwqyyq] {
    outline: none;
    border-color: var(--accent, #c92a2a);
}

.stat-edit-select[b-go6lbwqyyq] {
    cursor: pointer;
}

.stat-edit-textarea[b-go6lbwqyyq] {
    min-height: 3.2em;
    resize: vertical;
}

.stat-edit-tendance[b-go6lbwqyyq] {
    display: flex;
    gap: .3rem;
}

.stat-edit-tendance .stat-edit-select[b-go6lbwqyyq] {
    flex: 0 0 auto;
    width: auto;
}

.stat-edit-tendance input[b-go6lbwqyyq] {
    flex: 1 1 auto;
    min-width: 0;
}

.stat-edit-actions[b-go6lbwqyyq] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;

    margin-top: .4rem;
}

.stat-edit-cancel[b-go6lbwqyyq],
.stat-edit-save[b-go6lbwqyyq] {
    padding: .28rem .6rem;

    font-size: .6rem;
    font-weight: 700;

    border-radius: 6px;
    cursor: pointer;

    transition: background-color .15s ease, opacity .15s ease;
}

.stat-edit-cancel[b-go6lbwqyyq] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e7e2e2;
}

.stat-edit-cancel:hover[b-go6lbwqyyq] {
    background: #e5e7eb;
}

.stat-edit-save[b-go6lbwqyyq] {
    background: var(--accent, #c92a2a);
    color: #fff;
    border: 1px solid var(--accent, #c92a2a);
}

.stat-edit-save:hover[b-go6lbwqyyq] {
    opacity: .9;
}

.stat-edit-cancel:disabled[b-go6lbwqyyq],
.stat-edit-save:disabled[b-go6lbwqyyq] {
    opacity: .6;
    cursor: not-allowed;
}

/* ========================================
   COULEURS PAR CATÉGORIE — centralisées
   ======================================== */

.stat-card--red[b-go6lbwqyyq]    { --accent: #c92a2a; --accent-bg: #fdecec; }
.stat-card--blue[b-go6lbwqyyq]   { --accent: #2563eb; --accent-bg: #eaf2fe; }
.stat-card--green[b-go6lbwqyyq]  { --accent: #1a7f37; --accent-bg: #e8f7ee; }
.stat-card--purple[b-go6lbwqyyq] { --accent: #7c3aed; --accent-bg: #f2ecfb; }
.stat-card--amber[b-go6lbwqyyq]  { --accent: #b45309; --accent-bg: #fef6e7; }
.stat-card--teal[b-go6lbwqyyq]   { --accent: #0f766e; --accent-bg: #e6f7f5; }

/* ========================================
   CORPS DE LA FICHE
   ======================================== */

.stat-body[b-go6lbwqyyq] {
    padding: .7rem .8rem .8rem;
}

/* ========================================
   VALEUR + TENDANCE
   ======================================== */

.stat-value-row[b-go6lbwqyyq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;

    margin-bottom: .35rem;
}

.stat-value[b-go6lbwqyyq] {
    font-size: 1.4rem;
    font-weight: 800;

    color: #1d1d1f;
    line-height: 1;

    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.stat-trend[b-go6lbwqyyq] {
    display: flex;
    align-items: center;
    gap: .15rem;

    font-size: .58rem;
    font-weight: 700;

    white-space: nowrap;
}

.stat-trend--up[b-go6lbwqyyq] {
    color: #1a7f37;
}

.stat-trend--down[b-go6lbwqyyq] {
    color: #c92a2a;
}

.stat-trend--flat[b-go6lbwqyyq] {
    color: #9ca3af;
}

.trend-arrow[b-go6lbwqyyq] {
    font-size: .4rem;
}

/* ========================================
   DESCRIPTION
   ======================================== */

.stat-description[b-go6lbwqyyq] {
    font-size: .54rem;
    line-height: 1.35;

    color: #6b7280;

    min-height: 2.2em;

    margin-bottom: .5rem;
}

/* ========================================
   PIED DE FICHE
   ======================================== */

.stat-footer[b-go6lbwqyyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;

    padding-top: .4rem;

    border-top: 1px dashed #ecebeb;
}

.stat-code[b-go6lbwqyyq] {
    font-size: .56rem;
    font-weight: 700;

    color: #9ca3af;

    letter-spacing: .03em;
}

.stat-period[b-go6lbwqyyq] {
    font-size: .56rem;
    font-weight: 600;

    color: #9ca3af;

    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ========================================
   COIN DE PAGE (effet corne relevée au survol)
   ======================================== */

.stat-card[b-go6lbwqyyq]::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;

    width: 0;
    height: 0;

    border-style: solid;
    border-width: 0 0 13px 13px;
    border-color: transparent transparent #f2efec transparent;

    filter: drop-shadow(-1px -1px 1px rgba(0,0,0,.05));

    transition: border-width .2s ease;
}

.stat-card:hover[b-go6lbwqyyq]::after {
    border-width: 0 0 19px 19px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

.stats-toggle[b-go6lbwqyyq] { display: none; }

@media (max-width: 768px) {

    /* Emplacement réservé dans la page : le vrai contenu est fixé en haut */
    .stats-wrapper[b-go6lbwqyyq] {
        height: 40px;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Bouton « Statistiques » : collé au bord gauche, rouge clair */
    .stats-toggle[b-go6lbwqyyq] {
        display: flex;
        align-items: center;
        gap: .3rem;
        position: fixed;
        top: 100px;
        left: 0;
        z-index: 850;
        padding: .2rem .6rem .2rem .4rem;
        background: #fca5a5;
        color: #991b1b;
        border: none;
        border-radius: 0 980px 980px 0;
        font-size: .6rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* Rangée de cartes : pleine largeur, scrollable */
    .stats-scroll[b-go6lbwqyyq] {
        position: fixed;
        top: 138px;
        left: 0;
        right: 0;
        z-index: 840;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        gap: .5rem;
        margin: 0;
        padding: .6rem .5rem .8rem;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
        -webkit-overflow-scrolling: touch;
    }

    .stats-wrapper.collapsed .stats-scroll[b-go6lbwqyyq] { display: none; }
    .stats-scroll[aria-busy][b-go6lbwqyyq] { display: none; }

    .stat-card[b-go6lbwqyyq] { width: 120px; padding-top: 1.45rem; }
    .stat-tab[b-go6lbwqyyq] { font-size: .55rem; padding-right: .5rem; }
    .stat-value[b-go6lbwqyyq] { font-size: 1.1rem; }
    .stat-trend[b-go6lbwqyyq] { font-size: .5rem; }
    .stat-description[b-go6lbwqyyq] { font-size: .5rem; }
    .stat-body[b-go6lbwqyyq] { padding: .6rem .7rem .7rem; }
    .stat-modal[b-go6lbwqyyq] { max-width: 92vw; }
}

@media (hover: none) {
    .stat-edit-btn[b-go6lbwqyyq] { opacity: 1; }
}
/* /Components/Layout/Formulaires/StrategieEmploiDetailsForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-agnsbkzile] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-agnsbkzile .15s ease;
}

@keyframes programme-form-fade-in-b-agnsbkzile {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-agnsbkzile {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-agnsbkzile] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-agnsbkzile .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-agnsbkzile] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-agnsbkzile] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-agnsbkzile] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-agnsbkzile] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-agnsbkzile] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-agnsbkzile] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-agnsbkzile] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-agnsbkzile]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-agnsbkzile] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-agnsbkzile] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-agnsbkzile] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-agnsbkzile] .programme-form-input,
[b-agnsbkzile] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-agnsbkzile] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-agnsbkzile] .programme-form-input:focus,
[b-agnsbkzile] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-agnsbkzile] .programme-form-input::placeholder,
[b-agnsbkzile] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-agnsbkzile] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-agnsbkzile] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-agnsbkzile] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-agnsbkzile] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-agnsbkzile] { background: #e5e7eb; }

.programme-form-btn-save[b-agnsbkzile] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-agnsbkzile] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-agnsbkzile] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-agnsbkzile] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-agnsbkzile] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-agnsbkzile] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-agnsbkzile] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-agnsbkzile] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-agnsbkzile] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */

@media (max-width: 640px) {
    .programme-form-grid[b-agnsbkzile] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .programme-form-grid[b-agnsbkzile] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-agnsbkzile] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-agnsbkzile] { padding: 8px; }

    .programme-form-card[b-agnsbkzile] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-agnsbkzile] { padding: .3rem .6rem; }
    .programme-form-title[b-agnsbkzile]  { font-size: .76rem; }
    .programme-form-close[b-agnsbkzile]  { font-size: 1rem; }

    .programme-form-scroll[b-agnsbkzile] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-agnsbkzile] { margin-bottom: 6px; }

    .programme-form-outline-label[b-agnsbkzile] {
        top: -5px;
        font-size: .56rem;
    }

    [b-agnsbkzile] .programme-form-input,
    [b-agnsbkzile] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-agnsbkzile] { font-size: .66rem; }

    .programme-form-actions[b-agnsbkzile] { padding: .3rem .6rem; }

    .programme-form-btn[b-agnsbkzile] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-agnsbkzile] .validation-message,
    [b-agnsbkzile] .validation-errors,
    .programme-form-error-inline[b-agnsbkzile] { font-size: .6rem; }
}

/* ==== EXTRAS (identité, conseillers) ==== */

/* ===========================
   Identité : photo à gauche, champs à droite
   =========================== */

.programme-form-identity[b-agnsbkzile] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.programme-form-identity > .programme-form-grid[b-agnsbkzile] { flex: 1; min-width: 0; }

.programme-form-photo[b-agnsbkzile] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    width: 64px;
}

.programme-form-photo-preview[b-agnsbkzile] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .95rem;
    font-weight: 600;
}

.programme-form-photo-preview img[b-agnsbkzile] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.programme-form-photo-actions[b-agnsbkzile] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* « Photo », « Changer » et « Retirer » : liens textuels (le champ fichier est masqué) */
.programme-form-link-btn[b-agnsbkzile] {
    padding: 0;
    background: none;
    border: none;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    text-decoration: underline;
    cursor: pointer;
}

/* ===========================
   Conseillers (liste)
   =========================== */

.programme-form-btn-add[b-agnsbkzile] {
    padding: .1rem .6rem;
    font-size: .66rem;
    font-weight: 500;
    color: #c92a2a;
    background: #fdecec;
    border: none;
    border-radius: 36px;
    cursor: pointer;
}

.programme-form-btn-add:hover[b-agnsbkzile] { background: #fbd5d5; }

.programme-form-list-scroll[b-agnsbkzile] {
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.programme-form-list-item[b-agnsbkzile] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
}

.programme-form-list-item-fields[b-agnsbkzile] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: .35rem;
}

.programme-form-list-item-fields > .programme-form-input[b-agnsbkzile] {
    flex: 1 1 0;
    min-width: 0;
}

.programme-form-btn-remove[b-agnsbkzile] {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: .85rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.programme-form-btn-remove:hover[b-agnsbkzile] {
    background: #fdecec;
    color: #c92a2a;
}

.programme-form-empty-hint[b-agnsbkzile] {
    margin: 0 0 .35rem;
    font-size: .7rem;
    font-style: italic;
    color: #9ca3af;
}

.programme-form-consultant-photo[b-agnsbkzile] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    width: 52px;
}

.programme-form-consultant-avatar[b-agnsbkzile] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fdecec;
    color: #c92a2a;
    font-size: .75rem;
    font-weight: 600;
}

.programme-form-consultant-avatar img[b-agnsbkzile] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 50%;
}

/* ===========================
   Responsive (extras)
   =========================== */

@media (max-width: 480px) {
    .programme-form-identity[b-agnsbkzile] { flex-direction: column; align-items: stretch; }
    .programme-form-photo[b-agnsbkzile] { flex-direction: row; width: auto; }
    .programme-form-list-item-fields[b-agnsbkzile] { flex-direction: column; }
    .programme-form-consultant-photo[b-agnsbkzile] { flex-direction: row; width: auto; }
}

/* ===========================
   Mobile : extras réduits
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-photo-preview[b-agnsbkzile] {
        width: 32px;
        height: 32px;
        font-size: .8rem;
    }

    .programme-form-link-btn[b-agnsbkzile] { font-size: .58rem; }

    .programme-form-btn-add[b-agnsbkzile] {
        padding: .05rem .4rem;
        font-size: .58rem;
    }

    .programme-form-list-scroll[b-agnsbkzile] { max-height: 110px; }

    .programme-form-btn-remove[b-agnsbkzile] {
        width: 16px;
        height: 16px;
        font-size: .7rem;
    }

    .programme-form-empty-hint[b-agnsbkzile] { font-size: .58rem; }

    .programme-form-consultant-photo[b-agnsbkzile] { width: 44px; }

    .programme-form-consultant-avatar[b-agnsbkzile] {
        width: 26px;
        height: 26px;
        min-width: 26px;
        flex-basis: 26px;
        font-size: .65rem;
    }
}
/* /Components/Layout/Formulaires/StrategieEmploiForm.razor.rz.scp.css */
/* ===========================
   Overlay (déplacé dans <body> via domPortal)
   =========================== */

.programme-form-overlay[b-pg1ef8r3d1] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    animation: programme-form-fade-in-b-pg1ef8r3d1 .15s ease;
}

@keyframes programme-form-fade-in-b-pg1ef8r3d1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes programme-form-scale-in-b-pg1ef8r3d1 {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte plafonnée à la hauteur de la fenêtre
   =========================== */

.programme-form-card[b-pg1ef8r3d1] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: programme-form-scale-in-b-pg1ef8r3d1 .18s cubic-bezier(.2, .8, .2, 1);
}

/* ===========================
   En-tête
   =========================== */

.programme-form-header[b-pg1ef8r3d1] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .8rem;
}

.programme-form-title[b-pg1ef8r3d1] {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
}

.programme-form-close[b-pg1ef8r3d1] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.programme-form-close:hover[b-pg1ef8r3d1] { color: #111827; }

/* ===========================
   <form> généré par EditForm + zone qui défile
   =========================== */

[b-pg1ef8r3d1] .programme-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.programme-form-scroll[b-pg1ef8r3d1] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .8rem .2rem;
}

/* ===========================
   Grille
   =========================== */

.programme-form-grid[b-pg1ef8r3d1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
}

.programme-form-outline-full[b-pg1ef8r3d1]  { grid-column: 1 / -1; }
.programme-form-outline-span2[b-pg1ef8r3d1] { grid-column: span 2; }

/* ===========================
   Champs
   =========================== */

.programme-form-outline[b-pg1ef8r3d1] {
    position: relative;
    margin-bottom: 8px;
    min-width: 0;
}

.programme-form-outline-label[b-pg1ef8r3d1] {
    position: absolute;
    top: -6px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .64rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

[b-pg1ef8r3d1] .programme-form-input,
[b-pg1ef8r3d1] .programme-form-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-pg1ef8r3d1] .programme-form-textarea {
    resize: vertical;
    min-height: 0;
    line-height: 1.3;
}

[b-pg1ef8r3d1] .programme-form-input:focus,
[b-pg1ef8r3d1] .programme-form-textarea:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-pg1ef8r3d1] .programme-form-input::placeholder,
[b-pg1ef8r3d1] .programme-form-textarea::placeholder { color: #9ca3af; }

/* ===========================
   Pied de page
   =========================== */

.programme-form-actions[b-pg1ef8r3d1] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .4rem .8rem;
    background: #fff;
}

.programme-form-btn[b-pg1ef8r3d1] {
    padding: .22rem .8rem;
    border-radius: 36px;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.programme-form-btn:disabled[b-pg1ef8r3d1] {
    opacity: .5;
    cursor: not-allowed;
}

.programme-form-btn-cancel[b-pg1ef8r3d1] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.programme-form-btn-cancel:hover[b-pg1ef8r3d1] { background: #e5e7eb; }

.programme-form-btn-save[b-pg1ef8r3d1] {
    background: #ee5b5b;
    color: #fff;
}

.programme-form-btn-save:hover[b-pg1ef8r3d1] { background: #dc2626; }

/* ===========================
   Validation
   =========================== */

[b-pg1ef8r3d1] .validation-message {
    color: #dc2626;
    font-size: .7rem;
    margin-top: .1rem;
    display: block;
}

[b-pg1ef8r3d1] .validation-errors {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: .7rem;
    color: #dc2626;
}

.programme-form-error-inline[b-pg1ef8r3d1] {
    margin: .2rem 0 0;
    color: #dc2626;
    font-size: .7rem;
}

/* ===========================
   Sections
   =========================== */

.programme-form-section[b-pg1ef8r3d1] {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid #e5e7eb;
}

.programme-form-section-header[b-pg1ef8r3d1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.programme-form-section-title[b-pg1ef8r3d1] {
    display: block;
    margin-bottom: .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: #111827;
}

.programme-form-section-header .programme-form-section-title[b-pg1ef8r3d1] { margin-bottom: 0; }

/* ===========================
   Responsive (grille)
   =========================== */


@media (max-width: 480px) {
    .programme-form-grid[b-pg1ef8r3d1] { grid-template-columns: 1fr; }
    .programme-form-outline-span2[b-pg1ef8r3d1] { grid-column: 1 / -1; }
}

/* ===========================
   Mobile : tout réduit
   (même condition que les autres pages)
   =========================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .programme-form-overlay[b-pg1ef8r3d1] { padding: 8px; }

    .programme-form-card[b-pg1ef8r3d1] {
        max-width: min(340px, 92vw);
        max-height: 88dvh;
        border-radius: 12px;
    }

    .programme-form-header[b-pg1ef8r3d1] { padding: .3rem .6rem; }
    .programme-form-title[b-pg1ef8r3d1]  { font-size: .76rem; }
    .programme-form-close[b-pg1ef8r3d1]  { font-size: 1rem; }

    .programme-form-scroll[b-pg1ef8r3d1] { padding: .45rem .6rem .15rem; }

    .programme-form-outline[b-pg1ef8r3d1] { margin-bottom: 6px; }

    .programme-form-outline-label[b-pg1ef8r3d1] {
        top: -5px;
        font-size: .56rem;
    }

    [b-pg1ef8r3d1] .programme-form-input,
    [b-pg1ef8r3d1] .programme-form-textarea {
        padding: .16rem .4rem;
        font-size: .66rem;
    }

    .programme-form-section-title[b-pg1ef8r3d1] { font-size: .66rem; }

    .programme-form-actions[b-pg1ef8r3d1] { padding: .3rem .6rem; }

    .programme-form-btn[b-pg1ef8r3d1] {
        padding: .16rem .65rem;
        font-size: .64rem;
    }

    [b-pg1ef8r3d1] .validation-message,
    [b-pg1ef8r3d1] .validation-errors,
    .programme-form-error-inline[b-pg1ef8r3d1] { font-size: .6rem; }
}
/* /Components/Layout/Formulaires/SuppressionForm.razor.rz.scp.css */
.task-form-overlay[b-36hb24wd2l] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  z-index: 3000;
  animation: task-form-fade-in-b-36hb24wd2l .15s ease-out;
}

@keyframes task-form-fade-in-b-36hb24wd2l {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes task-form-pop-in-b-36hb24wd2l {
  from { opacity: 0; transform: scale(.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.task-form-card[b-36hb24wd2l] {
  width: 100%;
  max-width: 400px;
  margin: 0 16px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  animation: task-form-pop-in-b-36hb24wd2l .18s ease-out;
}

.task-form-header[b-36hb24wd2l] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.task-form-title[b-36hb24wd2l] {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1d1d1f;
}

.task-form-close[b-36hb24wd2l] {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: #a1a1a6;
  cursor: pointer;
  padding: 0 4px;
}

.task-form-close:hover[b-36hb24wd2l] { color: #c92a2a; }

.task-form-text[b-36hb24wd2l] {
  margin: 0 0 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #3a3a3c;
}

.task-form-alert[b-36hb24wd2l] {
  padding: 0.7rem 0.85rem;
  margin-bottom: 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.4;
}

.task-form-alert-error[b-36hb24wd2l] {
  background: rgba(201, 42, 42, .08);
  border: 1px solid rgba(201, 42, 42, .18);
  color: #8a1f1f;
}

.task-form-field[b-36hb24wd2l] {
  position: relative;
  margin-bottom: 16px;
}

.task-form-label[b-36hb24wd2l] {
  position: absolute;
  top: -8px;
  left: 12px;
  padding: 0 6px;
  background: #ffffff;
  font-size: 0.7rem;
  font-weight: 500;
  color: #6e6e73;
  pointer-events: none;
}

.task-form-input[b-36hb24wd2l] {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 2rem 0 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: #1d1d1f;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%236e6e73' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px 7px;
}

.task-form-input:focus[b-36hb24wd2l] {
  outline: none;
  border-color: #c92a2a;
  box-shadow: 0 0 0 3px rgba(201, 42, 42, .12);
}

.task-form-actions[b-36hb24wd2l] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.task-form-btn[b-36hb24wd2l] {
  padding: 0.5rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 980px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}

.task-form-btn:active[b-36hb24wd2l] { transform: scale(0.96); }
.task-form-btn:disabled[b-36hb24wd2l] { opacity: .6; cursor: default; }

.task-form-btn-cancel[b-36hb24wd2l] {
  background: #ffffff;
  color: #1d1d1f;
  border-color: rgba(0, 0, 0, .1);
}

.task-form-btn-cancel:hover:not(:disabled)[b-36hb24wd2l] { background: #f5f5f7; }

.task-form-btn-danger[b-36hb24wd2l] {
  background: #c92a2a;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(201, 42, 42, .25);
}

.task-form-btn-danger:hover:not(:disabled)[b-36hb24wd2l] { background: #a61e1e; }
/* /Components/Layout/Formulaires/TaskForm.razor.rz.scp.css */
/* ===========================
   Overlay
   =========================== */

.task-form-overlay[b-k2izvgqjni] {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);

    z-index: 3000;

    animation: task-form-fade-in-b-k2izvgqjni .15s ease-out;
}

@keyframes task-form-fade-in-b-k2izvgqjni {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes task-form-pop-in-b-k2izvgqjni {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   Carte
   =========================== */

.task-form-card[b-k2izvgqjni] {
    width: 100%;
    max-width: 340px;
    margin: 0 16px;
    padding: 16px 18px;

    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);

    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

    animation: task-form-pop-in-b-k2izvgqjni .15s ease-out;
}

/* ===========================
   En-tête
   =========================== */

.task-form-header[b-k2izvgqjni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.task-form-title[b-k2izvgqjni] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.task-form-close[b-k2izvgqjni] {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: #a1a1a6;
    cursor: pointer;
    padding: 0 2px;
    transition: color .15s ease;
}

.task-form-close:hover[b-k2izvgqjni] {
    color: #c92a2a;
}

/* ===========================
   Champs — label sur le contour
   =========================== */

.task-form-outline[b-k2izvgqjni] {
    position: relative;
    margin-bottom: 14px;
}

/* ===========================
   Ligne à deux colonnes (ex. Phase + Position)
   =========================== */

.task-form-row[b-k2izvgqjni] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.task-form-row .task-form-outline-half[b-k2izvgqjni] {
    flex: 1 1 0;
    min-width: 0;
}

.task-form-outline-label[b-k2izvgqjni] {
    position: absolute;
    top: -7px;
    left: 10px;

    padding: 0 5px;

    background: #ffffff;

    font-size: 0.65rem;
    font-weight: 500;
    color: #6e6e73;

    pointer-events: none;
}

.task-form-input[b-k2izvgqjni],
.task-form-textarea[b-k2izvgqjni] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.5rem;

    font-size: 0.8rem;
    font-family: inherit;
    color: #1d1d1f;

    background: transparent;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 8px;

    transition: border-color .15s ease;
}

.task-form-input[b-k2izvgqjni] {
    height: 26px;
}

.task-form-textarea[b-k2izvgqjni] {
    resize: vertical;
    min-height: 26px;
    padding-top: 4px;
}

.task-form-input:focus[b-k2izvgqjni],
.task-form-textarea:focus[b-k2izvgqjni] {
    outline: none;
    border-color: #c92a2a;
    box-shadow: 0 0 0 3px rgba(201, 42, 42, .1);
}

.task-form-input:focus ~ .task-form-outline-label[b-k2izvgqjni],
.task-form-outline:focus-within .task-form-outline-label[b-k2izvgqjni] {
    color: #c92a2a;
}

.task-form-input[b-k2izvgqjni]::placeholder,
.task-form-textarea[b-k2izvgqjni]::placeholder {
    color: #a1a1a6;
}

/* ===========================
   Actions
   =========================== */

.task-form-actions[b-k2izvgqjni] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 14px;
}

.task-form-btn[b-k2izvgqjni] {
    padding: 0.4rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: -0.01em;

    border-radius: 980px;
    border: none;
    cursor: pointer;

    transition: background-color .15s ease, opacity .15s ease;
}

.task-form-btn:active[b-k2izvgqjni] {
    opacity: .8;
}

.task-form-btn-cancel[b-k2izvgqjni] {
    background: #f0f0f2;
    color: #1d1d1f;
}

.task-form-btn-cancel:hover[b-k2izvgqjni] {
    background: #e5e5e7;
}

.task-form-btn-save[b-k2izvgqjni] {
    background: #c92a2a;
    color: #ffffff;
}

.task-form-btn-save:hover[b-k2izvgqjni] {
    background: #a61e1e;
}

/* ===========================
   Neutraliser TOUTE source de bordure verte
   (Blazor / Bootstrap / navigateur / variables CSS)
   =========================== */

.task-form-card .task-form-outline input[b-k2izvgqjni],
.task-form-card .task-form-outline textarea[b-k2izvgqjni],
.task-form-card input[class][b-k2izvgqjni],
.task-form-card textarea[class][b-k2izvgqjni],
.task-form-card input:required[b-k2izvgqjni],
.task-form-card textarea:required[b-k2izvgqjni],
.task-form-card input:required:valid[b-k2izvgqjni],
.task-form-card textarea:required:valid[b-k2izvgqjni],
.task-form-card input:optional[b-k2izvgqjni],
.task-form-card textarea:optional[b-k2izvgqjni] {
    --bs-border-color: rgba(0, 0, 0, .15) !important;
    --bs-form-valid-border-color: rgba(0, 0, 0, .15) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 8px !important;
    border-color: rgba(0, 0, 0, .15) !important;
    outline: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.task-form-card .task-form-outline input:focus[b-k2izvgqjni],
.task-form-card .task-form-outline textarea:focus[b-k2izvgqjni],
.task-form-card input[class]:focus[b-k2izvgqjni],
.task-form-card textarea[class]:focus[b-k2izvgqjni] {
    --bs-border-color: #c92a2a !important;
    --bs-form-valid-border-color: #c92a2a !important;
    border-color: #c92a2a !important;
    box-shadow: 0 0 0 3px rgba(201, 42, 42, .1) !important;
}

[b-k2izvgqjni] .valid.modified:not([type=checkbox]) {
    outline: none !important;
    border-radius: 8px !important;
    padding: 0.4rem 0.9rem;
}

[b-k2izvgqjni] .task-form-input.valid.modified,
[b-k2izvgqjni] .task-form-textarea.valid.modified {
    outline: none !important;
    border-color: rgba(0, 0, 0, .15) !important;
    border-radius: 8px !important;
    padding: 0.4rem 0.9rem;
}

/* ===========================
   État invalide — contour rouge
   =========================== */

.task-form-card .task-form-outline input.invalid[b-k2izvgqjni],
.task-form-card .task-form-outline textarea.invalid[b-k2izvgqjni],
.task-form-card input[class].invalid[b-k2izvgqjni],
.task-form-card textarea[class].invalid[b-k2izvgqjni],
.task-form-card input:required.invalid[b-k2izvgqjni],
.task-form-card textarea:required.invalid[b-k2izvgqjni] {
    --bs-border-color: #c92a2a !important;
    border-color: #c92a2a !important;
    box-shadow: 0 0 0 3px rgba(201, 42, 42, .08) !important;
}

.task-form-card .task-form-outline input.invalid:focus[b-k2izvgqjni],
.task-form-card .task-form-outline textarea.invalid:focus[b-k2izvgqjni] {
    box-shadow: 0 0 0 3px rgba(201, 42, 42, .15) !important;
}

.task-form-card select.task-form-input[b-k2izvgqjni] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.task-form-card select.task-form-input:disabled[b-k2izvgqjni] {
    opacity: .5;
    cursor: not-allowed;
}

.task-form-card .task-form-outline select[b-k2izvgqjni],
.task-form-card select[class][b-k2izvgqjni] {
    --bs-border-color: rgba(0, 0, 0, .15) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 8px !important;
    border-color: rgba(0, 0, 0, .15) !important;
    outline: none !important;
    box-shadow: none !important;
}
/* /Components/Layout/Formulaires/TypeDocumentForm.razor.rz.scp.css */
.form-overlay[b-lhy4o5cxem] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.form-modal[b-lhy4o5cxem] {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 420px;
    padding: 1.2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.form-header[b-lhy4o5cxem] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.form-header h4[b-lhy4o5cxem] {
    margin: 0;
    font-size: .95rem;
    color: #111827;
}

.form-close[b-lhy4o5cxem] {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    font-size: 1rem;
}

.form-body[b-lhy4o5cxem] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.form-group[b-lhy4o5cxem] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.form-group label[b-lhy4o5cxem] {
    font-size: .75rem;
    font-weight: 600;
    color: #374151;
}

.form-loading[b-lhy4o5cxem],
.form-empty[b-lhy4o5cxem] {
    font-size: .8rem;
    color: #6b7280;
}

.form-error[b-lhy4o5cxem] {
    font-size: .8rem;
    color: #c92a2a;
    margin: 0;
}

.form-footer[b-lhy4o5cxem] {
    margin-top: 1.2rem;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

/* Squelette du formulaire */

.form-sk[b-lhy4o5cxem] {
    background: linear-gradient(90deg, #eceef1 25%, #f6f7f9 50%, #eceef1 75%);
    background-size: 200% 100%;
    animation: form-sk-shimmer-b-lhy4o5cxem 1.2s ease-in-out infinite;
}

/* Même gabarit qu'un .form-control Bootstrap */
.form-sk-input[b-lhy4o5cxem] {
    width: 100%;
    height: 2.375rem;
    border: 1px solid #e5e7eb;
    border-radius: .375rem;
}

.form-sk-label-lg[b-lhy4o5cxem] {
    width: 30%;
}

.form-sk-input[b-lhy4o5cxem] {
    width: 100%;
    height: 2.35rem;
}

@keyframes form-sk-shimmer-b-lhy4o5cxem {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.form-sk-input[b-lhy4o5cxem] {
    width: 100%;
    height: 2.375rem;
    border: 1px solid #e5e7eb;
    border-radius: .375rem;
}
/* /Components/Layout/Formulaires/UserForm.razor.rz.scp.css */
/* ===========================
   Overlay
   =========================== */

.task-form-overlay[b-wudc41kylw] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    animation: task-form-fade-in-b-wudc41kylw .15s ease-out;
}

@keyframes task-form-fade-in-b-wudc41kylw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes task-form-pop-in-b-wudc41kylw {
    from { opacity: 0; transform: scale(.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===========================
   Carte
   =========================== */

.task-form-card[b-wudc41kylw] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    max-height: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: task-form-pop-in-b-wudc41kylw .18s ease-out;
}

/* ===========================
   En-tête
   =========================== */

.task-form-header[b-wudc41kylw] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .7rem;
}

.task-form-title[b-wudc41kylw] {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: #111827;
}

.task-form-close[b-wudc41kylw] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.task-form-close:hover[b-wudc41kylw] { color: #111827; }

/* ===========================
   Corps
   =========================== */

[b-wudc41kylw] .task-form-body-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.task-form-scroll[b-wudc41kylw] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .7rem .1rem;
}

.task-form-grid[b-wudc41kylw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 6px;
    align-items: start;
}

.task-form-field-full[b-wudc41kylw]  { grid-column: 1 / -1; }
.task-form-field-span2[b-wudc41kylw] { grid-column: span 2; }

/* ===========================
   Alertes
   =========================== */

.task-form-alert[b-wudc41kylw] {
    padding: .35rem .55rem;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: .7rem;
    line-height: 1.35;
}

.task-form-alert-error[b-wudc41kylw] {
    background: rgba(201, 42, 42, .08);
    border: 1px solid rgba(201, 42, 42, .18);
    color: #8a1f1f;
}

.task-form-alert-success[b-wudc41kylw] {
    background: rgba(48, 133, 79, .08);
    border: 1px solid rgba(48, 133, 79, .2);
    color: #216b45;
}

/* ===========================
   Champs — label sur le contour
   =========================== */

.task-form-field[b-wudc41kylw] {
    position: relative;
    margin-bottom: 6px;
    min-width: 0;
}

.task-form-label[b-wudc41kylw] {
    position: absolute;
    top: -5px;
    left: 7px;
    padding: 0 3px;
    background: #fff;
    font-size: .6rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    pointer-events: none;
    z-index: 1;
}

.task-form-field:focus-within .task-form-label[b-wudc41kylw] {
    color: #dc2626;
}

[b-wudc41kylw] .task-form-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .15rem .45rem;
    font-size: .72rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-wudc41kylw] .task-form-input:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-wudc41kylw] .task-form-input::placeholder { color: #9ca3af; }

/* Listes déroulantes : même hauteur que les champs texte */
[b-wudc41kylw] select.task-form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 1.4rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%236e6e73' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .45rem center;
    background-size: 8px 6px;
}

/* Neutraliser la bordure verte de Blazor (valid.modified) */
[b-wudc41kylw] .task-form-input.valid.modified {
    outline: none;
    border-color: #d1d5db;
}

[b-wudc41kylw] .task-form-input.valid.modified:focus {
    border-color: #dc2626;
}

/* Champ invalide : anneau rouge */
[b-wudc41kylw] .task-form-input.invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

[b-wudc41kylw] .task-form-validation {
    display: block;
    margin: .1rem 0 0;
    font-size: .66rem;
    color: #dc2626;
}

/* ===========================
   Mot de passe temporaire
   =========================== */

.task-form-password-row[b-wudc41kylw] {
    display: flex;
    gap: 6px;
}

[b-wudc41kylw] .task-form-password-row .task-form-input {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: .02em;
}

.task-form-password-refresh[b-wudc41kylw] {
    flex: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: .85rem;
    color: #6b7280;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .2s ease;
}

.task-form-password-refresh:hover[b-wudc41kylw] {
    background: #f3f4f6;
    color: #dc2626;
}

.task-form-password-refresh:active[b-wudc41kylw] {
    transform: rotate(120deg);
}

.task-form-hint[b-wudc41kylw] {
    margin: 3px 2px 0;
    font-size: .62rem;
    color: #86868b;
}

.task-form-users-count[b-wudc41kylw] {
    margin: 0 2px 6px;
    font-size: .66rem;
    color: #86868b;
}

/* ===========================
   Actions
   =========================== */

.task-form-actions[b-wudc41kylw] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .35rem;
    padding: .3rem .7rem;
    background: #fff;
}

.task-form-btn[b-wudc41kylw] {
    padding: .15rem .7rem;
    border-radius: 36px;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.task-form-btn:disabled[b-wudc41kylw] {
    opacity: .5;
    cursor: not-allowed;
}

.task-form-btn-cancel[b-wudc41kylw] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.task-form-btn-cancel:hover[b-wudc41kylw] { background: #e5e7eb; }

.task-form-btn-save[b-wudc41kylw] {
    background: #ee5b5b;
    color: #fff;
}

.task-form-btn-save:hover[b-wudc41kylw] { background: #dc2626; }

@media (max-width: 480px) {
    .task-form-grid[b-wudc41kylw] { grid-template-columns: 1fr; }
    .task-form-field-span2[b-wudc41kylw] { grid-column: 1 / -1; }
}
/* /Components/Layout/LoginLayout/BottomBar.razor.rz.scp.css */
.bottom-bar[b-vxqxpjd6k3] {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    color: #86868b;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    padding: 0.4rem 1rem;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.4;

    border-top: 1px solid rgba(0, 0, 0, .06);
    box-shadow: none;

    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 100;
}

:root[b-vxqxpjd6k3] { --footer-h: 20px; }

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .bottom-bar[b-vxqxpjd6k3] {
        padding: 2px .5rem;
        font-size: 9px;
        line-height: 1.2;
        height: var(--footer-h, 20px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bottom-bar p[b-vxqxpjd6k3] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* /Components/Layout/LoginLayout/LoginLayout.razor.rz.scp.css */
.login-layout[b-hcp5x6m4o6] {
    min-height: 100vh;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f5f5f7;
}
/* /Components/Layout/LoginLayout/TopBar.razor.rz.scp.css */
/* ===========================
   Barre du haut — style Apple
=========================== */
.top-bar[b-kop6697h2s] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 0 1rem;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, .06);

    z-index: 2500;
}

.brand[b-kop6697h2s] {
    display: flex;
    align-items: center;
    padding-left: 0.25rem;
}

/* Logo et avatar collés aux extrémités */
.top-bar[b-kop6697h2s] {
    padding-left: 0;
    padding-right: 0;
}

.brand[b-kop6697h2s] { padding-left: 5px; }

.user-zone[b-kop6697h2s] { padding-right: 5px; }

.icon-actions[b-kop6697h2s] { margin-right: 5px; }

.logo[b-kop6697h2s] {
    width: 35px;
    height: 35px;
    object-fit: contain;
    display: block;
    padding: 3px;
    margin-left: 0.25rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    box-sizing: content-box;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    mix-blend-mode: normal;
    transition: transform .2s ease;
}

.logo:hover[b-kop6697h2s] {
    transform: scale(1.08);
}

.brand-name[b-kop6697h2s] {
    margin-left: 0.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #7f0303;
    white-space: nowrap;
}

.user-name-first[b-kop6697h2s],
.user-name-full[b-kop6697h2s] { text-transform: capitalize; }

/* Ordinateur : nom complet */
.user-name-first[b-kop6697h2s] { display: none; }

/* ===========================
   Zone de recherche
=========================== */
.search-zone[b-kop6697h2s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, .04);
    border-radius: 980px;
    padding: 0.35rem 0.85rem;
    width: 220px;
    max-width: 24vw;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.search-zone:focus-within[b-kop6697h2s] {
    background: rgba(0, 0, 0, .06);
    box-shadow: 0 0 0 1.5px rgba(201, 42, 42, .25);
}

.search-icon[b-kop6697h2s] {
    font-size: 0.78rem;
    color: #86868b;
}

.search-input[b-kop6697h2s] {
    border: none;
    outline: none;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    font-size: 0.8rem;
    color: #1d1d1f;
    width: 100%;
}

.search-input[b-kop6697h2s]::placeholder {
    color: #86868b;
}

/* Le wrapper de recherche a besoin d'un panneau ancré à gauche (pas à droite comme les icônes) */
.search-wrapper[b-kop6697h2s] {
    display: flex;
}

.search-results-panel[b-kop6697h2s] {
    left: 0;
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: min(360px, 90vw);
}

/* ===========================
   Icônes d'action (cloche, message, alerte)
=========================== */
.icon-actions[b-kop6697h2s] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.35rem;
}

.icon-btn[b-kop6697h2s] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6e6e73;
    font-size: 1.15rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

.icon-btn:hover[b-kop6697h2s] {
    background: rgba(0, 0, 0, .05);
    color: #1d1d1f;
    transform: scale(1.05);
}

.icon-badge[b-kop6697h2s] {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #c92a2a;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

/* ===========================
   Zone utilisateur
=========================== */
.user-zone[b-kop6697h2s] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.user-info[b-kop6697h2s] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    overflow: visible;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.user-name[b-kop6697h2s] {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #1d1d1f;
    white-space: nowrap;
}

.user-status[b-kop6697h2s] {
    display: block;
    font-size: 0.7rem;
    color: #86868b;
    font-weight: 400;
}

.user-status[b-kop6697h2s]::before {
    content: "●";
    color: #30d158;
    margin-right: 0.35rem;
    font-size: 0.55rem;
}

.avatar-btn[b-kop6697h2s] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .08);
    transition: box-shadow .2s ease, transform .15s ease;
}

.avatar-btn:hover[b-kop6697h2s] {
    box-shadow: 0 0 0 2px #c92a2a;
    transform: scale(1.05);
}

.avatar-img[b-kop6697h2s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===========================
   Popups (déconnexion / profil)
=========================== */
.popup-overlay[b-kop6697h2s] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.popup-box[b-kop6697h2s] {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    width: 300px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.popup-user[b-kop6697h2s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.popup-avatar[b-kop6697h2s] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .08);
}

.popup-username[b-kop6697h2s] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1d1d1f;
}

.popup-text[b-kop6697h2s] {
    color: #6e6e73;
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}

.popup-actions[b-kop6697h2s] {
    display: flex;
    justify-content: center;
    gap: .6rem;
}

.popup-actions .btn[b-kop6697h2s] {
    flex: 1;
    border-radius: 980px;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    transition: background-color .2s ease, transform .15s ease;
}

.popup-actions .btn-outline-secondary[b-kop6697h2s] {
    background: #f5f5f7;
    color: #1d1d1f;
}

.popup-actions .btn-outline-secondary:hover[b-kop6697h2s] {
    background: #e8e8ed;
}

.popup-actions .btn-danger[b-kop6697h2s] {
    background: #c92a2a;
    color: white;
}

.popup-actions .btn-danger:hover[b-kop6697h2s] {
    background: #a61e1e;
}

.popup-actions .btn:active[b-kop6697h2s] {
    transform: scale(0.97);
}

/* ===========================
   Menus déroulants
=========================== */
.dropdown-wrapper[b-kop6697h2s] {
    position: relative;
}

.dropdown-panel[b-kop6697h2s] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: 280px;
    max-width: min(320px, 92vw);
    max-height: 360px;
    overflow-y: auto;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    z-index: 3000;
    padding: 0.5rem 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.dropdown-panel-right[b-kop6697h2s] {
    left: auto;
    right: 0;
    min-width: 200px;
}

.dropdown-header[b-kop6697h2s] {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1d1d1f;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    margin-bottom: 0.25rem;
}

.dropdown-empty[b-kop6697h2s] {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    color: #86868b;
}

.dropdown-item[b-kop6697h2s] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    background: transparent;
    border: none;
    text-align: left;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color .15s ease;
}

.dropdown-item:hover[b-kop6697h2s] {
    background: rgba(0, 0, 0, .045);
}

.dropdown-item-nom[b-kop6697h2s] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dropdown-item-badge[b-kop6697h2s] {
    background: #c92a2a;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0 5px;
    border-radius: 999px;
    line-height: 15px;
}

.dropdown-item-message[b-kop6697h2s] {
    font-size: 0.75rem;
    color: #6e6e73;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dropdown-item-simple[b-kop6697h2s] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: none;
    text-align: left;
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    color: #1d1d1f;
    cursor: pointer;
    transition: background-color .15s ease;
}

.dropdown-item-simple:hover[b-kop6697h2s] {
    background: rgba(0, 0, 0, .045);
}

.dropdown-item-danger[b-kop6697h2s] {
    color: #c92a2a;
}

.dropdown-divider[b-kop6697h2s] {
    height: 1px;
    background: rgba(0, 0, 0, .06);
    margin: 0.3rem 0;
}

/* ===========================
   Skeleton de chargement
=========================== */
.dropdown-skeleton[b-kop6697h2s] {
    padding: 0.25rem 0;
}

.skeleton-row[b-kop6697h2s] {
    padding: 0.55rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.skeleton-line[b-kop6697h2s] {
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, .06) 25%,
        rgba(0, 0, 0, .12) 37%,
        rgba(0, 0, 0, .06) 63%
    );
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-kop6697h2s 1.4s ease-in-out infinite;
}

.skeleton-line-title[b-kop6697h2s] {
    width: 55%;
}

.skeleton-line-text[b-kop6697h2s] {
    width: 85%;
    height: 8px;
}

@keyframes skeleton-shimmer-b-kop6697h2s {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===========================
   Popup profil — affichage lecture seule, compact
=========================== */
.popup-box-large[b-kop6697h2s] {
    width: 640px;
    max-width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.25rem 1.25rem;
}

/* Popup Profil : photo + nom sur une même ligne, alignés à gauche */
.popup-user-inline[b-kop6697h2s] {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.popup-user-inline .popup-avatar[b-kop6697h2s] {
    width: 40px;
    height: 40px;
}

.profil-edit-sections[b-kop6697h2s] {
    text-align: left;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.5rem;
    margin-bottom: 0.5rem;
    align-items: start;
}

.profil-section[b-kop6697h2s] {
    display: flex;
    flex-direction: column;
}

.profil-section-title[b-kop6697h2s] {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #c92a2a;
    margin-bottom: 0.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* Une ligne = label (colonne fixe) + valeur (colonne alignée) */
.profil-row[b-kop6697h2s] {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.28rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    font-size: 0.8rem;
}

.profil-row:last-child[b-kop6697h2s] {
    border-bottom: none;
}

.profil-label[b-kop6697h2s] {
    color: #86868b;
    font-weight: 500;
    white-space: nowrap;
}

.profil-value[b-kop6697h2s] {
    color: #1d1d1f;
    text-align: left;
    word-break: break-word;
}

.profil-value a[b-kop6697h2s] {
    color: #c92a2a;
    text-decoration: none;
    font-weight: 500;
}

.profil-value a:hover[b-kop6697h2s] {
    text-decoration: underline;
}

/* Lignes qui ont besoin de plus de place (description, galerie) : label au-dessus */
.profil-row-block[b-kop6697h2s] {
    grid-template-columns: 1fr;
    gap: 0.25rem;
}

.profil-row-block .profil-value[b-kop6697h2s] {
    white-space: pre-wrap;
}

.profil-gallery[b-kop6697h2s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.profil-gallery-item[b-kop6697h2s] {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
}

.profil-gallery-item img[b-kop6697h2s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===========================
   Responsive — repasse en 1 colonne sur petit écran
=========================== */
@media (max-width: 640px) {
    .profil-edit-sections[b-kop6697h2s] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .popup-box-large[b-kop6697h2s] {
        width: 95vw;
    }
}

/* ===========================
   Sélecteur de langue : état de chargement
=========================== */
.lang-switch.lang-loading .lang-btn[b-kop6697h2s] {
    color: transparent;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, .06) 25%,
        rgba(0, 0, 0, .12) 37%,
        rgba(0, 0, 0, .06) 63%
    );
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-kop6697h2s 1.4s ease-in-out infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .lang-switch.lang-loading .lang-btn[b-kop6697h2s] { animation: none; }
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
    .top-bar[b-kop6697h2s] { 
        gap: .4rem; 
        justify-content: space-between; 
        height: var(--navbar-h);
        padding-top: 0;
        padding-bottom: 0;}

    /* Logo + nom « Cansecure » visibles aussi sur mobile */
    .brand[b-kop6697h2s] { padding-left: 0; flex: 0 1 auto; min-width: 0; }
    .logo[b-kop6697h2s] { width: 30px; height: 30px; }

    .brand-name[b-kop6697h2s] {
        display: inline;
        margin-left: .4rem;
        font-size: 1.15rem;     /* était .95rem */
        white-space: nowrap;
    }
    .user-info[b-kop6697h2s] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        min-width: 0;
        line-height: 1.15;
    }

    .user-name[b-kop6697h2s] {
        max-width: 90px;            /* évite de pousser les autres boutons */
        overflow: hidden;
        text-overflow: ellipsis;    /* « Rahima Tam… » si trop long */
        font-size: .7rem;
    }

    .user-status[b-kop6697h2s] {
        font-size: .5rem;
    }

    .user-status[b-kop6697h2s]::before {
        font-size: .5rem;
        margin-right: .25rem;
    }

    /* Mobile seulement : pas de recherche, ni d'alertes, ni de notifications (les messages restent) */
    .search-wrapper[b-kop6697h2s],
    .search-zone[b-kop6697h2s] { display: none; }
    .alert-wrapper[b-kop6697h2s],
    .notif-wrapper[b-kop6697h2s] { display: none; }

    .icon-actions[b-kop6697h2s] { gap: .1rem; margin-right: 0; margin-left: auto; }
    .icon-btn[b-kop6697h2s] { width: 30px; height: 30px; font-size: 1rem; }
    .user-zone[b-kop6697h2s] { gap: .3rem; }

    .lang-switch[b-kop6697h2s] {
        display: flex !important;
        flex: 0 0 auto;
        margin-left: auto;          /* poussés à droite, avant les icônes */
    }

    .lang-switch .lang-btn[b-kop6697h2s] {
        padding: .2rem .5rem;
        font-size: .7rem;
    }

    /* Menus déroulants sur toute la largeur de l'écran */
    .dropdown-panel[b-kop6697h2s] {
        position: fixed;
        top: 52px;
        left: 8px;
        right: 8px;
        min-width: 0;
        max-width: none;
    }

    .dropdown-panel.search-results-panel[b-kop6697h2s] { width: auto; }

    .dropdown-panel.dropdown-panel-right[b-kop6697h2s] {
        left: auto;
        right: 8px;
        width: 150px;
        min-width: 0;
        padding: .2rem 0;
        border-radius: 10px;
    }

    .dropdown-panel-right .dropdown-item-simple[b-kop6697h2s] {
        padding: .35rem .7rem;
        gap: .45rem;
        font-size: .7rem;
    }

    .dropdown-panel-right .dropdown-item-simple i[b-kop6697h2s] {
        font-size: .72rem;
        width: .9rem;
        text-align: center;
    }

    .dropdown-panel-right .dropdown-divider[b-kop6697h2s] { margin: .15rem 0; }
}

/* Très petits téléphones : nom un peu plus petit */
@media (max-width: 360px) {
    .brand-name[b-kop6697h2s] { font-size: .85rem; margin-left: .25rem; }
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    .top-bar .lang-switch[b-kop6697h2s] {
        height: 22px;
        padding: 1px;
        gap: 7px;
    }

    .top-bar .lang-switch .lang-btn[b-kop6697h2s] {
        min-width: 0;
        height: 20px;
        padding: 0 .4rem !important;
        font-size: 9px !important;
        line-height: 1;
        border-width: 1px;
    }

    /* Icônes de la barre un peu plus petites aussi */
    .top-bar .icon-btn[b-kop6697h2s] { width: 26px; height: 26px; font-size: .85rem; }
    .top-bar .avatar-btn[b-kop6697h2s] { width: 28px; height: 28px; }
    .top-bar .logo[b-kop6697h2s] { width: 26px; height: 26px; }
    .top-bar .brand-name[b-kop6697h2s] { font-size: 1rem; }   /* était .85rem */

        /* Pastille de notification (le « 1 ») plus petite */
    .top-bar .icon-badge[b-kop6697h2s] {
        top: 0;
        right: 0;
        min-width: 12px;
        height: 12px;
        padding: 0 3px;
        font-size: 8px;
        line-height: 12px;
    }

    /* FR / EN plus petits */
    .top-bar .lang-switch[b-kop6697h2s] { height: 18px; gap: 4px; }
    .top-bar .lang-switch .lang-btn[b-kop6697h2s] {
        height: 18px;
        padding: 0 .3rem !important;
        font-size: 8px !important;
    }

    .user-name-full[b-kop6697h2s]  { display: none; }
    .user-name-first[b-kop6697h2s] { display: block; }
}

@media (max-width: 420px) {
    .user-name[b-kop6697h2s] { max-width: 64px; }
    .brand-name[b-kop6697h2s] { display: none; }
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    .popup-box[b-kop6697h2s] {
        width: 230px;
        max-width: 80vw;
        max-height: 86dvh;
        padding: .9rem .85rem .8rem;
        border-radius: 14px;
    }

    .popup-user[b-kop6697h2s] {
        gap: .3rem;
        margin-bottom: .6rem;
    }

    .popup-avatar[b-kop6697h2s] {
        width: 34px;
        height: 34px;
    }

    .popup-username[b-kop6697h2s] { font-size: .8rem; }

    .popup-text[b-kop6697h2s] {
        margin-bottom: .8rem;
        font-size: .72rem;
        line-height: 1.3;
    }

    .popup-actions[b-kop6697h2s] { gap: .4rem; }

    .popup-actions .btn[b-kop6697h2s] {
        height: 26px !important;
        padding: 0 .6rem !important;
        font-size: .7rem !important;
        line-height: 1;
    }
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    /* Messages, alertes, notifications, résultats de recherche */
    .dropdown-panel[b-kop6697h2s] {
        top: 46px;
        left: auto !important;
        right: 8px !important;
        width: min(240px, calc(100vw - 16px)) !important;
        min-width: 0 !important;
        max-height: 55dvh;
        padding: .25rem 0;
        border-radius: 10px;
    }

    .dropdown-header[b-kop6697h2s] {
        padding: .35rem .7rem;
        font-size: .7rem;
        margin-bottom: .1rem;
    }

    .dropdown-empty[b-kop6697h2s] {
        padding: .45rem .7rem;
        font-size: .68rem;
    }

    .dropdown-item[b-kop6697h2s] {
        padding: .35rem .7rem;
        gap: .1rem;
    }

    .dropdown-item-nom[b-kop6697h2s] {
        font-size: .7rem;
        gap: .3rem;
    }

    .dropdown-item-message[b-kop6697h2s] {
        font-size: .64rem;
    }

    .dropdown-item-badge[b-kop6697h2s] {
        font-size: .58rem;
        line-height: 13px;
        padding: 0 4px;
    }

    .skeleton-row[b-kop6697h2s] { padding: .35rem .7rem; }

    /* Le menu de l'avatar garde sa propre taille, définie plus haut */
    .dropdown-panel.dropdown-panel-right[b-kop6697h2s] {
        width: 140px !important;
    }
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    /* Fenêtre du profil : plus large que la fenêtre de déconnexion */
    .popup-box.popup-box-large[b-kop6697h2s] {
        width: min(340px, 92vw);
        max-width: 92vw;
        max-height: 86dvh;
        padding: .8rem .85rem;
        border-radius: 14px;
    }

    .popup-user-inline[b-kop6697h2s] {
        gap: .45rem;
        margin-bottom: .6rem;
    }

    .popup-user-inline .popup-avatar[b-kop6697h2s] { width: 34px; height: 34px; }
    .popup-user-inline .popup-username[b-kop6697h2s] { font-size: .8rem; }

    /* Une seule colonne de sections */
    .profil-edit-sections[b-kop6697h2s] {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .profil-section-title[b-kop6697h2s] {
        font-size: .62rem;
        margin-bottom: .15rem;
        padding-bottom: .15rem;
    }

    /* Ligne : libellé à gauche, valeur à droite, extrémités */
    .profil-row[b-kop6697h2s] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: .6rem;
        padding: .22rem 0;
        font-size: .68rem;
    }

    .profil-label[b-kop6697h2s] {
        flex: 0 0 auto;
        font-size: .64rem;
        white-space: nowrap;
    }

    .profil-value[b-kop6697h2s] {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Description et galerie : libellé au-dessus, valeur dessous */
    .profil-row.profil-row-block[b-kop6697h2s] {
        display: block;
    }

    .profil-row-block .profil-label[b-kop6697h2s] { display: block; margin-bottom: .1rem; }
    .profil-row-block .profil-value[b-kop6697h2s] { text-align: left; }

    .profil-gallery-item[b-kop6697h2s] { width: 36px; height: 36px; }
}

/* Couleur : fenêtres de profil et de déconnexion, fond opaque */
.popup-box[b-kop6697h2s] {
    background: Canvas;
    color: CanvasText;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.popup-username[b-kop6697h2s] { color: CanvasText; }
.popup-text[b-kop6697h2s]     { color: color-mix(in srgb, CanvasText 60%, Canvas); }
.profil-value[b-kop6697h2s]   { color: CanvasText; }
.profil-label[b-kop6697h2s]   { color: color-mix(in srgb, CanvasText 55%, Canvas); }

.profil-section-title[b-kop6697h2s] {
    border-color: color-mix(in srgb, CanvasText 12%, transparent);
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    /* Fenêtre du profil : plus petite */
    .popup-box.popup-box-large[b-kop6697h2s] {
        width: min(290px, 88vw);
        max-width: 88vw;
        padding: .6rem .7rem;
        border-radius: 12px;
    }

    .popup-user-inline[b-kop6697h2s] { margin-bottom: .4rem; gap: .4rem; }
    .popup-user-inline .popup-avatar[b-kop6697h2s] { width: 28px; height: 28px; }
    .popup-user-inline .popup-username[b-kop6697h2s] { font-size: .72rem; }

    .profil-edit-sections[b-kop6697h2s] { gap: .35rem; }

    .profil-section-title[b-kop6697h2s] {
        font-size: .56rem;
        margin-bottom: .1rem;
        padding-bottom: .1rem;
    }

    .profil-row[b-kop6697h2s] {
        padding: .15rem 0;
        font-size: .6rem;
        gap: .5rem;
    }

    .profil-label[b-kop6697h2s] { font-size: .57rem; }
    .profil-gallery-item[b-kop6697h2s] { width: 30px; height: 30px; }
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    /* Description et galerie : libellé à gauche, valeur (ou tiret) à droite, sur la même ligne */
    .profil-row.profil-row-block[b-kop6697h2s] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: .5rem;
    }

    .profil-row-block .profil-label[b-kop6697h2s] {
        display: inline;
        margin-bottom: 0;
    }

    .profil-row-block .profil-value[b-kop6697h2s] {
        text-align: right;
        line-height: 1.2;
        margin: 0;
    }

    /* Galerie : les miniatures se rangent à droite */
    .profil-row-block .profil-gallery[b-kop6697h2s] { justify-content: flex-end; }
}

/* Plus de traits entre les lignes du profil */
.profil-row[b-kop6697h2s] {
    border-bottom: none !important;
}

/* Profil : le contenu de chaque section défile, la fenêtre reste fixe */
.popup-box.popup-box-large[b-kop6697h2s] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.popup-box-large .profil-edit-sections[b-kop6697h2s] {
    min-height: 0;
    flex: 1 1 auto;
}

.profil-section[b-kop6697h2s] {
    min-height: 0;
}

/* Conteneur défilant : tout sauf le titre de la section */
.profil-section .profil-row[b-kop6697h2s] {
    flex: 0 0 auto;
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    .profil-edit-sections[b-kop6697h2s] {
        grid-template-rows: repeat(2, minmax(0, 1fr));
        max-height: calc(86dvh - 70px);
    }

    .profil-section[b-kop6697h2s] {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* Le titre reste visible en haut pendant le défilement */
    .profil-section-title[b-kop6697h2s] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: Canvas;
    }
}

/* Ordinateur : hauteur limitée par section */
@media (min-width: 769px) and (min-height: 501px) {
    .profil-section[b-kop6697h2s] {
        max-height: 55vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ===========================
   Structure principale
   =========================== */

.app-layout[b-zhmpnl7zvi] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 80px;
    padding-right: 70px;
    background: Canvas;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.page[b-zhmpnl7zvi] {
    display: flex;
    flex: 1;
    position: relative;
    --navbar-h: 40px;
    --footer-h: 20px;
}

main[b-zhmpnl7zvi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-left: 250px;
}

/* ===========================
   Barre latérale
   =========================== */

   .sidebar[b-zhmpnl7zvi],
.top-row[b-zhmpnl7zvi],
.sub-toolbar[b-zhmpnl7zvi] {
    background: color-mix(in srgb, Canvas 78%, transparent);
    color: CanvasText;
}

.sidebar[b-zhmpnl7zvi] {
    position: fixed;
    top: 25px;
    left: 0;
    width: 250px;
    height: calc(100vh - 55px);

    display: flex;
    flex-direction: column;
    overflow: hidden;

    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border-right: 1px solid rgba(0, 0, 0, .06);

    z-index: 900;
}

/* ===========================
   Barre d'outils contextuelle
   =========================== */

.top-row[b-zhmpnl7zvi] {
    position: fixed;

    top: 45px;
    left: 260px;
    right: 70px;

    height: 44px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 20px;
    border-radius: 0 0 14px 14px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border: 1px solid rgba(0, 0, 0, .08);
    border-top: none;

    z-index: 900;
    gap: 8px;
}

.btn-ico[b-zhmpnl7zvi] { display: inline-block; margin-right: .3rem; font-size: 12px; }

.btn-ico[b-zhmpnl7zvi] {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-variant-emoji: emoji;          /* force la version couleur, pas le glyphe noir */
    font-style: normal;
    -webkit-text-fill-color: initial;
    color: initial;
    text-shadow: none;
    filter: none;
}

.btn-label[b-zhmpnl7zvi] { display: inline; }

/* ===========================
   Texte de debug — à gauche
   =========================== */

.debug-info[b-zhmpnl7zvi] {
    position: static;
    font-size: 0.7rem;
    color: #a1a1a6;
    font-weight: 400;
    white-space: nowrap;
    order: 1;
}

/* ===========================
   Groupe de boutons — à droite
   =========================== */

.toolbar-actions[b-zhmpnl7zvi] {
    display: flex;
    gap: 8px;
    align-items: center;
    order: 2;
    margin-left: auto;
}

/* ===========================
   Deuxième barre
   =========================== */

.sub-toolbar[b-zhmpnl7zvi] {
    position: fixed;

    top: 140px;

    left: 250px;
    right: 70px;

    height: 50px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 20px;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);

    border-bottom: 1px solid rgba(0, 0, 0, .06);

    z-index: 900;
}

/* ===========================
   Contenu
   =========================== */

.content[b-zhmpnl7zvi] {
    margin-top: 110px;
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* ===========================
   Bouton À propos
   =========================== */

.about-btn[b-zhmpnl7zvi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;

    border: none;
    border-radius: 50%;

    background: #c92a2a;
    color: white;

    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    transition: background-color .2s ease, transform .15s ease;

    cursor: pointer;

    margin-left: auto;
}

.about-btn:hover[b-zhmpnl7zvi] {
    background: #a61e1e;
    transform: scale(1.05);
}

.about-btn:active[b-zhmpnl7zvi] {
    transform: scale(.95);
}

/* ===========================
   Boutons style Apple
   =========================== */

.btn[b-zhmpnl7zvi] {
    background: #ffffff;
    color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 980px;
    padding: 0.rem 1.1rem;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: background-color .2s ease,
                color .2s ease,
                border-color .2s ease,
                box-shadow .2s ease,
                transform .15s ease;
    cursor: pointer;
    height: 25px;
}

.btn:hover[b-zhmpnl7zvi] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #f5b8b8;
    box-shadow: 0 2px 8px rgba(201, 42, 42, .12);
}

.btn:active[b-zhmpnl7zvi] {
    transform: scale(0.96);
    background: #fbdcdc;
}

.btn:focus[b-zhmpnl7zvi] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 42, 42, .15);
}

/* Neutralise les couleurs Bootstrap pour qu'elles suivent le style Apple */
.btn-primary[b-zhmpnl7zvi],
.btn-success[b-zhmpnl7zvi],
.btn-warning[b-zhmpnl7zvi],
.btn-info[b-zhmpnl7zvi],
.btn-secondary[b-zhmpnl7zvi],
.btn-dark[b-zhmpnl7zvi],
.btn-danger[b-zhmpnl7zvi],
.btn-outline-secondary[b-zhmpnl7zvi] {
    background: #ffffff;
    color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.btn-primary:hover[b-zhmpnl7zvi],
.btn-success:hover[b-zhmpnl7zvi],
.btn-warning:hover[b-zhmpnl7zvi],
.btn-info:hover[b-zhmpnl7zvi],
.btn-secondary:hover[b-zhmpnl7zvi],
.btn-dark:hover[b-zhmpnl7zvi],
.btn-danger:hover[b-zhmpnl7zvi],
.btn-outline-secondary:hover[b-zhmpnl7zvi] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #f5b8b8;
    box-shadow: 0 2px 8px rgba(201, 42, 42, .12);
}

/* ===========================
   Responsive
   =========================== */

.menu-toggle[b-zhmpnl7zvi] { display: none; }

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    /* Le menu latéral devient un tiroir : plus de marges */
    main[b-zhmpnl7zvi] {
        margin-left: 0;
        margin-right: 0;
        min-width: 0;
    }

    /* Bouton menu tout à gauche (écrase le px-4 si tu le gardes) */
    .top-row[b-zhmpnl7zvi] {
        padding-left: 6px !important;
        padding-right: 8px !important;
    }

    /* Boutons icônes */
    .toolbar-actions .btn[b-zhmpnl7zvi] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;          /* était 36px */
        height: 20px;
        padding: 0;
        border-radius: 50%;
    }

    .toolbar-actions .btn:disabled[b-zhmpnl7zvi] {
        opacity: .4;
        filter: none;
        cursor: not-allowed;
    }

    .toolbar-actions .btn .btn-ico[b-zhmpnl7zvi] {
        display: inline-block;
        font-size: 15px;               /* taille moyenne */
        line-height: 1;
        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    }
    .toolbar-actions .btn .btn-label[b-zhmpnl7zvi] { display: none; }

    /* Fond neutre : les emojis apportent la couleur */
    .toolbar-actions .btn[b-zhmpnl7zvi] { background: #f5f5f7; border-color: transparent; }
    .toolbar-actions .btn:hover[b-zhmpnl7zvi] { background: #fdecec; }
    .toolbar-actions .btn:active[b-zhmpnl7zvi] { transform: scale(.92); background: #fbdcdc; }
    /* .toolbar-actions .btn:disabled { opacity: .35; filter: grayscale(1); cursor: not-allowed; } */

    /* Bouton des tirets : petit, rouge clair */
    .menu-toggle[b-zhmpnl7zvi] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        padding: 0;
        background: #fff;
        color: #991b1b;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        cursor: pointer;
    }

    

    .sidebar.open[b-zhmpnl7zvi] {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, .2);
    }

    .sidebar[b-zhmpnl7zvi] {
    display: flex;
    top: var(--navbar-h);
    bottom: var(--footer-h, 26px);   /* au-dessus du pied de page */
    height: auto;                    /* top + bottom bornent la hauteur */
    width: min(78vw, 260px);
    background: rgba(255, 255, 255, .97);
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 1500;
    border-radius: 0 0 18px 0;   /* coins arrondis à droite */
    overflow: hidden;               /* le contenu suit l'arrondi */
    border-right: 0;                /* retire le filet droit, qui ne suit pas l'arrondi */
}

.sidebar-backdrop[b-zhmpnl7zvi] {
    position: fixed;
    inset: var(--navbar-h) 0 0 0;
    color: #1d1d1f;
    background: transparent;
    z-index: 1400;
}

.top-row[b-zhmpnl7zvi],
.sub-toolbar[b-zhmpnl7zvi] {
    top: var(--navbar-h);
    left: 0;
    right: 0;
    padding: 0 8px;
    border-radius: 0;
}

.content[b-zhmpnl7zvi] { margin-top: calc(var(--navbar-h) + 52px); padding: 0; overflow-x: hidden; }    


    .debug-info[b-zhmpnl7zvi] { display: none; }

    /* .toolbar-actions {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    } */

    .toolbar-actions[b-zhmpnl7zvi]::-webkit-scrollbar { display: none; }
    /* .toolbar-actions .btn { flex: 0 0 auto; white-space: nowrap; } */

    .toolbar-actions[b-zhmpnl7zvi] { margin-left: 0; }

    .toolbar-actions .btn[b-zhmpnl7zvi] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border-radius: 50%;
    }

    .toolbar-actions .btn .btn-ico[b-zhmpnl7zvi] {
        display: inline-block;
        font-size: 25px;
        line-height: 1;
        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    }

    .toolbar-actions .btn:disabled[b-zhmpnl7zvi] { opacity: .4; filter: none; cursor: not-allowed; }

    .content[b-zhmpnl7zvi] {
        margin-top: 100px;
        padding: 0;
        overflow-x: hidden;
    }
}

/* ===========================
   Paysage téléphone : plus de bande blanche en haut
   La barre d'outils devient transparente (le diagramme passe derrière) et
   ses boutons restent hors de la zone de sécurité (Dynamic Island / encoche).
   =========================== */
    @media (max-height: 500px) and (orientation: landscape) {

        .top-row[b-zhmpnl7zvi] {
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: none;
            box-shadow: none;
            padding-left: calc(6px + env(safe-area-inset-left, 0px)) !important;
            padding-right: calc(8px + env(safe-area-inset-right, 0px)) !important;
            /* laisse passer les touchers vers le diagramme entre les boutons */
            pointer-events: none;
        }

        .top-row .menu-toggle[b-zhmpnl7zvi],
        .top-row .toolbar-actions[b-zhmpnl7zvi] { pointer-events: auto; }
    }

    #blazor-error-ui[b-zhmpnl7zvi] {
        display: none;              /* Blazor la rend visible seulement en cas d'erreur */
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        padding: .6rem 1.25rem;
        background: #fff3cd;
        color: #1d1d1f;
        font-size: .8rem;
        box-shadow: 0 -1px 6px rgba(0, 0, 0, .2);
    }

    #blazor-error-ui .reload[b-zhmpnl7zvi] { margin-left: .5rem; }

    /* Icônes colorées par menu */
    .toolbar-actions .btn-primary > i.bi[b-zhmpnl7zvi]   { color: #0a84ff; }  /* Assistance */
    .toolbar-actions .btn-success > i.bi[b-zhmpnl7zvi]   { color: #30a14e; }  /* Guide */
    .toolbar-actions .btn-warning > i.bi[b-zhmpnl7zvi]   { color: #ff9f0a; }  /* Emplois */
    .toolbar-actions .btn-info > i.bi[b-zhmpnl7zvi]      { color: #32ade6; }  /* Agents */
    .toolbar-actions .btn-secondary > i.bi[b-zhmpnl7zvi] { color: #86868b; }  /* Services */
    .toolbar-actions .btn-dark > i.bi[b-zhmpnl7zvi]      { color: #5e5ce6; }  /* Ressources */
    .toolbar-actions .btn-danger > i.bi[b-zhmpnl7zvi]    { color: #c92a2a; }  /* Processus */

    /* Fond teinté léger, comme les boutons actifs de la barre droite */
    .toolbar-actions .btn-primary[b-zhmpnl7zvi]   { background: #eaf3ff; border-color: transparent; }
    .toolbar-actions .btn-success[b-zhmpnl7zvi]   { background: #e8f6ec; border-color: transparent; }
    .toolbar-actions .btn-warning[b-zhmpnl7zvi]   { background: #fff4e0; border-color: transparent; }
    .toolbar-actions .btn-info[b-zhmpnl7zvi]      { background: #e6f5fc; border-color: transparent; }
    .toolbar-actions .btn-secondary[b-zhmpnl7zvi] { background: #f5f5f7; border-color: transparent; }
    .toolbar-actions .btn-dark[b-zhmpnl7zvi]      { background: #eeeefd; border-color: transparent; }
    .toolbar-actions .btn-danger[b-zhmpnl7zvi]    { background: #fdecec; border-color: transparent; }

    /* Survol et appui : accent rouge comme la barre droite */
    .toolbar-actions .btn:hover > i.bi[b-zhmpnl7zvi],
    .toolbar-actions .btn:active > i.bi[b-zhmpnl7zvi] { color: #c92a2a; }

    .toolbar-actions .btn:active[b-zhmpnl7zvi] { transform: scale(.92); }

    /* Bouton désactivé (ex. « + Element » sans sélection) */
    .toolbar-actions .btn:disabled[b-zhmpnl7zvi] {
        opacity: .35;
        filter: grayscale(1);
        cursor: not-allowed;
    }

    
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ===========================
   NAVIGATION : style Apple
=========================== */

.nav-scrollable[b-kpxwsvfoc2] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: transparent;
    padding-top: 6rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
    border-right: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 1px 0 0 rgba(0, 0, 0, .02);
}

.nav-item[b-kpxwsvfoc2] {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    font-size: .775rem;
    padding: 0;
    margin-bottom: .15rem;
}

.nav-item:last-of-type[b-kpxwsvfoc2] { margin-bottom: .5rem; }

/* Séparateurs de groupe */
.nav-divider[b-kpxwsvfoc2] {
    height: 1px;
    margin: .6rem 1.1rem .7rem;
    background: rgba(0, 0, 0, .07);
    flex-shrink: 0;
}

/* DashBoard mis en avant */
.nav-item:first-of-type[b-kpxwsvfoc2]  .nav-link { font-weight: 600; color: #1d1d1f; }
.nav-item:first-of-type[b-kpxwsvfoc2]  .nav-link .bi { background-color: #1d1d1f; }

/* ===========================
   Icônes
=========================== */

.bi[b-kpxwsvfoc2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: .6rem;
    flex-shrink: 0;
    background-color: #86868b;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: background-color .2s ease;
}

.nav-item[b-kpxwsvfoc2]  a.active .bi,
.menu-button.active-parent .bi[b-kpxwsvfoc2],
.nav-item[b-kpxwsvfoc2]  .nav-link:hover .bi,
.menu-button:hover .bi[b-kpxwsvfoc2] {
    background-color: #c92a2a;
}

/* >>> GARDE ICI tes règles .bi-house-fill, .bi-newspaper, .bi-bar-chart-fill,
       .bi-people-fill, .bi-person-badge-fill, .bi-gear-fill, .bi-map-fill,
       .bi-diagram-3-fill, .bi-sliders, .bi-folder-fill, .bi-signpost-2-fill,
       .bi-book-fill, .bi-briefcase-fill (mask-image inchangés) <<< */

/* ===========================
   Liens et boutons
=========================== */

.nav-item[b-kpxwsvfoc2]  .nav-link,
.menu-button[b-kpxwsvfoc2] {
    height: 2.25rem;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 .9rem;
    gap: 8px;
    color: #1d1d1f;
    background: transparent;
    border: 0;
    border-radius: 10px;
    text-decoration: none;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.01em;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background-color .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-item[b-kpxwsvfoc2]  .nav-link:active,
.menu-button:active[b-kpxwsvfoc2] { background: #ececee; transform: scale(.99); }

.nav-item[b-kpxwsvfoc2]  a.active,
.menu-button.active-parent[b-kpxwsvfoc2] { background: #fdecec; color: #c92a2a; font-weight: 600; }

.nav-item[b-kpxwsvfoc2]  .nav-link:hover,
.menu-button:hover[b-kpxwsvfoc2] { background: #f5f5f7; color: #c92a2a; }

.nav-item[b-kpxwsvfoc2]  .nav-link:focus-visible,
.menu-button:focus-visible[b-kpxwsvfoc2] { outline: none; background: #f5f5f7; color: #c92a2a; }

/* ===========================
   Chevron
=========================== */

.arrow[b-kpxwsvfoc2] {
    margin-left: auto;
    width: .65rem;
    height: .65rem;
    flex-shrink: 0;
    background-color: #a1a1a6;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    transition: transform .25s ease, background-color .15s ease;
}

.arrow.open[b-kpxwsvfoc2] { transform: rotate(90deg); }

.menu-button:hover .arrow[b-kpxwsvfoc2],
.menu-button.active-parent .arrow[b-kpxwsvfoc2] { background-color: #c92a2a; }

/* ===========================
   Sous-menus
=========================== */

.submenu[b-kpxwsvfoc2] {
    display: flex;
    flex-direction: column;
    margin-left: 2.65rem;
    margin-top: .2rem;
    margin-bottom: .5rem;
    gap: .1rem;
}

.submenu[b-kpxwsvfoc2]  a {
    display: block;
    padding: .4rem .7rem;
    border-radius: 8px;
    background: transparent;
    color: #6e6e73;
    font-size: .72rem;
    font-weight: 400;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease;
}

.submenu[b-kpxwsvfoc2]  a:hover,
.submenu[b-kpxwsvfoc2]  a:focus-visible { outline: none; background: #f5f5f7 !important; color: #c92a2a; }

.submenu[b-kpxwsvfoc2]  a.active { background: #fdecec !important; color: #c92a2a; font-weight: 600; }

/* ===========================
   Pied de menu (Préférences / Abonnement)
=========================== */

.nav-footer[b-kpxwsvfoc2] {
    flex-shrink: 0;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding-bottom: .5rem;
}

.nav-footer .nav-divider[b-kpxwsvfoc2] { margin-top: 0; }

/* Entrées verrouillées */
.nav-locked[b-kpxwsvfoc2],
.menu-button:disabled[b-kpxwsvfoc2] {
    opacity: .4;
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
}

.sub-locked[b-kpxwsvfoc2] {
    display: block;
    padding: .4rem .7rem;
    font-size: .72rem;
    color: #6e6e73;
    opacity: .4;
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : menu compact, style Apple
   (un seul bloc, remplace tous les blocs mobiles précédents)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Conteneur borné : le menu défile, le pied reste visible */
    .sidebar[b-kpxwsvfoc2] {
        display: flex;
        flex-direction: column;
        top: 94px;
        bottom: 0;              /* mets 90px si Abonnement passe sous la barre Safari */
        height: auto;
        max-height: none;
        overflow: hidden;
    }

    .nav-scrollable[b-kpxwsvfoc2] {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: .4rem;
        border-top: 0;
        border-right: none;
        box-shadow: none;
    }

    .nav-footer[b-kpxwsvfoc2] {
        flex: 0 0 auto;
        background: #fff;
        border-top: .5px solid rgba(0, 0, 0, .1);
        padding-bottom: calc(.25rem + env(safe-area-inset-bottom, 0px));
        box-shadow: none;
    }

    .nav-footer .nav-divider[b-kpxwsvfoc2] { display: none; }

    /* Entrées */
    .nav-item[b-kpxwsvfoc2] {
        font-size: 12px;
        margin-bottom: 0;
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    .nav-item:last-of-type[b-kpxwsvfoc2] { margin-bottom: 0; }

    .nav-item[b-kpxwsvfoc2]  .nav-link,
    .nav-item[b-kpxwsvfoc2]  .nav-link *,
    .menu-button[b-kpxwsvfoc2] {
        font-size: 12px !important;
        font-weight: 400;
    }

    .nav-item[b-kpxwsvfoc2]  .nav-link,
    .menu-button[b-kpxwsvfoc2] {
        height: 30px;
        padding: 0 .5rem;
        gap: 5px;
        border-radius: 8px;
    }

    .nav-item:first-of-type[b-kpxwsvfoc2]  .nav-link { font-weight: 500; }

    /* Actif : teinte légère */
    .nav-item[b-kpxwsvfoc2]  a.active,
    .menu-button.active-parent[b-kpxwsvfoc2] { font-weight: 500; }

    /* Icônes et chevrons */
    .bi[b-kpxwsvfoc2] { width: 14px; height: 14px; margin-right: .3rem; }
    .arrow[b-kpxwsvfoc2] { width: 8px; height: 8px; }

    /* Séparateurs */
    .nav-divider[b-kpxwsvfoc2] { margin: .25rem .9rem; height: .5px; background: rgba(0, 0, 0, .1); }

    /* Sous-menus */
    .submenu[b-kpxwsvfoc2] { margin-left: 1.9rem; margin-top: 0; margin-bottom: .2rem; gap: 0; }

    .submenu[b-kpxwsvfoc2]  a,
    .sub-locked[b-kpxwsvfoc2] {
        font-size: 11px !important;
        padding: 5px .5rem;
        border-radius: 6px;
        line-height: 1.2;
    }

    .submenu[b-kpxwsvfoc2]  a.active { font-weight: 500; }
}

/* ==========================================================
   ICÔNES MULTICOLORES (emoji Apple, aucune modification du .razor)
   On désactive le masque monochrome et on affiche un emoji à la place
========================================================== */
.nav-item .bi[b-kpxwsvfoc2] {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background: none !important;
    background-color: transparent !important;
    font-style: normal;
    font-size: 12px;
    line-height: 1;
    width: 20px;
    height: 20px;
}

.nav-item .bi[b-kpxwsvfoc2]::before {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    display: block;
}

.nav-item .bi-house-fill[b-kpxwsvfoc2]::before        { content: "🏠"; }  /* DashBoard */
.nav-item .bi-book-fill[b-kpxwsvfoc2]::before         { content: "📖"; }  /* Guide */
.nav-item .bi-person-badge-fill[b-kpxwsvfoc2]::before { content: "🪪"; }  /* Assistance */
.nav-item .bi-briefcase-fill[b-kpxwsvfoc2]::before    { content: "💼"; }  /* Emplois */
.nav-item .bi-map-fill[b-kpxwsvfoc2]::before          { content: "🗺️"; }  /* Carte */
.nav-item .bi-people-fill[b-kpxwsvfoc2]::before       { content: "👥"; }  /* Services */
.nav-item .bi-diagram-3-fill[b-kpxwsvfoc2]::before    { content: "🧩"; }  /* Processus */
.nav-item .bi-folder-fill[b-kpxwsvfoc2]::before       { content: "📁"; }  /* Ressources */
.nav-item .bi-bar-chart-fill[b-kpxwsvfoc2]::before    { content: "📊"; }  /* Statistiques */
.nav-item .bi-sliders[b-kpxwsvfoc2]::before           { content: "🎛️"; }  /* Préférences */
.nav-item .bi-signpost-2-fill[b-kpxwsvfoc2]::before   { content: "💳"; }  /* Abonnement */
.nav-item .bi-gear-fill[b-kpxwsvfoc2]::before         { content: "⚙️"; }
.nav-item .bi-newspaper[b-kpxwsvfoc2]::before         { content: "📰"; }

/* Mobile : taille adaptée au menu compact */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .nav-item .bi[b-kpxwsvfoc2] {
        font-size: 14px;
        width: 18px;
        height: 18px;
    }
}

/* ==========================================================
   MOBILE : boutons plus bas, espacés les uns des autres
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Hauteur réduite des boutons principaux */
    .nav-item[b-kpxwsvfoc2]  .nav-link,
    .menu-button[b-kpxwsvfoc2] {
        height: 26px;
        padding: 0 .5rem;
    }

    /* Espace entre les boutons */
    .nav-item[b-kpxwsvfoc2] {
        margin-bottom: 4px;
    }

    .nav-item:last-of-type[b-kpxwsvfoc2] {
        margin-bottom: 4px;
    }

    /* Sous-menus : lignes plus basses, petit espace entre elles */
    .submenu[b-kpxwsvfoc2] {
        gap: 2px;
        margin-bottom: 4px;
    }

    .submenu[b-kpxwsvfoc2]  a,
    .sub-locked[b-kpxwsvfoc2] {
        padding: 3px .5rem;
        line-height: 1.2;
    }

    /* Pied de menu : même rythme */
    .nav-footer .nav-item[b-kpxwsvfoc2] {
        margin-bottom: 4px;
    }
}

/* ==========================================================
   MOBILE : le pied (Préférences + Abonnement) reste au-dessus de la barre Safari
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Le conteneur s'arrête avant la barre flottante de Safari */
    .sidebar[b-kpxwsvfoc2] {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: none !important;
        overflow: hidden;
    }

    /* Le menu défile, le pied garde sa hauteur naturelle */
    .nav-scrollable[b-kpxwsvfoc2] {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
    }

    .nav-footer[b-kpxwsvfoc2] {
        flex: 0 0 auto;
        padding-bottom: 4px;
    }

    .nav-footer .nav-item[b-kpxwsvfoc2] {
        margin-bottom: 2px;
    }
}

/* ==========================================================
   MOBILE : espaces entre les boutons, et entre un bouton et son sous-menu
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Boutons principaux : plus bas */
    .nav-item[b-kpxwsvfoc2]  .nav-link,
    .nav-item .menu-button[b-kpxwsvfoc2] {
        height: 26px !important;
    }

    /* Espace entre chaque entrée du menu */
    .nav-item[b-kpxwsvfoc2] {
        margin-bottom: 6px !important;
    }

    /* Espace entre le bouton parent et son sous-menu */
    .nav-item .submenu[b-kpxwsvfoc2] {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        gap: 4px !important;
    }

    /* Sous-menus : lignes basses */
    .nav-item .submenu[b-kpxwsvfoc2]  a,
    .nav-item .submenu .sub-locked[b-kpxwsvfoc2] {
        padding: 3px .5rem !important;
        line-height: 1.2;
    }
}

/* ==========================================================
   MOBILE : Préférences + Abonnement en bas, toujours visibles
   La liste occupe tout l'espace restant, le pied reste dessous.
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    :root[b-kpxwsvfoc2] {
        --menu-top: 10px;      /* haut de l'écran → haut du menu (en-tête + marge) */
        --menu-bottom: 100px;   /* barre flottante Safari + marge basse */
        --menu-footer: 18px;    /* hauteur du pied : Préférences + Abonnement */
    }

    /* Zone liste + pied : hauteur exacte de l'espace visible */
    .nav-scrollable[b-kpxwsvfoc2] {
        flex: 0 0 auto !important;
        height: calc(100svh - var(--menu-top) - var(--menu-bottom) - var(--menu-footer)) !important;
        max-height: none !important;
        min-height: 0;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .nav-footer[b-kpxwsvfoc2] {
        position: static !important;
        flex: 0 0 auto !important;
        height: var(--menu-footer);
        box-sizing: border-box;
        padding: 4px 0 !important;
        margin: 0 !important;
        background: #fff;
        border-top: .5px solid rgba(0, 0, 0, .1);
    }

    .nav-footer .nav-item[b-kpxwsvfoc2] { margin-bottom: 2px !important; }
}

/* ==========================================================
   MOBILE : pied (Préférences + Abonnement) toujours visible
   Hauteur du conteneur = écran visible - en-tête - barre Safari
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    :has(> .nav-scrollable):has(> .nav-footer)[b-kpxwsvfoc2] {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100svh - 130px - 100px) !important;
        max-height: calc(100svh - 130px - 100px) !important;
        overflow: hidden !important;
    }

    .nav-scrollable[b-kpxwsvfoc2] {
        flex: 1 1 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        /* margin-bottom: 100px; */
    }

    .nav-footer[b-kpxwsvfoc2] {
        flex: 0 0 auto !important;
        height: auto !important;
        padding: 4px 0 6px !important;
        background: #fff;
    }

    .nav-footer .nav-item[b-kpxwsvfoc2] { margin-bottom: 2px !important; }
}

/* ==========================================================
   MOBILE : barre du haut plus basse
   Remplace .top-row / header par la vraie classe de ta barre
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    header[b-kpxwsvfoc2],
    .top-row[b-kpxwsvfoc2],
    .navbar[b-kpxwsvfoc2],
    .app-header[b-kpxwsvfoc2] {
        height: 52px !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: center;
    }

    /* Logo et titre */
    header img[b-kpxwsvfoc2], .top-row img[b-kpxwsvfoc2], .navbar img[b-kpxwsvfoc2] { height: 28px; width: auto; }
    header .brand[b-kpxwsvfoc2], .top-row .brand[b-kpxwsvfoc2], .navbar-brand[b-kpxwsvfoc2] { font-size: 16px; }

    /* Boutons FR / EN */
    header button[b-kpxwsvfoc2], .top-row button[b-kpxwsvfoc2] { min-height: 0; padding: 2px 10px; font-size: 12px; }

    /* Avatar */
    header .avatar[b-kpxwsvfoc2], .top-row .avatar[b-kpxwsvfoc2],
    header .avatar img[b-kpxwsvfoc2], .top-row .avatar img[b-kpxwsvfoc2] { width: 32px; height: 32px; }

    /* Icône courrier */
    header svg[b-kpxwsvfoc2], .top-row svg[b-kpxwsvfoc2] { width: 20px; height: 20px; }
}

/* ==========================================================
   MENU MOBILE : polices réduites
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .nav-item[b-kpxwsvfoc2] { font-size: 11px; }

    .nav-item[b-kpxwsvfoc2]  .nav-link,
    .nav-item[b-kpxwsvfoc2]  .nav-link *,
    .menu-button[b-kpxwsvfoc2] {
        font-size: 11px !important;
    }

    .submenu[b-kpxwsvfoc2]  a,
    .sub-locked[b-kpxwsvfoc2] {
        font-size: 10px !important;
    }

    /* Icônes et chevrons proportionnés */
    .nav-item .bi[b-kpxwsvfoc2] { font-size: 12px; width: 16px; height: 16px; }
    .arrow[b-kpxwsvfoc2] { width: 7px; height: 7px; }
}
/* /Components/Layout/RightNavMenu.razor.rz.scp.css */
/* ===========================
   BARRE D'ACTIONS FLOTTANTE — style Apple
=========================== */

.right-navbar[b-bmmphcua1k] {
  position: fixed;
  right: 0;
  top: 45px;
  width: 52px;
  height: calc(100vh - 75px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 1cm .35rem;

  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-left: 1px solid rgba(0, 0, 0, .08);

  overflow: visible;
  z-index: 2000;
}

.navbar-top[b-bmmphcua1k] {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.navbar-scroll[b-bmmphcua1k] {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.navbar-scroll[b-bmmphcua1k],
.menu-actions[b-bmmphcua1k] {
  overflow: visible;
}

.navbar-scroll[b-bmmphcua1k]::-webkit-scrollbar {
  display: none;
}

.navbar-bottom[b-bmmphcua1k] {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===========================
   Boutons d'action — gris Apple, accent au survol
=========================== */

.action-btn[b-bmmphcua1k] {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #86868b;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.action-btn svg[b-bmmphcua1k] {
  width: 19px;
  height: 19px;
}

.action-btn:hover[b-bmmphcua1k] {
  background-color: #f5f5f7;
  color: #c92a2a;
}

.action-btn:active[b-bmmphcua1k] {
  background-color: #fdecec;
  color: #c92a2a;
  transform: scale(.92);
}

.action-btn:focus-visible[b-bmmphcua1k] {
  outline: none;
  background-color: #f5f5f7;
  color: #c92a2a;
}

.action-btn-active[b-bmmphcua1k] {
  background-color: #fdecec !important;
  color: #c92a2a !important;
}

/* ===========================
   Groupe d'actions — séparateur discret
=========================== */

.menu-actions[b-bmmphcua1k] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .5rem 0;
  animation: menu-actions-in-b-bmmphcua1k .18s ease both;
}

.menu-actions[b-bmmphcua1k]::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, .08);
}

@keyframes menu-actions-in-b-bmmphcua1k {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================
   Panneau d'assistance — même design que CanBot
=========================== */

.cs-panel[b-bmmphcua1k] {
  position: fixed;
  right: 60px;
  bottom: 100px;
  z-index: 1800;
  width: 320px;
  max-width: calc(100vw - 80px);
  height: 400px;
  max-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel, #fff) 94%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--ink, #1d1d1f);
  border: 1px solid var(--line, rgba(0, 0, 0, .08));
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.01em;
  animation: cs-in-b-bmmphcua1k .18s ease both;
}

@keyframes cs-in-b-bmmphcua1k {
  from { opacity: 0; transform: translateY(8px); }
}

.cs-head[b-bmmphcua1k] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, .08));
}

.cs-avatar[b-bmmphcua1k] {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent, #b01e1e);
  color: #fff;
}

.cs-id[b-bmmphcua1k] { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.cs-id strong[b-bmmphcua1k] { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-id small[b-bmmphcua1k] { font-size: .6rem; color: var(--muted, #6e6e73); }

.cs-x[b-bmmphcua1k] {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted, #6e6e73);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.cs-x:hover[b-bmmphcua1k] { background: var(--alt, #f5f5f7); color: var(--accent, #b01e1e); }

/* ---------- Messages (le défilement vers le bas reste géré par navbarSupport.scrollToBottom) ---------- */

.cs-scroll[b-bmmphcua1k] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.cs-list[b-bmmphcua1k] {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .6rem .75rem;
}

.cs-empty[b-bmmphcua1k] { margin: auto; padding: 1rem 0; font-size: .7rem; color: var(--muted, #6e6e73); text-align: center; }

.cs-msg[b-bmmphcua1k] { display: flex; flex-direction: column; max-width: 86%; }
.cs-mine[b-bmmphcua1k] { align-self: flex-end; align-items: flex-end; }
.cs-bot[b-bmmphcua1k] { align-self: flex-start; align-items: flex-start; }

.cs-bubble[b-bmmphcua1k] {
  padding: .35rem .6rem;
  border-radius: 12px;
  font-size: .7rem;
  line-height: 1.35;
  word-break: break-word;
}

.cs-mine .cs-bubble[b-bmmphcua1k] {
  background: var(--accent, #b01e1e);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.cs-bot .cs-bubble[b-bmmphcua1k] {
  background: var(--alt, #f5f5f7);
  color: var(--ink, #1d1d1f);
  border-bottom-left-radius: 4px;
}

.cs-time[b-bmmphcua1k] { margin-top: 2px; padding: 0 .3rem; font-size: .56rem; color: var(--muted, #6e6e73); }

/* ---------- Réponses rapides ---------- */

.cs-chips[b-bmmphcua1k] { display: flex; flex-wrap: wrap; gap: .3rem; }

.cs-chip[b-bmmphcua1k] {
  padding: .18rem .55rem;
  border: 1px solid var(--accent, #b01e1e);
  border-radius: 980px;
  background: transparent;
  color: var(--accent, #b01e1e);
  font: inherit;
  font-size: .64rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.cs-chip:hover[b-bmmphcua1k] { background: var(--accent, #b01e1e); color: #fff; }

/* ---------- Saisie ---------- */

.cs-error[b-bmmphcua1k] {
  flex-shrink: 0;
  padding: .25rem .75rem;
  background: #fdecec;
  color: #c92a2a;
  font-size: .62rem;
}

.cs-input[b-bmmphcua1k] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .65rem;
  border-top: 1px solid var(--line, rgba(0, 0, 0, .08));
}

.cs-field[b-bmmphcua1k] {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 .65rem;
  border: 1px solid var(--line, rgba(0, 0, 0, .1));
  border-radius: 980px;
  background: var(--alt, #f5f5f7);
  color: var(--ink, #1d1d1f);
  font: inherit;
  font-size: .72rem;
  outline: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.cs-field:focus[b-bmmphcua1k] { border-color: var(--accent, #b01e1e); background: var(--panel, #fff); }

.cs-send[b-bmmphcua1k] {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent, #b01e1e);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}

.cs-send:hover:not(:disabled)[b-bmmphcua1k] { background: var(--accent-hover, #8f1717); }
.cs-send:active:not(:disabled)[b-bmmphcua1k] { transform: scale(.92); }
.cs-send:disabled[b-bmmphcua1k] { opacity: .35; cursor: not-allowed; }

.cs-spinner[b-bmmphcua1k] {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cs-spin-b-bmmphcua1k .7s linear infinite;
}

@keyframes cs-spin-b-bmmphcua1k { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  .cs-panel[b-bmmphcua1k] { right: .5rem; width: calc(100vw - 1rem); max-width: none; }
}

/* Pour que l'info-bulle ne soit pas rognée */
.right-navbar[b-bmmphcua1k],
.navbar-scroll[b-bmmphcua1k],
.menu-actions[b-bmmphcua1k] {
    overflow: visible;
}

/* ===========================
   Mobile : bande cachée, affichée par la languette
   (portrait ET paysage téléphone : en paysage la largeur dépasse 768px,
   la barre restait donc en mode bureau et recouvrait la barre d'outils)
=========================== */

.right-toggle[b-bmmphcua1k] { display: none; }

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

  .right-navbar[b-bmmphcua1k] {
    top: 48px;
    height: calc(100vh - 48px);
    width: calc(48px + env(safe-area-inset-right, 0px));
    padding: .5rem calc(.25rem + env(safe-area-inset-right, 0px)) .5rem .25rem;
    background: rgba(255, 255, 255, .97);
    transform: translateX(105%);
    transition: transform .25s ease;
  }

  .right-navbar.open[b-bmmphcua1k] {
    transform: translateX(0);
    box-shadow: -4px 0 16px rgba(0, 0, 0, .15);
  }

  .action-btn[b-bmmphcua1k] { width: 34px; height: 34px; }

  .right-toggle[b-bmmphcua1k] {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 100px;
      right: env(safe-area-inset-right, 0px);
      z-index: 2100;
      width: 16px;
      height: 40px;
      padding: 0;
      background: #fca5a5;
      color: #991b1b;
      border: none;
      border-radius: 8px 0 0 8px;
      font-size: .65rem;
      cursor: pointer;
      transition: right .25s ease;
  }

  .right-toggle.open[b-bmmphcua1k] { right: calc(48px + env(safe-area-inset-right, 0px)); }

  .cs-panel[b-bmmphcua1k] {
    right: 8px;
    bottom: 70px;
    width: calc(100vw - 16px);
    max-width: 360px;
    height: 60vh;
  }
}

/* Paysage téléphone : hauteur très réduite → boutons compacts et zone d'actions défilante */
@media (max-height: 500px) and (orientation: landscape) {

  .right-navbar[b-bmmphcua1k] {
    padding-top: .3rem;
    padding-bottom: .3rem;
    gap: .25rem;
  }

  .navbar-top[b-bmmphcua1k],
  .menu-actions[b-bmmphcua1k] { gap: .25rem; }

  .navbar-bottom[b-bmmphcua1k] { padding-top: .3rem; }

  .action-btn[b-bmmphcua1k] { width: 30px; height: 30px; border-radius: 10px; }

  /* Défilement vertical quand il y a plus de boutons que de place (les info-bulles sont inutiles au toucher) */
  .navbar-scroll[b-bmmphcua1k] { overflow-y: auto; }

  .cs-panel[b-bmmphcua1k] {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    height: calc(100vh - 48px - 60px - 8px);
    max-height: none;
  }
}

@media (hover: none) {
  .action-btn[data-tooltip][b-bmmphcua1k]::after { display: none; }
}

/* ==========================================================
   MOBILE : bande droite plus courte, arrondie
========================================================== */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    .right-navbar[b-bmmphcua1k] {
        top: var(--navbar-h, 40px);
        height: auto;                         /* annule calc(100vh - 48px) */
        bottom: auto;
        max-height: calc(100svh - var(--navbar-h, 40px) - var(--footer-h, 20px));

        /* on s'adapte au contenu : 3 boutons = bande courte */
        padding: .4rem .25rem;
        border-radius: 14px 0 0 14px;         /* coins arrondis à gauche */
        overflow: hidden;
        border-left: 0;
    }

    .right-navbar.open[b-bmmphcua1k] {
        box-shadow: -4px 0 16px rgba(0, 0, 0, .15);
    }

    /* Le filet du bas n'a plus de raison d'être */
    .navbar-bottom[b-bmmphcua1k] { margin-top: 0; }

    /* Languette alignée sous la barre du haut */
    .right-toggle[b-bmmphcua1k] { top: calc(var(--navbar-h, 40px) + 60px); }
}

/* ==========================================================
   Boutons inactifs : grisés, non cliquables
   (ajoute la classe "action-btn-disabled" aux boutons sans action)
========================================================== */
.action-btn.action-btn-disabled[b-bmmphcua1k],
.action-btn:disabled[b-bmmphcua1k] {
    opacity: .35;
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    .right-navbar[b-bmmphcua1k] {
        top: var(--navbar-h, 40px);
        bottom: calc(var(--footer-h, 20px) + 8px);  /* au-dessus du footer */
        height: auto;
        max-height: none;

        display: flex;
        flex-direction: column;
        padding: .4rem .25rem;
        border-radius: 0 0 0 14px;
        overflow: hidden;
        border-left: 0;
    }

    /* La zone du milieu prend tout l'espace libre */
    .navbar-scroll[b-bmmphcua1k] {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Le bouton message reste collé en bas, toujours visible */
    .navbar-bottom[b-bmmphcua1k] {
        flex: 0 0 auto;
        margin-top: auto;
        padding-top: .35rem;
        padding-bottom: 2px;
        border-top: 1px solid rgba(0, 0, 0, .08);
    }

    .right-toggle[b-bmmphcua1k] { top: calc(var(--navbar-h, 40px) + 60px); }
}

.action-label[b-bmmphcua1k] { display: none; }

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    .right-navbar[b-bmmphcua1k] {
        transition: transform .25s ease, width .25s ease;
    }

    /* Bande déroulée : plus large, libellés visibles */
    .right-navbar.expanded[b-bmmphcua1k] {
        width: min(60vw, 220px);
        align-items: stretch;
        box-shadow: -6px 0 24px rgba(0, 0, 0, .2);
    }

    .right-navbar.expanded .action-btn[b-bmmphcua1k] {
        width: 100%;
        justify-content: flex-start;
        gap: .6rem;
        padding: 0 .6rem;
    }

    .right-navbar.expanded .action-label[b-bmmphcua1k] {
        display: inline;
        font-size: 12px;
        white-space: nowrap;
        color: #1d1d1f;
    }

    /* La languette suit la nouvelle largeur */
    .right-toggle.open.expanded[b-bmmphcua1k] { right: min(60vw, 220px); }


}

    .right-backdrop[b-bmmphcua1k] { display: none; }

    @media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
        .right-backdrop[b-bmmphcua1k] {
            display: block;
            position: fixed;
            inset: var(--navbar-h, 40px) 0 0 0;
            z-index: 1900;
            background: rgba(0, 0, 0, .2);
        }
    }

    /* ==========================================================
   MOBILE : panneau d'assistance, taille intermédiaire
========================================================== */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

  .cs-panel[b-bmmphcua1k] {
    right: 8px;
    bottom: calc(var(--footer-h, 20px) + 44px);
    width: 280px;
    max-width: calc(100vw - 70px);
    height: 360px;
    max-height: calc(100svh - var(--navbar-h, 40px) - var(--footer-h, 20px) - 60px);
    border-radius: 12px;
  }

  .cs-head[b-bmmphcua1k] { gap: .4rem; padding: .4rem .6rem; }
  .cs-avatar[b-bmmphcua1k] { width: 22px; height: 22px; }
  .cs-avatar svg[b-bmmphcua1k] { width: 12px; height: 12px; }
  .cs-id strong[b-bmmphcua1k] { font-size: .68rem; }
  .cs-id small[b-bmmphcua1k] { font-size: .52rem; }
  .cs-x[b-bmmphcua1k] { width: 20px; height: 20px; font-size: .9rem; }

  .cs-list[b-bmmphcua1k] { gap: .3rem; padding: .5rem .6rem; }
  .cs-empty[b-bmmphcua1k] { font-size: .62rem; }
  .cs-bubble[b-bmmphcua1k] { padding: .28rem .5rem; border-radius: 10px; font-size: .62rem; line-height: 1.35; }
  .cs-time[b-bmmphcua1k] { font-size: .5rem; }
  .cs-chips[b-bmmphcua1k] { gap: .25rem; }
  .cs-chip[b-bmmphcua1k] { padding: .14rem .45rem; font-size: .56rem; }
  .cs-error[b-bmmphcua1k] { padding: .2rem .6rem; font-size: .54rem; }

  .cs-input[b-bmmphcua1k] { gap: .3rem; padding: .4rem .5rem; }
  .cs-field[b-bmmphcua1k] { height: 28px; padding: 0 .55rem; font-size: 16px; }   /* 16px : évite le zoom d'iOS */
  .cs-send[b-bmmphcua1k] { width: 28px; height: 28px; }
  .cs-send svg[b-bmmphcua1k] { width: 14px; height: 14px; }
  .cs-spinner[b-bmmphcua1k] { width: 12px; height: 12px; border-width: 2px; }
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

  .cs-field[b-bmmphcua1k]::placeholder {
    font-size: 11px;      /* le placeholder n'a pas besoin des 16 px */
  }

  .cs-field[b-bmmphcua1k] {
    height: 26px;
    padding: 0 .5rem;
  }

  .cs-send[b-bmmphcua1k] { width: 26px; height: 26px; }
  .cs-send svg[b-bmmphcua1k] { width: 13px; height: 13px; }
}


/* ===== Mobile : ombre de la bande droite, comme la barre latérale de MainLayout ===== */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    /* Ombre seulement quand la bande est ouverte : fermée, elle déborderait sur l'écran */
    .right-navbar.open[b-bmmphcua1k],
    .right-navbar.expanded[b-bmmphcua1k] {
        box-shadow: -4px 4px 24px rgba(0, 0, 0, .2);
    }

    /* Le contenu suit l'arrondi du bas, comme .sidebar */
    .right-navbar[b-bmmphcua1k] {
        border-radius: 14px 0 0 14px;
        overflow: hidden;
    }
}


/* ===== Mobile : ombre de la bande droite = même rendu que la grande bande (menu) ===== */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    /* Ombre multicouche, vers la gauche et vers le bas, seulement quand la bande est ouverte */
    .right-navbar.open[b-bmmphcua1k],
    .right-navbar.expanded[b-bmmphcua1k] {
        box-shadow:
            -2px 2px 4px rgba(0, 0, 0, .10),
            -8px 6px 16px rgba(0, 0, 0, .16),
            -16px 10px 40px rgba(0, 0, 0, .22) !important;
    }

    /* Fond presque opaque comme .sidebar (rgba .97) : l'ombre ressort mieux */
    .right-navbar[b-bmmphcua1k] {
        background: rgba(255, 255, 255, .97);
        border-left: 0;
        border-radius: 0 0 0 14px;
    }

    /* L'ombre est dessinée à l'extérieur : ne pas la rogner */
    .right-navbar.open[b-bmmphcua1k] { overflow: visible; }
}

/* ===== Mobile : ombre de la bande droite plus claire, diffuse vers l'arrière ===== */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    .right-navbar.open[b-bmmphcua1k],
    .right-navbar.expanded[b-bmmphcua1k] {
        box-shadow:
            -1px 2px 3px rgba(0, 0, 0, .04),
            -6px 6px 14px rgba(0, 0, 0, .06),
            -14px 10px 36px rgba(0, 0, 0, .08) !important;
    }
}

/* ===== Mobile : voile transparent + ombre claire, comme sous la languette ===== */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    /* Plus de grisage de la page : le voile ne sert qu'à capter le clic de fermeture */
    .right-backdrop[b-bmmphcua1k] {
      position: fixed;
      inset: var(--navbar-h) 0 0 0;
      color: #1d1d1f;
      background: transparent;
      z-index: 1400;
    }

    /* Ombre très douce, large et diffuse */
    .right-navbar.open[b-bmmphcua1k],
    .right-navbar.expanded[b-bmmphcua1k] {
        box-shadow:
            -2px 3px 8px rgba(0, 0, 0, .04),
            -8px 8px 24px rgba(0, 0, 0, .06) !important;
    }
}

/* /Components/Pages/Abonnement/Abonnement.razor.rz.scp.css */

html[b-2lee0m9gds],
body[b-2lee0m9gds] {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

*[b-2lee0m9gds] {
    box-sizing: border-box;
}


/* ========================================
   PAGE PRINCIPALE
   ======================================== */

.abonnement-page[b-2lee0m9gds] {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: url("/images/background.jpg") center center / cover no-repeat;
}


/* ========================================
   CONTENEUR DES CARTES
   ======================================== */

.abonnement-sticky[b-2lee0m9gds] {
    position: fixed;

    top: 30px;
    left: 250px;
    right: 70px;
    bottom: 0;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;

    background: transparent;

    border: none;
    border-radius: 0;
    box-shadow: none;

    z-index: 1000;

    display: flex;
    align-items: flex-start;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;
}


/* ========================================
   TABLETTE
   ======================================== */

@media (max-width: 900px) {

    .abonnement-sticky[b-2lee0m9gds] {
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;

        padding: 0;
    }
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 480px) {

    .abonnement-sticky[b-2lee0m9gds] {
        top: 60px;
    }
}
/* /Components/Pages/Accueil/Accueil.razor.rz.scp.css */
/* ===================================
   Variables
=================================== */

.accueil[b-14mxcfziug] {
    --bg: #f5f5f7;
    --alt: #f5f5f7;
    --panel: #ffffff;
    --ink: #1d1d1f;
    --muted: #6e6e73;
    --accent: #b01e1e;
    --accent-hover: #8f1717;
    --brand: #7f0303;
    --soft: #fdecec;
    --star: #e8a33d;
    --line: rgba(0, 0, 0, .08);

    --bar-h: 44px;
    --footer-h: 26px;

    min-height: 100vh;
    padding-top: var(--bar-h);
    padding-bottom: var(--footer-h);
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    font-size: .84rem;
    line-height: 1.35;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
    .accueil[b-14mxcfziug] {
        --bg: #000000;
        --alt: #161617;
        --panel: #1d1d1f;
        --ink: #f5f5f7;
        --muted: #a1a1a6;
        --accent: #ee5b5b;
        --accent-hover: #f27a7a;
        --brand: #ee5b5b;
        --soft: #2b1a1c;
        --line: rgba(255, 255, 255, .12);
    }
}

.accueil *[b-14mxcfziug],
.accueil *[b-14mxcfziug]::before,
.accueil *[b-14mxcfziug]::after { box-sizing: border-box; }

.accueil h1[b-14mxcfziug], .accueil h2[b-14mxcfziug], .accueil h3[b-14mxcfziug], .accueil h4[b-14mxcfziug],
.accueil p[b-14mxcfziug], .accueil ol[b-14mxcfziug], .accueil ul[b-14mxcfziug] { margin: 0; }

.accueil a[b-14mxcfziug] { color: inherit; }

.accueil a:focus-visible[b-14mxcfziug],
.accueil button:focus-visible[b-14mxcfziug] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.acc-wrap[b-14mxcfziug] {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}

.acc-wide[b-14mxcfziug] { max-width: 1100px; }

/* ===================================
   Aucune barre de défilement visible
   (la molette et le glissement tactile fonctionnent toujours)
=================================== */

.accueil[b-14mxcfziug],
.accueil *[b-14mxcfziug],
.accueil[b-14mxcfziug]  * {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* ancien Edge */
}

.accueil *[b-14mxcfziug]::-webkit-scrollbar,
.accueil[b-14mxcfziug]  *::-webkit-scrollbar {
    display: none;               /* Safari / Chrome */
    width: 0;
    height: 0;
}

/* ===================================
   Bords flous des zones défilantes
   (attributs data-fx / data-fy posés par js/parcours.js :
    "s" = du contenu reste au début, "e" = du contenu reste à la fin)
=================================== */

.accueil[b-14mxcfziug]  [data-fx] {
    --fade-size: 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fxs, 0px), #000 calc(100% - var(--fxe, 0px)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--fxs, 0px), #000 calc(100% - var(--fxe, 0px)), transparent 100%);
}

.accueil[b-14mxcfziug]  [data-fx~="s"] { --fxs: var(--fade-size, 28px); }
.accueil[b-14mxcfziug]  [data-fx~="e"] { --fxe: var(--fade-size, 28px); }

.accueil[b-14mxcfziug]  [data-fy] {
    --fade-size: 28px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fys, 0px), #000 calc(100% - var(--fye, 0px)), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 var(--fys, 0px), #000 calc(100% - var(--fye, 0px)), transparent 100%);
}

.accueil[b-14mxcfziug]  [data-fy~="s"] { --fys: var(--fade-size, 28px); }
.accueil[b-14mxcfziug]  [data-fy~="e"] { --fye: var(--fade-size, 28px); }

/* ===================================
   En-tête fixe
=================================== */

.acc-header[b-14mxcfziug] {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 2000;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--line);
}

.acc-brand[b-14mxcfziug] {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.acc-logo-img[b-14mxcfziug] {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.acc-brand-name[b-14mxcfziug] {
    margin-left: .4rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--brand);
}

.acc-nav[b-14mxcfziug] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .76rem;
}

.acc-nav a[b-14mxcfziug] {
    text-decoration: none;
    color: var(--muted);
    transition: color .2s ease;
}

.acc-nav a:hover[b-14mxcfziug] { color: var(--ink); }

@media (prefers-color-scheme: dark) {
    .acc-logo-img[b-14mxcfziug] { mix-blend-mode: normal; }
}

/* ===================================
   Boutons
=================================== */

.acc-btn[b-14mxcfziug] {
    display: inline-block;
    padding: .45rem 1rem;
    border-radius: 980px;
    background: var(--accent);
    color: #fff;
    font-size: .85rem;
    text-decoration: none;
    transition: background-color .2s ease, transform .15s ease;
}

.acc-btn:hover[b-14mxcfziug] { background: var(--accent-hover); }
.acc-btn:active[b-14mxcfziug] { transform: scale(.97); }

.acc-nav .acc-btn.acc-btn-sm[b-14mxcfziug] {
    padding: .25rem .75rem;
    font-size: .76rem;
    color: #fff;
}

.acc-btn.acc-btn-lg[b-14mxcfziug] {
    padding: .45rem 1.3rem;
    border: 0;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(176, 30, 30, .22);
}

/* ===================================
   Sections
=================================== */

.acc-section[b-14mxcfziug] {
    padding: .9rem 0;
    text-align: center;
    background: var(--bg);
}

.acc-alt[b-14mxcfziug] { background: var(--alt); }

.acc-title[b-14mxcfziug] {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.03em;
}

/* ===================================
   Actualité : agents / image / actualités
=================================== */

.acc-hero[b-14mxcfziug] { padding: .4rem 0 1.2rem; }

.acc-feed[b-14mxcfziug] {
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
    height: clamp(400px, 66vh, 560px);
    margin: 0 auto;
    text-align: left;
}

.acc-feed[b-14mxcfziug]  .agents-sticky,
.acc-feed[b-14mxcfziug]  .news-sticky {
    position: static;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    inset: auto;
    padding: .1rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: auto;
}

.acc-feed[b-14mxcfziug]  .actualite-content {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    inset: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 16px;
    overflow: hidden;
    z-index: auto;
}

/* ===================================
   Parcours type : l'eau coule d'étape en étape
   - l'étape 1 est à l'extrémité gauche
   - l'eau remplit les tuyaux et les cercles, la frise défile pour la suivre
   - survol ou toucher : tout s'arrête et on défile à la main
   (animation pilotée par wwwroot/js/parcours.js)
=================================== */

.acc-parcours[b-14mxcfziug] { padding: .4rem 0 .5rem; }

/* Zone défilante (sans barre visible) */
.acc-marquee[b-14mxcfziug] {
    position: relative;
    margin-top: .8rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
}

.acc-route[b-14mxcfziug] {
    position: relative;
    display: flex;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: .3rem 0 .45rem;
    list-style: none;
}

.acc-route li[b-14mxcfziug] {
    position: relative;
    flex: 0 0 250px;
    display: flex;
}

/* Tuyau : fond gris, eau rouge qui le remplit de gauche à droite */
.acc-pipe[b-14mxcfziug] {
    position: absolute;
    top: 15px;
    left: 40px;
    right: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}

.acc-water[b-14mxcfziug] {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(0);
    will-change: transform;
}

/* Retour à l'étape 1 : l'eau se retire doucement */
.acc-marquee.is-reset .acc-water[b-14mxcfziug] { transition: transform .6s ease; }

.acc-step[b-14mxcfziug] {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas: "num" "titre" "detail";
    justify-items: start;
    align-content: start;
    row-gap: .2rem;
    min-width: 0;
    padding: 0 1.1rem 0 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.acc-num[b-14mxcfziug] {
    grid-area: num;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: .2rem;
    border-radius: 50%;
    background: var(--soft);
    color: var(--accent);
    font-size: .85rem;
    font-weight: 700;
    transition: background-color .4s ease, color .4s ease;
}

/* Cercle atteint par l'eau */
.acc-route li.is-done .acc-num[b-14mxcfziug] { background: var(--accent); color: #fff; }

/* Le numéro du popup d'étape reste plein */
.svc-num[b-14mxcfziug] { background: var(--accent); color: #fff; }

.acc-route strong[b-14mxcfziug] {
    grid-area: titre;
    max-width: 100%;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
    transition: color .2s ease;
}

.acc-step:hover strong[b-14mxcfziug] { color: var(--accent); }

.acc-route small[b-14mxcfziug] {
    grid-area: detail;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .76rem;
    line-height: 1.35;
    color: var(--muted);
}

/* Squelette : pas de défilement */
.acc-route.acc-sk[b-14mxcfziug] { width: 100%; overflow: hidden; }

/* ===================================
   Accompagnement et services
   barre de filtres, puces de domaines, liste de ressources
=================================== */

.acc-sub[b-14mxcfziug] { margin-top: .2rem; font-size: .76rem; color: var(--muted); }

.acc-app[b-14mxcfziug] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .7rem;
    text-align: left;
}

/* ----- Cartes des provinces : liste défilante, initiales dans un cercle ----- */

.acc-provs[b-14mxcfziug] {
    display: flex;
    gap: .4rem;
    padding: .1rem .1rem .35rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.acc-prov[b-14mxcfziug] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .7rem .3rem .3rem;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 980px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color .2s ease, background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.acc-prov:hover[b-14mxcfziug] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 6px 16px rgba(0, 0, 0, .07);
}

.acc-prov-code[b-14mxcfziug] {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--soft);
    color: var(--accent);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: 0;
}

.acc-prov-txt[b-14mxcfziug] { display: flex; flex-direction: column; line-height: 1.15; }
.acc-prov-nom[b-14mxcfziug] { font-size: .68rem; font-weight: 600; white-space: nowrap; }
.acc-prov-nb[b-14mxcfziug] { font-size: .58rem; color: var(--muted); white-space: nowrap; }

.acc-prov[aria-pressed="true"][b-14mxcfziug] { background: var(--accent); border-color: var(--accent); }
.acc-prov[aria-pressed="true"] .acc-prov-code[b-14mxcfziug] { background: #fff; color: var(--accent); }
.acc-prov[aria-pressed="true"] .acc-prov-nom[b-14mxcfziug],
.acc-prov[aria-pressed="true"] .acc-prov-nb[b-14mxcfziug] { color: #fff; }

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

.acc-app-bar[b-14mxcfziug] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .6rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.acc-field[b-14mxcfziug] { display: flex; flex-direction: column; gap: .15rem; flex: 0 1 200px; min-width: 0; }
.acc-field-search[b-14mxcfziug] { flex: 1 1 240px; }
.acc-field label[b-14mxcfziug] { font-size: .64rem; font-weight: 600; color: var(--muted); }

.acc-select[b-14mxcfziug] {
    width: 100%;
    height: 30px;
    padding: 0 .6rem;
    font: inherit;
    font-size: .76rem;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.acc-select:focus[b-14mxcfziug] {
    outline: none;
    background: var(--panel);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, .12);
}

/* ----- Domaines : puces horizontales ----- */

.acc-cats[b-14mxcfziug] {
    display: flex;
    gap: .45rem;
    padding: .15rem .1rem .35rem;
    overflow-x: auto;
}

.acc-cat[b-14mxcfziug] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .28rem .35rem .28rem .65rem;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 980px;
    font: 500 .72rem -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.acc-cat:hover[b-14mxcfziug] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); }

.acc-cat[aria-pressed="true"][b-14mxcfziug] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.acc-cat-nb[b-14mxcfziug] {
    min-width: 22px;
    padding: .05rem .4rem;
    border-radius: 980px;
    background: var(--bg);
    color: var(--muted);
    font-size: .62rem;
    text-align: center;
}

.acc-cat[aria-pressed="true"] .acc-cat-nb[b-14mxcfziug] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ----- Contenu ----- */

.acc-list[b-14mxcfziug] { min-width: 0; display: flex; flex-direction: column; gap: .6rem; }

/* ----- Liste de ressources : lignes ouvertes, séparées par un simple filet (sans cadre) ----- */

.acc-rows[b-14mxcfziug] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    align-items: start;
    column-gap: 1.4rem;
    row-gap: 0;
    max-height: 400px;
    padding: 0 .15rem .4rem;
    overflow-y: auto;
    list-style: none;
}

.acc-rows > li[b-14mxcfziug] { display: flex; align-self: start; }

.acc-row[b-14mxcfziug] {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: .5rem;
    width: 100%;
    padding: .55rem 0;
    background: none;
    color: var(--ink);
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.acc-row-txt[b-14mxcfziug] { display: flex; flex-direction: column; min-width: 0; padding-right: 0; }

.acc-row-txt strong[b-14mxcfziug] {
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.25;
    transition: color .2s ease;
}

.acc-row:hover .acc-row-txt strong[b-14mxcfziug],
.acc-row:focus-visible .acc-row-txt strong[b-14mxcfziug] { color: var(--accent); }

.acc-row-txt small[b-14mxcfziug] { margin-top: .05rem; font-size: .58rem; line-height: 1.3; color: var(--muted); }

.acc-row-cat[b-14mxcfziug] {
    align-self: flex-start;
    margin-top: .2rem;
    font-size: .52rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted);
}

.acc-row-go[b-14mxcfziug] {
    position: absolute;
    right: 0;
    top: .55rem;
    color: var(--accent);
    font-size: .56rem;
    font-weight: 600;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s ease, transform .2s ease;
}

.acc-row:hover .acc-row-go[b-14mxcfziug],
.acc-row:focus-visible .acc-row-go[b-14mxcfziug] { opacity: 1; transform: none; }

.acc-res-ico[b-14mxcfziug] {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--soft);
    font-size: .7rem;
}

.acc-pro[b-14mxcfziug] {
    margin-left: .2rem;
    padding: 0 .28rem;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    font-size: .46rem;
    font-weight: 600;
    vertical-align: middle;
}

.acc-empty[b-14mxcfziug] {
    padding: 1.6rem 1rem;
    background: var(--panel);
    border: 1px dashed var(--line);
    border-radius: 16px;
    text-align: center;
    color: var(--muted);
}

/* ===================================
   Popup : détail d'un service / d'une étape
   (même structure : présentation, déblocages, accroche, action)
=================================== */

.svc-overlay[b-14mxcfziug] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.svc-modal[b-14mxcfziug] {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.1rem 1.1rem .9rem;
    background: var(--panel);
    color: var(--ink);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    font-size: .72rem;
}

.svc-head[b-14mxcfziug] { display: flex; align-items: center; gap: .6rem; padding-right: 1.8rem; }
.svc-ico[b-14mxcfziug] { flex: 0 0 36px; width: 36px; height: 36px; font-size: 1.1rem; }
.svc-head h2[b-14mxcfziug] { font-size: .9rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.svc-meta[b-14mxcfziug] { margin-top: .05rem; font-size: .64rem; color: var(--muted); }

/* Sections : un bloc par thème, séparé par un filet */
.svc-sec[b-14mxcfziug] {
    margin-top: .65rem;
    padding-top: .55rem;
    border-top: 1px solid var(--line);
}

.svc-h[b-14mxcfziug] {
    margin: 0 0 .3rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Présentation : liste à puces */
.svc-bullets[b-14mxcfziug] {
    display: flex;
    flex-direction: column;
    gap: .22rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-bullets li[b-14mxcfziug] {
    position: relative;
    padding-left: .95rem;
    font-size: .7rem;
    line-height: 1.4;
}

.svc-bullets li[b-14mxcfziug]::before {
    content: "";
    position: absolute;
    left: .15rem;
    top: .5em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

/* Éléments débloqués / verrouillés */
.svc-points[b-14mxcfziug] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-points li[b-14mxcfziug] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .12rem .55rem;
    background: var(--soft);
    border-radius: 980px;
    font-size: .64rem;
    font-weight: 500;
}

.svc-points-col[b-14mxcfziug] { flex-direction: column; align-items: stretch; }
.svc-points-col li[b-14mxcfziug] { border-radius: 8px; padding: .22rem .55rem; }

.svc-num[b-14mxcfziug] { flex: 0 0 28px; width: 28px; height: 28px; font-size: .78rem; background: var(--accent); color: #fff; }

.svc-locked-pt[b-14mxcfziug] { color: var(--muted); }
.svc-blur[b-14mxcfziug] { filter: blur(3.5px); user-select: none; color: var(--muted); }

/* Accroche d'incitation */
.svc-hook[b-14mxcfziug] {
    margin: .65rem 0 .6rem;
    padding: .5rem .65rem;
    background: var(--soft);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    font-size: .66rem;
    line-height: 1.4;
}

.svc-hook strong[b-14mxcfziug] {
    display: block;
    margin-bottom: .1rem;
    font-size: .7rem;
    color: var(--accent);
}

.svc-reassure[b-14mxcfziug] {
    margin: .35rem 0 0;
    font-size: .6rem;
    color: var(--muted);
    text-align: center;
}

/* ===================================
   Témoignages
=================================== */

.acc-stars[b-14mxcfziug] {
    color: var(--star);
    font-size: .7rem;
    letter-spacing: .05em;
}

.acc-testis[b-14mxcfziug] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin: .95rem 0 .8rem;
    text-align: left;
}

.acc-testi[b-14mxcfziug] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
    padding: .6rem .7rem;
    background: var(--panel);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.acc-testi blockquote[b-14mxcfziug] {
    margin: 0;
    font-size: .68rem;
    line-height: 1.4;
}

.acc-testi figcaption[b-14mxcfziug] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: .15rem;
}

.acc-avatar[b-14mxcfziug] {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--soft);
    color: var(--accent);
    font-size: .7rem;
    font-weight: 700;
}

.acc-testi-id[b-14mxcfziug] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.acc-testi-id strong[b-14mxcfziug] { font-size: .68rem; font-weight: 600; }
.acc-testi-id small[b-14mxcfziug] { font-size: .58rem; color: var(--muted); }

.acc-note[b-14mxcfziug] {
    margin-top: .4rem;
    font-size: .62rem;
    color: var(--muted);
}

/* Badges de confiance sous le bouton « Créer mon compte » */
.acc-badges[b-14mxcfziug] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem .9rem;
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .64rem;
    font-weight: 500;
    color: var(--muted);
}

.acc-badges li[b-14mxcfziug] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* ===================================
   Vidéos
=================================== */

.acc-videos[b-14mxcfziug] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
    margin-top: 1rem;
}

.acc-video[b-14mxcfziug] { margin: 0; text-align: left; }

.acc-video-frame[b-14mxcfziug] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
}

.acc-video-frame iframe[b-14mxcfziug] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.acc-video-play[b-14mxcfziug] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
}

/* L'image YouTube est en 4:3 avec des bandes noires : « cover » les recadre en 16:9 */
.acc-video-play img[b-14mxcfziug] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease, opacity .2s ease;
}

.acc-video-play:hover img[b-14mxcfziug] { transform: scale(1.03); }

.acc-video-btn[b-14mxcfziug] {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    transform: translate(-50%, -50%);
    transition: transform .15s ease, background-color .2s ease, color .2s ease;
}

.acc-video-btn svg[b-14mxcfziug] { margin-left: 2px; }

.acc-video-play:hover .acc-video-btn[b-14mxcfziug] {
    background: var(--accent);
    color: #fff;
    transform: translate(-50%, -50%) scale(1.08);
}

.acc-video figcaption[b-14mxcfziug] { margin-top: .35rem; font-size: .7rem; font-weight: 600; }

/* ===================================
   Plans d'abonnement (compacts)
=================================== */

.acc-plans[b-14mxcfziug] {
    margin-top: 1rem;
    padding: .8rem 0 1rem;
    overflow-x: auto;
    text-align: left;
}

.acc-plans[b-14mxcfziug]  .abonnement-grid {
    justify-content: center;
    width: max-content;
    min-width: 100%;
    gap: .6rem;
    margin: 0 auto;
    padding: .2rem;
}

.acc-plans[b-14mxcfziug]  .abonnement-card {
    top: 0;
    flex: 0 0 230px;
    width: 230px;
    height: auto;
    max-height: none;
    gap: .35rem;
    padding: .9rem .7rem;
    border-radius: 16px;
}

.acc-plans[b-14mxcfziug]  .abonnement-features {
    overflow: visible;
    gap: .25rem;
}

.acc-plans[b-14mxcfziug]  .abonnement-features li { font-size: .62rem; }
.acc-plans[b-14mxcfziug]  .feature-icon { width: 15px; height: 15px; min-width: 15px; }
.acc-plans[b-14mxcfziug]  .abonnement-badge { width: 32px; height: 32px; min-height: 32px; font-size: .9rem; }
.acc-plans[b-14mxcfziug]  .abonnement-name { font-size: .9rem; }
.acc-plans[b-14mxcfziug]  .abonnement-price { font-size: 1rem; }

/* ===================================
   Tableau de comparaison (compact)
=================================== */

.acc-wide[b-14mxcfziug]  .compare { padding: 0 0 1rem; max-width: 100%; }
.acc-wide[b-14mxcfziug]  .compare-title { margin-bottom: 1rem; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.acc-wide[b-14mxcfziug]  .compare-table thead th { top: var(--bar-h); padding: .5rem .3rem; }
.acc-wide[b-14mxcfziug]  .compare-plan { font-size: .85rem; }
.acc-wide[b-14mxcfziug]  .compare-price { font-size: .68rem; }
.acc-wide[b-14mxcfziug]  .compare-group th { padding: 1.1rem 0 .3rem; font-size: 1rem; }
.acc-wide[b-14mxcfziug]  .compare-label { padding: .4rem .4rem .4rem 0; font-size: .76rem; }
.acc-wide[b-14mxcfziug]  .compare-table td { padding: .3rem; }
.acc-wide[b-14mxcfziug]  .feature-icon { width: 16px; height: 16px; }

/* ===================================
   Plan de site
=================================== */

.acc-sitemap[b-14mxcfziug] {
    padding: 1.4rem 0 1.8rem;
    background: var(--alt);
    border-top: 1px solid var(--line);
    text-align: left;
    font-size: .7rem;
    color: var(--muted);
}

.acc-sitemap-intro[b-14mxcfziug] {
    padding-bottom: .6rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--line);
}

.acc-sitemap a[b-14mxcfziug] { color: var(--accent); text-decoration: none; }
.acc-sitemap a:hover[b-14mxcfziug] { text-decoration: underline; }

/* 5 colonnes : Services, Assistance, Explorer, Abonnements, Compte */
.acc-sitemap-cols[b-14mxcfziug] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding-bottom: .6rem;
}

.acc-sitemap-cols nav[b-14mxcfziug] { display: flex; flex-direction: column; gap: .3rem; }
.acc-sitemap-cols h4[b-14mxcfziug] { margin: 0 0 .15rem; font-size: .7rem; font-weight: 600; color: var(--ink); }
.acc-sitemap-cols a[b-14mxcfziug] { color: var(--muted); }
.acc-sitemap-cols a:hover[b-14mxcfziug] { color: var(--ink); text-decoration: underline; }

.acc-sitemap-note[b-14mxcfziug] {
    margin: 1rem 0 0;
    padding-top: .6rem;
    border-top: 1px solid var(--line);
}

/* Liens légaux : Confidentialité · Mentions légales · Contact */
.acc-legal[b-14mxcfziug] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
}

.acc-legal-lien[b-14mxcfziug] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--muted);
    cursor: pointer;
    transition: color .2s ease;
}

.acc-legal-lien:hover[b-14mxcfziug] { color: var(--ink); text-decoration: underline; }

/* ===================================
   Barre de pied de page fixe
=================================== */

.acc-footer[b-14mxcfziug] {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2000;
    height: var(--footer-h);
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--line);
    font-size: .68rem;
    line-height: 1.2;
    color: var(--muted);
}

.acc-footer-in[b-14mxcfziug] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.acc-footer-in span[b-14mxcfziug] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===================================
   Popup de connexion
   (le popup d'inscription a son propre CSS isolé)
=================================== */

.auth-overlay[b-14mxcfziug] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.auth-card[b-14mxcfziug] {
    position: relative;
    width: 100%;
    max-width: 360px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.2rem 1.1rem 1rem;
    background: var(--panel);
    color: var(--ink);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.auth-close[b-14mxcfziug] {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--alt);
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.auth-close:hover[b-14mxcfziug] { color: var(--accent); }
.auth-close:disabled[b-14mxcfziug] { opacity: .5; cursor: not-allowed; }

.auth-title[b-14mxcfziug] { margin: 0 0 .15rem; font-size: 1rem; font-weight: 700; letter-spacing: -.03em; text-align: center; }
.auth-sub[b-14mxcfziug] { margin: 0 0 .7rem; font-size: .7rem; color: var(--muted); text-align: center; }

.auth-alert[b-14mxcfziug],
.auth-info[b-14mxcfziug] { margin-bottom: .9rem; padding: .55rem .7rem; border-radius: 8px; font-size: .76rem; }
.auth-alert[b-14mxcfziug] { background: #fdecec; color: #c92a2a; }
.auth-info[b-14mxcfziug] { background: #ecf8ef; color: #15803d; }

.auth-field[b-14mxcfziug] { margin-bottom: .55rem; min-width: 0; }
.auth-label[b-14mxcfziug] { display: block; margin-bottom: .2rem; font-size: .64rem; font-weight: 500; color: var(--muted); }

.auth-input[b-14mxcfziug] {
    width: 100%;
    height: 30px;
    padding: 0 .6rem;
    font: inherit;
    font-size: .76rem;
    color: var(--ink);
    background: var(--alt);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: border-color .15s ease, background-color .15s ease;
}

.auth-input:focus[b-14mxcfziug] {
    outline: none;
    background: var(--panel);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, .12);
}

.auth-btn[b-14mxcfziug] {
    width: 100%;
    height: 30px;
    border: 0;
    border-radius: 980px;
    font: inherit;
    font-size: .74rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}

.auth-btn:active:not(:disabled)[b-14mxcfziug] { transform: scale(.98); }
.auth-btn:disabled[b-14mxcfziug] { opacity: .6; cursor: not-allowed; }
.auth-btn-primary[b-14mxcfziug] { background: var(--accent); color: #fff; }
.auth-btn-primary:hover:not(:disabled)[b-14mxcfziug] { background: var(--accent-hover); }
.auth-btn-google[b-14mxcfziug] { background: var(--alt); color: var(--ink); }
.auth-btn-google:hover:not(:disabled)[b-14mxcfziug] { filter: brightness(.96); }

.auth-divider[b-14mxcfziug] { display: flex; align-items: center; margin: .9rem 0; font-size: .7rem; color: var(--muted); }
.auth-divider[b-14mxcfziug]::before,
.auth-divider[b-14mxcfziug]::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-divider span[b-14mxcfziug] { padding: 0 .6rem; }

.auth-lien[b-14mxcfziug] {
    display: block;
    margin: .35rem 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .74rem;
    color: var(--accent);
    cursor: pointer;
}

.auth-lien:hover[b-14mxcfziug] { text-decoration: underline; }
.auth-retour[b-14mxcfziug] { margin: .8rem auto 0; }

.auth-switch[b-14mxcfziug] { margin: .55rem 0 0; font-size: .66rem; color: var(--muted); text-align: center; }

.auth-lien-inline[b-14mxcfziug] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

.auth-lien-inline:hover[b-14mxcfziug] { text-decoration: underline; }

.auth-pw[b-14mxcfziug] { position: relative; }
.auth-pw .auth-input[b-14mxcfziug] { padding-right: 2.4rem; }

.auth-eye[b-14mxcfziug] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.auth-eye:hover[b-14mxcfziug] { color: var(--ink); }

/* ===================================
   Responsive
=================================== */

@media (max-width: 1000px) {
    .acc-testis[b-14mxcfziug] { grid-template-columns: repeat(2, 1fr); }
    .acc-sitemap-cols[b-14mxcfziug] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
    .acc-section[b-14mxcfziug] { padding: .8rem 0; }
    .acc-hero[b-14mxcfziug] { padding: .5rem 0 .5rem; }
    .acc-feed[b-14mxcfziug] { height: 70vh; }

    .acc-videos[b-14mxcfziug] { grid-template-columns: 1fr; }

    .acc-rows[b-14mxcfziug] { max-height: none; grid-template-columns: 1fr; }
    .acc-row-go[b-14mxcfziug] { opacity: 1; transform: none; }

    .acc-sitemap-cols[b-14mxcfziug] { grid-template-columns: repeat(2, 1fr); }
    .acc-nav a:not(.acc-btn)[b-14mxcfziug] { display: none; }
}

@media (max-width: 520px) {
    .acc-testis[b-14mxcfziug] { grid-template-columns: 1fr; }
    .acc-sitemap-cols[b-14mxcfziug] { grid-template-columns: 1fr; }
}

/* ===================================
   Squelettes de la page d'accueil
=================================== */

.acc-sk[b-14mxcfziug], .acc-sk *[b-14mxcfziug] { pointer-events: none; }

/* Parcours : numéro, titre, résumé */
.acc-sk-num[b-14mxcfziug] { grid-area: num; width: 32px; height: 32px; border-radius: 50%; }
.acc-sk-t[b-14mxcfziug]   { grid-area: titre; width: 70%; height: 10px; }
.acc-sk-d[b-14mxcfziug]   { grid-area: detail; width: 92%; height: 8px; }

/* Provinces : pastille ronde + 2 lignes */
.acc-sk-code[b-14mxcfziug] { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; }
.acc-sk-pn[b-14mxcfziug]   { width: 80px; height: 9px; margin-bottom: 5px; }
.acc-sk-pb[b-14mxcfziug]   { width: 52px; height: 7px; }

/* Domaines : puces */
.acc-sk-chip[b-14mxcfziug] { flex: 0 0 auto; height: 30px; border-radius: 980px; }

/* Services : lignes */
.acc-sk-ico[b-14mxcfziug]  { width: 22px; height: 22px; border-radius: 50%; }
.acc-sk-l1[b-14mxcfziug]   { width: 70%; height: 9px; margin-bottom: 6px; }
.acc-sk-l2[b-14mxcfziug]   { width: 95%; height: 7px; margin-bottom: 5px; }
.acc-sk-l3[b-14mxcfziug]   { width: 60%; height: 7px; margin-bottom: 5px; }
.acc-sk-tag[b-14mxcfziug]  { width: 52px; height: 8px; border-radius: 980px; }

/* Témoignages */
.acc-sk-stars[b-14mxcfziug]  { width: 70px; height: 10px; }
.acc-sk-quote[b-14mxcfziug]  { height: 9px; margin-bottom: 6px; }
.acc-sk-avatar[b-14mxcfziug] { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; }
.acc-sk-name[b-14mxcfziug]   { width: 80px; height: 8px; margin-bottom: 5px; }
.acc-sk-orig[b-14mxcfziug]   { width: 110px; height: 7px; }

/* Vidéos */
.acc-sk-frame[b-14mxcfziug]   { aspect-ratio: 16 / 9; border-radius: 14px; }
.acc-sk-caption[b-14mxcfziug] { width: 80%; height: 11px; margin-top: .45rem; }

/* ===================================
   Mobile
=================================== */

@media (max-width: 820px) {
    .accueil[b-14mxcfziug] { font-size: .9rem; }

    .acc-header[b-14mxcfziug] { padding: 0 .75rem; gap: .5rem; }
    .acc-nav[b-14mxcfziug] { gap: .6rem; }

    .acc-title[b-14mxcfziug] { font-size: 1.2rem; }
    .acc-sub[b-14mxcfziug] { font-size: .82rem; }

    /* Frise : étapes plus étroites, texte lisible, défilement un peu plus lent */
    .acc-route li[b-14mxcfziug] { flex: 0 0 210px; }
    .acc-route strong[b-14mxcfziug] { font-size: .86rem; }
    .acc-route small[b-14mxcfziug] { font-size: .74rem; }

    /* Provinces et domaines : zones de toucher plus grandes */
    .acc-prov-nom[b-14mxcfziug] { font-size: .74rem; }
    .acc-prov-nb[b-14mxcfziug] { font-size: .64rem; }
    .acc-cat[b-14mxcfziug] { padding: .4rem .45rem .4rem .8rem; font-size: .8rem; }

    .acc-row-txt strong[b-14mxcfziug] { font-size: .8rem; }
    .acc-row-txt small[b-14mxcfziug] { font-size: .7rem; }

    .acc-plans[b-14mxcfziug] { padding-inline: .25rem; }
    .acc-footer-in span[b-14mxcfziug] { white-space: normal; font-size: .62rem; }
    .acc-footer[b-14mxcfziug] { height: auto; min-height: var(--footer-h); padding: .2rem 0; }

    .svc-modal[b-14mxcfziug], .auth-card[b-14mxcfziug] { max-height: 88vh; }
}

@media (max-width: 520px) {
    .acc-brand-name[b-14mxcfziug] { display: none; }
    .acc-route li[b-14mxcfziug] { flex: 0 0 190px; }
    .acc-wrap[b-14mxcfziug] { padding: 0 .75rem; }
}

/* ===================================
   Mobile : tailles proportionnelles à la largeur du téléphone
   --fs = taille de base : 12px (≤ 360px) → 15px max (≈ 455px et plus)
   Tout le reste est un multiple de --fs. Aucune miniature (zoom).
=================================== */

@media (max-width: 820px) {

    .accueil[b-14mxcfziug] {
        --fs: clamp(12px, 3.3vw, 15px);
        --bar-h: calc(var(--fs) * 3.4);
        --footer-h: calc(var(--fs) * 2.1);
        font-size: var(--fs);
    }

    /* ----- En-tête ----- */
    .acc-header[b-14mxcfziug] { padding: 0 calc(var(--fs) * .8); gap: calc(var(--fs) * .5); }
    .acc-logo-img[b-14mxcfziug] { width: calc(var(--fs) * 2.3); height: calc(var(--fs) * 2.3); }
    .acc-nav[b-14mxcfziug] { gap: calc(var(--fs) * .8); font-size: calc(var(--fs) * .92); }
    .acc-nav .acc-btn.acc-btn-sm[b-14mxcfziug] { padding: .3em .85em; font-size: calc(var(--fs) * .92); }
    .acc-nav a:not(.acc-btn):not(.acc-nav-login)[b-14mxcfziug] { display: none; }

    /* ----- Sections ----- */
    .acc-wrap[b-14mxcfziug] { padding: 0 calc(var(--fs) * .85); }
    .acc-section[b-14mxcfziug] { padding: calc(var(--fs) * .8) 0; }
    .acc-hero[b-14mxcfziug] { padding: calc(var(--fs) * .5) 0; }
    .acc-title[b-14mxcfziug] { font-size: calc(var(--fs) * 1.55); }
    .acc-sub[b-14mxcfziug] { font-size: calc(var(--fs) * .92); }
    .acc-feed[b-14mxcfziug] { height: 68vh; }

    .acc-btn.acc-btn-lg[b-14mxcfziug] { padding: .6em 1.5em; font-size: calc(var(--fs) * .98); }
    .acc-badges[b-14mxcfziug] { font-size: calc(var(--fs) * .85); }
    .acc-stars[b-14mxcfziug] { font-size: calc(var(--fs) * .9); }

    /* ----- Parcours (frise) ----- */
    .acc-route li[b-14mxcfziug] { flex: 0 0 calc(var(--fs) * 14.5); }
    .acc-num[b-14mxcfziug],
    .acc-sk-num[b-14mxcfziug] { width: calc(var(--fs) * 2.4); height: calc(var(--fs) * 2.4); font-size: calc(var(--fs) * .98); }
    .acc-pipe[b-14mxcfziug] { top: calc(var(--fs) * 1.2 - 1px); left: calc(var(--fs) * 3); }
    .acc-route strong[b-14mxcfziug] { font-size: calc(var(--fs) * 1.02); }
    .acc-route small[b-14mxcfziug] { font-size: calc(var(--fs) * .88); }

    /* ----- Provinces ----- */
    .acc-prov-code[b-14mxcfziug],
    .acc-sk-code[b-14mxcfziug] { flex-basis: calc(var(--fs) * 2.2); width: calc(var(--fs) * 2.2); height: calc(var(--fs) * 2.2); font-size: calc(var(--fs) * .8); }
    .acc-prov-nom[b-14mxcfziug] { font-size: calc(var(--fs) * .9); }
    .acc-prov-nb[b-14mxcfziug] { font-size: calc(var(--fs) * .78); }

    /* ----- Domaines ----- */
    .acc-cat[b-14mxcfziug] { padding: .35em .45em .35em .85em; font-size: calc(var(--fs) * .92); }
    .acc-cat-nb[b-14mxcfziug] { font-size: calc(var(--fs) * .78); }

    /* ----- Liste de ressources : 1 colonne, défilement vertical ----- */
    .acc-rows[b-14mxcfziug] { grid-template-columns: 1fr; max-height: 55vh; }
    .acc-row[b-14mxcfziug] { grid-template-columns: calc(var(--fs) * 1.9) 1fr; gap: calc(var(--fs) * .6); padding: calc(var(--fs) * .7) 0; }
    .acc-res-ico[b-14mxcfziug] { flex-basis: calc(var(--fs) * 1.9); width: calc(var(--fs) * 1.9); height: calc(var(--fs) * 1.9); font-size: calc(var(--fs) * .95); }
    .acc-row-txt strong[b-14mxcfziug] { font-size: calc(var(--fs) * .98); }
    .acc-row-txt small[b-14mxcfziug] { font-size: calc(var(--fs) * .84); }
    .acc-row-cat[b-14mxcfziug] { font-size: calc(var(--fs) * .72); }
    .acc-row-go[b-14mxcfziug] { opacity: 1; transform: none; font-size: calc(var(--fs) * .8); top: calc(var(--fs) * .7); }
    .acc-pro[b-14mxcfziug] { font-size: calc(var(--fs) * .68); }

    /* ----- Témoignages : bande horizontale ----- */
    .acc-testis[b-14mxcfziug] {
        display: flex;
        grid-template-columns: none;
        gap: calc(var(--fs) * .6);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: calc(var(--fs) * .35);
    }
    .acc-testi[b-14mxcfziug] { flex: 0 0 calc(var(--fs) * 17); scroll-snap-align: start; padding: calc(var(--fs) * .75) calc(var(--fs) * .85); }
    .acc-testi blockquote[b-14mxcfziug] { font-size: calc(var(--fs) * .92); }
    .acc-avatar[b-14mxcfziug],
    .acc-sk-avatar[b-14mxcfziug] { flex-basis: calc(var(--fs) * 2.2); width: calc(var(--fs) * 2.2); height: calc(var(--fs) * 2.2); font-size: calc(var(--fs) * .85); }
    .acc-testi-id strong[b-14mxcfziug] { font-size: calc(var(--fs) * .9); }
    .acc-testi-id small[b-14mxcfziug] { font-size: calc(var(--fs) * .78); }

    /* ----- Vidéos : bande horizontale ----- */
    .acc-videos[b-14mxcfziug] {
        display: flex;
        grid-template-columns: none;
        gap: calc(var(--fs) * .7);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: calc(var(--fs) * .35);
    }
    .acc-video[b-14mxcfziug] { flex: 0 0 calc(var(--fs) * 19); scroll-snap-align: start; }
    .acc-video figcaption[b-14mxcfziug] { font-size: calc(var(--fs) * .9); }
    .acc-video-btn[b-14mxcfziug] { width: calc(var(--fs) * 3.3); height: calc(var(--fs) * 3.3); }

    /* ----- Plans ----- */
    .acc-plans[b-14mxcfziug] { padding-inline: calc(var(--fs) * .3); }
    .acc-plans[b-14mxcfziug]  .abonnement-card { flex: 0 0 calc(var(--fs) * 16.5); width: calc(var(--fs) * 16.5); padding: calc(var(--fs) * .9) calc(var(--fs) * .8); }
    .acc-plans[b-14mxcfziug]  .abonnement-features li { font-size: calc(var(--fs) * .85); }
    .acc-plans[b-14mxcfziug]  .feature-icon { width: calc(var(--fs) * 1.2); height: calc(var(--fs) * 1.2); min-width: calc(var(--fs) * 1.2); }
    .acc-plans[b-14mxcfziug]  .abonnement-badge { width: calc(var(--fs) * 2.4); height: calc(var(--fs) * 2.4); min-height: calc(var(--fs) * 2.4); font-size: calc(var(--fs) * 1.1); }
    .acc-plans[b-14mxcfziug]  .abonnement-name { font-size: calc(var(--fs) * 1.1); }
    .acc-plans[b-14mxcfziug]  .abonnement-price { font-size: calc(var(--fs) * 1.25); }

    /* ----- Tableau de comparaison : défilement horizontal ----- */
    .acc-wide[b-14mxcfziug]  .compare { overflow-x: auto; }
    .acc-wide[b-14mxcfziug]  .compare-table { min-width: calc(var(--fs) * 38); }
    .acc-wide[b-14mxcfziug]  .compare-title { font-size: calc(var(--fs) * 1.6); }
    .acc-wide[b-14mxcfziug]  .compare-plan { font-size: calc(var(--fs) * 1); }
    .acc-wide[b-14mxcfziug]  .compare-price { font-size: calc(var(--fs) * .82); }
    .acc-wide[b-14mxcfziug]  .compare-group th { font-size: calc(var(--fs) * 1.1); }
    .acc-wide[b-14mxcfziug]  .compare-label { font-size: calc(var(--fs) * .9); }
    .acc-wide[b-14mxcfziug]  .feature-icon { width: calc(var(--fs) * 1.2); height: calc(var(--fs) * 1.2); }

    /* ----- Plan de site : colonnes en bande horizontale ----- */
    .acc-sitemap[b-14mxcfziug] { font-size: calc(var(--fs) * .88); }
    .acc-sitemap-cols[b-14mxcfziug] {
        display: flex;
        grid-template-columns: none;
        gap: calc(var(--fs) * 1.4);
        overflow-x: auto;
    }
    .acc-sitemap-cols nav[b-14mxcfziug] { flex: 0 0 calc(var(--fs) * 10.5); }
    .acc-sitemap-cols h4[b-14mxcfziug] { font-size: calc(var(--fs) * .95); }

    /* ----- Pied de page fixe ----- */
    .acc-footer[b-14mxcfziug] { height: var(--footer-h); min-height: 0; padding: 0; font-size: calc(var(--fs) * .8); }
    .acc-footer-in span[b-14mxcfziug] { font-size: calc(var(--fs) * .8); white-space: nowrap; }

    /* ----- Popups (service / étape / connexion) ----- */
    .svc-overlay[b-14mxcfziug],
    .auth-overlay[b-14mxcfziug] { padding: calc(var(--fs) * .8); }

    .svc-modal[b-14mxcfziug],
    .auth-card[b-14mxcfziug] { max-width: calc(var(--fs) * 28); max-height: 90vh; max-height: 90dvh; }

    .svc-modal[b-14mxcfziug] { padding: calc(var(--fs) * 1.1); font-size: calc(var(--fs) * .95); }
    .svc-ico[b-14mxcfziug] { flex-basis: calc(var(--fs) * 2.8); width: calc(var(--fs) * 2.8); height: calc(var(--fs) * 2.8); font-size: calc(var(--fs) * 1.3); }
    .svc-num[b-14mxcfziug] { flex-basis: calc(var(--fs) * 2.3); width: calc(var(--fs) * 2.3); height: calc(var(--fs) * 2.3); font-size: calc(var(--fs) * .95); }
    .svc-head h2[b-14mxcfziug] { font-size: calc(var(--fs) * 1.15); }
    .svc-meta[b-14mxcfziug] { font-size: calc(var(--fs) * .84); }
    .svc-h[b-14mxcfziug] { font-size: calc(var(--fs) * .8); }
    .svc-bullets li[b-14mxcfziug] { font-size: calc(var(--fs) * .95); }
    .svc-points li[b-14mxcfziug] { font-size: calc(var(--fs) * .86); }
    .svc-hook[b-14mxcfziug] { font-size: calc(var(--fs) * .88); }
    .svc-hook strong[b-14mxcfziug] { font-size: calc(var(--fs) * .95); }
    .svc-reassure[b-14mxcfziug] { font-size: calc(var(--fs) * .8); }

    .auth-card[b-14mxcfziug] { padding: calc(var(--fs) * 1.2) calc(var(--fs) * 1.1); }
    .auth-title[b-14mxcfziug] { font-size: calc(var(--fs) * 1.3); }
    .auth-sub[b-14mxcfziug] { font-size: calc(var(--fs) * .9); }
    .auth-alert[b-14mxcfziug],
    .auth-info[b-14mxcfziug] { font-size: calc(var(--fs) * .9); }
    .auth-label[b-14mxcfziug] { font-size: calc(var(--fs) * .84); }
    .auth-input[b-14mxcfziug] { height: calc(var(--fs) * 2.7); font-size: 16px; }   /* 16px : évite le zoom automatique d'iOS */
    .auth-btn[b-14mxcfziug] { height: calc(var(--fs) * 2.7); font-size: calc(var(--fs) * .98); }
    .auth-lien[b-14mxcfziug] { font-size: calc(var(--fs) * .9); }
    .auth-switch[b-14mxcfziug] { font-size: calc(var(--fs) * .86); }
    .auth-close[b-14mxcfziug] { width: max(28px, calc(var(--fs) * 2.2)); height: max(28px, calc(var(--fs) * 2.2)); }
}

@media (max-width: 520px) {
    .acc-brand-name[b-14mxcfziug] { display: none; }
}

@media (max-width: 820px) {

    /* Filet de sécurité : rien ne dépasse de la page.
       `clip` ne crée pas de zone de défilement, donc les éléments fixes ne sont pas affectés. */
    .accueil[b-14mxcfziug] {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    /* Les conteneurs peuvent rétrécir sous la taille de leur contenu */
    .acc-section[b-14mxcfziug],
    .acc-wrap[b-14mxcfziug],
    .acc-app[b-14mxcfziug],
    .acc-list[b-14mxcfziug],
    .acc-feed[b-14mxcfziug],
    .acc-plans[b-14mxcfziug],
    .acc-sitemap[b-14mxcfziug] { min-width: 0; max-width: 100%; }

    .acc-feed[b-14mxcfziug] { overflow: hidden; }

    /* Grilles : « 1fr » seul peut déborder (min-content), « minmax(0, 1fr) » jamais */
    .acc-rows[b-14mxcfziug] { grid-template-columns: minmax(0, 1fr); }
    .acc-row[b-14mxcfziug] { grid-template-columns: calc(var(--fs) * 1.9) minmax(0, 1fr); }
    .acc-step[b-14mxcfziug] { grid-template-columns: minmax(0, 1fr); }

    /* Texte long : coupé plutôt que de pousser la page */
    .acc-row-txt strong[b-14mxcfziug],
    .acc-row-txt small[b-14mxcfziug],
    .acc-route strong[b-14mxcfziug],
    .acc-route small[b-14mxcfziug],
    .acc-testi blockquote[b-14mxcfziug],
    .acc-video figcaption[b-14mxcfziug],
    .acc-sub[b-14mxcfziug],
    .acc-title[b-14mxcfziug],
    .svc-bullets li[b-14mxcfziug],
    .svc-points li[b-14mxcfziug],
    .svc-hook[b-14mxcfziug] { overflow-wrap: anywhere; }

    /* Zones défilantes : elles défilent dans leur cadre, sans l'élargir */
    .acc-marquee[b-14mxcfziug],
    .acc-provs[b-14mxcfziug],
    .acc-cats[b-14mxcfziug],
    .acc-testis[b-14mxcfziug],
    .acc-videos[b-14mxcfziug],
    .acc-plans[b-14mxcfziug],
    .acc-sitemap-cols[b-14mxcfziug],
    .acc-wide[b-14mxcfziug]  .compare { max-width: 100%; overflow-x: auto; }

    /* En-tête : tient sur une seule ligne sans déborder */
    .acc-header[b-14mxcfziug] { padding: 0 calc(var(--fs) * .6); gap: calc(var(--fs) * .4); }
    .acc-brand[b-14mxcfziug] { flex: 0 0 auto; }
    .acc-nav[b-14mxcfziug] { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: calc(var(--fs) * .6); white-space: nowrap; }
    .acc-nav .acc-btn.acc-btn-sm[b-14mxcfziug] { padding: .3em .7em; }

    /* Pied de page fixe : le texte est tronqué au lieu de dépasser */
    .acc-footer-in[b-14mxcfziug] { padding: 0 calc(var(--fs) * .6); }
    .acc-footer-in span[b-14mxcfziug] { min-width: 0; max-width: 100%; }

    /* Popups : jamais plus larges que l'écran */
    .svc-modal[b-14mxcfziug],
    .auth-card[b-14mxcfziug] { width: 100%; max-width: min(calc(var(--fs) * 28), 100%); }
}

/* Pas de zoom automatique iOS dans les champs de saisie :
   16px minimum sur tous les champs, y compris ceux des composants enfants */
@media (max-width: 820px) {
    .accueil input:not([type="checkbox"]):not([type="radio"])[b-14mxcfziug],
    .accueil textarea[b-14mxcfziug],
    .accueil select[b-14mxcfziug],
    .accueil[b-14mxcfziug]  input:not([type="checkbox"]):not([type="radio"]),
    .accueil[b-14mxcfziug]  textarea,
    .accueil[b-14mxcfziug]  select {
        font-size: 16px;
    }
}

@media (max-width: 820px) {

    /* « Cansecure » reste affiché à droite de l'icône (il était masqué sous 520px) */
    .acc-brand[b-14mxcfziug] { flex: 0 0 auto; }
    .acc-brand-name[b-14mxcfziug] {
        display: inline;
        margin-left: .35rem;
        font-size: .95rem;
        white-space: nowrap;
    }

    /* « S'inscrire » masqué, « Se connecter » prend l'apparence du bouton */
    .acc-nav .acc-nav-signup[b-14mxcfziug] { display: none; }

    .acc-nav a.acc-nav-login[b-14mxcfziug] {
        display: inline-block;
        padding: .3em .85em;
        border-radius: 980px;
        background: var(--accent);
        color: #fff;
        font-size: .76rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .acc-nav a.acc-nav-login:hover[b-14mxcfziug] { background: var(--accent-hover); color: #fff; }

    /* L'en-tête tient sur une ligne : la navigation prend la place restante */
    .acc-nav[b-14mxcfziug] { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: .5rem; }
}

/* Très petits écrans : le nom de marque se réduit au lieu de pousser les boutons */
@media (max-width: 360px) {
    .acc-brand-name[b-14mxcfziug] { font-size: .8rem; margin-left: .25rem; }
}

/* ===================================
   Plans : cartes moins hautes, contenu défilant
=================================== */

.acc-plans[b-14mxcfziug]  .abonnement-grid { align-items: stretch; }

.acc-plans[b-14mxcfziug]  .abonnement-card {
    display: flex;
    flex-direction: column;
    height: 340px;
    max-height: 340px;
    overflow: hidden;            /* la carte ne grandit plus : c'est l'intérieur qui défile */
}

/* Liste des avantages : prend la place restante et défile */
.acc-plans[b-14mxcfziug]  .abonnement-features {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 820px) {
    .acc-plans[b-14mxcfziug]  .abonnement-card {
        height: min(58vh, 310px);
        max-height: min(58vh, 310px);
    }
}

/* ===================================
   En-tête mobile : « Se connecter » au lieu de « S'inscrire »
   (par position : avant-dernier et dernier lien de la navigation)
=================================== */

@media (max-width: 820px) {

    .acc-nav > a:last-child[b-14mxcfziug] { display: none; }            /* S'inscrire */

    .acc-nav > a:nth-last-child(2)[b-14mxcfziug] {                      /* Se connecter */
        display: inline-block;
        padding: .3em .85em;
        border-radius: 980px;
        background: var(--accent);
        color: #fff;
        font-size: .76rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .acc-nav > a:nth-last-child(2):hover[b-14mxcfziug] { background: var(--accent-hover); color: #fff; }
}

/* ===================================
   Plans : cartes plus hautes, badge « Code : … » visible, intérieur défilant
=================================== */

/* Place au-dessus des cartes pour le badge qui dépasse (le conteneur défile et coupait le haut) */
.acc-plans[b-14mxcfziug] { padding-top: 1.6rem; }

.acc-plans[b-14mxcfziug]  .abonnement-card {
    display: flex;
    flex-direction: column;
    height: 460px;
    max-height: 460px;
    overflow: visible;           /* le badge n'est plus coupé */
}

/* Seule la liste des avantages défile */
.acc-plans[b-14mxcfziug]  .abonnement-features {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 820px) {
    .acc-plans[b-14mxcfziug]  .abonnement-card {
        height: min(72vh, 440px);
        max-height: min(72vh, 440px);
    }
}

@media (max-width: 820px) {

    .acc-plans[b-14mxcfziug]  .abonnement-card {
        flex: 0 0 172px;
        width: 172px;
        height: min(62vh, 380px);
        max-height: min(62vh, 380px);
        padding: 12px 10px;
        gap: 6px;
        border-radius: 14px;
    }

    .acc-plans[b-14mxcfziug]  .abonnement-badge {
        width: 28px;
        height: 28px;
        min-height: 28px;
        font-size: 13px;
    }

    .acc-plans[b-14mxcfziug]  .abonnement-name  { font-size: 12.5px; }
    .acc-plans[b-14mxcfziug]  .abonnement-price { font-size: 13px; }

    .acc-plans[b-14mxcfziug]  .abonnement-features { gap: 4px; }
    .acc-plans[b-14mxcfziug]  .abonnement-features li { font-size: 10.5px; line-height: 1.3; }

    .acc-plans[b-14mxcfziug]  .feature-icon {
        width: 12px;
        height: 12px;
        min-width: 12px;
    }

    .acc-plans[b-14mxcfziug]  .abonnement-card button,
    .acc-plans[b-14mxcfziug]  .abonnement-card a { font-size: 11px; }
}

@media (max-width: 820px) {

    /* « Se connecter » : toujours visible, sous forme de bouton */
    .acc-nav a.acc-nav-login[b-14mxcfziug] {
        display: inline-block !important;
        padding: .3em .85em;
        border-radius: 980px;
        background: var(--accent);
        color: #fff !important;
        font-size: .76rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .acc-nav a.acc-nav-login:hover[b-14mxcfziug] { background: var(--accent-hover); }

    /* « S'inscrire » : masqué dans l'en-tête */
    .acc-nav a.acc-nav-signup[b-14mxcfziug] { display: none !important; }
}

@media (max-width: 820px) {
    .acc-route li:last-child .acc-step[b-14mxcfziug] { padding-right: 0; }
}

@media (min-width: 821px) {

    .acc-plans[b-14mxcfziug]  .abonnement-card {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .acc-plans[b-14mxcfziug]  .abonnement-features {
        flex: 0 1 auto;
        min-height: auto;
        overflow: visible;
    }
}


/* ===================================
   Plans (mobile) : mêmes tailles que dans l'application,
   hauteur = carte la plus longue, pastilles toujours visibles
=================================== */

@media (max-width: 900px) {

    /* Le défilement se fait dans la grille : .acc-plans ne coupe plus rien */
    .acc-plans[b-14mxcfziug] {
        margin-top: .3rem;
        padding: 0 !important;
        overflow: visible !important;
    }

    .acc-plans[b-14mxcfziug]  .abonnement-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;          /* toutes les cartes = la plus longue */
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 18px 0 .6rem !important;         /* 18px : place pour « Code : … » */
        gap: .5rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .acc-plans[b-14mxcfziug]  .abonnement-grid::-webkit-scrollbar { display: none; }

    /* Cartes : 2 par écran, hauteur selon le contenu */
    .acc-plans[b-14mxcfziug]  .abonnement-card {
        flex: 0 0 calc((100% - .5rem) / 2) !important;
        width: calc((100% - .5rem) / 2) !important;
        min-width: 0 !important;
        top: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;             /* la pastille dépasse de la carte */
        gap: .3rem;
        padding: .6rem .4rem;
        border-radius: 10px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Tailles identiques à l'application */
    .acc-plans[b-14mxcfziug]  .abonnement-badge { width: 28px; height: 28px; min-height: 28px; font-size: .8rem; flex-shrink: 0; }
    .acc-plans[b-14mxcfziug]  .abonnement-name { font-size: .7rem; }
    .acc-plans[b-14mxcfziug]  .abonnement-price { font-size: .72rem; }
    .acc-plans[b-14mxcfziug]  .abonnement-objective { font-size: .5rem; line-height: 1.25; }
    .acc-plans[b-14mxcfziug]  .abonnement-delai,
    .acc-plans[b-14mxcfziug]  .abonnement-expire { font-size: .48rem; padding: .15rem .45rem; }
    .acc-plans[b-14mxcfziug]  .abonnement-delai i,
    .acc-plans[b-14mxcfziug]  .abonnement-expire i { font-size: .5rem; }

    /* Pastille « Code : … » : entièrement visible, au-dessus de la carte */
    .acc-plans[b-14mxcfziug]  .abonnement-promo {
        top: -9px;
        right: 8px;
        z-index: 3;
        padding: .15rem .4rem;
        font-size: .46rem;
        white-space: nowrap;
    }

    /* Liste : jamais coupée ni défilante */
    .acc-plans[b-14mxcfziug]  .abonnement-features {
        flex: 1 0 auto !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0;
        gap: .25rem;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .acc-plans[b-14mxcfziug]  .abonnement-features li { font-size: .48rem; gap: .3rem; line-height: 1.25; }
    .acc-plans[b-14mxcfziug]  .feature-icon { width: 13px; height: 13px; min-width: 13px; }
    .acc-plans[b-14mxcfziug]  .feature-icon i { font-size: .44rem; }
    .acc-plans[b-14mxcfziug]  .feature-tag { font-size: .4rem; padding: 0 .3rem; margin-left: .2rem; }

    /* Bouton toujours en bas */
    .acc-plans[b-14mxcfziug]  .abonnement-cta { margin-top: auto; padding: .3rem .4rem; font-size: .55rem; }
}

@media (max-width: 820px) {

    .auth-overlay[b-14mxcfziug] { padding: calc(var(--fs) * .6); }

    .auth-card[b-14mxcfziug] {
        max-width: calc(var(--fs) * 22);
        padding: calc(var(--fs) * .9) calc(var(--fs) * .9) calc(var(--fs) * .8);
        border-radius: 16px;
    }

    .auth-title[b-14mxcfziug] {
        font-size: calc(var(--fs) * 1.1);
        margin-bottom: calc(var(--fs) * .1);
    }

    .auth-sub[b-14mxcfziug] {
        margin-bottom: calc(var(--fs) * .55);
        font-size: calc(var(--fs) * .78);
    }

    .auth-alert[b-14mxcfziug],
    .auth-info[b-14mxcfziug] {
        margin-bottom: calc(var(--fs) * .6);
        padding: calc(var(--fs) * .4) calc(var(--fs) * .55);
        font-size: calc(var(--fs) * .78);
    }

    .auth-field[b-14mxcfziug] { margin-bottom: calc(var(--fs) * .45); }

    .auth-label[b-14mxcfziug] {
        margin-bottom: calc(var(--fs) * .15);
        font-size: calc(var(--fs) * .72);
    }

    .auth-input[b-14mxcfziug] {
        height: calc(var(--fs) * 2.2);
        padding: 0 calc(var(--fs) * .6);
        font-size: 16px;                 /* ne pas descendre : zoom automatique iOS */
        border-radius: 7px;
    }

    .auth-pw .auth-input[b-14mxcfziug] { padding-right: calc(var(--fs) * 2.2); }

    .auth-eye[b-14mxcfziug] { right: 4px; padding: 3px; }
    .auth-eye svg[b-14mxcfziug] { width: 15px; height: 15px; }

    .auth-btn[b-14mxcfziug] {
        height: calc(var(--fs) * 2.3);
        font-size: calc(var(--fs) * .85);
    }

    .auth-divider[b-14mxcfziug] {
        margin: calc(var(--fs) * .6) 0;
        font-size: calc(var(--fs) * .72);
    }

    .auth-lien[b-14mxcfziug] { font-size: calc(var(--fs) * .78); margin-top: calc(var(--fs) * .25); }
    .auth-retour[b-14mxcfziug] { margin-top: calc(var(--fs) * .55); }
    .auth-switch[b-14mxcfziug] { margin-top: calc(var(--fs) * .4); font-size: calc(var(--fs) * .75); }

    .auth-close[b-14mxcfziug] {
        top: calc(var(--fs) * .5);
        right: calc(var(--fs) * .5);
        width: 24px;
        height: 24px;
        font-size: 1rem;
    }
}

@media (max-width: 820px) {

    .auth-btn[b-14mxcfziug] {
        height: calc(var(--fs) * 1.8);
        font-size: calc(var(--fs) * .78);
    }

    .auth-lien[b-14mxcfziug],
    .auth-lien-inline[b-14mxcfziug] {
        font-size: calc(var(--fs) * .72);
    }

    .auth-close[b-14mxcfziug] {
        width: 22px;
        height: 22px;
        font-size: .9rem;
    }

    .auth-eye[b-14mxcfziug] { padding: 2px; }
    .auth-eye svg[b-14mxcfziug] { width: 13px; height: 13px; }
}



/* ===================================
   Parcours : « Voir plus » au survol de chaque carte
=================================== */

.acc-step-plus[b-14mxcfziug] {
    grid-area: plus;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .25rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--accent);
    opacity: 0;                          /* la place est réservée : pas de saut de mise en page */
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
}

.acc-step-plus svg[b-14mxcfziug] { flex: 0 0 auto; }

.acc-step:hover .acc-step-plus[b-14mxcfziug],
.acc-step:focus-visible .acc-step-plus[b-14mxcfziug] {
    opacity: 1;
    transform: none;
}

/* Téléphone / tablette : pas de survol, donc toujours visible */
@media (hover: none) {
    .acc-step-plus[b-14mxcfziug] { opacity: 1; transform: none; }
}

@media (max-width: 820px) {
    .acc-step-plus[b-14mxcfziug] { font-size: calc(var(--fs) * .84); }
    .acc-step-plus svg[b-14mxcfziug] { width: calc(var(--fs) * 1.1); height: calc(var(--fs) * 1.1); }
}

/* ===================================
   Parcours : « + Voir plus » en bas à droite de chaque carte
=================================== */

.acc-step[b-14mxcfziug] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "num"
        "titre"
        "detail"
        "plus";
}

.acc-step-plus[b-14mxcfziug] {
    grid-area: plus;
    justify-self: end;                   /* à droite */
    align-self: end;                     /* en bas */
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .3rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    opacity: 0;                          /* place réservée : la hauteur ne bouge pas */
    transform: translateX(6px);
    transition: opacity .2s ease, transform .2s ease;
}

.acc-step-plus svg[b-14mxcfziug] { flex: 0 0 auto; }

/* Survol (souris), focus clavier, et toucher sur mobile */
.acc-step:hover .acc-step-plus[b-14mxcfziug],
.acc-step:focus-visible .acc-step-plus[b-14mxcfziug],
.acc-step:active .acc-step-plus[b-14mxcfziug] {
    opacity: 1;
    transform: none;
}

@media (max-width: 820px) {
    .acc-step-plus[b-14mxcfziug] { font-size: calc(var(--fs) * .84); }
    .acc-step-plus svg[b-14mxcfziug] { width: calc(var(--fs) * 1.1); height: calc(var(--fs) * 1.1); }
}

/* ===================================
   Accompagnement : « + Voir plus » en bas à droite de chaque ressource
=================================== */

.acc-row-go[b-14mxcfziug] { display: none; }            /* remplacé par « + Voir plus » */

.acc-row[b-14mxcfziug] {
    position: relative;
    padding-bottom: 1.5rem;               /* place réservée pour le libellé */
}

.acc-row-plus[b-14mxcfziug] {
    position: absolute;
    right: 0;
    bottom: .45rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .62rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .2s ease, transform .2s ease;
}

.acc-row-plus svg[b-14mxcfziug] { flex: 0 0 auto; }

/* Survol (souris), focus clavier, et toucher sur mobile */
.acc-row:hover .acc-row-plus[b-14mxcfziug],
.acc-row:focus-visible .acc-row-plus[b-14mxcfziug],
.acc-row:active .acc-row-plus[b-14mxcfziug] {
    opacity: 1;
    transform: none;
}

@media (max-width: 820px) {
    /* annule les règles mobiles de « Voir → » */
    .acc-row-go[b-14mxcfziug] { display: none; }

    .acc-row[b-14mxcfziug] { padding-bottom: calc(var(--fs) * 1.9); }
    .acc-row-plus[b-14mxcfziug] { font-size: calc(var(--fs) * .8); bottom: calc(var(--fs) * .6); }
    .acc-row-plus svg[b-14mxcfziug] { width: calc(var(--fs) * 1.1); height: calc(var(--fs) * 1.1); }
}

/* ===================================
   Popups service / étape (mobile) : fenêtre compacte
=================================== */

@media (max-width: 820px) {

    .svc-overlay[b-14mxcfziug] { padding: calc(var(--fs) * .6); }

    .svc-modal[b-14mxcfziug] {
        max-width: calc(var(--fs) * 22);          /* même largeur que la fenêtre de connexion */
        max-height: 86dvh;
        padding: calc(var(--fs) * .85) calc(var(--fs) * .9) calc(var(--fs) * .75);
        border-radius: 16px;
        font-size: calc(var(--fs) * .78);
    }

    /* En-tête */
    .svc-head[b-14mxcfziug] { gap: calc(var(--fs) * .5); padding-right: calc(var(--fs) * 1.6); }
    .svc-ico[b-14mxcfziug] {
        flex-basis: calc(var(--fs) * 2.1);
        width: calc(var(--fs) * 2.1);
        height: calc(var(--fs) * 2.1);
        font-size: calc(var(--fs) * 1);
    }
    .svc-num[b-14mxcfziug] {
        flex-basis: calc(var(--fs) * 1.9);
        width: calc(var(--fs) * 1.9);
        height: calc(var(--fs) * 1.9);
        font-size: calc(var(--fs) * .8);
    }
    .svc-head h2[b-14mxcfziug] { font-size: calc(var(--fs) * .95); }
    .svc-meta[b-14mxcfziug] { font-size: calc(var(--fs) * .68); }

    /* Sections */
    .svc-sec[b-14mxcfziug] { margin-top: calc(var(--fs) * .5); padding-top: calc(var(--fs) * .4); }
    .svc-h[b-14mxcfziug] { margin-bottom: calc(var(--fs) * .25); font-size: calc(var(--fs) * .62); }

    .svc-bullets[b-14mxcfziug] { gap: calc(var(--fs) * .15); }
    .svc-bullets li[b-14mxcfziug] { padding-left: calc(var(--fs) * .8); font-size: calc(var(--fs) * .78); line-height: 1.3; }
    .svc-bullets li[b-14mxcfziug]::before { width: 4px; height: 4px; }

    .svc-points[b-14mxcfziug] { gap: calc(var(--fs) * .2); }
    .svc-points li[b-14mxcfziug] { padding: calc(var(--fs) * .15) calc(var(--fs) * .5); font-size: calc(var(--fs) * .72); }
    .svc-points-col li[b-14mxcfziug] { padding: calc(var(--fs) * .2) calc(var(--fs) * .5); }

    /* Accroche */
    .svc-hook[b-14mxcfziug] {
        margin: calc(var(--fs) * .5) 0 calc(var(--fs) * .45);
        padding: calc(var(--fs) * .4) calc(var(--fs) * .55);
        font-size: calc(var(--fs) * .7);
        line-height: 1.3;
    }
    .svc-hook strong[b-14mxcfziug] { font-size: calc(var(--fs) * .76); }

    /* Pied de la fenêtre */
    .svc-modal .auth-btn[b-14mxcfziug] { height: calc(var(--fs) * 1.9); font-size: calc(var(--fs) * .78); }
    .svc-reassure[b-14mxcfziug] { margin-top: calc(var(--fs) * .25); font-size: calc(var(--fs) * .64); }
    .svc-modal .auth-switch[b-14mxcfziug] { margin-top: calc(var(--fs) * .25); font-size: calc(var(--fs) * .68); }
    .svc-modal .auth-lien-inline[b-14mxcfziug] { font-size: calc(var(--fs) * .68); }

    /* Bouton fermer */
    .svc-modal .auth-close[b-14mxcfziug] {
        top: calc(var(--fs) * .5);
        right: calc(var(--fs) * .5);
        width: 22px;
        height: 22px;
        font-size: .9rem;
    }
}

/* ===================================
   Plans (mobile) : polices plus grandes, hauteur fixe,
   liste des éléments défilante
=================================== */

@media (max-width: 900px) {

    .acc-plans[b-14mxcfziug]  .abonnement-grid {
        align-items: stretch !important;
        padding-top: 18px !important;            /* place pour « Code : … » */
    }

    /* Hauteur fixe : ajustez 440px / 66vh selon votre goût */
    .acc-plans[b-14mxcfziug]  .abonnement-card {
        height: min(66vh, 440px) !important;
        max-height: min(66vh, 440px) !important;
        overflow: visible !important;            /* la pastille promo reste visible */
        padding: .7rem .5rem !important;
    }

    /* Textes plus grands */
    .acc-plans[b-14mxcfziug]  .abonnement-badge { width: 32px; height: 32px; min-height: 32px; font-size: .95rem; }
    .acc-plans[b-14mxcfziug]  .abonnement-name { font-size: .8rem; }
    .acc-plans[b-14mxcfziug]  .abonnement-price { font-size: .85rem; }
    .acc-plans[b-14mxcfziug]  .abonnement-objective { font-size: .58rem; line-height: 1.3; }
    .acc-plans[b-14mxcfziug]  .abonnement-delai,
    .acc-plans[b-14mxcfziug]  .abonnement-expire { font-size: .55rem; padding: .18rem .5rem; }
    .acc-plans[b-14mxcfziug]  .abonnement-promo { font-size: .52rem; }

    /* Liste : prend la place restante et défile */
    .acc-plans[b-14mxcfziug]  .abonnement-features {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;                     /* le glissement vertical défile la liste */
        gap: .32rem;
        padding-right: .3rem;
        scrollbar-width: thin !important;        /* petite barre rouge qui indique le défilement */
        scrollbar-color: #c92a2a transparent;
    }

    .acc-plans[b-14mxcfziug]  .abonnement-features::-webkit-scrollbar { display: block !important; width: 3px !important; }
    .acc-plans[b-14mxcfziug]  .abonnement-features::-webkit-scrollbar-thumb { background: #c92a2a; border-radius: 10px; }

    .acc-plans[b-14mxcfziug]  .abonnement-features li { font-size: .58rem; line-height: 1.3; gap: .35rem; }
    .acc-plans[b-14mxcfziug]  .feature-icon { width: 15px; height: 15px; min-width: 15px; }
    .acc-plans[b-14mxcfziug]  .feature-icon i { font-size: .5rem; }
    .acc-plans[b-14mxcfziug]  .feature-tag { font-size: .44rem; }

    /* Bouton toujours visible en bas */
    .acc-plans[b-14mxcfziug]  .abonnement-cta { margin-top: .2rem; padding: .4rem .5rem; font-size: .64rem; flex-shrink: 0; }
}

/* ===================================
   Plans (mobile) : cartes plus hautes
=================================== */

@media (max-width: 900px) {

    .acc-plans[b-14mxcfziug]  .abonnement-card {
        height: min(78vh, 560px) !important;
        max-height: min(78vh, 560px) !important;
    }
}

/* ===================================
   Bouton « Créer mon compte » (mobile) : même hauteur que « Se connecter »
=================================== */

@media (max-width: 820px) {

    .acc-btn.acc-btn-lg[b-14mxcfziug] {
        padding: .3em .85em !important;
        font-size: .76rem !important;
        font-weight: 500;
        line-height: 1.35;
        box-shadow: 0 2px 8px rgba(176, 30, 30, .2);
    }
}

/* ===================================
   Paysage de téléphone : écran bas (≤ 500px de haut)
=================================== */

@media (max-height: 500px) and (orientation: landscape) {

    /* En-tête et pied de page plus fins */
    .accueil[b-14mxcfziug] { --bar-h: 40px; --footer-h: 24px; }

    /* Zone d'actualité : proportionnelle à la hauteur de l'écran, rien ne dépasse */
    .acc-hero[b-14mxcfziug] { padding: .3rem 0; }

    .acc-feed[b-14mxcfziug] {
        height: calc(100vh - var(--bar-h) - var(--footer-h) - 1.2rem);
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    .acc-feed[b-14mxcfziug]  .actualite-content {
        min-height: 0;
        overflow: hidden;
    }

    /* Le texte de l'article ne doit pas envahir l'image */
    .acc-feed[b-14mxcfziug]  p,
    .acc-feed[b-14mxcfziug]  [class*="desc"],
    .acc-feed[b-14mxcfziug]  [class*="texte"],
    .acc-feed[b-14mxcfziug]  [class*="resume"] {
        font-size: .72rem !important;
        line-height: 1.3 !important;
        max-height: 3.9em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .acc-feed[b-14mxcfziug]  h1,
    .acc-feed[b-14mxcfziug]  h2,
    .acc-feed[b-14mxcfziug]  h3 {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }

    /* Sections plus compactes */
    .acc-section[b-14mxcfziug] { padding: .6rem 0; }
}

/* ===================================
   Paysage de téléphone (écran bas) : tout reste dans l'écran
=================================== */

@media (max-height: 500px) and (orientation: landscape) {

    /* Marges de sécurité (encoche, coins arrondis) */
    .accueil[b-14mxcfziug] {
        --sl: env(safe-area-inset-left, 0px);
        --sr: env(safe-area-inset-right, 0px);
        --bar-h: 40px;
        --footer-h: 24px;

        width: 100%;
        max-width: 100%;
        min-height: 100dvh;
        overflow-x: clip;                      /* rien ne dépasse à droite */
    }

    /* Barres fixes : elles respectent les marges */
    .acc-header[b-14mxcfziug] {
        padding-left: max(.75rem, var(--sl));
        padding-right: max(.75rem, var(--sr));
        gap: .5rem;
    }

    .acc-nav[b-14mxcfziug] { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: .6rem; white-space: nowrap; }
    .acc-nav a:not(.acc-btn):not(.acc-nav-login)[b-14mxcfziug] { display: none; }   /* liens de section masqués */
    .acc-nav .acc-nav-signup[b-14mxcfziug] { display: none; }

    .acc-footer-in[b-14mxcfziug] { padding-left: max(.6rem, var(--sl)); padding-right: max(.6rem, var(--sr)); }

    /* Contenu : marges de sécurité des deux côtés */
    .acc-wrap[b-14mxcfziug] {
        padding-left: max(.85rem, var(--sl));
        padding-right: max(.85rem, var(--sr));
    }

    /* Les conteneurs peuvent rétrécir ; seuls les bandeaux défilent, dans leur cadre */
    .acc-section[b-14mxcfziug], .acc-wrap[b-14mxcfziug], .acc-app[b-14mxcfziug], .acc-list[b-14mxcfziug], .acc-feed[b-14mxcfziug], .acc-plans[b-14mxcfziug], .acc-sitemap[b-14mxcfziug] { min-width: 0; max-width: 100%; }

    .acc-marquee[b-14mxcfziug], .acc-provs[b-14mxcfziug], .acc-cats[b-14mxcfziug], .acc-testis[b-14mxcfziug], .acc-videos[b-14mxcfziug],
    .acc-sitemap-cols[b-14mxcfziug] { max-width: 100%; overflow-x: auto; }

    .acc-rows[b-14mxcfziug] { grid-template-columns: minmax(0, 1fr); max-height: 60vh; }
    .acc-row[b-14mxcfziug]  { grid-template-columns: 22px minmax(0, 1fr); }

    /* Actualité : hauteur de l'écran visible, texte limité */
    .acc-hero[b-14mxcfziug] { padding: .3rem 0; }
    .acc-feed[b-14mxcfziug] {
        height: calc(100dvh - var(--bar-h) - var(--footer-h) - 1rem);
        min-height: 0;
        overflow: hidden;
    }

    /* Sections et titres plus compacts */
    .acc-section[b-14mxcfziug] { padding: .6rem 0; }
    .acc-title[b-14mxcfziug] { font-size: 1.1rem; }

    /* Fenêtres : jamais plus hautes que l'écran */
    .svc-overlay[b-14mxcfziug], .auth-overlay[b-14mxcfziug] {
        padding: .5rem max(.5rem, var(--sr)) .5rem max(.5rem, var(--sl));
    }
    .svc-modal[b-14mxcfziug], .auth-card[b-14mxcfziug] { max-height: 94dvh; max-width: 420px; }
}

/* ===================================
   Plans en paysage de téléphone : titre collé aux cartes
=================================== */

@media (max-height: 500px) and (orientation: landscape) {

    .acc-plans[b-14mxcfziug] {
        margin-top: .2rem !important;
        padding-top: 0 !important;
        padding-bottom: .5rem !important;
        overflow: visible !important;
    }

    .acc-plans[b-14mxcfziug]  .abonnement-grid {
        margin: 0 !important;                /* annule les 70px de l'application */
        padding: 18px 0 .5rem !important;    /* 18px : place pour « Code : … » */
        height: auto !important;
    }

    .acc-plans[b-14mxcfziug]  .abonnement-card {
        top: 0 !important;
        margin: 0 !important;
    }

    /* Titre « Plans » : moins d'espace dessous */
    #abonnements .acc-title[b-14mxcfziug] { margin-bottom: 0; }
}

/* ===================================
   Accompagnement en paysage de téléphone : 3 colonnes
=================================== */

@media (max-height: 500px) and (orientation: landscape) {

    .acc-rows[b-14mxcfziug] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 1.2rem;
        max-height: 60vh;
    }

    .acc-row[b-14mxcfziug] {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: .45rem;
        padding: .5rem 0 1.4rem;               /* place pour « + Voir plus » */
    }

    .acc-row-txt strong[b-14mxcfziug] { font-size: .72rem; }
    .acc-row-txt small[b-14mxcfziug]  { font-size: .62rem; line-height: 1.3; }
    .acc-row-cat[b-14mxcfziug]        { font-size: .5rem; }

    .acc-row-plus[b-14mxcfziug] {
        font-size: .58rem;
        bottom: .4rem;
    }
}

/* Sur écran large (tablette en paysage) : 3 colonnes aussi, si la largeur le permet */
@media (min-width: 821px) and (max-width: 1100px) and (min-height: 501px) {
    .acc-rows[b-14mxcfziug] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===================================
   Témoignages en paysage de téléphone : 4 colonnes
=================================== */

@media (max-height: 500px) and (orientation: landscape) {

    .acc-testis[b-14mxcfziug] {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: .5rem;
        margin: .6rem 0 .5rem;
        overflow: visible;
    }

    .acc-testi[b-14mxcfziug] {
        flex: initial;
        min-width: 0;
        padding: .5rem .55rem;
        gap: .3rem;
    }

    .acc-testi blockquote[b-14mxcfziug] {
        font-size: .62rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .acc-stars[b-14mxcfziug] { font-size: .62rem; }

    .acc-avatar[b-14mxcfziug] {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        font-size: .62rem;
    }

    .acc-testi-id strong[b-14mxcfziug] { font-size: .62rem; }
    .acc-testi-id small[b-14mxcfziug]  { font-size: .54rem; }
}

/* Étoiles des témoignages : or pour la note, gris pour le reste */
.acc-stars .on[b-14mxcfziug]  { color: var(--star); }
.acc-stars .off[b-14mxcfziug] { color: color-mix(in srgb, var(--muted) 35%, transparent); }

/* ===================================
   Accompagnement (mobile portrait) : 2 colonnes
=================================== */

@media (max-width: 820px) and (orientation: portrait) {

    .acc-rows[b-14mxcfziug] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: .9rem;
        max-height: 60vh;
    }

    .acc-row[b-14mxcfziug] {
        grid-template-columns: calc(var(--fs) * 1.6) minmax(0, 1fr);
        gap: calc(var(--fs) * .45);
        padding: calc(var(--fs) * .6) 0 calc(var(--fs) * 1.7);   /* place pour « + Voir plus » */
    }

    .acc-res-ico[b-14mxcfziug] {
        flex-basis: calc(var(--fs) * 1.6);
        width: calc(var(--fs) * 1.6);
        height: calc(var(--fs) * 1.6);
        font-size: calc(var(--fs) * .8);
    }

    .acc-row-txt strong[b-14mxcfziug] { font-size: calc(var(--fs) * .84); line-height: 1.25; }
    .acc-row-txt small[b-14mxcfziug]  { font-size: calc(var(--fs) * .72); line-height: 1.3; }
    .acc-row-cat[b-14mxcfziug]        { font-size: calc(var(--fs) * .6); }

    .acc-row-plus[b-14mxcfziug] {
        font-size: calc(var(--fs) * .7);
        bottom: calc(var(--fs) * .5);
    }
    .acc-row-plus svg[b-14mxcfziug] { width: calc(var(--fs) * 1); height: calc(var(--fs) * 1); }
}

/* ===================================
   Accompagnement : carte rouge au survol (comme les puces de domaines)
=================================== */

/* Accompagnement : textes lisibles sur la carte rouge clair */
.acc-row:hover .acc-row-txt small[b-14mxcfziug],
.acc-row:focus-visible .acc-row-txt small[b-14mxcfziug],
.acc-row:active .acc-row-txt small[b-14mxcfziug] {
    color: var(--muted) !important;
}

.acc-row:hover .acc-row-cat[b-14mxcfziug],
.acc-row:focus-visible .acc-row-cat[b-14mxcfziug],
.acc-row:active .acc-row-cat[b-14mxcfziug] {
    color: var(--muted) !important;
}

.acc-row:hover .acc-row-txt strong[b-14mxcfziug],
.acc-row:focus-visible .acc-row-txt strong[b-14mxcfziug],
.acc-row:active .acc-row-txt strong[b-14mxcfziug] {
    color: var(--accent) !important;
}

.acc-row:hover .acc-row-plus[b-14mxcfziug],
.acc-row:focus-visible .acc-row-plus[b-14mxcfziug],
.acc-row:active .acc-row-plus[b-14mxcfziug] {
    color: var(--accent) !important;
}

.acc-row:hover .acc-pro[b-14mxcfziug],
.acc-row:focus-visible .acc-pro[b-14mxcfziug],
.acc-row:active .acc-pro[b-14mxcfziug] {
    background: var(--accent);
    color: #fff;
}

/* ===================================
   Accompagnement : carte rouge clair au survol
=================================== */

.acc-row[b-14mxcfziug] {
    border-radius: 12px;
    padding-left: .6rem;
    padding-right: .6rem;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.acc-row:hover[b-14mxcfziug],
.acc-row:focus-visible[b-14mxcfziug],
.acc-row:active[b-14mxcfziug] {
    background: var(--soft);                 /* rouge clair */
    border-top-color: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Textes : le titre passe au rouge, le reste garde ses couleurs */
.acc-row:hover .acc-row-txt strong[b-14mxcfziug],
.acc-row:focus-visible .acc-row-txt strong[b-14mxcfziug],
.acc-row:active .acc-row-txt strong[b-14mxcfziug] { color: var(--accent); }

/* Icône : pastille blanche sur le fond clair */
.acc-row:hover .acc-res-ico[b-14mxcfziug],
.acc-row:focus-visible .acc-res-ico[b-14mxcfziug],
.acc-row:active .acc-res-ico[b-14mxcfziug] { background: #fff; }

/* Bouton « + Voir plus » : bien à l'intérieur, en bas à droite */
.acc-row-plus[b-14mxcfziug] {
    right: .6rem;
    bottom: .5rem;
}

@media (max-width: 820px) {
    .acc-row-plus[b-14mxcfziug] { right: .6rem; bottom: calc(var(--fs) * .5); }
}

/* ===================================
   Accompagnement : catégorie en rouge seulement au survol
=================================== */

.acc-row-cat[b-14mxcfziug] {
    color: var(--muted);
    opacity: 1;
    transition: color .2s ease;
}

.acc-row:hover .acc-row-cat[b-14mxcfziug],
.acc-row:focus-visible .acc-row-cat[b-14mxcfziug],
.acc-row:active .acc-row-cat[b-14mxcfziug] {
    color: var(--accent) !important;
}
/* /Components/Pages/Actualite/Actualite.razor.rz.scp.css */
/* ==========================
   Page Actualité
========================== */

.actualite-page[b-f7sbg0w4ag]{
    min-height:100vh;
    background:url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================
   Agents (fixe en haut)
========================== */

.agents-sticky[b-f7sbg0w4ag]{
    position:fixed;
    top:90px;
    left:250px;
    right:70px;bottom: 100px;
    height:110px;
    padding:.3rem .5rem;
    background:#fff;
    border-bottom:1px solid #eee;
    /* box-shadow:0 2px 8px rgba(0,0,0,.08); */
    border-radius:12px;
    overflow:hidden;
    z-index:1000;
}

.agents-scroll[b-f7sbg0w4ag]{
    display:flex;
    align-items:center;
    gap:.4rem;
    height:100%;
    padding:.05rem 0;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
}

.agents-scroll[b-f7sbg0w4ag]::-webkit-scrollbar{
    display:none;
}
/* ==========================
   Contenu central
========================== */

.actualite-content[b-f7sbg0w4ag]{
    position:fixed;
    top:200px;
    bottom:115px;   
    left:250px;
    right:70px;
    padding:.5rem;
    overflow:hidden;
    background:rgba(255,255,255,.85);
    border-radius:12px;
}

/* ==========================
   News (fixe en bas)
========================== */

.news-sticky[b-f7sbg0w4ag]{
    position:fixed;
    left:250px;
    right:70px;
    height:100px;
    bottom:33px;
    padding:.25rem .05rem;
    background:#fff;
    border-top:1px solid #eee;
    /* box-shadow:0 -2px 6px rgba(0,0,0,.08); */
    overflow:hidden;
    z-index:1000;
}

/* ==========================
   Responsive
========================== */

@media (max-width:900px){

    .agents-sticky[b-f7sbg0w4ag],
    .actualite-content[b-f7sbg0w4ag],
    .news-sticky[b-f7sbg0w4ag]{
        left:0;
        right:0;
    }

    .agents-sticky[b-f7sbg0w4ag]{
        top:70px;
    }

    .actualite-content[b-f7sbg0w4ag]{
        top:200px;
        bottom:105px;
        padding:.4rem;
    }

    .news-sticky[b-f7sbg0w4ag]{
        bottom:0;
    }
}
/* /Components/Pages/Actualite/Info.razor.rz.scp.css */
.news-feed[b-h25me2n6g1]{
    height:98%;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:none;
}

.news-background-wrapper[b-h25me2n6g1]{
    flex:1;
    position:relative;
    overflow:hidden;
    min-height:0;
    display:flex;
    flex-direction:column;
    color:#fff;
}

/* Voiles : haut (titre) et bas (description + barre flottante) */
.news-background-wrapper[b-h25me2n6g1]::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 38%),
        linear-gradient(to top,    rgba(0,0,0,.8)  0%, rgba(0,0,0,0) 55%);
}

.news-background-img[b-h25me2n6g1]{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    z-index:0;
}

/* ==========================
   En-tête : importance, titre, date et lieu
========================== */

.news-header-overlay[b-h25me2n6g1]{
    position:relative;
    z-index:2;
    flex-shrink:0;
    padding:1rem 1rem 0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.3rem;
}

.news-header-overlay h1[b-h25me2n6g1]{
    margin:0;
    max-width:min(48rem, calc(100% - 7rem));
    font-size:1.15rem;
    font-weight:700;
    line-height:1.25;
    color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.5);
}

.news-info[b-h25me2n6g1]{
    display:flex;
    align-items:center;
    gap:.8rem;
    font-size:.68rem;
    font-weight:500;
    color:#f1f1f1;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
}

.news-rating-overlay[b-h25me2n6g1]{
    position:absolute;
    top:.8rem;
    right:0;
    z-index:7;
    pointer-events:none;
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.25rem .7rem .25rem .8rem;
    border-radius:980px 0 0 980px;
    background:rgba(20,20,22,.6);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 2px 10px rgba(0,0,0,.3);
    font-size:.6rem;
    font-weight:600;
    color:#f5a524;
}

.news-rating-overlay span:last-child[b-h25me2n6g1]{ color:#fff; }

.news-rating-overlay.is-urgent[b-h25me2n6g1]{ background:#b01e1e; }
.news-rating-overlay.is-urgent span:first-child[b-h25me2n6g1]{ color:#ffd9a0; }

/* ==========================
   Indicateurs (cercles) — colonne à gauche, libellé au survol du cercle
========================== */

.news-impact-panel[b-h25me2n6g1]{
    position:absolute;
    left:.8rem;
    top:50%;
    transform:translateY(-50%);
    z-index:4;
}

.integration-circles[b-h25me2n6g1]{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.integration-circle-item[b-h25me2n6g1]{
    position:relative;
    display:flex;
    align-items:center;
    outline:none;
}

.integration-circle[b-h25me2n6g1]{
    width:42px;
    height:42px;
    overflow:visible;
}

.circle-track[b-h25me2n6g1],
.circle-fill[b-h25me2n6g1]{
    fill:none;
    stroke-width:5;
}

.circle-track[b-h25me2n6g1]{ stroke:rgba(255,255,255,.3); }

/* La rotation de départ (-90°) est faite par l'attribut SVG transform="rotate(-90 36 36)" dans Info.razor :
   un transform CSS avec transform-origin en px est mal interprété par Safari (arc décalé). */
.circle-fill[b-h25me2n6g1]{
    stroke-linecap:round;
    transition:stroke-dashoffset .5s ease;
}

.level-volume .circle-fill[b-h25me2n6g1]{ stroke:#4c9aff; }
.level-engagement .circle-fill[b-h25me2n6g1]{ stroke:#f5a524; }
.level-sentiment .circle-fill[b-h25me2n6g1]{ stroke:#4cc38a; }

.circle-percent[b-h25me2n6g1]{
    font-size:16px;
    font-weight:700;
    fill:#fff;
}

/* Libellé : visible seulement quand la souris (ou le clavier) est sur le cercle */
.circle-label[b-h25me2n6g1]{
    position:absolute;
    left:100%;
    top:50%;
    margin-left:8px;
    transform:translate(-8px, -50%);
    white-space:nowrap;
    padding:.22rem .5rem;
    border-radius:8px;
    background:rgba(0,0,0,.65);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    font-size:.6rem;
    font-weight:600;
    color:#fff;

    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
}

.integration-circle-item:hover .circle-label[b-h25me2n6g1],
.integration-circle-item:focus-visible .circle-label[b-h25me2n6g1]{
    opacity:1;
    transform:translate(0, -50%);
}

.integration-circle-item:focus-visible .integration-circle[b-h25me2n6g1]{
    filter:drop-shadow(0 0 4px #fff);
}

/* ==========================
   Description — bas de l'image, laisse la place à la barre d'emojis
========================== */

.news-description-overlay[b-h25me2n6g1]{
    position:relative;
    z-index:1;
    margin:auto 1rem 0 4.5rem;
    max-height:38%;
    overflow-y:auto;
    padding:1.2rem 0 3.75rem;
    color:#f3f4f6;
    font-size:.8rem;
    line-height:1.6;
    text-shadow:0 1px 3px rgba(0,0,0,.45);
    transition:margin-right .25s ease;
}

.news-description-overlay p[b-h25me2n6g1]{ margin:0; }

/* Panneau des commentaires ouvert : le texte lui laisse la place à droite */
.news-description-overlay.has-messages[b-h25me2n6g1]{
    margin-right:calc(min(260px, 44%) + 1.5rem);
}

/* Bande de défilement : invisible par défaut, visible seulement quand la souris survole le texte.
   Couleur transparente plutôt que « none » : la largeur reste réservée, le texte ne bouge pas. */
.news-description-overlay[b-h25me2n6g1]{
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
}

.news-description-overlay:hover[b-h25me2n6g1],
.news-description-overlay:focus-within[b-h25me2n6g1]{
    scrollbar-color:rgba(255,255,255,.55) transparent;
}

/* ==========================
   Bas de la carte : un clic affiche / masque la barre d'emojis
========================== */

.news-dock-zone[b-h25me2n6g1]{
    position:absolute;
    z-index:5;
    left:0;
    right:0;
    bottom:0;
    height:4rem;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    outline:none;
}

/* Petite poignée : indique qu'on peut toucher le bas de la carte */
.news-dock-handle[b-h25me2n6g1]{
    position:absolute;
    left:50%;
    bottom:.4rem;
    width:2.4rem;
    height:4px;
    border-radius:4px;
    background:rgba(255,255,255,.5);
    transform:translateX(-50%);
    transition:opacity .2s ease;
}

.news-dock-zone:hover .news-dock-handle[b-h25me2n6g1]{ background:rgba(255,255,255,.8); }
.news-dock-zone.is-dock-open .news-dock-handle[b-h25me2n6g1]{ opacity:0; }

.news-dock-zone:focus-visible .news-dock-handle[b-h25me2n6g1]{
    background:#fff;
    box-shadow:0 0 0 2px rgba(255,255,255,.6);
}

.news-dock[b-h25me2n6g1]{
    position:absolute;
    z-index:5;
    left:50%;
    bottom:.75rem;
    transform:translate(-50%, 12px);
    display:flex;
    align-items:center;
    gap:.1rem;
    padding:.2rem;
    border-radius:980px;
    background:rgba(20,20,22,.55);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    box-shadow:0 6px 20px rgba(0,0,0,.35);
    cursor:default;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.news-dock-zone.is-dock-open .news-dock[b-h25me2n6g1]{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0);
    pointer-events:auto;
    transition:opacity .25s ease, transform .25s ease, visibility 0s;
}

.dock-btn[b-h25me2n6g1]{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    height:30px;
    min-width:30px;
    padding:0 .5rem;
    justify-content:center;
    border:0;
    border-radius:980px;
    background:transparent;
    color:#fff;
    font-size:.9rem;
    line-height:1;
    cursor:pointer;
    transition:background-color .2s ease, transform .15s ease;
}

.dock-btn:hover[b-h25me2n6g1]{ background:rgba(255,255,255,.2); }
.dock-btn:active[b-h25me2n6g1]{ transform:scale(.94); }

.dock-btn:focus-visible[b-h25me2n6g1],
.comments-row button:focus-visible[b-h25me2n6g1],
.comments-close:focus-visible[b-h25me2n6g1]{
    outline:2px solid #fff;
    outline-offset:2px;
}

.dock-btn[aria-pressed="true"][b-h25me2n6g1]{
    background:rgba(255,255,255,.92);
    color:#b01e1e;
}

.dock-count[b-h25me2n6g1]{
    font-size:.62rem;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

.dock-sep[b-h25me2n6g1]{
    width:1px;
    height:16px;
    margin:0 .2rem;
    background:rgba(255,255,255,.3);
}

.dock-btn[aria-expanded="true"][b-h25me2n6g1]{ background:rgba(255,255,255,.25); }

/* ==========================
   Commentaires : panneau en haut à droite, sous la bande d'importance
   (ouvert et fermé par le bouton 💬)
========================== */

.news-comments[b-h25me2n6g1]{
    position:absolute;
    z-index:6;
    top:3rem;
    right:.75rem;
    width:min(260px, 44%);
    max-height:calc(100% - 3rem - 4.75rem);
    display:flex;
    flex-direction:column;
    gap:.45rem;
    padding:.5rem;
    border-radius:16px;
    background:rgba(20,20,22,.62);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    box-shadow:0 8px 24px rgba(0,0,0,.35);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.news-comments.is-open[b-h25me2n6g1]{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:opacity .25s ease, transform .25s ease, visibility 0s;
}

.comments-head[b-h25me2n6g1]{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 .15rem;
    font-size:.66rem;
    color:#fff;
}

.comments-close[b-h25me2n6g1]{
    width:22px;
    height:22px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    color:#fff;
    font-size:.95rem;
    line-height:1;
    cursor:pointer;
    transition:background-color .2s ease;
}

.comments-close:hover[b-h25me2n6g1]{ background:rgba(255,255,255,.35); }

.news-messages[b-h25me2n6g1]{
    flex:1 1 auto;
    min-height:0;
    margin:0;
    padding:0 .25rem 0 0;
    list-style:none;
    overflow-y:auto;
    display:flex;
    flex-direction:column-reverse;   /* le plus récent en bas, près de la saisie ; défilement ancré en bas */
    gap:.4rem;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.55) transparent;
}

.msg[b-h25me2n6g1]{
    display:flex;
    align-items:flex-start;
    gap:.35rem;
}

.msg--mine[b-h25me2n6g1]{ flex-direction:row-reverse; }

.msg-avatar[b-h25me2n6g1]{
    flex:0 0 22px;
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fdecec;
    color:#b01e1e;
    font-size:.58rem;
    font-weight:700;
}

.msg-avatar--anon[b-h25me2n6g1]{
    background:#ececf0;
    color:#6e6e73;
}

.msg-body[b-h25me2n6g1]{
    min-width:0;
    max-width:82%;
}

.msg-meta[b-h25me2n6g1]{
    display:flex;
    align-items:baseline;
    gap:.4rem;
    margin-bottom:.1rem;
    font-size:.54rem;
    color:rgba(255,255,255,.8);
    text-shadow:0 1px 3px rgba(0,0,0,.6);
}

.msg--mine .msg-meta[b-h25me2n6g1]{ justify-content:flex-end; }

.msg-meta strong[b-h25me2n6g1]{
    font-weight:600;
    color:#fff;
}

.msg-body p[b-h25me2n6g1]{
    margin:0;
    padding:.28rem .55rem;
    background:rgba(255,255,255,.93);
    color:#1d1d1f;
    border-radius:4px 12px 12px 12px;
    font-size:.64rem;
    line-height:1.35;
    word-break:break-word;
}

.msg--mine .msg-body p[b-h25me2n6g1]{
    background:#fdecec;
    border-radius:12px 4px 12px 12px;
}

/* ==========================
   Saisie : en bas du panneau des commentaires
========================== */

.news-compose[b-h25me2n6g1]{
    flex:0 0 auto;
}

.comments-hint[b-h25me2n6g1],
.comments-error[b-h25me2n6g1]{
    margin-bottom:.3rem;
    font-size:.56rem;
}

.comments-hint[b-h25me2n6g1]{ color:rgba(255,255,255,.8); }

.comments-error[b-h25me2n6g1]{
    padding:.22rem .4rem;
    border-radius:8px;
    background:#fdecec;
    color:#c92a2a;
}

.comments-row[b-h25me2n6g1]{
    display:flex;
    gap:.3rem;
}

.comments-row input[b-h25me2n6g1]{
    flex:1;
    min-width:0;
    height:28px;
    padding:0 .65rem;
    border:1px solid rgba(255,255,255,.5);
    border-radius:980px;
    background:rgba(255,255,255,.9);
    font:inherit;
    font-size:.64rem;
    color:#1d1d1f;
    outline:none;
}

.comments-row input[b-h25me2n6g1]::placeholder{ color:#6b7280; }

.comments-row input:focus[b-h25me2n6g1]{
    border-color:#b01e1e;
    background:#fff;
}

.comments-row button[b-h25me2n6g1]{
    flex:0 0 28px;
    width:28px;
    height:28px;
    border:0;
    border-radius:50%;
    background:#b01e1e;
    color:#fff;
    font-size:.68rem;
    cursor:pointer;
    transition:background-color .2s ease;
}

.comments-row button:hover:not(:disabled)[b-h25me2n6g1]{ background:#8f1717; }

.comments-row button:disabled[b-h25me2n6g1]{
    background:rgba(255,255,255,.4);
    color:rgba(0,0,0,.35);
    cursor:not-allowed;
}

.empty-feed[b-h25me2n6g1]{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
    font-size:1rem;
    color:hsl(0, 53%, 88%);
}

/* ==========================
   Skeleton (chargement)
========================== */

.skeleton[b-h25me2n6g1]{
    position:relative;
    display:block;
    background:rgba(255,255,255,.18);
    border-radius:6px;
    overflow:hidden;
}

.skeleton[b-h25me2n6g1]::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,0) 100%
    );
    animation:skeleton-shimmer-b-h25me2n6g1 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-h25me2n6g1{
    100%{ transform:translateX(100%); }
}

.news-background-img.skeleton[b-h25me2n6g1]{
    background:linear-gradient(135deg, #d1d5db 0%, #e5e7eb 100%);
    border-radius:0;
}

.skeleton-line[b-h25me2n6g1]{
    height:10px;
    border-radius:4px;
}

.skeleton-line--rating[b-h25me2n6g1]{
    width:90px;
    height:12px;
}

.skeleton-line--title[b-h25me2n6g1]{
    width:60%;
    height:16px;
    margin-top:.4rem;
}

.skeleton-line--meta[b-h25me2n6g1]{
    width:70px;
    height:8px;
}

.skeleton-line--desc[b-h25me2n6g1]{
    display:block;
    width:90%;
    margin-bottom:.4rem;
}

.skeleton-line--desc-short[b-h25me2n6g1]{
    display:block;
    width:55%;
}

.integration-circle.skeleton.skeleton-circle-big[b-h25me2n6g1]{
    width:42px;
    height:42px;
    border-radius:50%;
}

/* ==========================
   Petits écrans
========================== */

@media (max-width: 820px){
    /* iOS zoome la page quand le champ de saisie a une police inférieure à 16px */
    .comments-row input[b-h25me2n6g1]{ height:34px; font-size:16px; }
    .comments-row button[b-h25me2n6g1]{ flex-basis:34px; width:34px; height:34px; font-size:.8rem; }
    .comments-close[b-h25me2n6g1]{ width:28px; height:28px; }
    .dock-btn[b-h25me2n6g1]{ height:36px; min-width:36px; font-size:1.05rem; }
}

@media (max-width: 600px){
    .news-header-overlay h1[b-h25me2n6g1]{ font-size:1rem; }
    .news-description-overlay[b-h25me2n6g1]{ margin-left:3.75rem; font-size:.76rem; }

    /* Le panneau des commentaires prend presque toute la largeur de la carte, sous la bande d'importance */
    .news-comments[b-h25me2n6g1]{
        left:.75rem;
        width:auto;
        top:2.8rem;
        max-height:calc(100% - 2.8rem - 4.75rem);
    }

    /* Texte pleine largeur : le panneau passe par-dessus plutôt que de le comprimer */
    .news-description-overlay.has-messages[b-h25me2n6g1]{ margin-right:1rem; }

    .dock-btn[b-h25me2n6g1]{ padding:0 .4rem; }
}

/* ==========================
   Commentaires : très transparent au repos, net au survol
========================== */

/* Au repos : panneau presque invisible, bulles masquées */
.news-comments.is-open[b-h25me2n6g1]{
    opacity:.28;
    transition:opacity .3s ease, transform .25s ease, visibility 0s;
}

.news-comments.is-open .news-messages[b-h25me2n6g1]{
    opacity:0;
    transition:opacity .3s ease;
}

/* Souris sur le panneau (ou saisie en cours) : panneau net, bulles visibles */
.news-comments.is-open:hover[b-h25me2n6g1],
.news-comments.is-open:focus-within[b-h25me2n6g1]{
    opacity:1;
}

.news-comments.is-open:hover .news-messages[b-h25me2n6g1],
.news-comments.is-open:focus-within .news-messages[b-h25me2n6g1]{
    opacity:1;
}

/* Écrans tactiles : pas de survol, donc le panneau reste net et lisible */
@media (hover: none){
    .news-comments.is-open[b-h25me2n6g1],
    .news-comments.is-open .news-messages[b-h25me2n6g1]{
        opacity:1;
    }
}
/* /Components/Pages/Agents/Rapport/InfoRapportAgent.razor.rz.scp.css */
.rapportAgent-details[b-4h1ps6snfq] {
display: flex;
flex-direction: column;
gap: .6rem;
}

.rapportAgent-details-name[b-4h1ps6snfq] {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #111827;
}

.rapportAgent-details-description[b-4h1ps6snfq] {
margin: 0;
font-size: .9rem;
line-height: 1.6;
color: #374151;
}

.rapportAgent-details-count[b-4h1ps6snfq] {
width: max-content;
padding: .15rem .6rem;
border-radius: 999px;
background: #fdecec;
color: #c92a2a;
font-size: .75rem;
font-weight: 700;
}

.empty-rapportAgent[b-4h1ps6snfq] {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: .85rem;
}
/* /Components/Pages/Agents/Rapport/RapportAgent.razor.rz.scp.css */
.rapportAgent-page[b-oaz3wgvo4k]{
min-height:100vh;
background:url("/images/background.jpg") center/cover fixed no-repeat;
}

.rapportAgent-sticky[b-oaz3wgvo4k]{
position:fixed;
top:115px;
left:250px;
right:70px;
height:135px;
padding:.5rem;
background:#fff;
border-bottom:1px solid #eee;
border-radius:16px;
z-index:1000;
overflow:hidden;
}

.rapportAgent-content[b-oaz3wgvo4k]{
position:fixed;
top:240px;
bottom:190px; /* remonté pour laisser la place à la barre du bas (150px + marges) */
left:240px;
right:70px;
padding:2rem;
background:rgba(255,255,255,.9);
border-radius:16px;
overflow-y:auto;
}

.rapportAgent-bottom[b-oaz3wgvo4k]{
position: fixed;
bottom: 43px;
left: 250px;
right: 70px;
z-index: 900;
background: #fff;
padding: .3rem;
border-top: 1px solid #eee;
border-radius: 12px 12px 0 0;
/* box-shadow: 0 -4px 12px rgba(0,0,0,.08); */
animation: slideDown .3s ease;
overflow: hidden;
}

.empty-rapportAgent[b-oaz3wgvo4k]{
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:#6b7280;
font-size:.85rem;
}

@media(max-width:900px){
.rapportAgent-sticky[b-oaz3wgvo4k]{
left:0;
right:0;
top:70px;
height:80px;
border-radius:0;
    }
.rapportAgent-content[b-oaz3wgvo4k]{
left:0;
right:0;
top:160px;
bottom:150px;
border-radius:0;
    }
.rapportAgent-bottom[b-oaz3wgvo4k]{
left:0;
right:0;
bottom:0;
height:130px;
border-radius:16px 16px 0 0;
    }
}
/* /Components/Pages/Agents/Reglementes/InfoReglementes.razor.rz.scp.css */
/* ===================================
   Layout principal (78% / 20%)
=================================== */

.reglementes-details[b-vtwnujdsyt] {
    display: flex;
    align-items: stretch;
    gap: .8rem;

    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Le contenu principal défile seul ; les onglets (sticky) restent en haut */
.reglementes-details-main[b-vtwnujdsyt] {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;
    min-height: 0;

    overflow-y: auto;
    scrollbar-width: thin;
}

.empty-reglementes[b-vtwnujdsyt] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-size: .85rem;
}

/* ===================================
   Colonne latérale (20%) : 3 cartes
=================================== */

.reglementes-details-side[b-vtwnujdsyt] {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Style commun aux 3 cartes */
.reglementes-side-top[b-vtwnujdsyt],
.reglementes-side-middle[b-vtwnujdsyt],
.reglementes-side-bottom[b-vtwnujdsyt] {
    box-sizing: border-box;
    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

/* Cartes du haut : hauteur selon le contenu, rétrécissent (avec défilement)
   si la colonne manque de place */
.reglementes-side-top[b-vtwnujdsyt],
.reglementes-side-middle[b-vtwnujdsyt] {
    flex: 0 1 auto;
    min-height: 60px;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reglementes-side-top[b-vtwnujdsyt]::-webkit-scrollbar,
.reglementes-side-middle[b-vtwnujdsyt]::-webkit-scrollbar {
    display: none;
}

/* Statistiques : jamais écrasée, toujours collée au fond de la colonne */
.reglementes-side-bottom[b-vtwnujdsyt] {
    flex: 0 0 auto;
    min-height: 60px;
    margin-top: auto;

    overflow: hidden;
}

.reglementes-empty[b-vtwnujdsyt] {
    color: #9ca3af;
    font-size: .75rem;
    font-style: italic;
}

/* ===================================
   Carte 1 : consultant (avatar à droite)
=================================== */

.reglementes-consultant[b-vtwnujdsyt] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.reglementes-consultant-avatar[b-vtwnujdsyt] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.reglementes-consultant-avatar img[b-vtwnujdsyt] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.reglementes-consultant-info[b-vtwnujdsyt] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    margin-top: 1rem;
}

.reglementes-consultant-name[b-vtwnujdsyt] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reglementes-consultant-type[b-vtwnujdsyt],
.reglementes-consultant-pays[b-vtwnujdsyt] {
    font-size: .7rem;
    color: #6b7280;
}

/* ===================================
   Carte 2 : service (nom / délai / coût)
=================================== */

.reglementes-side-header[b-vtwnujdsyt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.reglementes-side-name[b-vtwnujdsyt] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    overflow-wrap: anywhere;
}

.reglementes-side-meta[b-vtwnujdsyt] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin-top: .3rem;
}

.reglementes-side-delai[b-vtwnujdsyt] {
    font-size: .9rem;
    color: #a40b0b;
}

.reglementes-side-pill[b-vtwnujdsyt] {
    padding: .25rem .7rem;

    font-size: .8rem;
    font-weight: 600;
    color: #c92a2a;

    background: transparent;
    border: 2px solid #c92a2a;
    border-radius: 999px;

    white-space: nowrap;
}

/* ===================================
   Champs des cartes
=================================== */

.reglementes-side-details[b-vtwnujdsyt] {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    margin-top: .3rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

.reglementes-side-field[b-vtwnujdsyt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

/* Icône à la place du libellé (le texte reste en info-bulle / aria-label) */
.reglementes-field-icon[b-vtwnujdsyt] {
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;

    font-size: .8rem;
    line-height: 1;
    color: #9ca3af;

    cursor: help;
    transition: color .15s ease;
}

.reglementes-side-field:hover .reglementes-field-icon[b-vtwnujdsyt] {
    color: #c92a2a;
}

.reglementes-field-label[b-vtwnujdsyt] {
    flex-shrink: 0;

    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.reglementes-field-value[b-vtwnujdsyt] {
    font-size: .68rem;
    color: #374151;
    text-align: right;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Adresse, moyen de paiement : passent à la ligne */
.reglementes-field-value--scroll[b-vtwnujdsyt] {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
}

/* ===================================
   Carte 3 : statistiques (courbe)
=================================== */

.reglementes-stats-chart-wrapper[b-vtwnujdsyt] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .3rem;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reglementes-stats-chart-wrapper[b-vtwnujdsyt]::-webkit-scrollbar {
    display: none;
}

.reglementes-stats-svg[b-vtwnujdsyt] {
    display: block;
    flex-shrink: 0;
}

.reglementes-stats-area[b-vtwnujdsyt] {
    fill: rgba(201, 42, 42, .15);
    stroke: none;
}

.reglementes-stats-line[b-vtwnujdsyt] {
    fill: none;
    stroke: #c92a2a;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.reglementes-stats-dot[b-vtwnujdsyt] {
    fill: #c92a2a;
    stroke: #fff;
    stroke-width: 1;
}

.reglementes-stats-labels[b-vtwnujdsyt] {
    display: flex;
    flex-shrink: 0;
}

.reglementes-stat-value[b-vtwnujdsyt] {
    flex-shrink: 0;
    text-align: center;

    font-size: .6rem;
    font-weight: 600;
    color: #c92a2a;
}

/* ===================================
   Onglets (pilules) + libellé à droite
=================================== */

.reglementes-tabs[b-vtwnujdsyt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;

    margin-top: .1rem;

    position: sticky;
    top: 0;
    z-index: 10;

    background: #fff;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.reglementes-tabs > span[b-vtwnujdsyt] {
    flex-shrink: 0;

    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;

    white-space: nowrap;
}

.reglementes-tabs-items[b-vtwnujdsyt] {
    display: flex;
    gap: .6rem;

    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reglementes-tabs-items[b-vtwnujdsyt]::-webkit-scrollbar {
    display: none;
}

.reglementes-tab[b-vtwnujdsyt] {
    flex-shrink: 0;
    white-space: nowrap;

    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;
    color: #b9bdc4;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;

    cursor: pointer;
    transition: .2s;
}

.reglementes-tab:hover[b-vtwnujdsyt] {
    background: #fdecec;
    color: #c92a2a;
}

.reglementes-tab.active[b-vtwnujdsyt] {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
}

/* ===================================
   Cadre gris du contenu
=================================== */

.reglementes-tab-content[b-vtwnujdsyt] {
    padding: .8rem;
    box-sizing: border-box;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.reglementes-tab-title[b-vtwnujdsyt] {
    margin: 0;

    font-size: .95rem;
    font-weight: 700;
    color: #111827;
}

.reglementes-tab-description[b-vtwnujdsyt] {
    margin: 0;
    padding-right: .3rem;

    font-size: .9rem;
    line-height: 1.6;
    color: #374151;

    max-height: 63vh;
    overflow-y: auto;
}

.reglementes-tab-description ul[b-vtwnujdsyt],
.reglementes-tab-description ol[b-vtwnujdsyt] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

.reglementes-placeholder[b-vtwnujdsyt] {
    margin: .3rem 0;

    color: #9ca3af;
    font-size: .8rem;
    line-height: 1.5;
}

/* Crayon du contenu principal */
.reglementes-btn-edit[b-vtwnujdsyt] {
    align-self: flex-end;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.reglementes-btn-edit:hover[b-vtwnujdsyt] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Zone d'édition inline
=================================== */

.reglementes-edit-input[b-vtwnujdsyt] {
    width: 100%;
    padding: .35rem .55rem;

    font-size: .85rem;
    font-weight: 600;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 6px;

    box-sizing: border-box;
}

.reglementes-edit-input:focus[b-vtwnujdsyt] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.reglementes-edit-zone[b-vtwnujdsyt] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.reglementes-edit-actions[b-vtwnujdsyt] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .3rem;
}

.reglementes-btn-cancel[b-vtwnujdsyt],
.reglementes-btn-ok[b-vtwnujdsyt] {
    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: .2s;
}

.reglementes-btn-cancel[b-vtwnujdsyt] {
    background: #f3f4f6;
    color: #6b7280;
}

.reglementes-btn-cancel:hover[b-vtwnujdsyt] {
    background: #e5e7eb;
}

.reglementes-btn-ok[b-vtwnujdsyt] {
    background: #c92a2a;
    color: #fff;
}

.reglementes-btn-ok:hover[b-vtwnujdsyt] {
    background: #a81f1f;
}

/* ===================================
   Barre d'outils de l'éditeur riche
=================================== */

.reglementes-editor-toolbar[b-vtwnujdsyt] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: .4rem;
    margin-bottom: .4rem;

    background: transparent;
    border: none;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reglementes-editor-toolbar[b-vtwnujdsyt]::-webkit-scrollbar {
    display: none;
}

.reglementes-editor-toolbar button[b-vtwnujdsyt],
.reglementes-tool[b-vtwnujdsyt] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 28px;
    height: 28px;
    padding: 0 .3rem;

    background: transparent;
    border: none;
    border-radius: 4px;

    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;

    cursor: pointer;
    transition: .2s;
}

.reglementes-editor-toolbar button:hover[b-vtwnujdsyt],
.reglementes-tool:hover[b-vtwnujdsyt] {
    background: #fdecec;
    color: #c92a2a;
}

.reglementes-tool-wide[b-vtwnujdsyt] {
    min-width: auto;
    padding: 0 .5rem;
    white-space: nowrap;
}

.reglementes-tool-select[b-vtwnujdsyt] {
    flex-shrink: 0;

    height: 28px;
    padding: 0 .3rem;

    font-size: .72rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;

    cursor: pointer;
}

.reglementes-tool-select:hover[b-vtwnujdsyt] {
    border-color: #c92a2a;
}

.reglementes-toolbar-separator[b-vtwnujdsyt] {
    flex-shrink: 0;

    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 .3rem;
}

.reglementes-color-picker[b-vtwnujdsyt] {
    flex-shrink: 0;

    width: 28px;
    height: 28px;
    padding: 2px;

    background: transparent;
    border: none;

    cursor: pointer;
}

/* La hauteur inline calculée par le composant est respectée */
.reglementes-edit-richtext[b-vtwnujdsyt] {
    width: 100%;
    padding: .5rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;
    line-height: 1.5;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    overflow-y: auto;

    min-height: 10vh;
    max-height: 40vh;

    box-sizing: border-box;
}

.reglementes-edit-richtext:focus[b-vtwnujdsyt] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.reglementes-edit-richtext ul[b-vtwnujdsyt],
.reglementes-edit-richtext ol[b-vtwnujdsyt] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - zone principale sur toute la largeur
   - volet latéral = tiroir fixe qui glisse (transform), comme
     le volet gauche de la page : même durée, même courbe
   - collé sous la bande des agents, coins arrondis seulement
     en bas ; même haut / même bas que le volet gauche, via les
     variables --content-top, --content-bottom, --drawer-inset
     (définies sur .reglementes-content dans Reglementes.razor.css)
   - Statistiques : carte complète fixée en bas du volet (sticky)
   - ouverture pilotée par la classe .open (paramètre SideOpen)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .reglementes-details[b-vtwnujdsyt] {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: stretch;
        height: 100%;
        overflow: hidden;
        gap: 0;
    }

    .reglementes-details-main[b-vtwnujdsyt] {
        flex: 1 1 100%;
        max-width: none;
        width: auto;
        max-height: 100%;
        min-height: 0;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        padding: .35rem;
        box-sizing: border-box;
    }

    /* ---------- Volet des informations (bande droite) ----------
       Toujours rendu, glisse hors écran quand il est fermé. */
    .reglementes-details-side[b-vtwnujdsyt] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 30px) + var(--drawer-inset, 3px));
        right: 0;                                   /* collé au bord droit */
        left: auto;

        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        height: auto;
        margin: 0;
        padding: .6rem;
        box-sizing: border-box;

        z-index: 1500;
        background: #fff;
        border-radius: 0 0 0 14px;
        overflow-y: auto;

        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .reglementes-details-side.open[b-vtwnujdsyt] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Rien n'est coupé : les cartes gardent leur hauteur complète */
    .reglementes-side-top[b-vtwnujdsyt],
    .reglementes-side-middle[b-vtwnujdsyt],
    .reglementes-side-bottom[b-vtwnujdsyt] {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 0;
        padding: .45rem;
        gap: .25rem;
        border-radius: 10px;
    }

    /* Statistiques : carte complète, fixée en bas du volet avec une marge */
    .reglementes-side-bottom[b-vtwnujdsyt] {
        position: sticky;
        bottom: .6rem;               /* même marge que le padding du volet */
        z-index: 5;

        margin-top: auto;            /* poussé en bas si le contenu est court */

        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;

        /* 1) ombre légère au-dessus ; 2) bande blanche sous la carte
           pour masquer le contenu qui défile dans la marge du bas */
        box-shadow:
            0 -6px 8px -6px rgba(0, 0, 0, .15),
            0 .6rem 0 0 #fff;
    }

    .reglementes-field-value[b-vtwnujdsyt],
    .reglementes-consultant-name[b-vtwnujdsyt],
    .reglementes-consultant-type[b-vtwnujdsyt],
    .reglementes-consultant-pays[b-vtwnujdsyt] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    /* ---------- Onglets ---------- */
    .reglementes-tabs[b-vtwnujdsyt] {
        position: static;
        padding: .2rem 0 .3rem;
        margin-top: 0;
        gap: .3rem;
    }

    .reglementes-tabs-items[b-vtwnujdsyt] { gap: .15rem; }

    .reglementes-tab[b-vtwnujdsyt] {
        padding: .12rem .45rem;
        font-size: .6rem;
        border-radius: 14px;
    }

    .reglementes-tabs > span[b-vtwnujdsyt] { font-size: .7rem; }

    /* ---------- Contenu : hauteur flexible ---------- */
    .reglementes-tab-content[b-vtwnujdsyt] {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: .6rem;
        gap: .4rem;
        border-radius: 10px;
    }

    .reglementes-tab-title[b-vtwnujdsyt] { font-size: .8rem; }

    .reglementes-tab-description[b-vtwnujdsyt] {
        max-height: none;
        overflow: visible;
        font-size: .82rem;
        line-height: 1.5;
        padding-right: .1rem;
    }

    .reglementes-tab-description[b-vtwnujdsyt]  h1 { font-size: 1.05rem; margin: .35rem 0; }
    .reglementes-tab-description[b-vtwnujdsyt]  h2 { font-size: .95rem; margin: .3rem 0; }
    .reglementes-tab-description[b-vtwnujdsyt]  h3 { font-size: .88rem; margin: .25rem 0; }
    .reglementes-tab-description[b-vtwnujdsyt]  p,
    .reglementes-tab-description[b-vtwnujdsyt]  li { font-size: .82rem; line-height: 1.5; margin: .2rem 0; }
    .reglementes-tab-description[b-vtwnujdsyt]  img { max-width: 100%; height: auto; }
    .reglementes-tab-description[b-vtwnujdsyt]  table { font-size: .75rem; }

    .reglementes-placeholder[b-vtwnujdsyt] { font-size: .75rem; margin: .2rem 0; }
    .reglementes-empty[b-vtwnujdsyt] { font-size: .65rem; }

    .reglementes-btn-edit[b-vtwnujdsyt] { width: 24px; height: 24px; font-size: .6rem; }

    /* ---------- Cartes du volet ---------- */
    .reglementes-consultant[b-vtwnujdsyt] { gap: .4rem; }
    .reglementes-consultant-avatar[b-vtwnujdsyt] { width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; font-size: .65rem; }
    .reglementes-consultant-info[b-vtwnujdsyt] { margin-top: .1rem; }
    .reglementes-consultant-name[b-vtwnujdsyt] { font-size: .72rem; }
    .reglementes-consultant-type[b-vtwnujdsyt],
    .reglementes-consultant-pays[b-vtwnujdsyt] { font-size: .58rem; }

    .reglementes-side-name[b-vtwnujdsyt] { font-size: .72rem; }
    .reglementes-side-meta[b-vtwnujdsyt] { margin-top: .2rem; }
    .reglementes-side-delai[b-vtwnujdsyt] { font-size: .65rem; }
    .reglementes-side-pill[b-vtwnujdsyt] { font-size: .6rem; padding: .1rem .45rem; border-width: 1.5px; }

    .reglementes-side-details[b-vtwnujdsyt] { gap: .25rem; margin-top: .2rem; padding-top: .3rem; }
    .reglementes-side-field[b-vtwnujdsyt] { gap: .3rem; }
    .reglementes-field-icon[b-vtwnujdsyt] { width: .8rem; font-size: .6rem; }
    .reglementes-field-label[b-vtwnujdsyt] { font-size: .46rem; }
    .reglementes-field-value[b-vtwnujdsyt] { font-size: .6rem; }

    .reglementes-stats-svg[b-vtwnujdsyt] { height: 40px !important; }   /* !important : le composant peut fixer la hauteur en ligne */
    .reglementes-stat-value[b-vtwnujdsyt] { font-size: .5rem; }

    /* ---------- Édition ---------- */
    .reglementes-edit-input[b-vtwnujdsyt] { font-size: .7rem; padding: .25rem .4rem; }
    .reglementes-edit-zone[b-vtwnujdsyt] { gap: .35rem; }
    .reglementes-btn-cancel[b-vtwnujdsyt],
    .reglementes-btn-ok[b-vtwnujdsyt] { padding: .3rem .8rem; font-size: .7rem; }

    .reglementes-editor-toolbar[b-vtwnujdsyt] { padding: .2rem; gap: .2rem; margin-bottom: .3rem; }
    .reglementes-editor-toolbar button[b-vtwnujdsyt],
    .reglementes-tool[b-vtwnujdsyt] { min-width: 24px; height: 24px; padding: 0 .2rem; font-size: .7rem; }
    .reglementes-editor-toolbar svg[b-vtwnujdsyt] { width: 12px; height: 12px; }
    .reglementes-tool-select[b-vtwnujdsyt] { height: 24px; font-size: .65rem; padding: 0 .2rem; }
    .reglementes-color-picker[b-vtwnujdsyt] { width: 24px; height: 24px; }
    .reglementes-toolbar-separator[b-vtwnujdsyt] { height: 14px; margin: 0 .15rem; }
    .reglementes-edit-richtext[b-vtwnujdsyt] { font-size: .82rem; padding: .4rem; min-height: 8vh; max-height: 30vh; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    /* top / bottom viennent des variables de .reglementes-content (148px / 26px) */
    .reglementes-details-side[b-vtwnujdsyt] {
        width: var(--drawer-w, 55vw);
        max-width: var(--drawer-w, 55vw);
    }

    .reglementes-tab[b-vtwnujdsyt] { font-size: .62rem; padding: .2rem .5rem; }
    .reglementes-tab-content[b-vtwnujdsyt] { padding: .4rem; }

    .reglementes-tab-description[b-vtwnujdsyt],
    .reglementes-tab-description[b-vtwnujdsyt]  p,
    .reglementes-tab-description[b-vtwnujdsyt]  li { font-size: .72rem; }

    .reglementes-consultant-avatar[b-vtwnujdsyt] { width: 28px; height: 28px; min-width: 28px; flex: 0 0 28px; }
    .reglementes-consultant-name[b-vtwnujdsyt],
    .reglementes-side-name[b-vtwnujdsyt] { font-size: .62rem; }
    .reglementes-field-value[b-vtwnujdsyt] { font-size: .55rem; }
    .reglementes-field-label[b-vtwnujdsyt] { font-size: .42rem; }
}
/* /Components/Pages/Agents/Reglementes/Reglementes.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.reglementes-page[b-kgm3tkdu6i] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES AGENTS (bureau)
========================================== */

.reglementes-sticky[b-kgm3tkdu6i] {
    position: fixed;
    top: 85px;
    left: 250px;
    right: 70px;
    height: 115px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 12px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.reglementes-content[b-kgm3tkdu6i] {
    position: fixed;

    top: 190px;
    bottom: 15px;
    left: 240px;
    right: 40px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

/* Colonne gauche : liste des services */
.reglementes-left[b-kgm3tkdu6i] {
    flex: 0 0 22%;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;

    padding: .5rem;
}

/* Colonne droite : détails du service sélectionné */
.reglementes-right[b-kgm3tkdu6i] {
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
    min-height: 0;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
}

.empty-reglementes[b-kgm3tkdu6i] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languettes et fond cliquable : cachés sur ordinateur */
.reglementes-content .drawer-tab[b-kgm3tkdu6i],
.reglementes-content .drawer-backdrop[b-kgm3tkdu6i] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - volets et languettes glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors des volets les referme (fond cliquable)
   - volets collés sous la bande des agents, coins arrondis
     seulement en bas
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
   La miniature de la liste est gérée dans OutilsReglementesCards.
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des agents : pleine largeur, sans coins arrondis */
    html body .reglementes-sticky[b-kgm3tkdu6i] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .reglementes-content[b-kgm3tkdu6i] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit (utilisé par InfoReglementes) */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .reglementes-content .reglementes-right[b-kgm3tkdu6i] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* Clic en dehors des volets : les referme (sous les volets et les languettes) */
    html body .reglementes-content .drawer-backdrop[b-kgm3tkdu6i] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .reglementes-content .reglementes-left[b-kgm3tkdu6i] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        min-width: 0 !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .reglementes-content.left-open .reglementes-left[b-kgm3tkdu6i] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .reglementes-content .drawer-tab[b-kgm3tkdu6i] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .reglementes-content .drawer-tab:hover[b-kgm3tkdu6i] {
        background: rgba(225, 110, 110, .98);
    }

    .reglementes-content .drawer-tab-left[b-kgm3tkdu6i] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .reglementes-content.left-open .drawer-tab-left[b-kgm3tkdu6i] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .reglementes-content .drawer-tab-right[b-kgm3tkdu6i] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .reglementes-content.right-open .drawer-tab-right[b-kgm3tkdu6i] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .reglementes-sticky[b-kgm3tkdu6i] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .reglementes-content[b-kgm3tkdu6i] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --drawer-w: 55vw;
        --left-w: 55vw;
    }

    .reglementes-content .drawer-tab[b-kgm3tkdu6i] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Agents/Services/AgentServices.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.agentService-page[b-ww4hy7me25] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES AGENTS (bureau)
========================================== */

.agentService-sticky[b-ww4hy7me25] {
    position: fixed;
    top: 85px;
    left: 250px;
    right: 70px;
    height: 115px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 12px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.agentService-content[b-ww4hy7me25] {
    position: fixed;

    top: 180px;
    bottom: 15px;
    left: 240px;
    right: 40px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

/* Colonne gauche : liste des services */
.agentService-left[b-ww4hy7me25] {
    flex: 0 0 20%;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;

    padding: .5rem;
}

/* Colonne droite : détails du service sélectionné */
.agentService-right[b-ww4hy7me25] {
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
    min-height: 0;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
}

.empty-agentService[b-ww4hy7me25] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languettes et fond cliquable : cachés sur ordinateur */
.agentService-content .drawer-tab[b-ww4hy7me25],
.agentService-content .drawer-backdrop[b-ww4hy7me25] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - volets et languettes glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors des volets les referme (fond cliquable)
   - volets collés sous la bande des agents, coins arrondis
     seulement en bas
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
   La miniature de la liste est gérée dans OutilsAgentServiceCards.
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des agents : pleine largeur, sans coins arrondis */
    html body .agentService-sticky[b-ww4hy7me25] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .agentService-content[b-ww4hy7me25] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit (utilisé par InfoAgentService) */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .agentService-content .agentService-right[b-ww4hy7me25] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* Clic en dehors des volets : les referme (sous les volets et les languettes) */
    html body .agentService-content .drawer-backdrop[b-ww4hy7me25] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .agentService-content .agentService-left[b-ww4hy7me25] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        min-width: 0 !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .agentService-content.left-open .agentService-left[b-ww4hy7me25] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .agentService-content .drawer-tab[b-ww4hy7me25] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .agentService-content .drawer-tab:hover[b-ww4hy7me25] {
        background: rgba(225, 110, 110, .98);
    }

    .agentService-content .drawer-tab-left[b-ww4hy7me25] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .agentService-content.left-open .drawer-tab-left[b-ww4hy7me25] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .agentService-content .drawer-tab-right[b-ww4hy7me25] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .agentService-content.right-open .drawer-tab-right[b-ww4hy7me25] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .agentService-sticky[b-ww4hy7me25] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .agentService-content[b-ww4hy7me25] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --drawer-w: 55vw;
        --left-w: 55vw;
    }

    .agentService-content .drawer-tab[b-ww4hy7me25] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Agents/Services/ContratSignature.razor.rz.scp.css */
/* =========================
   CSS isolé de ContratSignature.razor
   (Blazor charge automatiquement ce fichier, aucun lien manuel requis)
========================= */

.agentService-modal-overlay[b-9pkg2ce6nw] {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;
    background: rgba(17, 24, 39, .55);
}

.agentService-modal-card[b-9pkg2ce6nw] {
    width: 100%;
    max-width: 580px;
    max-height: 85vh;

    display: flex;
    flex-direction: column;
    overflow: hidden;

    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.agentService-modal-header[b-9pkg2ce6nw] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;

    padding: .9rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.agentService-modal-header-info[b-9pkg2ce6nw] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.agentService-modal-title[b-9pkg2ce6nw] {
    font-size: 1rem;
    font-weight: 700;
    color: #c92a2a;
}

.agentService-modal-subtitle[b-9pkg2ce6nw] {
    font-size: .75rem;
    color: #374151;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentService-modal-meta[b-9pkg2ce6nw] {
    font-size: .68rem;
    color: #9ca3af;
}

.agentService-modal-body[b-9pkg2ce6nw] {
    padding: .8rem 1rem;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.agentService-modal-intro[b-9pkg2ce6nw] {
    margin: 0;
    font-size: .75rem;
    color: #6b7280;
    text-align: justify;
}

.agentService-modal-article[b-9pkg2ce6nw] {
    padding: .5rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.agentService-modal-article-title[b-9pkg2ce6nw] {
    font-size: .72rem;
    font-weight: 700;
    color: #c92a2a;
}

.agentService-modal-article-content[b-9pkg2ce6nw] {
    margin: .2rem 0 0;
    font-size: .72rem;
    color: #374151;
    text-align: justify;
}

.agentService-modal-checkbox[b-9pkg2ce6nw] {
    display: flex;
    align-items: flex-start;
    gap: .4rem;

    margin-top: .3rem;
    font-size: .72rem;
    color: #374151;

    cursor: pointer;
}

.agentService-modal-signature-bloc[b-9pkg2ce6nw] {
    display: flex;
    justify-content: space-between;

    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;

    font-size: .72rem;
    font-weight: 700;
    color: #111827;
}

.agentService-modal-footer[b-9pkg2ce6nw] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;

    padding: .7rem 1rem;
    border-top: 1px solid #e5e7eb;
}

.agentService-modal-btn-refuser[b-9pkg2ce6nw],
.agentService-modal-btn-accepter[b-9pkg2ce6nw] {
    display: flex;
    align-items: center;
    gap: .3rem;

    padding: .4rem .9rem;

    font-size: .72rem;
    font-weight: 600;

    border: none;
    border-radius: 999px;

    cursor: pointer;
    transition: .2s;
}

.agentService-modal-btn-refuser[b-9pkg2ce6nw] {
    background: #f3f4f6;
    color: #6b7280;
}

.agentService-modal-btn-refuser:hover:not(:disabled)[b-9pkg2ce6nw] {
    background: #e5e7eb;
}

.agentService-modal-btn-accepter[b-9pkg2ce6nw] {
    background: #c92a2a;
    color: #fff;
}

.agentService-modal-btn-accepter:hover:not(:disabled)[b-9pkg2ce6nw] {
    background: #a81f1f;
}

.agentService-modal-btn-refuser:disabled[b-9pkg2ce6nw],
.agentService-modal-btn-accepter:disabled[b-9pkg2ce6nw] {
    cursor: not-allowed;
    opacity: .6;
}

.agentService-modal-spinner[b-9pkg2ce6nw] {
    width: 12px;
    height: 12px;

    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;

    animation: agentService-modal-spin-b-9pkg2ce6nw .6s linear infinite;
}

@keyframes agentService-modal-spin-b-9pkg2ce6nw {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   MOBILE + PAYSAGE COMPACT : modale miniaturisée
============================================================ */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .agentService-modal-overlay[b-9pkg2ce6nw] { padding: .5rem; }

    .agentService-modal-card[b-9pkg2ce6nw] {
        max-width: 320px;
        max-height: 80vh;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    }

    /* ---- en-tête ---- */
    .agentService-modal-header[b-9pkg2ce6nw] { gap: .4rem; padding: .5rem .6rem; }
    .agentService-modal-header i[b-9pkg2ce6nw] { font-size: .85rem !important; }
    .agentService-modal-title[b-9pkg2ce6nw] { font-size: .72rem; }
    .agentService-modal-subtitle[b-9pkg2ce6nw] { font-size: .58rem; }
    .agentService-modal-meta[b-9pkg2ce6nw] { font-size: .5rem; }

    /* ---- corps ---- */
    .agentService-modal-body[b-9pkg2ce6nw] { padding: .45rem .6rem; gap: .3rem; }
    .agentService-modal-intro[b-9pkg2ce6nw] { font-size: .55rem; line-height: 1.35; }

    .agentService-modal-article[b-9pkg2ce6nw] { padding: .3rem .4rem; border-radius: 6px; }
    .agentService-modal-article-title[b-9pkg2ce6nw] { font-size: .55rem; }
    .agentService-modal-article-content[b-9pkg2ce6nw] { font-size: .52rem; line-height: 1.35; margin-top: .1rem; }

    .agentService-modal-checkbox[b-9pkg2ce6nw] { font-size: .52rem; gap: .3rem; margin-top: .15rem; }
    .agentService-modal-checkbox input[b-9pkg2ce6nw] { width: 11px; height: 11px; margin: 0; }

    .agentService-modal-signature-bloc[b-9pkg2ce6nw] { padding-top: .3rem; font-size: .52rem; }

    /* ---- message d'erreur (style en ligne : !important nécessaire) ---- */
    .agentService-modal-error[b-9pkg2ce6nw] {
        font-size: .55rem !important;
        margin: .3rem .6rem 0 !important;
    }

    /* ---- pied ---- */
    .agentService-modal-footer[b-9pkg2ce6nw] { gap: .3rem; padding: .35rem .6rem; }

    .agentService-modal-btn-refuser[b-9pkg2ce6nw],
    .agentService-modal-btn-accepter[b-9pkg2ce6nw] {
        gap: .2rem;
        padding: .22rem .6rem;
        font-size: .55rem;
    }

    .agentService-modal-btn-refuser i[b-9pkg2ce6nw],
    .agentService-modal-btn-accepter i[b-9pkg2ce6nw] { font-size: .55rem; }

    .agentService-modal-spinner[b-9pkg2ce6nw] { width: 9px; height: 9px; border-width: 1.5px; }

    /* ---- squelette des clauses ---- */
    .agentService-modal-article .skeleton-block[b-9pkg2ce6nw] { height: 6px; margin: .15rem 0; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    .agentService-modal-card[b-9pkg2ce6nw] { max-width: 380px; max-height: 90vh; }
    .agentService-modal-header[b-9pkg2ce6nw] { padding: .3rem .6rem; }
    .agentService-modal-body[b-9pkg2ce6nw] { padding: .3rem .6rem; gap: .2rem; }
    .agentService-modal-footer[b-9pkg2ce6nw] { padding: .25rem .6rem; }
}
/* /Components/Pages/Agents/Services/InfoAgentService.razor.rz.scp.css */
/* ===================================
   Layout principal (78% / 20%)
=================================== */

.agentService-details[b-6i8b2i7p2c] {
    display: flex;
    align-items: stretch;
    gap: .8rem;

    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Le contenu principal défile seul ; les onglets (sticky) restent en haut */
.agentService-details-main[b-6i8b2i7p2c] {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;
    min-height: 0;
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.empty-agentService[b-6i8b2i7p2c] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-size: .85rem;
}

/* ===================================
   Colonne latérale (20%) : 3 cartes
=================================== */

.agentService-details-side[b-6i8b2i7p2c] {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Style commun aux 3 cartes */
.agentService-side-top[b-6i8b2i7p2c],
.agentService-side-middle[b-6i8b2i7p2c],
.agentService-side-bottom[b-6i8b2i7p2c] {
    box-sizing: border-box;
    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

/* Cartes du haut : hauteur selon le contenu, rétrécissent (avec défilement)
   si la colonne manque de place */
.agentService-side-top[b-6i8b2i7p2c],
.agentService-side-middle[b-6i8b2i7p2c] {
    flex: 0 1 auto;
    min-height: 60px;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.agentService-side-top[b-6i8b2i7p2c]::-webkit-scrollbar,
.agentService-side-middle[b-6i8b2i7p2c]::-webkit-scrollbar {
    display: none;
}

/* Statistiques : jamais écrasée, toujours collée au fond de la colonne */
.agentService-side-bottom[b-6i8b2i7p2c] {
    flex: 0 0 auto;
    min-height: 60px;
    margin-top: auto;

    overflow: hidden;
}

.agentService-empty[b-6i8b2i7p2c],
.agentService-tab-empty[b-6i8b2i7p2c] {
    color: #9ca3af;
    font-size: .75rem;
    font-style: italic;
}

/* ===================================
   Carte 1 : consultant (avatar à droite)
=================================== */

.agentService-consultant[b-6i8b2i7p2c] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.agentService-consultant-avatar[b-6i8b2i7p2c] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.agentService-consultant-avatar img[b-6i8b2i7p2c] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.agentService-consultant-info[b-6i8b2i7p2c] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    margin-top: 1rem;
}

.agentService-consultant-name[b-6i8b2i7p2c] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agentService-consultant-type[b-6i8b2i7p2c],
.agentService-consultant-pays[b-6i8b2i7p2c] {
    font-size: .7rem;
    color: #6b7280;
}

/* ===================================
   Carte 2 : service (nom / délai / coût)
=================================== */

.agentService-side-header[b-6i8b2i7p2c],
.agentService-details-header[b-6i8b2i7p2c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.agentService-side-name[b-6i8b2i7p2c],
.agentService-details-name[b-6i8b2i7p2c] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    overflow-wrap: anywhere;
}

.agentService-side-meta[b-6i8b2i7p2c],
.agentService-details-meta[b-6i8b2i7p2c] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin-top: .3rem;
}

.agentService-side-delai[b-6i8b2i7p2c],
.agentService-details-description[b-6i8b2i7p2c] {
    font-size: .9rem;
    color: #a40b0b;
}

.agentService-side-pill[b-6i8b2i7p2c],
.agentService-details-count[b-6i8b2i7p2c] {
    padding: .25rem .7rem;

    font-size: .8rem;
    font-weight: 600;
    color: #c92a2a;

    background: transparent;
    border: 2px solid #c92a2a;
    border-radius: 999px;

    white-space: nowrap;
}

/* ===================================
   Champs des cartes
=================================== */

.agentService-side-details[b-6i8b2i7p2c],
.agentService-consultant-details[b-6i8b2i7p2c],
.agentService-service-details[b-6i8b2i7p2c] {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    margin-top: .3rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

.agentService-side-field[b-6i8b2i7p2c],
.agentService-consultant-field[b-6i8b2i7p2c] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

/* Icône à la place du libellé (le texte reste en info-bulle / aria-label) */
.agentService-field-icon[b-6i8b2i7p2c] {
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;

    font-size: .8rem;
    line-height: 1;
    color: #9ca3af;

    cursor: help;
    transition: color .15s ease;
}

.agentService-side-field:hover .agentService-field-icon[b-6i8b2i7p2c] {
    color: #c92a2a;
}

.agentService-field-label[b-6i8b2i7p2c] {
    flex-shrink: 0;

    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.agentService-field-value[b-6i8b2i7p2c] {
    font-size: .68rem;
    color: #374151;
    text-align: right;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Adresse, moyen de paiement : passent à la ligne */
.agentService-field-value--scroll[b-6i8b2i7p2c] {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
}

/* ===================================
   Carte 3 : statistiques (courbe)
=================================== */

.agentService-stats-chart-wrapper[b-6i8b2i7p2c] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .3rem;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.agentService-stats-chart-wrapper[b-6i8b2i7p2c]::-webkit-scrollbar {
    display: none;
}

.agentService-stats-svg[b-6i8b2i7p2c] {
    display: block;
    flex-shrink: 0;
}

.agentService-stats-area[b-6i8b2i7p2c] {
    fill: rgba(201, 42, 42, .15);
    stroke: none;
}

.agentService-stats-line[b-6i8b2i7p2c] {
    fill: none;
    stroke: #c92a2a;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.agentService-stats-dot[b-6i8b2i7p2c] {
    fill: #c92a2a;
    stroke: #fff;
    stroke-width: 1;
}

.agentService-stats-labels[b-6i8b2i7p2c] {
    display: flex;
    flex-shrink: 0;
}

.agentService-stat-value[b-6i8b2i7p2c] {
    flex-shrink: 0;
    text-align: center;

    font-size: .6rem;
    font-weight: 600;
    color: #c92a2a;
}

/* ===================================
   Onglets (pilules) + libellé à droite
=================================== */

.agentService-tabs[b-6i8b2i7p2c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;

    margin-top: .1rem;

    position: sticky;
    top: 0;
    z-index: 10;

    background: #fff;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.agentService-tabs > span[b-6i8b2i7p2c] {
    flex-shrink: 0;

    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;

    white-space: nowrap;
}

.agentService-tabs-numbers[b-6i8b2i7p2c] {
    display: flex;
    gap: .6rem;

    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.agentService-tabs-numbers[b-6i8b2i7p2c]::-webkit-scrollbar {
    display: none;
}

.agentService-tab[b-6i8b2i7p2c] {
    flex-shrink: 0;
    white-space: nowrap;

    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;
    color: #b9bdc4;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;

    cursor: pointer;
    transition: .2s;
}

.agentService-tab:hover[b-6i8b2i7p2c] {
    background: #fdecec;
    color: #c92a2a;
}

.agentService-tab.active[b-6i8b2i7p2c] {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
}

/* ===================================
   Cadre gris du contenu
=================================== */

.agentService-tab-content[b-6i8b2i7p2c] {
    flex: 0 1 auto;          /* taille du contenu, rétrécit seulement si la place manque */
    min-height: 0;
    overflow: hidden;

    padding: .8rem;
    box-sizing: border-box;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.agentService-tab-description[b-6i8b2i7p2c] {
    margin: 0;
    padding-right: .3rem;

    font-size: .9rem;
    line-height: 1.6;
    color: #374151;

    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;        /* le texte défile dans le cadre, le crayon reste visible */
}

.agentService-tab-description[b-6i8b2i7p2c]  h1 { font-size: 1.15rem; margin: .4rem 0; }
.agentService-tab-description[b-6i8b2i7p2c]  h2 { font-size: 1.05rem; margin: .4rem 0; }
.agentService-tab-description[b-6i8b2i7p2c]  h3 { font-size: .95rem; margin: .3rem 0; }
.agentService-tab-description[b-6i8b2i7p2c]  p  { margin: .3rem 0; }
.agentService-tab-description[b-6i8b2i7p2c]  ul,
.agentService-tab-description[b-6i8b2i7p2c]  ol { margin: .3rem 0; padding-left: 1.4rem; }
.agentService-tab-description[b-6i8b2i7p2c]  li { margin: .15rem 0; }
.agentService-tab-description[b-6i8b2i7p2c]  img { max-width: 100%; height: auto; }
.agentService-tab-description[b-6i8b2i7p2c]  table { max-width: 100%; border-collapse: collapse; }
.agentService-tab-description[b-6i8b2i7p2c]  td { border: 1px solid #e5e7eb; padding: .25rem .4rem; }
.agentService-tab-description[b-6i8b2i7p2c]  a { color: #c92a2a; }

.agentService-placeholder[b-6i8b2i7p2c] {
    margin: .3rem 0;

    color: #9ca3af;
    font-size: .8rem;
    line-height: 1.5;
}

/* Crayon du contenu principal */
.agentService-btn-edit[b-6i8b2i7p2c] {
    flex-shrink: 0;
    align-self: flex-end;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.agentService-btn-edit:hover[b-6i8b2i7p2c] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Zone d'édition inline
=================================== */

.agentService-edit-zone[b-6i8b2i7p2c] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.agentService-edit-actions[b-6i8b2i7p2c] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .3rem;
}

.agentService-btn-cancel[b-6i8b2i7p2c],
.agentService-btn-ok[b-6i8b2i7p2c] {
    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: .2s;
}

.agentService-btn-cancel[b-6i8b2i7p2c] {
    background: #f3f4f6;
    color: #6b7280;
}

.agentService-btn-cancel:hover[b-6i8b2i7p2c] {
    background: #e5e7eb;
}

.agentService-btn-ok[b-6i8b2i7p2c] {
    background: #c92a2a;
    color: #fff;
}

.agentService-btn-ok:hover[b-6i8b2i7p2c] {
    background: #a81f1f;
}

/* ===================================
   Barre d'outils de l'éditeur riche
=================================== */

.agentService-editor-toolbar[b-6i8b2i7p2c] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: .4rem;
    margin-bottom: .4rem;

    background: transparent;
    border: none;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.agentService-editor-toolbar[b-6i8b2i7p2c]::-webkit-scrollbar {
    display: none;
}

.agentService-editor-toolbar button[b-6i8b2i7p2c],
.agentService-tool[b-6i8b2i7p2c] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 28px;
    height: 28px;
    padding: 0 .3rem;

    background: transparent;
    border: none;
    border-radius: 4px;

    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;

    cursor: pointer;
    transition: .2s;
}

.agentService-editor-toolbar button:hover[b-6i8b2i7p2c],
.agentService-tool:hover[b-6i8b2i7p2c] {
    background: #fdecec;
    color: #c92a2a;
}

.agentService-tool-wide[b-6i8b2i7p2c] {
    min-width: auto;
    padding: 0 .5rem;
    white-space: nowrap;
}

.agentService-tool-select[b-6i8b2i7p2c] {
    flex-shrink: 0;

    height: 28px;
    padding: 0 .3rem;

    font-size: .72rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;

    cursor: pointer;
}

.agentService-tool-select:hover[b-6i8b2i7p2c] {
    border-color: #c92a2a;
}

.agentService-toolbar-separator[b-6i8b2i7p2c] {
    flex-shrink: 0;

    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 .3rem;
}

.agentService-color-picker[b-6i8b2i7p2c] {
    flex-shrink: 0;

    width: 28px;
    height: 28px;
    padding: 2px;

    background: transparent;
    border: none;

    cursor: pointer;
}

/* La hauteur inline calculée par le composant est respectée */
.agentService-edit-richtext[b-6i8b2i7p2c] {
    width: 100%;
    padding: .5rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;
    line-height: 1.5;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    overflow-y: auto;

    min-height: 10vh;
    max-height: 40vh;

    box-sizing: border-box;
}

.agentService-edit-richtext:focus[b-6i8b2i7p2c] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.agentService-edit-richtext ul[b-6i8b2i7p2c],
.agentService-edit-richtext ol[b-6i8b2i7p2c] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - zone principale sur toute la largeur
   - volet latéral = tiroir fixe qui glisse (transform), comme
     le volet gauche de la page : même durée, même courbe
   - collé sous la bande des agents, coins arrondis seulement
     en bas ; même haut / même bas que le volet gauche, via les
     variables --content-top, --content-bottom, --drawer-inset
     (définies sur .agentService-content dans AgentServices.razor.css)
   - Statistiques : carte complète fixée en bas du volet (sticky)
   - ouverture pilotée par la classe .open (paramètre SideOpen)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .agentService-details[b-6i8b2i7p2c] {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: stretch;
        height: 100%;
        overflow: hidden;
        gap: 0;
    }

    .agentService-details-main[b-6i8b2i7p2c] {
        flex: 1 1 100%;
        max-width: none;
        width: auto;
        max-height: 100%;
        min-height: 0;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        padding: .35rem;
        box-sizing: border-box;
    }

    /* ---------- Volet des informations (bande droite) ----------
       Toujours rendu, glisse hors écran quand il est fermé. */
    .agentService-details-side[b-6i8b2i7p2c] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 30px) + var(--drawer-inset, 3px));
        right: 0;                                   /* collé au bord droit */
        left: auto;

        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        height: auto;
        margin: 0;
        padding: .6rem;
        box-sizing: border-box;

        z-index: 1500;
        background: #fff;
        border-radius: 0 0 0 14px;
        overflow-y: auto;

        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .agentService-details-side.open[b-6i8b2i7p2c] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Rien n'est coupé : les cartes gardent leur hauteur complète */
    .agentService-side-top[b-6i8b2i7p2c],
    .agentService-side-middle[b-6i8b2i7p2c],
    .agentService-side-bottom[b-6i8b2i7p2c] {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 0;
        padding: .45rem;
        gap: .25rem;
        border-radius: 10px;
    }

    /* Statistiques : carte complète, fixée en bas du volet avec une marge */
    .agentService-side-bottom[b-6i8b2i7p2c] {
        position: sticky;
        bottom: .6rem;               /* même marge que le padding du volet */
        z-index: 5;

        margin-top: auto;            /* poussé en bas si le contenu est court */

        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;

        /* 1) ombre légère au-dessus ; 2) bande blanche sous la carte
           pour masquer le contenu qui défile dans la marge du bas */
        box-shadow:
            0 -6px 8px -6px rgba(0, 0, 0, .15),
            0 .6rem 0 0 #fff;
    }

    .agentService-field-value[b-6i8b2i7p2c],
    .agentService-consultant-name[b-6i8b2i7p2c],
    .agentService-consultant-type[b-6i8b2i7p2c],
    .agentService-consultant-pays[b-6i8b2i7p2c] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    /* ---------- Onglets ---------- */
    .agentService-tabs[b-6i8b2i7p2c] {
        position: static;
        padding: .2rem 0 .3rem;
        margin-top: 0;
        gap: .3rem;
    }

    .agentService-tabs-numbers[b-6i8b2i7p2c] { gap: .15rem; }

    .agentService-tab[b-6i8b2i7p2c] {
        padding: .12rem .45rem;
        font-size: .6rem;
        border-radius: 14px;
    }

    .agentService-tabs > span[b-6i8b2i7p2c] { font-size: .7rem; }

    /* ---------- Contenu : hauteur flexible ---------- */
    .agentService-tab-content[b-6i8b2i7p2c] {
        flex: 0 1 auto;
        min-height: 0;
        overflow: hidden;
        padding: .6rem;
        gap: .4rem;
        border-radius: 10px;
    }


    .agentService-tab-description[b-6i8b2i7p2c] {
        max-height: none;
        overflow-y: auto;
        font-size: .82rem;
        line-height: 1.5;
        padding-right: .1rem;
    }

    .agentService-tab-description[b-6i8b2i7p2c]  h1 { font-size: 1.05rem; margin: .35rem 0; }
    .agentService-tab-description[b-6i8b2i7p2c]  h2 { font-size: .95rem; margin: .3rem 0; }
    .agentService-tab-description[b-6i8b2i7p2c]  h3 { font-size: .88rem; margin: .25rem 0; }
    .agentService-tab-description[b-6i8b2i7p2c]  p,
    .agentService-tab-description[b-6i8b2i7p2c]  li { font-size: .82rem; line-height: 1.5; margin: .2rem 0; }
    .agentService-tab-description[b-6i8b2i7p2c]  img { max-width: 100%; height: auto; }
    .agentService-tab-description[b-6i8b2i7p2c]  table { font-size: .75rem; }

    .agentService-placeholder[b-6i8b2i7p2c] { font-size: .75rem; margin: .2rem 0; }
    .agentService-empty[b-6i8b2i7p2c],
    .agentService-tab-empty[b-6i8b2i7p2c] { font-size: .65rem; }

    .agentService-btn-edit[b-6i8b2i7p2c] { width: 24px; height: 24px; font-size: .6rem; }

    /* ---------- Cartes du volet ---------- */
    .agentService-consultant[b-6i8b2i7p2c] { gap: .4rem; }
    .agentService-consultant-avatar[b-6i8b2i7p2c] { width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; font-size: .65rem; }
    .agentService-consultant-info[b-6i8b2i7p2c] { margin-top: .1rem; }
    .agentService-consultant-name[b-6i8b2i7p2c] { font-size: .72rem; }
    .agentService-consultant-type[b-6i8b2i7p2c],
    .agentService-consultant-pays[b-6i8b2i7p2c] { font-size: .58rem; }

    .agentService-side-name[b-6i8b2i7p2c],
    .agentService-details-name[b-6i8b2i7p2c] { font-size: .72rem; }
    .agentService-side-meta[b-6i8b2i7p2c],
    .agentService-details-meta[b-6i8b2i7p2c] { margin-top: .2rem; }
    .agentService-side-delai[b-6i8b2i7p2c],
    .agentService-details-description[b-6i8b2i7p2c] { font-size: .65rem; }
    .agentService-side-pill[b-6i8b2i7p2c],
    .agentService-details-count[b-6i8b2i7p2c] { font-size: .6rem; padding: .1rem .45rem; border-width: 1.5px; }

    .agentService-side-details[b-6i8b2i7p2c],
    .agentService-consultant-details[b-6i8b2i7p2c],
    .agentService-service-details[b-6i8b2i7p2c] { gap: .25rem; margin-top: .2rem; padding-top: .3rem; }
    .agentService-side-field[b-6i8b2i7p2c],
    .agentService-consultant-field[b-6i8b2i7p2c] { gap: .3rem; }
    .agentService-field-icon[b-6i8b2i7p2c] { width: .8rem; font-size: .6rem; }
    .agentService-field-label[b-6i8b2i7p2c] { font-size: .46rem; }
    .agentService-field-value[b-6i8b2i7p2c] { font-size: .6rem; }

    .agentService-stats-svg[b-6i8b2i7p2c] { height: 40px !important; }   /* !important : le composant peut fixer la hauteur en ligne */
    .agentService-stat-value[b-6i8b2i7p2c] { font-size: .5rem; }

    /* ---------- Édition ---------- */
    .agentService-edit-zone[b-6i8b2i7p2c] { gap: .35rem; }
    .agentService-btn-cancel[b-6i8b2i7p2c],
    .agentService-btn-ok[b-6i8b2i7p2c] { padding: .3rem .8rem; font-size: .7rem; }

    .agentService-editor-toolbar[b-6i8b2i7p2c] { padding: .2rem; gap: .2rem; margin-bottom: .3rem; }
    .agentService-editor-toolbar button[b-6i8b2i7p2c],
    .agentService-tool[b-6i8b2i7p2c] { min-width: 24px; height: 24px; padding: 0 .2rem; font-size: .7rem; }
    .agentService-editor-toolbar svg[b-6i8b2i7p2c] { width: 12px; height: 12px; }
    .agentService-tool-select[b-6i8b2i7p2c] { height: 24px; font-size: .65rem; padding: 0 .2rem; }
    .agentService-color-picker[b-6i8b2i7p2c] { width: 24px; height: 24px; }
    .agentService-toolbar-separator[b-6i8b2i7p2c] { height: 14px; margin: 0 .15rem; }
    .agentService-edit-richtext[b-6i8b2i7p2c] { font-size: .82rem; padding: .4rem; min-height: 8vh; max-height: 30vh; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    /* top / bottom viennent des variables de .agentService-content (148px / 26px) */
    .agentService-details-side[b-6i8b2i7p2c] {
        width: var(--drawer-w, 55vw);
        max-width: var(--drawer-w, 55vw);
    }

    .agentService-tab[b-6i8b2i7p2c] { font-size: .62rem; padding: .2rem .5rem; }
    .agentService-tab-content[b-6i8b2i7p2c] { padding: .4rem; }

    .agentService-tab-description[b-6i8b2i7p2c],
    .agentService-tab-description[b-6i8b2i7p2c]  p,
    .agentService-tab-description[b-6i8b2i7p2c]  li { font-size: .72rem; }

    .agentService-consultant-avatar[b-6i8b2i7p2c] { width: 28px; height: 28px; min-width: 28px; flex: 0 0 28px; }
    .agentService-consultant-name[b-6i8b2i7p2c],
    .agentService-side-name[b-6i8b2i7p2c],
    .agentService-details-name[b-6i8b2i7p2c] { font-size: .62rem; }
    .agentService-field-value[b-6i8b2i7p2c] { font-size: .55rem; }
    .agentService-field-label[b-6i8b2i7p2c] { font-size: .42rem; }
}

/* ===================================
   Phase : squelette des pilules
=================================== */

.agentService-tab.skeleton[b-6i8b2i7p2c] {
    border: 0;
    cursor: default;
    pointer-events: none;
}

/* ===================================
   Bouton d'action (Ajouter / Paiement / statut)
   - ordinateur : en haut de la zone principale, aligné à droite
   - mobile     : collé en bas de la zone visible
=================================== */

.agentService-action--main[b-6i8b2i7p2c] { display: none; }

.agentService-btn-ajouter[b-6i8b2i7p2c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;

    margin-left: auto;
    margin-top: 10px;
    width: 50%;
    height: 25px;
    padding: .5rem 1.1rem;

    font-size: .8rem;
    font-weight: 500;

    background: #c92a2a;
    border: none;
    border-radius: 980px;

    cursor: pointer;
    transition: background-color .2s ease, transform .1s ease;
}

.agentService-btn-ajouter[b-6i8b2i7p2c],
.agentService-btn-ajouter span[b-6i8b2i7p2c],
.agentService-btn-ajouter i[b-6i8b2i7p2c] {
    color: #fff !important;      /* écrase la couleur globale des boutons */
}

.agentService-btn-ajouter:hover[b-6i8b2i7p2c] { background: #a81f1f; }

.agentService-btn-ajouter:active[b-6i8b2i7p2c] {
    transform: scale(.97);
    background: #8f1a1a;
}

.agentService-btn-ajouter i[b-6i8b2i7p2c] { font-size: .8rem; }

.agentService-modal-spinner[b-6i8b2i7p2c] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: agentService-spin-b-6i8b2i7p2c .7s linear infinite;
}

@keyframes agentService-spin-b-6i8b2i7p2c {
    to { transform: rotate(360deg); }
}

.agentService-action[b-6i8b2i7p2c] {
    order: -1;                   /* avant les onglets */
    flex: 0 0 auto;
    align-self: flex-end;
    padding: 0;
    margin: 0 0 .2rem;
}

.agentService-action .agentService-btn-ajouter[b-6i8b2i7p2c] {
    width: auto;
    min-width: 140px;
    margin-left: 0;
}

.agentService-action .agentService-statut-attente[b-6i8b2i7p2c] {
    padding: .35rem .9rem !important;
}

.agentService-stats-chart-wrapper[b-6i8b2i7p2c] { padding: 0; }

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .agentService-details-main[b-6i8b2i7p2c] { height: 100%; }

    .agentService-action--side[b-6i8b2i7p2c] { display: none; }
    .agentService-action--main[b-6i8b2i7p2c] { display: block; }

    .agentService-action[b-6i8b2i7p2c] {
        order: 99;               /* après le cadre gris */
        align-self: stretch;
        margin: auto 0 0;        /* poussé en bas */
        padding: .3rem 0 0;
        background: #fff;
        border-top: 1px solid #e5e7eb;
    }

    .agentService-action .agentService-btn-ajouter[b-6i8b2i7p2c] {
        width: 100%;
        min-width: 0;
        height: 28px;
        padding: .2rem .6rem;
        font-size: .7rem;
        margin-left: 0;
        margin-top: 0;
    }

    .agentService-action .agentService-btn-ajouter i[b-6i8b2i7p2c] { font-size: .7rem; }

    .agentService-action .agentService-statut-attente[b-6i8b2i7p2c] {
        padding: .2rem .4rem !important;
        font-size: .6rem !important;
        justify-content: center;
    }

    .agentService-action p[b-6i8b2i7p2c] { font-size: .6rem; margin: .2rem 0 0; }

    .agentService-stats-chart-wrapper[b-6i8b2i7p2c] { padding: .2rem; }

    /* Texte des phases : !important écrase les styles en ligne du HTML riche */
    .agentService-tab-description[b-6i8b2i7p2c],
    .agentService-tab-description[b-6i8b2i7p2c]  * {
        font-size: .82rem !important;
        line-height: 1.5 !important;
        font-family: inherit !important;
    }

    .agentService-tab-description[b-6i8b2i7p2c]  h1 { font-size: 1.05rem !important; }
    .agentService-tab-description[b-6i8b2i7p2c]  h2 { font-size: .95rem !important; }
    .agentService-tab-description[b-6i8b2i7p2c]  h3 { font-size: .88rem !important; }
    .agentService-tab-description[b-6i8b2i7p2c]  ul,
    .agentService-tab-description[b-6i8b2i7p2c]  ol { padding-left: 1rem !important; }
}

@media (max-height: 500px) and (orientation: landscape) {

    .agentService-action .agentService-btn-ajouter[b-6i8b2i7p2c] { height: 22px; font-size: .6rem; }

    .agentService-tab-description[b-6i8b2i7p2c],
    .agentService-tab-description[b-6i8b2i7p2c]  * { font-size: .72rem !important; }
}
/* /Components/Pages/Agents/Services/PaiementValidation.razor.rz.scp.css */
/* =========================
   CSS isolé de PaiementValidation.razor
   (Blazor charge automatiquement ce fichier, aucun lien manuel requis)
========================= */

.agentService-modal-overlay[b-27agmgsinm] {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;
    background: rgba(17, 24, 39, .55);
}

.agentService-modal-card[b-27agmgsinm] {
    width: 100%;
    max-width: 480px;
    max-height: 85vh;

    display: flex;
    flex-direction: column;
    overflow: hidden;

    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.agentService-modal-header[b-27agmgsinm] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;

    padding: .9rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.agentService-modal-header-info[b-27agmgsinm] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.agentService-modal-title[b-27agmgsinm] {
    font-size: 1rem;
    font-weight: 700;
    color: #c92a2a;
}

.agentService-modal-subtitle[b-27agmgsinm] {
    font-size: .75rem;
    color: #374151;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentService-modal-meta[b-27agmgsinm] {
    font-size: .68rem;
    color: #9ca3af;
}

.agentService-modal-body[b-27agmgsinm] {
    padding: .8rem 1rem;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.agentService-modal-recap[b-27agmgsinm] {
    display: flex;
    flex-direction: column;
    gap: .2rem;

    padding: .6rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.agentService-modal-recap-title[b-27agmgsinm] {
    font-size: .75rem;
    font-weight: 700;
}

.agentService-modal-recap-row[b-27agmgsinm] {
    display: flex;
    justify-content: space-between;

    font-size: .72rem;
    color: #374151;
}

.agentService-modal-recap-total[b-27agmgsinm] {
    margin-top: .3rem;
    padding-top: .3rem;
    border-top: 1px solid #e5e7eb;

    font-weight: 700;
    color: #c92a2a;
}

.agentService-modal-field[b-27agmgsinm] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.agentService-modal-field label[b-27agmgsinm] {
    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;
}

.agentService-modal-field textarea[b-27agmgsinm] {
    padding: .4rem;

    font-size: .75rem;
    font-family: inherit;

    border: 1px solid #e5e7eb;
    border-radius: 8px;

    resize: vertical;
}

.agentService-modal-field textarea:focus[b-27agmgsinm] {
    outline: none;
    border-color: #c92a2a;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.agentService-modal-secure-note[b-27agmgsinm] {
    margin: 0;
    font-size: .65rem;
    color: #9ca3af;
}

.agentService-modal-footer[b-27agmgsinm] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;

    padding: .7rem 1rem;
    border-top: 1px solid #e5e7eb;
}

.agentService-modal-btn-refuser[b-27agmgsinm],
.agentService-modal-btn-accepter[b-27agmgsinm] {
    display: flex;
    align-items: center;
    gap: .3rem;

    padding: .4rem .9rem;

    font-size: .72rem;
    font-weight: 600;

    border: none;
    border-radius: 999px;

    cursor: pointer;
    transition: .2s;
}

.agentService-modal-btn-refuser[b-27agmgsinm] {
    background: #f3f4f6;
    color: #6b7280;
}

.agentService-modal-btn-refuser:hover:not(:disabled)[b-27agmgsinm] {
    background: #e5e7eb;
}

.agentService-modal-btn-accepter[b-27agmgsinm] {
    background: #c92a2a;
    color: #fff;
}

.agentService-modal-btn-accepter:hover:not(:disabled)[b-27agmgsinm] {
    background: #a81f1f;
}

.agentService-modal-btn-refuser:disabled[b-27agmgsinm],
.agentService-modal-btn-accepter:disabled[b-27agmgsinm] {
    cursor: not-allowed;
    opacity: .6;
}

.agentService-modal-spinner[b-27agmgsinm] {
    width: 12px;
    height: 12px;

    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;

    animation: agentService-modal-spin-b-27agmgsinm .6s linear infinite;
}

@keyframes agentService-modal-spin-b-27agmgsinm {
    to {
        transform: rotate(360deg);
    }
}

/* ===================================
   Sélecteur de fichier traduit (PaiementValidation)
   L'input natif reste dans le DOM (accessible au clavier) mais invisible :
   le <label> qui l'enveloppe ouvre le sélecteur au clic.
=================================== */

.agentService-modal-file-picker[b-27agmgsinm] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
}

.agentService-modal-file-input[b-27agmgsinm] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.agentService-modal-file-btn[b-27agmgsinm] {
    flex-shrink: 0;
    padding: .4rem .8rem;

    font-size: .75rem;
    font-weight: 600;
    color: #374151;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;

    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.agentService-modal-file-picker:hover .agentService-modal-file-btn[b-27agmgsinm] {
    background: #fdecec;
    border-color: #fdecec;
    color: #c92a2a;
}

/* Contour visible quand l'input reçoit le focus clavier */
.agentService-modal-file-input:focus-visible + .agentService-modal-file-btn[b-27agmgsinm] {
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .25);
}

.agentService-modal-file-name[b-27agmgsinm] {
    min-width: 0;
    font-size: .75rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   MOBILE + PAYSAGE COMPACT : modale miniaturisée
============================================================ */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .agentService-modal-overlay[b-27agmgsinm] { padding: .5rem; }

    .agentService-modal-card[b-27agmgsinm] {
        max-width: 300px;
        max-height: 80vh;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    }

    /* ---- en-tête ---- */
    .agentService-modal-header[b-27agmgsinm] { gap: .4rem; padding: .5rem .6rem; }
    .agentService-modal-header i[b-27agmgsinm] { font-size: .85rem !important; }
    .agentService-modal-title[b-27agmgsinm] { font-size: .72rem; }
    .agentService-modal-subtitle[b-27agmgsinm] { font-size: .58rem; }
    .agentService-modal-meta[b-27agmgsinm] { font-size: .5rem; }

    /* ---- corps ---- */
    .agentService-modal-body[b-27agmgsinm] { padding: .45rem .6rem; gap: .3rem; }

    .agentService-modal-recap[b-27agmgsinm] { padding: .35rem .45rem; gap: .12rem; border-radius: 7px; }
    .agentService-modal-recap-title[b-27agmgsinm] { font-size: .58rem; }
    .agentService-modal-recap-row[b-27agmgsinm] { font-size: .55rem; }
    .agentService-modal-recap-total[b-27agmgsinm] { margin-top: .15rem; padding-top: .15rem; }

    .agentService-modal-field[b-27agmgsinm] { gap: .15rem; }
    .agentService-modal-field label[b-27agmgsinm] { font-size: .52rem; }
    .agentService-modal-field textarea[b-27agmgsinm] {
        padding: .25rem .3rem;
        font-size: .55rem;
        border-radius: 6px;
    }

    .agentService-modal-file-picker[b-27agmgsinm] { gap: .35rem; }
    .agentService-modal-file-btn[b-27agmgsinm] { padding: .2rem .45rem; font-size: .55rem; border-radius: 6px; }
    .agentService-modal-file-name[b-27agmgsinm] { font-size: .52rem; }

    .agentService-modal-secure-note[b-27agmgsinm] { font-size: .48rem; }

    /* ---- message d'erreur (style en ligne : !important nécessaire) ---- */
    .agentService-modal-error[b-27agmgsinm] {
        font-size: .55rem !important;
        margin: .3rem 0 0 !important;
    }

    /* ---- pied ---- */
    .agentService-modal-footer[b-27agmgsinm] { gap: .3rem; padding: .35rem .6rem; }

    .agentService-modal-btn-refuser[b-27agmgsinm],
    .agentService-modal-btn-accepter[b-27agmgsinm] {
        gap: .2rem;
        padding: .22rem .6rem;
        font-size: .55rem;
    }

    .agentService-modal-btn-refuser i[b-27agmgsinm],
    .agentService-modal-btn-accepter i[b-27agmgsinm] { font-size: .55rem; }

    .agentService-modal-spinner[b-27agmgsinm] { width: 9px; height: 9px; border-width: 1.5px; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    .agentService-modal-card[b-27agmgsinm] { max-width: 360px; max-height: 90vh; }
    .agentService-modal-header[b-27agmgsinm] { padding: .3rem .6rem; }
    .agentService-modal-body[b-27agmgsinm] { padding: .3rem .6rem; gap: .2rem; }
    .agentService-modal-footer[b-27agmgsinm] { padding: .25rem .6rem; }
}
/* /Components/Pages/Assistance/Finance/Finance.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.finance-page[b-wte4tzgznz] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES CATÉGORIES (bureau)
========================================== */

.finance-sticky[b-wte4tzgznz] {
    position: fixed;
    top: 80px;
    left: 250px;
    right: 70px;
    height: 140px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 12px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.finance-content[b-wte4tzgznz] {
    position: fixed;

    top: 220px;
    bottom: 20px;
    left: 240px;
    right: 30px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

.finance-left[b-wte4tzgznz] {
    flex: 0 0 20%;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;

    padding: .5rem;
}

.finance-right[b-wte4tzgznz] {
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
    min-height: 0;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
}

.empty-finance[b-wte4tzgznz] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languettes et fond cliquable : cachés sur ordinateur */
.finance-content .drawer-tab[b-wte4tzgznz],
.finance-content .drawer-backdrop[b-wte4tzgznz] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - volets et languettes glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors des volets les referme (fond cliquable)
   - volets collés sous la bande des catégories, coins arrondis
     seulement en bas
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des catégories : pleine largeur, sans coins arrondis */
    html body .finance-sticky[b-wte4tzgznz] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .finance-content[b-wte4tzgznz] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit (utilisé par InfoFinance) */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .finance-content .finance-right[b-wte4tzgznz] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* Clic en dehors des volets : les referme (sous les volets et les languettes) */
    html body .finance-content .drawer-backdrop[b-wte4tzgznz] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .finance-content .finance-left[b-wte4tzgznz] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        min-width: 0 !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .finance-content.left-open .finance-left[b-wte4tzgznz] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .finance-content .drawer-tab[b-wte4tzgznz] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .finance-content .drawer-tab:hover[b-wte4tzgznz] {
        background: rgba(225, 110, 110, .98);
    }

    .finance-content .drawer-tab-left[b-wte4tzgznz] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .finance-content.left-open .drawer-tab-left[b-wte4tzgznz] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .finance-content .drawer-tab-right[b-wte4tzgznz] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .finance-content.right-open .drawer-tab-right[b-wte4tzgznz] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .finance-sticky[b-wte4tzgznz] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .finance-content[b-wte4tzgznz] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --drawer-w: 55vw;
        --left-w: 55vw;
    }

    .finance-content .drawer-tab[b-wte4tzgznz] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Assistance/Finance/InfoFinance.razor.rz.scp.css */
/* ===================================
   Layout principal (78% / 20%)
=================================== */

.infoFinance-details[b-azs1itlcbk] {
    display: flex;
    align-items: stretch;
    gap: .8rem;

    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Le contenu principal défile seul ; les onglets (sticky) restent en haut */
.infoFinance-details-main[b-azs1itlcbk] {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;
    min-height: 0;

    overflow-y: auto;
    scrollbar-width: thin;
}

/* ===================================
   Colonne latérale (20%) : 4 cartes
=================================== */

.infoFinance-details-side[b-azs1itlcbk] {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Style commun aux 4 cartes */
.infoFinance-side-top[b-azs1itlcbk],
.infoFinance-side-middle[b-azs1itlcbk],
.infoFinance-side-consultants[b-azs1itlcbk],
.infoFinance-side-bottom[b-azs1itlcbk] {
    box-sizing: border-box;
    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoFinance-side-top[b-azs1itlcbk]::-webkit-scrollbar,
.infoFinance-side-middle[b-azs1itlcbk]::-webkit-scrollbar,
.infoFinance-side-consultants[b-azs1itlcbk]::-webkit-scrollbar,
.infoFinance-side-bottom[b-azs1itlcbk]::-webkit-scrollbar {
    display: none;
}

/* Cartes du haut : hauteur selon le contenu, rétrécissent (avec défilement)
   si la colonne manque de place */
.infoFinance-side-top[b-azs1itlcbk],
.infoFinance-side-middle[b-azs1itlcbk] {
    flex: 0 1 auto;
    min-height: 60px;
}

.infoFinance-side-consultants[b-azs1itlcbk] {
    flex: 0 1 auto;
    min-height: 90px;
}

/* Statistiques : jamais écrasée, toujours collée au fond de la colonne */
.infoFinance-side-bottom[b-azs1itlcbk] {
    flex: 0 0 auto;
    min-height: 60px;
    margin-top: auto;
}

/* ===================================
   Carte 1 : identité (avatar à droite)
=================================== */

.infoFinance-identity[b-azs1itlcbk] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.infoFinance-identity-avatar[b-azs1itlcbk] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.infoFinance-identity-avatar img[b-azs1itlcbk] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.infoFinance-identity-info[b-azs1itlcbk] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    margin-top: 1rem;
}

.infoFinance-identity-name[b-azs1itlcbk] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoFinance-identity-type[b-azs1itlcbk] {
    font-size: .7rem;
    color: #6b7280;
}

/* ===================================
   Champs des cartes
=================================== */

.infoFinance-side-title[b-azs1itlcbk] {
    display: block;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;
}

.infoFinance-side-details[b-azs1itlcbk] {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    margin-top: .3rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

/* Pas de filet ni de marge en haut quand la liste est seule dans la carte */
.infoFinance-side-details--plain[b-azs1itlcbk] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.infoFinance-side-field[b-azs1itlcbk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.infoFinance-side-field > i[b-azs1itlcbk] {
    flex-shrink: 0;
    width: .9rem;
    text-align: center;
    font-size: .7rem;
    color: #9ca3af;
}

.infoFinance-field-label[b-azs1itlcbk] {
    flex-shrink: 0;

    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.infoFinance-field-value[b-azs1itlcbk] {
    font-size: .68rem;
    color: #374151;
    text-align: right;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infoFinance-field-value--wrap[b-azs1itlcbk] {
    white-space: normal;
    word-break: break-word;
}

.infoFinance-field-link[b-azs1itlcbk] {
    color: #c92a2a;
    text-decoration: none;
}

.infoFinance-field-link:hover[b-azs1itlcbk] {
    text-decoration: underline;
}

.infoFinance-side-notes[b-azs1itlcbk] {
    margin: 0;

    font-size: .7rem;
    line-height: 1.5;
    color: #374151;
    white-space: pre-wrap;
}

/* Carte 2 : site web */
.infoFinance-side-links[b-azs1itlcbk] {
    margin: .3rem 0 0;
    padding-left: 1rem;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    font-size: .72rem;
    color: #374151;
}

.infoFinance-side-links a[b-azs1itlcbk] {
    color: #c92a2a;
    text-decoration: none;
    word-break: break-word;
}

.infoFinance-side-links a:hover[b-azs1itlcbk] {
    text-decoration: underline;
}

/* Carte 4 : statistiques */
.infoFinance-stat-value[b-azs1itlcbk] {
    font-size: .72rem;
    font-weight: 700;
    color: #111827;
    text-align: right;
}

/* ===================================
   Carte 3 : consultants
=================================== */

.infoFinance-consultant-list[b-azs1itlcbk] {
    margin: .3rem 0 0;
    padding: .5rem 0 0;
    list-style: none;
    border-top: 1px solid #e5e7eb;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoFinance-consultant[b-azs1itlcbk] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.infoFinance-consultant-avatar[b-azs1itlcbk] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-size: .7rem;
    font-weight: 600;
}

.infoFinance-consultant-avatar img[b-azs1itlcbk] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.infoFinance-consultant-info[b-azs1itlcbk] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Nom + icônes sur la même ligne */
.infoFinance-consultant-head[b-azs1itlcbk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    min-width: 0;
}

.infoFinance-consultant-head .infoFinance-consultant-name[b-azs1itlcbk] {
    flex: 1;
    min-width: 0;
}

.infoFinance-consultant-name[b-azs1itlcbk] {
    font-size: .74rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoFinance-consultant-icons[b-azs1itlcbk] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.infoFinance-consultant-icon[b-azs1itlcbk] {
    font-size: .64rem;
    color: #9ca3af;
    text-decoration: none;
    transition: color .2s;
}

.infoFinance-consultant-icon:hover[b-azs1itlcbk],
.infoFinance-consultant:hover .infoFinance-consultant-icon[b-azs1itlcbk] {
    color: #c92a2a;
}

.infoFinance-consultant-title[b-azs1itlcbk] {
    font-size: .64rem;
    color: #6b7280;
}

.infoFinance-consultant-line[b-azs1itlcbk] {
    font-size: .64rem;
    word-break: break-all;
}

/* Coordonnées : cachées, affichées au survol */
.infoFinance-consultant-details[b-azs1itlcbk] {
    display: flex;
    flex-direction: column;

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease;
}

.infoFinance-consultant:hover .infoFinance-consultant-details[b-azs1itlcbk],
.infoFinance-consultant:focus-within .infoFinance-consultant-details[b-azs1itlcbk] {
    max-height: 4rem;
    opacity: 1;
    margin-top: .15rem;
}

/* Écrans tactiles (pas de survol) : toujours visibles */
@media (hover: none) {
    .infoFinance-consultant-details[b-azs1itlcbk] {
        max-height: 4rem;
        opacity: 1;
        margin-top: .15rem;
    }
}

/* ===================================
   Crayon des cartes latérales (bas à droite)
=================================== */

.infoFinance-side-edit-btn[b-azs1itlcbk] {
    align-self: flex-end;
    margin-top: auto;
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.infoFinance-side-edit-btn:hover[b-azs1itlcbk] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Onglets (pilules) + nom à droite
=================================== */

.infoFinance-tabs[b-azs1itlcbk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;

    margin-top: .1rem;

    position: sticky;
    top: 0;
    z-index: 10;

    background: #fff;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.infoFinance-tabs-items[b-azs1itlcbk] {
    display: flex;
    gap: .6rem;

    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoFinance-tabs-items[b-azs1itlcbk]::-webkit-scrollbar {
    display: none;
}

.infoFinance-tabs-org[b-azs1itlcbk] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;

    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.infoFinance-tab[b-azs1itlcbk] {
    flex-shrink: 0;
    white-space: nowrap;

    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;
    color: #b9bdc4;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;

    cursor: pointer;
    transition: .2s;
}

.infoFinance-tab:hover[b-azs1itlcbk] {
    background: #fdecec;
    color: #c92a2a;
}

.infoFinance-tab.active[b-azs1itlcbk] {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
}

/* ===================================
   Cadre gris du contenu
=================================== */

.infoFinance-tab-content[b-azs1itlcbk] {
    padding: .8rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoFinance-tab-description[b-azs1itlcbk] {
    margin: 0;
    padding-right: .3rem;

    font-size: .9rem;
    line-height: 1.6;
    color: #374151;

    max-height: 63vh;
    overflow-y: auto;
}

.infoFinance-tab-description ul[b-azs1itlcbk],
.infoFinance-tab-description ol[b-azs1itlcbk] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

.infoFinance-placeholder[b-azs1itlcbk] {
    margin: .3rem 0;

    color: #9ca3af;
    font-size: .8rem;
    line-height: 1.5;
}

.empty-finance[b-azs1itlcbk] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-size: .85rem;
}

/* Crayon du contenu principal */
.infoFinance-btn-edit[b-azs1itlcbk] {
    align-self: flex-end;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.infoFinance-btn-edit:hover[b-azs1itlcbk] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Onglet Coordonnées
=================================== */

.infoFinance-contact[b-azs1itlcbk] {
    display: flex;
    flex-direction: column;
    gap: .5rem;

    max-height: 63vh;
    overflow-y: auto;
}

.infoFinance-contact-row[b-azs1itlcbk] {
    display: flex;
    align-items: baseline;
    gap: .8rem;

    padding: .5rem .7rem;

    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.infoFinance-contact-row .infoFinance-field-label[b-azs1itlcbk] {
    flex: 0 0 70px;
    font-size: .6rem;
}

.infoFinance-contact-value[b-azs1itlcbk] {
    min-width: 0;

    font-size: .85rem;
    color: #374151;
    word-break: break-word;
}

.infoFinance-contact-notes[b-azs1itlcbk] {
    white-space: pre-wrap;
}

/* ===================================
   Zone d'édition inline
=================================== */

.infoFinance-edit-zone[b-azs1itlcbk] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoFinance-edit-actions[b-azs1itlcbk] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .3rem;
}

.infoFinance-btn-cancel[b-azs1itlcbk],
.infoFinance-btn-ok[b-azs1itlcbk] {
    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: .2s;
}

.infoFinance-btn-cancel[b-azs1itlcbk] {
    background: #f3f4f6;
    color: #6b7280;
}

.infoFinance-btn-cancel:hover[b-azs1itlcbk] {
    background: #e5e7eb;
}

.infoFinance-btn-ok[b-azs1itlcbk] {
    background: #c92a2a;
    color: #fff;
}

.infoFinance-btn-ok:hover[b-azs1itlcbk] {
    background: #a81f1f;
}

/* ===================================
   Barre d'outils de l'éditeur riche
=================================== */

.infoFinance-editor-toolbar[b-azs1itlcbk] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: .4rem;
    margin-bottom: .4rem;

    background: transparent;
    border: none;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoFinance-editor-toolbar[b-azs1itlcbk]::-webkit-scrollbar {
    display: none;
}

.infoFinance-editor-toolbar button[b-azs1itlcbk],
.infoFinance-tool[b-azs1itlcbk] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 28px;
    height: 28px;
    padding: 0 .3rem;

    background: transparent;
    border: none;
    border-radius: 4px;

    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;

    cursor: pointer;
    transition: .2s;
}

.infoFinance-editor-toolbar button:hover[b-azs1itlcbk],
.infoFinance-tool:hover[b-azs1itlcbk] {
    background: #fdecec;
    color: #c92a2a;
}

.infoFinance-tool-wide[b-azs1itlcbk] {
    min-width: auto;
    padding: 0 .5rem;
    white-space: nowrap;
}

.infoFinance-tool-select[b-azs1itlcbk] {
    flex-shrink: 0;

    height: 28px;
    padding: 0 .3rem;

    font-size: .72rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;

    cursor: pointer;
}

.infoFinance-tool-select:hover[b-azs1itlcbk] {
    border-color: #c92a2a;
}

.infoFinance-toolbar-separator[b-azs1itlcbk] {
    flex-shrink: 0;

    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 .3rem;
}

.infoFinance-color-picker[b-azs1itlcbk] {
    flex-shrink: 0;

    width: 28px;
    height: 28px;
    padding: 2px;

    background: transparent;
    border: none;

    cursor: pointer;
}

.infoFinance-edit-richtext[b-azs1itlcbk] {
    width: 100%;
    padding: .5rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;
    line-height: 1.5;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    overflow-y: auto;

    min-height: 10vh;
    max-height: 40vh;

    box-sizing: border-box;
}

.infoFinance-edit-richtext:focus[b-azs1itlcbk] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.infoFinance-edit-richtext ul[b-azs1itlcbk],
.infoFinance-edit-richtext ol[b-azs1itlcbk] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}


/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - zone principale sur toute la largeur
   - volet latéral = tiroir fixe qui glisse (transform), comme
     le volet gauche de la page : même durée, même courbe
   - collé sous la bande des catégories, coins arrondis seulement
     en bas ; même haut / même bas que le volet gauche, via les
     variables --content-top, --content-bottom, --drawer-inset
     (définies sur .finance-content dans Finance.razor.css)
   - Statistiques : carte complète fixée en bas du volet (sticky)
   - ouverture pilotée par la classe .open (paramètre SideOpen)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .infoFinance-details[b-azs1itlcbk] {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: stretch;
        height: 100%;
        overflow: hidden;
        gap: 0;
    }

    .infoFinance-details-main[b-azs1itlcbk] {
        flex: 1 1 100%;
        max-width: none;
        width: auto;
        max-height: 100%;
        min-height: 0;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        padding: .35rem;
        box-sizing: border-box;
    }

    /* ---------- Volet des informations (bande droite) ----------
       Toujours rendu, glisse hors écran quand il est fermé. */
    .infoFinance-details-side[b-azs1itlcbk] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 30px) + var(--drawer-inset, 3px));
        right: 0;                                   /* collé au bord droit */
        left: auto;

        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        height: auto;
        margin: 0;
        padding: .6rem;
        box-sizing: border-box;

        z-index: 1500;
        background: #fff;
        border-radius: 0 0 0 14px;
        overflow-y: auto;

        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .infoFinance-details-side.open[b-azs1itlcbk] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Rien n'est coupé : les cartes gardent leur hauteur complète */
    .infoFinance-side-top[b-azs1itlcbk],
    .infoFinance-side-middle[b-azs1itlcbk],
    .infoFinance-side-consultants[b-azs1itlcbk],
    .infoFinance-side-bottom[b-azs1itlcbk] {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 0;
        padding: .45rem;
        gap: .25rem;
        border-radius: 10px;
    }

    /* Statistiques : carte complète, fixée en bas du volet avec une marge */
    .infoFinance-side-bottom[b-azs1itlcbk] {
        position: sticky;
        bottom: .6rem;               /* même marge que le padding du volet */
        z-index: 5;

        margin-top: auto;            /* poussé en bas si le contenu est court */

        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;

        /* 1) ombre légère au-dessus ; 2) bande blanche sous la carte
           pour masquer le contenu qui défile dans la marge du bas */
        box-shadow:
            0 -6px 8px -6px rgba(0, 0, 0, .15),
            0 .6rem 0 0 #fff;
    }

    .infoFinance-field-value[b-azs1itlcbk],
    .infoFinance-identity-name[b-azs1itlcbk],
    .infoFinance-identity-type[b-azs1itlcbk],
    .infoFinance-consultant-name[b-azs1itlcbk] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    /* ---------- Onglets ---------- */
    .infoFinance-tabs[b-azs1itlcbk] {
        position: static;
        padding: .2rem 0 .3rem;
        margin-top: 0;
        gap: .3rem;
    }

    .infoFinance-tabs-items[b-azs1itlcbk] { gap: .15rem; }

    .infoFinance-tab[b-azs1itlcbk] {
        padding: .12rem .45rem;
        font-size: .6rem;
        border-radius: 14px;
    }

    .infoFinance-tabs-org[b-azs1itlcbk] { gap: .3rem; font-size: .7rem; }

    /* ---------- Contenu : hauteur flexible ---------- */
    .infoFinance-tab-content[b-azs1itlcbk] {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: .6rem;
        gap: .4rem;
        border-radius: 10px;
    }

    .infoFinance-tab-description[b-azs1itlcbk] {
        max-height: none;
        overflow: visible;
        font-size: .82rem;
        line-height: 1.5;
        padding-right: .1rem;
    }

    .infoFinance-tab-description[b-azs1itlcbk]  h1 { font-size: 1.05rem; margin: .35rem 0; }
    .infoFinance-tab-description[b-azs1itlcbk]  h2 { font-size: .95rem; margin: .3rem 0; }
    .infoFinance-tab-description[b-azs1itlcbk]  h3 { font-size: .88rem; margin: .25rem 0; }
    .infoFinance-tab-description[b-azs1itlcbk]  p,
    .infoFinance-tab-description[b-azs1itlcbk]  li { font-size: .82rem; line-height: 1.5; margin: .2rem 0; }
    .infoFinance-tab-description[b-azs1itlcbk]  img { max-width: 100%; height: auto; }
    .infoFinance-tab-description[b-azs1itlcbk]  table { font-size: .75rem; }

    .infoFinance-placeholder[b-azs1itlcbk] { font-size: .75rem; margin: .2rem 0; }

    .infoFinance-contact[b-azs1itlcbk] { gap: .35rem; max-height: none; overflow: visible; }
    .infoFinance-contact-row[b-azs1itlcbk] { padding: .4rem .6rem; gap: .6rem; border-radius: 8px; }
    .infoFinance-contact-row .infoFinance-field-label[b-azs1itlcbk] { flex: 0 0 58px; font-size: .56rem; }
    .infoFinance-contact-value[b-azs1itlcbk] { font-size: .82rem; }

    .infoFinance-btn-edit[b-azs1itlcbk],
    .infoFinance-side-edit-btn[b-azs1itlcbk] { width: 24px; height: 24px; font-size: .6rem; }

    /* ---------- Cartes du volet ---------- */
    .infoFinance-identity[b-azs1itlcbk] { gap: .4rem; }
    .infoFinance-identity-avatar[b-azs1itlcbk] { width: 34px; height: 34px; font-size: .65rem; }
    .infoFinance-identity-info[b-azs1itlcbk] { margin-top: .1rem; }
    .infoFinance-identity-name[b-azs1itlcbk] { font-size: .72rem; }
    .infoFinance-identity-type[b-azs1itlcbk] { font-size: .58rem; }

    .infoFinance-side-title[b-azs1itlcbk] { font-size: .72rem; }
    .infoFinance-side-details[b-azs1itlcbk] { gap: .25rem; margin-top: .2rem; padding-top: .3rem; }
    .infoFinance-side-details--plain[b-azs1itlcbk] { margin-top: 0; padding-top: 0; }
    .infoFinance-side-field[b-azs1itlcbk] { gap: .3rem; }
    .infoFinance-side-field > i[b-azs1itlcbk] { width: .75rem; font-size: .58rem; }
    .infoFinance-field-label[b-azs1itlcbk] { font-size: .46rem; }
    .infoFinance-field-value[b-azs1itlcbk] { font-size: .6rem; }
    .infoFinance-stat-value[b-azs1itlcbk] { font-size: .62rem; }
    .infoFinance-side-notes[b-azs1itlcbk] { font-size: .6rem; line-height: 1.35; }

    .infoFinance-consultant-name[b-azs1itlcbk] { font-size: .66rem; }
    .infoFinance-consultant-title[b-azs1itlcbk] { font-size: .55rem; }
    .infoFinance-consultant-line[b-azs1itlcbk] { font-size: .55rem; }
    .infoFinance-consultant-icon[b-azs1itlcbk] { font-size: .62rem; }

    /* ---------- Édition ---------- */
    .infoFinance-edit-zone[b-azs1itlcbk] { gap: .35rem; }
    .infoFinance-btn-cancel[b-azs1itlcbk],
    .infoFinance-btn-ok[b-azs1itlcbk] { padding: .3rem .8rem; font-size: .7rem; }

    .infoFinance-editor-toolbar[b-azs1itlcbk] { padding: .2rem; gap: .2rem; margin-bottom: .3rem; }
    .infoFinance-editor-toolbar button[b-azs1itlcbk],
    .infoFinance-tool[b-azs1itlcbk] { min-width: 24px; height: 24px; padding: 0 .2rem; font-size: .7rem; }
    .infoFinance-editor-toolbar svg[b-azs1itlcbk] { width: 12px; height: 12px; }
    .infoFinance-tool-select[b-azs1itlcbk] { height: 24px; font-size: .65rem; padding: 0 .2rem; }
    .infoFinance-color-picker[b-azs1itlcbk] { width: 24px; height: 24px; }
    .infoFinance-toolbar-separator[b-azs1itlcbk] { height: 14px; margin: 0 .15rem; }
    .infoFinance-edit-richtext[b-azs1itlcbk] { font-size: .82rem; padding: .4rem; min-height: 8vh; max-height: 30vh; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    /* top / bottom viennent des variables de .finance-content (148px / 26px) */
    .infoFinance-details-side[b-azs1itlcbk] {
        width: var(--drawer-w, 55vw);
        max-width: var(--drawer-w, 55vw);
    }

    .infoFinance-tab[b-azs1itlcbk] { font-size: .62rem; padding: .2rem .5rem; }
    .infoFinance-tab-content[b-azs1itlcbk] { padding: .4rem; }

    .infoFinance-tab-description[b-azs1itlcbk],
    .infoFinance-tab-description[b-azs1itlcbk]  p,
    .infoFinance-tab-description[b-azs1itlcbk]  li,
    .infoFinance-contact-value[b-azs1itlcbk] { font-size: .72rem; }

    .infoFinance-identity-avatar[b-azs1itlcbk] { width: 28px; height: 28px; }
    .infoFinance-identity-name[b-azs1itlcbk] { font-size: .62rem; }
    .infoFinance-field-value[b-azs1itlcbk],
    .infoFinance-stat-value[b-azs1itlcbk] { font-size: .55rem; }
    .infoFinance-field-label[b-azs1itlcbk] { font-size: .42rem; }
    .infoFinance-side-title[b-azs1itlcbk] { font-size: .62rem; }
}
/* /Components/Pages/Assistance/Immigration/Immigration.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.immigration-page[b-oczroe3bu1] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}


/* ==========================================
   CATÉGORIES FIXES HAUT (bureau)
========================================== */

.immigration-header[b-oczroe3bu1] {
    position: fixed;
    top: 80px;
    left: 250px;
    right: 70px;
    height: 140px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 12px;

    z-index: 1000;
    overflow: hidden;
}


/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.immigration-layout[b-oczroe3bu1] {
    position: fixed;

    top: 220px;
    bottom: 20px;
    left: 240px;
    right: 30px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}


/* ==========================================
   COLONNE GAUCHE
========================================== */

.immigration-left[b-oczroe3bu1] {
    flex: 0 0 22%;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;

    padding: .3rem;
}


/* ==========================================
   COLONNE DROITE
========================================== */

.immigration-right[b-oczroe3bu1] {
    flex: 1;
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
}

.empty-procedure[b-oczroe3bu1] {
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #6b7280;
}

/* Languettes et fond cliquable : cachés sur ordinateur */
.immigration-layout .drawer-tab[b-oczroe3bu1],
.immigration-layout .drawer-backdrop[b-oczroe3bu1] {
    display: none;
}


/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - volets et languettes glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors des volets les referme (fond cliquable)
   - volets collés sous la bande des catégories, coins arrondis
     seulement en bas
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des catégories : pleine largeur, sans coins arrondis */
    html body .immigration-header[b-oczroe3bu1] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .immigration-layout[b-oczroe3bu1] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit (utilisé par InfoImmigration) */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .immigration-layout .immigration-right[b-oczroe3bu1] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* InfoImmigration remplit la colonne droite */
    .immigration-right > .infoImmigration-details[b-oczroe3bu1] {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Clic en dehors des volets : les referme (sous les volets et les languettes) */
    html body .immigration-layout .drawer-backdrop[b-oczroe3bu1] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .immigration-layout .immigration-left[b-oczroe3bu1] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        min-width: 0 !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .immigration-layout.left-open .immigration-left[b-oczroe3bu1] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .immigration-layout .drawer-tab[b-oczroe3bu1] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .immigration-layout .drawer-tab:hover[b-oczroe3bu1] {
        background: rgba(225, 110, 110, .98);
    }

    .immigration-layout .drawer-tab-left[b-oczroe3bu1] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .immigration-layout.left-open .drawer-tab-left[b-oczroe3bu1] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .immigration-layout .drawer-tab-right[b-oczroe3bu1] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .immigration-layout.right-open .drawer-tab-right[b-oczroe3bu1] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}


/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .immigration-header[b-oczroe3bu1] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .immigration-layout[b-oczroe3bu1] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --drawer-w: 55vw;
        --left-w: 55vw;
    }

    .immigration-layout .drawer-tab[b-oczroe3bu1] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Assistance/Immigration/InfoImmigration.razor.rz.scp.css */
/* ===================================
   Layout principal (78% / 20%)
=================================== */

.infoImmigration-details[b-vxcjzl9zwh] {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    overflow: visible;
}

.infoImmigration-details-main[b-vxcjzl9zwh] {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;
}

/* ===================================
   Colonne latérale (20%) : 4 cadres
=================================== */

.infoImmigration-details-side[b-vxcjzl9zwh] {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 0;

    position: sticky;
    top: 0;
    align-self: flex-start;

    display: flex;
    flex-direction: column;
    gap: .5rem;

    /* = hauteur de .immigration-right : (100vh - 250px - 10px) x 98 % */
    height: calc((100vh - 260px) * 0.97);
    min-height: 0;
}

/* Style commun aux 4 cadres */
.infoImmigration-side-top[b-vxcjzl9zwh],
.infoImmigration-side-middle[b-vxcjzl9zwh],
.infoImmigration-side-consultants[b-vxcjzl9zwh],
.infoImmigration-side-bottom[b-vxcjzl9zwh] {
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoImmigration-side-top[b-vxcjzl9zwh]::-webkit-scrollbar,
.infoImmigration-side-middle[b-vxcjzl9zwh]::-webkit-scrollbar,
.infoImmigration-side-consultants[b-vxcjzl9zwh]::-webkit-scrollbar,
.infoImmigration-side-bottom[b-vxcjzl9zwh]::-webkit-scrollbar {
    display: none;
}

/* Consultants : hauteur selon le contenu, rétrécit (avec défilement)
   si la colonne manque de place */
.infoImmigration-side-consultants[b-vxcjzl9zwh] {
    flex: 0 1 auto;
    min-height: 90px;
}

/* Statistiques : collé au fond de la colonne */
.infoImmigration-side-bottom[b-vxcjzl9zwh] {
    min-height: 60px;
    margin-top: auto;
}

/* ===================================
   Cadre 1 : identité (avatar à droite)
=================================== */

.infoImmigration-identity[b-vxcjzl9zwh] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.infoImmigration-identity-avatar[b-vxcjzl9zwh] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.infoImmigration-identity-avatar img[b-vxcjzl9zwh] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.infoImmigration-identity-info[b-vxcjzl9zwh] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    margin-top: 1rem;
}

.infoImmigration-identity-name[b-vxcjzl9zwh] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoImmigration-identity-type[b-vxcjzl9zwh],
.infoImmigration-identity-pays[b-vxcjzl9zwh] {
    font-size: .7rem;
    color: #6b7280;
}

/* ===================================
   Champs des cadres
=================================== */

.infoImmigration-side-title[b-vxcjzl9zwh] {
    display: block;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;
}

.infoImmigration-side-details[b-vxcjzl9zwh] {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    margin-top: .3rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

/* Pas de filet ni de marge en haut quand la liste est seule dans la carte */
.infoImmigration-side-details--plain[b-vxcjzl9zwh] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.infoImmigration-side-field[b-vxcjzl9zwh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.infoImmigration-side-field > i[b-vxcjzl9zwh] {
    flex-shrink: 0;
    width: .9rem;
    text-align: center;
    font-size: .7rem;
    color: #9ca3af;
}

.infoImmigration-field-label[b-vxcjzl9zwh] {
    flex-shrink: 0;

    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.infoImmigration-field-value[b-vxcjzl9zwh] {
    font-size: .68rem;
    color: #374151;
    text-align: right;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infoImmigration-field-value--wrap[b-vxcjzl9zwh] {
    white-space: normal;
    word-break: break-word;
}

.infoImmigration-field-link[b-vxcjzl9zwh] {
    color: #c92a2a;
    text-decoration: none;
}

.infoImmigration-field-link:hover[b-vxcjzl9zwh] {
    text-decoration: underline;
}

.infoImmigration-side-notes[b-vxcjzl9zwh] {
    margin: 0;

    font-size: .7rem;
    line-height: 1.5;
    color: #374151;
    white-space: pre-wrap;
}

/* Cadre 2 : site web */
.infoImmigration-side-links[b-vxcjzl9zwh] {
    margin: .3rem 0 0;
    padding-left: 1rem;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    font-size: .72rem;
    color: #374151;
}

.infoImmigration-side-links a[b-vxcjzl9zwh] {
    color: #c92a2a;
    text-decoration: none;
    word-break: break-word;
}

.infoImmigration-side-links a:hover[b-vxcjzl9zwh] {
    text-decoration: underline;
}

/* Cadre 4 : statistiques */
.infoImmigration-stat-value[b-vxcjzl9zwh] {
    font-size: .72rem;
    font-weight: 700;
    color: #111827;
    text-align: right;
}

/* ===================================
   Cadre 3 : consultants
=================================== */

.infoImmigration-consultant-list[b-vxcjzl9zwh] {
    margin: .3rem 0 0;
    padding: .5rem 0 0;
    list-style: none;
    border-top: 1px solid #e5e7eb;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoImmigration-consultant[b-vxcjzl9zwh] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.infoImmigration-consultant-avatar[b-vxcjzl9zwh] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-size: .7rem;
    font-weight: 600;
}

.infoImmigration-consultant-avatar img[b-vxcjzl9zwh] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.infoImmigration-consultant-info[b-vxcjzl9zwh] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Nom + icônes sur la même ligne */
.infoImmigration-consultant-head[b-vxcjzl9zwh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    min-width: 0;
}

.infoImmigration-consultant-head .infoImmigration-consultant-name[b-vxcjzl9zwh] {
    flex: 1;
    min-width: 0;
}

.infoImmigration-consultant-name[b-vxcjzl9zwh] {
    font-size: .74rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoImmigration-consultant-icons[b-vxcjzl9zwh] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.infoImmigration-consultant-icon[b-vxcjzl9zwh] {
    font-size: .64rem;
    color: #9ca3af;
    text-decoration: none;
    transition: color .2s;
}

.infoImmigration-consultant-icon:hover[b-vxcjzl9zwh],
.infoImmigration-consultant:hover .infoImmigration-consultant-icon[b-vxcjzl9zwh] {
    color: #c92a2a;
}

.infoImmigration-consultant-title[b-vxcjzl9zwh] {
    font-size: .64rem;
    color: #6b7280;
}

.infoImmigration-consultant-line[b-vxcjzl9zwh] {
    font-size: .64rem;
    word-break: break-all;
}

/* Coordonnées : cachées, affichées au survol */
.infoImmigration-consultant-details[b-vxcjzl9zwh] {
    display: flex;
    flex-direction: column;

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease;
}

.infoImmigration-consultant:hover .infoImmigration-consultant-details[b-vxcjzl9zwh],
.infoImmigration-consultant:focus-within .infoImmigration-consultant-details[b-vxcjzl9zwh] {
    max-height: 4rem;
    opacity: 1;
    margin-top: .15rem;
}

/* Écrans tactiles (pas de survol) : toujours visibles */
@media (hover: none) {
    .infoImmigration-consultant-details[b-vxcjzl9zwh] {
        max-height: 4rem;
        opacity: 1;
        margin-top: .15rem;
    }
}

/* ===================================
   Crayon des cadres latéraux (bas à droite)
=================================== */

.infoImmigration-side-edit-btn[b-vxcjzl9zwh] {
    align-self: flex-end;
    margin-top: auto;
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.infoImmigration-side-edit-btn:hover[b-vxcjzl9zwh] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Onglets (pilules) + image/nom à droite
=================================== */

.infoImmigration-tabs[b-vxcjzl9zwh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;

    margin-top: .1rem;

    position: sticky;
    top: 0;
    z-index: 10;

    background: #fff;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.infoImmigration-tabs-items[b-vxcjzl9zwh] {
    display: flex;
    gap: .6rem;

    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoImmigration-tabs-items[b-vxcjzl9zwh]::-webkit-scrollbar {
    display: none;
}

.infoImmigration-tabs-org[b-vxcjzl9zwh] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;

    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.infoImmigration-logo[b-vxcjzl9zwh] {
    display: block;
    height: 28px;
    max-width: 100px;
    object-fit: contain;
}

.infoImmigration-tab[b-vxcjzl9zwh] {
    flex-shrink: 0;
    white-space: nowrap;

    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;
    color: #b9bdc4;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;

    cursor: pointer;
    transition: .2s;
}

.infoImmigration-tab:hover[b-vxcjzl9zwh] {
    background: #fdecec;
    color: #c92a2a;
}

.infoImmigration-tab.active[b-vxcjzl9zwh] {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
}

/* ===================================
   Cadre gris du contenu
=================================== */

.infoImmigration-tab-content[b-vxcjzl9zwh] {
    padding: .8rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoImmigration-tab-description[b-vxcjzl9zwh] {
    margin: 0;
    padding-right: .3rem;

    font-size: .9rem;
    line-height: 1.6;
    color: #374151;

    max-height: 63vh;
    overflow-y: auto;
}

.infoImmigration-tab-description ul[b-vxcjzl9zwh],
.infoImmigration-tab-description ol[b-vxcjzl9zwh] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

.infoImmigration-placeholder[b-vxcjzl9zwh] {
    margin: .3rem 0;

    color: #9ca3af;
    font-size: .8rem;
    line-height: 1.5;
}

.empty-procedure[b-vxcjzl9zwh] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* Crayon du contenu principal :
   toujours en bas à droite du cadre, quelle que soit la longueur
   du contenu de l'onglet (sticky = reste visible si le contenu défile) */
.infoImmigration-btn-edit[b-vxcjzl9zwh] {
    align-self: flex-end;
    margin-top: auto;
    position: sticky;
    bottom: .2rem;
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.infoImmigration-btn-edit:hover[b-vxcjzl9zwh] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Onglet Coordonnées
=================================== */

.infoImmigration-contact[b-vxcjzl9zwh] {
    display: flex;
    flex-direction: column;
    gap: .5rem;

    max-height: 63vh;
    overflow-y: auto;
}

.infoImmigration-contact-row[b-vxcjzl9zwh] {
    display: flex;
    align-items: baseline;
    gap: .8rem;

    padding: .5rem .7rem;

    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.infoImmigration-contact-row .infoImmigration-field-label[b-vxcjzl9zwh] {
    flex: 0 0 70px;
    font-size: .6rem;
}

.infoImmigration-contact-value[b-vxcjzl9zwh] {
    min-width: 0;

    font-size: .85rem;
    color: #374151;
    word-break: break-word;
}

.infoImmigration-contact-notes[b-vxcjzl9zwh] {
    white-space: pre-wrap;
}

/* ===================================
   Zone d'édition inline
=================================== */

.infoImmigration-edit-zone[b-vxcjzl9zwh] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoImmigration-edit-actions[b-vxcjzl9zwh] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .3rem;
}

.infoImmigration-btn-cancel[b-vxcjzl9zwh],
.infoImmigration-btn-ok[b-vxcjzl9zwh] {
    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: .2s;
}

.infoImmigration-btn-cancel[b-vxcjzl9zwh] {
    background: #f3f4f6;
    color: #6b7280;
}

.infoImmigration-btn-cancel:hover[b-vxcjzl9zwh] {
    background: #e5e7eb;
}

.infoImmigration-btn-ok[b-vxcjzl9zwh] {
    background: #c92a2a;
    color: #fff;
}

.infoImmigration-btn-ok:hover[b-vxcjzl9zwh] {
    background: #a81f1f;
}

/* ===================================
   Barre d'outils de l'éditeur riche
=================================== */

.infoImmigration-editor-toolbar[b-vxcjzl9zwh] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: .4rem;
    margin-bottom: .4rem;

    background: transparent;
    border: none;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoImmigration-editor-toolbar[b-vxcjzl9zwh]::-webkit-scrollbar {
    display: none;
}

.infoImmigration-editor-toolbar button[b-vxcjzl9zwh],
.infoImmigration-tool[b-vxcjzl9zwh] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 28px;
    height: 28px;
    padding: 0 .3rem;

    background: transparent;
    border: none;
    border-radius: 4px;

    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;

    cursor: pointer;
    transition: .2s;
}

.infoImmigration-editor-toolbar button:hover[b-vxcjzl9zwh],
.infoImmigration-tool:hover[b-vxcjzl9zwh] {
    background: #fdecec;
    color: #c92a2a;
}

.infoImmigration-tool-wide[b-vxcjzl9zwh] {
    min-width: auto;
    padding: 0 .5rem;
    white-space: nowrap;
}

.infoImmigration-tool-select[b-vxcjzl9zwh] {
    flex-shrink: 0;

    height: 28px;
    padding: 0 .3rem;

    font-size: .72rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;

    cursor: pointer;
}

.infoImmigration-tool-select:hover[b-vxcjzl9zwh] {
    border-color: #c92a2a;
}

.infoImmigration-toolbar-separator[b-vxcjzl9zwh] {
    flex-shrink: 0;

    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 .3rem;
}

.infoImmigration-color-picker[b-vxcjzl9zwh] {
    flex-shrink: 0;

    width: 28px;
    height: 28px;
    padding: 2px;

    background: transparent;
    border: none;

    cursor: pointer;
}

.infoImmigration-edit-richtext[b-vxcjzl9zwh] {
    width: 100%;
    padding: .5rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;
    line-height: 1.5;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    overflow-y: auto;

    min-height: 10vh;
    max-height: 40vh;

    box-sizing: border-box;
}

.infoImmigration-edit-richtext:focus[b-vxcjzl9zwh] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.infoImmigration-edit-richtext ul[b-vxcjzl9zwh],
.infoImmigration-edit-richtext ol[b-vxcjzl9zwh] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}


/* ==========================================================
   MOBILE + PAYSAGE COMPACT  (bloc unique)
   - zone principale sur toute la largeur
   - volet latéral = tiroir fixe qui glisse (transform), comme
     le volet gauche de la page : même durée, même courbe
   - collé sous la bande des catégories, coins arrondis seulement
     en bas ; même haut / même bas que le volet gauche, via les
     variables --content-top, --content-bottom, --drawer-inset
     (définies sur .immigration-layout dans Immigration.razor.css)
   - Statistiques : carte complète fixée en bas du volet (sticky)
   - ouverture pilotée par la classe .open (paramètre SideOpen)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .infoImmigration-details[b-vxcjzl9zwh] {
        flex-direction: row;
        align-items: stretch;
        height: 100%;
        overflow: hidden;
        gap: 0;
    }

    .infoImmigration-details-main[b-vxcjzl9zwh] {
        flex: 1 1 100%;
        max-width: none;
        width: auto;
        max-height: 100%;
        min-height: 0;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: .35rem;
        box-sizing: border-box;
    }

    /* ---------- Volet des informations (bande droite) ----------
       Toujours rendu, glisse hors écran quand il est fermé. */
    .infoImmigration-details-side[b-vxcjzl9zwh] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 30px) + var(--drawer-inset, 3px));
        right: 0;                                   /* collé au bord droit */
        left: auto;

        display: flex;
        flex-direction: column;
        gap: .5rem;

        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        height: auto;
        margin: 0;
        padding: .6rem;
        box-sizing: border-box;
        align-self: auto;

        z-index: 1500;
        background: #fff;
        border-radius: 0 0 0 14px;
        overflow-y: auto;

        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .infoImmigration-details-side.open[b-vxcjzl9zwh] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Rien n'est coupé : les cartes gardent leur hauteur complète */
    .infoImmigration-side-top[b-vxcjzl9zwh],
    .infoImmigration-side-middle[b-vxcjzl9zwh],
    .infoImmigration-side-consultants[b-vxcjzl9zwh],
    .infoImmigration-side-bottom[b-vxcjzl9zwh] {
        flex: 0 0 auto;
        overflow: visible;
        padding: .45rem;
        gap: .25rem;
        border-radius: 10px;
    }

    .infoImmigration-side-consultants[b-vxcjzl9zwh] {
        min-height: 0;
        margin-bottom: .3rem;
    }

    /* Statistiques : carte complète, fixée en bas du volet avec une marge */
    .infoImmigration-side-bottom[b-vxcjzl9zwh] {
        position: sticky;
        bottom: .6rem;               /* même marge que le padding du volet */
        z-index: 5;

        margin-top: auto;            /* poussé en bas si le contenu est court */
        min-height: 0;

        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;

        /* 1) ombre légère au-dessus ; 2) bande blanche sous la carte
           pour masquer le contenu qui défile dans la marge du bas */
        box-shadow:
            0 -6px 8px -6px rgba(0, 0, 0, .15),
            0 .6rem 0 0 #fff;
    }

    .infoImmigration-field-value[b-vxcjzl9zwh],
    .infoImmigration-identity-name[b-vxcjzl9zwh],
    .infoImmigration-identity-type[b-vxcjzl9zwh],
    .infoImmigration-consultant-name[b-vxcjzl9zwh] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    /* ---------- Onglets ---------- */
    .infoImmigration-tabs[b-vxcjzl9zwh] {
        position: static;
        padding: .15rem 0 .25rem;
        margin-top: 0;
        gap: .3rem;
    }

    .infoImmigration-tabs-items[b-vxcjzl9zwh] { gap: .3rem; }

    .infoImmigration-tab[b-vxcjzl9zwh] {
        padding: .25rem .6rem;
        font-size: .6rem;
        border-radius: 12px;
    }

    .infoImmigration-tabs-org[b-vxcjzl9zwh] { gap: .3rem; font-size: .6rem; }

    /* ---------- Contenu : seul élément qui défile ---------- */
    .infoImmigration-tab-content[b-vxcjzl9zwh] {
        flex: 0 1 auto;             /* hauteur = contenu, rétrécit si trop long */
        min-height: 0;
        overflow-y: auto;
        padding: .5rem;
        gap: .35rem;
        border-radius: 9px;
    }

    .infoImmigration-tab-description[b-vxcjzl9zwh] {
        max-height: none;
        overflow: visible;
        font-size: .72rem;
        line-height: 1.45;
        padding-right: .1rem;
    }

    .infoImmigration-tab-description[b-vxcjzl9zwh]  h1 { font-size: .95rem; margin: .3rem 0; }
    .infoImmigration-tab-description[b-vxcjzl9zwh]  h2 { font-size: .85rem; margin: .25rem 0; }
    .infoImmigration-tab-description[b-vxcjzl9zwh]  h3 { font-size: .78rem; margin: .2rem 0; }
    .infoImmigration-tab-description[b-vxcjzl9zwh]  p,
    .infoImmigration-tab-description[b-vxcjzl9zwh]  li { font-size: .72rem; line-height: 1.45; margin: .15rem 0; }
    .infoImmigration-tab-description[b-vxcjzl9zwh]  img { max-width: 100%; height: auto; }
    .infoImmigration-tab-description[b-vxcjzl9zwh]  table { font-size: .65rem; }

    .infoImmigration-placeholder[b-vxcjzl9zwh] { font-size: .65rem; margin: .15rem 0; }

    .infoImmigration-contact[b-vxcjzl9zwh] { gap: .3rem; max-height: none; overflow: visible; }
    .infoImmigration-contact-row[b-vxcjzl9zwh] { padding: .35rem .5rem; gap: .5rem; border-radius: 8px; }
    .infoImmigration-contact-row .infoImmigration-field-label[b-vxcjzl9zwh] { flex: 0 0 52px; font-size: .5rem; }
    .infoImmigration-contact-value[b-vxcjzl9zwh] { font-size: .72rem; }

    .infoImmigration-btn-edit[b-vxcjzl9zwh],
    .infoImmigration-side-edit-btn[b-vxcjzl9zwh] { width: 24px; height: 24px; font-size: .6rem; }

    /* ---------- Cartes du volet ---------- */
    .infoImmigration-identity[b-vxcjzl9zwh] { gap: .4rem; }
    .infoImmigration-identity-avatar[b-vxcjzl9zwh] { width: 34px; height: 34px; font-size: .65rem; }
    .infoImmigration-identity-info[b-vxcjzl9zwh] { margin-top: .1rem; }
    .infoImmigration-identity-name[b-vxcjzl9zwh] { font-size: .72rem; }
    .infoImmigration-identity-type[b-vxcjzl9zwh] { font-size: .58rem; }

    .infoImmigration-side-title[b-vxcjzl9zwh] { font-size: .72rem; }
    .infoImmigration-side-details[b-vxcjzl9zwh] { gap: .25rem; margin-top: .2rem; padding-top: .3rem; }
    .infoImmigration-side-details--plain[b-vxcjzl9zwh] { margin-top: 0; padding-top: 0; }
    .infoImmigration-side-field[b-vxcjzl9zwh] { gap: .3rem; }
    .infoImmigration-side-field > i[b-vxcjzl9zwh] { width: .75rem; font-size: .58rem; }
    .infoImmigration-field-label[b-vxcjzl9zwh] { font-size: .46rem; }
    .infoImmigration-field-value[b-vxcjzl9zwh] { font-size: .6rem; }
    .infoImmigration-stat-value[b-vxcjzl9zwh] { font-size: .62rem; }
    .infoImmigration-side-notes[b-vxcjzl9zwh] { font-size: .6rem; line-height: 1.35; }

    /* Consultants */
    .infoImmigration-consultant[b-vxcjzl9zwh] { gap: .4rem; }
    .infoImmigration-consultant-avatar[b-vxcjzl9zwh] {
        width: 26px;
        height: 26px;
        min-width: 26px;
        flex: 0 0 26px;
        font-size: .55rem;
    }
    .infoImmigration-consultant-name[b-vxcjzl9zwh] { font-size: .66rem; }
    .infoImmigration-consultant-title[b-vxcjzl9zwh] { font-size: .55rem; }
    .infoImmigration-consultant-line[b-vxcjzl9zwh] { font-size: .55rem; }
    .infoImmigration-consultant-icon[b-vxcjzl9zwh] { font-size: .62rem; }
    .infoImmigration-consultant-icons[b-vxcjzl9zwh] { gap: .3rem; }
    .infoImmigration-consultant-list[b-vxcjzl9zwh] { gap: .4rem; padding-top: .3rem; }

    /* ---------- Édition ---------- */
    .infoImmigration-edit-zone[b-vxcjzl9zwh] { gap: .35rem; }
    .infoImmigration-btn-cancel[b-vxcjzl9zwh],
    .infoImmigration-btn-ok[b-vxcjzl9zwh] { padding: .25rem .7rem; font-size: .65rem; }

    .infoImmigration-editor-toolbar[b-vxcjzl9zwh] { padding: .2rem; gap: .2rem; margin-bottom: .3rem; }
    .infoImmigration-editor-toolbar button[b-vxcjzl9zwh],
    .infoImmigration-tool[b-vxcjzl9zwh] { min-width: 22px; height: 22px; padding: 0 .2rem; font-size: .65rem; }
    .infoImmigration-editor-toolbar svg[b-vxcjzl9zwh] { width: 11px; height: 11px; }
    .infoImmigration-tool-select[b-vxcjzl9zwh] { height: 22px; font-size: .6rem; padding: 0 .2rem; }
    .infoImmigration-color-picker[b-vxcjzl9zwh] { width: 22px; height: 22px; }
    .infoImmigration-toolbar-separator[b-vxcjzl9zwh] { height: 14px; margin: 0 .15rem; }
    .infoImmigration-edit-richtext[b-vxcjzl9zwh] { font-size: .72rem; padding: .35rem; min-height: 8vh; max-height: 30vh; }
}


/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    /* top / bottom viennent des variables de .immigration-layout (148px / 26px) */
    .infoImmigration-details-side[b-vxcjzl9zwh] {
        width: var(--drawer-w, 55vw);
        max-width: var(--drawer-w, 55vw);
    }

    .infoImmigration-tab[b-vxcjzl9zwh] { font-size: .55rem; padding: .18rem .45rem; }
    .infoImmigration-tab-content[b-vxcjzl9zwh] { padding: .35rem; }

    .infoImmigration-tab-description[b-vxcjzl9zwh],
    .infoImmigration-tab-description[b-vxcjzl9zwh]  p,
    .infoImmigration-tab-description[b-vxcjzl9zwh]  li,
    .infoImmigration-contact-value[b-vxcjzl9zwh] { font-size: .65rem; }

    .infoImmigration-identity-avatar[b-vxcjzl9zwh] { width: 32px; height: 32px; }
    .infoImmigration-identity-name[b-vxcjzl9zwh] { font-size: .75rem; }
    .infoImmigration-field-value[b-vxcjzl9zwh],
    .infoImmigration-stat-value[b-vxcjzl9zwh] { font-size: .65rem; }
    .infoImmigration-field-label[b-vxcjzl9zwh] { font-size: .5rem; }
    .infoImmigration-side-title[b-vxcjzl9zwh] { font-size: .75rem; }
}
/* /Components/Pages/Assistance/Juridique/InfoJuridique.razor.rz.scp.css */
/* ===================================
   Layout principal (78% / 20%)
=================================== */

.juridique-details-layout[b-2cihyeszcf] {
    display: flex;
    align-items: stretch;
    gap: .8rem;

    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Le contenu principal défile seul ; les onglets (sticky) restent en haut */
.juridique-details-main[b-2cihyeszcf] {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;
    min-height: 0;

    overflow-y: auto;
    scrollbar-width: thin;
}

/* ===================================
   Colonne latérale (20%) : 4 cartes
=================================== */

.juridique-details-side[b-2cihyeszcf] {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Style commun aux 4 cartes */
.juridique-details-side-top[b-2cihyeszcf],
.juridique-details-side-middle[b-2cihyeszcf],
.juridique-details-side-consultants[b-2cihyeszcf],
.juridique-details-side-bottom[b-2cihyeszcf] {
    box-sizing: border-box;
    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.juridique-details-side-top[b-2cihyeszcf]::-webkit-scrollbar,
.juridique-details-side-middle[b-2cihyeszcf]::-webkit-scrollbar,
.juridique-details-side-consultants[b-2cihyeszcf]::-webkit-scrollbar,
.juridique-details-side-bottom[b-2cihyeszcf]::-webkit-scrollbar {
    display: none;
}

/* Cartes du haut : hauteur selon le contenu, rétrécissent (avec défilement)
   si la colonne manque de place */
.juridique-details-side-top[b-2cihyeszcf],
.juridique-details-side-middle[b-2cihyeszcf] {
    flex: 0 1 auto;
    min-height: 60px;
}

.juridique-details-side-consultants[b-2cihyeszcf] {
    flex: 0 1 auto;
    min-height: 90px;
}

/* Statistiques : jamais écrasée, toujours collée au fond de la colonne */
.juridique-details-side-bottom[b-2cihyeszcf] {
    flex: 0 0 auto;
    min-height: 60px;
    margin-top: auto;
}

/* ===================================
   Carte 1 : identité (avatar à droite)
=================================== */

.juridique-details-identity[b-2cihyeszcf] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.juridique-details-identity-avatar[b-2cihyeszcf] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.juridique-details-identity-avatar img[b-2cihyeszcf] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.juridique-details-identity-info[b-2cihyeszcf] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    margin-top: 1rem;
}

.juridique-details-identity-name[b-2cihyeszcf] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.juridique-details-identity-type[b-2cihyeszcf] {
    font-size: .7rem;
    color: #6b7280;
}

/* ===================================
   Champs des cartes
=================================== */

.juridique-details-side-title[b-2cihyeszcf] {
    display: block;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;
}

.juridique-details-side-details[b-2cihyeszcf] {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    margin-top: .3rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

/* Pas de filet ni de marge en haut quand la liste est seule dans la carte */
.juridique-details-side-details--plain[b-2cihyeszcf] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.juridique-details-side-field[b-2cihyeszcf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.juridique-details-side-field > i[b-2cihyeszcf] {
    flex-shrink: 0;
    width: .9rem;
    text-align: center;
    font-size: .7rem;
    color: #9ca3af;
}

.juridique-details-field-label[b-2cihyeszcf] {
    flex-shrink: 0;

    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.juridique-details-field-value[b-2cihyeszcf] {
    font-size: .68rem;
    color: #374151;
    text-align: right;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.juridique-details-field-value--wrap[b-2cihyeszcf] {
    white-space: normal;
    word-break: break-word;
}

.juridique-details-field-link[b-2cihyeszcf] {
    color: #c92a2a;
    text-decoration: none;
}

.juridique-details-field-link:hover[b-2cihyeszcf] {
    text-decoration: underline;
}

.juridique-details-side-notes[b-2cihyeszcf] {
    margin: 0;

    font-size: .7rem;
    line-height: 1.5;
    color: #374151;
    white-space: pre-wrap;
}

/* Carte 4 : statistiques */
.juridique-details-stat-value[b-2cihyeszcf] {
    font-size: .72rem;
    font-weight: 700;
    color: #111827;
    text-align: right;
}

/* ===================================
   Carte 3 : conseillers
=================================== */

.juridique-details-consultant-list[b-2cihyeszcf] {
    margin: .3rem 0 0;
    padding: .5rem 0 0;
    list-style: none;
    border-top: 1px solid #e5e7eb;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.juridique-details-consultant[b-2cihyeszcf] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.juridique-details-consultant-avatar[b-2cihyeszcf] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-size: .7rem;
    font-weight: 600;
}

.juridique-details-consultant-avatar img[b-2cihyeszcf] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.juridique-details-consultant-info[b-2cihyeszcf] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Nom + icônes sur la même ligne */
.juridique-details-consultant-head[b-2cihyeszcf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    min-width: 0;
}

.juridique-details-consultant-name[b-2cihyeszcf] {
    flex: 1;
    min-width: 0;

    font-size: .74rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.juridique-details-consultant-icons[b-2cihyeszcf] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.juridique-details-consultant-icon[b-2cihyeszcf] {
    font-size: .64rem;
    color: #9ca3af;
    text-decoration: none;
    transition: color .2s;
}

.juridique-details-consultant-icon:hover[b-2cihyeszcf],
.juridique-details-consultant:hover .juridique-details-consultant-icon[b-2cihyeszcf] {
    color: #c92a2a;
}

.juridique-details-consultant-title[b-2cihyeszcf] {
    font-size: .64rem;
    color: #6b7280;
}

.juridique-details-consultant-line[b-2cihyeszcf] {
    font-size: .64rem;
    word-break: break-all;
}

/* Coordonnées : cachées, affichées au survol */
.juridique-details-consultant-details[b-2cihyeszcf] {
    display: flex;
    flex-direction: column;

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease;
}

.juridique-details-consultant:hover .juridique-details-consultant-details[b-2cihyeszcf],
.juridique-details-consultant:focus-within .juridique-details-consultant-details[b-2cihyeszcf] {
    max-height: 4rem;
    opacity: 1;
    margin-top: .15rem;
}

/* Écrans tactiles (pas de survol) : toujours visibles */
@media (hover: none) {
    .juridique-details-consultant-details[b-2cihyeszcf] {
        max-height: 4rem;
        opacity: 1;
        margin-top: .15rem;
    }
}

/* ===================================
   Crayon des cartes latérales (bas à droite)
=================================== */

.juridique-details-side-edit-btn[b-2cihyeszcf] {
    align-self: flex-end;
    margin-top: auto;
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.juridique-details-side-edit-btn:hover[b-2cihyeszcf] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Onglets (pilules) + libellé à droite
=================================== */

.juridique-details-tabs[b-2cihyeszcf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;

    margin-top: .1rem;

    position: sticky;
    top: 0;
    z-index: 10;

    background: #fff;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.juridique-details-tabs > span[b-2cihyeszcf] {
    flex-shrink: 0;

    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;

    white-space: nowrap;
}

.juridique-details-tabs-items[b-2cihyeszcf] {
    display: flex;
    gap: .6rem;

    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.juridique-details-tabs-items[b-2cihyeszcf]::-webkit-scrollbar {
    display: none;
}

.juridique-details-tab[b-2cihyeszcf] {
    flex-shrink: 0;
    white-space: nowrap;

    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;
    color: #b9bdc4;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;

    cursor: pointer;
    transition: .2s;
}

.juridique-details-tab:hover[b-2cihyeszcf] {
    background: #fdecec;
    color: #c92a2a;
}

.juridique-details-tab.active[b-2cihyeszcf] {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
}

/* ===================================
   Cadre gris du contenu
=================================== */

.juridique-details-tab-content[b-2cihyeszcf] {
    padding: .8rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.juridique-details-description[b-2cihyeszcf] {
    margin: 0;
    padding-right: .3rem;

    font-size: .9rem;
    line-height: 1.6;
    color: #374151;

    max-height: 63vh;
    overflow-y: auto;
}

.juridique-details-description ul[b-2cihyeszcf],
.juridique-details-description ol[b-2cihyeszcf] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

.juridique-details-placeholder[b-2cihyeszcf] {
    margin: .3rem 0;

    color: #9ca3af;
    font-size: .8rem;
    line-height: 1.5;
}

.empty-juridique[b-2cihyeszcf] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-size: .85rem;
}

/* Crayon du contenu principal */
.juridique-details-btn-edit[b-2cihyeszcf] {
    align-self: flex-end;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.juridique-details-btn-edit:hover[b-2cihyeszcf] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Zone d'édition inline
=================================== */

.juridique-details-edit-zone[b-2cihyeszcf] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.juridique-details-edit-actions[b-2cihyeszcf] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .3rem;
}

.juridique-details-btn-cancel[b-2cihyeszcf],
.juridique-details-btn-ok[b-2cihyeszcf] {
    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: .2s;
}

.juridique-details-btn-cancel[b-2cihyeszcf] {
    background: #f3f4f6;
    color: #6b7280;
}

.juridique-details-btn-cancel:hover[b-2cihyeszcf] {
    background: #e5e7eb;
}

.juridique-details-btn-ok[b-2cihyeszcf] {
    background: #c92a2a;
    color: #fff;
}

.juridique-details-btn-ok:hover[b-2cihyeszcf] {
    background: #a81f1f;
}

/* ===================================
   Barre d'outils de l'éditeur riche
=================================== */

.juridique-details-editor-toolbar[b-2cihyeszcf] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: .4rem;
    margin-bottom: .4rem;

    background: transparent;
    border: none;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.juridique-details-editor-toolbar[b-2cihyeszcf]::-webkit-scrollbar {
    display: none;
}

.juridique-details-editor-toolbar button[b-2cihyeszcf],
.juridique-details-tool[b-2cihyeszcf] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 28px;
    height: 28px;
    padding: 0 .3rem;

    background: transparent;
    border: none;
    border-radius: 4px;

    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;

    cursor: pointer;
    transition: .2s;
}

.juridique-details-editor-toolbar button:hover[b-2cihyeszcf],
.juridique-details-tool:hover[b-2cihyeszcf] {
    background: #fdecec;
    color: #c92a2a;
}

.juridique-details-tool-wide[b-2cihyeszcf] {
    min-width: auto;
    padding: 0 .5rem;
    white-space: nowrap;
}

.juridique-details-tool-select[b-2cihyeszcf] {
    flex-shrink: 0;

    height: 28px;
    padding: 0 .3rem;

    font-size: .72rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;

    cursor: pointer;
}

.juridique-details-tool-select:hover[b-2cihyeszcf] {
    border-color: #c92a2a;
}

.juridique-details-toolbar-separator[b-2cihyeszcf] {
    flex-shrink: 0;

    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 .3rem;
}

.juridique-details-color-picker[b-2cihyeszcf] {
    flex-shrink: 0;

    width: 28px;
    height: 28px;
    padding: 2px;

    background: transparent;
    border: none;

    cursor: pointer;
}

.juridique-details-edit-richtext[b-2cihyeszcf] {
    width: 100%;
    padding: .5rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;
    line-height: 1.5;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    overflow-y: auto;

    min-height: 10vh;
    max-height: 40vh;

    box-sizing: border-box;
}

.juridique-details-edit-richtext:focus[b-2cihyeszcf] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.juridique-details-edit-richtext ul[b-2cihyeszcf],
.juridique-details-edit-richtext ol[b-2cihyeszcf] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - zone principale sur toute la largeur
   - volet latéral = tiroir fixe qui glisse (transform), comme
     le volet gauche de la page : même durée, même courbe
   - collé sous la bande des catégories, coins arrondis seulement
     en bas ; même haut / même bas que le volet gauche, via les
     variables --content-top, --content-bottom, --drawer-inset
     (définies sur .juridique-content dans Juridique.razor.css)
   - Statistiques : carte complète fixée en bas du volet (sticky)
   - ouverture pilotée par la classe .open (paramètre SideOpen)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .juridique-details-layout[b-2cihyeszcf] {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: stretch;
        height: 100%;
        overflow: hidden;
        gap: 0;
    }

    .juridique-details-main[b-2cihyeszcf] {
        flex: 1 1 100%;
        max-width: none;
        width: auto;
        max-height: 100%;
        min-height: 0;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        padding: .35rem;
        box-sizing: border-box;
    }

    /* ---------- Volet des informations (bande droite) ----------
       Toujours rendu, glisse hors écran quand il est fermé. */
    .juridique-details-side[b-2cihyeszcf] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 30px) + var(--drawer-inset, 3px));
        right: 0;                                   /* collé au bord droit */
        left: auto;

        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        height: auto;
        margin: 0;
        padding: .6rem;
        box-sizing: border-box;

        z-index: 1500;
        background: #fff;
        border-radius: 0 0 0 14px;
        overflow-y: auto;

        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .juridique-details-side.open[b-2cihyeszcf] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Rien n'est coupé : les cartes gardent leur hauteur complète */
    .juridique-details-side-top[b-2cihyeszcf],
    .juridique-details-side-middle[b-2cihyeszcf],
    .juridique-details-side-consultants[b-2cihyeszcf],
    .juridique-details-side-bottom[b-2cihyeszcf] {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 0;
        padding: .45rem;
        gap: .25rem;
        border-radius: 10px;
    }

    /* Statistiques : carte complète, fixée en bas du volet avec une marge */
    .juridique-details-side-bottom[b-2cihyeszcf] {
        position: sticky;
        bottom: .6rem;               /* même marge que le padding du volet */
        z-index: 5;

        margin-top: auto;            /* poussé en bas si le contenu est court */

        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;

        /* 1) ombre légère au-dessus ; 2) bande blanche sous la carte
           pour masquer le contenu qui défile dans la marge du bas */
        box-shadow:
            0 -6px 8px -6px rgba(0, 0, 0, .15),
            0 .6rem 0 0 #fff;
    }

    .juridique-details-field-value[b-2cihyeszcf],
    .juridique-details-identity-name[b-2cihyeszcf],
    .juridique-details-identity-type[b-2cihyeszcf],
    .juridique-details-consultant-name[b-2cihyeszcf] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    /* ---------- Onglets ---------- */
    .juridique-details-tabs[b-2cihyeszcf] {
        position: static;
        padding: .2rem 0 .3rem;
        margin-top: 0;
        gap: .3rem;
    }

    .juridique-details-tabs-items[b-2cihyeszcf] { gap: .15rem; }

    .juridique-details-tab[b-2cihyeszcf] {
        padding: .12rem .45rem;
        font-size: .6rem;
        border-radius: 14px;
    }

    .juridique-details-tabs > span[b-2cihyeszcf] { font-size: .7rem; }

    /* ---------- Contenu : hauteur flexible ---------- */
    .juridique-details-tab-content[b-2cihyeszcf] {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: .6rem;
        gap: .4rem;
        border-radius: 10px;
    }

    .juridique-details-description[b-2cihyeszcf] {
        max-height: none;
        overflow: visible;
        font-size: .82rem;
        line-height: 1.5;
        padding-right: .1rem;
    }

    .juridique-details-description[b-2cihyeszcf]  h1 { font-size: 1.05rem; margin: .35rem 0; }
    .juridique-details-description[b-2cihyeszcf]  h2 { font-size: .95rem; margin: .3rem 0; }
    .juridique-details-description[b-2cihyeszcf]  h3 { font-size: .88rem; margin: .25rem 0; }
    .juridique-details-description[b-2cihyeszcf]  p,
    .juridique-details-description[b-2cihyeszcf]  li { font-size: .82rem; line-height: 1.5; margin: .2rem 0; }
    .juridique-details-description[b-2cihyeszcf]  img { max-width: 100%; height: auto; }
    .juridique-details-description[b-2cihyeszcf]  table { font-size: .75rem; }

    .juridique-details-placeholder[b-2cihyeszcf] { font-size: .75rem; margin: .2rem 0; }

    .juridique-details-btn-edit[b-2cihyeszcf],
    .juridique-details-side-edit-btn[b-2cihyeszcf] { width: 24px; height: 24px; font-size: .6rem; }

    /* ---------- Cartes du volet ---------- */
    .juridique-details-identity[b-2cihyeszcf] { gap: .4rem; }
    .juridique-details-identity-avatar[b-2cihyeszcf] { width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; font-size: .65rem; }
    .juridique-details-identity-info[b-2cihyeszcf] { margin-top: .1rem; }
    .juridique-details-identity-name[b-2cihyeszcf] { font-size: .72rem; }
    .juridique-details-identity-type[b-2cihyeszcf] { font-size: .58rem; }

    .juridique-details-side-title[b-2cihyeszcf] { font-size: .72rem; }
    .juridique-details-side-details[b-2cihyeszcf] { gap: .25rem; margin-top: .2rem; padding-top: .3rem; }
    .juridique-details-side-details--plain[b-2cihyeszcf] { margin-top: 0; padding-top: 0; }
    .juridique-details-side-field[b-2cihyeszcf] { gap: .3rem; }
    .juridique-details-side-field > i[b-2cihyeszcf] { width: .75rem; font-size: .58rem; }
    .juridique-details-field-label[b-2cihyeszcf] { font-size: .46rem; }
    .juridique-details-field-value[b-2cihyeszcf] { font-size: .6rem; }
    .juridique-details-stat-value[b-2cihyeszcf] { font-size: .62rem; }
    .juridique-details-side-notes[b-2cihyeszcf] { font-size: .6rem; line-height: 1.35; }

    .juridique-details-consultant-avatar[b-2cihyeszcf] { width: 24px; height: 24px; min-width: 24px; flex: 0 0 24px; font-size: .6rem; }
    .juridique-details-consultant-name[b-2cihyeszcf] { font-size: .66rem; }
    .juridique-details-consultant-title[b-2cihyeszcf] { font-size: .55rem; }
    .juridique-details-consultant-line[b-2cihyeszcf] { font-size: .55rem; }
    .juridique-details-consultant-icon[b-2cihyeszcf] { font-size: .62rem; }

    /* ---------- Édition ---------- */
    .juridique-details-edit-zone[b-2cihyeszcf] { gap: .35rem; }
    .juridique-details-btn-cancel[b-2cihyeszcf],
    .juridique-details-btn-ok[b-2cihyeszcf] { padding: .3rem .8rem; font-size: .7rem; }

    .juridique-details-editor-toolbar[b-2cihyeszcf] { padding: .2rem; gap: .2rem; margin-bottom: .3rem; }
    .juridique-details-editor-toolbar button[b-2cihyeszcf],
    .juridique-details-tool[b-2cihyeszcf] { min-width: 24px; height: 24px; padding: 0 .2rem; font-size: .7rem; }
    .juridique-details-editor-toolbar svg[b-2cihyeszcf] { width: 12px; height: 12px; }
    .juridique-details-tool-select[b-2cihyeszcf] { height: 24px; font-size: .65rem; padding: 0 .2rem; }
    .juridique-details-color-picker[b-2cihyeszcf] { width: 24px; height: 24px; }
    .juridique-details-toolbar-separator[b-2cihyeszcf] { height: 14px; margin: 0 .15rem; }
    .juridique-details-edit-richtext[b-2cihyeszcf] { font-size: .82rem; padding: .4rem; min-height: 8vh; max-height: 30vh; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    /* top / bottom viennent des variables de .juridique-content (148px / 26px) */
    .juridique-details-side[b-2cihyeszcf] {
        width: var(--drawer-w, 55vw);
        max-width: var(--drawer-w, 55vw);
    }

    .juridique-details-tab[b-2cihyeszcf] { font-size: .62rem; padding: .2rem .5rem; }
    .juridique-details-tab-content[b-2cihyeszcf] { padding: .4rem; }

    .juridique-details-description[b-2cihyeszcf],
    .juridique-details-description[b-2cihyeszcf]  p,
    .juridique-details-description[b-2cihyeszcf]  li { font-size: .72rem; }

    .juridique-details-identity-avatar[b-2cihyeszcf] { width: 28px; height: 28px; min-width: 28px; flex: 0 0 28px; }
    .juridique-details-identity-name[b-2cihyeszcf] { font-size: .62rem; }
    .juridique-details-field-value[b-2cihyeszcf],
    .juridique-details-stat-value[b-2cihyeszcf] { font-size: .55rem; }
    .juridique-details-field-label[b-2cihyeszcf] { font-size: .42rem; }
    .juridique-details-side-title[b-2cihyeszcf] { font-size: .62rem; }
}
/* /Components/Pages/Assistance/Juridique/Juridique.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.juridique-page[b-1em5gm9vvp] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES CATÉGORIES (bureau)
========================================== */

.juridique-sticky[b-1em5gm9vvp] {
    position: fixed;
    top: 80px;
    left: 250px;
    right: 70px;
    height: 140px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 12px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.juridique-content[b-1em5gm9vvp] {
    position: fixed;

    top: 220px;
    bottom: 20px;
    left: 240px;
    right: 30px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

/* Colonne gauche : liste des outils */
.juridique-left[b-1em5gm9vvp] {
    flex: 0 0 20%;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;

    padding: .5rem;
}

/* Colonne droite : détails de l'outil sélectionné */
.juridique-right[b-1em5gm9vvp] {
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
    min-height: 0;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
}

.empty-juridique[b-1em5gm9vvp] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languettes et fond cliquable : cachés sur ordinateur */
.juridique-content .drawer-tab[b-1em5gm9vvp],
.juridique-content .drawer-backdrop[b-1em5gm9vvp] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - volets et languettes glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors des volets les referme (fond cliquable)
   - volets collés sous la bande des catégories, coins arrondis
     seulement en bas
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des catégories : pleine largeur, sans coins arrondis */
    html body .juridique-sticky[b-1em5gm9vvp] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .juridique-content[b-1em5gm9vvp] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit (utilisé par InfoJuridique) */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .juridique-content .juridique-right[b-1em5gm9vvp] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* Clic en dehors des volets : les referme (sous les volets et les languettes) */
    html body .juridique-content .drawer-backdrop[b-1em5gm9vvp] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .juridique-content .juridique-left[b-1em5gm9vvp] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        min-width: 0 !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .juridique-content.left-open .juridique-left[b-1em5gm9vvp] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .juridique-content .drawer-tab[b-1em5gm9vvp] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .juridique-content .drawer-tab:hover[b-1em5gm9vvp] {
        background: rgba(225, 110, 110, .98);
    }

    .juridique-content .drawer-tab-left[b-1em5gm9vvp] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .juridique-content.left-open .drawer-tab-left[b-1em5gm9vvp] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .juridique-content .drawer-tab-right[b-1em5gm9vvp] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .juridique-content.right-open .drawer-tab-right[b-1em5gm9vvp] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .juridique-sticky[b-1em5gm9vvp] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .juridique-content[b-1em5gm9vvp] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --drawer-w: 55vw;
        --left-w: 55vw;
    }

    .juridique-content .drawer-tab[b-1em5gm9vvp] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Assistance/Logement/InfoLogement.razor.rz.scp.css */
/* ===================================
   Layout principal (78% / 20%)
=================================== */

.infoLogement-details[b-q5cw4sloxg] {
    display: flex;
    align-items: stretch;
    gap: .8rem;

    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Le contenu principal défile seul ; les onglets (sticky) restent en haut */
.infoLogement-details-main[b-q5cw4sloxg] {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;
    min-height: 0;

    overflow-y: auto;
    scrollbar-width: thin;
}

/* ===================================
   Colonne latérale (20%) : 4 cartes
=================================== */

.infoLogement-details-side[b-q5cw4sloxg] {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Style commun aux 4 cartes */
.infoLogement-side-top[b-q5cw4sloxg],
.infoLogement-side-middle[b-q5cw4sloxg],
.infoLogement-side-consultants[b-q5cw4sloxg],
.infoLogement-side-bottom[b-q5cw4sloxg] {
    box-sizing: border-box;
    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoLogement-side-top[b-q5cw4sloxg]::-webkit-scrollbar,
.infoLogement-side-middle[b-q5cw4sloxg]::-webkit-scrollbar,
.infoLogement-side-consultants[b-q5cw4sloxg]::-webkit-scrollbar,
.infoLogement-side-bottom[b-q5cw4sloxg]::-webkit-scrollbar {
    display: none;
}

/* Cartes du haut : hauteur selon le contenu, rétrécissent (avec défilement)
   si la colonne manque de place */
.infoLogement-side-top[b-q5cw4sloxg],
.infoLogement-side-middle[b-q5cw4sloxg] {
    flex: 0 1 auto;
    min-height: 60px;
}

.infoLogement-side-consultants[b-q5cw4sloxg] {
    flex: 0 1 auto;
    min-height: 90px;
}

/* Statistiques : jamais écrasée, toujours collée au fond de la colonne */
.infoLogement-side-bottom[b-q5cw4sloxg] {
    flex: 0 0 auto;
    min-height: 60px;
    margin-top: auto;
}

/* ===================================
   Carte 1 : identité (avatar à droite)
=================================== */

.infoLogement-identity[b-q5cw4sloxg] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.infoLogement-identity-avatar[b-q5cw4sloxg] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.infoLogement-identity-avatar img[b-q5cw4sloxg] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.infoLogement-identity-info[b-q5cw4sloxg] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    margin-top: 1rem;
}

.infoLogement-identity-name[b-q5cw4sloxg] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoLogement-identity-type[b-q5cw4sloxg] {
    font-size: .7rem;
    color: #6b7280;
}

/* ===================================
   Champs des cartes
=================================== */

.infoLogement-side-title[b-q5cw4sloxg] {
    display: block;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;
}

.infoLogement-side-details[b-q5cw4sloxg] {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    margin-top: .3rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

/* Pas de filet ni de marge en haut quand la liste est seule dans la carte */
.infoLogement-side-details--plain[b-q5cw4sloxg] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.infoLogement-side-field[b-q5cw4sloxg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.infoLogement-side-field > i[b-q5cw4sloxg] {
    flex-shrink: 0;
    width: .9rem;
    text-align: center;
    font-size: .7rem;
    color: #9ca3af;
}

.infoLogement-field-label[b-q5cw4sloxg] {
    flex-shrink: 0;

    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.infoLogement-field-value[b-q5cw4sloxg] {
    font-size: .68rem;
    color: #374151;
    text-align: right;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infoLogement-field-value--wrap[b-q5cw4sloxg] {
    white-space: normal;
    word-break: break-word;
}

.infoLogement-field-link[b-q5cw4sloxg] {
    color: #c92a2a;
    text-decoration: none;
}

.infoLogement-field-link:hover[b-q5cw4sloxg] {
    text-decoration: underline;
}

.infoLogement-side-notes[b-q5cw4sloxg] {
    margin: 0;

    font-size: .7rem;
    line-height: 1.5;
    color: #374151;
    white-space: pre-wrap;
}

/* Carte 4 : statistiques */
.infoLogement-stat-value[b-q5cw4sloxg] {
    font-size: .72rem;
    font-weight: 700;
    color: #111827;
    text-align: right;
}

/* ===================================
   Carte 3 : conseillers
=================================== */

.infoLogement-consultant-list[b-q5cw4sloxg] {
    margin: .3rem 0 0;
    padding: .5rem 0 0;
    list-style: none;
    border-top: 1px solid #e5e7eb;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoLogement-consultant[b-q5cw4sloxg] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.infoLogement-consultant-avatar[b-q5cw4sloxg] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-size: .7rem;
    font-weight: 600;
}

.infoLogement-consultant-avatar img[b-q5cw4sloxg] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.infoLogement-consultant-info[b-q5cw4sloxg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Nom + icônes sur la même ligne */
.infoLogement-consultant-head[b-q5cw4sloxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    min-width: 0;
}

.infoLogement-consultant-name[b-q5cw4sloxg] {
    flex: 1;
    min-width: 0;

    font-size: .74rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoLogement-consultant-icons[b-q5cw4sloxg] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.infoLogement-consultant-icon[b-q5cw4sloxg] {
    font-size: .64rem;
    color: #9ca3af;
    text-decoration: none;
    transition: color .2s;
}

.infoLogement-consultant-icon:hover[b-q5cw4sloxg],
.infoLogement-consultant:hover .infoLogement-consultant-icon[b-q5cw4sloxg] {
    color: #c92a2a;
}

.infoLogement-consultant-title[b-q5cw4sloxg] {
    font-size: .64rem;
    color: #6b7280;
}

.infoLogement-consultant-line[b-q5cw4sloxg] {
    font-size: .64rem;
    word-break: break-all;
}

/* Coordonnées : cachées, affichées au survol */
.infoLogement-consultant-details[b-q5cw4sloxg] {
    display: flex;
    flex-direction: column;

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease;
}

.infoLogement-consultant:hover .infoLogement-consultant-details[b-q5cw4sloxg],
.infoLogement-consultant:focus-within .infoLogement-consultant-details[b-q5cw4sloxg] {
    max-height: 4rem;
    opacity: 1;
    margin-top: .15rem;
}

/* Écrans tactiles (pas de survol) : toujours visibles */
@media (hover: none) {
    .infoLogement-consultant-details[b-q5cw4sloxg] {
        max-height: 4rem;
        opacity: 1;
        margin-top: .15rem;
    }
}

/* ===================================
   Crayon des cartes latérales (bas à droite)
=================================== */

.infoLogement-side-edit-btn[b-q5cw4sloxg] {
    align-self: flex-end;
    margin-top: auto;
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.infoLogement-side-edit-btn:hover[b-q5cw4sloxg] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Onglets (pilules) + libellé à droite
=================================== */

.infoLogement-tabs[b-q5cw4sloxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;

    margin-top: .1rem;

    position: sticky;
    top: 0;
    z-index: 10;

    background: #fff;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.infoLogement-tabs > span[b-q5cw4sloxg] {
    flex-shrink: 0;

    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;

    white-space: nowrap;
}

.infoLogement-tabs-items[b-q5cw4sloxg] {
    display: flex;
    gap: .6rem;

    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoLogement-tabs-items[b-q5cw4sloxg]::-webkit-scrollbar {
    display: none;
}

.infoLogement-tab[b-q5cw4sloxg] {
    flex-shrink: 0;
    white-space: nowrap;

    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;
    color: #b9bdc4;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;

    cursor: pointer;
    transition: .2s;
}

.infoLogement-tab:hover[b-q5cw4sloxg] {
    background: #fdecec;
    color: #c92a2a;
}

.infoLogement-tab.active[b-q5cw4sloxg] {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
}

/* ===================================
   Cadre gris du contenu
=================================== */

.infoLogement-tab-content[b-q5cw4sloxg] {
    padding: .8rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoLogement-tab-description[b-q5cw4sloxg] {
    margin: 0;
    padding-right: .3rem;

    font-size: .9rem;
    line-height: 1.6;
    color: #374151;

    max-height: 63vh;
    overflow-y: auto;
}

.infoLogement-tab-description ul[b-q5cw4sloxg],
.infoLogement-tab-description ol[b-q5cw4sloxg] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

.infoLogement-placeholder[b-q5cw4sloxg] {
    margin: .3rem 0;

    color: #9ca3af;
    font-size: .8rem;
    line-height: 1.5;
}

.empty-logement[b-q5cw4sloxg] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-size: .85rem;
}

/* Crayon du contenu principal */
.infoLogement-btn-edit[b-q5cw4sloxg] {
    align-self: flex-end;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.infoLogement-btn-edit:hover[b-q5cw4sloxg] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Zone d'édition inline
=================================== */

.infoLogement-edit-zone[b-q5cw4sloxg] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoLogement-edit-actions[b-q5cw4sloxg] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .3rem;
}

.infoLogement-btn-cancel[b-q5cw4sloxg],
.infoLogement-btn-ok[b-q5cw4sloxg] {
    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: .2s;
}

.infoLogement-btn-cancel[b-q5cw4sloxg] {
    background: #f3f4f6;
    color: #6b7280;
}

.infoLogement-btn-cancel:hover[b-q5cw4sloxg] {
    background: #e5e7eb;
}

.infoLogement-btn-ok[b-q5cw4sloxg] {
    background: #c92a2a;
    color: #fff;
}

.infoLogement-btn-ok:hover[b-q5cw4sloxg] {
    background: #a81f1f;
}

/* ===================================
   Barre d'outils de l'éditeur riche
=================================== */

.infoLogement-editor-toolbar[b-q5cw4sloxg] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: .4rem;
    margin-bottom: .4rem;

    background: transparent;
    border: none;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoLogement-editor-toolbar[b-q5cw4sloxg]::-webkit-scrollbar {
    display: none;
}

.infoLogement-editor-toolbar button[b-q5cw4sloxg],
.infoLogement-tool[b-q5cw4sloxg] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 28px;
    height: 28px;
    padding: 0 .3rem;

    background: transparent;
    border: none;
    border-radius: 4px;

    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;

    cursor: pointer;
    transition: .2s;
}

.infoLogement-editor-toolbar button:hover[b-q5cw4sloxg],
.infoLogement-tool:hover[b-q5cw4sloxg] {
    background: #fdecec;
    color: #c92a2a;
}

.infoLogement-tool-wide[b-q5cw4sloxg] {
    min-width: auto;
    padding: 0 .5rem;
    white-space: nowrap;
}

.infoLogement-tool-select[b-q5cw4sloxg] {
    flex-shrink: 0;

    height: 28px;
    padding: 0 .3rem;

    font-size: .72rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;

    cursor: pointer;
}

.infoLogement-tool-select:hover[b-q5cw4sloxg] {
    border-color: #c92a2a;
}

.infoLogement-toolbar-separator[b-q5cw4sloxg] {
    flex-shrink: 0;

    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 .3rem;
}

.infoLogement-color-picker[b-q5cw4sloxg] {
    flex-shrink: 0;

    width: 28px;
    height: 28px;
    padding: 2px;

    background: transparent;
    border: none;

    cursor: pointer;
}

.infoLogement-edit-richtext[b-q5cw4sloxg] {
    width: 100%;
    padding: .5rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;
    line-height: 1.5;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    overflow-y: auto;

    min-height: 10vh;
    max-height: 40vh;

    box-sizing: border-box;
}

.infoLogement-edit-richtext:focus[b-q5cw4sloxg] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.infoLogement-edit-richtext ul[b-q5cw4sloxg],
.infoLogement-edit-richtext ol[b-q5cw4sloxg] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - zone principale sur toute la largeur
   - volet latéral = tiroir fixe qui glisse (transform), comme
     le volet gauche de la page : même durée, même courbe
   - collé sous la bande des catégories, coins arrondis seulement
     en bas ; même haut / même bas que le volet gauche, via les
     variables --content-top, --content-bottom, --drawer-inset
     (définies sur .logement-content dans Logement.razor.css)
   - Statistiques : carte complète fixée en bas du volet (sticky)
   - ouverture pilotée par la classe .open (paramètre SideOpen)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .infoLogement-details[b-q5cw4sloxg] {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: stretch;
        height: 100%;
        overflow: hidden;
        gap: 0;
    }

    .infoLogement-details-main[b-q5cw4sloxg] {
        flex: 1 1 100%;
        max-width: none;
        width: auto;
        max-height: 100%;
        min-height: 0;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        padding: .35rem;
        box-sizing: border-box;
    }

    /* ---------- Volet des informations (bande droite) ----------
       Toujours rendu, glisse hors écran quand il est fermé. */
    .infoLogement-details-side[b-q5cw4sloxg] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 30px) + var(--drawer-inset, 3px));
        right: 0;                                   /* collé au bord droit */
        left: auto;

        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        height: auto;
        margin: 0;
        padding: .6rem;
        box-sizing: border-box;

        z-index: 1500;
        background: #fff;
        border-radius: 0 0 0 14px;
        overflow-y: auto;

        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .infoLogement-details-side.open[b-q5cw4sloxg] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Rien n'est coupé : les cartes gardent leur hauteur complète */
    .infoLogement-side-top[b-q5cw4sloxg],
    .infoLogement-side-middle[b-q5cw4sloxg],
    .infoLogement-side-consultants[b-q5cw4sloxg],
    .infoLogement-side-bottom[b-q5cw4sloxg] {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 0;
        padding: .45rem;
        gap: .25rem;
        border-radius: 10px;
    }

    /* Statistiques : carte complète, fixée en bas du volet avec une marge */
    .infoLogement-side-bottom[b-q5cw4sloxg] {
        position: sticky;
        bottom: .6rem;               /* même marge que le padding du volet */
        z-index: 5;

        margin-top: auto;            /* poussé en bas si le contenu est court */

        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;

        /* 1) ombre légère au-dessus ; 2) bande blanche sous la carte
           pour masquer le contenu qui défile dans la marge du bas */
        box-shadow:
            0 -6px 8px -6px rgba(0, 0, 0, .15),
            0 .6rem 0 0 #fff;
    }

    .infoLogement-field-value[b-q5cw4sloxg],
    .infoLogement-identity-name[b-q5cw4sloxg],
    .infoLogement-identity-type[b-q5cw4sloxg],
    .infoLogement-consultant-name[b-q5cw4sloxg] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    /* ---------- Onglets ---------- */
    .infoLogement-tabs[b-q5cw4sloxg] {
        position: static;
        padding: .2rem 0 .3rem;
        margin-top: 0;
        gap: .3rem;
    }

    .infoLogement-tabs-items[b-q5cw4sloxg] { gap: .15rem; }

    .infoLogement-tab[b-q5cw4sloxg] {
        padding: .12rem .45rem;
        font-size: .6rem;
        border-radius: 14px;
    }

    .infoLogement-tabs > span[b-q5cw4sloxg] { font-size: .7rem; }

    /* ---------- Contenu : hauteur flexible ---------- */
    .infoLogement-tab-content[b-q5cw4sloxg] {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: .6rem;
        gap: .4rem;
        border-radius: 10px;
    }

    .infoLogement-tab-description[b-q5cw4sloxg] {
        max-height: none;
        overflow: visible;
        font-size: .82rem;
        line-height: 1.5;
        padding-right: .1rem;
    }

    .infoLogement-tab-description[b-q5cw4sloxg]  h1 { font-size: 1.05rem; margin: .35rem 0; }
    .infoLogement-tab-description[b-q5cw4sloxg]  h2 { font-size: .95rem; margin: .3rem 0; }
    .infoLogement-tab-description[b-q5cw4sloxg]  h3 { font-size: .88rem; margin: .25rem 0; }
    .infoLogement-tab-description[b-q5cw4sloxg]  p,
    .infoLogement-tab-description[b-q5cw4sloxg]  li { font-size: .82rem; line-height: 1.5; margin: .2rem 0; }
    .infoLogement-tab-description[b-q5cw4sloxg]  img { max-width: 100%; height: auto; }
    .infoLogement-tab-description[b-q5cw4sloxg]  table { font-size: .75rem; }

    .infoLogement-placeholder[b-q5cw4sloxg] { font-size: .75rem; margin: .2rem 0; }

    .infoLogement-btn-edit[b-q5cw4sloxg],
    .infoLogement-side-edit-btn[b-q5cw4sloxg] { width: 24px; height: 24px; font-size: .6rem; }

    /* ---------- Cartes du volet ---------- */
    .infoLogement-identity[b-q5cw4sloxg] { gap: .4rem; }
    .infoLogement-identity-avatar[b-q5cw4sloxg] { width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; font-size: .65rem; }
    .infoLogement-identity-info[b-q5cw4sloxg] { margin-top: .1rem; }
    .infoLogement-identity-name[b-q5cw4sloxg] { font-size: .72rem; }
    .infoLogement-identity-type[b-q5cw4sloxg] { font-size: .58rem; }

    .infoLogement-side-title[b-q5cw4sloxg] { font-size: .72rem; }
    .infoLogement-side-details[b-q5cw4sloxg] { gap: .25rem; margin-top: .2rem; padding-top: .3rem; }
    .infoLogement-side-details--plain[b-q5cw4sloxg] { margin-top: 0; padding-top: 0; }
    .infoLogement-side-field[b-q5cw4sloxg] { gap: .3rem; }
    .infoLogement-side-field > i[b-q5cw4sloxg] { width: .75rem; font-size: .58rem; }
    .infoLogement-field-label[b-q5cw4sloxg] { font-size: .46rem; }
    .infoLogement-field-value[b-q5cw4sloxg] { font-size: .6rem; }
    .infoLogement-stat-value[b-q5cw4sloxg] { font-size: .62rem; }
    .infoLogement-side-notes[b-q5cw4sloxg] { font-size: .6rem; line-height: 1.35; }

    .infoLogement-consultant-avatar[b-q5cw4sloxg] { width: 24px; height: 24px; min-width: 24px; flex: 0 0 24px; font-size: .6rem; }
    .infoLogement-consultant-name[b-q5cw4sloxg] { font-size: .66rem; }
    .infoLogement-consultant-title[b-q5cw4sloxg] { font-size: .55rem; }
    .infoLogement-consultant-line[b-q5cw4sloxg] { font-size: .55rem; }
    .infoLogement-consultant-icon[b-q5cw4sloxg] { font-size: .62rem; }

    /* ---------- Édition ---------- */
    .infoLogement-edit-zone[b-q5cw4sloxg] { gap: .35rem; }
    .infoLogement-btn-cancel[b-q5cw4sloxg],
    .infoLogement-btn-ok[b-q5cw4sloxg] { padding: .3rem .8rem; font-size: .7rem; }

    .infoLogement-editor-toolbar[b-q5cw4sloxg] { padding: .2rem; gap: .2rem; margin-bottom: .3rem; }
    .infoLogement-editor-toolbar button[b-q5cw4sloxg],
    .infoLogement-tool[b-q5cw4sloxg] { min-width: 24px; height: 24px; padding: 0 .2rem; font-size: .7rem; }
    .infoLogement-editor-toolbar svg[b-q5cw4sloxg] { width: 12px; height: 12px; }
    .infoLogement-tool-select[b-q5cw4sloxg] { height: 24px; font-size: .65rem; padding: 0 .2rem; }
    .infoLogement-color-picker[b-q5cw4sloxg] { width: 24px; height: 24px; }
    .infoLogement-toolbar-separator[b-q5cw4sloxg] { height: 14px; margin: 0 .15rem; }
    .infoLogement-edit-richtext[b-q5cw4sloxg] { font-size: .82rem; padding: .4rem; min-height: 8vh; max-height: 30vh; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    /* top / bottom viennent des variables de .logement-content (148px / 26px) */
    .infoLogement-details-side[b-q5cw4sloxg] {
        width: var(--drawer-w, 55vw);
        max-width: var(--drawer-w, 55vw);
    }

    .infoLogement-tab[b-q5cw4sloxg] { font-size: .62rem; padding: .2rem .5rem; }
    .infoLogement-tab-content[b-q5cw4sloxg] { padding: .4rem; }

    .infoLogement-tab-description[b-q5cw4sloxg],
    .infoLogement-tab-description[b-q5cw4sloxg]  p,
    .infoLogement-tab-description[b-q5cw4sloxg]  li { font-size: .72rem; }

    .infoLogement-identity-avatar[b-q5cw4sloxg] { width: 28px; height: 28px; min-width: 28px; flex: 0 0 28px; }
    .infoLogement-identity-name[b-q5cw4sloxg] { font-size: .62rem; }
    .infoLogement-field-value[b-q5cw4sloxg],
    .infoLogement-stat-value[b-q5cw4sloxg] { font-size: .55rem; }
    .infoLogement-field-label[b-q5cw4sloxg] { font-size: .42rem; }
    .infoLogement-side-title[b-q5cw4sloxg] { font-size: .62rem; }
}
/* /Components/Pages/Assistance/Logement/Logement.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.logement-page[b-bqrdjh8mvs] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES CATÉGORIES (bureau)
========================================== */

.logement-sticky[b-bqrdjh8mvs] {
    position: fixed;
    top: 80px;
    left: 250px;
    right: 70px;
    height: 140px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 12px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.logement-content[b-bqrdjh8mvs] {
    position: fixed;

    top: 220px;
    bottom: 20px;
    left: 240px;
    right: 30px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

/* Colonne gauche : liste des outils */
.logement-left[b-bqrdjh8mvs] {
    flex: 0 0 20%;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;

    padding: .5rem;
}

/* Colonne droite : détails de l'outil sélectionné */
.logement-right[b-bqrdjh8mvs] {
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
    min-height: 0;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
}

.empty-logement[b-bqrdjh8mvs] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languettes et fond cliquable : cachés sur ordinateur */
.logement-content .drawer-tab[b-bqrdjh8mvs],
.logement-content .drawer-backdrop[b-bqrdjh8mvs] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - volets et languettes glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors des volets les referme (fond cliquable)
   - volets collés sous la bande des catégories, coins arrondis
     seulement en bas
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des catégories : pleine largeur, sans coins arrondis */
    html body .logement-sticky[b-bqrdjh8mvs] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .logement-content[b-bqrdjh8mvs] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit (utilisé par InfoLogement) */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .logement-content .logement-right[b-bqrdjh8mvs] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* Clic en dehors des volets : les referme (sous les volets et les languettes) */
    html body .logement-content .drawer-backdrop[b-bqrdjh8mvs] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .logement-content .logement-left[b-bqrdjh8mvs] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        min-width: 0 !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .logement-content.left-open .logement-left[b-bqrdjh8mvs] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .logement-content .drawer-tab[b-bqrdjh8mvs] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .logement-content .drawer-tab:hover[b-bqrdjh8mvs] {
        background: rgba(225, 110, 110, .98);
    }

    .logement-content .drawer-tab-left[b-bqrdjh8mvs] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .logement-content.left-open .drawer-tab-left[b-bqrdjh8mvs] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .logement-content .drawer-tab-right[b-bqrdjh8mvs] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .logement-content.right-open .drawer-tab-right[b-bqrdjh8mvs] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .logement-sticky[b-bqrdjh8mvs] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .logement-content[b-bqrdjh8mvs] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --drawer-w: 55vw;
        --left-w: 55vw;
    }

    .logement-content .drawer-tab[b-bqrdjh8mvs] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Assistance/Organisme/InfoOrganismes.razor.rz.scp.css */
/* ===================================
   Layout principal (78% / 20%)
=================================== */

.organisme-details[b-je0d8w3nj1] {
    display: flex;
    align-items: stretch;
    gap: .8rem;

    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.organisme-details-main[b-je0d8w3nj1] {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding: .8rem;
    box-sizing: border-box;
}

/* ===================================
   Colonne latérale (20%) : 3 cadres
=================================== */

.organisme-details-side[b-je0d8w3nj1] {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 0;
    min-height: 0;

    margin-top: 10px;
    margin-right: 100px;
    padding: .1rem;

    align-self: stretch;
    height: auto;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.organisme-side-top[b-je0d8w3nj1],
.organisme-side-middle[b-je0d8w3nj1],
.organisme-side-bottom[b-je0d8w3nj1] {
    flex: 0 1 auto;
    box-sizing: border-box;
    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.organisme-side-top[b-je0d8w3nj1]::-webkit-scrollbar,
.organisme-side-middle[b-je0d8w3nj1]::-webkit-scrollbar,
.organisme-side-bottom[b-je0d8w3nj1]::-webkit-scrollbar {
    display: none;
}

.organisme-side-bottom[b-je0d8w3nj1] {
    min-height: 60px;
    margin-top: auto;
}

/* ===================================
   Cadre 1 : identité
=================================== */

.organisme-identity[b-je0d8w3nj1] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.organisme-identity-avatar[b-je0d8w3nj1] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.organisme-identity-avatar img[b-je0d8w3nj1] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.organisme-identity-info[b-je0d8w3nj1] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    margin-top: 1rem;
}

.organisme-identity-name[b-je0d8w3nj1] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.organisme-identity-type[b-je0d8w3nj1],
.organisme-identity-pays[b-je0d8w3nj1] {
    font-size: .7rem;
    color: #6b7280;
}

/* ===================================
   Champs des cadres
=================================== */

.organisme-side-title[b-je0d8w3nj1] {
    display: block;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;
}

.organisme-side-details[b-je0d8w3nj1] {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    margin-top: .3rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

.organisme-side-field[b-je0d8w3nj1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.organisme-side-field > i[b-je0d8w3nj1] {
    flex-shrink: 0;
    width: .9rem;
    text-align: center;
    font-size: .7rem;
    color: #9ca3af;
}

.organisme-field-label[b-je0d8w3nj1] {
    flex-shrink: 0;

    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.organisme-field-value[b-je0d8w3nj1] {
    font-size: .68rem;
    color: #374151;
    text-align: right;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organisme-field-value--wrap[b-je0d8w3nj1] {
    white-space: normal;
    word-break: break-word;
}

.organisme-field-link[b-je0d8w3nj1] {
    color: #c92a2a;
    text-decoration: none;
}

.organisme-field-link:hover[b-je0d8w3nj1] {
    text-decoration: underline;
}

.organisme-stat-value[b-je0d8w3nj1] {
    font-size: .72rem;
    font-weight: 700;
    color: #111827;
    text-align: right;
}

/* Liens utiles */

.organisme-side-links[b-je0d8w3nj1] {
    margin: .3rem 0 0;
    padding-left: 1rem;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    font-size: .72rem;
    color: #374151;
}

.organisme-side-links a[b-je0d8w3nj1] {
    color: #c92a2a;
    text-decoration: none;
    word-break: break-word;
}

.organisme-side-links a:hover[b-je0d8w3nj1] {
    text-decoration: underline;
}

/* Crayon des cadres latéraux */

.organisme-side-edit-btn[b-je0d8w3nj1] {
    align-self: flex-end;
    margin-top: auto;
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.organisme-side-edit-btn:hover[b-je0d8w3nj1] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Onglets (pilules) + organisme à droite
=================================== */

.organisme-tabs[b-je0d8w3nj1] {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;

    margin-top: .1rem;
    padding-top: .3rem;
    padding-bottom: .3rem;

    background: #fff;
}

.organisme-tabs-items[b-je0d8w3nj1] {
    display: flex;
    gap: .6rem;

    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.organisme-tabs-items[b-je0d8w3nj1]::-webkit-scrollbar {
    display: none;
}

.organisme-tab[b-je0d8w3nj1] {
    flex-shrink: 0;
    white-space: nowrap;

    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;
    color: #b9bdc4;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;

    cursor: pointer;
    transition: .2s;
}

.organisme-tab:hover[b-je0d8w3nj1] {
    background: #fdecec;
    color: #c92a2a;
}

.organisme-tab.active[b-je0d8w3nj1] {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
}

.organisme-tabs-org[b-je0d8w3nj1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;

    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.organisme-tabs-org-text[b-je0d8w3nj1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.organisme-subtitle[b-je0d8w3nj1] {
    font-size: .6rem;
    font-weight: 500;
    color: #9ca3af;
}

.organisme-logo[b-je0d8w3nj1] {
    display: block;
    height: 28px;
    max-width: 100px;
    object-fit: contain;
}

/* ===================================
   Cadre gris du contenu (seul élément qui défile)
=================================== */

.organisme-tab-content[b-je0d8w3nj1] {
    flex: 0 1 auto;
    min-height: 120px;
    overflow-y: auto;

    padding: .8rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.organisme-tab-description[b-je0d8w3nj1] {
    margin: 0;
    padding-right: .3rem;

    font-size: .9rem;
    line-height: 1.6;
    color: #374151;
}

.organisme-tab-description ul[b-je0d8w3nj1],
.organisme-tab-description ol[b-je0d8w3nj1] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

.organisme-placeholder[b-je0d8w3nj1] {
    margin: .3rem 0;

    color: #9ca3af;
    font-size: .8rem;
    line-height: 1.5;
}

.organisme-btn-edit[b-je0d8w3nj1] {
    align-self: flex-end;
    margin-top: auto;
    flex-shrink: 0;

    position: sticky;
    bottom: 0;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.organisme-btn-edit:hover[b-je0d8w3nj1] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Listes Conditions / Documents
=================================== */

.organisme-conditions-list[b-je0d8w3nj1],
.organisme-documents-list[b-je0d8w3nj1] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    line-height: 1.5;
    color: #374151;
    font-size: .85rem;
}

.organisme-conditions-list li[b-je0d8w3nj1],
.organisme-documents-list li[b-je0d8w3nj1] {
    padding-left: .2rem;
}

.organisme-documents-list a[b-je0d8w3nj1] {
    color: #c92a2a;
    font-weight: 600;
    text-decoration: none;
}

.organisme-documents-list a:hover[b-je0d8w3nj1] {
    text-decoration: underline;
}

.empty-procedure[b-je0d8w3nj1] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* ===================================
   Coordonnées
=================================== */

.organisme-contact[b-je0d8w3nj1] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.organisme-contact-row[b-je0d8w3nj1] {
    display: flex;
    align-items: baseline;
    gap: .8rem;

    padding: .5rem .7rem;

    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.organisme-contact-row .organisme-field-label[b-je0d8w3nj1] {
    flex: 0 0 70px;
    font-size: .6rem;
}

.organisme-contact-value[b-je0d8w3nj1] {
    min-width: 0;

    font-size: .85rem;
    color: #374151;
    word-break: break-word;
}

/* ===================================
   Édition inline
=================================== */

.organisme-edit-zone[b-je0d8w3nj1] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.organisme-edit-input[b-je0d8w3nj1] {
    width: 100%;
    padding: .45rem .6rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    box-sizing: border-box;
}

.organisme-edit-list-item[b-je0d8w3nj1] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.organisme-edit-list-item .organisme-edit-input[b-je0d8w3nj1] {
    flex: 1;
}

.organisme-btn-remove[b-je0d8w3nj1] {
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f3f4f6;
    border: none;
    border-radius: 50%;

    color: #6b7280;
    font-size: .9rem;

    cursor: pointer;
    transition: .2s;
}

.organisme-btn-remove:hover[b-je0d8w3nj1] {
    background: #fdecec;
    color: #c92a2a;
}

.organisme-btn-add[b-je0d8w3nj1] {
    align-self: flex-start;

    padding: .35rem .7rem;

    font-size: .75rem;
    font-weight: 600;
    color: #c92a2a;

    background: #fdecec;
    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: .2s;
}

.organisme-btn-add:hover[b-je0d8w3nj1] {
    background: #f8d7d7;
}

.organisme-edit-actions[b-je0d8w3nj1] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .3rem;
}

.organisme-btn-cancel[b-je0d8w3nj1],
.organisme-btn-ok[b-je0d8w3nj1] {
    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: .2s;
}

.organisme-btn-cancel[b-je0d8w3nj1] {
    background: #f3f4f6;
    color: #6b7280;
}

.organisme-btn-cancel:hover[b-je0d8w3nj1] {
    background: #e5e7eb;
}

.organisme-btn-ok[b-je0d8w3nj1] {
    background: #c92a2a;
    color: #fff;
}

.organisme-btn-ok:hover[b-je0d8w3nj1] {
    background: #a81f1f;
}

/* ===================================
   Barre d'outils de l'éditeur riche
=================================== */

.organisme-editor-toolbar[b-je0d8w3nj1] {
    position: sticky;
    top: 0;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: .4rem;
    margin-bottom: .4rem;

    background: #f9fafb;
    border: none;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.organisme-editor-toolbar[b-je0d8w3nj1]::-webkit-scrollbar {
    display: none;
}

.organisme-editor-toolbar button[b-je0d8w3nj1],
.organisme-tool[b-je0d8w3nj1] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 28px;
    height: 28px;
    padding: 0 .3rem;

    background: transparent;
    border: none;
    border-radius: 4px;

    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;

    cursor: pointer;
    transition: .2s;
}

.organisme-editor-toolbar button:hover[b-je0d8w3nj1],
.organisme-tool:hover[b-je0d8w3nj1] {
    background: #fdecec;
    color: #c92a2a;
}

.organisme-tool-wide[b-je0d8w3nj1] {
    min-width: auto;
    padding: 0 .5rem;
    white-space: nowrap;
}

.organisme-tool-select[b-je0d8w3nj1] {
    flex-shrink: 0;

    height: 28px;
    padding: 0 .3rem;

    font-size: .72rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;

    cursor: pointer;
}

.organisme-tool-select:hover[b-je0d8w3nj1] {
    border-color: #c92a2a;
}

.organisme-toolbar-separator[b-je0d8w3nj1] {
    flex-shrink: 0;

    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 .3rem;
}

.organisme-color-picker[b-je0d8w3nj1] {
    flex-shrink: 0;

    width: 28px;
    height: 28px;
    padding: 2px;

    background: transparent;
    border: none;

    cursor: pointer;
}

.organisme-edit-richtext[b-je0d8w3nj1] {
    width: 100%;
    padding: .5rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;
    line-height: 1.5;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    overflow-y: auto;

    min-height: 10vh;
    max-height: 40vh;

    box-sizing: border-box;
}

.organisme-edit-richtext:focus[b-je0d8w3nj1] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.organisme-edit-richtext ul[b-je0d8w3nj1],
.organisme-edit-richtext ol[b-je0d8w3nj1] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - zone principale sur toute la largeur
   - volet latéral = tiroir fixe qui glisse (transform), comme
     le volet gauche de la page : même durée, même courbe
   - collé sous la bande des provinces, coins arrondis seulement
     en bas ; même haut / même bas que le volet gauche, via les
     variables --content-top, --content-bottom, --drawer-inset
     (définies sur .organisme-content dans Organisme.razor.css)
   - Statistiques : carte complète fixée en bas du volet (sticky)
   - ouverture pilotée par la classe .open (paramètre SideOpen)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .organisme-details[b-je0d8w3nj1] {
        flex-direction: row;
        height: 100%;
        overflow: hidden;
        gap: 0;
    }

    .organisme-details-main[b-je0d8w3nj1] {
        flex: 1 1 100%;
        max-width: none;
        width: auto;
        padding: .35rem;
    }

    /* ---------- Volet des informations (bande droite) ----------
       Toujours rendu, glisse hors écran quand il est fermé. */
        .organisme-details-side[b-je0d8w3nj1] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 30px) + var(--drawer-inset, 3px));
        right: 0;                                   /* collé au bord droit */
        left: auto;

        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        height: auto;
        margin: 0;
        padding: .6rem;
        box-sizing: border-box;
        align-self: auto;

        z-index: 1500;
        background: #fff;
        border-radius: 0 0 0 14px;
        overflow-y: auto;

        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }
    .organisme-details-side.open[b-je0d8w3nj1] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Rien n'est coupé : les cartes gardent leur hauteur complète */
    .organisme-side-top[b-je0d8w3nj1],
    .organisme-side-middle[b-je0d8w3nj1],
    .organisme-side-bottom[b-je0d8w3nj1] {
        flex: 0 0 auto;
        overflow: visible;
        padding: .45rem;
        gap: .25rem;
        border-radius: 10px;
    }

    /* Statistiques : carte complète, fixée en bas du volet avec une marge */
    .organisme-side-bottom[b-je0d8w3nj1] {
        position: sticky;
        bottom: .6rem;               /* même marge que le padding du volet */
        z-index: 2;

        margin-top: auto;            /* poussé en bas si le contenu est court */
        min-height: 0;

        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;

        /* 1) ombre légère au-dessus ; 2) bande blanche sous la carte
           pour masquer le contenu qui défile dans la marge du bas */
        box-shadow:
            0 -6px 8px -6px rgba(0, 0, 0, .15),
            0 .6rem 0 0 #fff;
    }

    .organisme-field-value[b-je0d8w3nj1],
    .organisme-identity-name[b-je0d8w3nj1],
    .organisme-identity-type[b-je0d8w3nj1],
    .organisme-side-links a[b-je0d8w3nj1] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    /* ---------- Onglets ---------- */
    .organisme-tabs[b-je0d8w3nj1] {
        padding: .15rem 0 .25rem;
        margin-top: 0;
        gap: .3rem;
    }

    .organisme-tabs-items[b-je0d8w3nj1] { gap: .3rem; }

    .organisme-tab[b-je0d8w3nj1] {
        padding: .25rem .6rem;
        font-size: .6rem;
        border-radius: 12px;
    }

    .organisme-tabs-org[b-je0d8w3nj1] { gap: .3rem; font-size: .6rem; }
    .organisme-logo[b-je0d8w3nj1] { height: 20px; max-width: 70px; }
    .organisme-subtitle[b-je0d8w3nj1] { font-size: .5rem; }

    /* ---------- Contenu ---------- */
    .organisme-tab-content[b-je0d8w3nj1] {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        padding: .5rem;
        gap: .35rem;
        border-radius: 9px;
    }

    .organisme-tab-description[b-je0d8w3nj1] { font-size: .72rem; line-height: 1.45; padding-right: .1rem; }
    .organisme-tab-description[b-je0d8w3nj1]  h1 { font-size: .95rem; margin: .3rem 0; }
    .organisme-tab-description[b-je0d8w3nj1]  h2 { font-size: .85rem; margin: .25rem 0; }
    .organisme-tab-description[b-je0d8w3nj1]  h3 { font-size: .78rem; margin: .2rem 0; }
    .organisme-tab-description[b-je0d8w3nj1]  p,
    .organisme-tab-description[b-je0d8w3nj1]  li { font-size: .72rem; line-height: 1.45; margin: .15rem 0; }
    .organisme-tab-description[b-je0d8w3nj1]  img { max-width: 100%; height: auto; }
    .organisme-tab-description[b-je0d8w3nj1]  table { font-size: .65rem; }
    .organisme-placeholder[b-je0d8w3nj1] { font-size: .65rem; margin: .15rem 0; }

    .organisme-conditions-list[b-je0d8w3nj1],
    .organisme-documents-list[b-je0d8w3nj1] { font-size: .72rem; gap: .3rem; padding-left: 1rem; line-height: 1.4; }

    .organisme-contact[b-je0d8w3nj1] { gap: .3rem; }
    .organisme-contact-row[b-je0d8w3nj1] { padding: .35rem .5rem; gap: .5rem; border-radius: 8px; }
    .organisme-contact-row .organisme-field-label[b-je0d8w3nj1] { flex: 0 0 52px; font-size: .5rem; }
    .organisme-contact-value[b-je0d8w3nj1] { font-size: .72rem; }

    .organisme-btn-edit[b-je0d8w3nj1],
    .organisme-side-edit-btn[b-je0d8w3nj1] { width: 22px; height: 22px; font-size: .55rem; }

    /* ---------- Cartes du volet (texte lisible) ---------- */
    .organisme-identity[b-je0d8w3nj1] { gap: .4rem; }
    .organisme-identity-avatar[b-je0d8w3nj1] { width: 34px; height: 34px; font-size: .65rem; }
    .organisme-identity-info[b-je0d8w3nj1] { margin-top: .1rem; }
    .organisme-identity-name[b-je0d8w3nj1] { font-size: .72rem; }
    .organisme-identity-type[b-je0d8w3nj1],
    .organisme-identity-pays[b-je0d8w3nj1] { font-size: .58rem; }

    .organisme-side-title[b-je0d8w3nj1] { font-size: .72rem; }
    .organisme-side-details[b-je0d8w3nj1] { gap: .25rem; margin-top: .2rem; padding-top: .3rem; }
    .organisme-side-field[b-je0d8w3nj1] { gap: .3rem; }
    .organisme-side-field > i[b-je0d8w3nj1] { width: .75rem; font-size: .58rem; }
    .organisme-field-label[b-je0d8w3nj1] { font-size: .46rem; }
    .organisme-field-value[b-je0d8w3nj1] { font-size: .6rem; }
    .organisme-stat-value[b-je0d8w3nj1] { font-size: .62rem; }
    .organisme-side-links[b-je0d8w3nj1] { font-size: .6rem; gap: .2rem; padding-left: .8rem; }

    /* ---------- Édition ---------- */
    .organisme-edit-zone[b-je0d8w3nj1] { gap: .35rem; }
    .organisme-edit-input[b-je0d8w3nj1] { padding: .3rem .4rem; font-size: .72rem; border-radius: 6px; }
    .organisme-btn-remove[b-je0d8w3nj1] { width: 20px; height: 20px; font-size: .7rem; }
    .organisme-btn-add[b-je0d8w3nj1] { padding: .25rem .5rem; font-size: .62rem; }
    .organisme-btn-cancel[b-je0d8w3nj1],
    .organisme-btn-ok[b-je0d8w3nj1] { padding: .25rem .7rem; font-size: .62rem; }

    .organisme-editor-toolbar[b-je0d8w3nj1] { padding: .2rem; gap: .2rem; margin-bottom: .3rem; }
    .organisme-editor-toolbar button[b-je0d8w3nj1],
    .organisme-tool[b-je0d8w3nj1] { min-width: 22px; height: 22px; padding: 0 .2rem; font-size: .62rem; }
    .organisme-editor-toolbar svg[b-je0d8w3nj1] { width: 11px; height: 11px; }
    .organisme-tool-select[b-je0d8w3nj1] { height: 22px; font-size: .58rem; padding: 0 .2rem; }
    .organisme-color-picker[b-je0d8w3nj1] { width: 22px; height: 22px; }
    .organisme-toolbar-separator[b-je0d8w3nj1] { height: 14px; margin: 0 .15rem; }
    .organisme-edit-richtext[b-je0d8w3nj1] { font-size: .72rem; padding: .35rem; min-height: 8vh; max-height: 30vh; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    /* top / bottom viennent des variables de .organisme-content (148px / 26px) */
    .organisme-details-side[b-je0d8w3nj1] {
        width: var(--drawer-w, 55vw);
        max-width: var(--drawer-w, 55vw);
    }

    .organisme-tab[b-je0d8w3nj1] { font-size: .55rem; padding: .18rem .45rem; }
    .organisme-tab-content[b-je0d8w3nj1] { padding: .35rem; }

    .organisme-tab-description[b-je0d8w3nj1],
    .organisme-tab-description[b-je0d8w3nj1]  p,
    .organisme-tab-description[b-je0d8w3nj1]  li,
    .organisme-conditions-list[b-je0d8w3nj1],
    .organisme-documents-list[b-je0d8w3nj1],
    .organisme-contact-value[b-je0d8w3nj1] { font-size: .65rem; }

    .organisme-identity-avatar[b-je0d8w3nj1] { width: 28px; height: 28px; }
    .organisme-identity-name[b-je0d8w3nj1] { font-size: .62rem; }
    .organisme-field-value[b-je0d8w3nj1],
    .organisme-side-links[b-je0d8w3nj1],
    .organisme-stat-value[b-je0d8w3nj1] { font-size: .55rem; }
    .organisme-field-label[b-je0d8w3nj1] { font-size: .42rem; }
    .organisme-side-title[b-je0d8w3nj1] { font-size: .62rem; }
}
/* /Components/Pages/Assistance/Organisme/Organisme.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.organisme-page[b-dhtrtvs5xo] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES PROVINCES (bureau)
========================================== */

.organisme-sticky[b-dhtrtvs5xo] {
    position: fixed;
    top: 80px;
    left: 250px;
    right: 70px;
    height: 140px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 12px;

    z-index: 1000;
    overflow: hidden;
}

.provinces-scroll[b-dhtrtvs5xo] {
    display: flex;
    align-items: center;
    gap: .8rem;

    height: 100%;

    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.provinces-scroll[b-dhtrtvs5xo]::-webkit-scrollbar {
    display: none;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.organisme-content[b-dhtrtvs5xo] {
    position: fixed;

    top: 220px;
    bottom: 20px;
    left: 240px;
    right: 30px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

.organisme-left[b-dhtrtvs5xo] {
    flex: 0 0 22%;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;

    padding: .3rem;
}

.organisme-right[b-dhtrtvs5xo] {
    flex: 1;
    min-width: 0;
    height: 100%;

    overflow: hidden;

    background: #fff;
    border-radius: 12px;
}

/* Languettes et fond cliquable : cachés sur ordinateur */
.organisme-content .drawer-tab[b-dhtrtvs5xo],
.organisme-content .drawer-backdrop[b-dhtrtvs5xo] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - volets et languettes glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors des volets les referme (fond cliquable)
   - volets collés sous la bande des provinces, coins arrondis
     seulement en bas
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des provinces : pleine largeur, sans coins arrondis */
    html body .organisme-sticky[b-dhtrtvs5xo] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .organisme-content[b-dhtrtvs5xo] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .organisme-content .organisme-right[b-dhtrtvs5xo] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    html body .organisme-content .drawer-backdrop[b-dhtrtvs5xo] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .organisme-content .organisme-left[b-dhtrtvs5xo] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        min-width: 0 !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .organisme-content.left-open .organisme-left[b-dhtrtvs5xo] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .organisme-content .drawer-tab[b-dhtrtvs5xo] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .organisme-content .drawer-tab:hover[b-dhtrtvs5xo] {
        background: rgba(225, 110, 110, .98);
    }

    .organisme-content .drawer-tab-left[b-dhtrtvs5xo] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .organisme-content.left-open .drawer-tab-left[b-dhtrtvs5xo] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .organisme-content .drawer-tab-right[b-dhtrtvs5xo] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .organisme-content.right-open .drawer-tab-right[b-dhtrtvs5xo] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .organisme-sticky[b-dhtrtvs5xo] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .organisme-sticky[b-dhtrtvs5xo]  .stats-scroll {
        gap: 4px !important;
        padding: 2px 4px 3px !important;
    }

    html body .organisme-sticky[b-dhtrtvs5xo]  .stat-card {
        flex: 0 0 52px !important;
        height: 46px !important;
        padding: 2px !important;
        gap: 1px !important;
        border-radius: 7px !important;
    }

    html body .organisme-sticky[b-dhtrtvs5xo]  .province-flag {
        width: 20px !important;
        height: 20px !important;
    }

    html body .organisme-sticky[b-dhtrtvs5xo]  .stat-value {
        display: none !important;
    }

    html body .organisme-sticky[b-dhtrtvs5xo]  .stat-label {
        font-size: .4rem !important;
        line-height: 1.05 !important;
        margin-top: 0 !important;
    }

    html body .organisme-sticky[b-dhtrtvs5xo]  .programs-badge {
        min-width: 11px !important;
        height: 11px !important;
        font-size: .38rem !important;
        top: 1px !important;
        right: 1px !important;
        padding: 0 3px !important;
    }

    html body .organisme-content[b-dhtrtvs5xo] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --drawer-w: 55vw;
        --left-w: calc((100vw - 12px) * .55);
    }

    html body .organisme-content .organisme-left[b-dhtrtvs5xo] {
        width: var(--left-w) !important;
    }

    .organisme-content .drawer-tab[b-dhtrtvs5xo] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Carte/Carte.razor.rz.scp.css */
/* ============================================================
   ROOT / MAP
   ============================================================ */

.carte-root[b-nqfxrqcxws] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
}

.map-wrapper[b-nqfxrqcxws] {
    position: absolute;
    inset: 0;
}

.leaflet-map[b-nqfxrqcxws] {
    width: 100%;
    height: 100%;
}

/* Effet de bordure floutée blanche : un halo doux qui fond vers le blanc
   sur tout le pourtour de la carte, sans cadre net. */
.carte-root[b-nqfxrqcxws]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
    box-shadow: inset 0 0 90px 45px rgba(255, 255, 255, 0.95);
}

/* ============================================================
   OVERLAY DU HAUT (logo / recherche / avatar)
   ============================================================ */

.top-overlay[b-nqfxrqcxws] {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 15px);
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 500;
}

.logo-badge[b-nqfxrqcxws] {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

    .logo-badge img[b-nqfxrqcxws] {
        width: 36px;
        height: 36px;
        object-fit: contain;
    }

.search-bar[b-nqfxrqcxws] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 44px;
    background-color: #ffffff;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.search-icon[b-nqfxrqcxws] {
    color: #757575;
    font-size: 16px;
}

.search-input[b-nqfxrqcxws] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
}

.avatar-badge[b-nqfxrqcxws] {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2.5px solid #D32F2F;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E0E0E0;
    overflow: hidden;
    cursor: pointer;
}

.avatar-img[b-nqfxrqcxws] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-nqfxrqcxws] {
    color: #9E9E9E;
    font-size: 18px;
}

/* ============================================================
   DIALOGUE AGENT — style Apple, épuré et compact
   ============================================================ */

.dialog-backdrop[b-nqfxrqcxws] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 32px 16px;
}

.dialog-card[b-nqfxrqcxws] {
    width: 100%;
    max-width: 480px;
    max-height: 82vh;
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    color: #1d1d1f;
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.dialog-loading[b-nqfxrqcxws] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.spinner[b-nqfxrqcxws] {
    width: 24px;
    height: 24px;
    border: 2.5px solid #ececee;
    border-top-color: #c92a2a;
    border-radius: 50%;
    animation: spin-b-nqfxrqcxws 0.8s linear infinite;
}

@keyframes spin-b-nqfxrqcxws {
    to {
        transform: rotate(360deg);
    }
}

/* ---- header ---- */

.dialog-header[b-nqfxrqcxws] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
}

.dialog-avatar[b-nqfxrqcxws] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f5f5f7;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

    .dialog-avatar img[b-nqfxrqcxws] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        position: relative;
        z-index: 1;
    }

.dialog-header-info[b-nqfxrqcxws] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dialog-header-row[b-nqfxrqcxws] {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialog-header-row.muted[b-nqfxrqcxws] {
    font-size: 11px;
    color: #86868b;
    font-weight: 500;
}

.dialog-name[b-nqfxrqcxws] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.verified-icon[b-nqfxrqcxws] {
    font-size: 11px;
    flex-shrink: 0;
}

    .verified-icon.verified[b-nqfxrqcxws] {
        color: #2e7d32;
    }

    .verified-icon.unverified[b-nqfxrqcxws] {
        color: #c92a2a;
    }

.star[b-nqfxrqcxws] {
    font-size: 9px;
    color: #d2d2d7;
}

    .star.filled[b-nqfxrqcxws] {
        color: #c92a2a;
    }

.pin-icon[b-nqfxrqcxws] {
    font-size: 10px;
    color: #86868b;
    flex-shrink: 0;
}

.address-text[b-nqfxrqcxws] {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- content ---- */

.dialog-content[b-nqfxrqcxws] {
    padding: 0 18px 4px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dialog-content[b-nqfxrqcxws]::before {
    content: "";
    display: block;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 0 0 2px;
}

/* Étiquettes de section — façon "section header" iOS : petites capitales grises */
.section-label[b-nqfxrqcxws] {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #86868b;
    margin-bottom: 4px;
    background: none;
    border: none;
    padding: 0;
}

.section-label-row[b-nqfxrqcxws] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0;
}

.section-text[b-nqfxrqcxws] {
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    color: #1d1d1f;
}

.section-error[b-nqfxrqcxws] {
    font-size: 12px;
    color: #c92a2a;
    background: #fdecec;
    border-radius: 10px;
    padding: 8px 10px;
    margin: 0;
}

.services-list[b-nqfxrqcxws] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.service-row[b-nqfxrqcxws] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #f5f5f7;
    border-radius: 8px;
}

.service-chip[b-nqfxrqcxws] {
    font-size: 12px;
    font-weight: 500;
    color: #1d1d1f;
    white-space: nowrap;
    border: none;
    padding: 0;
}

.service-divider[b-nqfxrqcxws] {
    flex: 1 1 auto;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08);
}

.payment-chip[b-nqfxrqcxws] {
    font-size: 11.5px;
    color: #86868b;
    padding: 0;
    border: none;
    max-width: 150px;
    white-space: nowrap;
    overflow-x: auto;
}

.contact-block[b-nqfxrqcxws] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-row[b-nqfxrqcxws] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
}

.gallery-strip[b-nqfxrqcxws] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 6px;
    margin: 0;
}

.gallery-thumb[b-nqfxrqcxws] {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #f5f5f7;
    transition: opacity .15s ease;
    position: relative;
    z-index: 1;
}

    .gallery-thumb:active[b-nqfxrqcxws] {
        opacity: 0.7;
    }

    .gallery-thumb img[b-nqfxrqcxws] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        position: relative;
        z-index: 1;
    }

/* ---- actions ---- */

.dialog-actions[b-nqfxrqcxws] {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    gap: 4px;
}

.actions-spacer[b-nqfxrqcxws] {
    flex: 1 1 auto;
}

.stat-btn[b-nqfxrqcxws] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #86868b;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}

    .stat-btn:hover[b-nqfxrqcxws] {
        background: #f5f5f7;
    }

    .stat-btn .stat-icon[b-nqfxrqcxws] {
        font-size: 15px;
    }

    .stat-btn.voted[b-nqfxrqcxws] {
        color: #c92a2a;
    }

.add-agent-btn[b-nqfxrqcxws] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #c92a2a;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s ease, transform .1s ease;
}

    .add-agent-btn:hover[b-nqfxrqcxws] {
        opacity: 0.9;
    }

    .add-agent-btn:active[b-nqfxrqcxws] {
        transform: scale(0.94);
    }

    .add-agent-btn:disabled[b-nqfxrqcxws] {
        opacity: 0.5;
        cursor: default;
    }

/* ============================================================
   ZOOM GALERIE
   ============================================================ */

.zoom-backdrop[b-nqfxrqcxws] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647;
    padding: 24px;
}

.zoom-image[b-nqfxrqcxws] {
    max-width: 80vw;
    max-height: 80vh;
    border-radius: 16px;
    object-fit: contain;
}

.payment-list[b-nqfxrqcxws] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.payment-chip[b-nqfxrqcxws] {
    font-size: 11.5px;
    color: #1d1d1f;
    background: #f5f5f7;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    max-width: none;
    overflow-x: visible;
}

/* ============================================================
   MOBILE + PAYSAGE COMPACT : dialogue agent miniaturisé
   ============================================================ */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .dialog-backdrop[b-nqfxrqcxws] {
        padding: 10px 8px;
    }

    .dialog-card[b-nqfxrqcxws] {
        max-width: 300px;
        max-height: 70vh;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    }

    .dialog-loading[b-nqfxrqcxws] { padding: 24px; }
    .spinner[b-nqfxrqcxws] { width: 18px; height: 18px; border-width: 2px; }

    /* ---- header ---- */
    .dialog-header[b-nqfxrqcxws] { gap: 8px; padding: 10px 10px 8px; }
    .dialog-avatar[b-nqfxrqcxws] { width: 34px; height: 34px; }
    .dialog-header-info[b-nqfxrqcxws] { gap: 1px; }
    .dialog-header-row[b-nqfxrqcxws] { gap: 3px; }
    .dialog-header-row.muted[b-nqfxrqcxws] { font-size: 9px; }
    .dialog-name[b-nqfxrqcxws] { font-size: 12px; }
    .verified-icon[b-nqfxrqcxws] { font-size: 9px; }
    .star[b-nqfxrqcxws] { font-size: 7px; }
    .pin-icon[b-nqfxrqcxws] { font-size: 8px; }
    .address-text[b-nqfxrqcxws] { font-size: 9px; }

    /* ---- contenu ---- */
    .dialog-content[b-nqfxrqcxws] { padding: 0 10px 2px; gap: 8px; }
    .section-label[b-nqfxrqcxws] { font-size: 8.5px; margin-bottom: 2px; }
    .section-text[b-nqfxrqcxws] { font-size: 10.5px; line-height: 1.35; }
    .section-error[b-nqfxrqcxws] { font-size: 10px; padding: 5px 7px; border-radius: 8px; }

    .services-list[b-nqfxrqcxws] { gap: 3px; }
    .service-row[b-nqfxrqcxws] { padding: 4px 6px; border-radius: 6px; gap: 5px; }
    .service-chip[b-nqfxrqcxws] { font-size: 10px; }

    .payment-list[b-nqfxrqcxws] { gap: 4px; }
    .payment-chip[b-nqfxrqcxws] { font-size: 9.5px; padding: 3px 7px; }

    .contact-row[b-nqfxrqcxws] { font-size: 10.5px; padding: 2px 0; gap: 5px; }

    .gallery-strip[b-nqfxrqcxws] { gap: 4px; padding: 1px 0 4px; }
    .gallery-thumb[b-nqfxrqcxws] { width: 38px; height: 38px; border-radius: 7px; }

    /* ---- actions ---- */
    .dialog-actions[b-nqfxrqcxws] { padding: 7px 10px; margin-top: 2px; gap: 2px; }
    .stat-btn[b-nqfxrqcxws] { font-size: 10px; padding: 4px 5px; gap: 3px; border-radius: 6px; }
    .stat-btn .stat-icon[b-nqfxrqcxws] { font-size: 12px; }
    .add-agent-btn[b-nqfxrqcxws] { width: 24px; height: 24px; font-size: 14px; }

    /* ---- zoom galerie ---- */
    .zoom-backdrop[b-nqfxrqcxws] { padding: 12px; }
    .zoom-image[b-nqfxrqcxws] { max-width: 90vw; max-height: 75vh; border-radius: 10px; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    .dialog-card[b-nqfxrqcxws] {
        max-width: 340px;
        max-height: 88vh;
    }

    .dialog-header[b-nqfxrqcxws] { padding: 6px 10px 4px; }
    .dialog-avatar[b-nqfxrqcxws] { width: 28px; height: 28px; }
    .dialog-content[b-nqfxrqcxws] { gap: 5px; }
    .gallery-thumb[b-nqfxrqcxws] { width: 30px; height: 30px; }
    .dialog-actions[b-nqfxrqcxws] { padding: 4px 10px; }
}
/* /Components/Pages/Emploi/Preparation/Emploi.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.emploi-page[b-9ohr8el7fs]{
min-height:100vh;
background:url("/images/background.jpg") center/cover fixed no-repeat;
}


/* ==========================================
   EMPLOICARDS FIXE EN HAUT
========================================== */

.emploi-sticky[b-9ohr8el7fs]{
position:fixed;
top:120px;
left:250px;
right:70px;
height:80px;

padding:.5rem;
background:#fff;

border-bottom:1px solid #eee;
border-radius:16px;

z-index:1000;
overflow:hidden;
}


/* ==========================================
   CONTENU CENTRAL
========================================== */

.emploi-content[b-9ohr8el7fs]{
position:fixed;

top:200px;
bottom:40px;
left:250px;
right:70px;

display:flex;
gap:1rem;

padding:1rem;

background:rgba(255,255,255,.9);
border-radius:16px;

overflow:hidden;
}

/* Colonne gauche : liste des outils */
.emploi-left[b-9ohr8el7fs]{
flex:0 0 25%;
height:100%;

overflow-y:auto;

background:#fff;
border:1px solid #eee;
border-radius:12px;

padding:.5rem;
}

/* Colonne droite : détails de l'outil sélectionné */
.emploi-right[b-9ohr8el7fs]{
flex:1;
height:100%;

overflow-y:auto;

background:#fff;
border:1px solid #eee;
border-radius:12px;

padding:1rem;
}

.empty-emploi[b-9ohr8el7fs]{
height:100%;

display:flex;
align-items:center;
justify-content:center;

color:#6b7280;
font-size:.85rem;
}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:900px){

.emploi-sticky[b-9ohr8el7fs]{
left:0;
right:0;
top:70px;
height:80px;

border-radius:0;
    }

.emploi-content[b-9ohr8el7fs]{
left:0;
right:0;
top:160px;
bottom:20px;

border-radius:0;

flex-direction:column;
    }

.emploi-left[b-9ohr8el7fs],
.emploi-right[b-9ohr8el7fs]{
flex:1;
width:100%;
    }

}
/* /Components/Pages/Emploi/Preparation/InfoEmploi.razor.rz.scp.css */
.emploi-details[b-qno1dmydmi] {
display: flex;
flex-direction: column;
gap: .6rem;
}

.emploi-details-name[b-qno1dmydmi] {
margin: 0;

font-size: 1.1rem;
font-weight: 700;
color: #111827;
}

.emploi-details-description[b-qno1dmydmi] {
margin: 0;

font-size: .9rem;
line-height: 1.6;
color: #374151;
}

.emploi-details-count[b-qno1dmydmi] {
width: max-content;

padding: .15rem .6rem;

border-radius: 999px;

background: #fdecec;
color: #c92a2a;

font-size: .75rem;
font-weight: 700;
}

.empty-emploi[b-qno1dmydmi] {
height: 100%;

display: flex;
align-items: center;
justify-content: center;

color: #6b7280;
font-size: .85rem;
}
/* /Components/Pages/Emploi/Recherche/InfoRechercheEmploi.razor.rz.scp.css */
/* ===================================
   Layout principal (78% / 20%)
=================================== */

.infoRechercheEmploi-details[b-s903yny4pr] {
    display: flex;
    align-items: stretch;
    gap: .8rem;

    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Le contenu principal défile seul ; les onglets (sticky) restent en haut */
.infoRechercheEmploi-details-main[b-s903yny4pr] {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;
    min-height: 0;

    overflow-y: auto;
    scrollbar-width: thin;
}

/* ===================================
   Colonne latérale (20%) : 4 cartes
=================================== */

.infoRechercheEmploi-details-side[b-s903yny4pr] {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Style commun aux 4 cartes */
.infoRechercheEmploi-side-top[b-s903yny4pr],
.infoRechercheEmploi-side-middle[b-s903yny4pr],
.infoRechercheEmploi-side-consultants[b-s903yny4pr],
.infoRechercheEmploi-side-bottom[b-s903yny4pr] {
    box-sizing: border-box;
    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoRechercheEmploi-side-top[b-s903yny4pr]::-webkit-scrollbar,
.infoRechercheEmploi-side-middle[b-s903yny4pr]::-webkit-scrollbar,
.infoRechercheEmploi-side-consultants[b-s903yny4pr]::-webkit-scrollbar,
.infoRechercheEmploi-side-bottom[b-s903yny4pr]::-webkit-scrollbar {
    display: none;
}

/* Cartes du haut : hauteur selon le contenu, rétrécissent (avec défilement)
   si la colonne manque de place */
.infoRechercheEmploi-side-top[b-s903yny4pr],
.infoRechercheEmploi-side-middle[b-s903yny4pr] {
    flex: 0 1 auto;
    min-height: 60px;
}

.infoRechercheEmploi-side-consultants[b-s903yny4pr] {
    flex: 0 1 auto;
    min-height: 90px;
}

/* Statistiques : jamais écrasée, toujours collée au fond de la colonne */
.infoRechercheEmploi-side-bottom[b-s903yny4pr] {
    flex: 0 0 auto;
    min-height: 60px;
    margin-top: auto;
}

/* ===================================
   Carte 1 : identité (avatar à droite)
=================================== */

.infoRechercheEmploi-identity[b-s903yny4pr] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.infoRechercheEmploi-identity-avatar[b-s903yny4pr] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.infoRechercheEmploi-identity-avatar img[b-s903yny4pr] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.infoRechercheEmploi-identity-info[b-s903yny4pr] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    margin-top: 1rem;
}

.infoRechercheEmploi-identity-name[b-s903yny4pr] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoRechercheEmploi-identity-type[b-s903yny4pr] {
    font-size: .7rem;
    color: #6b7280;
}

/* ===================================
   Champs des cartes
=================================== */

.infoRechercheEmploi-side-title[b-s903yny4pr] {
    display: block;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;
}

.infoRechercheEmploi-side-details[b-s903yny4pr] {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    margin-top: .3rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

/* Pas de filet ni de marge en haut quand la liste est seule dans la carte */
.infoRechercheEmploi-side-details--plain[b-s903yny4pr] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.infoRechercheEmploi-side-field[b-s903yny4pr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.infoRechercheEmploi-side-field > i[b-s903yny4pr] {
    flex-shrink: 0;
    width: .9rem;
    text-align: center;
    font-size: .7rem;
    color: #9ca3af;
}

.infoRechercheEmploi-field-label[b-s903yny4pr] {
    flex-shrink: 0;

    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.infoRechercheEmploi-field-value[b-s903yny4pr] {
    font-size: .68rem;
    color: #374151;
    text-align: right;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infoRechercheEmploi-field-value--wrap[b-s903yny4pr] {
    white-space: normal;
    word-break: break-word;
}

.infoRechercheEmploi-field-link[b-s903yny4pr] {
    color: #c92a2a;
    text-decoration: none;
}

.infoRechercheEmploi-field-link:hover[b-s903yny4pr] {
    text-decoration: underline;
}

.infoRechercheEmploi-side-notes[b-s903yny4pr] {
    margin: 0;

    font-size: .7rem;
    line-height: 1.5;
    color: #374151;
    white-space: pre-wrap;
}

/* Carte 4 : statistiques */
.infoRechercheEmploi-stat-value[b-s903yny4pr] {
    font-size: .72rem;
    font-weight: 700;
    color: #111827;
    text-align: right;
}

/* ===================================
   Carte 3 : conseillers
=================================== */

.infoRechercheEmploi-consultant-list[b-s903yny4pr] {
    margin: .3rem 0 0;
    padding: .5rem 0 0;
    list-style: none;
    border-top: 1px solid #e5e7eb;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoRechercheEmploi-consultant[b-s903yny4pr] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.infoRechercheEmploi-consultant-avatar[b-s903yny4pr] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-size: .7rem;
    font-weight: 600;
}

.infoRechercheEmploi-consultant-avatar img[b-s903yny4pr] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.infoRechercheEmploi-consultant-info[b-s903yny4pr] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Nom + icônes sur la même ligne */
.infoRechercheEmploi-consultant-head[b-s903yny4pr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    min-width: 0;
}

.infoRechercheEmploi-consultant-name[b-s903yny4pr] {
    flex: 1;
    min-width: 0;

    font-size: .74rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoRechercheEmploi-consultant-icons[b-s903yny4pr] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.infoRechercheEmploi-consultant-icon[b-s903yny4pr] {
    font-size: .64rem;
    color: #9ca3af;
    text-decoration: none;
    transition: color .2s;
}

.infoRechercheEmploi-consultant-icon:hover[b-s903yny4pr],
.infoRechercheEmploi-consultant:hover .infoRechercheEmploi-consultant-icon[b-s903yny4pr] {
    color: #c92a2a;
}

.infoRechercheEmploi-consultant-title[b-s903yny4pr] {
    font-size: .64rem;
    color: #6b7280;
}

.infoRechercheEmploi-consultant-line[b-s903yny4pr] {
    font-size: .64rem;
    word-break: break-all;
}

/* Coordonnées : cachées, affichées au survol */
.infoRechercheEmploi-consultant-details[b-s903yny4pr] {
    display: flex;
    flex-direction: column;

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease;
}

.infoRechercheEmploi-consultant:hover .infoRechercheEmploi-consultant-details[b-s903yny4pr],
.infoRechercheEmploi-consultant:focus-within .infoRechercheEmploi-consultant-details[b-s903yny4pr] {
    max-height: 4rem;
    opacity: 1;
    margin-top: .15rem;
}

/* Écrans tactiles (pas de survol) : toujours visibles */
@media (hover: none) {
    .infoRechercheEmploi-consultant-details[b-s903yny4pr] {
        max-height: 4rem;
        opacity: 1;
        margin-top: .15rem;
    }
}

/* ===================================
   Crayon des cartes latérales (bas à droite)
=================================== */

.infoRechercheEmploi-side-edit-btn[b-s903yny4pr] {
    align-self: flex-end;
    margin-top: auto;
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.infoRechercheEmploi-side-edit-btn:hover[b-s903yny4pr] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Onglets (pilules) + libellé à droite
=================================== */

.infoRechercheEmploi-tabs[b-s903yny4pr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;

    margin-top: .1rem;

    position: sticky;
    top: 0;
    z-index: 10;

    background: #fff;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.infoRechercheEmploi-tabs > span[b-s903yny4pr] {
    flex-shrink: 0;

    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;

    white-space: nowrap;
}

.infoRechercheEmploi-tabs-items[b-s903yny4pr] {
    display: flex;
    gap: .6rem;

    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoRechercheEmploi-tabs-items[b-s903yny4pr]::-webkit-scrollbar {
    display: none;
}

.infoRechercheEmploi-tab[b-s903yny4pr] {
    flex-shrink: 0;
    white-space: nowrap;

    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;
    color: #b9bdc4;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;

    cursor: pointer;
    transition: .2s;
}

.infoRechercheEmploi-tab:hover[b-s903yny4pr] {
    background: #fdecec;
    color: #c92a2a;
}

.infoRechercheEmploi-tab.active[b-s903yny4pr] {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
}

/* ===================================
   Cadre gris du contenu
=================================== */

.infoRechercheEmploi-tab-content[b-s903yny4pr] {
    padding: .8rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoRechercheEmploi-tab-description[b-s903yny4pr] {
    margin: 0;
    padding-right: .3rem;

    font-size: .9rem;
    line-height: 1.6;
    color: #374151;

    max-height: 63vh;
    overflow-y: auto;
}

.infoRechercheEmploi-tab-description ul[b-s903yny4pr],
.infoRechercheEmploi-tab-description ol[b-s903yny4pr] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

.infoRechercheEmploi-placeholder[b-s903yny4pr] {
    margin: .3rem 0;

    color: #9ca3af;
    font-size: .8rem;
    line-height: 1.5;
}

.empty-rechercheEmploi[b-s903yny4pr] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-size: .85rem;
}

/* Crayon du contenu principal */
.infoRechercheEmploi-btn-edit[b-s903yny4pr] {
    align-self: flex-end;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.infoRechercheEmploi-btn-edit:hover[b-s903yny4pr] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Zone d'édition inline
=================================== */

.infoRechercheEmploi-edit-zone[b-s903yny4pr] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoRechercheEmploi-edit-actions[b-s903yny4pr] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .3rem;
}

.infoRechercheEmploi-btn-cancel[b-s903yny4pr],
.infoRechercheEmploi-btn-ok[b-s903yny4pr] {
    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: .2s;
}

.infoRechercheEmploi-btn-cancel[b-s903yny4pr] {
    background: #f3f4f6;
    color: #6b7280;
}

.infoRechercheEmploi-btn-cancel:hover[b-s903yny4pr] {
    background: #e5e7eb;
}

.infoRechercheEmploi-btn-ok[b-s903yny4pr] {
    background: #c92a2a;
    color: #fff;
}

.infoRechercheEmploi-btn-ok:hover[b-s903yny4pr] {
    background: #a81f1f;
}

/* ===================================
   Barre d'outils de l'éditeur riche
=================================== */

.infoRechercheEmploi-editor-toolbar[b-s903yny4pr] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: .4rem;
    margin-bottom: .4rem;

    background: transparent;
    border: none;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoRechercheEmploi-editor-toolbar[b-s903yny4pr]::-webkit-scrollbar {
    display: none;
}

.infoRechercheEmploi-editor-toolbar button[b-s903yny4pr],
.infoRechercheEmploi-tool[b-s903yny4pr] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 28px;
    height: 28px;
    padding: 0 .3rem;

    background: transparent;
    border: none;
    border-radius: 4px;

    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;

    cursor: pointer;
    transition: .2s;
}

.infoRechercheEmploi-editor-toolbar button:hover[b-s903yny4pr],
.infoRechercheEmploi-tool:hover[b-s903yny4pr] {
    background: #fdecec;
    color: #c92a2a;
}

.infoRechercheEmploi-tool-wide[b-s903yny4pr] {
    min-width: auto;
    padding: 0 .5rem;
    white-space: nowrap;
}

.infoRechercheEmploi-tool-select[b-s903yny4pr] {
    flex-shrink: 0;

    height: 28px;
    padding: 0 .3rem;

    font-size: .72rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;

    cursor: pointer;
}

.infoRechercheEmploi-tool-select:hover[b-s903yny4pr] {
    border-color: #c92a2a;
}

.infoRechercheEmploi-toolbar-separator[b-s903yny4pr] {
    flex-shrink: 0;

    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 .3rem;
}

.infoRechercheEmploi-color-picker[b-s903yny4pr] {
    flex-shrink: 0;

    width: 28px;
    height: 28px;
    padding: 2px;

    background: transparent;
    border: none;

    cursor: pointer;
}

.infoRechercheEmploi-edit-richtext[b-s903yny4pr] {
    width: 100%;
    padding: .5rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;
    line-height: 1.5;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    overflow-y: auto;

    min-height: 10vh;
    max-height: 40vh;

    box-sizing: border-box;
}

.infoRechercheEmploi-edit-richtext:focus[b-s903yny4pr] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.infoRechercheEmploi-edit-richtext ul[b-s903yny4pr],
.infoRechercheEmploi-edit-richtext ol[b-s903yny4pr] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - zone principale sur toute la largeur
   - volet latéral = tiroir fixe qui glisse (transform), comme
     le volet gauche de la page : même durée, même courbe
   - collé sous la bande des catégories, coins arrondis seulement
     en bas ; même haut / même bas que le volet gauche, via les
     variables --content-top, --content-bottom, --drawer-inset
     (définies sur .rechercheEmploi-content dans RechercheEmploi.razor.css)
   - Statistiques : carte complète fixée en bas du volet (sticky)
   - ouverture pilotée par la classe .open (paramètre SideOpen)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .infoRechercheEmploi-details[b-s903yny4pr] {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: stretch;
        height: 100%;
        overflow: hidden;
        gap: 0;
    }

    .infoRechercheEmploi-details-main[b-s903yny4pr] {
        flex: 1 1 100%;
        max-width: none;
        width: auto;
        max-height: 100%;
        min-height: 0;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        padding: .35rem;
        box-sizing: border-box;
    }

    /* ---------- Volet des informations (bande droite) ----------
       Toujours rendu, glisse hors écran quand il est fermé. */
    .infoRechercheEmploi-details-side[b-s903yny4pr] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 30px) + var(--drawer-inset, 3px));
        right: 0;                                   /* collé au bord droit */
        left: auto;

        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        height: auto;
        margin: 0;
        padding: .6rem;
        box-sizing: border-box;

        z-index: 1500;
        background: #fff;
        border-radius: 0 0 0 14px;
        overflow-y: auto;

        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .infoRechercheEmploi-details-side.open[b-s903yny4pr] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Rien n'est coupé : les cartes gardent leur hauteur complète */
    .infoRechercheEmploi-side-top[b-s903yny4pr],
    .infoRechercheEmploi-side-middle[b-s903yny4pr],
    .infoRechercheEmploi-side-consultants[b-s903yny4pr],
    .infoRechercheEmploi-side-bottom[b-s903yny4pr] {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 0;
        padding: .45rem;
        gap: .25rem;
        border-radius: 10px;
    }

    /* Statistiques : carte complète, fixée en bas du volet avec une marge */
    .infoRechercheEmploi-side-bottom[b-s903yny4pr] {
        position: sticky;
        bottom: .6rem;               /* même marge que le padding du volet */
        z-index: 5;

        margin-top: auto;            /* poussé en bas si le contenu est court */

        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;

        /* 1) ombre légère au-dessus ; 2) bande blanche sous la carte
           pour masquer le contenu qui défile dans la marge du bas */
        box-shadow:
            0 -6px 8px -6px rgba(0, 0, 0, .15),
            0 .6rem 0 0 #fff;
    }

    .infoRechercheEmploi-field-value[b-s903yny4pr],
    .infoRechercheEmploi-identity-name[b-s903yny4pr],
    .infoRechercheEmploi-identity-type[b-s903yny4pr],
    .infoRechercheEmploi-consultant-name[b-s903yny4pr] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    /* ---------- Onglets ---------- */
    .infoRechercheEmploi-tabs[b-s903yny4pr] {
        position: static;
        padding: .2rem 0 .3rem;
        margin-top: 0;
        gap: .3rem;
    }

    .infoRechercheEmploi-tabs-items[b-s903yny4pr] { gap: .15rem; }

    .infoRechercheEmploi-tab[b-s903yny4pr] {
        padding: .12rem .45rem;
        font-size: .6rem;
        border-radius: 14px;
    }

    .infoRechercheEmploi-tabs > span[b-s903yny4pr] { font-size: .7rem; }

    /* ---------- Contenu : hauteur flexible ---------- */
    .infoRechercheEmploi-tab-content[b-s903yny4pr] {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: .6rem;
        gap: .4rem;
        border-radius: 10px;
    }

    .infoRechercheEmploi-tab-description[b-s903yny4pr] {
        max-height: none;
        overflow: visible;
        font-size: .82rem;
        line-height: 1.5;
        padding-right: .1rem;
    }

    .infoRechercheEmploi-tab-description[b-s903yny4pr]  h1 { font-size: 1.05rem; margin: .35rem 0; }
    .infoRechercheEmploi-tab-description[b-s903yny4pr]  h2 { font-size: .95rem; margin: .3rem 0; }
    .infoRechercheEmploi-tab-description[b-s903yny4pr]  h3 { font-size: .88rem; margin: .25rem 0; }
    .infoRechercheEmploi-tab-description[b-s903yny4pr]  p,
    .infoRechercheEmploi-tab-description[b-s903yny4pr]  li { font-size: .82rem; line-height: 1.5; margin: .2rem 0; }
    .infoRechercheEmploi-tab-description[b-s903yny4pr]  img { max-width: 100%; height: auto; }
    .infoRechercheEmploi-tab-description[b-s903yny4pr]  table { font-size: .75rem; }

    .infoRechercheEmploi-placeholder[b-s903yny4pr] { font-size: .75rem; margin: .2rem 0; }

    .infoRechercheEmploi-btn-edit[b-s903yny4pr],
    .infoRechercheEmploi-side-edit-btn[b-s903yny4pr] { width: 24px; height: 24px; font-size: .6rem; }

    /* ---------- Cartes du volet ---------- */
    .infoRechercheEmploi-identity[b-s903yny4pr] { gap: .4rem; }
    .infoRechercheEmploi-identity-avatar[b-s903yny4pr] { width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; font-size: .65rem; }
    .infoRechercheEmploi-identity-info[b-s903yny4pr] { margin-top: .1rem; }
    .infoRechercheEmploi-identity-name[b-s903yny4pr] { font-size: .72rem; }
    .infoRechercheEmploi-identity-type[b-s903yny4pr] { font-size: .58rem; }

    .infoRechercheEmploi-side-title[b-s903yny4pr] { font-size: .72rem; }
    .infoRechercheEmploi-side-details[b-s903yny4pr] { gap: .25rem; margin-top: .2rem; padding-top: .3rem; }
    .infoRechercheEmploi-side-details--plain[b-s903yny4pr] { margin-top: 0; padding-top: 0; }
    .infoRechercheEmploi-side-field[b-s903yny4pr] { gap: .3rem; }
    .infoRechercheEmploi-side-field > i[b-s903yny4pr] { width: .75rem; font-size: .58rem; }
    .infoRechercheEmploi-field-label[b-s903yny4pr] { font-size: .46rem; }
    .infoRechercheEmploi-field-value[b-s903yny4pr] { font-size: .6rem; }
    .infoRechercheEmploi-stat-value[b-s903yny4pr] { font-size: .62rem; }
    .infoRechercheEmploi-side-notes[b-s903yny4pr] { font-size: .6rem; line-height: 1.35; }

    .infoRechercheEmploi-consultant-avatar[b-s903yny4pr] { width: 24px; height: 24px; min-width: 24px; flex: 0 0 24px; font-size: .6rem; }
    .infoRechercheEmploi-consultant-name[b-s903yny4pr] { font-size: .66rem; }
    .infoRechercheEmploi-consultant-title[b-s903yny4pr] { font-size: .55rem; }
    .infoRechercheEmploi-consultant-line[b-s903yny4pr] { font-size: .55rem; }
    .infoRechercheEmploi-consultant-icon[b-s903yny4pr] { font-size: .62rem; }

    /* ---------- Édition ---------- */
    .infoRechercheEmploi-edit-zone[b-s903yny4pr] { gap: .35rem; }
    .infoRechercheEmploi-btn-cancel[b-s903yny4pr],
    .infoRechercheEmploi-btn-ok[b-s903yny4pr] { padding: .3rem .8rem; font-size: .7rem; }

    .infoRechercheEmploi-editor-toolbar[b-s903yny4pr] { padding: .2rem; gap: .2rem; margin-bottom: .3rem; }
    .infoRechercheEmploi-editor-toolbar button[b-s903yny4pr],
    .infoRechercheEmploi-tool[b-s903yny4pr] { min-width: 24px; height: 24px; padding: 0 .2rem; font-size: .7rem; }
    .infoRechercheEmploi-editor-toolbar svg[b-s903yny4pr] { width: 12px; height: 12px; }
    .infoRechercheEmploi-tool-select[b-s903yny4pr] { height: 24px; font-size: .65rem; padding: 0 .2rem; }
    .infoRechercheEmploi-color-picker[b-s903yny4pr] { width: 24px; height: 24px; }
    .infoRechercheEmploi-toolbar-separator[b-s903yny4pr] { height: 14px; margin: 0 .15rem; }
    .infoRechercheEmploi-edit-richtext[b-s903yny4pr] { font-size: .82rem; padding: .4rem; min-height: 8vh; max-height: 30vh; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    /* top / bottom viennent des variables de .rechercheEmploi-content (148px / 26px) */
    .infoRechercheEmploi-details-side[b-s903yny4pr] {
        width: var(--drawer-w, 55vw);
        max-width: var(--drawer-w, 55vw);
    }

    .infoRechercheEmploi-tab[b-s903yny4pr] { font-size: .62rem; padding: .2rem .5rem; }
    .infoRechercheEmploi-tab-content[b-s903yny4pr] { padding: .4rem; }

    .infoRechercheEmploi-tab-description[b-s903yny4pr],
    .infoRechercheEmploi-tab-description[b-s903yny4pr]  p,
    .infoRechercheEmploi-tab-description[b-s903yny4pr]  li { font-size: .72rem; }

    .infoRechercheEmploi-identity-avatar[b-s903yny4pr] { width: 28px; height: 28px; min-width: 28px; flex: 0 0 28px; }
    .infoRechercheEmploi-identity-name[b-s903yny4pr] { font-size: .62rem; }
    .infoRechercheEmploi-field-value[b-s903yny4pr],
    .infoRechercheEmploi-stat-value[b-s903yny4pr] { font-size: .55rem; }
    .infoRechercheEmploi-field-label[b-s903yny4pr] { font-size: .42rem; }
    .infoRechercheEmploi-side-title[b-s903yny4pr] { font-size: .62rem; }
}
/* /Components/Pages/Emploi/Recherche/RechercheEmploi.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.rechercheEmploi-page[b-e4a9ibx2rg] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES CATÉGORIES (bureau)
========================================== */

.rechercheEmploi-sticky[b-e4a9ibx2rg] {
    position: fixed;
    top: 80px;
    left: 250px;
    right: 70px;
    height: 140px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 12px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.rechercheEmploi-content[b-e4a9ibx2rg] {
    position: fixed;

    top: 220px;
    bottom: 20px;
    left: 240px;
    right: 30px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

/* Colonne gauche : liste des outils */
.rechercheEmploi-left[b-e4a9ibx2rg] {
    flex: 0 0 20%;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;

    padding: .5rem;
}

/* Colonne droite : détails de l'outil sélectionné */
.rechercheEmploi-right[b-e4a9ibx2rg] {
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
    min-height: 0;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
}

.empty-rechercheEmploi[b-e4a9ibx2rg] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languettes et fond cliquable : cachés sur ordinateur */
.rechercheEmploi-content .drawer-tab[b-e4a9ibx2rg],
.rechercheEmploi-content .drawer-backdrop[b-e4a9ibx2rg] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - volets et languettes glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors des volets les referme (fond cliquable)
   - volets collés sous la bande des catégories, coins arrondis
     seulement en bas
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des catégories : pleine largeur, sans coins arrondis */
    html body .rechercheEmploi-sticky[b-e4a9ibx2rg] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .rechercheEmploi-content[b-e4a9ibx2rg] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit (utilisé par InfoRechercheEmploi) */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .rechercheEmploi-content .rechercheEmploi-right[b-e4a9ibx2rg] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* Clic en dehors des volets : les referme (sous les volets et les languettes) */
    html body .rechercheEmploi-content .drawer-backdrop[b-e4a9ibx2rg] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .rechercheEmploi-content .rechercheEmploi-left[b-e4a9ibx2rg] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        min-width: 0 !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .rechercheEmploi-content.left-open .rechercheEmploi-left[b-e4a9ibx2rg] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .rechercheEmploi-content .drawer-tab[b-e4a9ibx2rg] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .rechercheEmploi-content .drawer-tab:hover[b-e4a9ibx2rg] {
        background: rgba(225, 110, 110, .98);
    }

    .rechercheEmploi-content .drawer-tab-left[b-e4a9ibx2rg] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .rechercheEmploi-content.left-open .drawer-tab-left[b-e4a9ibx2rg] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .rechercheEmploi-content .drawer-tab-right[b-e4a9ibx2rg] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .rechercheEmploi-content.right-open .drawer-tab-right[b-e4a9ibx2rg] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .rechercheEmploi-sticky[b-e4a9ibx2rg] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .rechercheEmploi-content[b-e4a9ibx2rg] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --drawer-w: 55vw;
        --left-w: 55vw;
    }

    .rechercheEmploi-content .drawer-tab[b-e4a9ibx2rg] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Emploi/Strategie/InfoStrategieEmploi.razor.rz.scp.css */
/* ===================================
   Layout principal (78% / 20%)
=================================== */

.infoStrategieEmploi-details[b-9eetk8plt6] {
    display: flex;
    align-items: stretch;
    gap: .8rem;

    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Le contenu principal défile seul ; les onglets (sticky) restent en haut */
.infoStrategieEmploi-details-main[b-9eetk8plt6] {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;
    min-height: 0;

    overflow-y: auto;
    scrollbar-width: thin;
}

/* ===================================
   Colonne latérale (20%) : 4 cartes
=================================== */

.infoStrategieEmploi-details-side[b-9eetk8plt6] {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Style commun aux 4 cartes */
.infoStrategieEmploi-side-top[b-9eetk8plt6],
.infoStrategieEmploi-side-middle[b-9eetk8plt6],
.infoStrategieEmploi-side-consultants[b-9eetk8plt6],
.infoStrategieEmploi-side-bottom[b-9eetk8plt6] {
    box-sizing: border-box;
    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .3rem;

    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoStrategieEmploi-side-top[b-9eetk8plt6]::-webkit-scrollbar,
.infoStrategieEmploi-side-middle[b-9eetk8plt6]::-webkit-scrollbar,
.infoStrategieEmploi-side-consultants[b-9eetk8plt6]::-webkit-scrollbar,
.infoStrategieEmploi-side-bottom[b-9eetk8plt6]::-webkit-scrollbar {
    display: none;
}

/* Cartes du haut : hauteur selon le contenu, rétrécissent (avec défilement)
   si la colonne manque de place */
.infoStrategieEmploi-side-top[b-9eetk8plt6],
.infoStrategieEmploi-side-middle[b-9eetk8plt6] {
    flex: 0 1 auto;
    min-height: 60px;
}

.infoStrategieEmploi-side-consultants[b-9eetk8plt6] {
    flex: 0 1 auto;
    min-height: 90px;
}

/* Statistiques : jamais écrasée, toujours collée au fond de la colonne */
.infoStrategieEmploi-side-bottom[b-9eetk8plt6] {
    flex: 0 0 auto;
    min-height: 60px;
    margin-top: auto;
}

/* ===================================
   Carte 1 : identité (avatar à droite)
=================================== */

.infoStrategieEmploi-identity[b-9eetk8plt6] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.infoStrategieEmploi-identity-avatar[b-9eetk8plt6] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.infoStrategieEmploi-identity-avatar img[b-9eetk8plt6] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.infoStrategieEmploi-identity-info[b-9eetk8plt6] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    margin-top: 1rem;
}

.infoStrategieEmploi-identity-name[b-9eetk8plt6] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoStrategieEmploi-identity-type[b-9eetk8plt6] {
    font-size: .7rem;
    color: #6b7280;
}

/* ===================================
   Champs des cartes
=================================== */

.infoStrategieEmploi-side-title[b-9eetk8plt6] {
    display: block;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;
}

.infoStrategieEmploi-side-details[b-9eetk8plt6] {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    margin-top: .3rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

/* Pas de filet ni de marge en haut quand la liste est seule dans la carte */
.infoStrategieEmploi-side-details--plain[b-9eetk8plt6] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.infoStrategieEmploi-side-field[b-9eetk8plt6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.infoStrategieEmploi-side-field > i[b-9eetk8plt6] {
    flex-shrink: 0;
    width: .9rem;
    text-align: center;
    font-size: .7rem;
    color: #9ca3af;
}

.infoStrategieEmploi-field-label[b-9eetk8plt6] {
    flex-shrink: 0;

    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.infoStrategieEmploi-field-value[b-9eetk8plt6] {
    font-size: .68rem;
    color: #374151;
    text-align: right;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infoStrategieEmploi-field-value--wrap[b-9eetk8plt6] {
    white-space: normal;
    word-break: break-word;
}

.infoStrategieEmploi-field-link[b-9eetk8plt6] {
    color: #c92a2a;
    text-decoration: none;
}

.infoStrategieEmploi-field-link:hover[b-9eetk8plt6] {
    text-decoration: underline;
}

.infoStrategieEmploi-side-notes[b-9eetk8plt6] {
    margin: 0;

    font-size: .7rem;
    line-height: 1.5;
    color: #374151;
    white-space: pre-wrap;
}

/* Carte 4 : statistiques */
.infoStrategieEmploi-stat-value[b-9eetk8plt6] {
    font-size: .72rem;
    font-weight: 700;
    color: #111827;
    text-align: right;
}

/* ===================================
   Carte 3 : conseillers
=================================== */

.infoStrategieEmploi-consultant-list[b-9eetk8plt6] {
    margin: .3rem 0 0;
    padding: .5rem 0 0;
    list-style: none;
    border-top: 1px solid #e5e7eb;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoStrategieEmploi-consultant[b-9eetk8plt6] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.infoStrategieEmploi-consultant-avatar[b-9eetk8plt6] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-size: .7rem;
    font-weight: 600;
}

.infoStrategieEmploi-consultant-avatar img[b-9eetk8plt6] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.infoStrategieEmploi-consultant-info[b-9eetk8plt6] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Nom + icônes sur la même ligne */
.infoStrategieEmploi-consultant-head[b-9eetk8plt6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    min-width: 0;
}

.infoStrategieEmploi-consultant-name[b-9eetk8plt6] {
    flex: 1;
    min-width: 0;

    font-size: .74rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoStrategieEmploi-consultant-icons[b-9eetk8plt6] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.infoStrategieEmploi-consultant-icon[b-9eetk8plt6] {
    font-size: .64rem;
    color: #9ca3af;
    text-decoration: none;
    transition: color .2s;
}

.infoStrategieEmploi-consultant-icon:hover[b-9eetk8plt6],
.infoStrategieEmploi-consultant:hover .infoStrategieEmploi-consultant-icon[b-9eetk8plt6] {
    color: #c92a2a;
}

.infoStrategieEmploi-consultant-title[b-9eetk8plt6] {
    font-size: .64rem;
    color: #6b7280;
}

.infoStrategieEmploi-consultant-line[b-9eetk8plt6] {
    font-size: .64rem;
    word-break: break-all;
}

/* Coordonnées : cachées, affichées au survol */
.infoStrategieEmploi-consultant-details[b-9eetk8plt6] {
    display: flex;
    flex-direction: column;

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease;
}

.infoStrategieEmploi-consultant:hover .infoStrategieEmploi-consultant-details[b-9eetk8plt6],
.infoStrategieEmploi-consultant:focus-within .infoStrategieEmploi-consultant-details[b-9eetk8plt6] {
    max-height: 4rem;
    opacity: 1;
    margin-top: .15rem;
}

/* Écrans tactiles (pas de survol) : toujours visibles */
@media (hover: none) {
    .infoStrategieEmploi-consultant-details[b-9eetk8plt6] {
        max-height: 4rem;
        opacity: 1;
        margin-top: .15rem;
    }
}

/* ===================================
   Crayon des cartes latérales (bas à droite)
=================================== */

.infoStrategieEmploi-side-edit-btn[b-9eetk8plt6] {
    align-self: flex-end;
    margin-top: auto;
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.infoStrategieEmploi-side-edit-btn:hover[b-9eetk8plt6] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Onglets (pilules) + libellé à droite
=================================== */

.infoStrategieEmploi-tabs[b-9eetk8plt6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;

    margin-top: .1rem;

    position: sticky;
    top: 0;
    z-index: 10;

    background: #fff;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.infoStrategieEmploi-tabs > span[b-9eetk8plt6] {
    flex-shrink: 0;

    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;

    white-space: nowrap;
}

.infoStrategieEmploi-tabs-items[b-9eetk8plt6] {
    display: flex;
    gap: .6rem;

    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoStrategieEmploi-tabs-items[b-9eetk8plt6]::-webkit-scrollbar {
    display: none;
}

.infoStrategieEmploi-tab[b-9eetk8plt6] {
    flex-shrink: 0;
    white-space: nowrap;

    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;
    color: #b9bdc4;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;

    cursor: pointer;
    transition: .2s;
}

.infoStrategieEmploi-tab:hover[b-9eetk8plt6] {
    background: #fdecec;
    color: #c92a2a;
}

.infoStrategieEmploi-tab.active[b-9eetk8plt6] {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
}

/* ===================================
   Cadre gris du contenu
=================================== */

.infoStrategieEmploi-tab-content[b-9eetk8plt6] {
    padding: .8rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoStrategieEmploi-tab-description[b-9eetk8plt6] {
    margin: 0;
    padding-right: .3rem;

    font-size: .9rem;
    line-height: 1.6;
    color: #374151;

    max-height: 63vh;
    overflow-y: auto;
}

.infoStrategieEmploi-tab-description ul[b-9eetk8plt6],
.infoStrategieEmploi-tab-description ol[b-9eetk8plt6] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

.infoStrategieEmploi-placeholder[b-9eetk8plt6] {
    margin: .3rem 0;

    color: #9ca3af;
    font-size: .8rem;
    line-height: 1.5;
}

.empty-strategieEmploi[b-9eetk8plt6] {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-size: .85rem;
}

/* Crayon du contenu principal */
.infoStrategieEmploi-btn-edit[b-9eetk8plt6] {
    align-self: flex-end;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.infoStrategieEmploi-btn-edit:hover[b-9eetk8plt6] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* ===================================
   Zone d'édition inline
=================================== */

.infoStrategieEmploi-edit-zone[b-9eetk8plt6] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoStrategieEmploi-edit-actions[b-9eetk8plt6] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .3rem;
}

.infoStrategieEmploi-btn-cancel[b-9eetk8plt6],
.infoStrategieEmploi-btn-ok[b-9eetk8plt6] {
    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: .2s;
}

.infoStrategieEmploi-btn-cancel[b-9eetk8plt6] {
    background: #f3f4f6;
    color: #6b7280;
}

.infoStrategieEmploi-btn-cancel:hover[b-9eetk8plt6] {
    background: #e5e7eb;
}

.infoStrategieEmploi-btn-ok[b-9eetk8plt6] {
    background: #c92a2a;
    color: #fff;
}

.infoStrategieEmploi-btn-ok:hover[b-9eetk8plt6] {
    background: #a81f1f;
}

/* ===================================
   Barre d'outils de l'éditeur riche
=================================== */

.infoStrategieEmploi-editor-toolbar[b-9eetk8plt6] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: .4rem;
    margin-bottom: .4rem;

    background: transparent;
    border: none;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoStrategieEmploi-editor-toolbar[b-9eetk8plt6]::-webkit-scrollbar {
    display: none;
}

.infoStrategieEmploi-editor-toolbar button[b-9eetk8plt6],
.infoStrategieEmploi-tool[b-9eetk8plt6] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 28px;
    height: 28px;
    padding: 0 .3rem;

    background: transparent;
    border: none;
    border-radius: 4px;

    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;

    cursor: pointer;
    transition: .2s;
}

.infoStrategieEmploi-editor-toolbar button:hover[b-9eetk8plt6],
.infoStrategieEmploi-tool:hover[b-9eetk8plt6] {
    background: #fdecec;
    color: #c92a2a;
}

.infoStrategieEmploi-tool-wide[b-9eetk8plt6] {
    min-width: auto;
    padding: 0 .5rem;
    white-space: nowrap;
}

.infoStrategieEmploi-tool-select[b-9eetk8plt6] {
    flex-shrink: 0;

    height: 28px;
    padding: 0 .3rem;

    font-size: .72rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;

    cursor: pointer;
}

.infoStrategieEmploi-tool-select:hover[b-9eetk8plt6] {
    border-color: #c92a2a;
}

.infoStrategieEmploi-toolbar-separator[b-9eetk8plt6] {
    flex-shrink: 0;

    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 .3rem;
}

.infoStrategieEmploi-color-picker[b-9eetk8plt6] {
    flex-shrink: 0;

    width: 28px;
    height: 28px;
    padding: 2px;

    background: transparent;
    border: none;

    cursor: pointer;
}

.infoStrategieEmploi-edit-richtext[b-9eetk8plt6] {
    width: 100%;
    padding: .5rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;
    line-height: 1.5;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    overflow-y: auto;

    min-height: 10vh;
    max-height: 40vh;

    box-sizing: border-box;
}

.infoStrategieEmploi-edit-richtext:focus[b-9eetk8plt6] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.infoStrategieEmploi-edit-richtext ul[b-9eetk8plt6],
.infoStrategieEmploi-edit-richtext ol[b-9eetk8plt6] {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - zone principale sur toute la largeur
   - volet latéral = tiroir fixe qui glisse (transform), comme
     le volet gauche de la page : même durée, même courbe
   - collé sous la bande des catégories, coins arrondis seulement
     en bas ; même haut / même bas que le volet gauche, via les
     variables --content-top, --content-bottom, --drawer-inset
     (définies sur .strategieEmploi-content dans StrategieEmploi.razor.css)
   - Statistiques : carte complète fixée en bas du volet (sticky)
   - ouverture pilotée par la classe .open (paramètre SideOpen)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .infoStrategieEmploi-details[b-9eetk8plt6] {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: stretch;
        height: 100%;
        overflow: hidden;
        gap: 0;
    }

    .infoStrategieEmploi-details-main[b-9eetk8plt6] {
        flex: 1 1 100%;
        max-width: none;
        width: auto;
        max-height: 100%;
        min-height: 0;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        padding: .35rem;
        box-sizing: border-box;
    }

    /* ---------- Volet des informations (bande droite) ----------
       Toujours rendu, glisse hors écran quand il est fermé. */
    .infoStrategieEmploi-details-side[b-9eetk8plt6] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 30px) + var(--drawer-inset, 3px));
        right: 0;                                   /* collé au bord droit */
        left: auto;

        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        height: auto;
        margin: 0;
        padding: .6rem;
        box-sizing: border-box;

        z-index: 1500;
        background: #fff;
        border-radius: 0 0 0 14px;
        overflow-y: auto;

        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .infoStrategieEmploi-details-side.open[b-9eetk8plt6] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Rien n'est coupé : les cartes gardent leur hauteur complète */
    .infoStrategieEmploi-side-top[b-9eetk8plt6],
    .infoStrategieEmploi-side-middle[b-9eetk8plt6],
    .infoStrategieEmploi-side-consultants[b-9eetk8plt6],
    .infoStrategieEmploi-side-bottom[b-9eetk8plt6] {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 0;
        padding: .45rem;
        gap: .25rem;
        border-radius: 10px;
    }

    /* Statistiques : carte complète, fixée en bas du volet avec une marge */
    .infoStrategieEmploi-side-bottom[b-9eetk8plt6] {
        position: sticky;
        bottom: .6rem;               /* même marge que le padding du volet */
        z-index: 5;

        margin-top: auto;            /* poussé en bas si le contenu est court */

        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;

        /* 1) ombre légère au-dessus ; 2) bande blanche sous la carte
           pour masquer le contenu qui défile dans la marge du bas */
        box-shadow:
            0 -6px 8px -6px rgba(0, 0, 0, .15),
            0 .6rem 0 0 #fff;
    }

    .infoStrategieEmploi-field-value[b-9eetk8plt6],
    .infoStrategieEmploi-identity-name[b-9eetk8plt6],
    .infoStrategieEmploi-identity-type[b-9eetk8plt6],
    .infoStrategieEmploi-consultant-name[b-9eetk8plt6] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    /* ---------- Onglets ---------- */
    .infoStrategieEmploi-tabs[b-9eetk8plt6] {
        position: static;
        padding: .2rem 0 .3rem;
        margin-top: 0;
        gap: .3rem;
    }

    .infoStrategieEmploi-tabs-items[b-9eetk8plt6] { gap: .15rem; }

    .infoStrategieEmploi-tab[b-9eetk8plt6] {
        padding: .12rem .45rem;
        font-size: .6rem;
        border-radius: 14px;
    }

    .infoStrategieEmploi-tabs > span[b-9eetk8plt6] { font-size: .7rem; }

    /* ---------- Contenu : hauteur flexible ---------- */
    .infoStrategieEmploi-tab-content[b-9eetk8plt6] {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: .6rem;
        gap: .4rem;
        border-radius: 10px;
    }

    .infoStrategieEmploi-tab-description[b-9eetk8plt6] {
        max-height: none;
        overflow: visible;
        font-size: .82rem;
        line-height: 1.5;
        padding-right: .1rem;
    }

    .infoStrategieEmploi-tab-description[b-9eetk8plt6]  h1 { font-size: 1.05rem; margin: .35rem 0; }
    .infoStrategieEmploi-tab-description[b-9eetk8plt6]  h2 { font-size: .95rem; margin: .3rem 0; }
    .infoStrategieEmploi-tab-description[b-9eetk8plt6]  h3 { font-size: .88rem; margin: .25rem 0; }
    .infoStrategieEmploi-tab-description[b-9eetk8plt6]  p,
    .infoStrategieEmploi-tab-description[b-9eetk8plt6]  li { font-size: .82rem; line-height: 1.5; margin: .2rem 0; }
    .infoStrategieEmploi-tab-description[b-9eetk8plt6]  img { max-width: 100%; height: auto; }
    .infoStrategieEmploi-tab-description[b-9eetk8plt6]  table { font-size: .75rem; }

    .infoStrategieEmploi-placeholder[b-9eetk8plt6] { font-size: .75rem; margin: .2rem 0; }

    .infoStrategieEmploi-btn-edit[b-9eetk8plt6],
    .infoStrategieEmploi-side-edit-btn[b-9eetk8plt6] { width: 24px; height: 24px; font-size: .6rem; }

    /* ---------- Cartes du volet ---------- */
    .infoStrategieEmploi-identity[b-9eetk8plt6] { gap: .4rem; }
    .infoStrategieEmploi-identity-avatar[b-9eetk8plt6] { width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; font-size: .65rem; }
    .infoStrategieEmploi-identity-info[b-9eetk8plt6] { margin-top: .1rem; }
    .infoStrategieEmploi-identity-name[b-9eetk8plt6] { font-size: .72rem; }
    .infoStrategieEmploi-identity-type[b-9eetk8plt6] { font-size: .58rem; }

    .infoStrategieEmploi-side-title[b-9eetk8plt6] { font-size: .72rem; }
    .infoStrategieEmploi-side-details[b-9eetk8plt6] { gap: .25rem; margin-top: .2rem; padding-top: .3rem; }
    .infoStrategieEmploi-side-details--plain[b-9eetk8plt6] { margin-top: 0; padding-top: 0; }
    .infoStrategieEmploi-side-field[b-9eetk8plt6] { gap: .3rem; }
    .infoStrategieEmploi-side-field > i[b-9eetk8plt6] { width: .75rem; font-size: .58rem; }
    .infoStrategieEmploi-field-label[b-9eetk8plt6] { font-size: .46rem; }
    .infoStrategieEmploi-field-value[b-9eetk8plt6] { font-size: .6rem; }
    .infoStrategieEmploi-stat-value[b-9eetk8plt6] { font-size: .62rem; }
    .infoStrategieEmploi-side-notes[b-9eetk8plt6] { font-size: .6rem; line-height: 1.35; }

    .infoStrategieEmploi-consultant-avatar[b-9eetk8plt6] { width: 24px; height: 24px; min-width: 24px; flex: 0 0 24px; font-size: .6rem; }
    .infoStrategieEmploi-consultant-name[b-9eetk8plt6] { font-size: .66rem; }
    .infoStrategieEmploi-consultant-title[b-9eetk8plt6] { font-size: .55rem; }
    .infoStrategieEmploi-consultant-line[b-9eetk8plt6] { font-size: .55rem; }
    .infoStrategieEmploi-consultant-icon[b-9eetk8plt6] { font-size: .62rem; }

    /* ---------- Édition ---------- */
    .infoStrategieEmploi-edit-zone[b-9eetk8plt6] { gap: .35rem; }
    .infoStrategieEmploi-btn-cancel[b-9eetk8plt6],
    .infoStrategieEmploi-btn-ok[b-9eetk8plt6] { padding: .3rem .8rem; font-size: .7rem; }

    .infoStrategieEmploi-editor-toolbar[b-9eetk8plt6] { padding: .2rem; gap: .2rem; margin-bottom: .3rem; }
    .infoStrategieEmploi-editor-toolbar button[b-9eetk8plt6],
    .infoStrategieEmploi-tool[b-9eetk8plt6] { min-width: 24px; height: 24px; padding: 0 .2rem; font-size: .7rem; }
    .infoStrategieEmploi-editor-toolbar svg[b-9eetk8plt6] { width: 12px; height: 12px; }
    .infoStrategieEmploi-tool-select[b-9eetk8plt6] { height: 24px; font-size: .65rem; padding: 0 .2rem; }
    .infoStrategieEmploi-color-picker[b-9eetk8plt6] { width: 24px; height: 24px; }
    .infoStrategieEmploi-toolbar-separator[b-9eetk8plt6] { height: 14px; margin: 0 .15rem; }
    .infoStrategieEmploi-edit-richtext[b-9eetk8plt6] { font-size: .82rem; padding: .4rem; min-height: 8vh; max-height: 30vh; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    /* top / bottom viennent des variables de .strategieEmploi-content (148px / 26px) */
    .infoStrategieEmploi-details-side[b-9eetk8plt6] {
        width: var(--drawer-w, 55vw);
        max-width: var(--drawer-w, 55vw);
    }

    .infoStrategieEmploi-tab[b-9eetk8plt6] { font-size: .62rem; padding: .2rem .5rem; }
    .infoStrategieEmploi-tab-content[b-9eetk8plt6] { padding: .4rem; }

    .infoStrategieEmploi-tab-description[b-9eetk8plt6],
    .infoStrategieEmploi-tab-description[b-9eetk8plt6]  p,
    .infoStrategieEmploi-tab-description[b-9eetk8plt6]  li { font-size: .72rem; }

    .infoStrategieEmploi-identity-avatar[b-9eetk8plt6] { width: 28px; height: 28px; min-width: 28px; flex: 0 0 28px; }
    .infoStrategieEmploi-identity-name[b-9eetk8plt6] { font-size: .62rem; }
    .infoStrategieEmploi-field-value[b-9eetk8plt6],
    .infoStrategieEmploi-stat-value[b-9eetk8plt6] { font-size: .55rem; }
    .infoStrategieEmploi-field-label[b-9eetk8plt6] { font-size: .42rem; }
    .infoStrategieEmploi-side-title[b-9eetk8plt6] { font-size: .62rem; }
}
/* /Components/Pages/Emploi/Strategie/StrategieEmploi.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.strategieEmploi-page[b-9epxtzjqw4] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES CATÉGORIES (bureau)
========================================== */

.strategieEmploi-sticky[b-9epxtzjqw4] {
    position: fixed;
    top: 80px;
    left: 250px;
    right: 70px;
    height: 140px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 12px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.strategieEmploi-content[b-9epxtzjqw4] {
    position: fixed;

    top: 220px;
    bottom: 20px;
    left: 240px;
    right: 30px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

/* Colonne gauche : liste des outils */
.strategieEmploi-left[b-9epxtzjqw4] {
    flex: 0 0 22%;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;

    padding: .5rem;
}

/* Colonne droite : détails de l'outil sélectionné */
.strategieEmploi-right[b-9epxtzjqw4] {
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
    min-height: 0;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
}

.empty-strategieEmploi[b-9epxtzjqw4] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languettes et fond cliquable : cachés sur ordinateur */
.strategieEmploi-content .drawer-tab[b-9epxtzjqw4],
.strategieEmploi-content .drawer-backdrop[b-9epxtzjqw4] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - volets et languettes glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors des volets les referme (fond cliquable)
   - volets collés sous la bande des catégories, coins arrondis
     seulement en bas
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des catégories : pleine largeur, sans coins arrondis */
    html body .strategieEmploi-sticky[b-9epxtzjqw4] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .strategieEmploi-content[b-9epxtzjqw4] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit (utilisé par InfoStrategieEmploi) */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .strategieEmploi-content .strategieEmploi-right[b-9epxtzjqw4] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* Clic en dehors des volets : les referme (sous les volets et les languettes) */
    html body .strategieEmploi-content .drawer-backdrop[b-9epxtzjqw4] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .strategieEmploi-content .strategieEmploi-left[b-9epxtzjqw4] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        min-width: 0 !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .strategieEmploi-content.left-open .strategieEmploi-left[b-9epxtzjqw4] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .strategieEmploi-content .drawer-tab[b-9epxtzjqw4] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .strategieEmploi-content .drawer-tab:hover[b-9epxtzjqw4] {
        background: rgba(225, 110, 110, .98);
    }

    .strategieEmploi-content .drawer-tab-left[b-9epxtzjqw4] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .strategieEmploi-content.left-open .drawer-tab-left[b-9epxtzjqw4] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .strategieEmploi-content .drawer-tab-right[b-9epxtzjqw4] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .strategieEmploi-content.right-open .drawer-tab-right[b-9epxtzjqw4] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .strategieEmploi-sticky[b-9epxtzjqw4] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .strategieEmploi-content[b-9epxtzjqw4] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --drawer-w: 55vw;
        --left-w: 55vw;
    }

    .strategieEmploi-content .drawer-tab[b-9epxtzjqw4] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Guide/InfluenceHistoryCard.razor.rz.scp.css */
.ihc-card[b-st9tmircz3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 10px 0 0 0;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, .06);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    height: auto;
    max-height: 100%;
    box-sizing: border-box;
    width: 100%;
    transition: height .2s ease;
    overflow: hidden;
}

.ihc-card.ihc-card-empty[b-st9tmircz3] {
    height: 10%;
    min-height: 60px;
}

.ihc-table-wrapper[b-st9tmircz3] {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.ihc-header[b-st9tmircz3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ihc-title[b-st9tmircz3] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #1d1d1f;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ihc-add-btn[b-st9tmircz3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: #c62828;
    color: #fff;
    cursor: pointer;
    transition: opacity .15s ease, transform .1s ease;
}

.ihc-add-btn:hover:not(:disabled)[b-st9tmircz3] {
    transform: scale(1.06);
}

.ihc-add-btn:disabled[b-st9tmircz3] {
    opacity: 0.35;
    cursor: not-allowed;
}

.ihc-placeholder[b-st9tmircz3] {
    font-size: 0.72rem;
    color: #a1a1a6;
    font-style: italic;
}

.ihc-table[b-st9tmircz3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.ihc-table th[b-st9tmircz3] {
    text-align: left;
    font-weight: 600;
    color: #86868b;
    font-size: 0.62rem;
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.ihc-table td[b-st9tmircz3] {
    padding: 6px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    color: #1d1d1f;
    vertical-align: top;
}

.ihc-description-cell[b-st9tmircz3] {
    max-width: 220px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.ihc-impact-positif[b-st9tmircz3] {
    color: #1a8a3c;
    font-weight: 600;
}

.ihc-impact-negatif[b-st9tmircz3] {
    color: #c62828;
    font-weight: 600;
}

/* --- Modale (style Apple : verre dépoli, coins généreux, animations douces) --- */

.ihc-modal-backdrop[b-st9tmircz3] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;   /* ← au-dessus de tous les éléments fixes (integration-sticky et villes-sticky sont à 900-1000) */
    animation: ihc-fade-in-b-st9tmircz3 .15s ease;
}

@keyframes ihc-fade-in-b-st9tmircz3 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ihc-modal[b-st9tmircz3] {
    width: min(420px, 90vw);
    background: rgba(255, 255, 255, .92);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .04);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
    position: relative;
    z-index: 1;
    animation: ihc-scale-in-b-st9tmircz3 .18s cubic-bezier(.2, .8, .2, 1);
}

@keyframes ihc-scale-in-b-st9tmircz3 {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.ihc-modal-header[b-st9tmircz3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

.ihc-modal-close[b-st9tmircz3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .05);
    cursor: pointer;
    font-size: 0.7rem;
    color: #86868b;
    transition: background .15s ease, color .15s ease;
}

.ihc-modal-close:hover[b-st9tmircz3] {
    background: rgba(0, 0, 0, .09);
    color: #1d1d1f;
}

.ihc-modal-body[b-st9tmircz3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 20px 20px;
}

.ihc-modal-label[b-st9tmircz3] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ihc-modal-textarea[b-st9tmircz3] {
    resize: vertical;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(0, 0, 0, .02);
    padding: 10px 12px;
    font-size: 0.85rem;
    font-family: inherit;
    color: #1d1d1f;
    transition: border-color .15s ease, background .15s ease;
}

.ihc-modal-textarea:focus[b-st9tmircz3] {
    outline: none;
    border-color: #c62828;
    background: #fff;
}

.ihc-modal-toggle[b-st9tmircz3] {
    display: flex;
    gap: 8px;
}

.ihc-toggle-btn[b-st9tmircz3] {
    flex: 1;
    padding: 9px 0;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(0, 0, 0, .02);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: #1d1d1f;
    transition: .15s ease;
}

.ihc-toggle-btn.active-positif[b-st9tmircz3] {
    background: #1a8a3c;
    border-color: #1a8a3c;
    color: #fff;
}

.ihc-toggle-btn.active-negatif[b-st9tmircz3] {
    background: #c62828;
    border-color: #c62828;
    color: #fff;
}

.ihc-modal-range[b-st9tmircz3] {
    width: 100%;
    accent-color: #c62828;
}

.ihc-modal-hint[b-st9tmircz3] {
    font-size: 0.68rem;
    font-weight: 400;
    color: #86868b;
    line-height: 1.45;
    letter-spacing: -0.01em;
    margin: 2px 0 0;
}

.ihc-modal-error[b-st9tmircz3] {
    font-size: 0.72rem;
    color: #c62828;
    margin: 0;
}

.ihc-modal-footer[b-st9tmircz3] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    background: rgba(0, 0, 0, .015);
    border-top: 1px solid rgba(0, 0, 0, .05);
}

.ihc-modal-cancel[b-st9tmircz3] {
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    background: rgba(0, 0, 0, .06);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    color: #1d1d1f;
    transition: background .15s ease;
}

.ihc-modal-cancel:hover[b-st9tmircz3] {
    background: rgba(0, 0, 0, .1);
}

.ihc-modal-save[b-st9tmircz3] {
    padding: 4px 8px;
    border-radius: 10px;
    border: none;
    background: #c62828;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(198, 40, 40, .25);
    transition: opacity .15s ease, transform .1s ease, box-shadow .15s ease;
}

.ihc-modal-save:hover:not(:disabled)[b-st9tmircz3] {
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(198, 40, 40, .3);
}

.ihc-modal-save:active:not(:disabled)[b-st9tmircz3] {
    transform: scale(0.97);
}

.ihc-modal-save:disabled[b-st9tmircz3] {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.ihc-actions-cell[b-st9tmircz3] {
    display: flex;
    gap: 4px;
    white-space: nowrap;
}

.ihc-row-btn[b-st9tmircz3] {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.72rem;
    padding: 2px 4px;
    border-radius: 4px;
    color: #86868b;
}

.ihc-row-btn:hover:not(:disabled)[b-st9tmircz3] {
    background: rgba(0, 0, 0, .06);
}

.ihc-row-btn:disabled[b-st9tmircz3] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ihc-row-delete:hover[b-st9tmircz3] {
    color: #c62828;
}

.ihc-row-edit:hover[b-st9tmircz3] {
    color: #1d1d1f;
}

.ihc-row-confirm[b-st9tmircz3] {
    color: #c62828;
    font-weight: 600;
}

/* Le panneau principal doit être le point d'ancrage du chevauchement */
.onglets-panel[b-st9tmircz3] {
    position: relative;
    overflow: visible;
}

/* La carte d'historique déborde du cadre principal, côté droit et bas */
.oci-history[b-st9tmircz3] {
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: min(260px, 90vw);
    z-index: 5;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

.oci-layout[b-st9tmircz3] {
    display: block;
}

.oci-champs[b-st9tmircz3] {
    width: 100%;
}

/* Mobile : fenêtre « + expérience » réduite (même condition que les autres pages) */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .ihc-modal[b-st9tmircz3] {
        width: min(300px, 86vw);
        max-height: 85dvh;
        overflow-y: auto;
        border-radius: 14px;
    }

    .ihc-modal-header[b-st9tmircz3] {
        padding: 12px 14px 8px;
        font-size: .72rem;
    }

    .ihc-modal-close[b-st9tmircz3] {
        width: 20px;
        height: 20px;
        font-size: .6rem;
    }

    .ihc-modal-body[b-st9tmircz3] {
        gap: 5px;
        padding: 2px 14px 12px;
    }

    .ihc-modal-label[b-st9tmircz3] {
        font-size: .56rem;
    }

    .ihc-modal-textarea[b-st9tmircz3] {
        padding: 7px 9px;
        border-radius: 9px;
        font-size: .7rem;
    }

    .ihc-modal-hint[b-st9tmircz3] {
        font-size: .56rem;
        line-height: 1.35;
    }

    .ihc-modal-error[b-st9tmircz3] {
        font-size: .6rem;
    }

    .ihc-modal-footer[b-st9tmircz3] {
        gap: 6px;
        padding: 9px 14px;
    }

    .ihc-modal-cancel[b-st9tmircz3] {
        padding: 5px 11px;
        border-radius: 8px;
        font-size: .64rem;
    }

    .ihc-modal-save[b-st9tmircz3] {
        padding: 5px 11px;
        border-radius: 8px;
        font-size: .64rem;
    }
}
/* /Components/Pages/Guide/Installation/InfoInstallation.razor.rz.scp.css */
/* Conteneur principal - 3 colonnes : 15% / 60% / 20% */
.ville-details-container[b-qilr7hcg4i] {
    display: flex;
    gap: 1rem;
    margin-top: 80px;
    margin-bottom: 50px;
    margin-left: -35px;
    margin-right: 0px;
    padding: 1rem;
    height: calc(100vh - 350px);
    overflow: hidden;
    animation: fadeIn-b-qilr7hcg4i .3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

/* ===========================
   Colonne 15% : classement des villes de la province
   =========================== */

.province-indicators[b-qilr7hcg4i] {
    width: 10%;
    min-width: 140px;
    background: #fff;
    /* border: 1px solid #eee; */
    border-radius: 12px;
    padding: 0.75rem 0.6rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Pancarte : moyenne pondérée des villes de la province */
.moyenne-ponderee-card[b-qilr7hcg4i] {
    position: relative;
    background: linear-gradient(160deg, #fff1f1 0%, #fdd9d9 55%, #fbc7c7 100%);
    border: 1px solid #f3b4b4;
    border-radius: 12px;
    padding: 0.6rem 0.4rem;
    text-align: center;
    margin-bottom: 0.6rem;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        0 4px 10px rgba(220, 53, 69, 0.1);
}

.moyenne-ponderee-label[b-qilr7hcg4i] {
    display: block;
    font-size: 0.5rem;
    font-weight: 700;
    color: #b33a3a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}

.moyenne-ponderee-value[b-qilr7hcg4i] {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 1.15rem;
    font-weight: 800;
    color: #c82333;
    line-height: 1;
}

.moyenne-ponderee-percent-sign[b-qilr7hcg4i] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b33a3a;
    margin-top: 1px;
    vertical-align: super;
}

.moyenne-ponderee-sous-label[b-qilr7hcg4i] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.55rem;
    color: #b36969;
    font-style: italic;
}

.province-score-header[b-qilr7hcg4i] {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #86868b;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.province-score-list[b-qilr7hcg4i] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.province-score-item[b-qilr7hcg4i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #fafafa;
    border: 1px solid transparent;
    transition: 0.15s ease;
}

.province-score-item.active[b-qilr7hcg4i] {
    background: #fdecec;
    border-color: #f3b4b4;
}

.province-score-name[b-qilr7hcg4i] {
    font-size: 0.62rem;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.province-score-value[b-qilr7hcg4i] {
    flex: 0 0 auto;
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 0.66rem;
    font-weight: 800;
    color: #c82333;
    white-space: nowrap;
}

.province-score-percent-sign[b-qilr7hcg4i] {
    font-size: 0.55rem;
    font-weight: 700;
    color: #b33a3a;
    margin-left: 1px;
}

/* Colonne 60% : panneau divisé haut/bas */
.onglets-panel[b-qilr7hcg4i] {
    width: 70%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
}

/* ===========================
   Section haute : informations générales + indicateurs province et ville
   =========================== */

.ville-info-top[b-qilr7hcg4i] {
    flex: 0 0 auto;
    max-height: 46%;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.ville-info-columns[b-qilr7hcg4i] {
    display: flex;
    gap: 1.5rem;
}

.ville-info-identity[b-qilr7hcg4i] {
    flex: 1 1 40%;
    min-width: 0;
}

.ville-info-indicators[b-qilr7hcg4i] {
    margin-top: 30px;
    flex: 1 1 30%;
    min-width: 0;
    padding-left: 1.25rem;
    border-left: 1px solid #eee;
}

@media (max-width: 900px) {
    .ville-info-columns[b-qilr7hcg4i] {
        flex-direction: column;
    }

    .ville-info-indicators[b-qilr7hcg4i] {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #eee;
        padding-top: 1rem;
    }
}

.ville-info-header[b-qilr7hcg4i] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: .75rem;
}

.ville-info-name[b-qilr7hcg4i] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.ville-info-slogan[b-qilr7hcg4i] {
    font-size: 0.72rem;
    font-style: italic;
    color: #86868b;
}

.ville-info-grid[b-qilr7hcg4i] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 20px;
}

.ville-info-item[b-qilr7hcg4i] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ville-info-label[b-qilr7hcg4i] {
    font-size: 0.62rem;
    font-weight: 500;
    color: #86868b;
}

.ville-info-value[b-qilr7hcg4i] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1d1d1f;
}

/* ===========================
   Section basse : onglets thématiques + contenu
   =========================== */

.onglets-bottom[b-qilr7hcg4i] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.onglets-tabs[b-qilr7hcg4i] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.onglet-btn[b-qilr7hcg4i] {
    padding: .5rem 1rem;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: .7rem;
    color: #555;
    transition: .2s ease;
    font-weight: 600;
}

.onglet-btn:hover[b-qilr7hcg4i] {
    border-color: red;
    color: black;
}

.onglet-btn.active[b-qilr7hcg4i] {
    background: #fdecec;
    border-color: red;
    color: black;
    box-shadow: 0 4px 10px rgba(220,53,69,.25);
}

.onglets-content[b-qilr7hcg4i] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.25rem 0 0 1.25rem; /* plus de padding-right / padding-bottom */
    overflow-y: auto;
}

/* ===========================
   Colonne 20% : probabilité de réussite (fond rouge clair)
   =========================== */

.ville-indicators[b-qilr7hcg4i] {
    width: 16.5%;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.ville-score-top[b-qilr7hcg4i] {
    padding-top: 0.25rem;
}

/* Carte sur fond rouge clair, coins arrondis */
.ville-score-lcd-card[b-qilr7hcg4i] {
    position: relative;
    background: linear-gradient(160deg, #fff1f1 0%, #fdd9d9 55%, #fbc7c7 100%);
    border: 1px solid #f3b4b4;
    border-radius: 18px;
    padding: 1.1rem 0.6rem 1rem;
    text-align: center;
    overflow: hidden;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        0 6px 16px rgba(220, 53, 69, 0.12);
}

/* Reflet doux diagonal */
.ville-score-lcd-card[b-qilr7hcg4i]::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -60%;
    width: 220%;
    height: 60%;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.15) 35%,
        rgba(255, 255, 255, 0) 60%
    );
    transform: rotate(-8deg);
    pointer-events: none;
}

/* Petit voyant décoratif */
.ville-score-lcd-card[b-qilr7hcg4i]::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.5);
    box-shadow: 0 0 3px rgba(220, 53, 69, 0.4);
}

/* Badge encadré : moyenne pondérée nationale, fusionné dans le coin
   supérieur gauche de la pancarte (aucun trait intérieur visible) */
.ville-score-canada-badge[b-qilr7hcg4i] {
    position: absolute;
    top: -1px;
    left: -1px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 9px 4px 10px;
    background: linear-gradient(160deg, #fff1f1 0%, #fdd9d9 100%);
    border: 1px solid #f3b4b4;
    border-top: none;
    border-left: none;
    border-top-left-radius: 18px;
    border-bottom-right-radius: 10px;
    line-height: 1;
    z-index: 2;
}

.ville-score-canada-label[b-qilr7hcg4i] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b33a3a;
    white-space: nowrap;
}

.ville-score-canada-value[b-qilr7hcg4i] {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 800;
    color: #c82333;
    white-space: nowrap;
}

.ville-score-canada-percent-sign[b-qilr7hcg4i] {
    font-size: 0.45rem;
    font-weight: 700;
    color: #f3a0a0;
    margin-left: 1px;
}

.ville-score-label[b-qilr7hcg4i] {
    position: relative;
    font-size: 0.5rem;
    font-weight: 600;
    color: #ce7c7c;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ville-score-percentage[b-qilr7hcg4i] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1;
    margin-left: 70px;
    margin-top: 10px;
}

.ville-score-percentage-number[b-qilr7hcg4i] {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 2.1rem;
    font-weight: 800;
    color: #c82333;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease;
}

.ville-score-percent-sign[b-qilr7hcg4i] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #b33a3a;
    margin-top: 2px;
}

.ville-score-hint[b-qilr7hcg4i] {
    position: relative;
    display: block;
    margin-top: 0.4rem;
    font-size: 0.6rem;
    color: #b36969;
    font-style: italic;
}

/* Mention légale : bas de la pancarte de droite */
.ville-score-disclaimer[b-qilr7hcg4i] {
    position: relative;
    display: block;
    margin-top: 0.5rem;
    font-size: 0.52rem;
    line-height: 1.3;
    color: #b36969;
    font-style: italic;
}

/* ===========================
   Panneaux d'informations utilisateur (compte + calcul)
   =========================== */

.ville-score-user-info[b-qilr7hcg4i] {
    margin-top: 0.6rem;
    padding: 0.55rem 0.6rem;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
}

.ville-score-user-info-title[b-qilr7hcg4i] {
    display: block;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #86868b;
    margin-bottom: 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #eee;
}

.ville-score-user-profile[b-qilr7hcg4i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.ville-score-user-avatar[b-qilr7hcg4i] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid #f3b4b4;
}

.ville-score-user-profile-text[b-qilr7hcg4i] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ville-score-user-name[b-qilr7hcg4i] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ville-score-user-pseudo[b-qilr7hcg4i] {
    font-size: 0.56rem;
    color: #86868b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ville-score-user-info-row[b-qilr7hcg4i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 0;
}

.ville-score-user-info-label[b-qilr7hcg4i] {
    font-size: 0.6rem;
    color: #86868b;
}

.ville-score-user-info-value[b-qilr7hcg4i] {
    font-size: 0.62rem;
    font-weight: 600;
    color: #1d1d1f;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ville-score-match-icon[b-qilr7hcg4i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ville-score-match-icon.match-oui[b-qilr7hcg4i] {
    color: #fff;
    background: #1a8a4a;
}

.ville-score-match-icon.match-non[b-qilr7hcg4i] {
    color: #fff;
    background: #c82333;
}

.ville-score-user-info-footnote[b-qilr7hcg4i] {
    display: block;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid #eee;
    font-size: 0.48rem;
    font-style: italic;
    color: #a1a1a6;
    line-height: 1.3;
}

/* Zone du milieu, volontairement vide */
/* Icône de rafraîchissement : fusionnée dans le coin inférieur droit
   de la pancarte, même logique que le badge Canada (aucun trait intérieur) */
.ville-score-refresh-btn[b-qilr7hcg4i] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    padding: 0;
    background: linear-gradient(160deg, #fdd9d9 0%, #fbc7c7 100%);
    border: 1px solid #f3b4b4;
    border-bottom: none;
    border-right: none;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 18px;
    color: #b33a3a;
    cursor: pointer;
    transition: 0.2s ease;
    z-index: 2;
}

.ville-score-refresh-btn:hover:not(:disabled)[b-qilr7hcg4i] {
    background: linear-gradient(160deg, #fbc7c7 0%, #f5a8a8 100%);
    color: #c82333;
}

.ville-score-refresh-btn:disabled[b-qilr7hcg4i] {
    color: #ccc;
    cursor: not-allowed;
}

.ville-score-refresh-spin[b-qilr7hcg4i] {
    animation: ville-score-refresh-rotate-b-qilr7hcg4i 0.8s linear infinite;
}

@keyframes ville-score-refresh-rotate-b-qilr7hcg4i {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ville-score-button:disabled[b-qilr7hcg4i] {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

.indicators-title[b-qilr7hcg4i] {
    margin: 0 0 12px 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.indicators-placeholder[b-qilr7hcg4i] {
    font-size: 0.72rem;
    color: #a1a1a6;
    font-style: italic;
}

.indicators-error[b-qilr7hcg4i] {
    font-size: 0.72rem;
    color: #dc3545;
}

@keyframes fadeIn-b-qilr7hcg4i {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1024px) {
    .ville-details-container[b-qilr7hcg4i] {
        margin-top: 220px;
    }
}

@media (max-width: 768px) {
    .ville-details-container[b-qilr7hcg4i] {
        flex-direction: column;
        margin-top: 20px;
        margin-bottom: 20px;
        height: auto;
        margin-left: 0;
        overflow: visible;
    }

    .province-indicators[b-qilr7hcg4i],
    .onglets-panel[b-qilr7hcg4i],
    .ville-indicators[b-qilr7hcg4i] {
        width: 100%;
    }

    .ville-info-top[b-qilr7hcg4i] {
        max-height: none;
    }

    .province-indicators[b-qilr7hcg4i],
    .ville-indicators[b-qilr7hcg4i] {
        display: none;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* ---------- 3 colonnes côte à côte, comme sur le bureau ---------- */
  .ville-details-container[b-qilr7hcg4i] {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 4px !important;
    height: auto !important;
    margin: 6px 0 110px !important;      /* place pour la bande des villes en bas */
    padding: 2px !important;
    overflow: visible !important;
  }

  .ville-details-container .province-indicators[b-qilr7hcg4i],
  .ville-details-container .ville-indicators[b-qilr7hcg4i] {
    display: flex !important;
  }

  .ville-details-container .province-indicators[b-qilr7hcg4i] { width: 17% !important; min-width: 0 !important; padding: .3rem .25rem; border-radius: 8px; }
  .ville-details-container .onglets-panel[b-qilr7hcg4i]       { width: auto !important; flex: 1 1 0; min-width: 0; border-radius: 8px; }
  .ville-details-container .ville-indicators[b-qilr7hcg4i]    { width: 25% !important; min-width: 0; height: auto !important; overflow: visible; }

  /* ---------- Colonne gauche : classement des villes ---------- */
  .moyenne-ponderee-card[b-qilr7hcg4i]       { padding: .25rem .15rem; margin-bottom: .25rem; border-radius: 8px; }
  .moyenne-ponderee-label[b-qilr7hcg4i]      { font-size: .32rem; margin-bottom: .1rem; }
  .moyenne-ponderee-value[b-qilr7hcg4i]      { font-size: .62rem; }
  .moyenne-ponderee-percent-sign[b-qilr7hcg4i] { font-size: .38rem; }
  .moyenne-ponderee-sous-label[b-qilr7hcg4i] { font-size: .3rem; margin-top: .1rem; }
  .province-score-header[b-qilr7hcg4i]       { margin-bottom: .25rem; padding-bottom: .2rem; }
  .province-score-list[b-qilr7hcg4i]         { gap: 3px; }
  .province-score-item[b-qilr7hcg4i]         { padding: 3px 4px; gap: 3px; border-radius: 6px; flex-direction: column; align-items: flex-start; }
  .province-score-name[b-qilr7hcg4i]         { font-size: .38rem; max-width: 100%; }
  .province-score-value[b-qilr7hcg4i]        { font-size: .4rem; }
  .province-score-percent-sign[b-qilr7hcg4i] { font-size: .3rem; }

  /* ---------- Colonne centrale : détail de la ville ---------- */
  .ville-info-top[b-qilr7hcg4i]         { padding: .3rem .35rem !important; max-height: none !important; }
  .ville-info-columns[b-qilr7hcg4i]     { flex-direction: row !important; gap: .3rem !important; }
  .ville-info-identity[b-qilr7hcg4i]    { flex: 1 1 55%; }
  .ville-info-indicators[b-qilr7hcg4i]  { flex: 1 1 45%; margin-top: 0 !important; padding: 0 0 0 .3rem !important;
                            border-left: 1px solid #eee !important; border-top: none !important; }
  .ville-info-header[b-qilr7hcg4i]      { margin-bottom: .2rem; gap: 4px; flex-wrap: wrap; }
  .ville-info-name[b-qilr7hcg4i]        { font-size: .6rem; }
  .ville-info-slogan[b-qilr7hcg4i]      { font-size: .38rem; }
  .ville-info-grid[b-qilr7hcg4i]        { gap: 2px 6px; }
  .ville-info-label[b-qilr7hcg4i]       { font-size: .38rem; }
  .ville-info-value[b-qilr7hcg4i]       { font-size: .46rem; }

  /* ---------- Onglets : une seule ligne défilante ---------- */
  .onglets-tabs[b-qilr7hcg4i] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: .2rem !important;
    padding: .25rem .3rem !important;
    scrollbar-width: none;
  }
  .onglets-tabs[b-qilr7hcg4i]::-webkit-scrollbar { display: none; }
  .onglet-btn[b-qilr7hcg4i] {
    flex: 0 0 auto;
    padding: .15rem .4rem !important;
    font-size: .42rem !important;
    border-radius: 5px;
  }


  /* ---------- Colonne droite : probabilité et compte ---------- */
  .ville-score-lcd-card[b-qilr7hcg4i]       { padding: .8rem .2rem .6rem; border-radius: 10px; }
  .ville-score-canada-badge[b-qilr7hcg4i]   { padding: 2px 4px 2px 5px; border-top-left-radius: 10px; border-bottom-right-radius: 6px; gap: 2px; }
  .ville-score-canada-label[b-qilr7hcg4i]   { font-size: .3rem; }
  .ville-score-canada-value[b-qilr7hcg4i]   { font-size: .4rem; }
  .ville-score-canada-percent-sign[b-qilr7hcg4i] { font-size: .28rem; }
  .ville-score-percentage[b-qilr7hcg4i]     { margin: .25rem 0 0 !important; justify-content: center; }
  .ville-score-percentage-number[b-qilr7hcg4i] { font-size: 1.05rem; }
  .ville-score-percent-sign[b-qilr7hcg4i]   { font-size: .5rem; }
  .ville-score-label[b-qilr7hcg4i]          { font-size: .3rem; }
  .ville-score-hint[b-qilr7hcg4i]           { font-size: .36rem; }
  .ville-score-refresh-btn[b-qilr7hcg4i]     { width: 15px; height: 14px; border-top-left-radius: 6px; border-bottom-right-radius: 10px; }
  .ville-score-refresh-btn svg[b-qilr7hcg4i] { width: 8px; height: 8px; }
  .ville-score-disclaimer[b-qilr7hcg4i]      { font-size: .3rem; margin-top: .25rem; }

  .ville-score-user-info[b-qilr7hcg4i]          { margin-top: .3rem; padding: .3rem .3rem; border-radius: 7px; }
  .ville-score-user-info-title[b-qilr7hcg4i]    { font-size: .3rem; margin-bottom: .2rem; padding-bottom: .15rem; }
  .ville-score-user-profile[b-qilr7hcg4i]       { gap: 4px; margin-bottom: .25rem; padding-bottom: .25rem; }
  .ville-score-user-avatar[b-qilr7hcg4i]        { width: 16px; height: 16px; }
  .ville-score-user-name[b-qilr7hcg4i]          { font-size: .42rem; }
  .ville-score-user-pseudo[b-qilr7hcg4i]        { font-size: .34rem; }
  .ville-score-user-info-row[b-qilr7hcg4i]      { gap: 3px; padding: 1px 0; }
  .ville-score-user-info-label[b-qilr7hcg4i]    { font-size: .34rem; }
  .ville-score-user-info-value[b-qilr7hcg4i]    { font-size: .36rem; }
  .ville-score-match-icon[b-qilr7hcg4i]         { width: 8px; height: 8px; }
  .ville-score-match-icon svg[b-qilr7hcg4i]     { width: 6px; height: 6px; }
  .ville-score-user-info-footnote[b-qilr7hcg4i] { font-size: .3rem; margin-top: .2rem; padding-top: .2rem; }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* Cadre fixe entre la bande des provinces et celle des villes */
  html body .ville-details-container[b-qilr7hcg4i] {
    position: fixed !important;
    top: 184px !important;
    bottom: 96px !important;
    left: 6px !important;
    right: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  /* Colonne gauche fixe */
  html body .ville-details-container .province-indicators[b-qilr7hcg4i] {
    display: flex !important;
    flex: 0 0 17% !important;
    width: 17% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  /* Colonne droite fixe */
  html body .ville-details-container .ville-indicators[b-qilr7hcg4i] {
    display: flex !important;
    flex: 0 0 25% !important;
    width: 25% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  /* Colonne centrale : haut fixe, seul le contenu des onglets défile */
  html body .ville-details-container .onglets-panel[b-qilr7hcg4i] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html body .ville-details-container .ville-info-top[b-qilr7hcg4i] {
    flex: 0 0 auto !important;
    max-height: 38% !important;
    overflow-y: auto !important;
  }
  html body .ville-details-container .onglets-bottom[b-qilr7hcg4i] {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html body .ville-details-container .onglets-tabs[b-qilr7hcg4i] {
    flex: 0 0 auto !important;
  }
  html body .ville-details-container .onglets-content[b-qilr7hcg4i] {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: .3rem .3rem 0 .3rem !important;
  }

}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* ---------- Contenu des onglets (OngletContent) ---------- */
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-main,
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-side {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 10px !important;
  }
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-field {
    padding: 4px 0 !important;
    gap: 1px !important;
  }
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-label {
    font-size: .46rem !important;
  }
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-value {
    font-size: .56rem !important;
    line-height: 1.25 !important;
  }
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-placeholder {
    font-size: .5rem !important;
  }

  /* ---------- « Expérience perso » (InfluenceHistoryCard) ---------- */
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-side * {
    font-size: .5rem !important;
    line-height: 1.25 !important;
  }
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-side button {
    transform: scale(.7);
    transform-origin: top right;
  }

  
}
  html body .ville-details-container .onglets-panel[b-qilr7hcg4i] {
    position: relative !important;
    z-index: 20 !important;
  }

  @media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* Zone « Population / Superficie » : empilée, chaque barre garde sa place */
  html body .ville-details-container .ville-info-indicators[b-qilr7hcg4i] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  /* Chaque IndicatorBar : un bloc indépendant, sans hauteur imposée */
  html body .ville-details-container .ville-info-indicators[b-qilr7hcg4i]  > * {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-size: .46rem !important;
    line-height: 1.3 !important;
  }

  /* Texte à l'intérieur : taille réduite, retour à la ligne normal */
  html body .ville-details-container .ville-info-indicators[b-qilr7hcg4i]  > * * {
    font-size: .46rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  html body .villes-sticky[b-qilr7hcg4i] {
    bottom: 0 !important;          /* collée au pied de page */
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px 10px 0 0 !important;
  }

  html body .villes-sticky[b-qilr7hcg4i]  .vc-scroll {
    padding: .2rem .1rem 0 !important;   /* plus de marge sous les cartes */
    margin: 0 !important;
  }
}

@media (max-height: 500px) and (orientation: landscape) {

  /* Cadre central : de sous la bande des provinces jusqu'au-dessus de celle des villes */
  html body .ville-details-container[b-qilr7hcg4i] {
    top: 152px !important;
    bottom: 66px !important;     /* 26 (bas) + 32 (cartes) + 8 */
    gap: 3px !important;
  }

  /* Colonnes latérales plus étroites : plus de place pour le centre */
  html body .ville-details-container .province-indicators[b-qilr7hcg4i] { flex: 0 0 13% !important; width: 13% !important; }
  html body .ville-details-container .ville-indicators[b-qilr7hcg4i]    { flex: 0 0 20% !important; width: 20% !important; }

  /* Détail de la ville : sur une ligne, très compact */
  html body .ville-details-container .ville-info-top[b-qilr7hcg4i] { max-height: 44% !important; padding: .2rem .3rem !important; }
  html body .ville-details-container .ville-info-name[b-qilr7hcg4i]   { font-size: .5rem !important; }
  html body .ville-details-container .ville-info-label[b-qilr7hcg4i]  { font-size: .32rem !important; }
  html body .ville-details-container .ville-info-value[b-qilr7hcg4i]  { font-size: .38rem !important; }
  html body .ville-details-container .ville-info-grid[b-qilr7hcg4i]   { grid-template-columns: repeat(3, 1fr) !important; gap: 1px 6px !important; }

  /* Onglets */
  html body .ville-details-container .onglets-tabs[b-qilr7hcg4i] { padding: .15rem .25rem !important; }
  html body .ville-details-container .onglet-btn[b-qilr7hcg4i]   { font-size: .36rem !important; padding: .1rem .3rem !important; }

  /* Contenu des onglets */
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-label { font-size: .38rem !important; }
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-value { font-size: .46rem !important; }
  html body .ville-details-container .onglets-content[b-qilr7hcg4i]  .oc-side * { font-size: .4rem !important; }

  /* Population / Superficie */
  html body .ville-details-container .ville-info-indicators[b-qilr7hcg4i]  > * * { font-size: .36rem !important; }

  /* Colonne de gauche */
  html body .ville-details-container .moyenne-ponderee-value[b-qilr7hcg4i] { font-size: .5rem !important; }
  html body .ville-details-container .province-score-name[b-qilr7hcg4i],
  html body .ville-details-container .province-score-value[b-qilr7hcg4i]  { font-size: .32rem !important; }

  /* Colonne de droite */
  html body .ville-details-container .ville-score-lcd-card[b-qilr7hcg4i] { padding: .6rem .15rem .4rem !important; }
  html body .ville-details-container .ville-score-percentage-number[b-qilr7hcg4i] { font-size: .85rem !important; }
  html body .ville-details-container .ville-score-user-info-label[b-qilr7hcg4i],
  html body .ville-details-container .ville-score-user-info-value[b-qilr7hcg4i],
  html body .ville-details-container .ville-score-user-name[b-qilr7hcg4i] { font-size: .3rem !important; }
  html body .ville-details-container .ville-score-user-info-title[b-qilr7hcg4i],
  html body .ville-details-container .ville-score-disclaimer[b-qilr7hcg4i],
  html body .ville-details-container .ville-score-user-info-footnote[b-qilr7hcg4i] { font-size: .26rem !important; }
}

/* /Components/Pages/Guide/Installation/Installation.razor.rz.scp.css */
/* Installation Layout */
.installation-sticky[b-2dgx50p658] {
    position: fixed;
    top: 80px;
    left: 250px;
    right: 70px;
    height: 140px;
    box-sizing: border-box;
    padding: 6px;
    background: #fff;
    border-bottom: 1px solid #eee;
    border-radius: 16px;
    z-index: 1000;
    overflow: hidden;
}

/* Contenu */
.installation-content[b-2dgx50p658] {
    margin-top: 240px;
    padding: 1rem;
    animation: fadeIn-b-2dgx50p658 .3s ease;
}

/* Villes fixes en bas */
.villes-sticky[b-2dgx50p658] {
    position: fixed;
    bottom: 25px;
    left: 250px;
    right: 70px;
    z-index: 900;
    background: #fff;
    padding: .3rem;
    border-top: 1px solid #eee;
    border-radius: 12px 12px 0 0;
    animation: slideDown-b-2dgx50p658 .3s ease;
    overflow: hidden;
}

.installation-left[b-2dgx50p658] {
    width: 100%;
    min-width: 0;
    height: 100%;
}

/* Provinces : la rangée occupe toute la largeur du bandeau et défile au lieu de se couper */
.provinces-scroll[b-2dgx50p658] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.provinces-scroll[b-2dgx50p658]::-webkit-scrollbar {
    display: none;
}

/* Le composant ProvincesCards a son propre CSS scopé : ::deep traverse cette frontière */
.provinces-scroll[b-2dgx50p658]  .stats-scroll {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Cartes provinces (bloc hérité) */
.province-card[b-2dgx50p658] {
    min-width: 150px;
    height: 110px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    cursor: pointer;
    transition: .25s ease;
}

.province-card:hover[b-2dgx50p658] {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.province-card.selected[b-2dgx50p658] {
    border: 2px solid red;
    background: #fdecec;
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 10px 25px rgba(220,53,69,.25);
}

/* Villes (bloc hérité, non utilisé actuellement — VillesCards a son propre CSS scopé) */
.villes-container[b-2dgx50p658] {
    margin-top: 2rem;
    animation: slideDown-b-2dgx50p658 .35s ease;
    overflow: hidden;
}

.villes-title[b-2dgx50p658] {
    margin-bottom: .1rem;
    font-size: 1.4rem;
    font-weight: 600;
}

.cities-grid[b-2dgx50p658] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    overflow: hidden;
}

.city-card[b-2dgx50p658] {
    padding: .5rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    cursor: pointer;
    transition: .25s ease;
}

.city-card:hover[b-2dgx50p658] {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
    border-color: red;
    background: #fdecec;
}

.city-card h3[b-2dgx50p658] {
    margin: 0 0 .5rem;
    color: red;
}

.city-card p[b-2dgx50p658] {
    margin: .25rem 0;
    color: #555;
}

/* Message vide */
.empty-message[b-2dgx50p658] {
    padding: 2rem;
    text-align: center;
    color: #666;
}

/* Animations */
@keyframes fadeIn-b-2dgx50p658 {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown-b-2dgx50p658 {
    from { opacity: 0; transform: translateY(-15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1024px) {
    .installation-sticky[b-2dgx50p658] {
        left: 20px;
        right: 20px;
    }
}

@media (max-width: 768px) {
    .installation-sticky[b-2dgx50p658] {
        position: sticky;
        top: 0;
        left: auto;
        right: auto;
        height: 150px;
    }

    .installation-content[b-2dgx50p658] {
        margin-top: 20px;
    }

    .province-card[b-2dgx50p658] {
        min-width: 130px;
        height: 90px;
    }

    .cities-grid[b-2dgx50p658] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* Bande des provinces : fixe, sous la barre du menu (même valeur que la page Procédures) */
  .installation-sticky[b-2dgx50p658] {
    position: fixed !important;
    top: 94px !important;                /* ajustez si elle touche la barre du menu */
    left: 6px !important;
    right: 6px !important;
    height: 84px !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    border-radius: 12px !important;
    z-index: 1000;
  }

  /* Bande des villes : fixe, en bas, au-dessus du pied de page */
  .villes-sticky[b-2dgx50p658] {
    position: fixed !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 30px !important;     /* diminuez encore (ex. 34px) pour coller davantage au pied de page */
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #fff;
    box-shadow: none !important;
    z-index: 1000;
  }
  .villes-sticky[b-2dgx50p658]  .vc-scroll {
    padding: .2rem .1rem 0 !important;
    max-height: none !important;
  }
  .villes-sticky[b-2dgx50p658]  .vc-card {
    flex: 0 0 auto;
    width: 134px !important;
    height: 42px !important;
    padding: .25rem .4rem !important;
    gap: .35rem !important;
    border-radius: 9px !important;
  }
  .villes-sticky[b-2dgx50p658]  .vc-card:hover { transform: none; }
  .villes-sticky[b-2dgx50p658]  .vc-icon    { width: 18px; height: 18px; font-size: .5rem; border-radius: 6px; }
  .villes-sticky[b-2dgx50p658]  .vc-name    { font-size: .6rem; }
  .villes-sticky[b-2dgx50p658]  .vc-info    { font-size: .46rem; }
  .villes-sticky[b-2dgx50p658]  .vc-content { padding-right: 28px; }
  .villes-sticky[b-2dgx50p658]  .vc-actions    { top: 3px; right: 3px; gap: 2px; opacity: 1; transform: none; }
  .villes-sticky[b-2dgx50p658]  .vc-action-btn { width: 13px; height: 13px; font-size: .4rem; }
}

@media (max-height: 500px) and (orientation: landscape) {

  /* Bande des provinces : une rangée fine */
  html body .installation-sticky[b-2dgx50p658] {
    top: 94px !important;
    height: 54px !important;
    padding: 1px 4px !important;
  }
  html body .installation-sticky[b-2dgx50p658]  .stats-scroll { gap: 4px !important; padding: 2px 4px 3px !important; }
  html body .installation-sticky[b-2dgx50p658]  .stat-card {
    flex: 0 0 52px !important;
    height: 46px !important;
    padding: 2px !important;
    gap: 1px !important;
    border-radius: 7px !important;
  }
  html body .installation-sticky[b-2dgx50p658]  .province-flag { width: 20px !important; height: 20px !important; }
  html body .installation-sticky[b-2dgx50p658]  .stat-value { display: none !important; }
  html body .installation-sticky[b-2dgx50p658]  .stat-label { font-size: .4rem !important; line-height: 1.05 !important; margin-top: 0 !important; }
  html body .installation-sticky[b-2dgx50p658]  .programs-badge {
    min-width: 11px !important; height: 11px !important; font-size: .38rem !important;
    top: 1px !important; right: 1px !important; padding: 0 3px !important;
  }

  /* Bande des villes : cartes très compactes, collée en bas */
  html body .villes-sticky[b-2dgx50p658] {
    bottom: 26px !important;
    left: 4px !important;
    right: 4px !important;
  }
  html body .villes-sticky[b-2dgx50p658]  .vc-scroll { padding: .1rem .1rem 0 !important; gap: .25rem !important; }
  html body .villes-sticky[b-2dgx50p658]  .vc-card {
    width: 118px !important;
    height: 32px !important;
    padding: .15rem .3rem !important;
    gap: .25rem !important;
    border-radius: 7px !important;
  }
  html body .villes-sticky[b-2dgx50p658]  .vc-icon    { width: 14px !important; height: 14px !important; font-size: .4rem !important; }
  html body .villes-sticky[b-2dgx50p658]  .vc-name    { font-size: .5rem !important; }
  html body .villes-sticky[b-2dgx50p658]  .vc-info    { font-size: .38rem !important; }
  html body .villes-sticky[b-2dgx50p658]  .vc-content { padding-right: 22px !important; }
  html body .villes-sticky[b-2dgx50p658]  .vc-action-btn { width: 10px !important; height: 10px !important; font-size: .3rem !important; }
  html body .villes-sticky[b-2dgx50p658]  .vc-actions    { top: 2px !important; right: 2px !important; gap: 1px !important; }
}
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* Aucun ancêtre ne doit enfermer la fenêtre dans la colonne centrale */
  html body .ville-details-container[b-2dgx50p658],
  html body .ville-details-container .onglets-panel[b-2dgx50p658],
  html body .ville-details-container .onglets-bottom[b-2dgx50p658],
  html body .ville-details-container .onglets-content[b-2dgx50p658],
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-layout,
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-main,
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-side {
    transform: none !important;
    filter: none !important;
    contain: none !important;
    will-change: auto !important;
    animation: none !important;
    backdrop-filter: none !important;
  }

  /* Le conteneur passe au-dessus des bandes des provinces et des villes */
  html body .ville-details-container[b-2dgx50p658] {
    z-index: 500 !important;
  }

  /* Fond : couvre tout l'écran, carte centrée */
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-side [class*="overlay"],
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-side [class*="backdrop"] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, .35) !important;
  }

  /* Carte miniaturisée */
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-side [role="dialog"],
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-side [class*="dialog"],
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-side [class*="popup"],
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-side [class*="modal"]:not([class*="overlay"]):not([class*="backdrop"]) {
    position: relative !important;
    inset: auto !important;
    width: min(80vw, 300px) !important;
    max-width: 80vw !important;
    max-height: 60dvh !important;
    padding: .5rem .6rem !important;
    border-radius: 10px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* Textes et boutons à l'intérieur de la carte */
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-side [role="dialog"] *,
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-side [class*="modal"] * {
    font-size: .5rem !important;
    line-height: 1.25 !important;
  }
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-side [role="dialog"] button,
  html body .ville-details-container .onglets-content[b-2dgx50p658]  .oc-side [class*="modal"] button {
    transform: none !important;
    padding: .2rem .5rem !important;
  }
}


/* /Components/Pages/Guide/Installation/OngletContent.razor.rz.scp.css */
.oc-layout[b-af3p7jtqc1],
.oci-layout[b-af3p7jtqc1] {
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 900px) {
    .oc-layout[b-af3p7jtqc1],
    .oci-layout[b-af3p7jtqc1] {
        flex-direction: column;
    }
}

.oc-main[b-af3p7jtqc1],
.oci-champs[b-af3p7jtqc1] {
    flex: 1 1 65%;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.oc-side[b-af3p7jtqc1],
.oci-history[b-af3p7jtqc1] {
    flex: 1 1 45%;
    min-width: 220px;
    min-height: 0;
    overflow-y: auto;
}

.oc-placeholder[b-af3p7jtqc1] {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: #a1a1a6;
    font-style: italic;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.oc-grid[b-af3p7jtqc1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: oc-fade-in-b-af3p7jtqc1 .2s ease;
}

@keyframes oc-fade-in-b-af3p7jtqc1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.oc-field-full[b-af3p7jtqc1] {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .oc-grid[b-af3p7jtqc1] {
        grid-template-columns: 1fr;
    }
}

.oc-field[b-af3p7jtqc1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.oc-value[b-af3p7jtqc1] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #1d1d1f;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.oc-label[b-af3p7jtqc1] {
    font-size: 0.66rem;
    font-weight: 500;
    color: #86868b;
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* iOS : ce défilement « tactile » enferme les éléments fixes dans leur parent */
  html body .ville-details-container .onglets-content[b-af3p7jtqc1],
  html body .ville-details-container .onglets-panel[b-af3p7jtqc1],
  html body .ville-details-container .onglets-bottom[b-af3p7jtqc1],
  html body .ville-details-container .province-indicators[b-af3p7jtqc1],
  html body .ville-details-container .ville-indicators[b-af3p7jtqc1],
  html body .ville-details-container .ville-info-top[b-af3p7jtqc1] {
    -webkit-overflow-scrolling: auto !important;
  }

  /* Aucun ancêtre ne doit créer de contexte qui coince la fenêtre */
  html body .ville-details-container[b-af3p7jtqc1],
  html body .ville-details-container .onglets-panel[b-af3p7jtqc1],
  html body .ville-details-container .onglets-bottom[b-af3p7jtqc1],
  html body .ville-details-container .onglets-content[b-af3p7jtqc1],
  html body .ville-details-container .onglets-content[b-af3p7jtqc1]  .oc-layout,
  html body .ville-details-container .onglets-content[b-af3p7jtqc1]  .oc-main,
  html body .ville-details-container .onglets-content[b-af3p7jtqc1]  .oc-side {
    transform: none !important;
    filter: none !important;
    contain: none !important;
    will-change: auto !important;
    animation: none !important;
  }

  /* Le conteneur passe au-dessus des bandes des provinces et des villes */
  html body .ville-details-container[b-af3p7jtqc1] {
    z-index: 500 !important;
  }
}
/* /Components/Pages/Guide/Integration/InfoIntegration.razor.rz.scp.css */
/* Conteneur principal - 3 colonnes : 10% / 70% / 16.5% */
.ville-details-container[b-4sjodt4r5g] {
    display: flex;
    gap: 1rem;
    margin-top: 80px;
    margin-bottom: 50px;
    margin-left: -35px;
    margin-right: 0px;
    padding: 1rem;
    height: calc(100vh - 350px);
    overflow: hidden;
    animation: fadeIn-b-4sjodt4r5g .3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

/* ===========================
   Colonne 10% : classement des villes de la province
   =========================== */

.province-indicators[b-4sjodt4r5g] {
    width: 10%;
    min-width: 140px;
    background: #fff;
    /* border: 1px solid #eee; */
    border-radius: 12px;
    padding: 0.75rem 0.6rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Pancarte : moyenne pondérée des villes de la province */
.moyenne-ponderee-card[b-4sjodt4r5g] {
    position: relative;
    background: linear-gradient(160deg, #fff1f1 0%, #fdd9d9 55%, #fbc7c7 100%);
    border: 1px solid #f3b4b4;
    border-radius: 12px;
    padding: 0.6rem 0.4rem;
    text-align: center;
    margin-bottom: 0.6rem;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        0 4px 10px rgba(220, 53, 69, 0.1);
}

.moyenne-ponderee-label[b-4sjodt4r5g] {
    display: block;
    font-size: 0.5rem;
    font-weight: 700;
    color: #b33a3a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}

.moyenne-ponderee-value[b-4sjodt4r5g] {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 1.15rem;
    font-weight: 800;
    color: #c82333;
    line-height: 1;
}

.moyenne-ponderee-percent-sign[b-4sjodt4r5g] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b33a3a;
    margin-top: 1px;
    vertical-align: super;
}

.moyenne-ponderee-sous-label[b-4sjodt4r5g] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.55rem;
    color: #b36969;
    font-style: italic;
}

.province-score-header[b-4sjodt4r5g] {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #86868b;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.province-score-list[b-4sjodt4r5g] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.province-score-item[b-4sjodt4r5g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #fafafa;
    border: 1px solid transparent;
    transition: 0.15s ease;
}

.province-score-item.active[b-4sjodt4r5g] {
    background: #fdecec;
    border-color: #f3b4b4;
}

.province-score-name[b-4sjodt4r5g] {
    font-size: 0.62rem;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.province-score-value[b-4sjodt4r5g] {
    flex: 0 0 auto;
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 0.66rem;
    font-weight: 800;
    color: #c82333;
    white-space: nowrap;
}

.province-score-percent-sign[b-4sjodt4r5g] {
    font-size: 0.55rem;
    font-weight: 700;
    color: #b33a3a;
    margin-left: 1px;
}

/* Colonne 70% : panneau divisé haut/bas */
.onglets-panel[b-4sjodt4r5g] {
    width: 70%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
}

/* ===========================
   Section haute : informations générales + indicateurs province et ville
   =========================== */

.ville-info-top[b-4sjodt4r5g] {
    flex: 0 0 auto;
    max-height: 46%;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.ville-info-columns[b-4sjodt4r5g] {
    display: flex;
    gap: 1.5rem;
}

.ville-info-identity[b-4sjodt4r5g] {
    flex: 1 1 40%;
    min-width: 0;
}

.ville-info-indicators[b-4sjodt4r5g] {
    margin-top: 30px;
    flex: 1 1 30%;
    min-width: 0;
    padding-left: 1.25rem;
    border-left: 1px solid #eee;
}

@media (max-width: 900px) {
    .ville-info-columns[b-4sjodt4r5g] {
        flex-direction: column;
    }

    .ville-info-indicators[b-4sjodt4r5g] {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #eee;
        padding-top: 1rem;
    }
}

.ville-info-header[b-4sjodt4r5g] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: .75rem;
}

.ville-info-name[b-4sjodt4r5g] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.ville-info-slogan[b-4sjodt4r5g] {
    font-size: 0.72rem;
    font-style: italic;
    color: #86868b;
}

.ville-info-grid[b-4sjodt4r5g] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 20px;
}

.ville-info-item[b-4sjodt4r5g] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ville-info-label[b-4sjodt4r5g] {
    font-size: 0.62rem;
    font-weight: 500;
    color: #86868b;
}

.ville-info-value[b-4sjodt4r5g] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1d1d1f;
}

/* ===========================
   Section basse : onglets thématiques + contenu
   =========================== */

.onglets-bottom[b-4sjodt4r5g] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.onglets-tabs[b-4sjodt4r5g] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.onglet-btn[b-4sjodt4r5g] {
    padding: .5rem 1rem;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: .7rem;
    color: #555;
    transition: .2s ease;
    font-weight: 600;
}

.onglet-btn:hover[b-4sjodt4r5g] {
    border-color: red;
    color: black;
}

.onglet-btn.active[b-4sjodt4r5g] {
    background: #fdecec;
    border-color: red;
    color: black;
    box-shadow: 0 4px 10px rgba(220,53,69,.25);
}

.onglets-content[b-4sjodt4r5g] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.25rem;
    overflow-y: auto;
}

/* ===========================
   Colonne 16.5% : probabilité d'intégration (fond rouge clair)
   =========================== */

.ville-indicators[b-4sjodt4r5g] {
    width: 16.5%;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.ville-score-top[b-4sjodt4r5g] {
    padding-top: 0.25rem;
}

/* Carte sur fond rouge clair, coins arrondis */
.ville-score-lcd-card[b-4sjodt4r5g] {
    position: relative;
    background: linear-gradient(160deg, #fff1f1 0%, #fdd9d9 55%, #fbc7c7 100%);
    border: 1px solid #f3b4b4;
    border-radius: 18px;
    padding: 1.1rem 0.6rem 1rem;
    text-align: center;
    overflow: hidden;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        0 6px 16px rgba(220, 53, 69, 0.12);
}

/* Reflet doux diagonal */
.ville-score-lcd-card[b-4sjodt4r5g]::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -60%;
    width: 220%;
    height: 60%;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.15) 35%,
        rgba(255, 255, 255, 0) 60%
    );
    transform: rotate(-8deg);
    pointer-events: none;
}

/* Petit voyant décoratif */
.ville-score-lcd-card[b-4sjodt4r5g]::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.5);
    box-shadow: 0 0 3px rgba(220, 53, 69, 0.4);
}

/* Badge encadré : moyenne pondérée nationale, fusionné dans le coin
   supérieur gauche de la pancarte (aucun trait intérieur visible) */
.ville-score-canada-badge[b-4sjodt4r5g] {
    position: absolute;
    top: -1px;
    left: -1px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 9px 4px 10px;
    background: linear-gradient(160deg, #fff1f1 0%, #fdd9d9 100%);
    border: 1px solid #f3b4b4;
    border-top: none;
    border-left: none;
    border-top-left-radius: 18px;
    border-bottom-right-radius: 10px;
    line-height: 1;
    z-index: 2;
}

.ville-score-canada-label[b-4sjodt4r5g] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b33a3a;
    white-space: nowrap;
}

.ville-score-canada-value[b-4sjodt4r5g] {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 800;
    color: #c82333;
    white-space: nowrap;
}

.ville-score-canada-percent-sign[b-4sjodt4r5g] {
    font-size: 0.45rem;
    font-weight: 700;
    color: #f3a0a0;
    margin-left: 1px;
}

.ville-score-label[b-4sjodt4r5g] {
    position: relative;
    font-size: 0.5rem;
    font-weight: 600;
    color: #ce7c7c;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ville-score-percentage[b-4sjodt4r5g] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1;
    margin-left: 70px;
    margin-top: 10px;
}

.ville-score-percentage-number[b-4sjodt4r5g] {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 2.1rem;
    font-weight: 800;
    color: #c82333;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease;
}

.ville-score-percent-sign[b-4sjodt4r5g] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #b33a3a;
    margin-top: 2px;
}

.ville-score-hint[b-4sjodt4r5g] {
    position: relative;
    display: block;
    margin-top: 0.4rem;
    font-size: 0.6rem;
    color: #b36969;
    font-style: italic;
}

/* Mention légale : bas de la pancarte de droite */
.ville-score-disclaimer[b-4sjodt4r5g] {
    position: relative;
    display: block;
    margin-top: 0.5rem;
    font-size: 0.52rem;
    line-height: 1.3;
    color: #b36969;
    font-style: italic;
}

/* ===========================
   Panneaux d'informations utilisateur (compte + calcul)
   =========================== */

.ville-score-user-info[b-4sjodt4r5g] {
    margin-top: 0.6rem;
    padding: 0.55rem 0.6rem;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
}

.ville-score-user-info-title[b-4sjodt4r5g] {
    display: block;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #86868b;
    margin-bottom: 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #eee;
}

.ville-score-user-profile[b-4sjodt4r5g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.ville-score-user-avatar[b-4sjodt4r5g] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid #f3b4b4;
}

.ville-score-user-profile-text[b-4sjodt4r5g] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ville-score-user-name[b-4sjodt4r5g] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ville-score-user-pseudo[b-4sjodt4r5g] {
    font-size: 0.56rem;
    color: #86868b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ville-score-user-info-row[b-4sjodt4r5g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 0;
}

.ville-score-user-info-label[b-4sjodt4r5g] {
    font-size: 0.6rem;
    color: #86868b;
}

.ville-score-user-info-value[b-4sjodt4r5g] {
    font-size: 0.62rem;
    font-weight: 600;
    color: #1d1d1f;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ville-score-match-icon[b-4sjodt4r5g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ville-score-match-icon.match-oui[b-4sjodt4r5g] {
    color: #fff;
    background: #1a8a4a;
}

.ville-score-match-icon.match-non[b-4sjodt4r5g] {
    color: #fff;
    background: #c82333;
}

.ville-score-user-info-footnote[b-4sjodt4r5g] {
    display: block;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid #eee;
    font-size: 0.48rem;
    font-style: italic;
    color: #a1a1a6;
    line-height: 1.3;
}

/* Icône de rafraîchissement : fusionnée dans le coin inférieur droit
   de la pancarte, même logique que le badge Canada (aucun trait intérieur) */
.ville-score-refresh-btn[b-4sjodt4r5g] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    padding: 0;
    background: linear-gradient(160deg, #fdd9d9 0%, #fbc7c7 100%);
    border: 1px solid #f3b4b4;
    border-bottom: none;
    border-right: none;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 18px;
    color: #b33a3a;
    cursor: pointer;
    transition: 0.2s ease;
    z-index: 2;
}

.ville-score-refresh-btn:hover:not(:disabled)[b-4sjodt4r5g] {
    background: linear-gradient(160deg, #fbc7c7 0%, #f5a8a8 100%);
    color: #c82333;
}

.ville-score-refresh-btn:disabled[b-4sjodt4r5g] {
    color: #ccc;
    cursor: not-allowed;
}

.ville-score-refresh-spin[b-4sjodt4r5g] {
    animation: ville-score-refresh-rotate-b-4sjodt4r5g 0.8s linear infinite;
}

@keyframes ville-score-refresh-rotate-b-4sjodt4r5g {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ville-score-button:disabled[b-4sjodt4r5g] {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

.indicators-title[b-4sjodt4r5g] {
    margin: 0 0 12px 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.indicators-placeholder[b-4sjodt4r5g] {
    font-size: 0.72rem;
    color: #a1a1a6;
    font-style: italic;
}

.indicators-error[b-4sjodt4r5g] {
    font-size: 0.72rem;
    color: #dc3545;
}

@keyframes fadeIn-b-4sjodt4r5g {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1024px) {
    .ville-details-container[b-4sjodt4r5g] {
        margin-top: 220px;
    }
}

@media (max-width: 768px) {
    .ville-details-container[b-4sjodt4r5g] {
        flex-direction: column;
        margin-top: 20px;
        margin-bottom: 20px;
        height: auto;
        margin-left: 0;
        overflow: visible;
    }

    .province-indicators[b-4sjodt4r5g],
    .onglets-panel[b-4sjodt4r5g],
    .ville-indicators[b-4sjodt4r5g] {
        width: 100%;
    }

    .ville-info-top[b-4sjodt4r5g] {
        max-height: none;
    }

    .province-indicators[b-4sjodt4r5g],
    .ville-indicators[b-4sjodt4r5g] {
        display: none;
    }
}

/* =====================================================================
   À COLLER À LA FIN de InfoIntegration.razor.css (après le dernier bloc
   @media (max-width: 768px)).

   ET modifier, plus haut dans le même fichier, la règle .onglets-content :
       padding: 1.25rem;
   devient :
       padding: 1.25rem 0 0 1.25rem;
   (identique à Installation)
   ===================================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* ---------- 3 colonnes côte à côte, comme sur le bureau ---------- */
  .ville-details-container[b-4sjodt4r5g] {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 4px !important;
    height: auto !important;
    margin: 6px 0 110px !important;
    padding: 2px !important;
    overflow: visible !important;
  }

  .ville-details-container .province-indicators[b-4sjodt4r5g],
  .ville-details-container .ville-indicators[b-4sjodt4r5g] {
    display: flex !important;
  }

  .ville-details-container .province-indicators[b-4sjodt4r5g] { width: 17% !important; min-width: 0 !important; padding: .3rem .25rem; border-radius: 8px; }
  .ville-details-container .onglets-panel[b-4sjodt4r5g]       { width: auto !important; flex: 1 1 0; min-width: 0; border-radius: 8px; }
  .ville-details-container .ville-indicators[b-4sjodt4r5g]    { width: 25% !important; min-width: 0; height: auto !important; overflow: visible; }

  /* ---------- Colonne gauche : classement des villes ---------- */
  .moyenne-ponderee-card[b-4sjodt4r5g]       { padding: .25rem .15rem; margin-bottom: .25rem; border-radius: 8px; }
  .moyenne-ponderee-label[b-4sjodt4r5g]      { font-size: .32rem; margin-bottom: .1rem; }
  .moyenne-ponderee-value[b-4sjodt4r5g]      { font-size: .62rem; }
  .moyenne-ponderee-percent-sign[b-4sjodt4r5g] { font-size: .38rem; }
  .moyenne-ponderee-sous-label[b-4sjodt4r5g] { font-size: .3rem; margin-top: .1rem; }
  .province-score-header[b-4sjodt4r5g]       { margin-bottom: .25rem; padding-bottom: .2rem; }
  .province-score-list[b-4sjodt4r5g]         { gap: 3px; }
  .province-score-item[b-4sjodt4r5g]         { padding: 3px 4px; gap: 3px; border-radius: 6px; flex-direction: column; align-items: flex-start; }
  .province-score-name[b-4sjodt4r5g]         { font-size: .38rem; max-width: 100%; }
  .province-score-value[b-4sjodt4r5g]        { font-size: .4rem; }
  .province-score-percent-sign[b-4sjodt4r5g] { font-size: .3rem; }

  /* ---------- Colonne centrale : détail de la ville ---------- */
  .ville-info-top[b-4sjodt4r5g]         { padding: .3rem .35rem !important; max-height: none !important; }
  .ville-info-columns[b-4sjodt4r5g]     { flex-direction: row !important; gap: .3rem !important; }
  .ville-info-identity[b-4sjodt4r5g]    { flex: 1 1 55%; }
  .ville-info-indicators[b-4sjodt4r5g]  { flex: 1 1 45%; margin-top: 0 !important; padding: 0 0 0 .3rem !important;
                            border-left: 1px solid #eee !important; border-top: none !important; }
  .ville-info-header[b-4sjodt4r5g]      { margin-bottom: .2rem; gap: 4px; flex-wrap: wrap; }
  .ville-info-name[b-4sjodt4r5g]        { font-size: .8rem; }
  .ville-info-slogan[b-4sjodt4r5g]      { font-size: .38rem; }
  .ville-info-grid[b-4sjodt4r5g]        { gap: 2px 6px; }
  .ville-info-label[b-4sjodt4r5g]       { font-size: .4rem; }
  .ville-info-value[b-4sjodt4r5g]       { font-size: .46rem; }

  /* ---------- Onglets : une seule ligne défilante ---------- */
  .onglets-tabs[b-4sjodt4r5g] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: .2rem !important;
    padding: .25rem .3rem !important;
    scrollbar-width: none;
  }
  .onglets-tabs[b-4sjodt4r5g]::-webkit-scrollbar { display: none; }
  .onglet-btn[b-4sjodt4r5g] {
    flex: 0 0 auto;
    padding: .15rem .4rem !important;
    font-size: .42rem !important;
    border-radius: 5px;
  }

  /* ---------- Colonne droite : probabilité et compte ---------- */
  .ville-score-lcd-card[b-4sjodt4r5g]       { padding: .8rem .2rem .6rem; border-radius: 10px; }
  .ville-score-canada-badge[b-4sjodt4r5g]   { padding: 2px 4px 2px 5px; border-top-left-radius: 10px; border-bottom-right-radius: 6px; gap: 2px; }
  .ville-score-canada-label[b-4sjodt4r5g]   { font-size: .3rem; }
  .ville-score-canada-value[b-4sjodt4r5g]   { font-size: .4rem; }
  .ville-score-canada-percent-sign[b-4sjodt4r5g] { font-size: .28rem; }
  .ville-score-percentage[b-4sjodt4r5g]     { margin: .25rem 0 0 !important; justify-content: center; }
  .ville-score-percentage-number[b-4sjodt4r5g] { font-size: 1.05rem; }
  .ville-score-percent-sign[b-4sjodt4r5g]   { font-size: .5rem; }
  .ville-score-label[b-4sjodt4r5g]          { font-size: .3rem; }
  .ville-score-hint[b-4sjodt4r5g]           { font-size: .36rem; }
  .ville-score-refresh-btn[b-4sjodt4r5g]     { width: 15px; height: 14px; border-top-left-radius: 6px; border-bottom-right-radius: 10px; }
  .ville-score-refresh-btn svg[b-4sjodt4r5g] { width: 8px; height: 8px; }
  .ville-score-disclaimer[b-4sjodt4r5g]      { font-size: .3rem; margin-top: .25rem; }

  .ville-score-user-info[b-4sjodt4r5g]          { margin-top: .3rem; padding: .3rem .3rem; border-radius: 7px; }
  .ville-score-user-info-title[b-4sjodt4r5g]    { font-size: .3rem; margin-bottom: .2rem; padding-bottom: .15rem; }
  .ville-score-user-profile[b-4sjodt4r5g]       { gap: 4px; margin-bottom: .25rem; padding-bottom: .25rem; }
  .ville-score-user-avatar[b-4sjodt4r5g]        { width: 16px; height: 16px; }
  .ville-score-user-name[b-4sjodt4r5g]          { font-size: .42rem; }
  .ville-score-user-pseudo[b-4sjodt4r5g]        { font-size: .34rem; }
  .ville-score-user-info-row[b-4sjodt4r5g]      { gap: 3px; padding: 1px 0; }
  .ville-score-user-info-label[b-4sjodt4r5g]    { font-size: .34rem; }
  .ville-score-user-info-value[b-4sjodt4r5g]    { font-size: .36rem; }
  .ville-score-match-icon[b-4sjodt4r5g]         { width: 8px; height: 8px; }
  .ville-score-match-icon svg[b-4sjodt4r5g]     { width: 6px; height: 6px; }
  .ville-score-user-info-footnote[b-4sjodt4r5g] { font-size: .3rem; margin-top: .2rem; padding-top: .2rem; }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* Cadre fixe entre la bande des provinces et celle des villes */
  html body .ville-details-container[b-4sjodt4r5g] {
    position: fixed !important;
    top: 184px !important;
    bottom: 96px !important;
    left: 6px !important;
    right: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  /* Colonne gauche fixe */
  html body .ville-details-container .province-indicators[b-4sjodt4r5g] {
    display: flex !important;
    flex: 0 0 17% !important;
    width: 17% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  /* Colonne droite fixe */
  html body .ville-details-container .ville-indicators[b-4sjodt4r5g] {
    display: flex !important;
    flex: 0 0 25% !important;
    width: 25% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  /* Colonne centrale : haut fixe, seul le contenu des onglets défile */
  html body .ville-details-container .onglets-panel[b-4sjodt4r5g] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    z-index: 20 !important;
  }
  html body .ville-details-container .ville-info-top[b-4sjodt4r5g] {
    flex: 0 0 auto !important;
    max-height: 38% !important;
    overflow-y: auto !important;
  }
  html body .ville-details-container .onglets-bottom[b-4sjodt4r5g] {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html body .ville-details-container .onglets-tabs[b-4sjodt4r5g] {
    flex: 0 0 auto !important;
  }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g] {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: .3rem .3rem 0 .3rem !important;
  }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* ---------- Contenu des onglets (OngletContentIntegration) ---------- */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-main,
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-side {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 10px !important;
  }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-field {
    padding: 4px 0 !important;
    gap: 1px !important;
  }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-label {
    font-size: .46rem !important;
  }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-value {
    font-size: .56rem !important;
    line-height: 1.25 !important;
  }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-placeholder {
    font-size: .5rem !important;
  }

  /* ---------- « Expérience perso » (InfluenceHistoryCard) ---------- */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-side * {
    font-size: .5rem !important;
    line-height: 1.25 !important;
  }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-side button {
    transform: scale(.7);
    transform-origin: top right;
  }

  /* ---------- Zone « Population / Superficie » : empilée ---------- */
  html body .ville-details-container .ville-info-indicators[b-4sjodt4r5g] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  html body .ville-details-container .ville-info-indicators[b-4sjodt4r5g]  > * {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-size: .46rem !important;
    line-height: 1.3 !important;
  }
  html body .ville-details-container .ville-info-indicators[b-4sjodt4r5g]  > * * {
    font-size: .46rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-height: 500px) and (orientation: landscape) {

  /* Cadre central : de sous la bande des provinces jusqu'au-dessus de celle des villes */
  html body .ville-details-container[b-4sjodt4r5g] {
    top: 152px !important;
    bottom: 66px !important;
    gap: 3px !important;
  }

  /* Colonnes latérales plus étroites : plus de place pour le centre */
  html body .ville-details-container .province-indicators[b-4sjodt4r5g] { flex: 0 0 13% !important; width: 13% !important; }
  html body .ville-details-container .ville-indicators[b-4sjodt4r5g]    { flex: 0 0 20% !important; width: 20% !important; }

  /* Détail de la ville : sur une ligne, très compact */
  html body .ville-details-container .ville-info-top[b-4sjodt4r5g] { max-height: 44% !important; padding: .2rem .3rem !important; }
  html body .ville-details-container .ville-info-name[b-4sjodt4r5g]   { font-size: .5rem !important; }
  html body .ville-details-container .ville-info-label[b-4sjodt4r5g]  { font-size: .32rem !important; }
  html body .ville-details-container .ville-info-value[b-4sjodt4r5g]  { font-size: .38rem !important; }
  html body .ville-details-container .ville-info-grid[b-4sjodt4r5g]   { grid-template-columns: repeat(3, 1fr) !important; gap: 1px 6px !important; }

  /* Onglets */
  html body .ville-details-container .onglets-tabs[b-4sjodt4r5g] { padding: .15rem .25rem !important; }
  html body .ville-details-container .onglet-btn[b-4sjodt4r5g]   { font-size: .36rem !important; padding: .1rem .3rem !important; }

  /* Contenu des onglets */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-label { font-size: .38rem !important; }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-value { font-size: .46rem !important; }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oc-side * { font-size: .4rem !important; }

  /* Population / Superficie */
  html body .ville-details-container .ville-info-indicators[b-4sjodt4r5g]  > * * { font-size: .36rem !important; }

  /* Colonne de gauche */
  html body .ville-details-container .moyenne-ponderee-value[b-4sjodt4r5g] { font-size: .5rem !important; }
  html body .ville-details-container .province-score-name[b-4sjodt4r5g],
  html body .ville-details-container .province-score-value[b-4sjodt4r5g]  { font-size: .32rem !important; }

  /* Colonne de droite */
  html body .ville-details-container .ville-score-lcd-card[b-4sjodt4r5g] { padding: .6rem .15rem .4rem !important; }
  html body .ville-details-container .ville-score-percentage-number[b-4sjodt4r5g] { font-size: .85rem !important; }
  html body .ville-details-container .ville-score-user-info-label[b-4sjodt4r5g],
  html body .ville-details-container .ville-score-user-info-value[b-4sjodt4r5g],
  html body .ville-details-container .ville-score-user-name[b-4sjodt4r5g] { font-size: .3rem !important; }
  html body .ville-details-container .ville-score-user-info-title[b-4sjodt4r5g],
  html body .ville-details-container .ville-score-disclaimer[b-4sjodt4r5g],
  html body .ville-details-container .ville-score-user-info-footnote[b-4sjodt4r5g] { font-size: .26rem !important; }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* Aucun ancêtre ne doit créer de contexte qui coince la fenêtre dans le cadre */
  html body .ville-details-container[b-4sjodt4r5g],
  html body .ville-details-container .onglets-panel[b-4sjodt4r5g],
  html body .ville-details-container .onglets-bottom[b-4sjodt4r5g],
  html body .ville-details-container .onglets-content[b-4sjodt4r5g],
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-layout,
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history {
    transform: none !important;
    filter: none !important;
    contain: none !important;
    will-change: auto !important;
    animation: none !important;
  }

  /* Fenêtre « + expérience » : plein écran au-dessus de la page, quel que soit son nom de classe */
  html body .ville-details-container .oci-history[b-4sjodt4r5g]  [class*="modal"],
  html body .ville-details-container .oci-history[b-4sjodt4r5g]  [class*="popup"],
  html body .ville-details-container .oci-history[b-4sjodt4r5g]  [class*="dialog"],
  html body .ville-details-container .oci-history[b-4sjodt4r5g]  [class*="overlay"],
  html body .ville-details-container .oci-history[b-4sjodt4r5g]  [class*="backdrop"],
  html body .ville-details-container .oci-history[b-4sjodt4r5g]  [role="dialog"] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
  }
}

/* Mobile : « Expérience perso » fixe en bas du cadre du milieu, les champs défilent au-dessus */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* Le cadre ne défile plus lui-même : ses deux parties se partagent la hauteur */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g] {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: .3rem .3rem 0 .3rem !important;
  }
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Champs : seule cette partie défile */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-champs {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Expérience perso : collée en bas, toujours visible */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    max-height: 42% !important;
    overflow-y: auto !important;
    background: #fff;
    border-top: 1px solid #eee;
    padding-top: 4px;
  }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* Le conteneur passe au-dessus des bandes des provinces et des villes (z-index 1000) */
  html body .ville-details-container[b-4sjodt4r5g] {
    z-index: 500 !important;
  }

  /* Sur iOS, ce défilement « tactile » enferme les éléments fixes dans leur parent */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g],
  html body .ville-details-container .onglets-panel[b-4sjodt4r5g],
  html body .ville-details-container .province-indicators[b-4sjodt4r5g],
  html body .ville-details-container .ville-indicators[b-4sjodt4r5g],
  html body .ville-details-container .ville-info-top[b-4sjodt4r5g] {
    -webkit-overflow-scrolling: auto !important;
  }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* Carte « Expérience perso » : miniaturisée */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history {
    max-height: 26% !important;
    padding: 2px 4px 0 !important;
    margin: 2px !important;
    border-radius: 6px !important;
  }

  /* Tous les textes de la carte (y compris le composant enfant) */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history * {
    font-size: .5rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Titre « EXPÉRIENCE PERSO » */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history h1,
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history h2,
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history h3,
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history h4,
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history h5,
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history h6 {
    font-size: .6rem !important;
    padding: 0 !important;
  }

  /* Bouton « + » rond */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history button {
    transform: none !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: .5rem !important;
    line-height: 1 !important;
  }

  /* Éléments internes (cadre blanc, en-tête, texte vide) */
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history > *,
  html body .ville-details-container .onglets-content[b-4sjodt4r5g]  .oci-history > * > * {
    padding: 2px 4px !important;
    border-radius: 6px !important;
    gap: 3px !important;
  }
}
/* /Components/Pages/Guide/Integration/Integration.razor.rz.scp.css */
/* Integration Layout */
.integration-sticky[b-ytr2p4jexm] {
    position: fixed;
    top: 80px;
    left: 250px;
    right: 70px;
    height: 140px;
    box-sizing: border-box;
    padding: 6px;
    background: #fff;
    border-bottom: 1px solid #eee;
    border-radius: 0 0 12px 12px;
    z-index: 1000;
    overflow: hidden;
}

/* Contenu (état vide, aucune province sélectionnée) */
.integration-content[b-ytr2p4jexm] {
    position: relative;   /* nécessaire pour ancrer right:-16px / bottom:-16px */
    overflow: visible;    /* la carte peut déborder sans être coupée */
    margin-top: 10px;
    padding: 1rem;
    animation: fadeIn-b-ytr2p4jexm .3s ease;
}

/* Villes fixes en bas */
.villes-sticky[b-ytr2p4jexm] {
    position: fixed;
    bottom: 25px;
    left: 250px;
    right: 70px;
    z-index: 900;
    background: #fff;
    padding: .3rem;
    border-top: 1px solid #eee;
    border-radius: 12px 12px 0 0;
    animation: slideDown-b-ytr2p4jexm .3s ease;
    overflow: hidden;
}

.integration-left[b-ytr2p4jexm] {
    width: 100%;
    min-width: 0;
    height: 100%;
}

/* Provinces : la rangée occupe toute la largeur du bandeau et défile au lieu de se couper */
.provinces-scroll[b-ytr2p4jexm] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.provinces-scroll[b-ytr2p4jexm]::-webkit-scrollbar {
    display: none;
}

/* Le composant ProvincesCards a son propre CSS scopé : ::deep traverse cette frontière */
.provinces-scroll[b-ytr2p4jexm]  .stats-scroll {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Cartes provinces (bloc hérité) */
.province-card[b-ytr2p4jexm] {
    min-width: 150px;
    height: 90px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    cursor: pointer;
    transition: .25s ease;
}

.province-card:hover[b-ytr2p4jexm] {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.province-card.selected[b-ytr2p4jexm] {
    border: 2px solid red;
    background: #fdecec;
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 10px 25px rgba(220,53,69,.25);
}

/* Message vide */
.empty-message[b-ytr2p4jexm] {
    padding: 2rem;
    text-align: center;
    color: #666;
}

/* Animations */
@keyframes fadeIn-b-ytr2p4jexm {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown-b-ytr2p4jexm {
    from { opacity: 0; transform: translateY(-15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1024px) {
    .integration-sticky[b-ytr2p4jexm] {
        left: 20px;
        right: 20px;
    }

    .villes-sticky[b-ytr2p4jexm] {
        left: 20px;
        right: 20px;
    }
}

@media (max-width: 768px) {
    .integration-sticky[b-ytr2p4jexm] {
        position: sticky;
        top: 0;
        left: auto;
        right: auto;
        height: 150px;
    }

    .villes-sticky[b-ytr2p4jexm] {
        position: static;
        left: auto;
        right: auto;
    }

    .integration-content[b-ytr2p4jexm] {
        margin-top: 20px;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* Bande des provinces : fixe, sous la barre du menu (même valeur que Installation) */
  .integration-sticky[b-ytr2p4jexm] {
    position: fixed !important;
    top: 94px !important;                /* ajustez si elle touche la barre du menu */
    left: 6px !important;
    right: 6px !important;
    height: 84px !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    border-radius: 12px !important;
    z-index: 1000;
  }

  /* Bande des villes : fixe, en bas, au-dessus du pied de page */
  .villes-sticky[b-ytr2p4jexm] {
    position: fixed !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 30px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #fff;
    box-shadow: none !important;
    z-index: 1000;
  }
  .villes-sticky[b-ytr2p4jexm]  .vc-scroll {
    padding: .2rem .1rem 0 !important;
    max-height: none !important;
  }
  .villes-sticky[b-ytr2p4jexm]  .vc-card {
    flex: 0 0 auto;
    width: 134px !important;
    height: 42px !important;
    padding: .25rem .4rem !important;
    gap: .35rem !important;
    border-radius: 9px !important;
  }
  .villes-sticky[b-ytr2p4jexm]  .vc-card:hover { transform: none; }
  .villes-sticky[b-ytr2p4jexm]  .vc-icon    { width: 18px; height: 18px; font-size: .5rem; border-radius: 6px; }
  .villes-sticky[b-ytr2p4jexm]  .vc-name    { font-size: .6rem; }
  .villes-sticky[b-ytr2p4jexm]  .vc-info    { font-size: .46rem; }
  .villes-sticky[b-ytr2p4jexm]  .vc-content { padding-right: 28px; }
  .villes-sticky[b-ytr2p4jexm]  .vc-actions    { top: 3px; right: 3px; gap: 2px; opacity: 1; transform: none; }
  .villes-sticky[b-ytr2p4jexm]  .vc-action-btn { width: 13px; height: 13px; font-size: .4rem; }
}

@media (max-height: 500px) and (orientation: landscape) {

  /* Bande des provinces : une rangée fine */
  html body .integration-sticky[b-ytr2p4jexm] {
    top: 94px !important;
    height: 54px !important;
    padding: 1px 4px !important;
  }
  html body .integration-sticky[b-ytr2p4jexm]  .stats-scroll { gap: 4px !important; padding: 2px 4px 3px !important; }
  html body .integration-sticky[b-ytr2p4jexm]  .stat-card {
    flex: 0 0 52px !important;
    height: 46px !important;
    padding: 2px !important;
    gap: 1px !important;
    border-radius: 7px !important;
  }
  html body .integration-sticky[b-ytr2p4jexm]  .province-flag { width: 20px !important; height: 20px !important; }
  html body .integration-sticky[b-ytr2p4jexm]  .stat-value { display: none !important; }
  html body .integration-sticky[b-ytr2p4jexm]  .stat-label { font-size: .4rem !important; line-height: 1.05 !important; margin-top: 0 !important; }
  html body .integration-sticky[b-ytr2p4jexm]  .programs-badge {
    min-width: 11px !important; height: 11px !important; font-size: .38rem !important;
    top: 1px !important; right: 1px !important; padding: 0 3px !important;
  }

  /* Bande des villes : cartes très compactes, collée en bas */
  html body .villes-sticky[b-ytr2p4jexm] {
    bottom: 26px !important;
    left: 4px !important;
    right: 4px !important;
  }
  html body .villes-sticky[b-ytr2p4jexm]  .vc-scroll { padding: .1rem .1rem 0 !important; gap: .25rem !important; }
  html body .villes-sticky[b-ytr2p4jexm]  .vc-card {
    width: 118px !important;
    height: 32px !important;
    padding: .15rem .3rem !important;
    gap: .25rem !important;
    border-radius: 7px !important;
  }
  html body .villes-sticky[b-ytr2p4jexm]  .vc-icon    { width: 14px !important; height: 14px !important; font-size: .4rem !important; }
  html body .villes-sticky[b-ytr2p4jexm]  .vc-name    { font-size: .5rem !important; }
  html body .villes-sticky[b-ytr2p4jexm]  .vc-info    { font-size: .38rem !important; }
  html body .villes-sticky[b-ytr2p4jexm]  .vc-content { padding-right: 22px !important; }
  html body .villes-sticky[b-ytr2p4jexm]  .vc-action-btn { width: 10px !important; height: 10px !important; font-size: .3rem !important; }
  html body .villes-sticky[b-ytr2p4jexm]  .vc-actions    { top: 2px !important; right: 2px !important; gap: 1px !important; }
}

/* /Components/Pages/Guide/Integration/OngletContentIntegration.razor.rz.scp.css */
.oc-layout[b-rtmc7x1c5a],
.oci-layout[b-rtmc7x1c5a] {
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 900px) {
    .oc-layout[b-rtmc7x1c5a],
    .oci-layout[b-rtmc7x1c5a] {
        flex-direction: column;
    }
}

.oc-main[b-rtmc7x1c5a],
.oci-champs[b-rtmc7x1c5a] {
    flex: 1 1 65%;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.oc-side[b-rtmc7x1c5a],
.oci-history[b-rtmc7x1c5a] {
    flex: 1 1 45%;
    min-width: 220px;
    margin-right: -20px;
    min-height: 0;
    overflow-y: auto;
}

.oc-placeholder[b-rtmc7x1c5a] {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: #a1a1a6;
    font-style: italic;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.oc-grid[b-rtmc7x1c5a] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    animation: oc-fade-in-b-rtmc7x1c5a .2s ease;
}

@keyframes oc-fade-in-b-rtmc7x1c5a {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.oc-field-full[b-rtmc7x1c5a] {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .oc-grid[b-rtmc7x1c5a] {
        grid-template-columns: 1fr;
    }
}

.oc-field[b-rtmc7x1c5a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.oc-value[b-rtmc7x1c5a] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #1d1d1f;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.oc-label[b-rtmc7x1c5a] {
    font-size: 0.66rem;
    font-weight: 500;
    color: #86868b;
}
/* /Components/Pages/Guide/Procedures/InfoProgrammes.razor.rz.scp.css */
/* ===========================
   Conteneur : remplit toute la hauteur de .procedure-right
   =========================== */

.InfoProgrammes-content[b-huw9wot5c8] {
    height: 100%;
}

/* ===========================
   Layout principal (78% / 20%)
   =========================== */

.infoProgrammes-details[b-huw9wot5c8] {
    display: flex;
    align-items: stretch;
    gap: .8rem;

    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.infoProgrammes-details-main[b-huw9wot5c8] {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ===========================
   Colonne latérale (20%) : 3 cadres flexibles
   =========================== */

.infoProgrammes-details-side[b-huw9wot5c8] {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: .5rem;

    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.infoProgrammes-side-top[b-huw9wot5c8],
.infoProgrammes-side-middle[b-huw9wot5c8],
.infoProgrammes-side-bottom[b-huw9wot5c8] {
    box-sizing: border-box;
    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-height: 0;
}

/* Responsable : hauteur = contenu */
.infoProgrammes-side-top[b-huw9wot5c8] {
    flex: 0 0 auto;
}

/* Liens utiles : hauteur = contenu ; se réduit seulement si la colonne manque de place */
.infoProgrammes-side-middle[b-huw9wot5c8] {
    flex: 0 1 auto;
}

/* Tendance : hauteur = contenu, collée en bas de la colonne */
.infoProgrammes-side-bottom[b-huw9wot5c8] {
    flex: 0 0 auto;
    margin-top: auto;
}

/* Cadre 1 : identité (avatar à droite) */

.infoProgrammes-identity[b-huw9wot5c8] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.infoProgrammes-identity-avatar[b-huw9wot5c8] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.infoProgrammes-identity-info[b-huw9wot5c8] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.infoProgrammes-identity-name[b-huw9wot5c8] {
    margin: 0;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoProgrammes-identity-type[b-huw9wot5c8] {
    font-size: .7rem;
    color: #6b7280;
}

/* En-tête (titre / compteur / pastille) */

.infoProgrammes-side-header[b-huw9wot5c8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.infoProgrammes-side-name[b-huw9wot5c8] {
    margin: 0;
    font-size: .9rem;
    color: #111827;
}

.infoProgrammes-side-meta[b-huw9wot5c8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin-top: .3rem;
}

.infoProgrammes-side-count-text[b-huw9wot5c8] {
    font-size: .9rem;
    color: #a40b0b;
}

.infoProgrammes-side-pill[b-huw9wot5c8] {
    padding: .25rem .7rem;

    font-size: .8rem;
    font-weight: 600;
    color: #c92a2a;

    background: transparent;
    border: 2px solid #c92a2a;
    border-radius: 999px;

    white-space: nowrap;
}

/* Champs des cadres */

.infoProgrammes-side-title[b-huw9wot5c8] {
    display: block;

    font-size: .85rem;
    font-weight: 700;
    color: #111827;
}

.infoProgrammes-side-details[b-huw9wot5c8] {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    margin-top: .3rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

.infoProgrammes-side-field[b-huw9wot5c8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.infoProgrammes-field-label[b-huw9wot5c8] {
    flex-shrink: 0;

    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.infoProgrammes-field-value[b-huw9wot5c8] {
    font-size: .68rem;
    color: #374151;
    text-align: right;
}

.infoProgrammes-side-notes[b-huw9wot5c8] {
    margin: 0;

    font-size: .7rem;
    line-height: 1.5;
    color: #374151;
    white-space: pre-wrap;
}

.infoProgrammes-placeholder[b-huw9wot5c8] {
    margin: .3rem 0;

    color: #9ca3af;
    font-size: .8rem;
    line-height: 1.5;
}

/* Responsable : valeurs longues et liens */

.infoProgrammes-field-value--wrap[b-huw9wot5c8] {
    white-space: normal;
    word-break: break-word;
}

.infoProgrammes-field-link[b-huw9wot5c8] {
    color: #c92a2a;
    text-decoration: none;
    word-break: break-all;
}

.infoProgrammes-field-link:hover[b-huw9wot5c8] {
    text-decoration: underline;
}

/* Liens utiles : hauteur = contenu ; la liste défile seulement si la place manque */

.infoProgrammes-links[b-huw9wot5c8] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .2rem;

    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.infoProgrammes-link[b-huw9wot5c8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    flex-shrink: 0;

    padding: .3rem .45rem;

    font-size: .68rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;

    transition: .2s;
}

.infoProgrammes-link:hover[b-huw9wot5c8] {
    background: #fdecec;
    border-color: #fdecec;
    color: #c92a2a;
}

.infoProgrammes-link-title[b-huw9wot5c8] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infoProgrammes-link-icon[b-huw9wot5c8] {
    flex-shrink: 0;
    font-size: .7rem;
}

/* ===========================
   Courbe de tendance (cadre du bas)
   =========================== */

.infoProgrammes-trend-head[b-huw9wot5c8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}

.infoProgrammes-trend-badge[b-huw9wot5c8] {
    padding: .05rem .45rem;

    font-size: .6rem;
    font-weight: 700;

    border-radius: 999px;
    white-space: nowrap;
}

.infoProgrammes-trend-badge.trend-up[b-huw9wot5c8]   { color: #15803d; background: #dcfce7; }
.infoProgrammes-trend-badge.trend-down[b-huw9wot5c8] { color: #b91c1c; background: #fee2e2; }
.infoProgrammes-trend-badge.trend-flat[b-huw9wot5c8] { color: #6b7280; background: #f3f4f6; }

.infoProgrammes-trend-svg[b-huw9wot5c8] {
    display: block;
    width: 100%;
    height: 80px;
    overflow: visible;
}

.infoProgrammes-trend-line[b-huw9wot5c8] {
    fill: none;
    stroke: #c92a2a;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.infoProgrammes-trend-area[b-huw9wot5c8] {
    fill: rgba(201, 42, 42, .10);
    stroke: none;
}

/* ===========================
   Statistiques (conservées au cas où vous les réutilisez)
   =========================== */

.infoProgrammes-stats[b-huw9wot5c8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem;
    margin-top: .2rem;
}

.infoProgrammes-stat[b-huw9wot5c8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .05rem;

    padding: .3rem .2rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.infoProgrammes-stat-value[b-huw9wot5c8] {
    font-size: .95rem;
    font-weight: 700;
    color: #c92a2a;
    line-height: 1.1;
}

.infoProgrammes-stat-label[b-huw9wot5c8] {
    font-size: .5rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.infoProgrammes-progress[b-huw9wot5c8] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-top: auto;
}

.infoProgrammes-progress-head[b-huw9wot5c8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.infoProgrammes-progress-value[b-huw9wot5c8] {
    font-size: .68rem;
    font-weight: 700;
    color: #c92a2a;
}

.infoProgrammes-progress-bar[b-huw9wot5c8] {
    height: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}

.infoProgrammes-progress-fill[b-huw9wot5c8] {
    height: 100%;
    background: #c92a2a;
    border-radius: 999px;
    transition: width .4s ease;
}

/* Photo du responsable */

.infoProgrammes-identity-photo[b-huw9wot5c8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===========================
   Onglets (pilules) : fixes en haut de la zone principale
   =========================== */

.infoProgrammes-tabs[b-huw9wot5c8] {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;

    margin-top: .1rem;
    background: #fff;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.infoProgrammes-tabs > span[b-huw9wot5c8] {
    flex-shrink: 0;

    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;

    white-space: nowrap;
}

.infoProgrammes-tabs-items[b-huw9wot5c8] {
    display: flex;
    gap: .6rem;

    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoProgrammes-tabs-items[b-huw9wot5c8]::-webkit-scrollbar {
    display: none;
}

.infoProgrammes-tab[b-huw9wot5c8] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
    white-space: nowrap;

    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;
    color: #b9bdc4;

    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;

    cursor: pointer;
    transition: .2s;
}

.infoProgrammes-tab:hover[b-huw9wot5c8] {
    background: #fdecec;
    color: #c92a2a;
}

.infoProgrammes-tab.active[b-huw9wot5c8] {
    background: #c92a2a;
    border-color: #c92a2a;
    color: #fff;
}

.infoProgrammes-tab-badge[b-huw9wot5c8] {
    background: #c92a2a;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .02rem .4rem;
}

.infoProgrammes-tab.active .infoProgrammes-tab-badge[b-huw9wot5c8] {
    background: #fff;
    color: #c92a2a;
}

/* ===========================
   Cadre gris du contenu : hauteur flexible selon l'onglet.
   Il épouse son contenu et ne défile que s'il dépasse la place disponible.
   =========================== */

.infoProgrammes-tab-content[b-huw9wot5c8] {
    flex: 0 1 auto;          /* était 1 1 auto : ne remplit plus toute la hauteur */
    min-height: 0;

    padding: .8rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.infoProgrammes-tab-content .parcours-wrapper[b-huw9wot5c8] {
    background: transparent;
}

.programme-placeholder-small[b-huw9wot5c8] {
    font-size: .8rem;
    color: #9ca3af;
    margin-top: .5rem;
}

.programme-description[b-huw9wot5c8] {
    font-size: .85rem;
    color: #374151;
    line-height: 1.5;
}

/* ===========================
   Étapes — cartes avec accent coloré, cliquables
   =========================== */

.etapes-cards[b-huw9wot5c8] {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 40px;
}

.etape-card[b-huw9wot5c8] {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: #fff;
    border-radius: 14px;
    padding: .2rem .3rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    border-left: 4px solid var(--circle-color, #3b82f6);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.etape-card:hover[b-huw9wot5c8] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}

.etape-card.selected[b-huw9wot5c8] {
    background: #fafafa;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

.etape-card-number[b-huw9wot5c8] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--circle-color, #3b82f6);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.etape-card-body[b-huw9wot5c8] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.etape-card-titre[b-huw9wot5c8] {
    font-size: .8rem;
    font-weight: 700;
    color: #1d1d1f;
}

.etape-card-description[b-huw9wot5c8] {
    margin: 0;
    font-size: .8rem;
    color: #6b7280;
    line-height: 1.45;
}

/* ===========================
   Documents — cartes
   =========================== */

.documents-cards[b-huw9wot5c8] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 30px;
}

.document-card[b-huw9wot5c8] {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: #fff;
    border-radius: 12px;
    padding: .2rem .5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    transition: transform .18s ease, box-shadow .18s ease;
}

.document-card:hover[b-huw9wot5c8] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}

.document-card-icon[b-huw9wot5c8] {
    font-size: 1.2rem;
}

.document-card-link[b-huw9wot5c8] {
    color: #c92a2a;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.document-card-link:hover[b-huw9wot5c8] {
    text-decoration: underline;
}

.document-card-name[b-huw9wot5c8] {
    font-size: .85rem;
    color: #374151;
    font-weight: 600;
}

/* ===========================
   Détails — rangée de numéros + carte de description
   =========================== */

.details-panel[b-huw9wot5c8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.details-numbers-bar[b-huw9wot5c8] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.details-number-item[b-huw9wot5c8] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: .85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    border: 2px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.details-number-item:hover[b-huw9wot5c8] {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

.details-number-item.active[b-huw9wot5c8] {
    background: var(--circle-color, #3b82f6);
    color: #fff;
    border-color: rgba(255, 255, 255, .6);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    transform: scale(1.08);
}

.detail-card[b-huw9wot5c8],
.news-card[b-huw9wot5c8] {
    background: #fff;
    border-radius: 14px;
    padding: .9rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    border-left: 4px solid var(--circle-color, transparent);
    animation: detail-fade-in-b-huw9wot5c8 .25s ease;
}

.detail-card-titre[b-huw9wot5c8] {
    display: block;
    font-size: .85rem;
    font-weight: 800;
    margin-bottom: .35rem;
}

@keyframes detail-fade-in-b-huw9wot5c8 {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===========================
   Schéma Parcours
   =========================== */

.parcours-wrapper[b-huw9wot5c8] {
    width: 100%;
    padding: .5rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border-radius: 12px;
    overflow: visible;
}

.parcours-header[b-huw9wot5c8] {
    width: 100%;
    max-width: 640px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.flow-caption[b-huw9wot5c8] {
    margin: 0;
}

.etapes-count-badge[b-huw9wot5c8] {
    flex-shrink: 0;
    background: #c92a2a;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .3rem .7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.timeline-scroll[b-huw9wot5c8] {
    width: 100%;
    max-width: 640px;
    overflow: visible;
}

.timeline-s-container[b-huw9wot5c8] {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: transparent;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.path-svg[b-huw9wot5c8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
}

.timeline-grid[b-huw9wot5c8] {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Tuyau : gris et vide au repos, puis rempli segment par segment */

.path-pipe[b-huw9wot5c8] {
    stroke: #d1d5db;
}

.path-water[b-huw9wot5c8] {
    stroke: var(--circle-color, #3b82f6);
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: var(--pipe-anim, pipe-fill-full) var(--fill-period, 4.5s) linear infinite;
}

@keyframes pipe-fill-full-b-huw9wot5c8 {
    0%   { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

/* Ancrage précis sur le tracé (positions en %) */

.timeline-node[b-huw9wot5c8] {
    position: absolute;
    width: 0;
    height: 0;
}

.node-circle[b-huw9wot5c8] {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #d1d5db;
    border: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
    z-index: 3;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.node-circle:hover[b-huw9wot5c8] {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
    z-index: 6;
}

.node-circle[b-huw9wot5c8]::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
    animation: node-pulse-b-huw9wot5c8 2.4s ease-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes node-pulse-b-huw9wot5c8 {
    0%   { transform: scale(.75); opacity: .9; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { opacity: 0; }
}

.node-number[b-huw9wot5c8] {
    position: relative;
    z-index: 2;
    font-size: 1.1rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Remplissage "eau" à l'intérieur du cercle */

.node-water[b-huw9wot5c8] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.node-water[b-huw9wot5c8]::before {
    content: "";
    position: absolute;
    left: -15%;
    right: -15%;
    bottom: 0;
    height: 0%;
    background: var(--circle-color, #3b82f6);
    animation: var(--fill-anim, circle-fill) var(--fill-period, 4.5s) linear infinite;
}

.node-water[b-huw9wot5c8]::after {
    content: "";
    position: absolute;
    left: -15%;
    right: -15%;
    bottom: 0;
    height: 0%;
    border-top: 2px solid rgba(255, 255, 255, .85);
    animation: var(--fill-anim, circle-fill) var(--fill-period, 4.5s) linear infinite;
}

@keyframes circle-fill-b-huw9wot5c8 {
    0%   { height: 0%; }
    45%  { height: 100%; }
    100% { height: 100%; }
}

/* Labels de texte (toujours visibles à côté du cercle) */

.node-label[b-huw9wot5c8] {
    position: absolute;
    width: 120px;
    display: flex;
    flex-direction: column;
}

.node-label.label-left[b-huw9wot5c8] {
    top: 50%;
    right: 34px;
    transform: translateY(-50%);
    text-align: right;
}

.node-label.label-right[b-huw9wot5c8] {
    top: 50%;
    left: 34px;
    transform: translateY(-50%);
    text-align: left;
}

.node-label.label-top[b-huw9wot5c8] {
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.label-title[b-huw9wot5c8] {
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.15;
}

.label-desc[b-huw9wot5c8] {
    font-size: .58rem;
    color: #64748b;
    margin-top: 2px;
}

/* Tooltip au survol du cercle */

.node-tooltip[b-huw9wot5c8] {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, 26px);
    min-width: 170px;
    max-width: 260px;
    max-height: 170px;
    overflow-y: auto;
    background: #fdeaea;
    border: 1px solid #f3a8a8;
    padding: .6rem .85rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(201, 42, 42, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 20;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    scrollbar-width: thin;
    scrollbar-color: #f3a8a8 transparent;
}

.node-tooltip[b-huw9wot5c8]::-webkit-scrollbar {
    width: 5px;
}

.node-tooltip[b-huw9wot5c8]::-webkit-scrollbar-thumb {
    background: #f3a8a8;
    border-radius: 999px;
}

.node-tooltip[b-huw9wot5c8]::-webkit-scrollbar-track {
    background: transparent;
}

.node-tooltip[b-huw9wot5c8]::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(1px);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid #fdeaea;
    filter: drop-shadow(0 -1px 0 #f3a8a8);
}

.tooltip-desc[b-huw9wot5c8] {
    display: block;
    font-size: .72rem;
    color: #9f1c1c;
    line-height: 1.4;
}

.timeline-node:hover .node-tooltip[b-huw9wot5c8] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 24px);
}

/* Couleurs du "liquide" — 30 couleurs distinctes */

.circle-gray[b-huw9wot5c8]    { --circle-color: rgba(82, 82, 91, 0.8); }
.circle-brown[b-huw9wot5c8]   { --circle-color: rgba(180, 83, 9, 0.8); }
.circle-blue[b-huw9wot5c8]    { --circle-color: rgba(59, 130, 246, 0.8); }
.circle-red[b-huw9wot5c8]     { --circle-color: rgba(239, 68, 68, 0.8); }
.circle-orange[b-huw9wot5c8]  { --circle-color: rgba(249, 115, 22, 0.8); }
.circle-green[b-huw9wot5c8]   { --circle-color: rgba(34, 197, 94, 0.8); }
.circle-teal[b-huw9wot5c8]    { --circle-color: rgba(20, 184, 166, 0.8); }
.circle-purple[b-huw9wot5c8]  { --circle-color: rgba(168, 85, 247, 0.8); }
.circle-pink[b-huw9wot5c8]    { --circle-color: rgba(236, 72, 153, 0.8); }
.circle-yellow[b-huw9wot5c8]  { --circle-color: rgba(234, 179, 8, 0.8); }
.circle-indigo[b-huw9wot5c8]  { --circle-color: rgba(99, 102, 241, 0.8); }
.circle-cyan[b-huw9wot5c8]    { --circle-color: rgba(6, 182, 212, 0.8); }
.circle-lime[b-huw9wot5c8]    { --circle-color: rgba(132, 204, 22, 0.8); }
.circle-amber[b-huw9wot5c8]   { --circle-color: rgba(245, 158, 11, 0.8); }
.circle-rose[b-huw9wot5c8]    { --circle-color: rgba(244, 63, 94, 0.8); }
.circle-violet[b-huw9wot5c8]  { --circle-color: rgba(139, 92, 246, 0.8); }
.circle-fuchsia[b-huw9wot5c8] { --circle-color: rgba(217, 70, 239, 0.8); }
.circle-sky[b-huw9wot5c8]     { --circle-color: rgba(14, 165, 233, 0.8); }
.circle-emerald[b-huw9wot5c8] { --circle-color: rgba(16, 185, 129, 0.8); }
.circle-slate[b-huw9wot5c8]   { --circle-color: rgba(100, 116, 139, 0.8); }
.circle-zinc[b-huw9wot5c8]    { --circle-color: rgba(113, 113, 122, 0.8); }
.circle-stone[b-huw9wot5c8]   { --circle-color: rgba(120, 113, 108, 0.8); }
.circle-maroon[b-huw9wot5c8]  { --circle-color: rgba(127, 29, 29, 0.8); }
.circle-navy[b-huw9wot5c8]    { --circle-color: rgba(30, 58, 138, 0.8); }
.circle-olive[b-huw9wot5c8]   { --circle-color: rgba(77, 124, 15, 0.8); }
.circle-mint[b-huw9wot5c8]    { --circle-color: rgba(52, 211, 153, 0.8); }
.circle-coral[b-huw9wot5c8]   { --circle-color: rgba(251, 113, 133, 0.8); }
.circle-gold[b-huw9wot5c8]    { --circle-color: rgba(202, 138, 4, 0.8); }
.circle-plum[b-huw9wot5c8]    { --circle-color: rgba(162, 28, 175, 0.8); }
.circle-steel[b-huw9wot5c8]   { --circle-color: rgba(71, 85, 105, 0.8); }

.color-gray[b-huw9wot5c8]    { color: #52525b; }
.color-brown[b-huw9wot5c8]   { color: #b45309; }
.color-blue[b-huw9wot5c8]    { color: #3b82f6; }
.color-red[b-huw9wot5c8]     { color: #ef4444; }
.color-orange[b-huw9wot5c8]  { color: #f97316; }
.color-green[b-huw9wot5c8]   { color: #22c55e; }
.color-teal[b-huw9wot5c8]    { color: #14b8a6; }
.color-purple[b-huw9wot5c8]  { color: #a855f7; }
.color-pink[b-huw9wot5c8]    { color: #ec4899; }
.color-yellow[b-huw9wot5c8]  { color: #eab308; }
.color-indigo[b-huw9wot5c8]  { color: #6366f1; }
.color-cyan[b-huw9wot5c8]    { color: #06b6d4; }
.color-lime[b-huw9wot5c8]    { color: #84cc16; }
.color-amber[b-huw9wot5c8]   { color: #f59e0b; }
.color-rose[b-huw9wot5c8]    { color: #f43f5e; }
.color-violet[b-huw9wot5c8]  { color: #8b5cf6; }
.color-fuchsia[b-huw9wot5c8] { color: #d946ef; }
.color-sky[b-huw9wot5c8]     { color: #0ea5e9; }
.color-emerald[b-huw9wot5c8] { color: #10b981; }
.color-slate[b-huw9wot5c8]   { color: #64748b; }
.color-zinc[b-huw9wot5c8]    { color: #71717a; }
.color-stone[b-huw9wot5c8]   { color: #78716c; }
.color-maroon[b-huw9wot5c8]  { color: #7f1d1d; }
.color-navy[b-huw9wot5c8]    { color: #1e3a8a; }
.color-olive[b-huw9wot5c8]   { color: #4d7c0f; }
.color-mint[b-huw9wot5c8]    { color: #34d399; }
.color-coral[b-huw9wot5c8]   { color: #fb7185; }
.color-gold[b-huw9wot5c8]    { color: #ca8a04; }
.color-plum[b-huw9wot5c8]    { color: #a21caf; }
.color-steel[b-huw9wot5c8]   { color: #475569; }

/* ===========================
   Mobile : hauteur libre, colonnes empilées
   =========================== */

@media (max-width: 900px) {
    .InfoProgrammes-content[b-huw9wot5c8] {
        height: auto;
    }

    .infoProgrammes-details[b-huw9wot5c8] {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .infoProgrammes-details-main[b-huw9wot5c8],
    .infoProgrammes-details-side[b-huw9wot5c8] {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    /* était height: 70vh ; la hauteur suit maintenant le contenu de l'onglet */
    .infoProgrammes-details-main[b-huw9wot5c8] {
        height: auto;
        max-height: 70vh;
    }

    .infoProgrammes-details-side[b-huw9wot5c8] {
        height: auto;
        overflow: visible;
    }

    .infoProgrammes-side-middle[b-huw9wot5c8] {
        flex: 0 0 auto;
    }

    .infoProgrammes-links[b-huw9wot5c8] {
        overflow: visible;
    }

    .infoProgrammes-side-bottom[b-huw9wot5c8] {
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    .infoProgrammes-tab[b-huw9wot5c8] {
        padding: .3rem .65rem;
        font-size: .66rem;
    }
}
/* ==========================================================
   À AJOUTER À LA FIN DE InfoProgrammes.razor.css
   (description riche, crayon d'édition et éditeur de texte)
   ::deep = nécessaire pour styler le HTML inséré avec MarkupString
========================================================== */

/* --- Contenu riche affiché (description / étape) --- */
.infoProgrammes-richtext[b-huw9wot5c8] {
    font-size: .85rem;
    line-height: 1.6;
    color: #374151;
    overflow-wrap: anywhere;
}

.infoProgrammes-richtext[b-huw9wot5c8]  ul,
.infoProgrammes-richtext[b-huw9wot5c8]  ol {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

.infoProgrammes-richtext[b-huw9wot5c8]  h1,
.infoProgrammes-richtext[b-huw9wot5c8]  h2,
.infoProgrammes-richtext[b-huw9wot5c8]  h3 {
    margin: .5rem 0 .3rem;
    line-height: 1.25;
}

.infoProgrammes-richtext[b-huw9wot5c8]  p {
    margin: .3rem 0;
}

.infoProgrammes-richtext[b-huw9wot5c8]  a {
    color: #c92a2a;
}

.infoProgrammes-richtext[b-huw9wot5c8]  img {
    max-width: 100%;
    height: auto;
}

.infoProgrammes-richtext[b-huw9wot5c8]  blockquote {
    margin: .4rem 0;
    padding-left: .8rem;
    border-left: 3px solid #e5e7eb;
    color: #6b7280;
}

.infoProgrammes-richtext[b-huw9wot5c8]  table {
    border-collapse: collapse;
}

.infoProgrammes-richtext[b-huw9wot5c8]  td {
    border: 1px solid #e5e7eb;
    padding: .25rem .5rem;
}

/* --- Crayon d'édition (visible seulement pour un administrateur) --- */
.infoProgrammes-edit-bar[b-huw9wot5c8] {
    position: sticky;
    bottom: 0;

    display: flex;
    justify-content: flex-end;
    margin-top: .5rem;
}

.infoProgrammes-btn-edit[b-huw9wot5c8] {
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;

    color: #6b7280;
    font-size: .7rem;

    cursor: pointer;
    transition: .2s;
}

.infoProgrammes-btn-edit:hover[b-huw9wot5c8] {
    background: #fdecec;
    color: #c92a2a;
    border-color: #fdecec;
}

/* --- Zone d'édition --- */
.infoProgrammes-edit-stack[b-huw9wot5c8],
.infoProgrammes-edit-zone[b-huw9wot5c8] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.infoProgrammes-edit-input[b-huw9wot5c8] {
    width: 100%;
    padding: .45rem .6rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    box-sizing: border-box;
}

.infoProgrammes-edit-input:focus[b-huw9wot5c8] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

/* --- Barre d'outils de l'éditeur riche --- */
.infoProgrammes-editor-toolbar[b-huw9wot5c8] {
    position: sticky;
    top: 0;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: .4rem;

    background: #f9fafb;
    border: none;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.infoProgrammes-editor-toolbar[b-huw9wot5c8]::-webkit-scrollbar {
    display: none;
}

.infoProgrammes-tool[b-huw9wot5c8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 28px;
    height: 28px;
    padding: 0 .3rem;

    background: transparent;
    border: none;
    border-radius: 4px;

    color: #6b7280;
    font-size: .75rem;
    font-weight: 600;

    cursor: pointer;
    transition: .2s;
}

.infoProgrammes-tool:hover[b-huw9wot5c8] {
    background: #fdecec;
    color: #c92a2a;
}

.infoProgrammes-tool-wide[b-huw9wot5c8] {
    min-width: auto;
    padding: 0 .5rem;
    white-space: nowrap;
}

.infoProgrammes-tool-select[b-huw9wot5c8] {
    flex-shrink: 0;

    height: 28px;
    padding: 0 .3rem;

    font-size: .72rem;
    font-family: inherit;
    color: #374151;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;

    cursor: pointer;
}

.infoProgrammes-tool-select:hover[b-huw9wot5c8] {
    border-color: #c92a2a;
}

.infoProgrammes-toolbar-separator[b-huw9wot5c8] {
    flex-shrink: 0;

    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 .3rem;
}

.infoProgrammes-color-picker[b-huw9wot5c8] {
    flex-shrink: 0;

    width: 28px;
    height: 28px;
    padding: 2px;

    background: transparent;
    border: none;

    cursor: pointer;
}

/* --- Zone de saisie (contenteditable) --- */
.infoProgrammes-edit-richtext[b-huw9wot5c8] {
    width: 100%;
    padding: .5rem;

    font-size: .85rem;
    font-family: inherit;
    color: #374151;
    line-height: 1.5;

    background: #fff;
    border: 1px solid #c92a2a;
    border-radius: 8px;

    overflow-y: auto;

    min-height: 10vh;
    max-height: 40vh;

    box-sizing: border-box;
}

.infoProgrammes-edit-richtext:focus[b-huw9wot5c8] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.infoProgrammes-edit-richtext[b-huw9wot5c8]  ul,
.infoProgrammes-edit-richtext[b-huw9wot5c8]  ol {
    margin: .3rem 0;
    padding-left: 1.4rem;
}

/* --- Boutons Annuler / OK --- */
.infoProgrammes-edit-actions[b-huw9wot5c8] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .3rem;
}

.infoProgrammes-btn-cancel[b-huw9wot5c8],
.infoProgrammes-btn-ok[b-huw9wot5c8] {
    padding: .35rem .8rem;

    font-size: .7rem;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: .2s;
}

.infoProgrammes-btn-cancel[b-huw9wot5c8] {
    background: #f3f4f6;
    color: #6b7280;
}

.infoProgrammes-btn-cancel:hover[b-huw9wot5c8] {
    background: #e5e7eb;
}

.infoProgrammes-btn-ok[b-huw9wot5c8] {
    background: #c92a2a;
    color: #fff;
}

.infoProgrammes-btn-ok:hover[b-huw9wot5c8] {
    background: #a81f1f;
}



@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .infoProgrammes-details[b-huw9wot5c8] { gap: .4rem; }
    .infoProgrammes-details-main[b-huw9wot5c8] { max-height: none; }
    .infoProgrammes-details-side[b-huw9wot5c8] { gap: .3rem; }

    /* Onglets */
    .infoProgrammes-tabs[b-huw9wot5c8] { padding-top: .15rem; padding-bottom: .15rem; }
    .infoProgrammes-tabs > span[b-huw9wot5c8] { font-size: .55rem; }
    .infoProgrammes-tabs-items[b-huw9wot5c8] { gap: .3rem; }
    .infoProgrammes-tab[b-huw9wot5c8] { padding: .2rem .5rem; font-size: .55rem; gap: .2rem; }
    .infoProgrammes-tab-badge[b-huw9wot5c8] { font-size: .48rem; padding: 0 .3rem; }

    .infoProgrammes-tab-content[b-huw9wot5c8] { padding: .4rem; border-radius: 8px; }

    /* Schéma des étapes : cercles, textes et tuyau miniaturisés */
    .parcours-wrapper[b-huw9wot5c8] { padding: .2rem .3rem .8rem; }
    .parcours-header[b-huw9wot5c8] { margin-bottom: .4rem; gap: .4rem; }
    .programme-description[b-huw9wot5c8] { font-size: .65rem; line-height: 1.35; }
    .etapes-count-badge[b-huw9wot5c8] { font-size: .55rem; padding: .15rem .5rem; }

    .node-circle[b-huw9wot5c8] { width: 24px; height: 24px; border-width: 1.5px; box-shadow: 0 2px 5px rgba(0,0,0,.12); }
    .node-circle[b-huw9wot5c8]::after { inset: -4px; }
    .node-number[b-huw9wot5c8] { font-size: .65rem; }

    .node-label[b-huw9wot5c8] { width: 70px; }
    .node-label.label-left[b-huw9wot5c8]  { right: 18px; }
    .node-label.label-right[b-huw9wot5c8] { left: 18px; }
    .node-label.label-top[b-huw9wot5c8]   { bottom: 18px; }
    .label-title[b-huw9wot5c8] { font-size: .5rem; line-height: 1.1; }

    .node-tooltip[b-huw9wot5c8] { min-width: 120px; max-width: 180px; max-height: 120px; padding: .35rem .5rem; transform: translate(-50%, 16px); }
    .timeline-node:hover .node-tooltip[b-huw9wot5c8] { transform: translate(-50%, 14px); }
    .tooltip-desc[b-huw9wot5c8] { font-size: .58rem; line-height: 1.3; }

    /* Détails / étapes / documents */
    .details-panel[b-huw9wot5c8] { gap: .5rem; }
    .details-numbers-bar[b-huw9wot5c8] { gap: .3rem; }
    .details-number-item[b-huw9wot5c8] { width: 24px; height: 24px; font-size: .6rem; }
    .detail-card[b-huw9wot5c8], .news-card[b-huw9wot5c8] { padding: .5rem .6rem; border-radius: 10px; }
    .detail-card-titre[b-huw9wot5c8] { font-size: .68rem; }
    .infoProgrammes-richtext[b-huw9wot5c8] { font-size: .65rem; line-height: 1.45; }

    .etapes-cards[b-huw9wot5c8] { gap: .4rem; margin-top: 20px; }
    .etape-card[b-huw9wot5c8] { gap: .5rem; padding: .2rem .3rem; }
    .etape-card-number[b-huw9wot5c8] { width: 16px; height: 16px; font-size: .55rem; }
    .etape-card-titre[b-huw9wot5c8], .etape-card-description[b-huw9wot5c8] { font-size: .62rem; }

    .documents-cards[b-huw9wot5c8] { gap: .4rem; margin-top: 16px; }
    .document-card[b-huw9wot5c8] { padding: .15rem .4rem; gap: .5rem; }
    .document-card-icon[b-huw9wot5c8] { font-size: .9rem; }
    .document-card-link[b-huw9wot5c8], .document-card-name[b-huw9wot5c8] { font-size: .65rem; }

    /* Colonne de droite (responsable, liens, tendance) */
    .infoProgrammes-side-top[b-huw9wot5c8],
    .infoProgrammes-side-middle[b-huw9wot5c8],
    .infoProgrammes-side-bottom[b-huw9wot5c8] { padding: .4rem; border-radius: 8px; }

    .infoProgrammes-identity-avatar[b-huw9wot5c8] { width: 28px; height: 28px; font-size: .65rem; }
    .infoProgrammes-identity-name[b-huw9wot5c8] { font-size: .65rem; }
    .infoProgrammes-identity-type[b-huw9wot5c8] { font-size: .55rem; }
    .infoProgrammes-field-label[b-huw9wot5c8] { font-size: .45rem; }
    .infoProgrammes-field-value[b-huw9wot5c8] { font-size: .55rem; }
    .infoProgrammes-side-title[b-huw9wot5c8] { font-size: .65rem; }
    .infoProgrammes-link[b-huw9wot5c8] { padding: .2rem .35rem; font-size: .55rem; }
    .infoProgrammes-trend-svg[b-huw9wot5c8] { height: 44px; }
    .infoProgrammes-trend-badge[b-huw9wot5c8] { font-size: .5rem; }

    /* Crayon d'édition */
    .infoProgrammes-btn-edit[b-huw9wot5c8] { width: 20px; height: 20px; font-size: .55rem; }
}

@media (max-width: 900px) and (orientation: portrait) {

  /* Diagramme à taille réelle : plus de zoom ni de largeur forcée */
  .procedures-page .procedure-right[b-huw9wot5c8]  .parcours-wrapper {
    width: 100% !important;
    zoom: 1 !important;
    padding: .2rem .3rem .4rem !important;
  }
  .procedures-page .procedure-right[b-huw9wot5c8]  .parcours-header {
    max-width: 100% !important;
    margin-bottom: .3rem;
  }
  .procedures-page .procedure-right[b-huw9wot5c8]  .timeline-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 46px 0 46px !important;   /* place pour les textes au-dessus et en dessous */
    overflow: visible !important;
  }
  .procedures-page .procedure-right[b-huw9wot5c8]  .timeline-s-container {
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Cercles : taille normale, un peu plus compacte */
  .procedures-page .procedure-right[b-huw9wot5c8]  .node-circle {
    width: 30px !important;
    height: 30px !important;
    border-width: 2px !important;
  }
  .procedures-page .procedure-right[b-huw9wot5c8]  .node-number { font-size: .8rem !important; }

  /* Textes : boîte fixe, 4 lignes maximum, taille selon la longueur */
  .procedures-page .procedure-right[b-huw9wot5c8]  .node-label {
    width: 76px !important;
    max-height: 46px;
    overflow: hidden;
  }
  .procedures-page .procedure-right[b-huw9wot5c8]  .node-label.label-left  { right: 20px !important; }
  .procedures-page .procedure-right[b-huw9wot5c8]  .node-label.label-right { left: 20px !important; }
  .procedures-page .procedure-right[b-huw9wot5c8]  .node-label.label-top   { bottom: 20px !important; }

  .procedures-page .procedure-right[b-huw9wot5c8]  .label-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    overflow-wrap: anywhere;
    hyphens: auto;
    line-height: 1.05 !important;
    font-weight: 700;
  }
  .procedures-page .procedure-right[b-huw9wot5c8]  .node-label.len-s .label-title { font-size: .56rem !important; }
  .procedures-page .procedure-right[b-huw9wot5c8]  .node-label.len-m .label-title { font-size: .48rem !important; }
  .procedures-page .procedure-right[b-huw9wot5c8]  .node-label.len-l .label-title { font-size: .4rem !important; }

  /* Info-bulle (description complète au toucher) */
  .procedures-page .procedure-right[b-huw9wot5c8]  .node-tooltip {
    min-width: 120px;
    max-width: 180px;
    padding: .3rem .45rem;
  }
  .procedures-page .procedure-right[b-huw9wot5c8]  .tooltip-desc { font-size: .58rem !important; }
}

/* Mobile (tiroir droit) : « Tendance » collée en bas de la colonne */
@media (max-width: 900px) and (orientation: portrait) {

    .procedures-content.info-open .infoProgrammes-details-side[b-huw9wot5c8] {
        min-height: 58dvh;   /* hauteur de la colonne : la carte descend jusqu'en bas */
    }

    .procedures-content.info-open .infoProgrammes-details-side .infoProgrammes-side-bottom[b-huw9wot5c8] {
        margin-top: auto !important;
    }
}


/* Mobile (tiroir droit) : police des cartes de droite = celle des cartes de gauche */
@media (max-width: 900px) and (orientation: portrait) {

    .procedures-content.info-open .infoProgrammes-details-side[b-huw9wot5c8] {
        --carte-titre: .66rem;   /* titre de carte : nom, « Liens utiles », « Tendance » */
        --carte-texte: .56rem;   /* sous-titre, champs, liens */
        font-family: inherit !important;
    }

    /* Titres : même taille et même graisse que le titre d'une carte de gauche */
    .procedures-content.info-open .infoProgrammes-details-side .infoProgrammes-identity-name[b-huw9wot5c8],
    .procedures-content.info-open .infoProgrammes-details-side .infoProgrammes-side-title[b-huw9wot5c8] {
        font-family: inherit !important;
        font-size: var(--carte-titre) !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    /* Texte secondaire : même taille que le sous-titre d'une carte de gauche */
    .procedures-content.info-open .infoProgrammes-details-side .infoProgrammes-identity-type[b-huw9wot5c8],
    .procedures-content.info-open .infoProgrammes-details-side .infoProgrammes-field-label[b-huw9wot5c8],
    .procedures-content.info-open .infoProgrammes-details-side .infoProgrammes-field-value[b-huw9wot5c8],
    .procedures-content.info-open .infoProgrammes-details-side .infoProgrammes-field-link[b-huw9wot5c8],
    .procedures-content.info-open .infoProgrammes-details-side .infoProgrammes-link[b-huw9wot5c8],
    .procedures-content.info-open .infoProgrammes-details-side .infoProgrammes-link-icon[b-huw9wot5c8],
    .procedures-content.info-open .infoProgrammes-details-side .infoProgrammes-trend-badge[b-huw9wot5c8] {
        font-family: inherit !important;
        font-size: var(--carte-texte) !important;
        line-height: 1.25 !important;
    }

    /* Étiquettes (ORGANISME, COURRIEL, TÉLÉPHONE) : un peu plus petites, en gras */
    .procedures-content.info-open .infoProgrammes-details-side .infoProgrammes-field-label[b-huw9wot5c8] {
        font-size: calc(var(--carte-texte) - .06rem) !important;
        font-weight: 600 !important;
    }
}
/* /Components/Pages/Guide/Procedures/Procedures.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.procedures-page[b-vd3fl5846p]{
    min-height:100vh;
    background:url("/images/background.jpg") center/cover fixed no-repeat;
}


/* ==========================================
   PROVINCES FIXES HAUT
========================================== */

.provinces-sticky[b-vd3fl5846p]{
    position:fixed;
    top:80px;
    left:250px;
    right:70px;
    height:140px;

    padding:.5rem;
    background:#fff;

    border-bottom:1px solid #eee;
    border-radius:16px;

    z-index:1000;
    overflow:hidden;
}

.provinces-scroll[b-vd3fl5846p]{
    display:flex;
    align-items:center;
    gap:.8rem;

    height:100%;

    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.provinces-scroll[b-vd3fl5846p]::-webkit-scrollbar{
    display:none;
}


/* ==========================================
   CONTENU CENTRAL
========================================== */

.procedures-content[b-vd3fl5846p]{
    position:fixed;

    top:220px;
    bottom:20px;
    left:240px;
    right:30px;

    display:flex;
    gap:1rem;

    padding:1rem;

    background:rgba(255,255,255,.9);
    border-radius:16px;

    overflow:hidden;
}

/* ==========================================
   COLONNE GAUCHE
========================================== */

.procedure-left[b-vd3fl5846p]{
    flex:0 0 22%;
    height:100%;

    display:flex;
    flex-direction:column;

    overflow-y:auto;

    background:#fff;
    border-radius:12px;

    padding:.3rem;
}

/* ==========================================
   COLONNE DROITE : aucun défilement
   (seul le contenu de l'onglet défile, dans InfoProgrammes)
========================================== */

.procedure-right[b-vd3fl5846p]{
    flex:1;
    min-width:0;
    height:100%;

    overflow:hidden;

    background:#fff;
    border-radius:12px;
}


/* ==========================================
   MOBILE (portrait + paysage téléphone)
   Le bureau reste inchangé
========================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  .procedures-page[b-vd3fl5846p] {
    --hdr: 56px;      /* hauteur de votre barre du haut : ajustez si besoin */
    --strip-h: 84px;  /* même hauteur que la bande d'Integration */
    --gap: 6px;
    --btn-room: 34px; /* place réservée au bouton, entre la topbar et la bande */
  }

  /* Bande des provinces : pleine largeur, sous l'en-tête et le bouton.
     overflow visible : le bouton des provinces ne doit pas être coupé. */
  .provinces-sticky[b-vd3fl5846p] {
    top: calc(var(--hdr) + var(--btn-room) + var(--gap));
    left: var(--gap);
    right: var(--gap);
    height: var(--strip-h);
    padding: 2px 4px;
    border-radius: 12px;
    overflow: visible;
  }

  .provinces-sticky[b-vd3fl5846p]  button,
  .provinces-sticky[b-vd3fl5846p]  .toggle-btn {
    z-index: 1100;
  }

  .provinces-sticky[b-vd3fl5846p]  .stats-scroll,
  .provinces-scroll[b-vd3fl5846p] {
    height: 100%;
    align-items: center;
    justify-content: flex-start;   /* plus de centrage qui coupe le début */
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* Contenu : directement sous la bande ; place du pied de page en bas */
  .procedures-content[b-vd3fl5846p] {
    top: calc(var(--hdr) + var(--btn-room) + var(--strip-h) + var(--gap) * 2);
    bottom: 44px;       /* ajustez si besoin */
    left: var(--gap);
    right: var(--gap);
    padding: 4px;
    gap: 4px;
    border-radius: 12px;
    flex-direction: column;
  }

  /* Liste des procédures : prend seulement la hauteur de ses cartes (max 34 %) */
  .procedure-left[b-vd3fl5846p] {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: 34%;
    padding: 2px;
    overflow-y: auto;
  }

  /* Détails + colonne responsable : tout le reste */
  .procedure-right[b-vd3fl5846p] {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    height: auto;
    overflow-y: auto;
  }

  /* Informations (responsable, liens, tendance) avant les onglets */
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-side { order: -1; }
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-main { order: 1; }

  /* La zone de l'onglet défile dans les deux sens */
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-main {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-tab-content {
    flex: 0 1 auto;
    max-height: 52vh;
    overflow: auto;                 /* vertical + horizontal */
    -webkit-overflow-scrolling: touch;
    padding: .3rem;
    font-size: .72rem;
  }

  /* Contenu de chaque onglet : largeur minimale, on défile au lieu de couper */
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-tab-content > * {
    min-width: 480px;
  }

  /* Schéma : taille réelle, défilement horizontal */
  .procedure-right[b-vd3fl5846p]  .timeline-scroll {
    width: 480px;
    max-width: none;
    overflow: visible;
  }
  .procedure-right[b-vd3fl5846p]  .timeline-s-container {
    transform: none;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .procedure-right[b-vd3fl5846p]  .node-circle { width: 22px; height: 22px; }
  .procedure-right[b-vd3fl5846p]  .node-label {
    width: 64px;
    font-size: .5rem;
    line-height: 1.1;
  }

  /* Miniature : onglets et cartes d'information */
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-tab {
    padding: .18rem .45rem;
    font-size: .55rem;
  }
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-side {
    font-size: .72rem;
  }
}


/* ==========================================
   PAYSAGE TÉLÉPHONE : 3 colonnes
   liste | contenu | colonne de droite
   Cartes provinces identiques à la page Integration.
========================================== */
@media (max-height: 500px) and (orientation: landscape) {

  .procedures-page[b-vd3fl5846p] { --hdr: 46px; --strip-h: 54px; --gap: 4px; }

  /* Bande des provinces : une rangée fine (mêmes valeurs qu'Integration) */
  .provinces-sticky[b-vd3fl5846p] {
    height: var(--strip-h);
    padding: 1px 4px;
    border-radius: 12px;
  }
  .provinces-sticky[b-vd3fl5846p]  .stats-scroll { gap: 4px; padding: 2px 4px 3px; }
  .provinces-sticky[b-vd3fl5846p]  .stat-card {
    flex: 0 0 52px; height: 46px; padding: 2px; gap: 1px; border-radius: 7px;
  }
  .provinces-sticky[b-vd3fl5846p]  .province-flag { width: 20px; height: 20px; }
  .provinces-sticky[b-vd3fl5846p]  .stat-value { display: none; }
  .provinces-sticky[b-vd3fl5846p]  .stat-label { font-size: .4rem; line-height: 1.05; margin-top: 0; }
  .provinces-sticky[b-vd3fl5846p]  .programs-badge {
    min-width: 11px; height: 11px; font-size: .38rem; top: 1px; right: 1px; padding: 0 3px;
  }

  .procedures-content[b-vd3fl5846p] {
    flex-direction: row;
    gap: 4px;
    padding: 3px;
  }
  .procedure-left[b-vd3fl5846p] {
    flex: 0 0 22%;
    height: 100%;
    max-height: none;
  }
  .procedure-right[b-vd3fl5846p] {
    flex: 1 1 0;
    height: 100%;
    overflow: hidden;
  }

  /* Pas d'inversion de l'ordre : main puis side */
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-side { order: 0; }
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-main { order: 0; }

  /* InfoProgrammes : on annule l'empilement du bloc 900px */
  .procedure-right[b-vd3fl5846p]  .InfoProgrammes-content { height: 100%; }
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details {
    flex-direction: row;
    height: 100%;
    overflow: hidden;
    gap: 4px;
  }
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-main {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 100%;
    max-height: none;
    overflow-y: auto;
  }
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-side {
    flex: 0 0 30%;
    width: auto;
    max-width: 30%;
    height: 100%;
    overflow-y: auto;
  }
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-tab-content {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
  }
}


/* ==========================================
   PORTRAIT TÉLÉPHONE
   Cartes provinces à la taille de provinces.css (comme Integration).
========================================== */
@media (max-width: 900px) and (orientation: portrait) {

  .procedures-page[b-vd3fl5846p] { --hdr: 56px; --strip-h: 84px; --gap: 4px; }

  .provinces-sticky[b-vd3fl5846p] {
    height: var(--strip-h);
    padding: 2px 4px;
    border-radius: 12px;
  }

  /* Contenu : liste compacte en haut, détails qui remplissent le reste */
  .procedures-content[b-vd3fl5846p] {
    gap: 3px;
    padding: 3px;
  }
  .procedure-left[b-vd3fl5846p] {
    flex: 0 0 auto;
    max-height: 22%;
  }
  .procedure-right[b-vd3fl5846p] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
  }

  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details { gap: 4px; }
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-main,
  .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-side {
    font-size: .8rem;
  }
}


/* ==========================================
   TIROIRS (portrait téléphone)
   - languettes et tiroirs glissent ensemble :
     même durée, même courbe, même distance
   - tiroirs collés sous la bande des provinces,
     coins arrondis seulement en bas
========================================== */

/* Languettes et fond : cachés sur bureau / paysage */
.drawer-toggle[b-vd3fl5846p],
.drawer-backdrop[b-vd3fl5846p] {
  display: none;
}

@media (max-width: 900px) and (orientation: portrait) {

  .procedures-page[b-vd3fl5846p] {
    --drawer-top: calc(var(--hdr) + var(--btn-room, 34px) + var(--strip-h) + var(--gap) * 2);
    --drawer-overlap: 8px;                      /* les tiroirs montent sous la bande : aucun espace visible */
    --drawer-w: 72vw;
    --drawer-dur: .3s;                          /* vitesse unique */
    --drawer-ease: cubic-bezier(.4, 0, .2, 1);  /* courbe unique */
  }

  /* Une seule colonne : onglets + diagramme en bas, pleine largeur */
  .procedures-page .procedures-content[b-vd3fl5846p] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* ---------- Languettes roses réduites, collées aux bords ---------- */
  .procedures-page .drawer-toggle[b-vd3fl5846p] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    z-index: 1003;

    width: 16px;
    height: 44px;
    padding: 0;

    background: rgba(239, 68, 68, .75);
    color: #fff;
    border: none;
    font-size: .6rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);

    transform: translate(0, -50%);
    transition: transform var(--drawer-dur) var(--drawer-ease);
    will-change: transform;
  }
  .procedures-page .drawer-toggle-left[b-vd3fl5846p] {
    left: 0;
    border-radius: 0 10px 10px 0;
  }
  .procedures-page .drawer-toggle-right[b-vd3fl5846p] {
    right: 0;
    border-radius: 10px 0 0 10px;
  }

  /* La languette suit exactement le bord du tiroir */
  .procedures-page .procedures-content.list-open .drawer-toggle-left[b-vd3fl5846p] {
    transform: translate(var(--drawer-w), -50%);
  }
  .procedures-page .procedures-content.info-open .drawer-toggle-right[b-vd3fl5846p] {
    transform: translate(calc(-1 * var(--drawer-w)), -50%);
  }

  /* ---------- Fond cliquable (referme le tiroir), sans assombrissement :
     seule l'ombre du tiroir le détache de la page ---------- */
  .procedures-page .drawer-backdrop[b-vd3fl5846p] {
    display: block;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1000;
  }

  /* ---------- Tiroir gauche : liste des services ----------
     Toujours rendu, glisse hors écran quand il est fermé.
     Haut collé sous la bande, coin haut droit carré. */
  .procedures-page .procedure-left[b-vd3fl5846p] {
    display: block !important;
    position: fixed;
    top: calc(var(--drawer-top) - var(--drawer-overlap));
    bottom: 44px;
    left: 0;
    width: var(--drawer-w) !important;
    max-height: none !important;
    height: auto !important;
    z-index: 1001;
    padding: calc(12px + var(--drawer-overlap)) 10px 12px;   /* le contenu ne passe pas sous la bande */
    background: #fff;
    border-radius: 0 0 14px 0 !important;
    border-top: 0;
    box-shadow:
      2px 0 4px rgba(0,0,0,.12),
      8px 0 16px rgba(0,0,0,.18),
      16px 0 40px rgba(0,0,0,.22);
    overflow-y: auto !important;

    transform: translateX(-100%);
    visibility: hidden;   /* caché après la fin de la glissade */
    transition: transform var(--drawer-dur) var(--drawer-ease),
                visibility 0s linear var(--drawer-dur);
    will-change: transform;
  }
  .procedures-page .procedures-content.list-open .procedure-left[b-vd3fl5846p] {
    transform: translateX(0);
    visibility: visible;  /* visible immédiatement à l'ouverture */
    transition: transform var(--drawer-dur) var(--drawer-ease),
                visibility 0s;
  }

  /* ---------- Tiroir droit : informations du service ---------- */
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-side {
    display: flex !important;
    position: fixed;
    top: calc(var(--drawer-top) - var(--drawer-overlap));
    bottom: 44px;
    right: 0;
    left: auto;
    width: var(--drawer-w) !important;
    max-height: none !important;
    height: auto !important;
    z-index: 1001;
    padding: calc(12px + var(--drawer-overlap)) 10px 12px;
    gap: .5rem !important;
    background: #fff;
    border-radius: 0 0 0 14px !important;
    border-top: 0;
    box-shadow:
      -2px 0 4px rgba(0,0,0,.12),
      -8px 0 16px rgba(0,0,0,.18),
      -16px 0 40px rgba(0,0,0,.22);
    overflow-y: auto !important;

    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--drawer-dur) var(--drawer-ease),
                visibility 0s linear var(--drawer-dur);
    will-change: transform;
  }
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-details-side {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--drawer-dur) var(--drawer-ease),
                visibility 0s;
  }

  /* ---------- Polices lisibles dans les tiroirs ----------
     Cartes du tiroir gauche : voir ProcedureCards.razor.css (les cartes
     appartiennent à ce composant). Tiroir droit : valeurs réduites. */
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-side-top,
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-side-middle,
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-side-bottom {
    padding: .45rem;
  }
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-identity-avatar { width: 34px; height: 34px; font-size: .65rem; }
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-identity-name   { font-size: .72rem; }
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-identity-type   { font-size: .58rem; }
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-field-label     { font-size: .46rem; }
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-field-value     { font-size: .6rem; }
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-side-title      { font-size: .72rem; }
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-link            { font-size: .6rem; padding: .25rem .4rem; }
  .procedures-page .procedures-content.info-open .procedure-right[b-vd3fl5846p]  .infoProgrammes-trend-svg       { height: 64px; }
}


/* ==========================================================
   PORTRAIT TÉLÉPHONE : contenu des onglets et diagramme
   miniaturisés
========================================================== */
@media (max-width: 900px) and (orientation: portrait) {

  /* ---------- Onglets (pilules) ---------- */
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-tabs { padding-top: .1rem; padding-bottom: .1rem; }
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-tabs > span { font-size: .5rem !important; }
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-tabs-items { gap: .25rem !important; }
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-tab {
    padding: .12rem .4rem !important;
    font-size: .5rem !important;
    gap: .15rem;
  }
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-tab-badge {
    font-size: .42rem !important;
    padding: 0 .25rem !important;
  }

  /* ---------- Cadre du contenu et textes ---------- */
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-tab-content {
    padding: .3rem !important;
    font-size: .6rem !important;
  }
  .procedures-page .procedure-right[b-vd3fl5846p]  .programme-description,
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-richtext {
    font-size: .58rem !important;
    line-height: 1.35 !important;
  }
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-richtext h1,
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-richtext h2,
  .procedures-page .procedure-right[b-vd3fl5846p]  .infoProgrammes-richtext h3 {
    font-size: .75rem !important;
    margin: .3rem 0 .2rem;
  }

  /* Étapes (numéros + carte) */
  .procedures-page .procedure-right[b-vd3fl5846p]  .details-panel      { gap: .4rem; }
  .procedures-page .procedure-right[b-vd3fl5846p]  .details-numbers-bar { gap: .25rem; }
  .procedures-page .procedure-right[b-vd3fl5846p]  .details-number-item {
    width: 20px !important;
    height: 20px !important;
    font-size: .52rem !important;
  }
  .procedures-page .procedure-right[b-vd3fl5846p]  .detail-card,
  .procedures-page .procedure-right[b-vd3fl5846p]  .news-card { padding: .4rem .5rem !important; border-radius: 8px; }
  .procedures-page .procedure-right[b-vd3fl5846p]  .detail-card-titre { font-size: .62rem !important; margin-bottom: .2rem; }

  /* Documents */
  .procedures-page .procedure-right[b-vd3fl5846p]  .documents-cards { gap: .3rem; margin-top: 10px; }
  .procedures-page .procedure-right[b-vd3fl5846p]  .document-card   { padding: .15rem .4rem; gap: .4rem; }
  .procedures-page .procedure-right[b-vd3fl5846p]  .document-card-icon { font-size: .8rem; }
  .procedures-page .procedure-right[b-vd3fl5846p]  .document-card-link,
  .procedures-page .procedure-right[b-vd3fl5846p]  .document-card-name { font-size: .58rem !important; }

  /* ---------- Diagramme (taille réelle, cercles 26px) ---------- */
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .parcours-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    zoom: 1 !important;
    padding: .2rem .2rem .4rem !important;
  }
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .parcours-header {
    max-width: 100% !important;
    margin-bottom: 52px !important;     /* dégage le badge « 8 steps » des textes du haut */
  }
  .procedures-page .procedure-right[b-vd3fl5846p]  .etapes-count-badge {
    font-size: .6rem !important;
    padding: .15rem .45rem !important;
  }
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .timeline-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 56px !important;       /* place pour les textes sous la 2e rangée */
    overflow: visible !important;
  }
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .timeline-s-container {
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
  }

  html body .procedures-page .procedure-right[b-vd3fl5846p]  .node-circle {
    width: 26px !important;
    height: 26px !important;
    border-width: 2px !important;
  }
  .procedures-page .procedure-right[b-vd3fl5846p]  .node-circle::after { inset: -3px; }
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .node-number { font-size: .7rem !important; }

  /* Textes : boîtes étroites, 3 lignes maximum */
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .node-label {
    width: 58px !important;
    max-height: 36px !important;
    overflow: hidden !important;
  }
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .node-label.label-left  { right: 17px !important; }
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .node-label.label-right { left: 17px !important; }
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .node-label.label-top   { bottom: 17px !important; }

  html body .procedures-page .procedure-right[b-vd3fl5846p]  .node-label .label-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden !important;
    overflow-wrap: anywhere;
    line-height: 1.05 !important;
    font-weight: 700 !important;
  }
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .node-label.len-s .label-title { font-size: .46rem !important; }
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .node-label.len-m .label-title { font-size: .4rem !important; }
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .node-label.len-l .label-title { font-size: .34rem !important; }

  /* Info-bulle au survol */
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .node-tooltip {
    min-width: 120px;
    max-width: 170px;
    padding: .3rem .45rem;
  }
  html body .procedures-page .procedure-right[b-vd3fl5846p]  .tooltip-desc { font-size: .58rem !important; }
}


/* ==========================================================
   Mobile : un seul panneau continu, sans segmentation
   (bande des provinces collée au contenu, tiroirs plats)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

  /* Pas d'espace entre la barre du haut, la bande et le contenu */
  .procedures-page[b-vd3fl5846p] {
    --gap: 0px;
  }

  /* Bande des provinces : pleine largeur, sans coins arrondis,
     au-dessus des tiroirs (elle cache leur léger chevauchement) */
  .provinces-sticky[b-vd3fl5846p] {
    left: 0;
    right: 0;
    border-radius: 0;
    border-bottom: 0;
    box-shadow: none;
    z-index: 1150;
  }

  /* Contenu : collé sous la bande, bord à bord */
  .procedures-content[b-vd3fl5846p] {
    left: 0;
    right: 0;
    gap: 0;
    border-radius: 0;
    background: #fff;
  }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.stats-sticky[b-5bf8074pc1] {
    position: fixed;
    top: 80px;
    left: 250px;                  /* largeur du menu de gauche */
    right: 60px;                  /* largeur de la barre d'actions */
    z-index: 100;

    background: white;
    padding: .1rem 0;
}

.page-content[b-5bf8074pc1] {
    margin-top: 150px;
    padding-bottom: 60px;         /* place pour OutilsStatsCards en bas */
}

.page-bottom[b-5bf8074pc1] {
    padding-bottom: 60px;         /* place pour OutilsStatsCards en bas */
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    /* Les cartes sont gérées par StatsCards (languette + rangée fixe) :
       on garde seulement les 40px qu'il réserve dans le flux */
    .stats-sticky[b-5bf8074pc1] {
        position: static;
        padding: 0;
        background: transparent;
    }

    .page-content[b-5bf8074pc1] {
        margin-top: 0;
        padding-bottom: 96px;     /* place pour le bandeau du bas */
    }

    .page-bottom[b-5bf8074pc1] {
        margin-top: 150px;
        padding-bottom: 60px;
    }
}
/* /Components/Pages/Login/Login.razor.rz.scp.css */
.login-card[b-6hc9b5r0sr] {
    width: 100%;
    max-width: 360px;
    margin: 0 16px;
    padding: 32px 28px;

    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .1);

    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.login-title[b-6hc9b5r0sr] {
    margin: 0 0 4px;
    font-size: 1.3rem;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
}

.login-subtitle[b-6hc9b5r0sr] {
    margin: 0 0 24px;
    font-size: 0.85rem;
    color: #6e6e73;
    text-align: center;
}

.login-alert[b-6hc9b5r0sr] {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdecec;
    color: #c92a2a;
    font-size: 0.8rem;
}

.login-field[b-6hc9b5r0sr] {
    margin-bottom: 16px;
}

.login-label[b-6hc9b5r0sr] {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6e6e73;
}

.login-input[b-6hc9b5r0sr] {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 0 12px;

    font-size: 0.9rem;
    color: #1d1d1f;

    background: #f5f5f7;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;

    transition: border-color .15s ease, background-color .15s ease;
}

.login-input:focus[b-6hc9b5r0sr] {
    outline: none;
    background: #ffffff;
    border-color: #c92a2a;
    box-shadow: 0 0 0 3px rgba(201, 42, 42, .1);
}

.login-btn[b-6hc9b5r0sr] {
    width: 100%;
    height: 42px;

    font-size: 0.9rem;
    font-weight: 500;

    border-radius: 10px;
    border: none;
    cursor: pointer;

    transition: background-color .15s ease, opacity .15s ease;
}

.login-btn:disabled[b-6hc9b5r0sr] {
    opacity: .6;
    cursor: not-allowed;
}

.login-btn-primary[b-6hc9b5r0sr] {
    background: #c92a2a;
    color: #ffffff;
    margin-bottom: 4px;
}

.login-btn-primary:hover:not(:disabled)[b-6hc9b5r0sr] {
    background: #a61e1e;
}

.login-btn-google[b-6hc9b5r0sr] {
    background: #f0f0f2;
    color: #1d1d1f;
}

.login-btn-google:hover:not(:disabled)[b-6hc9b5r0sr] {
    background: #e5e5e7;
}

.login-divider[b-6hc9b5r0sr] {
    display: flex;
    align-items: center;
    margin: 16px 0;

    font-size: 0.7rem;
    color: #a1a1a6;
}

.login-divider[b-6hc9b5r0sr]::before,
.login-divider[b-6hc9b5r0sr]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, .08);
}

.login-divider span[b-6hc9b5r0sr] {
    padding: 0 10px;
}

.login-info[b-6hc9b5r0sr] {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ecf8ef;
    color: #15803d;
    font-size: 0.8rem;
}

.login-lien[b-6hc9b5r0sr] {
    display: block;
    margin: 6px 0 0 auto;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.75rem;
    color: #c92a2a;
    cursor: pointer;
}

.login-lien:hover[b-6hc9b5r0sr] {
    text-decoration: underline;
}

.login-retour[b-6hc9b5r0sr] {
    margin: 14px auto 0;
}

@media (max-width: 480px) {
    .login-card[b-6hc9b5r0sr] {
        max-width: 320px;
        margin: 0 12px;
        padding: 20px 18px;
        border-radius: 14px;
    }

    .login-title[b-6hc9b5r0sr] {
        font-size: 1.1rem;
    }

    .login-subtitle[b-6hc9b5r0sr] {
        margin-bottom: 16px;
        font-size: 0.78rem;
    }

    .login-alert[b-6hc9b5r0sr],
    .login-info[b-6hc9b5r0sr] {
        margin-bottom: 12px;
        padding: 8px 10px;
        font-size: 0.75rem;
    }

    .login-field[b-6hc9b5r0sr] {
        margin-bottom: 12px;
    }

    .login-label[b-6hc9b5r0sr] {
        margin-bottom: 4px;
        font-size: 0.7rem;
    }

    .login-input[b-6hc9b5r0sr] {
        height: 36px;
        padding: 0 10px;
        font-size: 16px; /* évite le zoom automatique sur iOS */
    }

    .login-btn[b-6hc9b5r0sr] {
        height: 38px;
        font-size: 0.85rem;
    }

    .login-divider[b-6hc9b5r0sr] {
        margin: 12px 0;
    }
}

/* Écrans très petits ou paysage (hauteur limitée) */
@media (max-height: 600px) {
    .login-card[b-6hc9b5r0sr] {
        padding: 16px 18px;
    }

    .login-subtitle[b-6hc9b5r0sr] {
        margin-bottom: 12px;
    }

    .login-field[b-6hc9b5r0sr] {
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .login-card[b-6hc9b5r0sr] {
        max-width: 300px;
        margin: 0 10px;
        padding: 16px 14px;
        border-radius: 14px;
    }

    .login-title[b-6hc9b5r0sr] {
        font-size: 1rem;
        margin-bottom: 2px;
    }

    .login-subtitle[b-6hc9b5r0sr] {
        margin-bottom: 12px;
        font-size: 0.72rem;
    }

    .login-alert[b-6hc9b5r0sr],
    .login-info[b-6hc9b5r0sr] {
        margin-bottom: 10px;
        padding: 7px 9px;
        font-size: 0.7rem;
    }

    .login-field[b-6hc9b5r0sr] {
        margin-bottom: 10px;
    }

    .login-label[b-6hc9b5r0sr] {
        margin-bottom: 3px;
        font-size: 0.68rem;
    }

    .login-input[b-6hc9b5r0sr] {
        height: 34px;
        padding: 0 10px;
        font-size: 16px; /* ne pas descendre : iOS zoomerait sur le champ */
        border-radius: 7px;
    }

    .login-btn[b-6hc9b5r0sr] {
        height: 36px;
        font-size: 0.8rem;
        border-radius: 9px;
    }

    .login-divider[b-6hc9b5r0sr] {
        margin: 10px 0;
        font-size: 0.65rem;
    }

    .login-lien[b-6hc9b5r0sr] {
        font-size: 0.7rem;
    }
}

/* ===================================
   Carte de connexion : couleurs système (clair / sombre)
=================================== */

.login-card[b-6hc9b5r0sr] {
    background: Canvas;
    color: CanvasText;
    border: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
}

.login-title[b-6hc9b5r0sr] { color: CanvasText; }

.login-subtitle[b-6hc9b5r0sr],
.login-label[b-6hc9b5r0sr] { color: color-mix(in srgb, CanvasText 60%, Canvas); }

.login-input[b-6hc9b5r0sr] {
    background: color-mix(in srgb, CanvasText 6%, Canvas);
    color: CanvasText;
    border-color: color-mix(in srgb, CanvasText 15%, transparent);
}

.login-input:focus[b-6hc9b5r0sr] {
    background: Canvas;
    border-color: #c92a2a;
}

.login-btn-google[b-6hc9b5r0sr] {
    background: color-mix(in srgb, CanvasText 8%, Canvas);
    color: CanvasText;
}

.login-btn-google:hover:not(:disabled)[b-6hc9b5r0sr] {
    background: color-mix(in srgb, CanvasText 14%, Canvas);
}

.login-divider[b-6hc9b5r0sr] { color: color-mix(in srgb, CanvasText 50%, Canvas); }

.login-divider[b-6hc9b5r0sr]::before,
.login-divider[b-6hc9b5r0sr]::after {
    background: color-mix(in srgb, CanvasText 15%, transparent);
}

/* Messages d'alerte et d'info : lisibles dans les deux modes */
.login-alert[b-6hc9b5r0sr] {
    background: light-dark(#fdecec, #3a1f21);
    color: light-dark(#c92a2a, #ff8a8a);
}

.login-info[b-6hc9b5r0sr] {
    background: light-dark(#ecf8ef, #16301f);
    color: light-dark(#15803d, #6ee7a0);
}

.login-lien[b-6hc9b5r0sr] { color: light-dark(#c92a2a, #ff8a8a); }

.auth-input[b-6hc9b5r0sr] { background: color-mix(in srgb, CanvasText 6%, Canvas); }
.lang-btn[b-6hc9b5r0sr]   { border-color: color-mix(in srgb, CanvasText 25%, transparent); }
/* /Components/Pages/Preferences/AssistanceAssistant.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   AssistanceAssistant : CSS scopé, autonome.
   2 colonnes : accès (80 %) / infos de l'assistant (20 %).
   ═══════════════════════════════════════════════ */

.assist-2col[b-zfkcn82lwa] {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : panneaux empilés, tailles normales
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .assist-2col[b-zfkcn82lwa] {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .assist-flash[b-zfkcn82lwa] { font-size: .75rem; padding: .4rem .6rem; }

    /* Les bascules d'accès défilent horizontalement dans leur cadre */
    .acces-scroll[b-zfkcn82lwa] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Bascules plus faciles à toucher */
    .acces-toggle[b-zfkcn82lwa] { width: 34px; height: 20px; }
    .acces-toggle-slider[b-zfkcn82lwa]::before { height: 14px; width: 14px; }
    .acces-toggle input:checked + .acces-toggle-slider[b-zfkcn82lwa]::before { transform: translateX(14px); }

    /* Fiche : libellé et valeur côte à côte pour gagner de la hauteur */
    .assist-fiche-ligne[b-zfkcn82lwa] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }

    .assist-fiche-ligne dd[b-zfkcn82lwa] { text-align: right; }
}

.assist-flash[b-zfkcn82lwa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
    color: #216b45;
    background: rgba(48, 133, 79, .08);
    border: 1px solid rgba(48, 133, 79, .2);
    border-radius: 10px;
}

.assist-flash-close[b-zfkcn82lwa] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.assist-panel[b-zfkcn82lwa] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.assist-panel-head[b-zfkcn82lwa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.assist-panel-title[b-zfkcn82lwa] { margin: 0; font-size: 0.85rem; font-weight: 600; }
.assist-count[b-zfkcn82lwa] { font-size: 0.72rem; color: #86868b; }

.assist-icon[b-zfkcn82lwa] {
    border: none;
    background: transparent;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.assist-icon:hover[b-zfkcn82lwa] { background: #f3f4f6; color: #111827; }

/* ===== Boutons d'accès (même design que l'outil Filtre) ===== */

.acces-message[b-zfkcn82lwa] { margin: 0.5rem 0.8rem 0; font-size: 0.78rem; }
.acces-message.erreur[b-zfkcn82lwa] { color: #b91c1c; }
.acces-message.succes[b-zfkcn82lwa] { color: #15803d; }

.acces-scroll[b-zfkcn82lwa] { overflow-x: auto; }

.acces-table[b-zfkcn82lwa] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8rem;
}

.acces-table thead th[b-zfkcn82lwa] {
    padding: 0.35rem 0.5rem;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acces-table tbody td[b-zfkcn82lwa] {
    padding: 0.5rem;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
}

.acces-table tbody td + td[b-zfkcn82lwa],
.acces-table thead th + th[b-zfkcn82lwa] { border-left: 1px solid #f3f4f6; }

.acces-toggle[b-zfkcn82lwa] {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 18px;
    vertical-align: middle;
}

.acces-toggle input[b-zfkcn82lwa] { opacity: 0; width: 0; height: 0; }

.acces-toggle-slider[b-zfkcn82lwa] {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.acces-toggle-slider[b-zfkcn82lwa]::before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.acces-toggle input:checked + .acces-toggle-slider[b-zfkcn82lwa] { background: #c92a2a; }
.acces-toggle input:checked + .acces-toggle-slider[b-zfkcn82lwa]::before { transform: translateX(12px); }
.acces-toggle.busy .acces-toggle-slider[b-zfkcn82lwa] { opacity: 0.5; cursor: wait; }

/* ===== Fiche de l'assistant (colonne étroite : libellé au-dessus de la valeur) ===== */

.assist-fiche[b-zfkcn82lwa] { margin: 0; padding: 0.3rem 0.8rem 0.6rem; }

.assist-fiche-ligne[b-zfkcn82lwa] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.78rem;
}

.assist-fiche-ligne:last-child[b-zfkcn82lwa] { border-bottom: none; }

.assist-fiche-ligne dt[b-zfkcn82lwa] {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9ca3af;
}

.assist-fiche-ligne dd[b-zfkcn82lwa] {
    margin: 0;
    min-width: 0;
    word-break: break-word;
    color: #374151;
}

.assist-nom[b-zfkcn82lwa] { display: flex; align-items: center; gap: 0.5rem; }

.assist-avatar[b-zfkcn82lwa] {
    flex: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fbeaea;
    color: #c92a2a;
    font-size: 0.72rem;
    font-weight: 700;
}

.assist-nom-principal[b-zfkcn82lwa] { font-weight: 500; line-height: 1.2; }

.assist-chip[b-zfkcn82lwa] {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 0.72rem;
    white-space: nowrap;
}

.assist-muet[b-zfkcn82lwa] { color: #a1a1a6; }

.assist-badge[b-zfkcn82lwa] {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.assist-badge.ok[b-zfkcn82lwa] { background: #dcfce7; color: #166534; }
.assist-badge.attente[b-zfkcn82lwa] { background: #fef3c7; color: #92400e; }

.assist-vide[b-zfkcn82lwa] { padding: 1rem; text-align: center; font-size: 0.8rem; color: #86868b; }

.assist-etat[b-zfkcn82lwa] {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
}

.assist-etat.erreur[b-zfkcn82lwa] { color: #b91c1c; border-color: #fca5a5; }

/* ═══════════════════════════════════════════════
   Fiche de l'assistant : libellé à gauche, valeur à droite
   (à placer APRÈS les règles de base)
   ═══════════════════════════════════════════════ */

.assist-fiche[b-zfkcn82lwa] { text-align: left; }

.assist-fiche-ligne[b-zfkcn82lwa] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
    text-align: left;
}

.assist-fiche-ligne dt[b-zfkcn82lwa] {
    flex-shrink: 0;
    max-width: 45%;
    font-size: .62rem;
}

.assist-fiche-ligne dd[b-zfkcn82lwa] {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
    word-break: break-word;
}

/* Le nom (avatar + texte) et les pastilles collés à l'extrémité droite */
.assist-fiche-ligne .assist-nom[b-zfkcn82lwa] {
    justify-content: flex-end;
}

.assist-fiche-ligne dd .assist-chip[b-zfkcn82lwa],
.assist-fiche-ligne dd .assist-badge[b-zfkcn82lwa] {
    margin-left: auto;
}

/* ===== Mobile : plus compact ===== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .assist-fiche[b-zfkcn82lwa] { padding: .2rem .65rem .4rem; }

    .assist-fiche-ligne[b-zfkcn82lwa] {
        padding: .4rem 0;
        gap: .5rem;
    }

    .assist-fiche-ligne dt[b-zfkcn82lwa] { font-size: .6rem; }
    .assist-fiche-ligne dd[b-zfkcn82lwa] { font-size: .78rem; }

    .assist-avatar[b-zfkcn82lwa] { width: 22px; height: 22px; font-size: .68rem; }
}

/* ═══════════════════════════════════════════════
   Mobile : sans traits, police réduite, Accès en premier
   ═══════════════════════════════════════════════ */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* ----- Ordre : tableau d'accès d'abord, fiche ensuite ----- */
    .assist-2col > .assist-panel:nth-child(1)[b-zfkcn82lwa] { order: 1; }
    .assist-2col > .assist-panel:nth-child(2)[b-zfkcn82lwa] { order: 2; }

    /* ----- Fiche : plus de traits, police réduite ----- */
    .assist-fiche-ligne[b-zfkcn82lwa],
    .assist-fiche-ligne:last-child[b-zfkcn82lwa] {
        border-bottom: none !important;
        padding: .22rem 0;
        gap: .4rem;
    }

    .assist-fiche[b-zfkcn82lwa] { padding: .2rem .65rem .35rem; }

    .assist-fiche-ligne dt[b-zfkcn82lwa] { font-size: .54rem; }
    .assist-fiche-ligne dd[b-zfkcn82lwa] { font-size: .68rem; }

    .assist-avatar[b-zfkcn82lwa] { width: 18px; height: 18px; font-size: .58rem; }
    .assist-nom[b-zfkcn82lwa] { gap: .35rem; }

    .assist-chip[b-zfkcn82lwa],
    .assist-badge[b-zfkcn82lwa] { font-size: .62rem; padding: .02rem .45rem; }

    /* ----- En-têtes de panneaux plus compacts ----- */
    .assist-panel-head[b-zfkcn82lwa] { padding: .35rem .65rem; }
    .assist-panel-title[b-zfkcn82lwa] { font-size: .75rem; }
    .assist-count[b-zfkcn82lwa] { font-size: .62rem; }

    /* ----- Tableau d'accès : plus de traits internes ----- */
    .acces-table thead th[b-zfkcn82lwa],
    .acces-table tbody td + td[b-zfkcn82lwa],
    .acces-table thead th + th[b-zfkcn82lwa] {
        border-left: none !important;
    }

    .acces-table thead th[b-zfkcn82lwa] {
        border-bottom: none !important;
        font-size: .56rem;
        padding: .3rem .3rem;
    }

    .acces-table tbody td[b-zfkcn82lwa] { padding: .3rem; }
}

/* ═══════════════════════════════════════════════
   Mobile : police encore réduite (une seule variable à ajuster)
   ═══════════════════════════════════════════════ */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .assist-2col[b-zfkcn82lwa] {
        --af-fs: 10px;   /* taille de base : monter ou descendre ici */
    }

    /* ----- Fiche ----- */
    .assist-fiche-ligne dt[b-zfkcn82lwa] { font-size: calc(var(--af-fs) - 2px) !important; }
    .assist-fiche-ligne dd[b-zfkcn82lwa] { font-size: var(--af-fs) !important; }

    .assist-fiche-ligne[b-zfkcn82lwa] { padding: .18rem 0 !important; }

    .assist-avatar[b-zfkcn82lwa] {
        width: 16px;
        height: 16px;
        font-size: calc(var(--af-fs) - 2px);
    }

    .assist-chip[b-zfkcn82lwa],
    .assist-badge[b-zfkcn82lwa] {
        font-size: calc(var(--af-fs) - 1px) !important;
        padding: .01rem .4rem;
    }

    /* ----- En-têtes de panneaux ----- */
    .assist-panel-title[b-zfkcn82lwa] { font-size: calc(var(--af-fs) + 1px) !important; }
    .assist-count[b-zfkcn82lwa] { font-size: calc(var(--af-fs) - 1px) !important; }
    .assist-icon[b-zfkcn82lwa] { font-size: var(--af-fs); }

    /* ----- Tableau d'accès ----- */
    .acces-table thead th[b-zfkcn82lwa] { font-size: calc(var(--af-fs) - 2px) !important; }

    .acces-message[b-zfkcn82lwa],
    .assist-flash[b-zfkcn82lwa] { font-size: var(--af-fs) !important; }
}

/* iOS Safari : évite tout agrandissement automatique du texte */
@supports (-webkit-touch-callout: none) {
    .assist-2col[b-zfkcn82lwa] { -webkit-text-size-adjust: 100%; }
}

/* ===== Mobile : « Assistant » en premier, « Accès » en dessous ===== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .assist-2col > .assist-panel:nth-child(1)[b-zfkcn82lwa] { order: 2; }  /* Accès */
    .assist-2col > .assist-panel:nth-child(2)[b-zfkcn82lwa] { order: 1; }  /* Assistant */
}

/* ===== Mobile : tableau « Accès » entièrement visible, sans défilement ===== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .acces-scroll[b-zfkcn82lwa] { overflow-x: visible; }

    .acces-table[b-zfkcn82lwa] {
        min-width: 0 !important;   /* annule le min-width en ligne du Razor */
        width: 100%;
        table-layout: fixed;
    }

    .acces-table thead th[b-zfkcn82lwa] {
        white-space: normal;       /* les en-têtes peuvent passer sur 2 lignes */
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        padding: .3rem .1rem;
        font-size: 7px !important;
        letter-spacing: 0;
    }

    .acces-table tbody td[b-zfkcn82lwa] { padding: .35rem .1rem; }

    /* Bascules un peu plus compactes pour que toutes les colonnes tiennent */
    .acces-toggle[b-zfkcn82lwa] { width: 28px; height: 16px; }
    .acces-toggle-slider[b-zfkcn82lwa]::before { width: 12px; height: 12px; left: 2px; top: 2px; }
    .acces-toggle input:checked + .acces-toggle-slider[b-zfkcn82lwa]::before { transform: translateX(12px); }
}

/* ===== Accès : grille libellé + bascule ===== */
.acces-grille[b-zfkcn82lwa] {
    display: grid;
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
}

.acces-cell[b-zfkcn82lwa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .5rem .25rem;
    min-width: 0;
}

.acces-cell-label[b-zfkcn82lwa] {
    max-width: 100%;
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Mobile : 2 lignes, sans traits, police réduite ===== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .acces-grille[b-zfkcn82lwa] {
        grid-template-columns: repeat(var(--cols-mob, 3), minmax(0, 1fr));
        row-gap: .15rem;
        padding: .2rem .4rem .35rem;
    }

    .acces-cell[b-zfkcn82lwa] { padding: .3rem .1rem; gap: .3rem; }

    .acces-cell-label[b-zfkcn82lwa] {
        font-size: 8px;
        letter-spacing: 0;
    }

    .acces-toggle[b-zfkcn82lwa] { width: 30px; height: 17px; }
    .acces-toggle-slider[b-zfkcn82lwa]::before { width: 13px; height: 13px; left: 2px; top: 2px; }
    .acces-toggle input:checked + .acces-toggle-slider[b-zfkcn82lwa]::before { transform: translateX(13px); }
}

/* ===== Accès : 2 tableaux ===== */
.acces-tables[b-zfkcn82lwa] {
    display: flex;
    align-items: stretch;
}

/* Bureau : côte à côte, largeur proportionnelle au nombre de colonnes */
.acces-tables > .acces-scroll[b-zfkcn82lwa] {
    flex: var(--n, 1) 1 0;
    min-width: 0;
}

.acces-tables > .acces-scroll + .acces-scroll[b-zfkcn82lwa] {
    border-left: 1px solid #f3f4f6;
}

.acces-tables .acces-table[b-zfkcn82lwa] {
    min-width: 0 !important;
    width: 100%;
    table-layout: fixed;
}

/* ===== Mobile : 2 tableaux empilés, sans défilement ni traits ===== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .acces-tables[b-zfkcn82lwa] { flex-direction: column; padding-bottom: .25rem; }

    .acces-tables > .acces-scroll[b-zfkcn82lwa] {
        flex: none;
        overflow-x: visible;
    }

    .acces-tables > .acces-scroll + .acces-scroll[b-zfkcn82lwa] { border-left: none; }

    .acces-tables .acces-table thead th[b-zfkcn82lwa] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        padding: .3rem .1rem;
        font-size: 8px !important;
        letter-spacing: 0;
        border-bottom: none !important;
        border-left: none !important;
    }

    .acces-tables .acces-table tbody td[b-zfkcn82lwa] {
        padding: .25rem .1rem;
        border-left: none !important;
    }
}

/* ===== Accès : un tableau sur bureau, deux sur mobile ===== */
.acces-mobile[b-zfkcn82lwa] { display: none; }

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .acces-desktop[b-zfkcn82lwa] { display: none; }

    .acces-mobile[b-zfkcn82lwa] {
        display: flex;
        flex-direction: column;
        padding-bottom: .25rem;
    }

    .acces-mobile > .acces-scroll[b-zfkcn82lwa] { overflow-x: visible; }

    .acces-mobile .acces-table[b-zfkcn82lwa] {
        min-width: 0 !important;
        width: 100%;
        table-layout: fixed;
    }

    .acces-mobile .acces-table thead th[b-zfkcn82lwa] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        padding: .3rem .1rem;
        font-size: 8px !important;
        letter-spacing: 0;
        border-bottom: none !important;
        border-left: none !important;
    }

    .acces-mobile .acces-table tbody td[b-zfkcn82lwa] {
        padding: .25rem .1rem;
        border-left: none !important;
    }
}

/* ===== Mobile : 2 tableaux visuellement distincts ===== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .acces-mobile[b-zfkcn82lwa] {
        gap: .5rem;                   /* espace entre les 2 tableaux */
        padding: .5rem .5rem .6rem;
    }

    .acces-mobile > .acces-scroll[b-zfkcn82lwa] {
        border: 1px solid #e5e7eb;    /* cadre de chaque tableau */
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
    }

    .acces-mobile .acces-table thead th[b-zfkcn82lwa] {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb !important;
    }

    .acces-mobile .acces-table tbody td[b-zfkcn82lwa] {
        padding: .4rem .1rem;
    }
}
/* /Components/Pages/Preferences/AssistanceUtilisateurs.razor.rz.scp.css */
/* ===== Taille de police unique (ordinateur + mobile) : modifie ici pour agrandir/réduire ===== */
.assist-toolbar[b-umvl08s6hc],
.assist-flash[b-umvl08s6hc],
.assist-layout[b-umvl08s6hc],
.assist-etat[b-umvl08s6hc] {
    --as-fs: 12px;
    --as-fs-s: calc(var(--as-fs) - 1.5px);   /* courriel, puces, compteur */
    --as-fs-th: calc(var(--as-fs) - 2px);    /* entêtes de tableau */
}

/* ===== Boutons en haut à droite ===== */
.assist-toolbar[b-umvl08s6hc] {
    --as-fs: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.assist-btn[b-umvl08s6hc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.1rem;
    height: 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: var(--as-fs);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.assist-btn:active[b-umvl08s6hc] { transform: scale(0.97); }

.assist-btn.principal[b-umvl08s6hc] {
    background: #c92a2a;
    color: #fff;
    box-shadow: 0 2px 6px rgba(201, 42, 42, 0.3);
}
.assist-btn.principal:hover[b-umvl08s6hc] { background: #a61e1e; }

.assist-btn.secondaire[b-umvl08s6hc] {
    background: #fff;
    color: #1d1d1f;
    border-color: #d1d5db;
}
.assist-btn.secondaire:hover[b-umvl08s6hc] { background: #f5f5f7; border-color: #9ca3af; }

/* ===== Message après modification / suppression ===== */
.assist-flash[b-umvl08s6hc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.9rem;
    font-size: var(--as-fs);
    color: #216b45;
    background: rgba(48, 133, 79, .08);
    border: 1px solid rgba(48, 133, 79, .2);
    border-radius: 10px;
}

.assist-flash-close[b-umvl08s6hc] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

/* ===== Deux tableaux : 70 % / 30 % ===== */
.assist-layout[b-umvl08s6hc] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.assist-panel[b-umvl08s6hc] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.assist-panel-head[b-umvl08s6hc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.assist-panel-title[b-umvl08s6hc] {
    margin: 0;
    font-size: var(--as-fs);
    font-weight: 600;
}

.assist-count[b-umvl08s6hc] {
    font-size: var(--as-fs-s);
    color: #86868b;
}

/* ===== Tableaux compacts ===== */
.assist-table-wrap[b-umvl08s6hc] { overflow-x: auto; }

.assist-table[b-umvl08s6hc] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--as-fs);
}

.assist-table th[b-umvl08s6hc] {
    padding: 0.35rem 0.6rem;
    text-align: left;
    white-space: nowrap;
    font-size: var(--as-fs-th);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.assist-table td[b-umvl08s6hc] {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.assist-table tbody tr[b-umvl08s6hc] { cursor: pointer; }
.assist-table tbody tr:last-child td[b-umvl08s6hc] { border-bottom: none; }
.assist-table tbody tr:hover[b-umvl08s6hc],
.assist-table tbody tr.active[b-umvl08s6hc] { background: #fafafa; }

.assist-num[b-umvl08s6hc] { text-align: center; }

.assist-nom[b-umvl08s6hc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.assist-avatar[b-umvl08s6hc] {
    flex: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fbeaea;
    color: #c92a2a;
    font-size: var(--as-fs-s);
    font-weight: 700;
}

.assist-nom-txt[b-umvl08s6hc] { min-width: 0; }

.assist-nom-principal[b-umvl08s6hc] {
    font-weight: 500;
    line-height: 1.2;
}

.assist-mail[b-umvl08s6hc] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--as-fs-s);
    color: #86868b;
}

.assist-chip[b-umvl08s6hc] {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: var(--as-fs-s);
    white-space: nowrap;
}

.assist-muet[b-umvl08s6hc] { color: #a1a1a6; }

.assist-badge[b-umvl08s6hc] {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    font-size: var(--as-fs-s);
    font-weight: 600;
}

.assist-badge.ok[b-umvl08s6hc] { background: #dcfce7; color: #166534; }
.assist-badge.attente[b-umvl08s6hc] { background: #fef3c7; color: #92400e; }

/* ===== Boutons modifier / supprimer : visibles au survol ou après un clic sur la ligne ===== */
.assist-actions[b-umvl08s6hc] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.assist-icon[b-umvl08s6hc] {
    border: none;
    background: transparent;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    font-size: var(--as-fs);
    color: #6b7280;
    cursor: pointer;
    /* masqués mais l'espace reste réservé : la ligne ne bouge pas */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.assist-table tbody tr:hover .assist-icon[b-umvl08s6hc],
.assist-table tbody tr.active .assist-icon[b-umvl08s6hc],
.assist-table tbody tr:focus-within .assist-icon[b-umvl08s6hc] {
    opacity: 1;
    pointer-events: auto;
}

.assist-icon:hover[b-umvl08s6hc] { background: #f3f4f6; color: #111827; }
.assist-icon.danger:hover[b-umvl08s6hc] { background: #fef2f2; color: #b91c1c; }

/* ===== États : chargement, vide, erreur ===== */
.assist-vide[b-umvl08s6hc] {
    padding: 1rem;
    text-align: center;
    font-size: var(--as-fs);
    color: #86868b;
}

.assist-etat[b-umvl08s6hc] {
    padding: 1.5rem;
    text-align: center;
    font-size: var(--as-fs);
    color: #6b7280;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
}

.assist-etat.erreur[b-umvl08s6hc] {
    color: #b91c1c;
    border-color: #fca5a5;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : panneaux empilés
   (aucune taille de police ici : elle reste identique)
========================================================== */
@media (max-width: 1000px), (max-height: 500px) and (orientation: landscape) {

    .assist-layout[b-umvl08s6hc] {
        grid-template-columns: 1fr;
        gap: .5rem;
        margin-bottom: .5rem;
    }

    .assist-toolbar[b-umvl08s6hc] { margin: .4rem 0; gap: .4rem; }
    .assist-flash[b-umvl08s6hc] { padding: .4rem .6rem; }

    .assist-table-wrap[b-umvl08s6hc] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .assist-mail[b-umvl08s6hc] { max-width: 130px; }

    /* Icônes faciles à toucher */
    .assist-icon[b-umvl08s6hc] { padding: .3rem .45rem; }
}

/* /Components/Pages/Preferences/CalculUtilisateur.razor.rz.scp.css */
/* CalculUtilisateur : outil "Calcul" des préférences (onglets Installation / Intégration).
   Fichier autonome (isolation CSS Blazor) : chaque modèle s'affiche comme une carte
   "description" (entête = nom du modèle) sur une grille de 3 colonnes. */

.guide-header[b-an7u9vt5ye] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.guide-tabs[b-an7u9vt5ye] {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.3rem;
    background: #f5f5f7;
    border-radius: 10px;
}

.guide-tab[b-an7u9vt5ye] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6e6e73;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.guide-tab:hover[b-an7u9vt5ye] {
    color: #1d1d1f;
    background: rgba(255, 255, 255, 0.7);
}

.guide-tab:focus-visible[b-an7u9vt5ye] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, 0.25);
}

.guide-tab.active[b-an7u9vt5ye] {
    background: #fff;
    color: #c92a2a;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.guide-message[b-an7u9vt5ye] {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
}

.guide-message.erreur[b-an7u9vt5ye] { color: #b91c1c; }
.guide-message.succes[b-an7u9vt5ye] { color: #15803d; }

.guide-detail-vide[b-an7u9vt5ye] {
    padding: 1.25rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: #86868b;
}

/* ===== Grille 3 colonnes : chaque modèle = une carte "description" ===== */
.svc-grid-3[b-an7u9vt5ye] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

/* ===== Cartes ===== */
.svc-panel[b-an7u9vt5ye] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.svc-panel:hover[b-an7u9vt5ye] {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.svc-panel.sel[b-an7u9vt5ye] {
    border-color: #c92a2a;
    box-shadow: 0 0 0 1px #c92a2a;
}

.svc-head[b-an7u9vt5ye] {
    padding: 0.5rem 0.8rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.svc-head h4[b-an7u9vt5ye] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.svc-panel.sel .svc-head[b-an7u9vt5ye] {
    background: #fef2f2;
}

.svc-panel.sel .svc-head h4[b-an7u9vt5ye] {
    color: #c92a2a;
}

.svc-body[b-an7u9vt5ye] {
    max-height: min(60vh, 32rem);
    overflow: auto;
    padding: 0.75rem 0.9rem;
}

/* ===== Description du modèle ===== */
.calc-modele-desc[b-an7u9vt5ye] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #374151;
}

/* ==========================================================
   TABLETTE : 2 colonnes
========================================================== */
@media (max-width: 1100px) {
    .svc-grid-3[b-an7u9vt5ye] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : 1 colonne, police réduite
   Placé EN DERNIER pour l'emporter sur les règles de base.
========================================================== */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {

    .svc-grid-3[b-an7u9vt5ye] {
        grid-template-columns: 1fr;
        gap: .4rem;
    }

    .guide-header[b-an7u9vt5ye] { margin-bottom: .4rem; }
    .guide-message[b-an7u9vt5ye] { font-size: .66rem; margin-bottom: .4rem; }
    .guide-detail-vide[b-an7u9vt5ye] { font-size: .62rem; padding: .8rem .4rem; }

    /* Les onglets occupent toute la largeur */
    .guide-tabs[b-an7u9vt5ye] { display: flex; width: 100%; gap: .2rem; padding: .2rem; }
    .guide-tab[b-an7u9vt5ye] { flex: 1; justify-content: center; font-size: .66rem; padding: .25rem .6rem; }

    /* Cartes : s'adaptent à la description, sans hauteur forcée */
    .svc-panel[b-an7u9vt5ye] { border-radius: 10px; }
    .svc-head[b-an7u9vt5ye] { padding: .3rem .6rem; }
    .svc-head h4[b-an7u9vt5ye] { font-size: .68rem; }
    .svc-body[b-an7u9vt5ye] { max-height: none; padding: .45rem .6rem; }
    .calc-modele-desc[b-an7u9vt5ye] { font-size: .62rem; line-height: 1.45; }
}
/* /Components/Pages/Preferences/ContratUtilisateur.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   ContratUtilisateur : CSS scopé, autonome.
   Rien à lier dans App.razor : Blazor l'ajoute au build.
   ═══════════════════════════════════════════════ */

/* ===== 3 colonnes : Services / Clauses / Détail ===== */

.contrat-3col-layout[b-m88il5tdm5] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 0.7rem;
    align-items: start;
}

/* @media (max-width: 1100px) {
    .contrat-3col-layout { grid-template-columns: 1fr; }
} */

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : panneaux empilés, tailles normales
========================================================== */
@media (max-width: 1100px), (max-height: 500px) and (orientation: landscape) {

    .contrat-3col-layout[b-m88il5tdm5] {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    /* Chaque liste défile dans son cadre */
    .assist-table-wrap[b-m88il5tdm5] {
        max-height: 12rem;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .assist-table td[b-m88il5tdm5] { padding: .4rem .6rem; }
    .assist-icon[b-m88il5tdm5] { padding: .3rem .45rem; }

    .contrat-clauses-detail[b-m88il5tdm5] { min-height: 0; }

    .contrat-clause-form-actions[b-m88il5tdm5] { gap: .4rem; }
    .assist-btn[b-m88il5tdm5] { height: 28px; }
}

/* ===== Panneaux et tableaux ===== */

.assist-panel[b-m88il5tdm5] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.assist-panel-head[b-m88il5tdm5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.assist-panel-title[b-m88il5tdm5] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.assist-count[b-m88il5tdm5] { font-size: 0.72rem; color: #86868b; }

.assist-table-wrap[b-m88il5tdm5] { overflow-x: auto; }

.assist-table[b-m88il5tdm5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.assist-table th[b-m88il5tdm5] {
    padding: 0.35rem 0.6rem;
    text-align: left;
    white-space: nowrap;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.assist-table td[b-m88il5tdm5] {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.assist-table tbody tr:last-child td[b-m88il5tdm5] { border-bottom: none; }
.assist-table tbody tr:hover[b-m88il5tdm5] { background: #fafafa; cursor: pointer; }

.assist-table tbody tr.assist-row-active[b-m88il5tdm5] { background: #fdecec; }
.assist-table tbody tr.assist-row-active:hover[b-m88il5tdm5] { background: #fbe1e1; }
.assist-table tbody tr.assist-row-active td[b-m88il5tdm5] { color: #a61e1e; }

.assist-num[b-m88il5tdm5] { text-align: center; }

.assist-nom-principal[b-m88il5tdm5] { font-weight: 500; line-height: 1.2; }

.assist-chip[b-m88il5tdm5] {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 0.72rem;
    white-space: nowrap;
}

.assist-actions[b-m88il5tdm5] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.assist-icon[b-m88il5tdm5] {
    border: none;
    background: transparent;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.assist-icon:hover[b-m88il5tdm5] { background: #f3f4f6; color: #111827; }
.assist-icon.danger:hover[b-m88il5tdm5] { background: #fef2f2; color: #b91c1c; }
.assist-icon:disabled[b-m88il5tdm5] { opacity: 0.5; cursor: not-allowed; }

.assist-vide[b-m88il5tdm5] {
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #86868b;
}

.assist-etat[b-m88il5tdm5] {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
}

.assist-etat.erreur[b-m88il5tdm5] { color: #b91c1c; border-color: #fca5a5; }

/* ===== Panneau de détail de la clause ===== */

.contrat-clauses-detail[b-m88il5tdm5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 180px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
}

.contrat-clause-detail-titre[b-m88il5tdm5] {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #c92a2a;
}

.contrat-clause-detail-contenu[b-m88il5tdm5] {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #374151;
    white-space: pre-wrap;
}

/* ===== Formulaire d'édition d'une clause ===== */

.contrat-clause-form[b-m88il5tdm5] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contrat-clause-form-label[b-m88il5tdm5] {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #9ca3af;
}

.contrat-clause-input[b-m88il5tdm5],
.contrat-clause-textarea[b-m88il5tdm5] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    font-size: 0.76rem;
    box-sizing: border-box;
    resize: vertical;
    background: #fff;
}

.contrat-clause-input:focus[b-m88il5tdm5],
.contrat-clause-textarea:focus[b-m88il5tdm5] {
    outline: none;
    border-color: #c92a2a;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, 0.15);
}

.contrat-clause-erreur[b-m88il5tdm5] { margin: 0; font-size: 0.7rem; color: #b91c1c; }

.contrat-clause-form-actions[b-m88il5tdm5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.assist-btn[b-m88il5tdm5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.65rem;
    font-weight: 600;
    height: 25px;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.assist-btn:active[b-m88il5tdm5] { transform: scale(0.97); }
.assist-btn:disabled[b-m88il5tdm5] { opacity: 0.6; cursor: not-allowed; }
.assist-btn.principal[b-m88il5tdm5] { background: #c92a2a; color: #fff; box-shadow: 0 2px 6px rgba(201, 42, 42, 0.3); }
.assist-btn.principal:hover:not(:disabled)[b-m88il5tdm5] { background: #a61e1e; }
.assist-btn.secondaire[b-m88il5tdm5] { background: #fff; color: #1d1d1f; border-color: #d1d5db; }
.assist-btn.secondaire:hover:not(:disabled)[b-m88il5tdm5] { background: #f5f5f7; border-color: #9ca3af; }
/* /Components/Pages/Preferences/FiltreAssistant.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   FiltreAssistant : CSS scopé, autonome.
   Rien à lier dans App.razor : Blazor l'ajoute au build.
   ═══════════════════════════════════════════════ */

.filtre-message[b-86sikgitth] { margin: 0 0 0.5rem; font-size: 0.78rem; }
.filtre-message.erreur[b-86sikgitth] { color: #b91c1c; }
.filtre-message.succes[b-86sikgitth] { color: #15803d; }

.filtre-vide[b-86sikgitth] {
    padding: 0.9rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: #86868b;
}

/* ===== Deux colonnes : critères (30 %) / matrice (70 %) ===== */
.filtre-cols[b-86sikgitth] {
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    gap: 1rem;
    align-items: start;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : critères au-dessus, matrice dessous
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .filtre-cols[b-86sikgitth] {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    /* La matrice défile horizontalement dans son cadre */
    .filtre-scroll-x[b-86sikgitth] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filtre-table-compact tbody td[b-86sikgitth] { padding: .4rem .7rem; }

    /* Bascules plus faciles à toucher */
    .filtre-toggle[b-86sikgitth] { width: 34px; height: 20px; }
    .filtre-toggle-slider[b-86sikgitth]::before { height: 14px; width: 14px; }
    .filtre-toggle input:checked + .filtre-toggle-slider[b-86sikgitth]::before { transform: translateX(14px); }
}

.filtre-panel[b-86sikgitth] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.filtre-body-table[b-86sikgitth] { padding: 0; }
.filtre-scroll-x[b-86sikgitth] { overflow-x: auto; }

.filtre-table-compact thead th[b-86sikgitth],
.filtre-table thead th[b-86sikgitth] {
    padding: 0.35rem 0.7rem;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

/* ----- Liste des critères (gauche) ----- */
.filtre-table-compact[b-86sikgitth] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.filtre-table-compact thead th[b-86sikgitth] { text-align: left; }

.filtre-table-compact tbody td[b-86sikgitth] {
    padding: 0.3rem 0.7rem;
    line-height: 1.25;
    border-bottom: 1px solid #f3f4f6;
    color: #1d1d1f;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.filtre-table-compact tbody tr:last-child td[b-86sikgitth] { border-bottom: none; }
.filtre-table-compact tbody tr:hover td[b-86sikgitth] { background: #fafafa; }

.filtre-table-compact tbody tr.assist-row-active td[b-86sikgitth] {
    background: #fef2f2;
    color: #c92a2a;
    font-weight: 600;
}

.filtre-table-compact tbody tr.assist-row-active td:first-child[b-86sikgitth] {
    box-shadow: inset 3px 0 0 #c92a2a;
}

/* ----- Matrice de bascules (droite) ----- */
.filtre-table[b-86sikgitth] { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.8rem; }

.filtre-table thead th[b-86sikgitth] {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filtre-table tbody td[b-86sikgitth] {
    padding: 0.3rem 0.5rem;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
}

.filtre-table tbody td + td[b-86sikgitth],
.filtre-table thead th + th[b-86sikgitth] { border-left: 1px solid #f3f4f6; }

.filtre-toggle[b-86sikgitth] {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 18px;
    vertical-align: middle;
}

.filtre-toggle input[b-86sikgitth] { opacity: 0; width: 0; height: 0; }

.filtre-toggle-slider[b-86sikgitth] {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.filtre-toggle-slider[b-86sikgitth]::before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.filtre-toggle input:checked + .filtre-toggle-slider[b-86sikgitth] { background: #c92a2a; }
.filtre-toggle input:checked + .filtre-toggle-slider[b-86sikgitth]::before { transform: translateX(12px); }
.filtre-toggle.busy .filtre-toggle-slider[b-86sikgitth] { opacity: 0.5; cursor: wait; }
/* /Components/Pages/Preferences/FiltreUtilisateur.razor.rz.scp.css */
/* FiltreUtilisateur : Groupes (15 %) / Utilisateurs (20 %) / Tâches assignées (65 %). */

.filtre-vide[b-uh0h89n60h] {
    padding: 0.9rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: #86868b;
}

.filtre-vide.erreur[b-uh0h89n60h] { color: #b91c1c; }

.filtre-cols[b-uh0h89n60h] {
    display: grid;
    grid-template-columns: 15fr 20fr 65fr;
    gap: 0.7rem;
    align-items: start;
}
/* 
@media (max-width: 1000px) {
    .filtre-cols { grid-template-columns: 1fr; }
} */

.filtre-panel[b-uh0h89n60h] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.filtre-head[b-uh0h89n60h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.filtre-head h4[b-uh0h89n60h] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filtre-count[b-uh0h89n60h] { font-size: 0.7rem; color: #86868b; flex: none; }

.filtre-scroll[b-uh0h89n60h] { overflow: auto; max-height: 22rem; }

.filtre-table-liste[b-uh0h89n60h],
.filtre-table-taches[b-uh0h89n60h] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.filtre-table-taches thead th[b-uh0h89n60h] {
    padding: 0.35rem 0.6rem;
    text-align: left;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.filtre-table-liste tbody td[b-uh0h89n60h],
.filtre-table-taches tbody td[b-uh0h89n60h] {
    padding: 0.3rem 0.6rem;
    line-height: 1.3;
    border-bottom: 1px solid #f3f4f6;
    color: #1d1d1f;
}

.filtre-table-liste tbody tr:last-child td[b-uh0h89n60h],
.filtre-table-taches tbody tr:last-child td[b-uh0h89n60h] { border-bottom: none; }

.filtre-table-liste tbody tr[b-uh0h89n60h] {
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.filtre-table-liste tbody tr:hover td[b-uh0h89n60h] { background: #fafafa; }

.filtre-row-active td[b-uh0h89n60h] {
    background: #fef2f2 !important;
    color: #c92a2a;
    font-weight: 600;
}

.filtre-row-active td:first-child[b-uh0h89n60h] { box-shadow: inset 3px 0 0 #c92a2a; }

.filtre-nom[b-uh0h89n60h] { display: block; font-weight: 500; line-height: 1.25; }

.filtre-desc[b-uh0h89n60h] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.7rem;
    color: #86868b;
    line-height: 1.35;
}

.filtre-chip[b-uh0h89n60h] {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 0.68rem;
    color: #6b7280;
    white-space: nowrap;
}

.filtre-actions[b-uh0h89n60h] { width: 1%; white-space: nowrap; text-align: right; }

.filtre-icon[b-uh0h89n60h] {
    border: none;
    background: transparent;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.filtre-icon:hover:not(:disabled)[b-uh0h89n60h] { background: #f3f4f6; color: #111827; }
.filtre-icon.danger:hover:not(:disabled)[b-uh0h89n60h] { background: #fef2f2; color: #b91c1c; }
.filtre-icon:disabled[b-uh0h89n60h] { opacity: 0.5; cursor: not-allowed; }

/* ===== Formulaire d'ajout de tâche ===== */
.filtre-form[b-uh0h89n60h] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.7rem;
}

.filtre-form-label[b-uh0h89n60h] {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #9ca3af;
}

.filtre-input[b-uh0h89n60h], .filtre-textarea[b-uh0h89n60h] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    font-size: 0.76rem;
    box-sizing: border-box;
    resize: vertical;
    background: #fff;
}

.filtre-input:focus[b-uh0h89n60h], .filtre-textarea:focus[b-uh0h89n60h] {
    outline: none;
    border-color: #c92a2a;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, 0.15);
}

.filtre-erreur[b-uh0h89n60h] { margin: 0; font-size: 0.7rem; color: #b91c1c; }

.filtre-form-actions[b-uh0h89n60h] {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.filtre-btn[b-uh0h89n60h] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    height: 25px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.filtre-btn.principal[b-uh0h89n60h] { background: #c92a2a; color: #fff; }
.filtre-btn.principal:hover:not(:disabled)[b-uh0h89n60h] { background: #a61e1e; }
.filtre-btn.secondaire[b-uh0h89n60h] { background: #fff; color: #1d1d1f; border-color: #d1d5db; }
.filtre-btn.secondaire:hover:not(:disabled)[b-uh0h89n60h] { background: #f5f5f7; border-color: #9ca3af; }
.filtre-btn:disabled[b-uh0h89n60h] { opacity: 0.6; cursor: not-allowed; }

.filtre-cible[b-uh0h89n60h] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.15rem 0 0.3rem;
}

.filtre-radio-option[b-uh0h89n60h] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    color: #1d1d1f;
    cursor: pointer;
}

.filtre-radio-option input[type="radio"][b-uh0h89n60h] {
    accent-color: #c92a2a;
    margin: 0;
}

.filtre-radio-disabled[b-uh0h89n60h] {
    color: #9ca3af;
    cursor: not-allowed;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : panneaux empilés, tailles normales
========================================================== */
@media (max-width: 1000px), (max-height: 500px) and (orientation: landscape) {

    .filtre-cols[b-uh0h89n60h] {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    /* Chaque liste défile dans son cadre */
    .filtre-scroll[b-uh0h89n60h] { max-height: 12rem; }

    /* Zones de touche confortables */
    .filtre-table-liste tbody td[b-uh0h89n60h],
    .filtre-table-taches tbody td[b-uh0h89n60h] { padding: .4rem .6rem; }

    .filtre-form[b-uh0h89n60h] { padding: .5rem; }

    .filtre-btn[b-uh0h89n60h] { height: 28px; }
}

@media (max-width: 900px) {
    .filtre-input[b-uh0h89n60h],
    .filtre-textarea[b-uh0h89n60h] { padding: .35rem .5rem; }
}
/* /Components/Pages/Preferences/GuideUtilisateur.razor.rz.scp.css */
/* Guide : onglets Villes / Programmes — style Apple, épuré et compact.
   Autonome : n'utilise que des classes guide-* (aucune dépendance à svc-* ou pref-sk). */

.guide[b-2z3t8rfwc2] {
    --g-text: #1d1d1f;
    --g-muted: #86868b;
    --g-line: rgba(0, 0, 0, 0.08);
    --g-fill: #f5f5f7;
    --g-accent: #c92a2a;
    --g-accent-soft: rgba(201, 42, 42, 0.07);

    /* Espace occupé au-dessus des cadres (en-tête de page, profils, onglets).
       La hauteur maximale des cadres = écran - cette valeur (ordinateur seulement).
       Augmentez si la page défile encore, diminuez pour autoriser des cadres plus hauts. */
    --guide-offset: 22rem;

    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    color: var(--g-text);
    font-size: 0.78rem;
    -webkit-font-smoothing: antialiased;
}

/* ===== En-tête : onglets à gauche, bouton d'ajout à droite ===== */
.guide-header[b-2z3t8rfwc2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

/* Contrôle segmenté */
.guide-tabs[b-2z3t8rfwc2] {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: rgba(118, 118, 128, 0.12);
    border-radius: 9px;
}

.guide-tab[b-2z3t8rfwc2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.8rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--g-text);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.guide-tab:hover:not(.active)[b-2z3t8rfwc2] {
    color: var(--g-accent);
}

.guide-tab:focus-visible[b-2z3t8rfwc2] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, 0.3);
}

.guide-tab.active[b-2z3t8rfwc2] {
    background: #fff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.guide-count[b-2z3t8rfwc2] {
    min-width: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--g-muted);
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.1rem;
    text-align: center;
}

.guide-tab.active .guide-count[b-2z3t8rfwc2] {
    background: var(--g-accent-soft);
    color: var(--g-accent);
}

/* Bouton d'ajout */
.guide-add[b-2z3t8rfwc2] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 26px;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 999px;
    background: var(--g-accent);
    color: #fff;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.guide-add:hover[b-2z3t8rfwc2] { opacity: 0.9; }
.guide-add:active[b-2z3t8rfwc2] { transform: scale(0.96); }
.guide-add:focus-visible[b-2z3t8rfwc2] { outline: none; box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.3); }

/* ===== Messages ===== */
.guide-message[b-2z3t8rfwc2] {
    margin: 0 0 0.6rem;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-size: 0.74rem;
}

.guide-message.erreur[b-2z3t8rfwc2] { background: #fef2f2; color: #b91c1c; }
.guide-message.succes[b-2z3t8rfwc2] { background: #f0fdf4; color: #15803d; }

/* ===== Mise en page 3 cadres =====
   Chaque cadre a la hauteur de son contenu, plafonnée (voir .guide-panel). */
.guide-villes-layout[b-2z3t8rfwc2],
.guide-programmes-layout[b-2z3t8rfwc2] {
    display: grid;
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 0.5rem;
}

.guide-villes-layout[b-2z3t8rfwc2] { grid-template-columns: minmax(0, 40fr) minmax(0, 30fr) minmax(0, 30fr); }
.guide-programmes-layout[b-2z3t8rfwc2] { grid-template-columns: minmax(0, 50fr) minmax(0, 30fr) minmax(0, 20fr); }

/* ===== Cadres ===== */
.guide-panel[b-2z3t8rfwc2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-height: calc(100dvh - var(--guide-offset));
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.guide-panel-head[b-2z3t8rfwc2] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.guide-panel-title[b-2z3t8rfwc2] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.guide-panel-count[b-2z3t8rfwc2] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    color: var(--g-muted);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Corps des cadres de droite : hauteur du contenu, défile au-delà du plafond */
.guide-panel-body[b-2z3t8rfwc2] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.6rem 0.8rem;
}

/* ===== Tableau (gauche) : colonnes flexibles, hauteur du contenu, défile au-delà du plafond ===== */
.guide-table-wrap[b-2z3t8rfwc2] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.guide-table[b-2z3t8rfwc2] {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

.guide-table thead th[b-2z3t8rfwc2] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.35rem 0.7rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: var(--g-muted);
    font-size: 0.62rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

.guide-table tbody td[b-2z3t8rfwc2] {
    padding: 0.3rem 0.7rem;
    border-bottom: 0.5px solid var(--g-line);
    vertical-align: middle;
    font-size: 0.68rem;
}

.guide-table tbody tr:last-child td[b-2z3t8rfwc2] { border-bottom: 0; }

/* Colonne flexible : prend l'espace restant, le texte revient à la ligne */
.guide-complet[b-2z3t8rfwc2] {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Colonnes ajustées à leur contenu : largeur minimale, une seule ligne, texte toujours visible */
.guide-fit[b-2z3t8rfwc2] {
    width: 1%;
    white-space: nowrap;
}

.guide-nom[b-2z3t8rfwc2] { font-weight: 500; }

.guide-vide[b-2z3t8rfwc2] {
    padding: 1.75rem 0.7rem !important;
    text-align: center;
    color: var(--g-muted);
    white-space: normal;
}

/* Lignes sélectionnables */
.guide-row[b-2z3t8rfwc2] { cursor: pointer; transition: background 0.12s ease; }
.guide-row:hover[b-2z3t8rfwc2] { background: var(--g-fill); }
.guide-row.selected[b-2z3t8rfwc2] { background: var(--g-accent-soft); }
.guide-row.selected:hover[b-2z3t8rfwc2] { background: rgba(201, 42, 42, 0.1); }

/* Actions */
.guide-act[b-2z3t8rfwc2] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.guide-ico[b-2z3t8rfwc2] {
    border: 0;
    background: transparent;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    color: var(--g-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.guide-ico:hover[b-2z3t8rfwc2] { background: rgba(0, 0, 0, 0.06); color: var(--g-text); }
.guide-ico.danger:hover[b-2z3t8rfwc2] { background: #fef2f2; color: #b91c1c; }
.guide-ico:active[b-2z3t8rfwc2] { transform: scale(0.94); }
.guide-ico:focus-visible[b-2z3t8rfwc2] { outline: none; box-shadow: 0 0 0 2px rgba(201, 42, 42, 0.3); }

/* Boutons du tableau : visibles seulement au survol de la ligne (la place reste réservée) */
.guide-table .guide-ico[b-2z3t8rfwc2] {
    opacity: 0;
}

.guide-row:hover .guide-ico[b-2z3t8rfwc2],
.guide-row:focus-within .guide-ico[b-2z3t8rfwc2] {
    opacity: 1;
}

/* ===== Contenu des cadres de détail ===== */
.guide-detail-vide[b-2z3t8rfwc2] {
    padding: 1.1rem 0.4rem;
    text-align: center;
    color: var(--g-muted);
    font-size: 0.66rem;
}

.guide-detail-section + .guide-detail-section[b-2z3t8rfwc2] {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 0.5px solid var(--g-line);
}

.guide-detail-titre[b-2z3t8rfwc2] {
    margin: 0 0 0.35rem;
    color: var(--g-accent);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.guide-detail-liste[b-2z3t8rfwc2] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.guide-detail-ligne[b-2z3t8rfwc2] {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.62rem;
    line-height: 1.3;
}

.guide-detail-ligne dt[b-2z3t8rfwc2] {
    flex: none;
    max-width: 60%;
    color: var(--g-muted);
}

.guide-detail-ligne dd[b-2z3t8rfwc2] {
    margin: 0;
    font-weight: 500;
    text-align: right;
    overflow-wrap: anywhere;
}

.guide-liste-simple[b-2z3t8rfwc2] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.62rem;
}

.guide-liste-item[b-2z3t8rfwc2] { line-height: 1.4; }
.guide-liste-item[b-2z3t8rfwc2]::marker { color: var(--g-muted); }

/* ===== Squelettes ===== */
.guide-sk[b-2z3t8rfwc2] {
    display: block;
    position: relative;
    overflow: hidden;
    background: #ececef;
    border-radius: 6px;
}

.guide-sk[b-2z3t8rfwc2]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    transform: translateX(-100%);
    animation: guide-shine-b-2z3t8rfwc2 1.3s infinite;
}

@keyframes guide-shine-b-2z3t8rfwc2 {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .guide-sk[b-2z3t8rfwc2]::after { animation: none; }
}

.guide-sk-cell[b-2z3t8rfwc2] { height: 0.6rem; }

/* Tableau : largeurs fixes en rem (les % n'ont pas de référence avec table-layout: auto) */
.guide-sk-tr .guide-sk-cell[b-2z3t8rfwc2] { width: 4rem; }
.guide-sk-tr td:nth-child(1) .guide-sk-cell[b-2z3t8rfwc2] { width: 9rem; max-width: 90%; }
.guide-sk-tr td:nth-child(2) .guide-sk-cell[b-2z3t8rfwc2] { width: 5rem; }
.guide-sk-tr td:nth-child(5) .guide-sk-cell[b-2z3t8rfwc2] { width: 2.5rem; }
.guide-sk-line[b-2z3t8rfwc2] { height: 0.6rem; margin: 0.55rem 0; }
.guide-sk-title[b-2z3t8rfwc2] { height: 0.75rem; width: 40%; margin: 0.2rem 0 0.7rem; }

.guide-sk.w40[b-2z3t8rfwc2] { width: 40%; }
.guide-sk.w50[b-2z3t8rfwc2] { width: 50%; }
.guide-sk.w60[b-2z3t8rfwc2] { width: 60%; }
.guide-sk.w70[b-2z3t8rfwc2] { width: 70%; }
.guide-sk.w80[b-2z3t8rfwc2] { width: 80%; }
.guide-sk.w90[b-2z3t8rfwc2] { width: 90%; }

.guide-sk-tr:hover[b-2z3t8rfwc2] { background: transparent; }

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : cadres empilés, très compact
   Placé EN DERNIER pour l'emporter sur les règles de base.
========================================================== */
@media (max-width: 1100px), (max-height: 500px) and (orientation: landscape) {

    .guide-villes-layout[b-2z3t8rfwc2],
    .guide-programmes-layout[b-2z3t8rfwc2] {
        grid-template-columns: 1fr;
        gap: .4rem;
        margin-bottom: .3rem;
    }

    .guide-panel[b-2z3t8rfwc2] { max-height: min(50dvh, 22rem); border-radius: 10px; }

    /* Onglets sur toute la largeur, bouton d'ajout dessous */
    .guide-header[b-2z3t8rfwc2] { flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
    .guide-tabs[b-2z3t8rfwc2] { display: flex; flex: 1 1 100%; }
    .guide-tab[b-2z3t8rfwc2] { flex: 1; justify-content: center; font-size: .64rem; padding: .18rem .5rem; }
    .guide-count[b-2z3t8rfwc2] { font-size: .54rem; line-height: 1rem; }
    .guide-add[b-2z3t8rfwc2] { height: 22px; margin-left: auto; padding: 0 .65rem; font-size: .6rem; gap: .25rem; }
    .guide-message[b-2z3t8rfwc2] { font-size: .64rem; padding: .3rem .5rem; margin-bottom: .4rem; }

    /* En-têtes des cadres */
    .guide-panel-head[b-2z3t8rfwc2] { padding: .3rem .6rem; }
    .guide-panel-title[b-2z3t8rfwc2] { font-size: .68rem; }
    .guide-panel-count[b-2z3t8rfwc2] { font-size: .58rem; }
    .guide-panel-body[b-2z3t8rfwc2] { padding: .4rem .6rem; }

    /* Tableaux : toute la largeur du téléphone, aucun défilement latéral.
       Les colonnes courtes gardent leur largeur ; la colonne du nom prend le reste
       (« … » si le nom est trop long, le nom complet reste dans l'info-bulle). */
    .guide-table-wrap[b-2z3t8rfwc2] {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .guide-table[b-2z3t8rfwc2] { width: 100%; min-width: 0; }

    .guide-table thead th[b-2z3t8rfwc2],
    .guide-table tbody td[b-2z3t8rfwc2] { white-space: nowrap; }

    .guide-complet[b-2z3t8rfwc2] {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-wrap: normal;
    }

    /* Lignes basses */
    .guide-table thead th[b-2z3t8rfwc2] { font-size: .52rem; padding: .2rem .35rem; }
    .guide-table tbody td[b-2z3t8rfwc2] { font-size: .58rem; padding: .14rem .35rem; line-height: 1.15; }

    /* Boutons d'action petits */
    .guide-ico[b-2z3t8rfwc2] { padding: .1rem .22rem; font-size: .66rem; line-height: 1; }
    .guide-act[b-2z3t8rfwc2] { padding-left: .1rem; padding-right: .25rem; }

    /* Cadres de détail */
    .guide-detail-vide[b-2z3t8rfwc2] { font-size: .56rem; padding: .7rem .3rem; }
    .guide-detail-titre[b-2z3t8rfwc2] { font-size: .48rem; }
    .guide-detail-ligne[b-2z3t8rfwc2],
    .guide-liste-simple[b-2z3t8rfwc2] { font-size: .54rem; }
    .guide-detail-liste[b-2z3t8rfwc2] { gap: .1rem; }
    .guide-liste-simple[b-2z3t8rfwc2] { gap: .15rem; }
    .guide-detail-section + .guide-detail-section[b-2z3t8rfwc2] { margin-top: .45rem; padding-top: .45rem; }
}
/* /Components/Pages/Preferences/InfoPreferences.razor.rz.scp.css */

/* ═══════════════════════════════════════════════
   COMMUN : design des tableaux (Assistance, Contrat,
   Processus, et tout futur tableau), formulaire
   clause/tâche, état vide
   ═══════════════════════════════════════════════ */

.assist-toolbar[b-a2e8um99b9] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.assist-btn[b-a2e8um99b9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.65rem;
    font-weight: 600;
    height: 25px;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.assist-btn:active[b-a2e8um99b9] { transform: scale(0.97); }
.assist-btn.principal[b-a2e8um99b9] { background: #c92a2a; color: #fff; box-shadow: 0 2px 6px rgba(201, 42, 42, 0.3); }
.assist-btn.principal:hover[b-a2e8um99b9] { background: #a61e1e; }
.assist-btn.secondaire[b-a2e8um99b9] { background: #fff; color: #1d1d1f; border-color: #d1d5db; }
.assist-btn.secondaire:hover[b-a2e8um99b9] { background: #f5f5f7; border-color: #9ca3af; }

.assist-flash[b-a2e8um99b9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
    color: #216b45;
    background: rgba(48, 133, 79, .08);
    border: 1px solid rgba(48, 133, 79, .2);
    border-radius: 10px;
}

.assist-flash-close[b-a2e8um99b9] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.assist-layout[b-a2e8um99b9] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

@media (max-width: 1000px) {
    .assist-layout[b-a2e8um99b9] { grid-template-columns: 1fr; }
}

.assist-panel[b-a2e8um99b9] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.assist-panel-head[b-a2e8um99b9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.assist-panel-title[b-a2e8um99b9] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.assist-count[b-a2e8um99b9] { font-size: 0.72rem; color: #86868b; }

.assist-table-wrap[b-a2e8um99b9] { overflow-x: auto; }

.assist-table[b-a2e8um99b9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.assist-table th[b-a2e8um99b9] {
    padding: 0.35rem 0.6rem;
    text-align: left;
    white-space: nowrap;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.assist-table td[b-a2e8um99b9] {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.assist-table tbody tr:last-child td[b-a2e8um99b9] { border-bottom: none; }
.assist-table tbody tr:hover[b-a2e8um99b9] { background: #fafafa; cursor: pointer; }

/* Ligne sélectionnée (service / clause / tâche actifs) */
.assist-table tbody tr.assist-row-active[b-a2e8um99b9] { background: #fdecec; }
.assist-table tbody tr.assist-row-active:hover[b-a2e8um99b9] { background: #fbe1e1; }
.assist-table tbody tr.assist-row-active td[b-a2e8um99b9] { color: #a61e1e; }

.assist-num[b-a2e8um99b9] { text-align: center; }

.assist-nom[b-a2e8um99b9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.assist-avatar[b-a2e8um99b9] {
    flex: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fbeaea;
    color: #c92a2a;
    font-size: 0.72rem;
    font-weight: 700;
}

.assist-nom-txt[b-a2e8um99b9] { min-width: 0; }

.assist-nom-principal[b-a2e8um99b9] { font-weight: 500; line-height: 1.2; }

.assist-mail[b-a2e8um99b9] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
    color: #86868b;
}

.assist-chip[b-a2e8um99b9] {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 0.72rem;
    white-space: nowrap;
}

.assist-muet[b-a2e8um99b9] { color: #a1a1a6; }

.assist-badge[b-a2e8um99b9] {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.assist-badge.ok[b-a2e8um99b9] { background: #dcfce7; color: #166534; }
.assist-badge.attente[b-a2e8um99b9] { background: #fef3c7; color: #92400e; }

.assist-actions[b-a2e8um99b9] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.assist-icon[b-a2e8um99b9] {
    border: none;
    background: transparent;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.assist-icon:hover[b-a2e8um99b9] { background: #f3f4f6; color: #111827; }
.assist-icon.danger:hover[b-a2e8um99b9] { background: #fef2f2; color: #b91c1c; }
.assist-icon:disabled[b-a2e8um99b9] { opacity: 0.5; cursor: not-allowed; }

.assist-vide[b-a2e8um99b9] {
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #86868b;
}

.assist-etat[b-a2e8um99b9] {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
}

.assist-etat.erreur[b-a2e8um99b9] { color: #b91c1c; border-color: #fca5a5; }

/* ===== Formulaire d'édition (clause du Contrat + tâche du Processus) ===== */

.contrat-clause-form[b-a2e8um99b9] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contrat-clause-form-label[b-a2e8um99b9] {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #9ca3af;
}

.contrat-clause-input[b-a2e8um99b9],
.contrat-clause-textarea[b-a2e8um99b9] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    font-size: 0.76rem;
    box-sizing: border-box;
    resize: vertical;
    background: #fff;
}

.contrat-clause-input:focus[b-a2e8um99b9],
.contrat-clause-textarea:focus[b-a2e8um99b9] {
    outline: none;
    border-color: #c92a2a;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, 0.15);
}

.contrat-clause-erreur[b-a2e8um99b9] {
    margin: 0;
    font-size: 0.7rem;
    color: #b91c1c;
}

.contrat-clause-form-hint[b-a2e8um99b9] {
    font-size: 0.66rem;
    color: #9ca3af;
    margin-top: -0.15rem;
}

.contrat-clause-form-actions[b-a2e8um99b9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

/* ===== État vide (aucun outil sélectionné) ===== */

.empty-preferences[b-a2e8um99b9] {
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #9ca3af;
}
/* /Components/Pages/Preferences/LangueUtilisateur.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   Langue : choix de la langue
   ═══════════════════════════════════════════════ */

.lang-section[b-xrcq9oc0ji] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.lang-cols[b-xrcq9oc0ji] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.lang-panel[b-xrcq9oc0ji] {
    flex: 0 0 200px;
    max-width: 200px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.lang-panel-head[b-xrcq9oc0ji] {
    padding: 0.5rem 0.7rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.lang-panel-head h4[b-xrcq9oc0ji] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
}

.lang-table[b-xrcq9oc0ji] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.lang-table tbody td[b-xrcq9oc0ji] {
    padding: 0.3rem 0.6rem;
    line-height: 1.3;
    border-bottom: 1px solid #f3f4f6;
    color: #1d1d1f;
}

.lang-table tbody tr:last-child td[b-xrcq9oc0ji] { border-bottom: none; }

.lang-table tbody tr[b-xrcq9oc0ji] {
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.lang-table tbody tr:hover td[b-xrcq9oc0ji] { background: #fafafa; }

.lang-row-active td[b-xrcq9oc0ji] {
    background: #fef2f2 !important;
    color: #c92a2a;
    font-weight: 600;
}

.lang-row-active td:first-child[b-xrcq9oc0ji] { box-shadow: inset 3px 0 0 #c92a2a; }

.lang-row-active i[b-xrcq9oc0ji] { margin-right: 0.3rem; }

.lang-row-indispo td[b-xrcq9oc0ji] {
    color: #9ca3af;
    cursor: not-allowed;
}

.lang-message[b-xrcq9oc0ji] { font-size: 0.72rem; }
.lang-message.erreur[b-xrcq9oc0ji] { color: #b91c1c; }
.lang-message.succes[b-xrcq9oc0ji] { color: #15803d; }

/* ===== Responsive ===== */

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : Langue miniaturisé
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .lang-section[b-xrcq9oc0ji] { gap: .25rem; }

    .lang-cols[b-xrcq9oc0ji] {
        gap: .3rem;
        flex-wrap: nowrap;          /* les 3 panneaux restent sur une ligne */
    }

    .lang-panel[b-xrcq9oc0ji] {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        border-radius: 8px;
    }

    .lang-panel-head[b-xrcq9oc0ji] { padding: .2rem .35rem; }
    .lang-panel-head h4[b-xrcq9oc0ji] { font-size: .7rem; }

    .lang-table[b-xrcq9oc0ji] { font-size: .6rem; }

    .lang-table tbody td[b-xrcq9oc0ji] {
        padding: .22rem .3rem;
        line-height: 1.2;
    }

    .lang-row-active td:first-child[b-xrcq9oc0ji] { box-shadow: inset 2px 0 0 #c92a2a; }
    .lang-row-active i[b-xrcq9oc0ji] { margin-right: .15rem; font-size: .7rem; }

    .lang-message[b-xrcq9oc0ji] { font-size: .6rem; }

    /* Squelette */
    .lang-sk-titre[b-xrcq9oc0ji] { height: 8px; }
    .lang-sk-ligne[b-xrcq9oc0ji] { height: 7px; margin: 1px 0; }
}

/* Très petits écrans : les panneaux passent l'un sous l'autre */
@media (max-width: 420px) {
    .lang-cols[b-xrcq9oc0ji] { flex-wrap: wrap; }

    .lang-panel[b-xrcq9oc0ji] {
        flex: 1 1 100%;
    }
}
/* Squelette de LangueUtilisateur : barre dans une ligne du tableau des langues.
   À ajouter dans le fichier qui contient déjà .lang-table, après ses règles. */

.lang-table .lang-sk-line[b-xrcq9oc0ji] {
    margin: 0;
    height: 12px;
}
/* Squelette de LangueUtilisateur : autonome (ne dépend pas des classes pref-sk-*).
   À ajouter dans le fichier qui contient déjà .lang-table, après ses règles. */

.lang-sk[b-xrcq9oc0ji] {
    display: block;
    border-radius: 4px;
    background: linear-gradient(90deg, #eceef1 25%, #f6f7f9 37%, #eceef1 63%);
    background-size: 400% 100%;
    animation: lang-sk-anim-b-xrcq9oc0ji 1.2s ease infinite;
}

/* Titre du panneau (Europe / Asie / Moyen-Orient) */
.lang-sk-titre[b-xrcq9oc0ji] {
    width: 45%;
    height: 14px;
    margin: 2px 0;
}

/* Barre dans une ligne du tableau : la hauteur de la ligne vient du td, comme pour une vraie langue */
.lang-sk-ligne[b-xrcq9oc0ji] {
    height: 12px;
    margin: 2px 0;
}

@keyframes lang-sk-anim-b-xrcq9oc0ji {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .lang-sk[b-xrcq9oc0ji] { animation: none; }
}
/* /Components/Pages/Preferences/MatriceUtilisateur.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   Messagerie / Admin : matrice critère x colonne
   (même design que l'outil Filtre)

   Si ces règles .filtre-* sont déjà chargées par le CSS de
   FiltreUtilisateur, ne gardez ce fichier qu'une fois :
   supprimez-le ici ou dans l'autre.
   ═══════════════════════════════════════════════ */

.filtre-message[b-rxfouepvnr] { margin: 0 0 0.5rem; font-size: 0.78rem; }
.filtre-message.erreur[b-rxfouepvnr] { color: #b91c1c; }
.filtre-message.succes[b-rxfouepvnr] { color: #15803d; }

.filtre-vide[b-rxfouepvnr] {
    padding: 0.9rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: #86868b;
}

.filtre-cols[b-rxfouepvnr] {
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    gap: 1rem;
    align-items: start;
}

.filtre-panel[b-rxfouepvnr] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.filtre-head[b-rxfouepvnr] {
    padding: 0.5rem 0.8rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.filtre-head h4[b-rxfouepvnr] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.filtre-body-table[b-rxfouepvnr] { padding: 0; }
.filtre-scroll-x[b-rxfouepvnr] { overflow-x: auto; }

.filtre-table-compact thead th[b-rxfouepvnr],
.filtre-table thead th[b-rxfouepvnr] {
    padding: 0.35rem 0.7rem;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.filtre-table-compact[b-rxfouepvnr] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.filtre-table-compact thead th[b-rxfouepvnr] { text-align: left; }

.filtre-table-compact tbody td[b-rxfouepvnr] {
    padding: 0.3rem 0.7rem;
    line-height: 1.25;
    border-bottom: 1px solid #f3f4f6;
    color: #1d1d1f;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.filtre-table-compact tbody tr:last-child td[b-rxfouepvnr] { border-bottom: none; }
.filtre-table-compact tbody tr:hover td[b-rxfouepvnr] { background: #fafafa; }

.filtre-table-compact tbody tr.assist-row-active td[b-rxfouepvnr] {
    background: #fef2f2;
    color: #c92a2a;
    font-weight: 600;
}

.filtre-table-compact tbody tr.assist-row-active td:first-child[b-rxfouepvnr] {
    box-shadow: inset 3px 0 0 #c92a2a;
}

.filtre-table[b-rxfouepvnr] { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.8rem; }

.filtre-table thead th[b-rxfouepvnr] {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filtre-table tbody td[b-rxfouepvnr] {
    padding: 0.3rem 0.5rem;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
}

.filtre-table tbody td + td[b-rxfouepvnr],
.filtre-table thead th + th[b-rxfouepvnr] { border-left: 1px solid #f3f4f6; }

.filtre-toggle[b-rxfouepvnr] {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 18px;
    vertical-align: middle;
}

.filtre-toggle input[b-rxfouepvnr] { opacity: 0; width: 0; height: 0; }

.filtre-toggle-slider[b-rxfouepvnr] {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.filtre-toggle-slider[b-rxfouepvnr]::before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.filtre-toggle input:checked + .filtre-toggle-slider[b-rxfouepvnr] { background: #c92a2a; }
.filtre-toggle input:checked + .filtre-toggle-slider[b-rxfouepvnr]::before { transform: translateX(12px); }
.filtre-toggle.busy .filtre-toggle-slider[b-rxfouepvnr] { opacity: 0.5; cursor: wait; }

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : liste au-dessus, matrice dessous
   Tout tient dans la largeur du téléphone, sans défilement latéral.
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .filtre-cols[b-rxfouepvnr] {
        grid-template-columns: 1fr;
        gap: .4rem;
    }

    .filtre-panel[b-rxfouepvnr] { border-radius: 10px; }

    .filtre-message[b-rxfouepvnr] { font-size: .66rem; margin-bottom: .35rem; }
    .filtre-vide[b-rxfouepvnr] { font-size: .62rem; padding: .6rem .4rem; }

    /* Plus de défilement latéral : la matrice s'adapte à la largeur */
    .filtre-scroll-x[b-rxfouepvnr] { overflow-x: hidden; }

    /* Annule la largeur minimale (colonnes × 88px) écrite dans le razor */
    .filtre-table[b-rxfouepvnr] { min-width: 0 !important; }

    /* Liste des critères */
    .filtre-table-compact[b-rxfouepvnr] { font-size: .62rem; }
    .filtre-table-compact thead th[b-rxfouepvnr] { font-size: .52rem; padding: .25rem .5rem; }
    .filtre-table-compact tbody td[b-rxfouepvnr] { padding: .25rem .5rem; line-height: 1.2; }

    /* Matrice : les titres de colonnes passent à la ligne pour tout afficher */
    .filtre-table[b-rxfouepvnr] { font-size: .6rem; }

    .filtre-table thead th[b-rxfouepvnr] {
        padding: .25rem .15rem;
        font-size: .46rem;
        letter-spacing: .01em;
        line-height: 1.15;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        vertical-align: bottom;
    }

    .filtre-table tbody td[b-rxfouepvnr] { padding: .3rem .1rem; }

    /* Bascules compactes */
    .filtre-toggle[b-rxfouepvnr] { width: 26px; height: 15px; }
    .filtre-toggle-slider[b-rxfouepvnr]::before { height: 11px; width: 11px; left: 2px; top: 2px; }
    .filtre-toggle input:checked + .filtre-toggle-slider[b-rxfouepvnr]::before { transform: translateX(11px); }
}
/* /Components/Pages/Preferences/PersonnalisationUtilisateur.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   Personnalisation : style épuré, fin et compact (Apple)
   Libellé à gauche, valeur à l'extrémité droite
   ═══════════════════════════════════════════════ */

/* ===== Conteneur : hauteur selon le contenu, rien ne coupe les boutons ===== */

.profil-wrap[b-nspn07v0de] {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ===== Barre de boutons : sous les colonnes, sans trait, jamais coupée ===== */

.profil-wrap > .profil-toolbar[b-nspn07v0de] {
    margin: .7rem 0 .8rem;
    padding: 0;
    border: 0;
    background: none;
}

.profil-toolbar[b-nspn07v0de] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
}

.profil-toolbar .profil-message[b-nspn07v0de] { margin-right: .2rem; }

.profil-toolbar .profil-btn[b-nspn07v0de] {
    flex-shrink: 0;
    height: 26px;
    padding: 0 .9rem;
    font-size: .68rem;
}

.profil-toolbar .profil-btn.annuler[b-nspn07v0de] {
    background: #fff;
    color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, .1);
}

.profil-toolbar .profil-btn.annuler:hover:not(:disabled)[b-nspn07v0de] { background: #f5f5f7; }

/* ===== Colonnes : cartes blanches, bordure filaire ===== */

.profil-columns[b-nspn07v0de] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin: .3rem 0 0;
    align-items: start;
    align-content: start;
}

.profil-columns.avec-client[b-nspn07v0de] { grid-template-columns: repeat(4, 1fr); }

.profil-column[b-nspn07v0de] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .5rem .75rem .25rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.profil-column-title[b-nspn07v0de] {
    margin: 0 0 .25rem;
    font-size: .58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8e8e93;
}

.profil-list[b-nspn07v0de] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ===== Ligne : libellé à gauche, valeur à droite ===== */

.profil-column .pf[b-nspn07v0de] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .15rem .75rem;
    min-width: 0;
    padding: .42rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.profil-column .profil-list > .pf:last-child[b-nspn07v0de] { border-bottom: none; }

.profil-column .pf-label[b-nspn07v0de] {
    flex-shrink: 0;
    max-width: 50%;
    margin: 0;
    font-size: .7rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #1d1d1f;
}

.profil-column .pf.edit .pf-label[b-nspn07v0de] {
    position: static;
    transform: none;
    padding: 0;
    background: none;
    color: #1d1d1f;
    pointer-events: auto;
}

.profil-column .pf.edit:focus-within .pf-label[b-nspn07v0de] { color: #c92a2a; }

/* .pf-val et .pf-mono sont aussi utilisés par ProcessusUtilisateur */
.pf-val[b-nspn07v0de] {
    font-size: .7rem;
    color: #6e6e73;
    word-break: break-word;
}

.pf-val.pf-mono[b-nspn07v0de] {
    font-family: "SF Mono", "Courier New", Courier, monospace;
    font-size: .66rem;
}

.profil-column .pf-val[b-nspn07v0de] {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
}

.pf-sous[b-nspn07v0de] {
    font-size: .6rem;
    color: #8e8e93;
}

.profil-column .pf > .pf-sous[b-nspn07v0de] {
    flex: 1 1 100%;
    text-align: right;
}

.pf-lien[b-nspn07v0de] {
    font-size: .7rem;
    color: #c92a2a;
    text-decoration: none;
}

.pf-lien:hover[b-nspn07v0de] { text-decoration: underline; }

/* ===== Saisie ===== */

.pf-input[b-nspn07v0de] {
    width: 100%;
    padding: .28rem .5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: .7rem;
    color: #1d1d1f;
    background: #f5f5f7;
    box-sizing: border-box;
    resize: vertical;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pf-input:focus[b-nspn07v0de] {
    outline: none;
    background: #fff;
    border-color: #c92a2a;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .12);
}

.profil-column .pf.edit > input.pf-input[b-nspn07v0de] {
    flex: 0 1 58%;
    width: auto;
    min-width: 0;
    text-align: right;
}

.profil-column .pf.edit > textarea.pf-input[b-nspn07v0de] {
    flex: 1 1 100%;
    text-align: left;
}

.pf-check[b-nspn07v0de] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    color: #6e6e73;
    cursor: pointer;
}

.profil-column .pf.edit > .pf-check[b-nspn07v0de] { margin-left: auto; }

/* ===== Photo de profil et pièce d'identité ===== */

.profil-column .pf-piece-ligne[b-nspn07v0de] {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.pf-piece-ligne .pf-label[b-nspn07v0de] { margin-bottom: 0; }

.pf-piece-rond[b-nspn07v0de] {
    flex-shrink: 0;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
}

.pf-piece-rond.vide[b-nspn07v0de] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f7;
    color: #8e8e93;
    font-size: 1.05rem;
}

.profil-column .pf-btn-bloc[b-nspn07v0de] {
    align-self: auto;
    margin: .1rem 0 0 auto;
}

/* ===== Mot de passe ===== */

.profil-column .pf-mdp[b-nspn07v0de] {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .15rem;
}

.pf-mdp-champ[b-nspn07v0de] { position: relative; }

.profil-column .pf-mdp .pf-input[b-nspn07v0de] {
    text-align: left;
    padding-right: 2rem;
}

.pf-oeil[b-nspn07v0de] {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    padding: .2rem;
    border: none;
    background: none;
    font-size: .8rem;
    line-height: 1;
    color: #8e8e93;
    cursor: pointer;
}

.pf-oeil:hover[b-nspn07v0de] { color: #c92a2a; }

.pf-mdp-champ input[b-nspn07v0de]::-ms-reveal,
.pf-mdp-champ input[b-nspn07v0de]::-ms-clear { display: none; }

/* ===== Messages et boutons ===== */

.profil-message[b-nspn07v0de] { font-size: .68rem; }
.profil-message.erreur[b-nspn07v0de] { color: #b91c1c; }
.profil-message.succes[b-nspn07v0de] { color: #15803d; }

.profil-column .pf > .profil-message[b-nspn07v0de] {
    flex: 1 1 100%;
    text-align: right;
}

.profil-btn[b-nspn07v0de] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .8rem;
    border: none;
    border-radius: 999px;
    font-size: .62rem;
    height: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}

.profil-btn.modifier[b-nspn07v0de],
.profil-btn.enregistrer[b-nspn07v0de] { background: #c92a2a; color: #fff; }
.profil-btn.modifier:hover:not(:disabled)[b-nspn07v0de],
.profil-btn.enregistrer:hover:not(:disabled)[b-nspn07v0de] { background: #a61e1e; }
.profil-btn.annuler[b-nspn07v0de] { background: #f5f5f7; color: #6e6e73; }
.profil-btn.annuler:hover:not(:disabled)[b-nspn07v0de] { background: #e8e8ed; }
.profil-btn:disabled[b-nspn07v0de] { opacity: .6; cursor: not-allowed; }

.profil-spinner[b-nspn07v0de] {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: profil-spin-b-nspn07v0de .6s linear infinite;
}

@keyframes profil-spin-b-nspn07v0de { to { transform: rotate(360deg); } }

/* ===== Responsive ===== */

@media (max-width: 1100px) {
    .profil-columns[b-nspn07v0de],
    .profil-columns.avec-client[b-nspn07v0de] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .profil-columns[b-nspn07v0de],
    .profil-columns.avec-client[b-nspn07v0de] { grid-template-columns: 1fr; }

    .profil-toolbar[b-nspn07v0de] { justify-content: stretch; }

    .profil-toolbar .profil-btn[b-nspn07v0de] {
        flex: 1;
        justify-content: center;
    }
}

/* ===== Squelette de chargement : mêmes dimensions que le profil chargé ===== */

.profil-column > .pref-sk-title[b-nspn07v0de] { margin-bottom: .45rem; }

.pref-sk-bouton[b-nspn07v0de] {
    width: 90px;
    height: 26px;
    margin: 0;
    border-radius: 999px;
}

.pref-sk-rond[b-nspn07v0de] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
}

.profil-column .pf > .pref-sk-line[b-nspn07v0de] {
    height: .7rem;
    margin: 0;
}

.profil-column .pf > .pref-sk-line.w30[b-nspn07v0de] { width: 30%; }
.profil-column .pf > .pref-sk-line.w70[b-nspn07v0de] { width: 38%; margin-left: auto; }
.profil-column .pf > .pref-sk-line:nth-child(3)[b-nspn07v0de] { margin: .25rem 0 0 auto; }

.pf-piece-ligne > .pref-sk-line[b-nspn07v0de] { margin-bottom: 0; }

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : profil miniaturisé, police réduite
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Une seule taille pour tout le profil (modifie ici pour agrandir/réduire) */
    .profil-wrap[b-nspn07v0de] {
        --pf-fs: 12px;                                    /* était 14px */
        --pf-champ: calc(var(--pf-fs) * 1.25 + .25rem);   /* hauteur d'un champ */
        --pf-row: calc(var(--pf-fs) * 1.25 + .6rem);      /* hauteur d'une ligne */
    }

    /* ---------- Boutons : sous les colonnes, jamais coupés ---------- */
    .profil-wrap > .profil-toolbar[b-nspn07v0de] {
        margin: .5rem 0 .6rem;
        gap: .3rem;
    }

    .profil-toolbar .profil-btn[b-nspn07v0de],
    .profil-btn[b-nspn07v0de] {
        height: 26px;
        padding: 0 .7rem;
        font-size: var(--pf-fs);
        gap: .3rem;
    }

    .profil-message[b-nspn07v0de],
    .profil-toolbar .profil-message[b-nspn07v0de] { font-size: var(--pf-fs); }
    .profil-spinner[b-nspn07v0de] { width: 10px; height: 10px; border-width: 2px; }

    /* ---------- Colonnes ---------- */
    .profil-columns[b-nspn07v0de],
    .profil-columns.avec-client[b-nspn07v0de] {
        grid-template-columns: 1fr;
        gap: .4rem;
        margin: .2rem 0 0;
    }

    .profil-column[b-nspn07v0de] {
        padding: .4rem .55rem .2rem;
        border-radius: 10px;
    }

    .profil-column-title[b-nspn07v0de] {
        font-size: calc(var(--pf-fs) - 3px);
        margin: 0 0 .2rem;
    }

    /* ---------- Lignes : même taille partout, hauteur stable ---------- */
    .profil-column .pf[b-nspn07v0de] {
        padding: .3rem 0;
        gap: .15rem .5rem;
        min-height: var(--pf-row);
    }

    .profil-column .pf-label[b-nspn07v0de],
    .pf-val[b-nspn07v0de],
    .profil-column .pf-val[b-nspn07v0de],
    .pf-val.pf-mono[b-nspn07v0de],
    .pf-lien[b-nspn07v0de],
    .pf-check[b-nspn07v0de] { font-size: var(--pf-fs); }

    .pf-sous[b-nspn07v0de] { font-size: calc(var(--pf-fs) - 2px); }

    /* ---------- Saisie : même taille que le texte, sans agrandissement ---------- */
    .pf-input[b-nspn07v0de] {
        font-size: var(--pf-fs);
        padding: 0 .4rem;
        line-height: 1.2;
        border-radius: 6px;
    }

    .profil-column .pf.edit > input.pf-input[b-nspn07v0de],
    .profil-column .pf-mdp .pf-input[b-nspn07v0de] {
        height: var(--pf-champ);
    }

    .profil-column .pf.edit > textarea.pf-input[b-nspn07v0de] {
        height: calc(var(--pf-fs) * 2.6 + .3rem);
        min-height: 0;
        padding-top: .15rem;
        padding-bottom: .15rem;
        resize: none;
    }

    .pf-check[b-nspn07v0de] { gap: .3rem; }
    .pf-check input[b-nspn07v0de] { width: 12px; height: 12px; }

    /* ---------- Photo et pièce d'identité ---------- */
    .pf-piece-rond[b-nspn07v0de] { width: 34px; height: 34px; }
    .pf-piece-rond.vide[b-nspn07v0de] { font-size: .9rem; }
    .profil-column .pf-btn-bloc[b-nspn07v0de] { margin-top: .1rem; }

    /* ---------- Mot de passe ---------- */
    .profil-column .pf-mdp[b-nspn07v0de] { gap: .3rem; }
    .profil-column .pf-mdp .pf-input[b-nspn07v0de] { padding-right: 1.8rem; }

    .pf-oeil[b-nspn07v0de] {
        right: .3rem;
        font-size: var(--pf-fs);
        padding: .15rem;
    }

    /* ---------- Squelette ---------- */
    .profil-column .pf > .pref-sk-line[b-nspn07v0de] { height: calc(var(--pf-fs) * .85); }

    .profil-toolbar .pref-sk-bouton[b-nspn07v0de] {
        flex: 1;
        width: auto;
        height: 26px;
    }

    .pref-sk-rond[b-nspn07v0de] { width: 34px; height: 34px; }
}

/* ---------- Paysage compact : deux colonnes ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    .profil-wrap[b-nspn07v0de] { --pf-fs: 10px; }

    .profil-columns[b-nspn07v0de],
    .profil-columns.avec-client[b-nspn07v0de] { grid-template-columns: repeat(2, 1fr); }

    .profil-toolbar .profil-btn[b-nspn07v0de],
    .profil-btn[b-nspn07v0de],
    .profil-toolbar .pref-sk-bouton[b-nspn07v0de] { height: 22px; }
}

/* iOS Safari : même taille dans les champs de saisie que dans le texte du profil */
@supports (-webkit-touch-callout: none) {
    .profil-wrap[b-nspn07v0de] { --pf-fs: 10px !important; }      /* était 11px */

    .profil-wrap .pf-input[b-nspn07v0de],
    .profil-wrap textarea.pf-input[b-nspn07v0de] {
        font-size: var(--pf-fs) !important;
        line-height: 1.2;
    }
}

/* ===== Mobile : barre de boutons fixe, au-dessus du pied de page ===== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .profil-wrap[b-nspn07v0de] {
        --pied-h: 20px;   /* hauteur du pied de page : à ajuster si besoin */
        padding-bottom: calc(46px + var(--pied-h) + 8px) !important;
    }

    .profil-wrap > .profil-toolbar[b-nspn07v0de] {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: var(--pied-h) !important;   /* remonte au-dessus du pied de page */
        z-index: 10;
        margin: 0 !important;
        padding: .45rem .75rem !important;
        background: rgba(255, 255, 255, .92) !important;
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid rgba(0, 0, 0, .08) !important;
        box-shadow: none !important;
    }

    .profil-wrap > .profil-toolbar .profil-message[b-nspn07v0de] {
        flex: 1 1 100%;
        margin: 0;
        text-align: right;
    }
}
/* /Components/Pages/Preferences/Preferences.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   Page Préférences : mise en page générale
   ═══════════════════════════════════════════════ */

.preferences-page[b-6nanl8r0qq] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES UTILISATEURS (bureau)
========================================== */

.preferences-sticky[b-6nanl8r0qq] {
    position: fixed;
    top: 85px;
    left: 250px;
    right: 30px;
    height: 120px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 16px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.preferences-content[b-6nanl8r0qq] {
    position: fixed;

    top: 190px;
    bottom: 40px;
    left: 250px;
    right: 50px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

/* Colonne gauche : liste des outils */
.preferences-left[b-6nanl8r0qq] {
    flex: 0 0 20%;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
    padding: .5rem;
}

/* Colonne droite : détails de l'outil sélectionné */
.preferences-right[b-6nanl8r0qq] {
    flex: 1;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
    padding: 1rem;
}

/* État vide (utilisé aussi par InfoPreferences : doit rester ici) */
.empty-preferences[b-6nanl8r0qq] {
    height: 100%;
    box-sizing: border-box;
    padding: 1rem;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languette et fond cliquable : cachés sur ordinateur */
.preferences-content .drawer-tab[b-6nanl8r0qq],
.preferences-content .drawer-backdrop[b-6nanl8r0qq] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - le volet et la languette glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors du volet le referme (fond cliquable)
   - volet collé sous la bande des utilisateurs, coins arrondis
     seulement en bas
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des utilisateurs : pleine largeur, sans coins arrondis */
    html body .preferences-sticky[b-6nanl8r0qq] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .preferences-content[b-6nanl8r0qq] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas du volet */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .preferences-content .preferences-right[b-6nanl8r0qq] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        padding: .4rem .4rem 0 .4rem !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    html body .preferences-content .preferences-right[b-6nanl8r0qq]  .preferences-details {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    /* Clic en dehors du volet : le referme (sous le volet et la languette) */
    html body .preferences-content .drawer-backdrop[b-6nanl8r0qq] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .preferences-content .preferences-left[b-6nanl8r0qq] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        max-width: var(--left-w) !important;
        min-width: 0 !important;
        height: auto !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .preferences-content.left-open .preferences-left[b-6nanl8r0qq] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languette collée au bord gauche de l'écran ---------- */
    .preferences-content .drawer-tab[b-6nanl8r0qq] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        left: 0;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        border-radius: 0 10px 10px 0;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .preferences-content .drawer-tab:hover[b-6nanl8r0qq] {
        background: rgba(225, 110, 110, .98);
    }

    .preferences-content.left-open .drawer-tab-left[b-6nanl8r0qq] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    /* ---------- Panneau de droite : polices agrandies ---------- */
    .preferences-right[b-6nanl8r0qq]  .assist-panel-head { padding: .3rem .45rem; }
    .preferences-right[b-6nanl8r0qq]  .assist-panel-title { font-size: .65rem; }
    .preferences-right[b-6nanl8r0qq]  .assist-count { font-size: .52rem; }

    .preferences-right[b-6nanl8r0qq]  .assist-table,
    .preferences-right[b-6nanl8r0qq]  .acces-table { font-size: .58rem; }

    .preferences-right[b-6nanl8r0qq]  .assist-table th,
    .preferences-right[b-6nanl8r0qq]  .acces-table th {
        font-size: .48rem;
        padding: .2rem .35rem;
    }

    .preferences-right[b-6nanl8r0qq]  .assist-table td,
    .preferences-right[b-6nanl8r0qq]  .acces-table td { padding: .2rem .35rem; }

    .preferences-right[b-6nanl8r0qq]  .assist-avatar { width: 18px; height: 18px; font-size: .5rem; }
    .preferences-right[b-6nanl8r0qq]  .assist-mail { font-size: .5rem; max-width: 120px; }
    .preferences-right[b-6nanl8r0qq]  .assist-chip,
    .preferences-right[b-6nanl8r0qq]  .assist-badge { font-size: .5rem; padding: .03rem .35rem; }
    .preferences-right[b-6nanl8r0qq]  .assist-icon { font-size: .65rem; padding: .12rem .25rem; }

    .preferences-right[b-6nanl8r0qq]  .assist-btn {
        height: 20px;
        padding: 0 .6rem;
        font-size: .55rem;
    }

    .preferences-right[b-6nanl8r0qq]  .assist-toolbar { margin: .35rem 0; gap: .35rem; }
    .preferences-right[b-6nanl8r0qq]  .assist-flash { font-size: .55rem; padding: .3rem .45rem; }
    .preferences-right[b-6nanl8r0qq]  .assist-vide,
    .preferences-right[b-6nanl8r0qq]  .empty-preferences { font-size: .58rem; padding: .5rem; }

    .preferences-right[b-6nanl8r0qq]  .contrat-clause-form-label { font-size: .48rem; }
    .preferences-right[b-6nanl8r0qq]  .contrat-clause-input,
    .preferences-right[b-6nanl8r0qq]  .contrat-clause-textarea { font-size: .58rem; padding: .25rem .35rem; }

    .preferences-right[b-6nanl8r0qq]  .preferences-element-name { font-size: .62rem; }
    .preferences-right[b-6nanl8r0qq]  .preferences-element-category { font-size: .5rem; }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .preferences-sticky[b-6nanl8r0qq] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .preferences-content[b-6nanl8r0qq] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --left-w: 55vw;
    }

    .preferences-content .drawer-tab[b-6nanl8r0qq] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Preferences/ProcessusAssistant.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   ProcessusAssistant : CSS scopé, autonome.
   2 colonnes : services + délai (30 %) / 7 boutons (70 %).

   Les copies GLOBALES de .processus-2col, .acces-table/.acces-scroll et .pa-sk-*
   (utilisées par le squelette d'InfoPreferences) sont dans la feuille commune des
   Préférences : voir preferences-skeleton.css. Ne pas les recopier ici.
   ═══════════════════════════════════════════════ */

.processus-2col[b-sbdldtujba] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    gap: 1rem;
    align-items: start;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : panneaux empilés, tailles normales
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .processus-2col[b-sbdldtujba] {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    /* La liste des services défile dans son cadre */
    .assist-table-wrap[b-sbdldtujba] {
        max-height: 12rem;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .assist-table td[b-sbdldtujba] { padding: .4rem .6rem; }

    /* Les bascules d'accès défilent horizontalement dans leur cadre */
    .acces-scroll[b-sbdldtujba] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Bascules plus faciles à toucher */
    .acces-toggle[b-sbdldtujba] { width: 34px; height: 20px; }
    .acces-toggle-slider[b-sbdldtujba]::before { height: 14px; width: 14px; }
    .acces-toggle input:checked + .acces-toggle-slider[b-sbdldtujba]::before { transform: translateX(14px); }
    .pa-sk-toggle[b-sbdldtujba] { width: 34px; height: 20px; }
}

.assist-panel[b-sbdldtujba] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.assist-panel-head[b-sbdldtujba] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.assist-panel-title[b-sbdldtujba] { margin: 0; font-size: 0.85rem; font-weight: 600; }
.assist-count[b-sbdldtujba] { font-size: 0.72rem; color: #86868b; }

/* ===== Liste des services ===== */

.assist-table-wrap[b-sbdldtujba] { overflow-x: auto; }

.assist-table[b-sbdldtujba] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }

.assist-table th[b-sbdldtujba] {
    padding: 0.35rem 0.6rem;
    text-align: left;
    white-space: nowrap;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.assist-table td[b-sbdldtujba] {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.assist-table tbody tr:last-child td[b-sbdldtujba] { border-bottom: none; }
.assist-table tbody tr:hover[b-sbdldtujba] { background: #fafafa; cursor: pointer; }

.assist-table tbody tr.assist-row-active[b-sbdldtujba] { background: #fdecec; }
.assist-table tbody tr.assist-row-active:hover[b-sbdldtujba] { background: #fbe1e1; }
.assist-table tbody tr.assist-row-active td[b-sbdldtujba] { color: #a61e1e; }

.assist-nom-principal[b-sbdldtujba] { font-weight: 500; line-height: 1.2; }

.assist-chip[b-sbdldtujba] {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 0.72rem;
    white-space: nowrap;
}

.assist-vide[b-sbdldtujba] { padding: 1rem; text-align: center; font-size: 0.8rem; color: #86868b; }

.assist-etat[b-sbdldtujba] {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
}

.assist-etat.erreur[b-sbdldtujba] { color: #b91c1c; border-color: #fca5a5; }

/* ===== Boutons d'accès (même design que l'outil Filtre) ===== */

.acces-message[b-sbdldtujba] { margin: 0.5rem 0.8rem 0; font-size: 0.78rem; }
.acces-message.erreur[b-sbdldtujba] { color: #b91c1c; }
.acces-message.succes[b-sbdldtujba] { color: #15803d; }

.acces-scroll[b-sbdldtujba] { overflow-x: auto; }

.acces-table[b-sbdldtujba] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8rem;
}

.acces-table thead th[b-sbdldtujba] {
    padding: 0.35rem 0.5rem;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acces-table tbody td[b-sbdldtujba] {
    padding: 0.5rem;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
}

.acces-table tbody td + td[b-sbdldtujba],
.acces-table thead th + th[b-sbdldtujba] { border-left: 1px solid #f3f4f6; }

.acces-toggle[b-sbdldtujba] {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 18px;
    vertical-align: middle;
}

.acces-toggle input[b-sbdldtujba] { opacity: 0; width: 0; height: 0; }

.acces-toggle-slider[b-sbdldtujba] {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.acces-toggle-slider[b-sbdldtujba]::before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.acces-toggle input:checked + .acces-toggle-slider[b-sbdldtujba] { background: #c92a2a; }
.acces-toggle input:checked + .acces-toggle-slider[b-sbdldtujba]::before { transform: translateX(12px); }
.acces-toggle.busy .acces-toggle-slider[b-sbdldtujba] { opacity: 0.5; cursor: wait; }

/* ===== Squelette (chargement) : même forme que le contenu réel ===== */

.pa-sk[b-sbdldtujba] {
    display: inline-block;
    vertical-align: middle;
}

/* Pastille du compteur dans l'en-tête de chaque panneau */
.pa-sk-compte[b-sbdldtujba] { width: 56px; height: 12px; border-radius: 999px; }

/* Liste des services : nom (largeur donnée en ligne) + pastille « n jours » */
.pa-sk-nom[b-sbdldtujba]  { height: 11px; border-radius: 6px; }
.pa-sk-chip[b-sbdldtujba] { width: 64px; height: 18px; border-radius: 999px; }

/* Boutons d'accès : même taille que les vraies bascules */
.pa-sk-toggle[b-sbdldtujba] { width: 30px; height: 18px; border-radius: 999px; }

.pa-sk[b-sbdldtujba],
.pa-sk *[b-sbdldtujba] { pointer-events: none; }
/* /Components/Pages/Preferences/ProcessusUtilisateur.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   ProcessusUtilisateur : CSS scopé, autonome.
   Rien à lier dans App.razor : Blazor l'ajoute au build.
   ═══════════════════════════════════════════════ */

/* ===== 3 colonnes égales : Services / Tâches / Détail ===== */

.processus-3col-layout[b-g0jveyb5eh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    align-items: start;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : panneaux empilés, tailles normales
========================================================== */
@media (max-width: 1100px), (max-height: 500px) and (orientation: landscape) {

    .processus-3col-layout[b-g0jveyb5eh] {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    /* Chaque liste défile dans son cadre */
    .assist-table-wrap[b-g0jveyb5eh] {
        max-height: 12rem;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .assist-table td[b-g0jveyb5eh] { padding: .4rem .6rem; }
    .assist-icon[b-g0jveyb5eh] { padding: .3rem .45rem; }

    .processus-tache-detail[b-g0jveyb5eh] { min-height: 0; }

    .contrat-clause-form-actions[b-g0jveyb5eh] { gap: .4rem; }
    .assist-btn[b-g0jveyb5eh] { height: 28px; }

    /* En-tête : le sélecteur de phase reste sur la ligne */
    .phase-select-entete[b-g0jveyb5eh] { max-width: 7rem; }
}

/* ===== Panneaux et tableaux ===== */

.assist-panel[b-g0jveyb5eh] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.assist-panel-head[b-g0jveyb5eh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.assist-panel-title[b-g0jveyb5eh] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.assist-count[b-g0jveyb5eh] { font-size: 0.72rem; color: #86868b; }

.assist-table-wrap[b-g0jveyb5eh] { overflow-x: auto; }

.assist-table[b-g0jveyb5eh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.assist-table th[b-g0jveyb5eh] {
    padding: 0.35rem 0.6rem;
    text-align: left;
    white-space: nowrap;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.assist-table td[b-g0jveyb5eh] {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.assist-table tbody tr:last-child td[b-g0jveyb5eh] { border-bottom: none; }
.assist-table tbody tr:hover[b-g0jveyb5eh] { background: #fafafa; cursor: pointer; }

.assist-table tbody tr.assist-row-active[b-g0jveyb5eh] { background: #fdecec; }
.assist-table tbody tr.assist-row-active:hover[b-g0jveyb5eh] { background: #fbe1e1; }
.assist-table tbody tr.assist-row-active td[b-g0jveyb5eh] { color: #a61e1e; }

.assist-nom-principal[b-g0jveyb5eh] { font-weight: 500; line-height: 1.2; }

.assist-chip[b-g0jveyb5eh] {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 0.72rem;
    white-space: nowrap;
}

.assist-actions[b-g0jveyb5eh] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.assist-icon[b-g0jveyb5eh] {
    border: none;
    background: transparent;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.assist-icon:hover[b-g0jveyb5eh] { background: #f3f4f6; color: #111827; }
.assist-icon.danger:hover[b-g0jveyb5eh] { background: #fef2f2; color: #b91c1c; }
.assist-icon:disabled[b-g0jveyb5eh] { opacity: 0.5; cursor: not-allowed; }

.assist-vide[b-g0jveyb5eh] {
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #86868b;
}

.assist-etat[b-g0jveyb5eh] {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
}

.assist-etat.erreur[b-g0jveyb5eh] { color: #b91c1c; border-color: #fca5a5; }

/* ===== Sélecteur de phase (en-tête du tableau Tâches) ===== */

.phase-select-entete[b-g0jveyb5eh] {
    margin-left: auto;
    margin-right: 0.4rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #374151;
    background: #fff;
    cursor: pointer;
}

.phase-select-entete:disabled[b-g0jveyb5eh] { opacity: 0.6; cursor: not-allowed; }

/* ===== Panneau de détail ===== */

.processus-tache-detail[b-g0jveyb5eh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 180px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
}

.processus-tache-detail-meta[b-g0jveyb5eh] { margin-bottom: 0.25rem; }

.processus-tache-detail-position[b-g0jveyb5eh] {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.68rem;
    font-weight: 600;
}

.processus-tache-detail-titre[b-g0jveyb5eh] {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #c92a2a;
}

.processus-tache-detail-contenu[b-g0jveyb5eh] {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #374151;
    white-space: pre-wrap;
}

/* ===== Formulaire d'édition d'une tâche ===== */

.contrat-clause-form[b-g0jveyb5eh] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contrat-clause-form-label[b-g0jveyb5eh] {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #9ca3af;
}

.contrat-clause-input[b-g0jveyb5eh],
.contrat-clause-textarea[b-g0jveyb5eh] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    font-size: 0.76rem;
    box-sizing: border-box;
    resize: vertical;
    background: #fff;
}

.contrat-clause-input:focus[b-g0jveyb5eh],
.contrat-clause-textarea:focus[b-g0jveyb5eh] {
    outline: none;
    border-color: #c92a2a;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, 0.15);
}

.contrat-clause-erreur[b-g0jveyb5eh] { margin: 0; font-size: 0.7rem; color: #b91c1c; }

.contrat-clause-form-hint[b-g0jveyb5eh] {
    font-size: 0.66rem;
    color: #9ca3af;
    margin-top: -0.15rem;
}

.contrat-clause-form-actions[b-g0jveyb5eh] {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.pf-val[b-g0jveyb5eh] {
    font-size: 0.76rem;
    color: #374151;
    word-break: break-word;
}

.pf-val.pf-mono[b-g0jveyb5eh] {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
}

.assist-btn[b-g0jveyb5eh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.65rem;
    font-weight: 600;
    height: 25px;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.assist-btn:active[b-g0jveyb5eh] { transform: scale(0.97); }
.assist-btn:disabled[b-g0jveyb5eh] { opacity: 0.6; cursor: not-allowed; }
.assist-btn.principal[b-g0jveyb5eh] { background: #c92a2a; color: #fff; box-shadow: 0 2px 6px rgba(201, 42, 42, 0.3); }
.assist-btn.principal:hover:not(:disabled)[b-g0jveyb5eh] { background: #a61e1e; }
.assist-btn.secondaire[b-g0jveyb5eh] { background: #fff; color: #1d1d1f; border-color: #d1d5db; }
.assist-btn.secondaire:hover:not(:disabled)[b-g0jveyb5eh] { background: #f5f5f7; border-color: #9ca3af; }
/* /Components/Pages/Preferences/ServicesUtilisateur.razor.rz.scp.css */
/* ===== Bouton « + Service » / « + Phase » (en-tête de panneau) ===== */
.svc-btn-add[b-w4ugniuj7y] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.8rem;
    border: 0;
    border-radius: 999px;
    background: #c92a2a;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.svc-btn-add:hover:not(:disabled)[b-w4ugniuj7y] { background: #a61e1e; transform: translateY(-1px); }
.svc-btn-add:disabled[b-w4ugniuj7y] { opacity: 0.5; cursor: not-allowed; }

.svc-btn-add.sm[b-w4ugniuj7y] {
    padding: 0.15rem 0.6rem;
    font-size: 0.62rem;
}

/* ===== 2 colonnes : 60 % services / 40 % phases ===== */
.svc-cols[b-w4ugniuj7y] {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1rem;
    align-items: start;
    margin-top: 0.5rem;
}

.svc-panel[b-w4ugniuj7y] {
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.svc-head[b-w4ugniuj7y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.svc-head h4[b-w4ugniuj7y] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svc-head-r[b-w4ugniuj7y] { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.svc-count[b-w4ugniuj7y] { font-size: 0.7rem; color: #6b7280; }

/* Le corps défile, pas la page */
.svc-body[b-w4ugniuj7y] {
    max-height: calc(90dvh - 15rem);
    overflow: auto;
}

/* ===== Tableau (compact) ===== */
.svc-table[b-w4ugniuj7y] { width: 100%; border-collapse: collapse; font-size: 0.72rem; }

.svc-table th[b-w4ugniuj7y],
.svc-table td[b-w4ugniuj7y] {
    padding: 0.35rem 0.6rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #eef0f2;
}

.svc-table th[b-w4ugniuj7y] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    white-space: nowrap;
}

.svc-table tbody tr[b-w4ugniuj7y] { cursor: pointer; transition: background 0.12s ease; }
.svc-table tbody tr:last-child td[b-w4ugniuj7y] { border-bottom: 0; }
.svc-table tbody tr:hover[b-w4ugniuj7y] { background: #fafafa; }
.svc-table tbody tr.sel[b-w4ugniuj7y] { background: #fdf3f3; }

.svc-table .svc-act[b-w4ugniuj7y] { width: 1%; white-space: nowrap; text-align: right; }

.svc-pay[b-w4ugniuj7y] { max-width: 10rem; color: #374151; }

/* ===== Cellule : avatar + nom + code sur la même ligne ===== */
.svc-cell[b-w4ugniuj7y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.svc-avatar[b-w4ugniuj7y] {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: 0.62rem;
    font-weight: 600;
}

.svc-name-row[b-w4ugniuj7y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.1rem 0.4rem;
    min-width: 0;
}

.svc-name[b-w4ugniuj7y] {
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}

/* Pastille du code de catégorie */
.svc-code[b-w4ugniuj7y] {
    flex: none;
    padding: 0.02rem 0.4rem;
    border-radius: 999px;
    background: #fdecec;
    color: #c92a2a;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Pastille du nombre de phases */
.svc-pill[b-w4ugniuj7y] {
    display: inline-block;
    min-width: 1.3rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.65rem;
    font-weight: 500;
    text-align: center;
}

/* ===== Icônes d'action ===== */
.svc-ico[b-w4ugniuj7y] {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font-size: 0.72rem;
    cursor: pointer;
}

.svc-ico:hover[b-w4ugniuj7y] { background: #f3f4f6; color: #111827; }
.svc-ico.danger[b-w4ugniuj7y] { color: #c92a2a; }
.svc-ico.danger:hover[b-w4ugniuj7y] { background: #fee2e2; }
.svc-ico:has(.bi-trash):hover[b-w4ugniuj7y] { background: #fee2e2; color: #c92a2a; }

.svc-confirm[b-w4ugniuj7y] { margin-right: 0.2rem; font-size: 0.65rem; color: #b91c1c; }

/* ===== Phases ===== */
.svc-phase[b-w4ugniuj7y] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid #eef0f2;
    cursor: pointer;
    transition: background 0.12s ease;
}

.svc-phase:last-child[b-w4ugniuj7y] { border-bottom: 0; }
.svc-phase:hover[b-w4ugniuj7y],
.svc-phase.active[b-w4ugniuj7y] { background: #fafafa; }

.svc-num[b-w4ugniuj7y] {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-size: 0.65rem;
    font-weight: 600;
}

.svc-phase-main[b-w4ugniuj7y] { flex: 1; min-width: 0; padding-top: 0.1rem; }

.svc-phase-txt[b-w4ugniuj7y] {
    font-size: 0.72rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

.svc-phase-txt.vide[b-w4ugniuj7y] { color: #9ca3af; font-style: italic; }

.svc-phase-act[b-w4ugniuj7y] { flex: none; display: flex; align-items: center; }

.svc-edit[b-w4ugniuj7y] { margin-top: 0.3rem; cursor: auto; }
.svc-edit .svc-foot[b-w4ugniuj7y] { margin-top: 0.6rem; }

.svc-foot[b-w4ugniuj7y] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== Éditeur de phase (champ avec libellé sur le contour) ===== */
.pf[b-w4ugniuj7y] {
    position: relative;
    grid-column: 1 / -1;
    min-width: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pf:hover[b-w4ugniuj7y] { border-color: #9ca3af; }

.pf:focus-within[b-w4ugniuj7y] {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.pf-label[b-w4ugniuj7y] {
    position: absolute;
    top: 0;
    left: 0.5rem;
    transform: translateY(-50%);
    max-width: calc(100% - 1rem);
    padding: 0 0.25rem;
    background: #fff;
    font-size: 0.62rem;
    line-height: 1;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.pf:focus-within .pf-label[b-w4ugniuj7y] { color: #dc2626; }

.pf-input[b-w4ugniuj7y] {
    display: block;
    width: 100%;
    padding: 0.35rem 0.55rem;
    box-sizing: border-box;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.72rem;
    line-height: 1.25;
    color: inherit;
}

textarea.pf-input[b-w4ugniuj7y] { resize: vertical; min-height: 3.6rem; }

/* ===== Boutons et messages ===== */
.profil-message[b-w4ugniuj7y] { max-width: 18rem; margin: 0 0.25rem 0 0.5rem; font-size: 0.7rem; }
.profil-message.erreur[b-w4ugniuj7y] { color: #b91c1c; }

.profil-btn[b-w4ugniuj7y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.profil-btn:disabled[b-w4ugniuj7y] { opacity: 0.6; cursor: not-allowed; }

.profil-btn.enregistrer[b-w4ugniuj7y] { background: #ee5b5b; color: #fff; }
.profil-btn.enregistrer:hover:not(:disabled)[b-w4ugniuj7y] { background: #dc2626; }

.profil-btn.annuler[b-w4ugniuj7y] { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.profil-btn.annuler:hover:not(:disabled)[b-w4ugniuj7y] { background: #e5e7eb; }

.profil-spinner[b-w4ugniuj7y] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: svc-spin-b-w4ugniuj7y 0.7s linear infinite;
}

@keyframes svc-spin-b-w4ugniuj7y { to { transform: rotate(360deg); } }


/* ===== Actions visibles au survol de la ligne ou après un clic sur la ligne =====
   (même comportement sur ordinateur et sur mobile) */
.svc-table .svc-act > *[b-w4ugniuj7y],
.svc-phase-act > *[b-w4ugniuj7y] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.svc-table tbody tr:hover .svc-act > *[b-w4ugniuj7y],
.svc-table tbody tr:focus-within .svc-act > *[b-w4ugniuj7y],
.svc-table tbody tr.sel .svc-act > *[b-w4ugniuj7y],
.svc-table .svc-act.on > *[b-w4ugniuj7y],
.svc-phase:hover .svc-phase-act > *[b-w4ugniuj7y],
.svc-phase:focus-within .svc-phase-act > *[b-w4ugniuj7y],
.svc-phase.active .svc-phase-act > *[b-w4ugniuj7y],
.svc-phase-act.on > *[b-w4ugniuj7y] {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT : Services miniaturisé
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .svc-cols[b-w4ugniuj7y] {
        grid-template-columns: 1fr;
        gap: .4rem;
        margin-top: .2rem;
    }

    .svc-panel[b-w4ugniuj7y] { border-radius: 8px; }

    .svc-head[b-w4ugniuj7y] { padding: .2rem .4rem; }
    .svc-head h4[b-w4ugniuj7y] { font-size: .7rem; }
    .svc-count[b-w4ugniuj7y] { font-size: .45rem; }

    .svc-btn-add[b-w4ugniuj7y],
    .svc-btn-add.sm[b-w4ugniuj7y] {
        padding: .1rem .4rem;
        font-size: .45rem;
        gap: .2rem;
    }

    /* Le tableau défile dans son cadre, jamais la page */
    .svc-body[b-w4ugniuj7y] {
        max-height: 40dvh;
        overflow: auto;
    }

    .svc-table[b-w4ugniuj7y] { font-size: .5rem; }

    .svc-table th[b-w4ugniuj7y],
    .svc-table td[b-w4ugniuj7y] { padding: .2rem .3rem; }

    .svc-table th[b-w4ugniuj7y] { font-size: .4rem; }

    .svc-avatar[b-w4ugniuj7y] { width: .9rem; height: .9rem; font-size: .42rem; }
    .svc-cell[b-w4ugniuj7y] { gap: .3rem; }
    .svc-code[b-w4ugniuj7y] { font-size: .4rem; padding: 0 .25rem; }
    .svc-pill[b-w4ugniuj7y] { font-size: .45rem; padding: 0 .3rem; min-width: 1rem; }
    .svc-pay[b-w4ugniuj7y] { max-width: 5rem; }

    .svc-ico[b-w4ugniuj7y] { width: 1rem; height: 1rem; font-size: .5rem; }
    .svc-confirm[b-w4ugniuj7y] { font-size: .42rem; }

    /* Phases */
    .svc-phase[b-w4ugniuj7y] { padding: .3rem .4rem; gap: .3rem; }
    .svc-num[b-w4ugniuj7y] { width: .95rem; height: .95rem; font-size: .45rem; }
    .svc-phase-txt[b-w4ugniuj7y] { font-size: .5rem; line-height: 1.3; }

    /* Éditeur de phase */
    .pf-label[b-w4ugniuj7y] { font-size: .42rem; }
    .pf-input[b-w4ugniuj7y] { padding: .2rem .35rem; line-height: 1.2; }
    textarea.pf-input[b-w4ugniuj7y] { min-height: 3rem; }

    .profil-btn[b-w4ugniuj7y] {
        padding: .1rem .5rem;
        font-size: .45rem;
        gap: .2rem;
    }
    .profil-message[b-w4ugniuj7y] { font-size: .45rem; }
    .profil-spinner[b-w4ugniuj7y] { width: 8px; height: 8px; }
}

@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"])[b-w4ugniuj7y],
    textarea[b-w4ugniuj7y],
    select[b-w4ugniuj7y],
    [contenteditable="true"][b-w4ugniuj7y] {
        font-size: 16px !important;
    }
}
/* /Components/Pages/Processus/Alertes/Alertes.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   Page Alertes : mise en page générale
   ═══════════════════════════════════════════════ */

.alertes-page[b-c80a4t1pqn],
.rapportAgent-page[b-c80a4t1pqn] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES CLIENTS (bureau)
========================================== */

.alertes-sticky[b-c80a4t1pqn] {
    position: fixed;
    top: 85px;
    left: 250px;
    right: 55px;
    height: 130px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 16px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.alertes-content[b-c80a4t1pqn] {
    position: fixed;
    top: 195px;
    bottom: 80px;
    left: 234px;
    right: 35px;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

/* Bande des services */
.alertes-bottom[b-c80a4t1pqn] {
    position: fixed;
    bottom: 23px;
    left: 250px;
    right: 70px;

    z-index: 900;

    background: #fff;
    padding: .3rem;

    border-top: 1px solid #eee;
    border-radius: 12px 12px 0 0;

    animation: slideDown .3s ease;
    overflow: hidden;
}

.empty-alertes[b-c80a4t1pqn] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languette et fond cliquable : cachés sur ordinateur */
.alertes-content .drawer-tab[b-c80a4t1pqn],
.alertes-content .drawer-backdrop[b-c80a4t1pqn] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - le volet (dans InfoAlertes) et la languette glissent
     ensemble (transform) : même durée, même courbe, même distance
   - un clic en dehors du volet le referme (fond cliquable)
   - la bande des clients (z-index 1000) et la bande des services
     (z-index 900) restent cliquables au-dessus du fond
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des clients : pleine largeur, sans coins arrondis */
    .alertes-sticky[b-c80a4t1pqn] {
        top: 94px;
        left: 0;
        right: 0;
        height: 84px;
        padding: 2px 4px;
        border-radius: 0;
        border-bottom: 0;
    }

    /* Cadre : bord à bord, collé sous la bande.
       Les variables --drawer-* sont lues par le volet (InfoAlertes.razor.css). */
    .alertes-content[b-c80a4t1pqn] {
        --drawer-top: 178px;                        /* = bas de la bande (94 + 84) */
        --drawer-bottom: 66px;                      /* laisse la place à la bande des services */
        --drawer-w: 88vw;
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--drawer-top);
        bottom: var(--drawer-bottom);
        left: 0;
        right: 0;
        gap: 0;
        padding: 0;
        border-radius: 0;
        overflow: visible;
    }

    /* Bande des services : au-dessus du fond cliquable */
    .alertes-bottom[b-c80a4t1pqn] {
        left: 0;
        right: 0;
        bottom: 6px;
        height: 54px;
        padding: .15rem;
        border-radius: 10px 10px 0 0;
    }

    .empty-alertes[b-c80a4t1pqn] { font-size: .6rem; }

    /* Clic en dehors du volet : le referme (sous le volet et la languette) */
    .alertes-content .drawer-backdrop[b-c80a4t1pqn] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Languette collée au bord gauche de l'écran ---------- */
    .alertes-content .drawer-tab[b-c80a4t1pqn] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        left: 0;
        z-index: 40;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        border-radius: 0 10px 10px 0;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .alertes-content .drawer-tab:hover[b-c80a4t1pqn] {
        background: rgba(225, 110, 110, .98);
    }

    .alertes-content.side-open .drawer-tab-left[b-c80a4t1pqn] {
        transform: translate(var(--drawer-w), -50%);    /* suit le bord du volet */
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    .alertes-sticky[b-c80a4t1pqn] {
        height: 54px;
        padding: 1px 4px;
    }

    .alertes-content[b-c80a4t1pqn] {
        --drawer-top: 148px;                        /* = bas de la bande (94 + 54) */
        --drawer-bottom: 50px;
        --drawer-w: 52vw;
    }

    .alertes-bottom[b-c80a4t1pqn] { height: 40px; }

    .alertes-content .drawer-tab[b-c80a4t1pqn] {
        width: 16px;
        height: 38px;
    }
}
/* /Components/Pages/Processus/Alertes/InfoAlertes.razor.rz.scp.css */
/* ==========================================================================
   ALERTES — layout, phases / tâches et panneau de détails
   Structure :
     .alertes-layout
       ├─ .alertes-top        (calendrier, 13 %)
       └─ .alertes-bottomRow
            ├─ .alertes-col-15  (alerte + type de demande, 5 %)
            ├─ .alertes-col-50  (phases > tâches, 73 %)
            └─ .alertes-col-30  (cartes de détails, 20 %)
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Variables + reset local
   -------------------------------------------------------------------------- */

.alertes-layout[b-abmbrxr8v9],
.alertes-layout *[b-abmbrxr8v9],
.alertes-layout *[b-abmbrxr8v9]::before,
.alertes-layout *[b-abmbrxr8v9]::after {
    box-sizing: border-box;
}

/* Palette centralisée : un seul endroit à modifier */
.alertes-layout[b-abmbrxr8v9] {
    --a-accent: #c92a2a;
    --a-accent-dark: #a01f1f;
    --a-accent-soft: #fdecec;
    --a-accent-border: #f8d4d4;

    --a-text: #1d1d1f;
    --a-muted: #86868b;
    --a-faint: #a1a1a6;

    --a-bg: #f5f5f7;
    --a-surface: #fff;
    --a-surface-alt: #fafafa;
    --a-track: #e5e5ea;

    --a-line: rgba(0, 0, 0, .06);
    --a-line-strong: rgba(0, 0, 0, .1);
    --a-scroll: rgba(0, 0, 0, .2);

    --a-ok-bg: #e6f4ea;
    --a-ok-text: #1e7e34;
    --a-ok-border: #c9e8d1;
    --a-warn-bg: #fff4e5;
    --a-warn-text: #b26a00;

    --a-radius: 16px;
    --a-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .05);
    --a-shadow-hover: 0 2px 4px rgba(0, 0, 0, .08), 0 14px 30px rgba(0, 0, 0, .12);

    display: flex;
    flex-direction: column;
    gap: .8rem;

    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;

    background: var(--a-bg);
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   1. Ligne du haut : calendrier
   -------------------------------------------------------------------------- */

.alertes-top[b-abmbrxr8v9] {
    flex: 0 0 9%;
    max-height: 9%;
    min-height: 70px;

    padding: .8rem;

    background: var(--a-surface);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);
    box-shadow: var(--a-shadow);

    overflow: hidden;
}


/* --------------------------------------------------------------------------
   2. Ligne du bas : trois colonnes
   -------------------------------------------------------------------------- */

.alertes-bottomRow[b-abmbrxr8v9] {
    flex: 1 1 90%;
    min-height: 0;

    display: flex;
    align-items: stretch;
    gap: .8rem;

    overflow: hidden;
}

.alertes-col[b-abmbrxr8v9] {
    min-width: 0;
    min-height: 0;
    max-height: 100%;

    display: flex;
    flex-direction: column;
    gap: .1rem;

    overflow-y: auto;
}

/* Les noms 15 / 50 / 30 sont hérités du balisage ; les largeurs réelles sont 5 / 73 / 20 %. */
.alertes-col-15[b-abmbrxr8v9] {
    flex: 0 0 5%;
    max-width: 5%;
}

.alertes-col-50[b-abmbrxr8v9] {
    flex: 0 0 73%;
    max-width: 73%;
    overflow: hidden; /* seul .alertes-services défile */
}

.alertes-col-30[b-abmbrxr8v9] {
    flex: 0 0 20%;
    max-width: 20%;
    overflow: hidden;

    /* Permet l'unité cqb (police adaptative) dans le panneau de détails */
    container-type: size;
    container-name: detailsPane;
}


/* --------------------------------------------------------------------------
   3. Colonne 5 % : alerte + type de demande
   -------------------------------------------------------------------------- */

.alertes-phaseBar-alert[b-abmbrxr8v9],
.alertes-typeDemand[b-abmbrxr8v9] {
    background: var(--a-surface);
    border: 1px solid var(--a-line-strong);
    border-radius: 12px;

    transition: box-shadow .2s ease, border-color .2s ease;
}

.alertes-phaseBar-alert:hover[b-abmbrxr8v9],
.alertes-typeDemand:hover[b-abmbrxr8v9] {
    border-color: var(--a-accent-border);
    box-shadow: 0 2px 8px rgba(201, 42, 42, .1);
}

.alertes-phaseBar-alert[b-abmbrxr8v9] {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: .7rem;
}

@keyframes alertes-alert-pulse-b-abmbrxr8v9 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 42, 42, .35); }
    50%      { box-shadow: 0 0 0 6px rgba(201, 42, 42, 0); }
}

.alertes-phaseBar-alert-circle[b-abmbrxr8v9] {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--a-accent-soft);
    color: var(--a-accent);
    border: 1px solid var(--a-accent-border);
    border-radius: 50%;

    font-size: .7rem;
    font-weight: 700;

    animation: alertes-alert-pulse-b-abmbrxr8v9 2s ease-in-out infinite;
    transition: transform .2s ease;
}



.alertes-phaseBar-alert:hover .alertes-phaseBar-alert-circle[b-abmbrxr8v9] {
    transform: scale(1.08);
}

.alertes-typeDemand[b-abmbrxr8v9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;

    padding: .55rem;
}

.alertes-typeDemand .label[b-abmbrxr8v9] {
    font-size: .6rem;
    font-weight: 600;
    color: var(--a-faint);
    text-transform: uppercase;
}

.alertes-typeDemand .value[b-abmbrxr8v9] {
    font-size: .78rem;
    color: var(--a-text);
    overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   4. Colonne 73 % : phases > tâches (seul conteneur qui défile)
   -------------------------------------------------------------------------- */

.alertes-services[b-abmbrxr8v9] {
    flex: 1 1 auto;
    min-height: 0;
    z-index: 5;

    /* Pas de padding-top : il est porté par .alertes-stickyHeader,
       sinon les lignes qui défilent réapparaissent au-dessus de l'en-tête. */
    padding: 0 .8rem .8rem;

    background: var(--a-surface);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);

    overflow-y: auto;
}

.alertes-services-empty[b-abmbrxr8v9] {
    padding: 1rem;

    font-size: .78rem;
    color: var(--a-muted);
    text-align: center;
}

/* --- En-tête sticky --- */

.alertes-stickyHeader[b-abmbrxr8v9] {
    position: sticky;
    top: 0;
    z-index: 6;

    padding-top: .8rem;
    padding-bottom: .3rem;

    background: var(--a-surface); /* opaque : masque les lignes qui défilent dessous */
}

.alertes-phaseCardTitle[b-abmbrxr8v9] {
    width: fit-content;
    min-width: 100px;
    margin-bottom: .6rem;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: .5rem .8rem .5rem .6rem;

    background: var(--a-accent-soft);

    clip-path: polygon(100% 0, 12px 0, 0 50%, 12px 100%, 100% 100%);
}

.alertes-phaseCardTitle .labelTitle[b-abmbrxr8v9] {
    font-size: .65rem;
    font-weight: 600;
    line-height: 1;
    color: var(--a-text);
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Liste des phases --- */

.alertes-services-menu[b-abmbrxr8v9] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.alertes-service-item[b-abmbrxr8v9] {
    border: 1px solid var(--a-line);
    border-radius: 10px;
    overflow: hidden;

    transition: box-shadow .2s ease;
}

.alertes-service-item:hover[b-abmbrxr8v9] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

/* --- En-tête d'une phase --- */

.alertes-service-header[b-abmbrxr8v9] {
    width: 100%;
    padding: .1rem .8rem;

    display: flex;
    align-items: center;
    gap: .5rem;

    background: var(--a-surface);
    border: none;

    text-align: left;
    cursor: pointer;

    transition: background .15s ease;
}

.alertes-service-header:hover[b-abmbrxr8v9],
.alertes-service-header.expanded[b-abmbrxr8v9] {
    background: var(--a-accent-soft);
}

.alertes-service-header:focus-visible[b-abmbrxr8v9] {
    outline: 2px solid var(--a-accent);
    outline-offset: -2px;
}

.alertes-service-name[b-abmbrxr8v9] {
    flex: 1 1 auto;
    min-width: 0;

    font-size: .72rem;
    font-weight: 600;
    color: var(--a-text);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alertes-service-count[b-abmbrxr8v9] {
    flex: 0 0 auto;
    padding: .1rem .5rem;

    background: var(--a-bg);
    color: var(--a-muted);
    border-radius: 999px;

    font-size: .65rem;
    font-weight: 700;

    transition: background .2s ease, color .2s ease;
}

.alertes-service-header:hover .alertes-service-count[b-abmbrxr8v9],
.alertes-service-header.expanded .alertes-service-count[b-abmbrxr8v9] {
    background: var(--a-surface);
    color: var(--a-accent);
}

.alertes-service-header .arrow[b-abmbrxr8v9] {
    flex: 0 0 auto;

    font-size: .65rem;
    line-height: 1;
    color: var(--a-accent);
}

/* --- Progression de la phase --- */

.alertes-phase-progress[b-abmbrxr8v9] {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: .35rem;
}

.alertes-phase-progress-bar[b-abmbrxr8v9] {
    width: 100px;
    height: 6px;

    background: var(--a-track);
    border-radius: 999px;
    overflow: hidden;
}

.alertes-phase-progress-fill[b-abmbrxr8v9] {
    height: 100%;

    background: var(--a-accent);
    border-radius: 999px;

    transition: width .3s ease;
}

.alertes-phase-progress-pct[b-abmbrxr8v9] {
    min-width: 28px;

    font-size: .6rem;
    font-weight: 700;
    color: var(--a-accent);
    text-align: right;
}

/* --- Sous-menu des tâches --- */

@keyframes alertes-submenu-in-b-abmbrxr8v9 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.alertes-service-submenu[b-abmbrxr8v9] {
    padding: .3rem .8rem .6rem;

    display: flex;
    flex-direction: column;

    background: var(--a-surface-alt);
    border-top: 1px solid var(--a-line);

    animation: alertes-submenu-in-b-abmbrxr8v9 .2s ease;
}

.alertes-tache-date[b-abmbrxr8v9] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .65em;
    opacity: .7;
    white-space: nowrap;
    margin-right: 4rem;
}

.alertes-tache-auteur[b-abmbrxr8v9] {
    flex: 0 0 auto;
    padding: .1rem .45rem;

    background: var(--a-bg);
    color: var(--a-muted);
    border-radius: 999px;

    font-size: .58rem;
    font-weight: 600;
    /* text-transform: uppercase; */
    white-space: nowrap;

    transition: transform .15s ease;
}

.alertes-globalProgress[b-abmbrxr8v9] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .75rem;
}

.alertes-globalProgress-pct[b-abmbrxr8v9] {
    font-weight: 600;
    font-size: 1.1em;
}

.alertes-tache-item[b-abmbrxr8v9] {
    display: flex;
    align-items: stretch;
    gap: .4rem;

    border-radius: 6px;
    transition: background .15s ease;
}

.alertes-tache-item:hover[b-abmbrxr8v9] {
    background: var(--a-bg);
}

/* Colonne timeline : cercle numéroté + tuyau qui se remplit quand la tâche est cochée */

.alertes-tache-timeline-col[b-abmbrxr8v9] {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.alertes-tache-check[b-abmbrxr8v9] {
    position: relative;
    z-index: 2;

    flex: 0 0 auto;
    width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--a-surface);
    color: var(--a-muted);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 50%;

    font-size: .58rem;
    font-weight: 700;

    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.alertes-tache-check.done[b-abmbrxr8v9] {
    background: var(--a-accent);
    border-color: var(--a-accent);
    color: #fff;
}

.alertes-tache-pipe[b-abmbrxr8v9] {
    position: relative;

    flex: 1 1 auto;
    width: 3px;
    min-height: 8px;

    background: var(--a-track);
    border-radius: 999px;
    overflow: hidden;
}

.alertes-tache-pipe-fill[b-abmbrxr8v9] {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 0%;

    background: var(--a-accent);
    border-radius: 999px;

    transition: height .3s ease;
}

/* Contenu d'une tâche : titre, statut, barre, case à cocher sur une ligne */

.alertes-tache-rowContent[b-abmbrxr8v9] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 18px;
    padding-bottom: .15rem;

    display: flex;
    align-items: center;
    gap: .5rem;
}

.alertes-tache-titre[b-abmbrxr8v9] {
    flex: 1 1 auto;
    min-width: 0;

    font-size: .72rem;
    color: var(--a-text);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alertes-tache-statut[b-abmbrxr8v9] {
    flex: 0 0 auto;
    padding: .1rem .45rem;

    background: var(--a-bg);
    color: var(--a-muted);
    border-radius: 999px;

    font-size: .58rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;

    transition: transform .15s ease;
}

.alertes-tache-item:hover .alertes-tache-statut[b-abmbrxr8v9] {
    transform: translateY(-1px);
}

.alertes-tache-statut.done[b-abmbrxr8v9] {
    background: var(--a-ok-bg);
    color: var(--a-ok-text);
}

.alertes-tache-statut.current[b-abmbrxr8v9] {
    background: var(--a-accent-soft);
    color: var(--a-accent);
}

.alertes-tache-statut.blocked[b-abmbrxr8v9] {
    background: var(--a-warn-bg);
    color: var(--a-warn-text);
}

.alertes-tache-statut.pending[b-abmbrxr8v9] {
    background: var(--a-bg);
    color: var(--a-muted);
}

.alertes-tache-bar[b-abmbrxr8v9] {
    flex: 0 0 auto;
    width: 32px;
    height: 5px;

    background: var(--a-track);
    border-radius: 999px;
    overflow: hidden;
}

.alertes-tache-bar-fill[b-abmbrxr8v9] {
    height: 100%;

    background: var(--a-accent);
    border-radius: 999px;

    transition: width .3s ease;
}

/* Case à cocher : cochée = tâche terminée */

.alertes-tache-checkbox[b-abmbrxr8v9] {
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;

    background: var(--a-surface);
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 5px;

    cursor: pointer;

    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.alertes-tache-checkbox:hover[b-abmbrxr8v9] {
    border-color: var(--a-accent);
    transform: scale(1.08);
}

.alertes-tache-checkbox:focus-visible[b-abmbrxr8v9] {
    outline: 2px solid var(--a-accent);
    outline-offset: 2px;
}

.alertes-tache-checkbox:checked[b-abmbrxr8v9] {
    background: var(--a-accent);
    border-color: var(--a-accent);
}

.alertes-tache-checkbox:checked[b-abmbrxr8v9]::after {
    content: "";

    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);

    width: 4px;
    height: 8px;

    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}


/* --------------------------------------------------------------------------
   5. Colonne 20 % : panneau de détails
   Mêmes classes que InfoAgentService (agentService-*). Les styles sont
   définis ici car un CSS isolé Blazor (.razor.css) ne s'applique pas hors
   du composant qui le déclare.
   -------------------------------------------------------------------------- */

.alertes-col-30 > .agentService-details-side[b-abmbrxr8v9] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: .5rem;

    /* Police adaptative (réduite) : toutes les tailles internes sont en em */
    font-size: clamp(.55rem, 2.2cqb, .8rem);
    color: var(--a-text);

    /* Ni fond ni bordure ici : chaque bloc est dans son propre cadre (.alertes-card) */
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* --- Cadre commun à tous les blocs --- */

.alertes-col-30 .alertes-card[b-abmbrxr8v9] {
    flex: 0 0 auto;
    min-width: 0;
    padding: clamp(.35rem, 1.6cqb, .65rem);

    display: flex;
    flex-direction: column;
    gap: clamp(.15rem, 1cqb, .35rem);

    background: var(--a-surface);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);
    box-shadow: var(--a-shadow);

    transition: box-shadow .2s ease;
}

.alertes-col-30 .alertes-card:hover[b-abmbrxr8v9] {
    box-shadow: var(--a-shadow-hover);
}

/* Le dernier cadre est toujours collé en bas de la colonne :
   la marge automatique absorbe l'espace libre au-dessus de lui. */
.alertes-col-30 .agentService-details-side > .alertes-card:last-child[b-abmbrxr8v9] {
    margin-top: auto;
}

/* --- Cliente : identité à gauche, photo à droite --- */

.alertes-col-30 .agentService-consultant[b-abmbrxr8v9] {
    display: flex;
    align-items: center;
    gap: .8em;
    min-width: 0;
}

.alertes-col-30 .agentService-consultant-info[b-abmbrxr8v9] {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: .1em;
}

.alertes-col-30 .agentService-consultant-avatar[b-abmbrxr8v9] {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;

    width: 3.6em;
    height: 3.6em;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--a-accent-soft);
    color: var(--a-accent);
    border: 1px solid var(--a-accent-border);
    border-radius: 50%;

    font-size: 1.1em;
    font-weight: 700;

    overflow: hidden;
}

.alertes-col-30 .agentService-consultant-avatar img[b-abmbrxr8v9] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.alertes-col-30 .agentService-consultant-name[b-abmbrxr8v9] {
    margin: 0;

    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--a-text);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alertes-col-30 .agentService-consultant-type[b-abmbrxr8v9] {
    font-size: .8em;
    color: var(--a-muted);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Service : en-tête --- */

.alertes-col-30 .agentService-details-header[b-abmbrxr8v9] {
    display: flex;
    flex-direction: column;
    gap: .15em;
    min-width: 0;
}

.alertes-col-30 .agentService-details-name[b-abmbrxr8v9] {
    margin: 0;

    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--a-text);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alertes-col-30 .agentService-details-meta[b-abmbrxr8v9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
    min-width: 0;
}

.alertes-col-30 .agentService-details-description[b-abmbrxr8v9] {
    min-width: 0;

    font-size: 1em;
    color: var(--a-muted);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alertes-col-30 .agentService-details-count[b-abmbrxr8v9] {
    flex: 0 0 auto;
    padding: .15em .7em;

    background: var(--a-accent-soft);
    color: var(--a-accent);
    border: 1px solid var(--a-accent-border);
    border-radius: 999px;

    font-size: .94em;
    font-weight: 700;
    white-space: nowrap;
}

/* --- Champs : libellé à gauche, valeur à droite --- */

.alertes-col-30 .agentService-consultant-details[b-abmbrxr8v9],
.alertes-col-30 .agentService-service-details[b-abmbrxr8v9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.alertes-col-30 .agentService-consultant-field[b-abmbrxr8v9] {
    min-width: 0;
    padding: .12em 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 6px;
    transition: background-color .15s ease;
}

.alertes-col-30 .agentService-consultant-field:hover[b-abmbrxr8v9] {
    background-color: var(--a-bg);
}

.alertes-col-30 .agentService-field-label[b-abmbrxr8v9] {
    flex: 0 0 auto;
    max-width: 45%;

    font-size: .65em;
    font-weight: 600;
    color: var(--a-faint);
    text-transform: uppercase;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alertes-col-30 .agentService-field-value[b-abmbrxr8v9] {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;

    font-size: .85em;
    color: var(--a-text);
    text-align: right;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: color .15s ease;
}

.alertes-col-30 .agentService-consultant-field:hover .agentService-field-value[b-abmbrxr8v9] {
    color: var(--a-accent);
}

/* Valeurs longues (email, adresse) : défilement horizontal */
.alertes-col-30 .agentService-field-value--scroll[b-abmbrxr8v9] {
    overflow-x: auto;
    text-overflow: clip;

    scrollbar-width: thin;
    scrollbar-color: var(--a-scroll) transparent;
}

.alertes-col-30 .agentService-field-value--scroll[b-abmbrxr8v9]::-webkit-scrollbar {
    height: 3px;
}

.alertes-col-30 .agentService-field-value--scroll[b-abmbrxr8v9]::-webkit-scrollbar-thumb {
    background: var(--a-scroll);
    border-radius: 999px;
}

/* --- Pastilles on/off --- */

.alertes-col-30 .alertes-details-flags.alertes-card[b-abmbrxr8v9] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(.12rem, .5cqb, .2rem);
}

.alertes-details-flags > .flag[b-abmbrxr8v9] {
    display: inline-block;
    padding: clamp(.05rem, .3cqb, .1rem) clamp(.2rem, 1cqb, .4rem);

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: .65em;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;

    transition: transform .15s ease, box-shadow .15s ease;
}

.alertes-details-flags > .flag:hover[b-abmbrxr8v9] {
    transform: translateY(-2px) scale(1.05);
}

.alertes-details-flags > .flag.on[b-abmbrxr8v9] {
    background: var(--a-ok-bg);
    color: var(--a-ok-text);
    border-color: var(--a-ok-border);
}

.alertes-details-flags > .flag.on:hover[b-abmbrxr8v9] {
    box-shadow: 0 3px 8px rgba(30, 126, 52, .25);
}

.alertes-details-flags > .flag.off[b-abmbrxr8v9] {
    background: var(--a-bg);
    color: var(--a-faint);
    border-color: rgba(0, 0, 0, .08);
}

.alertes-details-flags > .flag.off:hover[b-abmbrxr8v9] {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
}

/* --- Documents (garde sa taille naturelle ; ancré en bas par :last-child) --- */

.alertes-details-docs .label[b-abmbrxr8v9] {
    display: block;

    font-size: .75em;
    font-weight: 600;
    color: var(--a-faint);
    text-transform: uppercase;
}

.alertes-details-docs ul[b-abmbrxr8v9] {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: clamp(.1rem, .7cqb, .3rem);

    list-style: none;
}

.alertes-details-docs ul li a[b-abmbrxr8v9] {
    display: block;

    font-size: .9em;
    color: var(--a-accent);
    text-decoration: none;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Soulignement animé au survol */
    background-image: linear-gradient(var(--a-accent), var(--a-accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;

    transition: background-size .2s ease, color .2s ease;
}

.alertes-details-docs ul li a:hover[b-abmbrxr8v9] {
    color: var(--a-accent-dark);
    background-size: 100% 1px;
}


/* --------------------------------------------------------------------------
   6. État vide
   -------------------------------------------------------------------------- */

.empty-alertes-details[b-abmbrxr8v9] {
    height: 100%;
    min-height: 200px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--a-bg);
    color: var(--a-muted);
    border: 1px solid var(--a-line-strong);
    border-radius: var(--a-radius);

    font-size: .85rem;
    font-weight: 500;
    letter-spacing: -.01em;
}


/* --------------------------------------------------------------------------
   7. Skeleton de chargement
   -------------------------------------------------------------------------- */

@keyframes alertes-shimmer-b-abmbrxr8v9 {
    from { background-position: -200px 0; }
    to   { background-position: 200px 0; }
}

.alertes-skeleton-list[b-abmbrxr8v9] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.alertes-skeleton-phase[b-abmbrxr8v9] {
    padding: .55rem .8rem;

    display: flex;
    align-items: center;
    gap: .6rem;

    border: 1px solid var(--a-line);
    border-radius: 10px;
}

.alertes-skeleton-bar[b-abmbrxr8v9],
.alertes-skeleton-pill[b-abmbrxr8v9] {
    background: linear-gradient(90deg, #eceef0 0%, var(--a-bg) 40%, #eceef0 80%);
    background-size: 400px 100%;
    animation: alertes-shimmer-b-abmbrxr8v9 1.3s ease-in-out infinite;
}

.alertes-skeleton-bar[b-abmbrxr8v9] {
    height: 10px;
    border-radius: 999px;
}

.alertes-skeleton-bar-name[b-abmbrxr8v9] {
    flex: 1 1 auto;
    max-width: 140px;
}

.alertes-skeleton-bar-progress[b-abmbrxr8v9] {
    flex: 0 0 auto;
    width: 100px;
}

.alertes-skeleton-pill[b-abmbrxr8v9] {
    flex: 0 0 auto;
    width: 26px;
    height: 18px;
    border-radius: 999px;
}

/* Décalage léger de l'animation d'une ligne à l'autre */
.alertes-skeleton-phase:nth-child(2) > *[b-abmbrxr8v9] { animation-delay: .12s; }
.alertes-skeleton-phase:nth-child(3) > *[b-abmbrxr8v9] { animation-delay: .24s; }
.alertes-skeleton-phase:nth-child(4) > *[b-abmbrxr8v9] { animation-delay: .36s; }


/* --------------------------------------------------------------------------
   8. Accessibilité : mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .alertes-phaseBar-alert-circle[b-abmbrxr8v9],
    .alertes-skeleton-bar[b-abmbrxr8v9],
    .alertes-skeleton-pill[b-abmbrxr8v9],
    .alertes-service-submenu[b-abmbrxr8v9] {
        animation: none;
    }
}


/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .alertes-bottomRow[b-abmbrxr8v9] {
        flex-direction: column;
        overflow-y: auto;
    }

    .alertes-col-15[b-abmbrxr8v9],
    .alertes-col-50[b-abmbrxr8v9],
    .alertes-col-30[b-abmbrxr8v9] {
        flex: 0 0 auto;
        max-width: 100%;
    }

    /* Un conteneur « size » sans hauteur explicite s'effondre à 0 :
       on lui en donne une (max-height seul ne suffit pas). */
    .alertes-col-30[b-abmbrxr8v9] {
        height: 60vh;
        overflow-y: auto;
    }
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - phases sur toute la largeur
   - détails = volet fixe collé au bord gauche, qui glisse avec transform
   - ouverture pilotée par la classe .open (paramètre SideOpen)
   - dimensions et animation lues dans les variables --drawer-*
     définies par Alertes.razor.css
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .alertes-layout[b-abmbrxr8v9] { gap: .3rem; }

    .alertes-top[b-abmbrxr8v9] { flex: 0 0 auto; min-height: 0; max-height: none; padding: .25rem; border-radius: 8px; }

    .alertes-bottomRow[b-abmbrxr8v9] { flex-direction: row; gap: 0; overflow: hidden; }

    /* ---------- Colonne du pourcentage ---------- */
    .alertes-col-15[b-abmbrxr8v9] { flex: 0 0 42px; max-width: 42px; gap: .2rem; }
    .alertes-phaseBar-alert[b-abmbrxr8v9],
    .alertes-typeDemand[b-abmbrxr8v9] { padding: .2rem; border-radius: 8px; }
    .alertes-phaseBar-alert-circle[b-abmbrxr8v9] { width: 32px; height: 32px; font-size: .52rem; animation: none; }
    .alertes-typeDemand .value[b-abmbrxr8v9] { font-size: .5rem; }

    /* ---------- Phases : toute la largeur restante ---------- */
    .alertes-col-50[b-abmbrxr8v9] { flex: 1 1 auto; max-width: none; margin-left: .25rem; }
    .alertes-services[b-abmbrxr8v9] { padding: 0 .4rem .4rem; border-radius: 8px; }
    .alertes-stickyHeader[b-abmbrxr8v9] { padding-top: .3rem; }
    .alertes-phaseCardTitle[b-abmbrxr8v9] { min-width: 70px; margin-bottom: .25rem; padding: .3rem .6rem .3rem .5rem; }
    .alertes-phaseCardTitle .labelTitle[b-abmbrxr8v9] { font-size: .55rem; }
    .alertes-services-empty[b-abmbrxr8v9] { font-size: .6rem; padding: .5rem; }

    .alertes-services-menu[b-abmbrxr8v9] { gap: .3rem; }
    .alertes-service-item[b-abmbrxr8v9] { border-radius: 8px; }
    .alertes-service-header[b-abmbrxr8v9] { padding: .3rem .45rem; gap: .35rem; }
    .alertes-service-name[b-abmbrxr8v9] { font-size: .65rem; }
    .alertes-phase-progress[b-abmbrxr8v9] { gap: .25rem; }
    .alertes-phase-progress-bar[b-abmbrxr8v9] { width: 60px; height: 3px; }
    .alertes-phase-progress-pct[b-abmbrxr8v9] { font-size: .55rem; min-width: 24px; }
    .alertes-service-count[b-abmbrxr8v9] { font-size: .55rem; padding: .05rem .4rem; }
    .alertes-service-header .arrow[b-abmbrxr8v9] { font-size: .55rem; }

    .alertes-service-submenu[b-abmbrxr8v9] { padding: .2rem .4rem .35rem; }
    .alertes-tache-item[b-abmbrxr8v9] { gap: .3rem; }
    .alertes-tache-check[b-abmbrxr8v9] { width: 16px; height: 16px; font-size: .52rem; }
    .alertes-tache-pipe[b-abmbrxr8v9] { width: 2px; min-height: 6px; }
    .alertes-tache-rowContent[b-abmbrxr8v9] { gap: .3rem; min-height: 16px; }
    .alertes-tache-titre[b-abmbrxr8v9] { font-size: .65rem; }
    .alertes-tache-auteur[b-abmbrxr8v9] { font-size: .52rem; padding: .06rem .35rem; }
    .alertes-tache-date[b-abmbrxr8v9] { font-size: .52rem; margin-right: 0; }
    .alertes-tache-statut[b-abmbrxr8v9] { font-size: .52rem; padding: .06rem .35rem; }
    .alertes-tache-bar[b-abmbrxr8v9] { width: 22px; height: 3px; }
    .alertes-tache-checkbox[b-abmbrxr8v9] { width: 16px; height: 16px; border-radius: 4px; }
    .alertes-tache-checkbox:checked[b-abmbrxr8v9]::after { width: 4px; height: 7px; }

    /* ---------- Volet des détails : collé au bord gauche ---------- */
    .alertes-col-30[b-abmbrxr8v9] {
        position: fixed;
        top: var(--drawer-top, 178px);
        bottom: var(--drawer-bottom, 66px);   /* laisse la place à la bande des services */
        left: 0;
        right: auto;

        flex: none;
        width: var(--drawer-w, 88vw);
        max-width: var(--drawer-w, 88vw);
        height: auto;
        padding: .4rem;

        z-index: 30;                           /* au-dessus du fond cliquable, sous la languette */
        background: #fff;
        border-radius: 0 0 14px 0;
        overflow: hidden;
        container-type: normal;                /* sinon le volet fixe n'a pas de hauteur propre */

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .alertes-col-30.open[b-abmbrxr8v9] {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Les tailles en cqb dépendent du conteneur : on fixe des valeurs lisibles.
       Tout le reste est en em, donc il suit cette base. */
    .alertes-col-30 > .agentService-details-side[b-abmbrxr8v9] { font-size: .65rem; gap: .35rem; }
    .alertes-col-30 .alertes-card[b-abmbrxr8v9] { padding: .5rem; gap: .15rem; border-radius: 10px; box-shadow: none; }
    .alertes-col-30 .agentService-consultant-avatar[b-abmbrxr8v9] { width: 3em; height: 3em; font-size: .9em; }
    .alertes-col-30 .alertes-details-flags.alertes-card[b-abmbrxr8v9] { gap: .15rem; }
    .alertes-details-flags > .flag[b-abmbrxr8v9] { padding: .08rem .4rem; }
    .alertes-details-docs ul[b-abmbrxr8v9] { gap: .15rem; }

    .empty-alertes-details[b-abmbrxr8v9] { min-height: 80px; font-size: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
    .alertes-col-30[b-abmbrxr8v9] { transition: none; }
}
/* /Components/Pages/Processus/Progression/InfoProgression.razor.rz.scp.css */

/* ==========================================================================
   PROGRESSION — layout, phases / tâches et panneau de détails
   Même design que InfoAlertes (palette --a-*, cartes pliables, timeline).
   Structure :
     .progression-layout
       ├─ .progression-top        (calendrier, 13 %)
       └─ .progression-bottomRow
            ├─ .progression-col-15  (alerte + type de demande, 5 %)
            ├─ .progression-col-50  (phases > tâches, 73 %)
            └─ .progression-col-30  (cartes de détails, 20 %)
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Variables + reset local
   -------------------------------------------------------------------------- */

.progression-layout[b-ynle5gqeas],
.progression-layout *[b-ynle5gqeas],
.progression-layout *[b-ynle5gqeas]::before,
.progression-layout *[b-ynle5gqeas]::after {
    box-sizing: border-box;
}

.progression-layout[b-ynle5gqeas] {
    --a-accent: #c92a2a;
    --a-accent-dark: #a01f1f;
    --a-accent-soft: #fdecec;
    --a-accent-border: #f8d4d4;

    --a-text: #1d1d1f;
    --a-muted: #86868b;
    --a-faint: #a1a1a6;

    --a-bg: #f5f5f7;
    --a-surface: #fff;
    --a-surface-alt: #fafafa;
    --a-track: #e5e5ea;

    --a-line: rgba(0, 0, 0, .06);
    --a-line-strong: rgba(0, 0, 0, .1);
    --a-scroll: rgba(0, 0, 0, .2);

    --a-ok-bg: #e6f4ea;
    --a-ok-text: #1e7e34;
    --a-ok-border: #c9e8d1;
    --a-warn-bg: #fff4e5;
    --a-warn-text: #b26a00;

    --a-radius: 16px;
    --a-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .05);
    --a-shadow-hover: 0 2px 4px rgba(0, 0, 0, .08), 0 14px 30px rgba(0, 0, 0, .12);

    display: flex;
    flex-direction: column;
    gap: .8rem;

    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;

    background: var(--a-bg);
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   1. Ligne du haut : calendrier
   -------------------------------------------------------------------------- */

.progression-top[b-ynle5gqeas] {
    flex: 0 0 9%;
    max-height: 9%;
    min-height: 70px;

    padding: .8rem;

    background: var(--a-surface);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);
    box-shadow: var(--a-shadow);

    overflow: hidden;
}


/* --------------------------------------------------------------------------
   2. Ligne du bas : trois colonnes
   -------------------------------------------------------------------------- */

.progression-bottomRow[b-ynle5gqeas] {
    flex: 1 1 90%;
    min-height: 0;

    display: flex;
    align-items: stretch;
    gap: .8rem;

    overflow: hidden;
}

.progression-col[b-ynle5gqeas] {
    min-width: 0;
    min-height: 0;
    max-height: 100%;

    display: flex;
    flex-direction: column;
    gap: .1rem;

    overflow-y: auto;
}

.progression-col-15[b-ynle5gqeas] {
    flex: 0 0 5%;
    max-width: 5%;
}

.progression-col-50[b-ynle5gqeas] {
    flex: 0 0 73%;
    max-width: 73%;
    overflow: hidden; /* seul .progression-services défile */
}

.progression-col-30[b-ynle5gqeas] {
    flex: 0 0 20%;
    max-width: 20%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--a-scroll) transparent;

    container-type: size;
    container-name: detailsPane;
}

.progression-col-30[b-ynle5gqeas]::-webkit-scrollbar {
    width: 4px;
}

.progression-col-30[b-ynle5gqeas]::-webkit-scrollbar-thumb {
    background: var(--a-scroll);
    border-radius: 999px;
}

.progression-col-30 > .progression-card:last-child[b-ynle5gqeas] {
    margin-top: auto;
}


/* --------------------------------------------------------------------------
   3. Colonne 5 % : alerte + type de demande
   -------------------------------------------------------------------------- */

.progression-phaseBar-alert[b-ynle5gqeas],
.progression-typeDemand[b-ynle5gqeas] {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: .7rem;
    background: var(--a-surface);
    border: 1px solid var(--a-line-strong);
    border-radius: 12px;

    transition: box-shadow .2s ease, border-color .2s ease;
}

.progression-phaseBar-alert:hover[b-ynle5gqeas],
.progression-typeDemand:hover[b-ynle5gqeas] {
    border-color: var(--a-accent-border);
    box-shadow: 0 2px 8px rgba(201, 42, 42, .1);
}

.progression-phaseBar-alert[b-ynle5gqeas] {
    background: var(--a-surface);
    border: 1px solid var(--a-line-strong);
    border-radius: 12px;

    transition: box-shadow .2s ease, border-color .2s ease;
}

@keyframes progression-alert-pulse-b-ynle5gqeas {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 42, 42, .35); }
    50%      { box-shadow: 0 0 0 6px rgba(201, 42, 42, 0); }
}

.progression-phaseBar-alert-circle[b-ynle5gqeas] {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--a-accent-soft);
    color: var(--a-accent);
    border: 1px solid var(--a-accent-border);
    border-radius: 50%;

    font-size: .7rem;
    font-weight: 700;

    animation: progression-alert-pulse-b-ynle5gqeas 2s ease-in-out infinite;
    transition: transform .2s ease;
}

.progression-phaseBar-alert:hover .progression-phaseBar-alert-circle[b-ynle5gqeas] {
    transform: scale(1.08);
}

.progression-typeDemand[b-ynle5gqeas] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;

    padding: .3rem .15rem;
    text-align: center;
}

.progression-typeDemand .value[b-ynle5gqeas] {
    font-size: .6rem;
    color: var(--a-text);
    overflow-wrap: normal;
    word-break: normal;
}

.progression-typeDemand .label[b-ynle5gqeas] {
    font-size: .6rem;
    font-weight: 600;
    color: var(--a-faint);
    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   4. Colonne 73 % : phases > tâches (seul conteneur qui défile)
   -------------------------------------------------------------------------- */

.progression-services[b-ynle5gqeas] {
    flex: 1 1 auto;
    min-height: 0;
    z-index: 5;

    padding: 0 .8rem .8rem;

    background: var(--a-surface);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);

    overflow-y: auto;
}

.progression-services-empty[b-ynle5gqeas] {
    padding: 1rem;

    font-size: .78rem;
    color: var(--a-muted);
    text-align: center;
}

.progression-stickyHeader[b-ynle5gqeas] {
    position: sticky;
    top: 0;
    z-index: 6;

    padding-top: .8rem;
    padding-bottom: .3rem;

    background: var(--a-surface);
}

.progression-phaseCardTitle[b-ynle5gqeas] {
    width: fit-content;
    min-width: 100px;
    margin-bottom: .6rem;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: .5rem .8rem .5rem .6rem;

    background: var(--a-accent-soft);

    clip-path: polygon(100% 0, 12px 0, 0 50%, 12px 100%, 100% 100%);
}

.progression-phaseCardTitle .labelTitle[b-ynle5gqeas] {
    font-size: .65rem;
    font-weight: 600;
    line-height: 1;
    color: var(--a-text);
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Liste des phases --- */

.progression-services-menu[b-ynle5gqeas] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.progression-service-item[b-ynle5gqeas] {
    border: 1px solid var(--a-line);
    border-radius: 10px;
    overflow: hidden;

    transition: box-shadow .2s ease;
}

.progression-service-item:hover[b-ynle5gqeas] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

/* --- En-tête d'une phase : [barre] Phase X [pourcentage] [compteur] [flèche] --- */

.progression-service-header[b-ynle5gqeas] {
    width: 100%;
    padding: .3rem .6rem;

    display: flex;
    align-items: center;
    gap: .5rem;

    background: var(--a-surface);
    border: none;

    text-align: left;
    cursor: pointer;

    transition: background .15s ease;
}

.progression-service-header:hover[b-ynle5gqeas],
.progression-service-header.expanded[b-ynle5gqeas] {
    background: var(--a-accent-soft);
}

.progression-service-header:focus-visible[b-ynle5gqeas] {
    outline: 2px solid var(--a-accent);
    outline-offset: -2px;
}

.progression-phase-left[b-ynle5gqeas] {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: .5rem;
}

.progression-service-name[b-ynle5gqeas] {
    flex: 0 1 auto;
    min-width: 0;

    font-size: .72rem;
    font-weight: 600;
    color: var(--a-text);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progression-service-count[b-ynle5gqeas] {
    margin-left: auto;
    flex: 0 0 auto;
    padding: .1rem .5rem;

    background: var(--a-bg);
    color: var(--a-muted);
    border-radius: 999px;

    font-size: .65rem;
    font-weight: 700;

    transition: background .2s ease, color .2s ease;
}

.progression-service-header:hover .progression-service-count[b-ynle5gqeas],
.progression-service-header.expanded .progression-service-count[b-ynle5gqeas] {
    background: var(--a-surface);
    color: var(--a-accent);
}

.progression-service-header .arrow[b-ynle5gqeas] {
    flex: 0 0 auto;

    font-size: .65rem;
    line-height: 1;
    color: var(--a-accent);
}

/* Phase terminée (100%) : en-tête et barre en vert */

.progression-service-header.done[b-ynle5gqeas] {
    background: var(--a-ok-bg);
}

.progression-service-header.done:hover[b-ynle5gqeas],
.progression-service-header.done.expanded[b-ynle5gqeas] {
    background: var(--a-ok-bg);
}

.progression-service-header.done .progression-service-name[b-ynle5gqeas],
.progression-service-header.done .progression-phase-progress-pct[b-ynle5gqeas],
.progression-service-header.done .arrow[b-ynle5gqeas] {
    color: var(--a-ok-text);
}

.progression-service-header.done .progression-phase-progress-fill[b-ynle5gqeas] {
    background: var(--a-ok-text);
}

.progression-service-header.done .progression-service-count[b-ynle5gqeas] {
    background: var(--a-surface);
    color: var(--a-ok-text);
}

/* --- Barre à gauche du libellé, pourcentage à droite --- */

.progression-phase-progress-bar[b-ynle5gqeas] {
    flex: 0 0 300px;

    height: 4px;

    background: var(--a-track);
    border-radius: 999px;
    overflow: hidden;
}


.progression-phase-progress-fill[b-ynle5gqeas] {
    height: 100%;

    background: var(--a-accent);
    border-radius: 999px;

    transition: width .3s ease;
}

.progression-phase-progress-pct[b-ynle5gqeas] {
    flex: 0 0 auto;
    min-width: 28px;

    font-size: .6rem;
    font-weight: 700;
    color: var(--a-accent);
    text-align: right;

    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

.progression-service-header:hover .progression-phase-progress-pct[b-ynle5gqeas],
.progression-service-header.expanded .progression-phase-progress-pct[b-ynle5gqeas] {
    opacity: 1;
    visibility: visible;
}

/* --- Note d'état de la phase --- */

.progression-phase-etat[b-ynle5gqeas] {
    margin: .3rem 0 .5rem;
    padding: .5rem .7rem;

    background: var(--a-surface-alt);
    border: 1px solid var(--a-line);
    border-radius: 8px;

    font-size: .68rem;
    color: var(--a-muted);
}

/* --- Sous-menu des tâches --- */

@keyframes progression-submenu-in-b-ynle5gqeas {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.progression-service-submenu[b-ynle5gqeas] {
    padding: .3rem .8rem .6rem;

    display: flex;
    flex-direction: column;

    background: var(--a-surface-alt);
    border-top: 1px solid var(--a-line);

    animation: progression-submenu-in-b-ynle5gqeas .2s ease;
}

.progression-tache-item[b-ynle5gqeas] {
    display: flex;
    align-items: stretch;
    gap: .4rem;

    border-radius: 6px;
    transition: background .15s ease;
}

.progression-tache-item:hover[b-ynle5gqeas] {
    background: var(--a-bg);
}

/* Colonne timeline : cercle numéroté + tuyau qui se remplit quand la tâche est terminée */

.progression-tache-timeline-col[b-ynle5gqeas] {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.progression-tache-check[b-ynle5gqeas] {
    position: relative;
    z-index: 2;

    flex: 0 0 auto;
    width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--a-surface);
    color: var(--a-accent);
    border: 1px solid var(--a-accent-border);
    border-radius: 50%;

    font-size: .58rem;
    font-weight: 700;

    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.progression-tache-check.done[b-ynle5gqeas] {
    background: var(--a-ok-text);
    border-color: var(--a-ok-text);
    color: #fff;
}

.progression-tache-pipe[b-ynle5gqeas] {
    position: relative;

    flex: 1 1 auto;
    width: 3px;
    min-height: 8px;

    background: var(--a-track);
    border-radius: 999px;
    overflow: hidden;
}

.progression-tache-pipe-fill[b-ynle5gqeas] {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 0%;

    background: var(--a-ok-text);
    border-radius: 999px;

    transition: height .3s ease;
}

/* Contenu d'une tâche : titre, badges, statut sur une ligne (sans barre de progression) */

.progression-tache-rowContent[b-ynle5gqeas] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 18px;
    padding-bottom: .4rem;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.progression-tache-titre[b-ynle5gqeas] {
    flex: 1 1 auto;
    min-width: 80px;

    font-size: .72rem;
    color: var(--a-text);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progression-tache-auteur[b-ynle5gqeas] {
    flex: 0 0 auto;
    max-width: 6rem;
    padding: .1rem .45rem;

    background: var(--a-bg);
    color: var(--a-muted);
    border-radius: 999px;

    font-size: .58rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progression-tache-echeance[b-ynle5gqeas] {
    flex: 0 0 auto;
    padding: .1rem .45rem;

    background: var(--a-warn-bg);
    color: var(--a-warn-text);
    border-radius: 999px;

    font-size: .58rem;
    font-weight: 600;
    white-space: nowrap;
}

.progression-tache-date[b-ynle5gqeas] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;

    font-size: .65em;
    opacity: .7;
    white-space: nowrap;
}

.progression-tache-sep[b-ynle5gqeas] {
    opacity: .5;
}

.progression-tache-statut[b-ynle5gqeas] {
    flex: 0 0 auto;
    padding: .1rem .45rem;

    background: var(--a-bg);
    color: var(--a-muted);
    border-radius: 999px;

    font-size: .58rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;

    transition: transform .15s ease;
}

.progression-tache-item:hover .progression-tache-statut[b-ynle5gqeas] {
    transform: translateY(-1px);
}

.progression-tache-statut.done[b-ynle5gqeas] {
    background: var(--a-ok-bg);
    color: var(--a-ok-text);
}

.progression-tache-statut.current[b-ynle5gqeas] {
    background: var(--a-accent-soft);
    color: var(--a-accent);
}

.progression-tache-statut.blocked[b-ynle5gqeas] {
    background: var(--a-warn-bg);
    color: var(--a-warn-text);
}

.progression-tache-statut.pending[b-ynle5gqeas] {
    background: var(--a-bg);
    color: var(--a-muted);
}


/* --------------------------------------------------------------------------
   5. Colonne 20 % : panneau de détails
   -------------------------------------------------------------------------- */

.progression-card[b-ynle5gqeas] {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;

    padding: .85rem;

    background: var(--a-surface);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);
    box-shadow: var(--a-shadow);
    transition: box-shadow .2s ease;
}

.progression-card:hover[b-ynle5gqeas] {
    box-shadow: var(--a-shadow-hover);
}

.progression-label[b-ynle5gqeas] {
    font-size: .55rem;
    font-weight: 600;
    color: var(--a-faint);
    text-transform: uppercase;
}

.progression-service-title[b-ynle5gqeas] {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;

    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--a-text);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progression-pills[b-ynle5gqeas] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.progression-pill[b-ynle5gqeas] {
    padding: .05rem .45rem;

    background: var(--a-accent-soft);
    color: var(--a-accent);
    border: 1px solid var(--a-accent-border);
    border-radius: 999px;

    font-size: .52rem;
    font-weight: 700;
    white-space: nowrap;
}

.progression-serviceCard[b-ynle5gqeas] {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

.progression-service-line[b-ynle5gqeas] {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: .4rem;
}

.progression-service-line .progression-pills[b-ynle5gqeas] {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.progression-consultant-avatar[b-ynle5gqeas] {
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--a-accent-soft);
    color: var(--a-accent);
    border: 1px solid var(--a-accent-border);
    border-radius: 50%;

    font-size: .65rem;
    font-weight: 700;
    overflow: hidden;
}

.progression-consultant-avatar img[b-ynle5gqeas] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.progression-card-head[b-ynle5gqeas] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.progression-card-head .progression-label[b-ynle5gqeas] {
    margin: 0;
}

.progression-field[b-ynle5gqeas] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;

    padding: .12rem 0;
    border-radius: 6px;
    transition: background-color .15s ease;
}

.progression-field:hover[b-ynle5gqeas] {
    background-color: var(--a-bg);
}

.progression-field-label[b-ynle5gqeas] {
    flex: 0 0 auto;

    font-size: .55rem;
    font-weight: 600;
    color: var(--a-faint);
    text-transform: uppercase;
}

.progression-field-value[b-ynle5gqeas] {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;

    font-size: .7rem;
    color: var(--a-text);
    text-align: right;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s ease;
}

.progression-field:hover .progression-field-value[b-ynle5gqeas] {
    color: var(--a-accent);
}

.progression-field-value--scroll[b-ynle5gqeas] {
    overflow-x: auto;
    text-overflow: clip;
    scrollbar-width: thin;
    scrollbar-color: var(--a-scroll) transparent;
}

.progression-field-value--scroll[b-ynle5gqeas]::-webkit-scrollbar {
    height: 3px;
}

.progression-field-value--scroll[b-ynle5gqeas]::-webkit-scrollbar-thumb {
    background: var(--a-scroll);
    border-radius: 999px;
}

.progression-flags[b-ynle5gqeas] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .2rem;
}

.progression-flag[b-ynle5gqeas] {
    display: inline-block;
    padding: .1rem .45rem;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: .52rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;

    transition: transform .15s ease, box-shadow .15s ease;
}

.progression-flag:hover[b-ynle5gqeas] {
    transform: translateY(-2px) scale(1.05);
}

.progression-flag.on[b-ynle5gqeas] {
    background: var(--a-ok-bg);
    color: var(--a-ok-text);
    border-color: var(--a-ok-border);
}

.progression-flag.on:hover[b-ynle5gqeas] {
    box-shadow: 0 3px 8px rgba(30, 126, 52, .25);
}

.progression-flag.off[b-ynle5gqeas] {
    background: var(--a-bg);
    color: var(--a-faint);
    border-color: rgba(0, 0, 0, .08);
}

.progression-flag.off:hover[b-ynle5gqeas] {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
}

.progression-docs[b-ynle5gqeas] {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: .2rem;
    list-style: none;
}

.progression-docs li a[b-ynle5gqeas] {
    display: block;

    font-size: .65rem;
    color: var(--a-accent);
    text-decoration: none;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    background-image: linear-gradient(var(--a-accent), var(--a-accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size .2s ease, color .2s ease;
}

.progression-docs li a:hover[b-ynle5gqeas] {
    color: var(--a-accent-dark);
    background-size: 100% 1px;
}


/* --------------------------------------------------------------------------
   6. État vide
   -------------------------------------------------------------------------- */

.empty-progression-details[b-ynle5gqeas] {
    height: 100%;
    min-height: 200px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--a-bg);
    color: var(--a-muted);
    border: 1px solid var(--a-line-strong);
    border-radius: var(--a-radius);

    font-size: .85rem;
    font-weight: 500;
    letter-spacing: -.01em;
}


/* --------------------------------------------------------------------------
   7. Flèches de phase (sous le tableau)
   -------------------------------------------------------------------------- */

.progression-phaseArrows[b-ynle5gqeas] {
    flex: 0 0 auto;

    display: flex;
    gap: .1rem;

    width: 100%;
    height: 20px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;

    margin-bottom: 10px;
}

.progression-phaseArrows[b-ynle5gqeas]::-webkit-scrollbar {
    display: none;
}

.progression-phaseArrow-item[b-ynle5gqeas] {
    flex: 1 1 0;
    min-width: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 .8rem 0 .6rem;
    margin: 0 .8rem 0 .6rem;

    background: var(--a-surface);
    border: none;
    color: var(--a-text);

    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    cursor: pointer;
    transition: filter .2s ease, transform .2s ease;

    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

.progression-phaseArrow-item:hover[b-ynle5gqeas] {
    filter: brightness(.96);
}

.progression-phaseArrow-item.done[b-ynle5gqeas] {
    background: var(--a-accent);
    color: #fff;
}

.progression-phaseArrow-item.current[b-ynle5gqeas],
.progression-phaseArrow-item.expanded[b-ynle5gqeas] {
    background: var(--a-accent-soft);
    color: var(--a-accent);
}


/* --------------------------------------------------------------------------
   8. Accessibilité
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .progression-phaseBar-alert-circle[b-ynle5gqeas],
    .progression-service-submenu[b-ynle5gqeas] {
        animation: none;
    }
}


/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .progression-bottomRow[b-ynle5gqeas] {
        flex-direction: column;
        overflow-y: auto;
    }

    .progression-col-15[b-ynle5gqeas],
    .progression-col-50[b-ynle5gqeas],
    .progression-col-30[b-ynle5gqeas] {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .progression-col-30[b-ynle5gqeas] {
        height: 60vh;
        overflow-y: auto;
    }
}

/* --- Actions de l'en-tête "Process" (cloche + email), à droite --- */

.progression-stickyHeader[b-ynle5gqeas] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.progression-header-actions[b-ynle5gqeas] {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.progression-icon-btn[b-ynle5gqeas] {
    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--a-surface);
    border: 1px solid var(--a-line-strong);
    border-radius: 50%;

    font-size: .75rem;
    cursor: pointer;

    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.progression-icon-btn:hover[b-ynle5gqeas] {
    background: var(--a-accent-soft);
    border-color: var(--a-accent-border);
    transform: translateY(-1px);
}

/* --- Cloche de rappel sur une tâche : visible seulement au survol du nom --- */

.progression-tache-assigne-group[b-ynle5gqeas] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.progression-tache-bell[b-ynle5gqeas] {
    width: 16px;
    height: 16px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;

    font-size: .6rem;
    line-height: 1;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

.progression-tache-assigne-group:hover .progression-tache-bell[b-ynle5gqeas] {
    opacity: 1;
    visibility: visible;
}

.progression-icon-btn[b-ynle5gqeas] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s;
}

.progression-icon-btn:hover[b-ynle5gqeas] {
    background: #f1f1f1;
}

.progression-icon-btn svg[b-ynle5gqeas] {
    display: block;
}

.progression-icon-wrapper[b-ynle5gqeas] {
    position: relative;
    display: inline-flex;
}

.plus-one-bubble[b-ynle5gqeas] {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: #16a34a;
    pointer-events: none;
    white-space: nowrap;
    animation: plus-one-float-b-ynle5gqeas 0.9s ease-out forwards;
}

@keyframes plus-one-float-b-ynle5gqeas {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.8);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -4px) scale(1.05);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -28px) scale(1);
    }
}

.progression-alert-badge[b-ynle5gqeas] {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #f59e0b;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    min-width: 15px;
    height: 15px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    pointer-events: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - une seule colonne (les phases) sur toute la largeur
   - détails = volet fixe collé au bord gauche, qui glisse avec transform
   - ouverture pilotée par la classe .open (paramètre SideOpen)
   - dimensions et animation lues dans les variables --drawer-*
     définies par Progression.razor.css
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .progression-layout[b-ynle5gqeas] { gap: .3rem; }

    .progression-top[b-ynle5gqeas] {
        flex: 0 0 auto;
        min-height: 0;
        max-height: none;
        padding: .25rem;
        border-radius: 8px;
    }

    .progression-bottomRow[b-ynle5gqeas] { flex-direction: row; gap: 0; overflow: hidden; }

    /* ---------- Colonne du pourcentage ---------- */
    .progression-col-15[b-ynle5gqeas] { flex: 0 0 42px; max-width: 42px; gap: .2rem; }
    .progression-phaseBar-alert[b-ynle5gqeas],
    .progression-typeDemand[b-ynle5gqeas] { padding: .2rem; border-radius: 8px; }
    .progression-phaseBar-alert-circle[b-ynle5gqeas] { width: 32px; height: 32px; font-size: .52rem; animation: none; }
    .progression-typeDemand .value[b-ynle5gqeas] { font-size: .5rem; }

    /* ---------- Phases : toute la largeur restante ---------- */
    .progression-col-50[b-ynle5gqeas] { flex: 1 1 auto; max-width: none; margin-left: .25rem; }
    .progression-services[b-ynle5gqeas] { padding: 0 .4rem .4rem; border-radius: 8px; }
    .progression-stickyHeader[b-ynle5gqeas] { padding-top: .3rem; }
    .progression-phaseCardTitle[b-ynle5gqeas] { min-width: 70px; margin-bottom: .25rem; padding: .3rem .6rem .3rem .5rem; }
    .progression-phaseCardTitle .labelTitle[b-ynle5gqeas] { font-size: .55rem; }
    .progression-icon-btn[b-ynle5gqeas] { width: 22px; height: 22px; padding: 2px; }
    .progression-icon-btn svg[b-ynle5gqeas] { width: 16px; height: 16px; }
    .progression-alert-badge[b-ynle5gqeas] { font-size: .5rem; min-width: 13px; height: 13px; top: -4px; right: -5px; }

    .progression-services-menu[b-ynle5gqeas] { gap: .3rem; }
    .progression-service-item[b-ynle5gqeas] { border-radius: 8px; }
    .progression-service-header[b-ynle5gqeas] { padding: .3rem .45rem; gap: .35rem; }
    .progression-phase-left[b-ynle5gqeas] { gap: .35rem; }
    .progression-service-name[b-ynle5gqeas] { font-size: .65rem; }
    .progression-phase-progress-bar[b-ynle5gqeas] { flex: 1 1 auto; max-width: 120px; height: 3px; }
    .progression-phase-progress-pct[b-ynle5gqeas] { font-size: .55rem; min-width: 24px; }
    .progression-service-count[b-ynle5gqeas] { font-size: .55rem; padding: .05rem .4rem; }
    .progression-service-header .arrow[b-ynle5gqeas] { font-size: .55rem; }

    .progression-phase-etat[b-ynle5gqeas] { font-size: .6rem; padding: .3rem .5rem; margin: .2rem 0 .3rem; }
    .progression-service-submenu[b-ynle5gqeas] { padding: .2rem .4rem .35rem; }
    .progression-tache-item[b-ynle5gqeas] { gap: .3rem; }
    .progression-tache-check[b-ynle5gqeas] { width: 16px; height: 16px; font-size: .52rem; }
    .progression-tache-pipe[b-ynle5gqeas] { width: 2px; min-height: 6px; }
    .progression-tache-rowContent[b-ynle5gqeas] { gap: .25rem; padding-bottom: .25rem; min-height: 16px; }
    .progression-tache-titre[b-ynle5gqeas] { font-size: .65rem; min-width: 60px; }
    .progression-tache-auteur[b-ynle5gqeas],
    .progression-tache-echeance[b-ynle5gqeas],
    .progression-tache-statut[b-ynle5gqeas] { font-size: .52rem; padding: .06rem .35rem; }
    .progression-tache-date[b-ynle5gqeas] { font-size: .52rem; }
    .progression-tache-bell[b-ynle5gqeas] { opacity: 1; visibility: visible; font-size: .6rem; width: 14px; height: 14px; }
    .progression-services-empty[b-ynle5gqeas] { font-size: .6rem; padding: .5rem; }

    /* ---------- Volet des détails : collé au bord gauche ---------- */
    .progression-col-30[b-ynle5gqeas] {
        position: fixed;
        top: var(--drawer-top, 178px);
        bottom: var(--drawer-bottom, 66px);   /* laisse la place à la bande des services */
        left: 0;
        right: auto;

        width: var(--drawer-w, 88vw);
        max-width: var(--drawer-w, 88vw);
        height: auto;
        padding: .4rem;
        gap: .35rem;

        z-index: 30;                           /* au-dessus du fond cliquable, sous la languette */
        background: #fff;
        border-radius: 0 0 14px 0;
        overflow-x: hidden;
        overflow-y: auto;
        container-type: normal;                /* le conteneur 'size' empêcherait le volet de se dimensionner */

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .progression-col-30.open[b-ynle5gqeas] {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* ---------- Cartes du volet ---------- */
    .progression-card[b-ynle5gqeas] { padding: .5rem; border-radius: 10px; gap: .15rem; box-shadow: none; }
    .progression-label[b-ynle5gqeas] { font-size: .55rem; }
    .progression-service-title[b-ynle5gqeas] { font-size: .72rem; }
    .progression-pill[b-ynle5gqeas] { font-size: .55rem; padding: .05rem .4rem; }
    .progression-consultant-avatar[b-ynle5gqeas] { width: 30px; height: 30px; font-size: .6rem; }
    .progression-field[b-ynle5gqeas] { padding: .1rem 0; gap: .4rem; }
    .progression-field-label[b-ynle5gqeas] { font-size: .52rem; }
    .progression-field-value[b-ynle5gqeas] { font-size: .65rem; }
    .progression-flag[b-ynle5gqeas] { font-size: .52rem; padding: .08rem .4rem; }
    .progression-docs li a[b-ynle5gqeas] { font-size: .6rem; }

    /* ---------- Flèches de phases ---------- */
    .progression-phaseArrows[b-ynle5gqeas] { height: 18px; margin-bottom: 2px; }
    .progression-phaseArrow-item[b-ynle5gqeas] {
        min-width: 50px;
        margin: 0 .3rem 0 .2rem;
        padding: 0 .4rem 0 .3rem;
        font-size: .55rem;
    }

    .empty-progression-details[b-ynle5gqeas] { min-height: 80px; font-size: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
    .progression-col-30[b-ynle5gqeas] { transition: none; }
}
/* /Components/Pages/Processus/Progression/Progression.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   Page Progression : mise en page générale
   ═══════════════════════════════════════════════ */

.progression-page[b-mwma99gs7w] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES AGENTS (bureau)
========================================== */

.progression-sticky[b-mwma99gs7w] {
    position: fixed;
    top: 85px;
    left: 250px;
    right: 70px;
    height: 135px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 16px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.progression-content[b-mwma99gs7w] {
    position: fixed;
    top: 195px;
    bottom: 60px;
    left: 218px;
    right: 20px;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

.progression-top[b-mwma99gs7w] {
    flex: 1;
    min-height: 0;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
    padding: 1rem;
}

/* Bande des services */
.progression-bottom[b-mwma99gs7w] {
    position: fixed;
    bottom: 13px;
    left: 250px;
    right: 70px;

    z-index: 0;

    background: #fff;
    padding: .3rem;

    border-top: 1px solid #eee;
    border-radius: 12px 12px 0 0;

    animation: slideDown .3s ease;
    overflow: hidden;
}

.empty-progression[b-mwma99gs7w] {
    height: 0%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languette et fond cliquable : cachés sur ordinateur */
.progression-content .drawer-tab[b-mwma99gs7w],
.progression-content .drawer-backdrop[b-mwma99gs7w] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - le volet (dans InfoProgression) et la languette glissent
     ensemble (transform) : même durée, même courbe, même distance
   - un clic en dehors du volet le referme (fond cliquable)
   - la bande des agents (z-index 1000) et la bande des services
     (z-index 25) restent cliquables au-dessus du fond
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des agents : pleine largeur, sans coins arrondis */
    .progression-sticky[b-mwma99gs7w] {
        top: 94px;
        left: 0;
        right: 0;
        height: 84px;
        padding: 2px 4px;
        border-radius: 0;
        border-bottom: 0;
    }

    /* Cadre : bord à bord, collé sous la bande.
       Les variables --drawer-* sont lues par le volet (InfoProgression.razor.css). */
    .progression-content[b-mwma99gs7w] {
        --drawer-top: 178px;                        /* = bas de la bande (94 + 84) */
        --drawer-bottom: 66px;                      /* laisse la place à la bande des services */
        --drawer-w: 88vw;
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--drawer-top);
        bottom: var(--drawer-bottom);
        left: 0;
        right: 0;
        gap: 0;
        padding: 0;
        border-radius: 0;
        overflow: visible;
    }

    .progression-top[b-mwma99gs7w] {
        padding: .25rem;
        border-radius: 0;
    }

    /* Bande des services : au-dessus du fond cliquable, sous le volet */
    .progression-bottom[b-mwma99gs7w] {
        left: 0;
        right: 0;
        bottom: 6px;
        height: 40px;
        padding: .15rem;
        border-radius: 10px 10px 0 0;
        z-index: 25;
    }

    .empty-progression[b-mwma99gs7w] { font-size: .6rem; }

    /* Clic en dehors du volet : le referme (sous le volet et la languette) */
    .progression-content .drawer-backdrop[b-mwma99gs7w] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Languette collée au bord gauche de l'écran ---------- */
    .progression-content .drawer-tab[b-mwma99gs7w] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        left: 0;
        z-index: 40;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        border-radius: 0 10px 10px 0;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .progression-content .drawer-tab:hover[b-mwma99gs7w] {
        background: rgba(225, 110, 110, .98);
    }

    .progression-content.side-open .drawer-tab-left[b-mwma99gs7w] {
        transform: translate(var(--drawer-w), -50%);    /* suit le bord du volet */
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    .progression-sticky[b-mwma99gs7w] {
        height: 54px;
        padding: 1px 4px;
    }

    .progression-content[b-mwma99gs7w] {
        --drawer-top: 148px;                        /* = bas de la bande (94 + 54) */
        --drawer-bottom: 50px;
        --drawer-w: 52vw;
    }

    .progression-bottom[b-mwma99gs7w] { height: 40px; }

    .progression-content .drawer-tab[b-mwma99gs7w] {
        width: 16px;
        height: 38px;
    }
}
/* /Components/Pages/Processus/Rapports/InfoRapportsProcessus.razor.rz.scp.css */
/* ==========================================================================
   Rapports Processus
   Structure :
     .layout
       ├─ .top          (calendrier, 13 %)
       └─ .bottomRow
            ├─ .col-15  (alerte + type de demande, 5 %)
            ├─ .col-50  (barres de phase + flèches, 73 %)
            └─ .col-30  (cartes de détails, 20 %)
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Variables + reset local
   -------------------------------------------------------------------------- */

.rapportsProcessus-layout[b-w5vl6z7f92],
.rapportsProcessus-layout *[b-w5vl6z7f92],
.rapportsProcessus-layout *[b-w5vl6z7f92]::before,
.rapportsProcessus-layout *[b-w5vl6z7f92]::after {
    box-sizing: border-box;
}

.rapportsProcessus-layout[b-w5vl6z7f92] {
    /* Palette */
    --rp-accent: #f57575;
    --rp-accent-bloque: #eee;
    --rp-accent-soft: #fdecec;
    --rp-accent-soft-text: #c72121;
    --rp-accent-border: #f36969;
    --rp-accent-strong: #fbdede;
    --rp-bg: #f6f4f4;
    --rp-surface: #fff;
    --rp-surface-alt: #f9fafb;
    --rp-border: #e5e7eb;
    --rp-border-soft: #eee;
    --rp-text: #111827;
    --rp-text-2: #374151;
    --rp-muted: #6b7280;
    --rp-muted-light: #9ca3af;
    --rp-ok-bg: #e6f4ea;
    --rp-ok-text: #1e7e34;
    --rp-ok-border: #c9e8d1;
    --rp-warn-bg: #fff8e1;
    --rp-warn-text: #a06b00;

    /* Gabarit de la table de phases (en-tête et lignes partagent les mêmes valeurs).
       --rp-col-bar est une piste FLEXIBLE (minmax(.., 1fr)) : c'est elle qui absorbe
       tout l'espace restant pour que la ligne s'étire jusqu'à l'extrémité de la bande. */
    --rp-col-num: 24px;
    --rp-col-bar: minmax(220px, 1fr);
    --rp-col-selects: 330px;
    --rp-col-updated: 110px;
    --rp-col-actions: 130px;
    --rp-col-toggle: 20px;
    --rp-col-gap: .3rem;
    --rp-row-pad-x: .7rem;
    --rp-row-accent: 4px; /* largeur du liseré gauche de chaque ligne */

    display: flex;
    flex-direction: column;
    gap: .8rem;

    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;

    background: var(--rp-bg);
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   1. Ligne du haut : calendrier
   -------------------------------------------------------------------------- */

.rapportsProcessus-top[b-w5vl6z7f92] {
    flex: 0 0 9%;
    max-height: 9%;
    min-height: 70px;

    padding: .8rem;

    background: var(--rp-surface);
    border-radius: 12px;
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   2. Ligne du bas : trois colonnes
   -------------------------------------------------------------------------- */

.rapportsProcessus-bottomRow[b-w5vl6z7f92] {
    flex: 1 1 90%;
    min-height: 0;

    display: flex;
    align-items: stretch;
    gap: .8rem;

    overflow: hidden;
}

.rapportsProcessus-col[b-w5vl6z7f92] {
    min-width: 0;
    min-height: 0;
    max-height: 100%;

    display: flex;
    flex-direction: column;
    gap: .1rem;

    overflow-y: auto;
}

/* Les noms 15 / 50 / 30 sont hérités du balisage ; les largeurs réelles sont 5 / 73 / 20 %. */
.rapportsProcessus-col-15[b-w5vl6z7f92] {
    flex: 0 0 5%;
    max-width: 5%;
}

.rapportsProcessus-col-50[b-w5vl6z7f92] {
    flex: 0 0 73%;
    max-width: 73%;
    overflow: hidden; /* le seul scroll vertical est celui de .phaseBars */
}

.rapportsProcessus-col-30[b-w5vl6z7f92] {
    flex: 0 0 20%;
    max-width: 20%;
    overflow: hidden;

    /* Permet d'utiliser les unités cqb dans les cartes de détails */
    container-type: size;
    container-name: detailsPane;
}


/* --------------------------------------------------------------------------
   3. Colonne 5 % : alerte + type de demande
   -------------------------------------------------------------------------- */

.rapportsProcessus-phaseBar-alert[b-w5vl6z7f92] {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: .7rem;
    background: var(--a-surface);
    border: 1px solid var(--a-line-strong);
    border-radius: 12px;

    transition: box-shadow .2s ease, border-color .2s ease;
}

.rapportsProcessus-phaseBar-alert-circle[b-w5vl6z7f92] {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--rp-accent-soft);
    color: var(--rp-accent-soft-text);
    border: 1px solid var(--rp-accent-border);
    border-radius: 50%;

    font-size: .8rem;
    font-weight: 700;
}

.rapportsProcessus-typeDemand[b-w5vl6z7f92] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;

    padding: .55rem;

    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: 10px;
}

.rapportsProcessus-typeDemand .label[b-w5vl6z7f92] {
    font-size: .6rem;
    font-weight: 600;
    color: var(--rp-muted-light);
    text-transform: uppercase;
}

.rapportsProcessus-typeDemand .value[b-w5vl6z7f92] {
    font-size: .78rem;
    color: var(--rp-text);
    overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   4. Colonne 73 % : barres de phase
   -------------------------------------------------------------------------- */

.rapportsProcessus-phaseBars[b-w5vl6z7f92] {
    flex: 1 1 auto;
    min-height: 0;

    padding: 0 .8rem .8rem;

    background: var(--rp-surface);
    border: 1px solid var(--rp-border-soft);
    border-radius: 12px;

    overflow: auto;
}

.rapportsProcessus-phaseBars > *[b-w5vl6z7f92] {
    width: 100%;
}

/* --- En-tête sticky --- */

.rapportsProcessus-stickyHeader[b-w5vl6z7f92] {
    position: sticky;
    top: 0;
    z-index: 6;

    padding-top: .8rem;
    padding-bottom: .3rem;

    background: var(--rp-surface);
}

.rapportsProcessus-phaseCardTitle[b-w5vl6z7f92] {
    width: fit-content;
    min-width: 100px;
    margin-bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: .5rem .8rem .5rem .6rem;

    background: var(--rp-accent-soft);

    clip-path: polygon(100% 0, 12px 0, 0 50%, 12px 100%, 100% 100%);
}

.rapportsProcessus-phaseCardTitle .labelTitle[b-w5vl6z7f92] {
    font-size: .65rem;
    font-weight: 600;
    line-height: 1;
    color: var(--rp-text-2);
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Grille commune aux en-têtes de phase --- */

.rapportsProcessus-phaseBar-columns[b-w5vl6z7f92] {
    width: 100%;

    display: grid;
    grid-template-columns:
        var(--rp-col-num)
        var(--rp-col-bar)
        var(--rp-col-selects)
        var(--rp-col-updated)
        var(--rp-col-actions)
        var(--rp-col-toggle);
    align-items: center;
    gap: var(--rp-col-gap);
}

/* --------------------------------------------------------------------------
   4.1 Chaque phase = un <table> : <thead> = ligne de phase, <tbody> = tâches
   -------------------------------------------------------------------------- */

.rapportsProcessus-phaseBars-list[b-w5vl6z7f92] {
    margin-top: .6rem;

    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.rapportsProcessus-phase-table[b-w5vl6z7f92] {
    width: 100%;
    border-collapse: collapse;

    background: var(--rp-surface);
    border: 1px solid var(--rp-border-soft);
    border-radius: 10px;

    overflow: hidden;
}

.rapportsProcessus-phase-head-cell[b-w5vl6z7f92] {
    padding: 0;

    background: var(--rp-surface);
    border-left: var(--rp-row-accent) solid transparent;

    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

/* Survol : chaque ligne de phase change de couleur, quel que soit son état */
.rapportsProcessus-phase-head-cell:hover[b-w5vl6z7f92] {
    background: var(--rp-accent-soft) !important;
    border-left-color: var(--rp-accent);
}

/* Ligne de phase compactée : padding vertical réduit */
.rapportsProcessus-phase-table .rapportsProcessus-phaseBar-row[b-w5vl6z7f92] {
    width: 100%;
    padding: .32rem var(--rp-row-pad-x);
}

.rapportsProcessus-phase-table--none .rapportsProcessus-phase-head-cell[b-w5vl6z7f92] {
    background: var(--rp-surface-alt);
    border-left-color: var(--rp-border);
}

.rapportsProcessus-phase-table--overdue .rapportsProcessus-phase-head-cell[b-w5vl6z7f92] {
    background: var(--rp-accent-soft) !important;
    border-left-color: var(--rp-accent);
}

.rapportsProcessus-phase-table--soon .rapportsProcessus-phase-head-cell[b-w5vl6z7f92] {
    background: var(--rp-warn-bg) !important;
    border-left-color: var(--rp-warn-text);
}

.rapportsProcessus-phase-table--done .rapportsProcessus-phase-head-cell[b-w5vl6z7f92] {
    background: var(--rp-ok-bg) !important;
    border-left-color: var(--rp-ok-text);
}

.rapportsProcessus-phase-table.is-expanded .rapportsProcessus-phase-head-cell[b-w5vl6z7f92] {
    background: var(--rp-accent-soft) !important;
    border-left-color: var(--rp-accent);
}

.rapportsProcessus-phase-table.is-expanded .rapportsProcessus-phaseBar-toggle[b-w5vl6z7f92] {
    color: var(--rp-accent);
}

/* Numéro de phase, réduit pour suivre la ligne plus fine */
.rapportsProcessus-phaseBar-number[b-w5vl6z7f92] {
    width: 18px;
    height: 18px;

    font-size: .64rem;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--rp-surface);
    color: var(--rp-text-2);
    border: 1px solid var(--rp-border);
    border-radius: 50%;

    font-weight: 700;

    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.rapportsProcessus-phaseBar-number--done[b-w5vl6z7f92] {
    background: var(--rp-ok-bg);
    color: var(--rp-ok-text);
    border-color: var(--rp-ok-border);
}

.rapportsProcessus-tache-ordre[b-w5vl6z7f92] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;

    background: var(--rp-surface);
    color: var(--rp-text-2);
    border: 1px solid var(--rp-border);
    border-radius: 50%;

    font-size: .55rem;
    font-weight: 700;

    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.rapportsProcessus-tache-ordre--done[b-w5vl6z7f92] {
    background: var(--rp-ok-bg);
    color: var(--rp-ok-text);
    border-color: var(--rp-ok-border);
}

.rapportsProcessus-tache-echeance-group[b-w5vl6z7f92] {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.rapportsProcessus-tache-encours[b-w5vl6z7f92] {
    flex: 0 0 auto;
    display: inline-block;

    padding: .05rem .35rem;
    border-radius: 5px;

    font-size: .55rem;
    font-weight: 700;
    white-space: nowrap;

    background: var(--rp-warn-bg);
    color: var(--rp-warn-text);
    border: 1px solid var(--rp-warn-text);
}

/* Piste de progression, réduite */
.rapportsProcessus-phaseBar-track[b-w5vl6z7f92] {
    position: relative;
    width: 70%;
    height: 6px;

    background: #f3f4f6;
    border: 1px solid var(--rp-border);
    border-radius: 999px;
    overflow: hidden;
}

.rapportsProcessus-phaseBar-fill[b-w5vl6z7f92] {
    height: 100%;

    background: var(--rp-accent);
    border-radius: 999px;

    transition: width .3s ease;
}

/* --- Selects (groupe / priorité / statut / actions) --- */

.rapportsProcessus-phaseBar-select[b-w5vl6z7f92] {
    width: 100%;
    padding: .16rem .28rem;
    font-size: .62rem;

    background: var(--rp-surface);
    color: var(--rp-text-2);
    border: 1px solid var(--rp-border);
    border-radius: 6px;

    cursor: pointer;

    transition: border-color .2s ease;
}

.rapportsProcessus-phaseBar-select:hover[b-w5vl6z7f92],
.rapportsProcessus-phaseBar-select:focus[b-w5vl6z7f92] {
    border-color: var(--rp-accent);
    outline: none;
}

.rapportsProcessus-phaseBar-select:focus-visible[b-w5vl6z7f92] {
    box-shadow: 0 0 0 2px var(--rp-accent-border);
}

.rapportsProcessus-phaseBar-select--groupe[b-w5vl6z7f92] {
    font-weight: 600;
}

.rapportsProcessus-phaseBar-selectGroup[b-w5vl6z7f92] {
    display: flex;
    justify-content: space-between;
    gap: .2rem;
    min-width: 0;
}

.rapportsProcessus-phaseBar-selectGroup > *[b-w5vl6z7f92] {
    flex: 1 1 0;
    min-width: 0;
}

/* --- Colonne « Mis à jour » --- */

.rapportsProcessus-phaseBar-updated[b-w5vl6z7f92] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.rapportsProcessus-phaseBar-updated .value[b-w5vl6z7f92] {
    font-size: .68rem;
    color: var(--rp-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Bouton déplier / replier --- */

.rapportsProcessus-phaseBar-toggle[b-w5vl6z7f92] {
    width: 20px;
    height: 20px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--rp-surface);
    color: var(--rp-accent);
    border: 1px solid var(--rp-surface);
    border-radius: 50%;

    cursor: pointer;
    transition: background .2s ease;
}

.rapportsProcessus-phaseBar-toggle .arrow[b-w5vl6z7f92] {
    font-size: .6rem;
    line-height: 1;
}

.rapportsProcessus-phaseBar-toggle:hover[b-w5vl6z7f92] {
    background: var(--rp-accent-soft);
}

/* --------------------------------------------------------------------------
   4.2 Corps du tableau déplié : tâches compactes, sans trait entre les lignes,
   statut aligné à droite.
   -------------------------------------------------------------------------- */

.rapportsProcessus-phase-table tbody[b-w5vl6z7f92] {
    background: var(--rp-surface-alt);
}

/* Pas de border-top : les tâches s'enchaînent sans trait de séparation,
   seul le survol distingue une ligne. */
.rapportsProcessus-tache-row[b-w5vl6z7f92] {
    background: var(--rp-surface-alt);

    transition: background .15s ease;
}

.rapportsProcessus-tache-row:hover[b-w5vl6z7f92] {
    background: var(--rp-accent-soft);
}

.rapportsProcessus-tache-row td[b-w5vl6z7f92] {
    padding: .12rem .5rem;
    vertical-align: middle;

    font-size: .64rem;
}


/* Décalage vers la droite : aligne le contenu des tâches sous la barre de
   progression de la phase plutôt que sous son numéro. */
.rapportsProcessus-tache-row td:first-child[b-w5vl6z7f92] {
    padding-left: calc(.5rem + var(--rp-col-num) + var(--rp-col-gap));
}

.rapportsProcessus-tache-hint-cell[b-w5vl6z7f92] {
    padding: .4rem .6rem !important;
    padding-left: calc(.6rem + var(--rp-col-num) + var(--rp-col-gap)) !important;

    background: var(--rp-surface-alt);

    font-size: .66rem;
    color: var(--rp-muted);
    font-style: italic;
    text-align: left;
}

.rapportsProcessus-phase-table .col-ordre[b-w5vl6z7f92]    { width: 26px; }
.rapportsProcessus-phase-table .col-echeance[b-w5vl6z7f92] { width: 112px; }
.rapportsProcessus-phase-table .col-assigne[b-w5vl6z7f92]  { width: 120px; }
.rapportsProcessus-phase-table .col-badge[b-w5vl6z7f92]    { width: 26px; text-align: center; }
.rapportsProcessus-phase-table .col-statut[b-w5vl6z7f92]   { width: 78px; text-align: right; }

.rapportsProcessus-phase-table .col-titre[b-w5vl6z7f92] {
    max-width: 0; /* laisse la colonne flexible rétrécir */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rapportsProcessus-tache-statut[b-w5vl6z7f92] {
    display: inline-block;
    border-radius: 999px;

    padding: .02rem .4rem;
    font-size: .55rem;

    font-weight: 600;
    background: var(--rp-surface);
    color: var(--rp-muted);
    white-space: nowrap;
}

.rapportsProcessus-tache-statut.done[b-w5vl6z7f92]    { background: var(--rp-ok-bg);        color: var(--rp-ok-text); }
.rapportsProcessus-tache-statut.current[b-w5vl6z7f92] { background: #e8f0fe;                color: #1a56db; }
.rapportsProcessus-tache-statut.blocked[b-w5vl6z7f92] { background: var(--rp-accent-border); color: var(--rp-accent-bloque); }
.rapportsProcessus-tache-statut.pending[b-w5vl6z7f92] { background: var(--rp-warn-bg);      color: var(--rp-warn-text); }

.rapportsProcessus-tache-echeance[b-w5vl6z7f92] {
    display: inline-block;
    border-radius: 5px;

    padding: .05rem .3rem;
    font-size: .56rem;

    background: var(--rp-surface);
    color: var(--rp-muted);
    border: 1px solid var(--rp-border);

    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.rapportsProcessus-tache-echeance--done[b-w5vl6z7f92] {
    background: var(--rp-ok-bg);
    color: var(--rp-ok-text);
    border-color: var(--rp-ok-border);
}

.rapportsProcessus-tache-datefin[b-w5vl6z7f92] {
    width: 100%;

    padding: .08rem .25rem;
    font-size: .56rem;

    background: var(--rp-surface);
    color: var(--rp-text-2);
    border: 1px solid var(--rp-border);
    border-radius: 5px;

    font-family: inherit;
    cursor: pointer;

    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.rapportsProcessus-tache-datefin:hover[b-w5vl6z7f92],
.rapportsProcessus-tache-datefin:focus[b-w5vl6z7f92] {
    border-color: var(--rp-accent);
    outline: none;
}

.rapportsProcessus-tache-datefin--none[b-w5vl6z7f92] {
    background: var(--rp-surface);
    color: var(--rp-text-2);
    border-color: var(--rp-border);
}

.rapportsProcessus-tache-datefin--soon[b-w5vl6z7f92] {
    background: var(--rp-warn-bg);
    color: var(--rp-warn-text);
    border-color: var(--rp-warn-border);
}

.rapportsProcessus-tache-datefin--overdue[b-w5vl6z7f92] {
    background: var(--rp-surface);
    color: var(--rp-accent);
    border-color: var(--rp-accent-border);
    font-weight: 700;
}

.rapportsProcessus-tache-assigne[b-w5vl6z7f92] {
    width: 100%;

    padding: .08rem .25rem;
    font-size: .54rem;

    background: var(--rp-surface);
    color: var(--rp-text-2);
    border: 1px solid var(--rp-border);
    border-radius: 5px;

    cursor: pointer;
}

.rapportsProcessus-tache-assigne:hover[b-w5vl6z7f92],
.rapportsProcessus-tache-assigne:focus[b-w5vl6z7f92] {
    border-color: var(--rp-accent);
    outline: none;
}

.rapportsProcessus-tache-assigne:disabled[b-w5vl6z7f92] {
    cursor: not-allowed;
    opacity: .6;
}

.rapportsProcessus-tache-assigne-badge[b-w5vl6z7f92] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;
    font-size: .44rem;


    background: var(--rp-surface);
    color: var(--rp-accent);
    border: 1px solid var(--rp-accent-border);
    border-radius: 50%;

    font-weight: 700;
}

.rapportsProcessus-tache-assigne-badge--empty[b-w5vl6z7f92] {
    background: transparent;
    border-color: transparent;
}


/* --------------------------------------------------------------------------
   5. Flèches de phase (sous le tableau)
   -------------------------------------------------------------------------- */

.rapportsProcessus-phaseArrows[b-w5vl6z7f92] {
    flex: 0 0 auto;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .8rem;

    padding-left: .6rem;
}

.rapportsProcessus-phaseArrow-item[b-w5vl6z7f92] {
    flex: 1 1 0;
    min-width: 64px;
    padding: .5rem 1rem .5rem .8rem;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--rp-surface);
    color: #000;
    border: none;

    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    cursor: pointer;
    transition: filter .2s ease;
    height: 10px;

    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

.rapportsProcessus-phaseArrow-item:hover[b-w5vl6z7f92] {
    filter: brightness(.96);
}

.rapportsProcessus-phaseArrow-item.current[b-w5vl6z7f92],
.rapportsProcessus-phaseArrow-item.expanded[b-w5vl6z7f92] {
    background: var(--rp-accent-soft);
    color: var(--rp-accent);
}

.rapportsProcessus-phaseArrow-item.done[b-w5vl6z7f92] {
    background: var(--rp-accent);
    color: #fff;
}


/* --------------------------------------------------------------------------
   6. Colonne 20 % : cartes de détails
   -------------------------------------------------------------------------- */

.rapportsProcessus-details[b-w5vl6z7f92] {
    width: 100%;
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: clamp(.35rem, 2.2cqb, .8rem);

    font-size: clamp(.55rem, 2.2cqb, .8rem);

    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.rapportsProcessus-card[b-w5vl6z7f92] {
    flex: 0 0 auto;
    min-width: 0;

    padding: clamp(.4rem, 2cqb, .8rem);

    background: var(--rp-surface);
    border: 1px solid var(--rp-border-soft);
    border-radius: 12px;
}

.rapportsProcessus-details > .rapportsProcessus-card:last-child[b-w5vl6z7f92] {
    margin-top: auto;
}

/* --- 1. Cliente --- */

.rapportsProcessus-client[b-w5vl6z7f92] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6em;

    padding-bottom: clamp(.25rem, 1.6cqb, .6rem);
    margin-bottom: clamp(.25rem, 1.6cqb, .6rem);
    border-bottom: 1px solid var(--rp-border-soft);
}

.rapportsProcessus-client-info[b-w5vl6z7f92] {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: .2em;
}

.rapportsProcessus-client-name[b-w5vl6z7f92] {
    margin: 0;

    font-size: 1.2em;
    font-weight: 700;
    color: var(--rp-text);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rapportsProcessus-client-type[b-w5vl6z7f92] {
    width: fit-content;
    max-width: 100%;
    padding: .1em .6em;

    background: var(--rp-accent-soft);
    color: var(--rp-accent);
    border: 1px solid var(--rp-accent-border);
    border-radius: 999px;

    font-size: .75em;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rapportsProcessus-client-avatar[b-w5vl6z7f92] {
    flex: 0 0 auto;
    width: 3.4em;
    height: 3.4em;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--rp-accent-soft);
    color: var(--rp-accent);
    border: 1px solid var(--rp-accent-border);
    border-radius: 50%;

    font-size: 1em;
    font-weight: 700;

    overflow: hidden;
}

.rapportsProcessus-client-avatar img[b-w5vl6z7f92] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* --- Liste de champs label / valeur (cartes 1 et 2) --- */

.rapportsProcessus-fields[b-w5vl6z7f92] {
    display: flex;
    flex-direction: column;
    gap: clamp(.2rem, 1.2cqb, .45rem);
}

.rapportsProcessus-field[b-w5vl6z7f92] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6em;
    min-width: 0;
}

.rapportsProcessus-field-label[b-w5vl6z7f92] {
    flex: 0 0 auto;

    font-size: .65em;
    font-weight: 600;
    color: var(--rp-muted-light);
    text-transform: uppercase;
    white-space: nowrap;
}

.rapportsProcessus-field-value[b-w5vl6z7f92] {
    flex: 0 1 auto;
    min-width: 0;

    font-size: .85em;
    color: var(--rp-text);
    text-align: right;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rapportsProcessus-field-value--scroll[b-w5vl6z7f92] {
    flex: 1 1 auto;

    text-align: left;
    text-overflow: clip;
    overflow-x: auto;
    scrollbar-width: none;
}

.rapportsProcessus-field-value--scroll[b-w5vl6z7f92]::-webkit-scrollbar {
    display: none;
}

/* --- 2. Service --- */

.rapportsProcessus-service-header[b-w5vl6z7f92] {
    display: flex;
    flex-direction: column;
    gap: .35em;

    padding-bottom: clamp(.25rem, 1.6cqb, .6rem);
    margin-bottom: clamp(.25rem, 1.6cqb, .6rem);
    border-bottom: 1px solid var(--rp-border-soft);
}

.rapportsProcessus-service-name[b-w5vl6z7f92] {
    margin: 0;

    font-size: 1.2em;
    font-weight: 700;
    color: var(--rp-text);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rapportsProcessus-service-meta[b-w5vl6z7f92] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em;
}

.rapportsProcessus-service-delai[b-w5vl6z7f92],
.rapportsProcessus-service-cout[b-w5vl6z7f92] {
    padding: .1em .6em;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: .8em;
    font-weight: 700;
    white-space: nowrap;
}

.rapportsProcessus-service-delai[b-w5vl6z7f92] {
    background: #f3f4f6;
    color: var(--rp-text-2);
    border-color: var(--rp-border);
}

.rapportsProcessus-service-cout[b-w5vl6z7f92] {
    background: var(--rp-accent-soft);
    color: var(--rp-accent);
    border-color: var(--rp-accent-border);
}

/* --- 3. Pastilles d'état --- */

.rapportsProcessus-details-flags[b-w5vl6z7f92] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(.12rem, .5cqb, .25rem);
}

.rapportsProcessus-details-flags .flag[b-w5vl6z7f92] {
    padding: clamp(.05rem, .3cqb, .1rem) clamp(.2rem, 1cqb, .4rem);

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: .65em;
    font-weight: 600;
    white-space: nowrap;
}

.rapportsProcessus-details-flags .flag.on[b-w5vl6z7f92] {
    background: var(--rp-ok-bg);
    color: var(--rp-ok-text);
    border-color: var(--rp-ok-border);
}

.rapportsProcessus-details-flags .flag.off[b-w5vl6z7f92] {
    background: #f3f4f6;
    color: var(--rp-muted-light);
    border-color: var(--rp-border);
}

/* --- 4. Documents --- */

.rapportsProcessus-details-docs[b-w5vl6z7f92] {
    flex: 0 1 auto;
    min-height: 5em;

    display: flex;
    flex-direction: column;
    gap: clamp(.15rem, 1cqb, .4rem);

    overflow: hidden;
}

.rapportsProcessus-details-docs .label[b-w5vl6z7f92] {
    flex: 0 0 auto;

    font-size: .75em;
    font-weight: 600;
    color: var(--rp-muted-light);
    text-transform: uppercase;
}

.rapportsProcessus-details-docs ul[b-w5vl6z7f92] {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: clamp(.1rem, .7cqb, .3rem);

    list-style: none;
    overflow-y: auto;
    scrollbar-width: thin;
}

.rapportsProcessus-details-docs a[b-w5vl6z7f92] {
    display: block;

    font-size: .9em;
    color: var(--rp-accent);
    text-decoration: underline;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --------------------------------------------------------------------------
   7. État vide
   -------------------------------------------------------------------------- */

.empty-rapportsProcessus-details[b-w5vl6z7f92] {
    height: 100%;
    min-height: 200px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--rp-surface-alt);
    color: var(--rp-muted);
    border: 1px solid var(--rp-border);
    border-radius: 12px;

    font-size: .85rem;
}


/* --------------------------------------------------------------------------
   8. Accessibilité
   -------------------------------------------------------------------------- */

.rapportsProcessus-phaseBar-toggle:focus-visible[b-w5vl6z7f92],
.rapportsProcessus-phaseArrow-item:focus-visible[b-w5vl6z7f92] {
    outline: 2px solid var(--rp-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rapportsProcessus-layout *[b-w5vl6z7f92],
    .rapportsProcessus-layout *[b-w5vl6z7f92]::before,
    .rapportsProcessus-layout *[b-w5vl6z7f92]::after {
        transition: none !important;
    }
}


/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .rapportsProcessus-bottomRow[b-w5vl6z7f92] {
        flex-direction: column;
        overflow-y: auto;
    }

    .rapportsProcessus-col-15[b-w5vl6z7f92],
    .rapportsProcessus-col-50[b-w5vl6z7f92],
    .rapportsProcessus-col-30[b-w5vl6z7f92] {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .rapportsProcessus-col-30[b-w5vl6z7f92] {
        height: 60vh;
        overflow-y: auto;
    }
}

/* Pourcentage affiché à l'extrémité de la barre de phase */
.rapportsProcessus-phaseBar-track[b-w5vl6z7f92] {
    position: relative;
}

.rapportsProcessus-phaseBar-pct[b-w5vl6z7f92] {
    position: absolute;
    top: 50%;
    right: .3rem;
    transform: translateY(-50%);

    font-size: .5rem;
    font-weight: 700;
    color: var(--rp-text-2);
    line-height: 1;
    pointer-events: none;
}

/* Barre masquée quand la phase est à 100 % et repliée */
.rapportsProcessus-phaseBar-track--hidden[b-w5vl6z7f92] {
    background: transparent;
    border-color: transparent;
}

/* Cellule fusionnée : dropdown et badge rapprochés, groupe collé à droite quand la tâche est active */
.col-assigne-merged[b-w5vl6z7f92] {
    width: auto;
    text-align: right;
}

.rapportsProcessus-tache-assigne-row[b-w5vl6z7f92] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
}

.rapportsProcessus-tache-assigne--right[b-w5vl6z7f92] {
    width: auto;
    max-width: 130px;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - phases sur toute la largeur (« Mis à jour » masqué)
   - détails = volet fixe collé au bord gauche, qui glisse avec transform
   - ouverture pilotée par la classe .open (paramètre SideOpen)
   - dimensions et animation lues dans les variables --drawer-*
     définies par RapportsProcessus.razor.css
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* ---------- Gabarit de la table de phases ---------- */
    .rapportsProcessus-layout[b-w5vl6z7f92] {
        --rp-col-num: 20px;
        --rp-col-bar: minmax(24px, 1fr);
        --rp-col-selects: 170px;
        --rp-col-actions: 60px;
        --rp-col-toggle: 18px;
        --rp-col-gap: .25rem;
        --rp-row-pad-x: .4rem;
        --rp-row-accent: 3px;

        gap: .3rem;
    }

    .rapportsProcessus-top[b-w5vl6z7f92] { flex: 0 0 auto; min-height: 0; max-height: none; padding: .25rem; border-radius: 8px; }

    .rapportsProcessus-bottomRow[b-w5vl6z7f92] { flex-direction: row; gap: 0; overflow: hidden; }

    /* ---------- Colonne du pourcentage ---------- */
    .rapportsProcessus-col-15[b-w5vl6z7f92] { flex: 0 0 46px; max-width: 46px; gap: .2rem; }
    .rapportsProcessus-phaseBar-alert[b-w5vl6z7f92],
    .rapportsProcessus-typeDemand[b-w5vl6z7f92] { padding: .2rem; border-radius: 8px; }
    .rapportsProcessus-phaseBar-alert-circle[b-w5vl6z7f92] { width: 32px; height: 32px; font-size: .52rem; }
    .rapportsProcessus-typeDemand[b-w5vl6z7f92] { padding: .1rem .05rem; text-align: center; }
    .rapportsProcessus-typeDemand .value[b-w5vl6z7f92] { font-size: .45rem; overflow-wrap: anywhere; }

    /* ---------- Phases : toute la largeur restante ---------- */
    .rapportsProcessus-col-50[b-w5vl6z7f92] { flex: 1 1 auto; max-width: none; margin-left: .25rem; }
    .rapportsProcessus-phaseBars[b-w5vl6z7f92] { padding: 0 .35rem .35rem; border-radius: 8px; }
    .rapportsProcessus-stickyHeader[b-w5vl6z7f92] { padding-top: .3rem; padding-bottom: .2rem; }
    .rapportsProcessus-phaseCardTitle[b-w5vl6z7f92] { min-width: 80px; padding: .35rem .7rem .35rem .55rem; }
    .rapportsProcessus-phaseCardTitle .labelTitle[b-w5vl6z7f92] { font-size: .65rem; }
    .rapportsProcessus-phaseBars-list[b-w5vl6z7f92] { margin-top: .3rem; gap: .3rem; }
    .rapportsProcessus-phase-table[b-w5vl6z7f92] { border-radius: 8px; }

    /* ---------- Ligne de phase : 5 colonnes, sans la date de mise à jour ---------- */
    .rapportsProcessus-phaseBar-columns[b-w5vl6z7f92] {
        grid-template-columns:
            var(--rp-col-num)
            var(--rp-col-bar)
            var(--rp-col-selects)
            var(--rp-col-actions)
            var(--rp-col-toggle);
    }
    .rapportsProcessus-phaseBar-updated[b-w5vl6z7f92] { display: none; }
    .rapportsProcessus-phase-table .rapportsProcessus-phaseBar-row[b-w5vl6z7f92] { padding: .3rem var(--rp-row-pad-x); }
    .rapportsProcessus-phaseBar-number[b-w5vl6z7f92] { width: 18px; height: 18px; font-size: .6rem; }
    .rapportsProcessus-phaseBar-track[b-w5vl6z7f92] { width: 100%; height: 5px; }
    .rapportsProcessus-phaseBar-selectGroup[b-w5vl6z7f92] { gap: .15rem; }
    .rapportsProcessus-phaseBar-toggle[b-w5vl6z7f92] { width: 18px; height: 18px; }
    .rapportsProcessus-phaseBar-toggle .arrow[b-w5vl6z7f92] { font-size: .6rem; }

    /* ---------- Tâches ---------- */
    .rapportsProcessus-tache-row td[b-w5vl6z7f92] { padding: .15rem .35rem; font-size: .65rem; }
    .rapportsProcessus-tache-row td:first-child[b-w5vl6z7f92] { padding-left: calc(.35rem + var(--rp-col-num) + var(--rp-col-gap)); }
    .rapportsProcessus-tache-hint-cell[b-w5vl6z7f92] {
        padding: .35rem .4rem !important;
        padding-left: calc(.4rem + var(--rp-col-num) + var(--rp-col-gap)) !important;
        font-size: .6rem;
    }
    .rapportsProcessus-phase-table .col-ordre[b-w5vl6z7f92]    { width: 22px; }
    .rapportsProcessus-phase-table .col-echeance[b-w5vl6z7f92] { width: 90px; }
    .rapportsProcessus-phase-table .col-assigne[b-w5vl6z7f92]  { width: 80px; }
    .rapportsProcessus-phase-table .col-badge[b-w5vl6z7f92]    { width: 22px; }
    .rapportsProcessus-phase-table .col-statut[b-w5vl6z7f92]   { width: 56px; }
    .rapportsProcessus-phase-table .col-titre[b-w5vl6z7f92]    { width: 30%; min-width: 2.5rem; }
    .rapportsProcessus-tache-ordre[b-w5vl6z7f92] { width: 16px; height: 16px; font-size: .55rem; }
    .rapportsProcessus-tache-encours[b-w5vl6z7f92] { font-size: .52rem; padding: .03rem .3rem; }
    .rapportsProcessus-tache-echeance[b-w5vl6z7f92] { font-size: .55rem; padding: .03rem .3rem; }
    .rapportsProcessus-tache-echeance-group[b-w5vl6z7f92] { gap: .25rem; }
    .rapportsProcessus-tache-assigne-row[b-w5vl6z7f92] { gap: .25rem; }
    .rapportsProcessus-tache-assigne-badge[b-w5vl6z7f92] { width: 16px; height: 16px; font-size: .5rem; }
    .rapportsProcessus-tache-statut[b-w5vl6z7f92] { font-size: .55rem; padding: .03rem .35rem; }

    /* ---------- Flèches de phase ---------- */
    .rapportsProcessus-phaseArrows[b-w5vl6z7f92] { gap: .25rem; padding-left: .25rem; }
    .rapportsProcessus-phaseArrow-item[b-w5vl6z7f92] { min-width: 50px; padding: .35rem .7rem .35rem .5rem; height: 12px; font-size: .58rem; }

    /* ---------- Volet des détails : collé au bord gauche ---------- */
    .rapportsProcessus-col-30[b-w5vl6z7f92] {
        position: fixed;
        top: var(--drawer-top, 178px);
        bottom: var(--drawer-bottom, 66px);   /* laisse la place à la bande des services */
        left: 0;
        right: auto;

        flex: none;
        width: var(--drawer-w, 88vw);
        max-width: var(--drawer-w, 88vw);
        height: auto;
        padding: .4rem;

        z-index: 30;                           /* au-dessus du fond cliquable, sous la languette */
        background: #fff;
        border-radius: 0 0 14px 0;
        overflow: hidden;
        container-type: normal;                /* sinon le volet fixe n'a pas de hauteur propre */

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .rapportsProcessus-col-30.open[b-w5vl6z7f92] {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Base de police du volet (tout le reste est en em) */
    .rapportsProcessus-details[b-w5vl6z7f92] { font-size: .7rem; gap: .35rem; }
    .rapportsProcessus-card[b-w5vl6z7f92] { padding: .5rem; border-radius: 10px; }
    .rapportsProcessus-client[b-w5vl6z7f92] { padding-bottom: .3rem; margin-bottom: .3rem; }
    .rapportsProcessus-client-avatar[b-w5vl6z7f92] { width: 3em; height: 3em; }
    .rapportsProcessus-service-header[b-w5vl6z7f92] { padding-bottom: .3rem; margin-bottom: .3rem; }
    .rapportsProcessus-details-flags .flag[b-w5vl6z7f92] { padding: .08rem .4rem; }

    .empty-rapportsProcessus-details[b-w5vl6z7f92] { min-height: 80px; font-size: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rapportsProcessus-col-30[b-w5vl6z7f92] { transition: none; }
}

/* ==========================================================
   MOBILE : listes déroulantes et champs de date
   - triple spécificité pour battre « select { font-size:16px !important } »
   - appearance:none pour neutraliser le rendu natif iOS
   - tailles en px : indépendantes du font-size de <html>
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .rapportsProcessus-layout.rapportsProcessus-layout.rapportsProcessus-layout select[b-w5vl6z7f92],
    .rapportsProcessus-layout.rapportsProcessus-layout.rapportsProcessus-layout input[type="date"][b-w5vl6z7f92] {
        -webkit-appearance: none !important;
        appearance: none !important;

        font-size: 10px !important;
        line-height: 1.2 !important;
        height: auto !important;
        min-height: 0 !important;
        min-width: 0 !important;
        padding: 2px 5px !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
    }

    /* Flèche maison, puisque appearance:none retire celle d'iOS */
    .rapportsProcessus-layout.rapportsProcessus-layout.rapportsProcessus-layout select[b-w5vl6z7f92] {
        padding-right: 13px !important;
        background-color: #fff !important;
        background-image:
            linear-gradient(45deg, transparent 50%, #6b7280 50%),
            linear-gradient(135deg, #6b7280 50%, transparent 50%) !important;
        background-position: calc(100% - 7px) 55%, calc(100% - 4px) 55% !important;
        background-size: 3px 3px, 3px 3px !important;
        background-repeat: no-repeat !important;
        text-overflow: ellipsis;
    }

    /* Champ date iOS : sous-éléments internes */
    .rapportsProcessus-layout input[type="date"][b-w5vl6z7f92]::-webkit-date-and-time-value,
    .rapportsProcessus-layout input[type="date"][b-w5vl6z7f92]::-webkit-datetime-edit,
    .rapportsProcessus-layout input[type="date"][b-w5vl6z7f92]::-webkit-datetime-edit-fields-wrapper {
        font-size: 10px !important;
        line-height: 1.2 !important;
        min-height: 0 !important;
        padding: 0 !important;
        text-align: left;
    }

    /* Le tap ouvre quand même le sélecteur */
    .rapportsProcessus-layout input[type="date"][b-w5vl6z7f92]::-webkit-calendar-picker-indicator {
        display: none;
    }

    /* Les champs se partagent leur colonne sans déborder */
    .rapportsProcessus-phaseBar-selectGroup > select[b-w5vl6z7f92],
    .rapportsProcessus-tache-datefin[b-w5vl6z7f92],
    .rapportsProcessus-tache-assigne[b-w5vl6z7f92] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .rapportsProcessus-tache-assigne--right[b-w5vl6z7f92] {
        width: auto !important;
        max-width: 100px !important;
    }
}
/* /Components/Pages/Processus/Rapports/RapportsProcessus.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   Page Rapports : mise en page générale
   ═══════════════════════════════════════════════ */

.rapportsProcessus-page[b-wnz9bfdfmk] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES CLIENTS (bureau)
========================================== */

.rapportsProcessus-sticky[b-wnz9bfdfmk] {
    position: fixed;
    top: 85px;
    left: 250px;
    right: 55px;
    height: 130px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 16px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.rapportsProcessus-content[b-wnz9bfdfmk] {
    position: fixed;
    top: 195px;
    bottom: 80px;
    left: 234px;
    right: 35px;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

/* Bande des services */
.rapportsProcessus-bottom[b-wnz9bfdfmk] {
    position: fixed;
    bottom: 23px;
    left: 250px;
    right: 70px;

    z-index: 900;

    background: #fff;
    padding: .3rem;

    border-top: 1px solid #eee;
    border-radius: 12px 12px 0 0;

    animation: slideDown .3s ease;
    overflow: hidden;
}

.empty-rapportsProcessus[b-wnz9bfdfmk] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languette et fond cliquable : cachés sur ordinateur */
.rapportsProcessus-content .drawer-tab[b-wnz9bfdfmk],
.rapportsProcessus-content .drawer-backdrop[b-wnz9bfdfmk] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - le volet (dans InfoRapportsProcessus) et la languette glissent
     ensemble (transform) : même durée, même courbe, même distance
   - un clic en dehors du volet le referme (fond cliquable)
   - la bande des clients (z-index 1000) et la bande des services
     (z-index 900) restent cliquables au-dessus du fond
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des clients : pleine largeur, sans coins arrondis */
    .rapportsProcessus-sticky[b-wnz9bfdfmk] {
        top: 94px;
        left: 0;
        right: 0;
        height: 84px;
        padding: 2px 4px;
        border-radius: 0;
        border-bottom: 0;
    }

    /* Cadre : bord à bord, collé sous la bande.
       Les variables --drawer-* sont lues par le volet (InfoRapportsProcessus.razor.css). */
    .rapportsProcessus-content[b-wnz9bfdfmk] {
        --drawer-top: 178px;                        /* = bas de la bande (94 + 84) */
        --drawer-bottom: 66px;                      /* laisse la place à la bande des services */
        --drawer-w: 88vw;
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--drawer-top);
        bottom: var(--drawer-bottom);
        left: 0;
        right: 0;
        gap: 0;
        padding: 0;
        border-radius: 0;
        overflow: visible;
    }

    /* Bande des services : au-dessus du fond cliquable */
    .rapportsProcessus-bottom[b-wnz9bfdfmk] {
        left: 0;
        right: 0;
        bottom: 6px;
        height: 54px;
        padding: .15rem;
        border-radius: 10px 10px 0 0;
    }

    .empty-rapportsProcessus[b-wnz9bfdfmk] { font-size: .6rem; }

    /* Clic en dehors du volet : le referme (sous le volet et la languette) */
    .rapportsProcessus-content .drawer-backdrop[b-wnz9bfdfmk] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Languette collée au bord gauche de l'écran ---------- */
    .rapportsProcessus-content .drawer-tab[b-wnz9bfdfmk] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        left: 0;
        z-index: 40;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        border-radius: 0 10px 10px 0;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .rapportsProcessus-content .drawer-tab:hover[b-wnz9bfdfmk] {
        background: rgba(225, 110, 110, .98);
    }

    .rapportsProcessus-content.side-open .drawer-tab-left[b-wnz9bfdfmk] {
        transform: translate(var(--drawer-w), -50%);    /* suit le bord du volet */
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    .rapportsProcessus-sticky[b-wnz9bfdfmk] {
        height: 54px;
        padding: 1px 4px;
    }

    .rapportsProcessus-content[b-wnz9bfdfmk] {
        --drawer-top: 148px;                        /* = bas de la bande (94 + 54) */
        --drawer-bottom: 50px;
        --drawer-w: 52vw;
    }

    .rapportsProcessus-bottom[b-wnz9bfdfmk] { height: 40px; }

    .rapportsProcessus-content .drawer-tab[b-wnz9bfdfmk] {
        width: 16px;
        height: 38px;
    }
}
/* /Components/Pages/Ressources/Evaluation/Evaluation.razor.rz.scp.css */
.evaluation-page[b-x2qe3g7pzb]{
min-height:100vh;
background:url("/images/background.jpg") center/cover fixed no-repeat;
}

.evaluation-sticky[b-x2qe3g7pzb]{
position:fixed;
top:120px;
left:250px;
right:70px;
height:80px;
padding:.5rem;
background:#fff;
border-bottom:1px solid #eee;
border-radius:16px;
z-index:1000;
overflow:hidden;
}

.evaluation-content[b-x2qe3g7pzb]{
position:fixed;
top:200px;
bottom:40px;
left:250px;
right:70px;
display:flex;
gap:1rem;
padding:1rem;
background:rgba(255,255,255,.9);
border-radius:16px;
overflow:hidden;
}

.evaluation-left[b-x2qe3g7pzb]{
flex:0 0 25%;
height:100%;
overflow-y:auto;
background:#fff;
border:1px solid #eee;
border-radius:12px;
padding:.5rem;
}

.evaluation-right[b-x2qe3g7pzb]{
flex:1;
height:100%;
overflow-y:auto;
background:#fff;
border:1px solid #eee;
border-radius:12px;
padding:1rem;
}

.empty-evaluation[b-x2qe3g7pzb]{
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:#6b7280;
font-size:.85rem;
}

@media(max-width:900px){
.evaluation-sticky[b-x2qe3g7pzb]{
left:0;
right:0;
top:70px;
height:80px;
border-radius:0;
    }
.evaluation-content[b-x2qe3g7pzb]{
left:0;
right:0;
top:160px;
bottom:20px;
border-radius:0;
flex-direction:column;
    }
.evaluation-left[b-x2qe3g7pzb],
.evaluation-right[b-x2qe3g7pzb]{
flex:1;
width:100%;
    }
}
/* /Components/Pages/Ressources/Evaluation/InfoEvaluation.razor.rz.scp.css */
.evaluation-details[b-xsotzfkhv0] {
display: flex;
flex-direction: column;
gap: .6rem;
}

.evaluation-details-name[b-xsotzfkhv0] {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #111827;
}

.evaluation-details-description[b-xsotzfkhv0] {
margin: 0;
font-size: .9rem;
line-height: 1.6;
color: #374151;
}

.evaluation-details-count[b-xsotzfkhv0] {
width: max-content;
padding: .15rem .6rem;
border-radius: 999px;
background: #fdecec;
color: #c92a2a;
font-size: .75rem;
font-weight: 700;
}

.empty-evaluation[b-xsotzfkhv0] {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: .85rem;
}
/* /Components/Pages/Ressources/Paiements/InfoPaiements.razor.rz.scp.css */
/* =====================================================
   Racine : 2 colonnes
   gauche = infos du service · droite = client + validation
===================================================== */
.pd[b-uikx5798m6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: .9rem;
    height: 100%;
    width: 100%;
    min-height: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    color: #1d1d1f;
    font-size: .85rem;
}

.pd-col[b-uikx5798m6] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pd-empty-note[b-uikx5798m6] {
    margin: 0;
    font-size: .75rem;
    color: #a1a1a6;
}

.empty-paiements[b-uikx5798m6] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #6b7280;
    font-size: .8rem;
}

/* =====================================================
   1. Colonne de gauche : informations sur le service
===================================================== */
.pd-main-card[b-uikx5798m6] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}

.pd-main-scroll[b-uikx5798m6] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.pd-main-head[b-uikx5798m6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .1rem;
}

.pd-main-head-text[b-uikx5798m6] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.pd-main-title[b-uikx5798m6] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1d1d1f;
    overflow-wrap: anywhere;
}

.pd-main-delai[b-uikx5798m6] {
    font-size: .95rem;
    color: #a40b0b;
}

/* Coût : pastille + icône verte quand le paiement est validé */
.pd-price-wrap[b-uikx5798m6] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Icône de statut à côté du coût (sablier orange / coche verte) */
.pd-statut-icone[b-uikx5798m6] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .95rem;
    line-height: 1;
}

.pd-price-pill[b-uikx5798m6] {
    flex-shrink: 0;
    padding: .3rem .85rem;
    font-size: .9rem;
    font-weight: 700;
    color: #c92a2a;
    border: 2px solid #c92a2a;
    border-radius: 999px;
    white-space: nowrap;
}

/* Champs : libellé gris au-dessus, valeur dessous */
.pd-fields[b-uikx5798m6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .9rem 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

/* Variante sans trait ni marge du haut, à l'intérieur d'une section */
.pd-fields--flat[b-uikx5798m6] {
    padding-top: 0;
    border-top: none;
}

.pd-field[b-uikx5798m6] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.pd-field-label[b-uikx5798m6],
.pd-section-title[b-uikx5798m6] {
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
}

.pd-field-value[b-uikx5798m6] {
    font-size: .88rem;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.pd-section[b-uikx5798m6] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

/* Pied du cadre : date de mise à jour + suivi */
.pd-main-footer[b-uikx5798m6] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    padding: .7rem 1.3rem;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

.pd-updated[b-uikx5798m6] {
    font-size: .7rem;
    color: #a1a1a6;
}

.pd-pills[b-uikx5798m6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .3rem;
}

.pd-pill[b-uikx5798m6] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: #f5f5f7;
    color: #86868b;
    font-size: .7rem;
    font-weight: 500;
}

.pd-pill i[b-uikx5798m6] {
    font-size: .7rem;
}

.pd-pill--on[b-uikx5798m6] {
    background: #e6f9ec;
    color: #1c8a3e;
}

.pd-pill--warn[b-uikx5798m6] {
    background: #fff4e0;
    color: #b9740b;
}

/* Badge (contrat signé / non signé) */
.pd-badge[b-uikx5798m6] {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: #f2f2f7;
    color: #6e6e73;
}

.pd-badge--valide[b-uikx5798m6] {
    background: #e6f9ec;
    color: #1c8a3e;
}

.pd-badge--attente[b-uikx5798m6] {
    background: #fff4e0;
    color: #b9740b;
}

/* Preuves de paiement / documents */
.pd-file-list[b-uikx5798m6] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.pd-file-link[b-uikx5798m6] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: #fdecec;
    color: #c92a2a;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}

.pd-file-link:hover[b-uikx5798m6] {
    background: #f8d7d7;
}

.pd-file-link--off[b-uikx5798m6] {
    background: #f2f2f7;
    color: #86868b;
    cursor: default;
}

.pd-file-link--off:hover[b-uikx5798m6] {
    background: #f2f2f7;
}

/* Observations */
.pd-note[b-uikx5798m6] {
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: #3a3a3c;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .6rem .8rem;
}

/* =====================================================
   2. Colonne de droite : client (photo) + validation en bas
===================================================== */
.pd-side[b-uikx5798m6] {
    gap: .5rem;
}

/* Zone du bouton : poussée en bas du cadre */
.pd-side-actions[b-uikx5798m6] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: auto;
    padding-top: .8rem;
}

/* Bandeau de statut */
.pd-statut[b-uikx5798m6] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
}

.pd-statut--attente[b-uikx5798m6] {
    background: #fff4e6;
    color: #d9480f;
}

.pd-statut--valide[b-uikx5798m6] {
    background: #e6f9ec;
    color: #1c8a3e;
}

/* Carte client : remplit la hauteur de la colonne, le bouton reste en bas du cadre */
.pd-box[b-uikx5798m6] {
    box-sizing: border-box;
    padding: .6rem .6rem .85rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.pd-box--fill[b-uikx5798m6] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
}

.pd-box--fill[b-uikx5798m6]::-webkit-scrollbar {
    display: none;
}

.pd-box-details[b-uikx5798m6] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

.pd-client[b-uikx5798m6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.pd-client-info[b-uikx5798m6] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.pd-client-name[b-uikx5798m6] {
    margin: 0;
    font-size: .85rem;
    font-weight: 700;
    color: #111827;
    overflow-wrap: anywhere;
}

.pd-client-type[b-uikx5798m6] {
    font-size: .7rem;
    color: #6b7280;
}

.pd-client-avatar[b-uikx5798m6] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.pd-client-avatar img[b-uikx5798m6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-row[b-uikx5798m6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.pd-row-label[b-uikx5798m6] {
    flex-shrink: 0;
    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pd-row-value[b-uikx5798m6] {
    min-width: 0;
    font-size: .68rem;
    color: #374151;
    text-align: right;
    overflow-wrap: anywhere;
}

.pd-row-value--scroll[b-uikx5798m6] {
    white-space: nowrap;
    overflow-x: auto;
    max-width: 65%;
    scrollbar-width: none;
}

.pd-row-value--scroll[b-uikx5798m6]::-webkit-scrollbar {
    display: none;
}

/* Bouton Valider / Annuler : à l'extrême droite du cadre */
.pd-btn-action[b-uikx5798m6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 50%;
    height: 25px;
    min-width: max-content;
    align-self: flex-end;
    white-space: nowrap;
    padding: 0 1.1rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: -.01em;
    border: none;
    border-radius: 980px;
    cursor: pointer;
    transition: background-color .2s ease, transform .1s ease;
    box-sizing: border-box;
    line-height: 1;
}

.pd-btn-action:focus-visible[b-uikx5798m6] {
    outline: 2px solid #c92a2a;
    outline-offset: 2px;
}

.pd-btn-action:active:not(:disabled)[b-uikx5798m6] {
    transform: scale(.98);
}

.pd-btn-action:disabled[b-uikx5798m6] {
    opacity: .6;
    cursor: default;
}

.pd-btn-action--valider[b-uikx5798m6],
.pd-btn-action--valider span[b-uikx5798m6],
.pd-btn-action--valider i[b-uikx5798m6] {
    color: #fff !important;
}

.pd-btn-action--valider[b-uikx5798m6] {
    background: #c92a2a;
}

.pd-btn-action--valider:hover:not(:disabled)[b-uikx5798m6] {
    background: #a81f1f;
}

.pd-btn-action--annuler[b-uikx5798m6] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.pd-btn-action--annuler:hover:not(:disabled)[b-uikx5798m6] {
    background: #e5e7eb;
}

.pd-spinner[b-uikx5798m6] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(107, 114, 128, .3);
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: pd-spin-b-uikx5798m6 .6s linear infinite;
}

.pd-btn-action--valider .pd-spinner[b-uikx5798m6] {
    border-color: rgba(255, 255, 255, .4);
    border-top-color: #fff;
}

@keyframes pd-spin-b-uikx5798m6 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pd-spinner[b-uikx5798m6] {
        animation-duration: 1.6s;
    }
}

.pd-error[b-uikx5798m6] {
    margin: 0;
    color: #c92a2a;
    font-size: .8rem;
}

/* =====================================================
   Petits écrans : les 2 parties s'empilent
===================================================== */
@media (max-width: 900px) {
    .pd[b-uikx5798m6] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .pd-main-card[b-uikx5798m6] {
        min-height: 320px;
    }
}

.pd-modal-overlay[b-uikx5798m6]{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
    background:rgba(17,24,39,.45);
}

.pd-modal[b-uikx5798m6]{
    width:100%;
    max-width:360px;
    padding:1.25rem;
    background:#fff;
    border-radius:14px;
    box-shadow:0 20px 40px rgba(0,0,0,.2);
    text-align:center;
}

.pd-modal-icon[b-uikx5798m6]{
    width:44px;
    height:44px;
    margin:0 auto .75rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:1.2rem;
}

.pd-modal-icon--danger[b-uikx5798m6]{
    background:#fef2f2;
    color:#c92a2a;
}

.pd-modal-icon--warn[b-uikx5798m6]{
    background:#fffbeb;
    color:#d97706;
}

.pd-modal-title[b-uikx5798m6]{
    margin:0 0 .4rem;
    font-size:1rem;
    font-weight:700;
    color:#111827;
}

.pd-modal-text[b-uikx5798m6]{
    margin:0 0 1rem;
    font-size:.8rem;
    line-height:1.4;
    color:#6b7280;
}

.pd-modal-actions[b-uikx5798m6]{
    display:flex;
    gap:.5rem;
}

.pd-modal-btn[b-uikx5798m6]{
    flex:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.55rem .75rem;
    border:1px solid transparent;
    border-radius:8px;
    font-size:.8rem;
    font-weight:600;
    cursor:pointer;
}

.pd-modal-btn:disabled[b-uikx5798m6]{
    opacity:.6;
    cursor:default;
}

.pd-modal-btn--secondary[b-uikx5798m6]{
    background:#fff;
    color:#374151;
    border-color:#e5e7eb;
}

.pd-modal-btn--danger[b-uikx5798m6]{
    background:#c92a2a;
    color:#fff;
}

.pd-modal-btn--warn[b-uikx5798m6]{
    background:#d97706;
    color:#fff;
}

/* =====================================================
   Colonne de gauche : plusieurs cartes
   libellé à gauche · valeur à droite
===================================================== */

.pd-main-stack[b-uikx5798m6] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* La carte d'en-tête reste fixée en haut et le pied fixé en bas ;
   seules les cartes du milieu défilent. */
.pd-main-stack .pd-main-scroll[b-uikx5798m6] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: none;
}

/* Cartes en 2 colonnes sans espaces vides : chaque carte garde sa propre hauteur
   et se loge juste sous la précédente de sa colonne. */
.pd-masonry[b-uikx5798m6] {
    flex-shrink: 0;
    column-count: 2;
    column-gap: .4rem;
}

.pd-masonry > .pd-card[b-uikx5798m6] {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: .4rem;
}

/* Écran étroit : une seule colonne */
@media (max-width: 700px) {
    .pd-masonry[b-uikx5798m6] {
        column-count: 1;
    }
}

.pd-main-stack .pd-main-scroll[b-uikx5798m6]::-webkit-scrollbar {
    display: none;
}

.pd-card[b-uikx5798m6] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .8rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.pd-card--head[b-uikx5798m6] {
    padding: .9rem 1rem;
}

.pd-card-title[b-uikx5798m6] {
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
}

.pd-lines[b-uikx5798m6] {
    display: flex;
    flex-direction: column;
}

/* Une ligne : libellé à gauche, résultat à droite */
.pd-line[b-uikx5798m6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
}

.pd-line:last-child[b-uikx5798m6] {
    padding-bottom: 0;
}

.pd-line-label[b-uikx5798m6] {
    flex-shrink: 0;
    font-size: .72rem;
    color: #6b7280;
}

.pd-line-value[b-uikx5798m6] {
    min-width: 0;
    font-size: .85rem;
    font-weight: 500;
    color: #1f2937;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Texte long (observations) : aligné à droite mais sur plusieurs lignes */
.pd-line-value--text[b-uikx5798m6] {
    font-weight: 400;
    line-height: 1.4;
    max-width: 75%;
}

/* Le pied devient une carte */
.pd-main-stack .pd-main-footer[b-uikx5798m6] {
    padding: .6rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

/* Squelette : mêmes tailles que les lignes réelles */
.pm-sk-line-label[b-uikx5798m6] {
    width: 30%;
    height: 10px;
    border-radius: 6px;
}

.pm-sk-line-value[b-uikx5798m6] {
    width: 40%;
    height: 12px;
    border-radius: 6px;
}

/* =====================================================
   Style Apple : compact et épuré
===================================================== */
.pd-main-stack[b-uikx5798m6] {
    gap: .4rem;
}

.pd-main-stack .pd-card[b-uikx5798m6] {
    gap: .15rem;
    padding: .45rem .65rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.pd-main-stack .pd-card--head[b-uikx5798m6] {
    flex-shrink: 0;
    padding: .5rem .65rem;
}

.pd-main-stack .pd-main-title[b-uikx5798m6] {
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

.pd-main-stack .pd-main-delai[b-uikx5798m6] {
    font-size: .72rem;
}

.pd-main-stack .pd-price-pill[b-uikx5798m6] {
    padding: .1rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    border-width: 1.5px;
}

.pd-main-stack .pd-statut-icone[b-uikx5798m6] {
    width: 20px;
    height: 20px;
    font-size: .72rem;
}

.pd-main-stack .pd-card-title[b-uikx5798m6] {
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: #8e8e93;
}

.pd-main-stack .pd-line[b-uikx5798m6] {
    padding: .12rem 0;
    gap: .5rem;
}

.pd-main-stack .pd-line:last-child[b-uikx5798m6] {
    padding-bottom: 0;
}

.pd-main-stack .pd-line-label[b-uikx5798m6] {
    font-size: .66rem;
    color: #8e8e93;
}

.pd-main-stack .pd-line-value[b-uikx5798m6] {
    font-size: .72rem;
    font-weight: 500;
    color: #1d1d1f;
    letter-spacing: -.005em;
}

.pd-main-stack .pd-line-value--text[b-uikx5798m6] {
    line-height: 1.3;
}

.pd-main-stack .pd-badge[b-uikx5798m6] {
    padding: .05rem .35rem;
    font-size: .54rem;
}

.pd-main-stack .pd-file-link[b-uikx5798m6] {
    padding: .1rem .5rem;
    font-size: .64rem;
}

.pd-main-stack .pd-empty-note[b-uikx5798m6] {
    font-size: .66rem;
}

.pd-main-stack .pd-main-footer[b-uikx5798m6] {
    flex-shrink: 0;
    gap: .3rem .6rem;
    padding: .35rem .65rem;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
}

.pd-main-stack .pd-updated[b-uikx5798m6] {
    font-size: .6rem;
    color: #8e8e93;
}

.pd-main-stack .pd-pill[b-uikx5798m6] {
    padding: .08rem .4rem;
    font-size: .6rem;
}

.pd-main-stack .pd-pill i[b-uikx5798m6] {
    font-size: .6rem;
}

/* =====================================================
   Carte d'en-tête sur une seule ligne :
   titre + délai à gauche, prix + statut à l'extrémité droite
===================================================== */
.pd-main-stack .pd-main-head[b-uikx5798m6] {
    flex-wrap: nowrap;
    width: 100%;
    gap: .75rem;
}

.pd-main-stack .pd-main-head-text[b-uikx5798m6] {
    flex: 1;
    min-width: 0;
    flex-direction: row;
    align-items: baseline;
    gap: .6rem;
}

.pd-main-stack .pd-main-title[b-uikx5798m6] {
    min-width: 0;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-main-stack .pd-main-delai[b-uikx5798m6] {
    flex-shrink: 0;
    white-space: nowrap;
}

.pd-main-stack .pd-price-wrap[b-uikx5798m6] {
    margin-left: auto;
}

/* =====================================================
   Colonne de droite : les boutons d'action sur la même ligne
===================================================== */
.pd-side-actions[b-uikx5798m6] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

/* Le message d'erreur reste seul au-dessus des boutons */
.pd-side-actions .pd-error[b-uikx5798m6] {
    flex: 0 0 100%;
}

.pd-side-actions .pd-btn-action[b-uikx5798m6] {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    align-self: auto;
    padding: 0 .6rem;
    font-size: .7rem;
    overflow: hidden;
}

.pd-side-actions .pd-btn-action span[b-uikx5798m6] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - cartes du service sur toute la largeur
   - volet du client = tiroir fixe qui glisse (transform), comme
     le volet gauche de la page : même durée, même courbe
   - collé sous la bande des clients, coins arrondis seulement
     en bas ; même haut / même bas que le volet gauche, via les
     variables --content-top, --content-bottom, --drawer-inset
     (définies sur .paiements-content dans Paiements.razor.css)
   - boutons = carte encadrée collée en bas du volet
   - ouverture pilotée par la classe .open (paramètre SideOpen)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .pd[b-uikx5798m6] { grid-template-columns: 1fr; height: 100%; gap: 0; font-size: .65rem; }

    /* ---------- Cartes du service ---------- */
    .pd-main-stack[b-uikx5798m6] { gap: .3rem; }
    .pd-masonry[b-uikx5798m6] { column-count: 2; column-gap: .3rem; }
    .pd-masonry > .pd-card[b-uikx5798m6] { margin-bottom: .3rem; }

    .pd-main-stack .pd-card[b-uikx5798m6] { padding: .4rem .5rem; border-radius: 10px; box-shadow: none; }
    .pd-main-stack .pd-card--head[b-uikx5798m6] { padding: .4rem .5rem; }
    .pd-main-stack .pd-main-head[b-uikx5798m6] { gap: .5rem; }
    .pd-main-stack .pd-main-head-text[b-uikx5798m6] { gap: .35rem; }
    .pd-main-stack .pd-main-title[b-uikx5798m6] { font-size: .78rem; }
    .pd-main-stack .pd-main-delai[b-uikx5798m6] { font-size: .6rem; }
    .pd-main-stack .pd-price-pill[b-uikx5798m6] { font-size: .62rem; padding: .08rem .45rem; border-width: 1.5px; }
    .pd-main-stack .pd-statut-icone[b-uikx5798m6] { width: 18px; height: 18px; font-size: .62rem; }
    .pd-main-stack .pd-card-title[b-uikx5798m6] { font-size: .52rem; }
    .pd-main-stack .pd-line[b-uikx5798m6] { padding: .1rem 0; gap: .35rem; }
    .pd-main-stack .pd-line-label[b-uikx5798m6] { font-size: .58rem; }
    .pd-main-stack .pd-line-value[b-uikx5798m6] { font-size: .65rem; }
    .pd-main-stack .pd-badge[b-uikx5798m6] { font-size: .5rem; padding: .04rem .3rem; }
    .pd-main-stack .pd-file-link[b-uikx5798m6] { font-size: .58rem; padding: .08rem .4rem; }
    .pd-main-stack .pd-empty-note[b-uikx5798m6] { font-size: .56rem; }

    .pd-main-stack .pd-main-footer[b-uikx5798m6] { padding: .3rem .5rem; border-radius: 10px; gap: .25rem .5rem; }
    .pd-main-stack .pd-updated[b-uikx5798m6] { font-size: .52rem; }
    .pd-main-stack .pd-pill[b-uikx5798m6] { font-size: .52rem; padding: .05rem .3rem; gap: .2rem; }
    .pd-main-stack .pd-pill i[b-uikx5798m6] { font-size: .52rem; }

    /* ---------- Volet du client (bande droite) ----------
       Toujours rendu, glisse hors écran quand il est fermé. */
    .pd-side[b-uikx5798m6] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 30px) + var(--drawer-inset, 3px));
        right: 0;                                   /* collé au bord droit */
        left: auto;

        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        margin: 0;
        padding: .4rem;
        gap: .35rem;
        box-sizing: border-box;

        z-index: 1500;
        background: #fff;
        border-radius: 0 0 0 14px;

        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .pd-side.open[b-uikx5798m6] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* Le conteneur occupe toute la hauteur du volet : la carte des boutons descend tout en bas */
    .pd-side-scroll[b-uikx5798m6] {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: .4rem;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .pd-side-scroll[b-uikx5798m6]::-webkit-scrollbar { display: none; }

    /* Carte du client : en haut */
    .pd-box[b-uikx5798m6] { flex: 0 0 auto; padding: .5rem; border-radius: 10px; }
    .pd-client[b-uikx5798m6] { gap: .4rem; }
    .pd-client-name[b-uikx5798m6] { font-size: .72rem; }
    .pd-client-type[b-uikx5798m6] { font-size: .58rem; }
    .pd-client-avatar[b-uikx5798m6] { width: 32px; height: 32px; font-size: .65rem; }
    .pd-box-details[b-uikx5798m6] { gap: .2rem; margin-top: .3rem; padding-top: .3rem; }
    .pd-row-label[b-uikx5798m6] { font-size: .52rem; }
    .pd-row-value[b-uikx5798m6] { font-size: .62rem; }

    /* Carte des boutons : c'est elle qui sert de bouton, en bas du volet */
    .pd-side-actions[b-uikx5798m6] {
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin-top: auto;
        flex: 0 0 auto;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0;
        padding: 0;
        overflow: hidden;

        box-sizing: border-box;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
    }

    /* Couleur de la carte selon l'action */
    .pd-side-actions:has(.pd-btn-action--valider)[b-uikx5798m6] {
        background: #c92a2a;
        border-color: #c92a2a;
    }

    .pd-side-actions:has(.pd-btn-action--supprimer):not(:has(.pd-btn-action--valider)):not(:has(.pd-btn-action--annuler))[b-uikx5798m6] {
        background: #fef2f2;
        border-color: #fecaca;
    }

    /* Le bouton remplit la carte, sans cadre ni fond propres */
    .pd-side-actions .pd-btn-action[b-uikx5798m6] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 30px;
        padding: 0 .5rem;
        gap: .3rem;

        font-size: .65rem;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    .pd-side-actions .pd-btn-action:hover:not(:disabled)[b-uikx5798m6],
    .pd-side-actions .pd-btn-action:active:not(:disabled)[b-uikx5798m6] {
        background: rgba(0, 0, 0, .06);
    }

    /* Texte selon l'action */
    .pd-side-actions .pd-btn-action--annuler[b-uikx5798m6] { color: #6b7280; }
    .pd-side-actions .pd-btn-action--supprimer[b-uikx5798m6] { color: #c92a2a; }

    /* Trait entre deux boutons dans la même carte */
    .pd-side-actions .pd-btn-action + .pd-btn-action[b-uikx5798m6] {
        border-left: 1px solid rgba(0, 0, 0, .12);
    }

    /* Message d'erreur : en haut de la carte, sur toute la largeur */
    .pd-side-actions .pd-error[b-uikx5798m6] {
        flex: 0 0 100%;
        padding: .3rem .5rem 0;
        background: #fff;
    }

    .pd-error[b-uikx5798m6] { font-size: .6rem; }
    .pd-spinner[b-uikx5798m6] { width: 11px; height: 11px; border-width: 1.5px; }

    /* La carte est le bouton : on neutralise le cadre et le fond propres au bouton */
    .pd .pd-side .pd-side-actions[b-uikx5798m6] {
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
    }

    .pd .pd-side .pd-side-actions:has(.pd-btn-action--valider)[b-uikx5798m6] {
        background: #c92a2a;
        border-color: #c92a2a;
    }

    .pd .pd-side .pd-side-actions .pd-btn-action[b-uikx5798m6] {
        flex: 1 1 0;
        width: auto !important;
        height: 32px;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .pd .pd-side .pd-side-actions .pd-btn-action + .pd-btn-action[b-uikx5798m6] {
        border-left: 1px solid rgba(0, 0, 0, .12) !important;
    }

    .pd .pd-side .pd-side-actions .pd-btn-action--annuler[b-uikx5798m6] { color: #6b7280 !important; }
    .pd .pd-side .pd-side-actions .pd-btn-action--supprimer[b-uikx5798m6] { color: #c92a2a !important; }

    .pd .pd-side .pd-side-actions .pd-btn-action--valider[b-uikx5798m6],
    .pd .pd-side .pd-side-actions .pd-btn-action--valider span[b-uikx5798m6],
    .pd .pd-side .pd-side-actions .pd-btn-action--valider i[b-uikx5798m6] {
        color: #fff !important;
    }

    /* ---------- Popup de confirmation ----------
       Au-dessus des volets (1500) et des languettes (1600) */
    .pd-modal-overlay[b-uikx5798m6] { z-index: 2000; }
    .pd-modal[b-uikx5798m6] { max-width: 290px; padding: 1rem; border-radius: 12px; }
    .pd-modal-icon[b-uikx5798m6] { width: 34px; height: 34px; font-size: 1rem; margin-bottom: .5rem; }
    .pd-modal-title[b-uikx5798m6] { font-size: .8rem; }
    .pd-modal-text[b-uikx5798m6] { font-size: .65rem; margin-bottom: .7rem; }
    .pd-modal-btn[b-uikx5798m6] { font-size: .65rem; padding: .4rem .5rem; border-radius: 7px; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    /* top / bottom viennent des variables de .paiements-content (148px / 26px) */
    .pd-side[b-uikx5798m6] {
        width: var(--drawer-w, 55vw);
        max-width: var(--drawer-w, 55vw);
    }
}
/* /Components/Pages/Ressources/Paiements/Paiements.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.paiements-page[b-uh5a5hgl5d] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES CLIENTS (bureau)
========================================== */

.paiements-sticky[b-uh5a5hgl5d] {
    position: fixed;
    top: 85px;
    left: 250px;
    right: 60px;
    height: 120px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 16px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.paiements-content[b-uh5a5hgl5d] {
    position: fixed;

    top: 180px;
    bottom: 20px;
    left: 240px;
    right: 30px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

/* Colonne gauche : liste des services */
.paiements-left[b-uh5a5hgl5d] {
    flex: 0 0 23%;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
    padding: .5rem;
    margin-top: 10px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Colonne droite : détails du service sélectionné */
.paiements-right[b-uh5a5hgl5d] {
    flex: 1;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
    padding: 1rem;
}

.empty-paiements[b-uh5a5hgl5d] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languettes et fond cliquable : cachés sur ordinateur */
.paiements-content .drawer-tab[b-uh5a5hgl5d],
.paiements-content .drawer-backdrop[b-uh5a5hgl5d] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - volets et languettes glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors des volets les referme (fond cliquable)
   - volets collés sous la bande des clients, coins arrondis
     seulement en bas
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
   Le volet de droite est défini dans InfoPaiements.razor.css.
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des clients : pleine largeur, sans coins arrondis */
    html body .paiements-sticky[b-uh5a5hgl5d] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .paiements-content[b-uh5a5hgl5d] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit (utilisé par InfoPaiements) */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .paiements-content .paiements-right[b-uh5a5hgl5d] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: .3rem !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    .empty-paiements[b-uh5a5hgl5d] { font-size: .65rem; }

    /* Clic en dehors des volets : les referme (sous les volets et les languettes) */
    html body .paiements-content .drawer-backdrop[b-uh5a5hgl5d] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .paiements-content .paiements-left[b-uh5a5hgl5d] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        min-width: 0 !important;
        height: auto !important;
        margin-top: 0 !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .paiements-content.left-open .paiements-left[b-uh5a5hgl5d] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .paiements-content .drawer-tab[b-uh5a5hgl5d] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .paiements-content .drawer-tab:hover[b-uh5a5hgl5d] {
        background: rgba(225, 110, 110, .98);
    }

    .paiements-content .drawer-tab-left[b-uh5a5hgl5d] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .paiements-content.left-open .drawer-tab-left[b-uh5a5hgl5d] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .paiements-content .drawer-tab-right[b-uh5a5hgl5d] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .paiements-content.right-open .drawer-tab-right[b-uh5a5hgl5d] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .paiements-sticky[b-uh5a5hgl5d] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .paiements-content[b-uh5a5hgl5d] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --drawer-w: 55vw;
        --left-w: 55vw;
    }

    .paiements-content .drawer-tab[b-uh5a5hgl5d] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Ressources/Televersement/InfoTeleversement.razor.rz.scp.css */
/* ==========================================
   Détails du service
========================================== */

.televersement-details[b-r8grb9gg69] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1rem;
}

.televersement-details-name[b-r8grb9gg69] {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.televersement-details-delai[b-r8grb9gg69],
.televersement-details-cout[b-r8grb9gg69] {
    font-size: .8rem;
    font-weight: 600;
    color: #c92a2a;
}

/* ==========================================
   Tableau des documents
========================================== */

.televersement-doc-table-wrapper[b-r8grb9gg69] {
    overflow-x: auto;
}

.televersement-doc-table[b-r8grb9gg69] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    table-layout: fixed;
}

.televersement-doc-table th:nth-child(1)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(1)[b-r8grb9gg69] {
    width: 32px;
}

.televersement-doc-table th:nth-child(2)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(2)[b-r8grb9gg69] {
    width: 38%;
}

.televersement-doc-table th:nth-child(3)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(3)[b-r8grb9gg69] {
    width: 32%;
}

.televersement-doc-table th:nth-child(4)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(4)[b-r8grb9gg69] {
    width: 90px;
}

.televersement-doc-table thead th[b-r8grb9gg69] {
    text-align: left;
    padding: .35rem .4rem;
    color: #6b7280;
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    border-bottom: 1px solid #878889;
}

.televersement-doc-table tbody tr[b-r8grb9gg69] {
    border-bottom: 1px solid #f3f4f6;
    transition: .2s;
}

.televersement-doc-table tbody tr:hover[b-r8grb9gg69] {
    background: #fafafa;
}

.televersement-doc-table tbody tr.uploaded[b-r8grb9gg69] {
    background: #f0fdf4;
}

.televersement-doc-name[b-r8grb9gg69] {
    padding: .35rem .3rem .35rem .4rem;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
}

.televersement-doc-status[b-r8grb9gg69] {
    padding: .35rem .4rem .35rem .3rem;
    max-width: 0;
}

.televersement-filename-link[b-r8grb9gg69] {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    color: #15803d;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.televersement-filename-link:hover[b-r8grb9gg69] {
    text-decoration: underline;
}

.televersement-doc-action[b-r8grb9gg69] {
    padding: .6rem;
    text-align: right;
    display: flex;
    gap: .4rem;
    justify-content: flex-end;
}

.televersement-upload-btn[b-r8grb9gg69],
.televersement-view-btn[b-r8grb9gg69] {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #c92a2a;
    cursor: pointer;
    transition: .2s;
}

.televersement-upload-btn:hover[b-r8grb9gg69],
.televersement-view-btn:hover[b-r8grb9gg69] {
    background: #c92a2a;
    color: #fff;
}

.televersement-view-btn[b-r8grb9gg69] {
    background: #eef2ff;
    color: #c92a2a;
}

.televersement-view-btn:hover[b-r8grb9gg69] {
    background: #c92a2a;
    color: #fff;
}

/* ==========================================
   Colonne "étapes" : cercles numérotés + tuyaux
========================================== */

.televersement-doc-step[b-r8grb9gg69] {
    width: 36px;
    padding: 0;
    text-align: center;
}

.step-track[b-r8grb9gg69] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 44px;
}

.step-circle[b-r8grb9gg69] {
    position: relative;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: .68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s, color .2s;
}

.step-circle.filled[b-r8grb9gg69] {
    background: #15803d;
    color: #fff;
}

.step-pipe-top[b-r8grb9gg69],
.step-pipe-bottom[b-r8grb9gg69] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: #e5e7eb;
    z-index: 1;
    transition: background-color .2s;
}

.step-pipe-top[b-r8grb9gg69] {
    top: 0;
    height: calc(50% + 11px);
}

.step-pipe-bottom[b-r8grb9gg69] {
    bottom: 0;
    height: calc(50% + 11px);
}

.step-pipe-top.filled[b-r8grb9gg69],
.step-pipe-bottom.filled[b-r8grb9gg69] {
    background: #15803d;
}

/* ==========================================
   Type de document + nom de fichier : icônes inline
========================================== */

.doc-type-row[b-r8grb9gg69],
.doc-filename-row[b-r8grb9gg69] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.doc-inline-icon[b-r8grb9gg69] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: .7rem;
    flex-shrink: 0;
    transition: opacity .15s, background-color .2s, color .2s;
    opacity: 0;
    visibility: hidden;
}

.televersement-doc-table tbody tr:hover .doc-inline-icon[b-r8grb9gg69] {
    opacity: 1;
    visibility: visible;
}

.doc-type-row:focus-within .doc-inline-icon[b-r8grb9gg69],
.doc-filename-row:focus-within .doc-inline-icon[b-r8grb9gg69] {
    opacity: 1;
    visibility: visible;
}

.doc-inline-rename[b-r8grb9gg69] {
    background: #fff7e6;
    color: #b45309;
}

.doc-inline-rename:hover[b-r8grb9gg69] {
    background: #b45309;
    color: #fff;
}

.doc-inline-delete[b-r8grb9gg69] {
    background: #fdecec;
    color: #c92a2a;
}

.doc-inline-delete:hover[b-r8grb9gg69] {
    background: #c92a2a;
    color: #fff;
}

/* ==========================================
   Modale de renommage (partagée type/fichier)
========================================== */

.televersement-rename-input[b-r8grb9gg69] {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: .85rem;
}

.televersement-rename-confirm[b-r8grb9gg69] {
    padding: .4rem .9rem;
    border: none;
    border-radius: 8px;
    background: #c92a2a;
    color: #fff;
    cursor: pointer;
    font-size: .8rem;
    margin-left: .5rem;
}

.televersement-rename-confirm:hover[b-r8grb9gg69] {
    background: #a01f1f;
}

.televersement-rename-confirm:disabled[b-r8grb9gg69],
.televersement-modal-cancel:disabled[b-r8grb9gg69] {
    opacity: .6;
    cursor: not-allowed;
}

/* ==========================================
   Modale d'upload
========================================== */

.televersement-modal-overlay[b-r8grb9gg69] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647;
    isolation: isolate;
}

/* Si backdrop-filter n'est pas supporté ou ne s'applique pas,
   on assombrit davantage le fond pour compenser l'absence de flou. */
@supports not (backdrop-filter: blur(1px)) {
    .televersement-modal-overlay[b-r8grb9gg69] {
        background: rgba(17, 24, 39, .75);
    }
}

.televersement-modal[b-r8grb9gg69] {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 420px;
    padding: 1.2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.televersement-modal-header[b-r8grb9gg69] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.televersement-modal-header h4[b-r8grb9gg69] {
    margin: 0;
    font-size: .95rem;
    color: #111827;
}

.televersement-modal-close[b-r8grb9gg69] {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    font-size: 1rem;
}

.televersement-modal-body[b-r8grb9gg69] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.televersement-file-input[b-r8grb9gg69] {
    font-size: .8rem;
}

.televersement-modal-filename[b-r8grb9gg69] {
    font-size: .8rem;
    color: #15803d;
    margin: 0;
}

.televersement-modal-footer[b-r8grb9gg69] {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.televersement-modal-cancel[b-r8grb9gg69] {
    padding: .4rem .9rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: .8rem;
    color: #c92a2a;
}

.televersement-modal-cancel:hover[b-r8grb9gg69] {
    background: #f9fafb;
}

.televersement-autofill-btn[b-r8grb9gg69] {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #f3e8ff;
    color: #7c3aed;
    cursor: pointer;
    transition: .2s;
}

.televersement-autofill-btn:hover[b-r8grb9gg69] {
    background: #7c3aed;
    color: #fff;
}

.televersement-autofill-hint[b-r8grb9gg69] {
    font-size: .78rem;
    color: #6b7280;
    margin: 0 0 .4rem;
}

.televersement-autofill-download[b-r8grb9gg69] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    color: #15803d;
    font-weight: 600;
    text-decoration: none;
}

.televersement-autofill-download:hover[b-r8grb9gg69] {
    text-decoration: underline;
}

.televersement-doc-table th:nth-child(4)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(4)[b-r8grb9gg69] {
    width: 120px; /* était 90px : élargi pour accueillir 3 boutons (voir/auto-remplir/upload) */
}

.televersement-doc-action[b-r8grb9gg69] {
    padding: .6rem .3rem;
    text-align: right;
    display: flex;
    gap: .3rem;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* ==========================================
   Layout principal
========================================== */

.televersement-layout[b-r8grb9gg69] {
    display: flex;
    align-items: stretch;
    gap: .1rem;

    height: 100%;            /* remplit le panneau .televersement-right */
    overflow: hidden;
}

.televersement-main[b-r8grb9gg69] {
    flex: 0 0 60%;
    max-width: 60%;
    min-width: 0;

    height: 100%;
    overflow-y: auto;        /* seul le tableau défile */
}

/* ==========================================
   Colonne latérale
   Cartes du haut et du milieu : hauteur = contenu
   Dernière carte : poussée tout en bas de la colonne
========================================== */

.televersement-side[b-r8grb9gg69] {
    flex: 0 0 30%;
    max-width: 30%;
    min-width: 0;

    box-sizing: border-box;
    padding: .5rem .5rem .5rem 0;

    display: flex;
    flex-direction: column;
    gap: .5rem;

    height: 100%;            /* pleine hauteur du panneau : la dernière carte va tout en bas */
    overflow-y: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.televersement-side[b-r8grb9gg69]::-webkit-scrollbar {
    display: none;
}

.televersement-side-top[b-r8grb9gg69],
.televersement-side-middle[b-r8grb9gg69],
.televersement-side-bottom[b-r8grb9gg69] {
    flex: 0 0 auto;
    box-sizing: border-box;

    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;

    overflow: visible;
}

.televersement-side-bottom[b-r8grb9gg69] {
    margin-top: auto;           /* colle la carte au fond de la colonne */
    min-height: 60px;
    overflow: hidden;
}

.televersement-side-empty[b-r8grb9gg69] {
    font-size: .75rem;
    color: #9ca3af;
}

/* ---- Carte du haut : consultant ---- */

.televersement-consultant[b-r8grb9gg69] {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.televersement-consultant-avatar[b-r8grb9gg69] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    overflow: hidden;

    background: #fdecec;
    color: #c92a2a;
    font-weight: 600;
    font-size: .85rem;
}

.televersement-consultant-avatar img[b-r8grb9gg69] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.televersement-consultant-info[b-r8grb9gg69] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.televersement-consultant-name[b-r8grb9gg69] {
    margin: 0;
    font-size: .85rem;
    font-weight: 700;
    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.televersement-consultant-type[b-r8grb9gg69],
.televersement-consultant-pays[b-r8grb9gg69] {
    font-size: .7rem;
    color: #6b7280;
}

/* ---- Carte du milieu : service ---- */

.televersement-service-header[b-r8grb9gg69] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.televersement-service-name[b-r8grb9gg69] {
    margin: 0;
    font-size: .9rem;
    color: #111827;
}

.televersement-service-meta[b-r8grb9gg69] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin-top: .3rem;
}

.televersement-service-delai[b-r8grb9gg69] {
    font-size: .9rem;
    color: #a40b0b;
}

.televersement-service-cout[b-r8grb9gg69] {
    padding: .25rem .7rem;

    font-size: .8rem;
    font-weight: 600;
    color: #c92a2a;

    border: 2px solid #c92a2a;
    border-radius: 999px;

    white-space: nowrap;
}

/* ---- Champs (cartes haut et milieu) ---- */

.televersement-side-details[b-r8grb9gg69] {
    display: flex;
    flex-direction: column;
    gap: .3rem;

    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

.televersement-side-field[b-r8grb9gg69] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.televersement-field-label[b-r8grb9gg69] {
    flex-shrink: 0;

    font-size: .52rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.televersement-field-value[b-r8grb9gg69] {
    font-size: .68rem;
    color: #374151;
    text-align: right;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.televersement-field-value--scroll[b-r8grb9gg69] {
    overflow-x: auto;
    text-overflow: clip;

    max-width: 160px;
    text-align: left;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.televersement-field-value--scroll[b-r8grb9gg69]::-webkit-scrollbar {
    display: none;
}

/* ---- Carte du bas : statistiques ---- */

.televersement-stats-chart-wrapper[b-r8grb9gg69] {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .3rem;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.televersement-stats-chart-wrapper[b-r8grb9gg69]::-webkit-scrollbar {
    display: none;
}

.televersement-stats-svg[b-r8grb9gg69] {
    display: block;
    flex-shrink: 0;
}

.televersement-stats-area[b-r8grb9gg69] {
    fill: rgba(201, 42, 42, .15);
    stroke: none;
}

.televersement-stats-line[b-r8grb9gg69] {
    fill: none;
    stroke: #c92a2a;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.televersement-stats-dot[b-r8grb9gg69] {
    fill: #c92a2a;
    stroke: #fff;
    stroke-width: 1;
}

.televersement-stats-labels[b-r8grb9gg69] {
    display: flex;
    flex-shrink: 0;
}

.televersement-stat-value[b-r8grb9gg69] {
    flex-shrink: 0;
    text-align: center;

    font-size: .6rem;
    font-weight: 600;
    color: #c92a2a;
}

/* =====================================================
   Compact et épuré (style Apple)
   - partie du milieu (tableau) : 75 %, dans son propre cadre, sans traits
   - colonne de droite (25 %) : hors cadre, 3 cartes à hauteur de leur contenu
===================================================== */
.televersement-layout[b-r8grb9gg69] {
    gap: .5rem;
}

/* ---------- Partie du milieu : le tableau ---------- */
.televersement-main[b-r8grb9gg69] {
    flex: 0 1 75%;
    max-width: 75%;
    min-width: 0;

    height: auto;
    max-height: 100%;
    align-self: flex-start;

    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.televersement-details[b-r8grb9gg69] {
    padding: .5rem .7rem;
}

.televersement-doc-table[b-r8grb9gg69] {
    font-size: .72rem;
}

/* Plus aucun trait : ni sous l'en-tête, ni entre les lignes */
.televersement-doc-table thead th[b-r8grb9gg69] {
    padding: .25rem .4rem;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: #8e8e93;
    border-bottom: none;
}

.televersement-doc-table tbody tr[b-r8grb9gg69] {
    border-bottom: none;
}

.televersement-doc-table tbody tr:hover[b-r8grb9gg69] {
    background: #f5f5f7;
}

.televersement-doc-table tbody tr.uploaded[b-r8grb9gg69] {
    background: #f3fbf5;
}

.televersement-doc-name[b-r8grb9gg69] {
    padding: .25rem .3rem .25rem .4rem;
    font-weight: 500;
    color: #1d1d1f;
}

.televersement-doc-status[b-r8grb9gg69] {
    padding: .25rem .4rem .25rem .3rem;
}

.televersement-doc-action[b-r8grb9gg69] {
    padding: .25rem .3rem;
}

.step-track[b-r8grb9gg69] {
    min-height: 34px;
}

.step-circle[b-r8grb9gg69] {
    width: 18px;
    height: 18px;
    font-size: .6rem;
}

.step-pipe-top[b-r8grb9gg69],
.step-pipe-bottom[b-r8grb9gg69] {
    width: 2px;
}

.step-pipe-top[b-r8grb9gg69] {
    height: calc(50% + 9px);
}

.step-pipe-bottom[b-r8grb9gg69] {
    height: calc(50% + 9px);
}

.televersement-upload-btn[b-r8grb9gg69],
.televersement-view-btn[b-r8grb9gg69],
.televersement-autofill-btn[b-r8grb9gg69] {
    width: 20px;
    height: 20px;
    font-size: .68rem;
}

.doc-inline-icon[b-r8grb9gg69] {
    width: 18px;
    height: 18px;
    font-size: .64rem;
}

/* ---------- Colonne de droite : hors cadre ---------- */
.televersement-side[b-r8grb9gg69] {
    flex: 0 1 25%;
    max-width: 25%;
    padding: 0;
    gap: .4rem;
}

/* Chaque carte garde son propre cadre léger et la hauteur de son contenu ;
   la dernière reste collée en bas de la colonne. */
.televersement-side-top[b-r8grb9gg69],
.televersement-side-middle[b-r8grb9gg69],
.televersement-side-bottom[b-r8grb9gg69] {
    flex: 0 0 auto;
    padding: .5rem .6rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.televersement-side-bottom[b-r8grb9gg69] {
    margin-top: auto;
    min-height: 0;
}

.televersement-consultant[b-r8grb9gg69] {
    gap: .5rem;
}

.televersement-consultant-avatar[b-r8grb9gg69] {
    width: 34px;
    height: 34px;
    font-size: .75rem;
}

.televersement-consultant-name[b-r8grb9gg69] {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.televersement-consultant-type[b-r8grb9gg69],
.televersement-consultant-pays[b-r8grb9gg69] {
    font-size: .62rem;
    color: #8e8e93;
}

.televersement-service-name[b-r8grb9gg69] {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.televersement-service-meta[b-r8grb9gg69] {
    margin-top: .2rem;
}

.televersement-service-delai[b-r8grb9gg69] {
    font-size: .72rem;
}

.televersement-service-cout[b-r8grb9gg69] {
    padding: .1rem .5rem;
    font-size: .7rem;
    border-width: 1.5px;
}

/* Champs : sans trait au-dessus */
.televersement-side-details[b-r8grb9gg69] {
    gap: .2rem;
    margin-top: .35rem;
    padding-top: 0;
    border-top: none;
}

.televersement-field-label[b-r8grb9gg69] {
    font-size: .5rem;
    letter-spacing: .05em;
    color: #8e8e93;
}

.televersement-field-value[b-r8grb9gg69] {
    font-size: .64rem;
    color: #1d1d1f;
}

.televersement-side-empty[b-r8grb9gg69] {
    font-size: .68rem;
}

.televersement-stat-value[b-r8grb9gg69] {
    font-size: .56rem;
}

/* =====================================================
   Colonne « Statut » : contenu dans un cadre
===================================================== */
.doc-status-pending[b-r8grb9gg69] {
    display: inline-flex;
    align-items: center;
    padding: .1rem .55rem;
    font-size: .64rem;
    font-weight: 500;
    color: #86868b;
    background: #f5f5f7;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    white-space: nowrap;
}

.televersement-doc-status .doc-filename-row[b-r8grb9gg69] {
    flex-wrap: nowrap;
    max-width: 100%;
    box-sizing: border-box;
    padding: .1rem .45rem;
    background: #f3fbf5;
    border: 1px solid rgba(21, 128, 61, .25);
    border-radius: 8px;
}

.televersement-doc-status .televersement-filename-link[b-r8grb9gg69] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
}

/* =====================================================
   Colonnes Document et Statut flexibles
   (n° et actions gardent une largeur fixe)
===================================================== */
.televersement-doc-table[b-r8grb9gg69] {
    table-layout: auto;
    width: 100%;
}

.televersement-doc-table th:nth-child(1)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(1)[b-r8grb9gg69] {
    width: 32px;
}

.televersement-doc-table th:nth-child(2)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(2)[b-r8grb9gg69] {
    width: auto;
    min-width: 8rem;
}

.televersement-doc-table th:nth-child(3)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(3)[b-r8grb9gg69] {
    width: auto;
    min-width: 6rem;
}

.televersement-doc-table th:nth-child(4)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(4)[b-r8grb9gg69] {
    width: 1%;
    white-space: nowrap;
}

.televersement-doc-name[b-r8grb9gg69],
.televersement-doc-status[b-r8grb9gg69] {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.televersement-doc-status .doc-filename-row[b-r8grb9gg69] {
    display: inline-flex;
    flex-wrap: wrap;
}

.televersement-doc-status .televersement-filename-link[b-r8grb9gg69] {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

/* =====================================================
   Actions collées à l'extrémité droite
===================================================== */
.televersement-doc-table th:nth-child(4)[b-r8grb9gg69] {
    text-align: right;
}

.televersement-doc-table td.televersement-doc-action[b-r8grb9gg69] {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
    padding-right: .5rem;
}

.televersement-doc-action > *[b-r8grb9gg69] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    vertical-align: middle;
}

/* =====================================================
   Statut juste à droite de Document, aligné à gauche
   (Document prend sa largeur utile, Statut absorbe le reste)
===================================================== */
.televersement-doc-table th:nth-child(2)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(2)[b-r8grb9gg69] {
    width: 1%;
    min-width: 10rem;
    white-space: nowrap;
}

.televersement-doc-table th:nth-child(3)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(3)[b-r8grb9gg69] {
    width: 100%;
    text-align: left;
}

.televersement-doc-name[b-r8grb9gg69] {
    white-space: nowrap;
    overflow-wrap: normal;
}

.televersement-doc-status[b-r8grb9gg69] {
    text-align: left;
}

/* Document : largeur = texte, une seule ligne, aucune largeur minimale fixe */
.televersement-doc-table th:nth-child(2)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(2)[b-r8grb9gg69] {
    width: 1%;
    min-width: 0;
    white-space: nowrap;
}

.televersement-doc-name[b-r8grb9gg69] {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    padding-right: 1rem;
}

/* Statut : les icônes restent toujours sur la même ligne que le nom du fichier.
   Seul le nom s'adapte à l'espace disponible (coupé avec « … » si nécessaire). */
.televersement-doc-table td:nth-child(3)[b-r8grb9gg69] {
    max-width: 0;
}

.televersement-doc-status[b-r8grb9gg69] {
    overflow: hidden;
    white-space: nowrap;
}

.televersement-doc-status .doc-filename-row[b-r8grb9gg69] {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 100%;
    min-width: 0;
}

.televersement-doc-status .televersement-filename-link[b-r8grb9gg69] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.televersement-doc-status .doc-filename-row > :not(.televersement-filename-link)[b-r8grb9gg69] {
    flex: 0 0 auto;
}

/* Document : le nom et ses icônes restent toujours sur la même ligne */
.televersement-doc-name .doc-type-row[b-r8grb9gg69] {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.televersement-doc-name .doc-type-row > span[b-r8grb9gg69] {
    flex: 0 1 auto;
    white-space: nowrap;
}

.televersement-doc-name .doc-type-row > :not(span)[b-r8grb9gg69] {
    flex: 0 0 auto;
}

/* Plus de vert sur toute la ligne : seul le cadre du statut est vert */
.televersement-doc-table tbody tr.uploaded[b-r8grb9gg69],
.televersement-doc-table tbody tr.uploaded:hover[b-r8grb9gg69] {
    background: transparent;
}

.televersement-doc-table tbody tr.uploaded:hover[b-r8grb9gg69] {
    background: #f5f5f7;
}

/* =====================================================
   Document et Statut : texte entier visible, largeur flexible
   (chaque colonne s'adapte à son contenu, icônes sur la même ligne)
===================================================== */
.televersement-doc-table th:nth-child(2)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(2)[b-r8grb9gg69],
.televersement-doc-table th:nth-child(3)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(3)[b-r8grb9gg69] {
    width: auto;
    min-width: 0;
    max-width: none;
    text-align: left;
}

.televersement-doc-name[b-r8grb9gg69],
.televersement-doc-status[b-r8grb9gg69] {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.televersement-doc-status .doc-filename-row[b-r8grb9gg69] {
    max-width: none;
}

.televersement-doc-status .televersement-filename-link[b-r8grb9gg69],
.televersement-doc-name .doc-type-row > span[b-r8grb9gg69] {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* Document : texte toujours entier (aucune troncature possible) */
.televersement-doc-table-wrapper[b-r8grb9gg69] {
    overflow-x: auto;
}

.televersement-doc-table[b-r8grb9gg69] {
    table-layout: auto !important;
    width: max-content;
    min-width: 100%;
}

.televersement-doc-table th:nth-child(2)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(2)[b-r8grb9gg69],
.televersement-doc-table th:nth-child(3)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(3)[b-r8grb9gg69] {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.televersement-doc-table td:nth-child(2) *[b-r8grb9gg69],
.televersement-doc-table td:nth-child(3) .doc-filename-row[b-r8grb9gg69],
.televersement-doc-table td:nth-child(3) .televersement-filename-link[b-r8grb9gg69] {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.televersement-doc-name .doc-type-row > span[b-r8grb9gg69],
.televersement-doc-status .televersement-filename-link[b-r8grb9gg69] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Statut collé à la colonne Document : il recule ou avance selon la largeur du texte de Document */
.televersement-doc-table th:nth-child(2)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(2)[b-r8grb9gg69] {
    width: 1% !important;
    white-space: nowrap;
    padding-right: .75rem;
}

.televersement-doc-table th:nth-child(3)[b-r8grb9gg69],
.televersement-doc-table td:nth-child(3)[b-r8grb9gg69] {
    width: 100% !important;
    text-align: left;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - tableau sur toute la largeur
   - volet latéral = tiroir fixe qui glisse (transform), comme
     le volet gauche de la page : même durée, même courbe
   - collé sous la bande des personnes, coins arrondis seulement
     en bas ; même haut / même bas que le volet gauche, via les
     variables --content-top, --content-bottom, --drawer-inset
     (définies sur .televersement-content dans Televersement.razor.css)
   - Statistiques : carte complète fixée en bas du volet (sticky)
   - ouverture pilotée par la classe .open (paramètre SideOpen)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .televersement-layout[b-r8grb9gg69] { gap: 0; }

    /* ---------- Tableau des documents ---------- */
    .televersement-main[b-r8grb9gg69] {
        flex: 1 1 100%;
        max-width: 100%;
        border-radius: 8px;
    }

    .televersement-details[b-r8grb9gg69] { padding: .3rem .35rem; }
    .televersement-doc-loading[b-r8grb9gg69] { font-size: .6rem; margin-top: .3rem; }

    .televersement-doc-table[b-r8grb9gg69] { font-size: .65rem; }
    .televersement-doc-table thead th[b-r8grb9gg69] { padding: .2rem .3rem; font-size: .5rem; }

    .televersement-doc-table th:nth-child(1)[b-r8grb9gg69],
    .televersement-doc-table td:nth-child(1)[b-r8grb9gg69] { width: 24px; }

    .televersement-doc-table th:nth-child(2)[b-r8grb9gg69],
    .televersement-doc-table td:nth-child(2)[b-r8grb9gg69] { padding-right: .35rem; }

    .televersement-doc-name[b-r8grb9gg69] { padding: .2rem .25rem .2rem .3rem; font-size: .65rem; }
    .televersement-doc-status[b-r8grb9gg69] { padding: .2rem .25rem; }
    .televersement-doc-table td.televersement-doc-action[b-r8grb9gg69] { padding: .2rem .4rem .2rem .25rem; }
    .televersement-doc-action-inner[b-r8grb9gg69] { gap: .35rem; }
    .televersement-doc-action > *[b-r8grb9gg69] { gap: .25rem; }

    .step-track[b-r8grb9gg69] { min-height: 28px; }
    .step-circle[b-r8grb9gg69] { width: 16px; height: 16px; font-size: .52rem; }
    .step-pipe-top[b-r8grb9gg69],
    .step-pipe-bottom[b-r8grb9gg69] { width: 2px; }
    .step-pipe-top[b-r8grb9gg69] { height: calc(50% + 8px); }
    .step-pipe-bottom[b-r8grb9gg69] { height: calc(50% + 8px); }

    /* Pas de survol au toucher : icônes de renommage / suppression toujours visibles */
    .doc-inline-icon[b-r8grb9gg69] {
        opacity: 1;
        visibility: visible;
        width: 16px;
        height: 16px;
        font-size: .55rem;
    }
    .doc-type-row[b-r8grb9gg69],
    .doc-filename-row[b-r8grb9gg69] { gap: .25rem; }

    .doc-status-pending[b-r8grb9gg69] { padding: .05rem .4rem; font-size: .55rem; }
    .televersement-doc-status .doc-filename-row[b-r8grb9gg69] { padding: .05rem .35rem; border-radius: 6px; }
    .televersement-doc-status .televersement-filename-link[b-r8grb9gg69] { font-size: .6rem; }

    .televersement-upload-btn[b-r8grb9gg69],
    .televersement-view-btn[b-r8grb9gg69],
    .televersement-autofill-btn[b-r8grb9gg69] { width: 19px; height: 19px; font-size: .6rem; }

    /* ---------- Volet des informations (bande droite) ----------
       Toujours rendu, glisse hors écran quand il est fermé. */
    .televersement-side[b-r8grb9gg69] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 30px) + var(--drawer-inset, 3px));
        right: 0;                                   /* collé au bord droit */
        left: auto;

        flex: none;
        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        height: auto;
        margin: 0;
        padding: .5rem;
        gap: .35rem;
        box-sizing: border-box;

        z-index: 1500;
        background: #fff;
        border-radius: 0 0 0 14px;
        overflow-y: auto;

        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .televersement-side.open[b-r8grb9gg69] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    .televersement-side-top[b-r8grb9gg69],
    .televersement-side-middle[b-r8grb9gg69],
    .televersement-side-bottom[b-r8grb9gg69] {
        flex: 0 0 auto;
        min-height: 0;
        padding: .5rem;
        border-radius: 10px;
        box-shadow: none;
        overflow: visible;
    }

    /* Statistiques : carte complète, fixée en bas du volet avec une marge */
    .televersement-side-bottom[b-r8grb9gg69] {
        position: sticky;
        bottom: .5rem;               /* même marge que le padding du volet */
        z-index: 5;

        margin-top: auto;            /* poussé en bas si le contenu est court */

        background: #fff;
        border: 1px solid rgba(0, 0, 0, .06);

        /* 1) ombre légère au-dessus ; 2) bande blanche sous la carte
           pour masquer le contenu qui défile dans la marge du bas */
        box-shadow:
            0 -6px 8px -6px rgba(0, 0, 0, .15),
            0 .5rem 0 0 #fff;
    }

    .televersement-consultant[b-r8grb9gg69] { gap: .4rem; }
    .televersement-consultant-avatar[b-r8grb9gg69] { width: 30px; height: 30px; font-size: .65rem; }
    .televersement-consultant-name[b-r8grb9gg69] { font-size: .72rem; }
    .televersement-consultant-type[b-r8grb9gg69],
    .televersement-consultant-pays[b-r8grb9gg69] { font-size: .58rem; }

    .televersement-service-name[b-r8grb9gg69] { font-size: .72rem; }
    .televersement-service-meta[b-r8grb9gg69] { margin-top: .2rem; }
    .televersement-service-delai[b-r8grb9gg69] { font-size: .62rem; }
    .televersement-service-cout[b-r8grb9gg69] { font-size: .62rem; padding: .08rem .45rem; border-width: 1.5px; }

    .televersement-side-details[b-r8grb9gg69] { gap: .2rem; margin-top: .3rem; }
    .televersement-field-label[b-r8grb9gg69] { font-size: .52rem; }
    .televersement-field-value[b-r8grb9gg69] { font-size: .65rem; }
    .televersement-side-empty[b-r8grb9gg69] { font-size: .6rem; }

    .televersement-stats-svg[b-r8grb9gg69] { height: 40px; }
    .televersement-stat-value[b-r8grb9gg69] { font-size: .52rem; }
}

/* ---------- Paysage compact ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    /* top / bottom viennent des variables de .televersement-content (148px / 26px) */
    .televersement-side[b-r8grb9gg69] {
        width: var(--drawer-w, 55vw);
        max-width: var(--drawer-w, 55vw);
    }
}
/* /Components/Pages/Ressources/Televersement/Televersement.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.televersement-page[b-dmygsf6wy9] {
    min-height: 100vh;
    background: url("/images/background.jpg") center / cover fixed no-repeat;
}

/* ==========================================
   BANDE DES PERSONNES (bureau)
========================================== */

.televersement-sticky[b-dmygsf6wy9] {
    position: fixed;
    top: 85px;
    left: 250px;
    right: 60px;
    height: 120px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 16px;

    z-index: 1000;
    overflow: hidden;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.televersement-content[b-dmygsf6wy9] {
    position: fixed;

    top: 200px;
    bottom: 20px;
    left: 240px;
    right: 40px;

    display: flex;
    gap: 1rem;

    padding: 1rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow: hidden;
}

/* Colonne gauche : liste des services */
.televersement-left[b-dmygsf6wy9] {
    flex: 0 0 20%;
    height: 100%;

    overflow-y: auto;

    background: #fff;
    border-radius: 12px;
}

/* Colonne droite : détails du service sélectionné */
.televersement-right[b-dmygsf6wy9] {
    flex: 1;
    min-width: 0;
    height: 100%;

    overflow-y: auto;

    border: none;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.empty-televersement[b-dmygsf6wy9] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

.televersement-doc-loading[b-dmygsf6wy9] { font-size: .8rem; color: #6b7280; margin-top: 1rem; }
.televersement-modal-uploading[b-dmygsf6wy9] { font-size: .8rem; color: #6b7280; }
.televersement-modal-error[b-dmygsf6wy9] { font-size: .8rem; color: #c92a2a; }

/* Languettes et fond cliquable : cachés sur ordinateur */
.televersement-content .drawer-tab[b-dmygsf6wy9],
.televersement-content .drawer-backdrop[b-dmygsf6wy9] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - volets et languettes glissent ensemble (transform) :
     même durée, même courbe, même distance
   - un clic en dehors des volets les referme (fond cliquable)
   - volets collés sous la bande des personnes, coins arrondis
     seulement en bas
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
   Le volet de droite est défini dans InfoTeleversement.razor.css.
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des personnes : pleine largeur, sans coins arrondis */
    html body .televersement-sticky[b-dmygsf6wy9] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, collé sous la bande */
    html body .televersement-content[b-dmygsf6wy9] {
        --content-top: 178px;                       /* = bas de la bande (94 + 84) */
        --content-bottom: 30px;
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit (utilisé par InfoTeleversement) */
        --left-w: 75vw;                             /* volet gauche */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    html body .televersement-content .televersement-right[b-dmygsf6wy9] {
        flex: 1 1 100% !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    .empty-televersement[b-dmygsf6wy9] { font-size: .65rem; }

    /* Clic en dehors des volets : les referme (sous les volets et les languettes) */
    html body .televersement-content .drawer-backdrop[b-dmygsf6wy9] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Volet GAUCHE : collé au bord gauche ---------- */
    html body .televersement-content .televersement-left[b-dmygsf6wy9] {
        position: absolute !important;
        top: 0 !important;
        bottom: var(--drawer-inset) !important;
        left: 0 !important;
        flex: none !important;
        width: var(--left-w) !important;
        min-width: 0 !important;
        height: auto !important;
        padding: .4rem !important;
        border-radius: 0 0 14px 0 !important;
        z-index: 30;

        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);

        transform: translateX(calc(-100% - 20px)) !important;   /* sort entièrement de l'écran */
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s linear var(--drawer-dur);
        will-change: transform;
    }

    html body .televersement-content.left-open .televersement-left[b-dmygsf6wy9] {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    visibility 0s;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .televersement-content .drawer-tab[b-dmygsf6wy9] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .televersement-content .drawer-tab:hover[b-dmygsf6wy9] {
        background: rgba(225, 110, 110, .98);
    }

    .televersement-content .drawer-tab-left[b-dmygsf6wy9] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .televersement-content.left-open .drawer-tab-left[b-dmygsf6wy9] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .televersement-content .drawer-tab-right[b-dmygsf6wy9] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .televersement-content.right-open .drawer-tab-right[b-dmygsf6wy9] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .televersement-sticky[b-dmygsf6wy9] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .televersement-content[b-dmygsf6wy9] {
        --content-top: 148px;                       /* = bas de la bande (94 + 54) */
        --content-bottom: 26px;
        --drawer-w: 55vw;
        --left-w: 55vw;
    }

    .televersement-content .drawer-tab[b-dmygsf6wy9] {
        width: 16px;
        height: 40px;
    }
}
/* /Components/Pages/Services/Agents/InfoServiceAgents.razor.rz.scp.css */
/* ========== Layout global ========== */

.reglementes-details[b-5gov7pfzh3] {
    display: flex;
    align-items: flex-start;
    gap: .1rem;

    overflow: visible;
}

.reglementes-main[b-5gov7pfzh3] {
    flex: 0 0 65%;
    max-width: 65%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: .6rem;

    padding: .8rem;
}

.reglementes-details-name[b-5gov7pfzh3] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

.reglementes-details-description[b-5gov7pfzh3] {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: #374151;
}

.reglementes-details-count[b-5gov7pfzh3] {
    width: max-content;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: #fdecec;
    color: #c92a2a;
    font-size: .75rem;
    font-weight: 700;
}

.empty-reglementes[b-5gov7pfzh3] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: .85rem;
}

/* ========== Onglets ========== */

.reglementes-tabs[b-5gov7pfzh3] {
    display: flex;
    gap: .4rem;
    border-bottom: 1px solid #e5e7eb;
    margin-top: .4rem;
}

.reglementes-tab[b-5gov7pfzh3] {
    padding: .5rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    color: #6b7280;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: .15s;
}

.reglementes-tab:hover[b-5gov7pfzh3] {
    color: #c92a2a;
}

.reglementes-tab.active[b-5gov7pfzh3] {
    color: #c92a2a;
    border-bottom-color: #c92a2a;
}

.reglementes-tab-panel[b-5gov7pfzh3] {
    padding-top: .8rem;
}

.reglementes-tab-header[b-5gov7pfzh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .5rem;
}

.reglementes-tab-title[b-5gov7pfzh3] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: #111827;
}

.reglementes-tab-content[b-5gov7pfzh3] {
    font-size: .85rem;
    line-height: 1.6;
    color: #374151;
    white-space: pre-wrap;
}

.reglementes-tab-empty[b-5gov7pfzh3] {
    color: #9ca3af;
    font-style: italic;
}

.reglementes-edit-btn[b-5gov7pfzh3] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    font-size: .72rem;
    font-weight: 600;
    color: #a40b0b;
    background: #f7f5f5;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: .2s;
}

.reglementes-edit-btn:hover[b-5gov7pfzh3] {
    background: #a81f1f;
    color: #fff;
}

/* ========== Formulaire d'édition ========== */

.reglementes-edit-form[b-5gov7pfzh3] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.reglementes-edit-label[b-5gov7pfzh3] {
    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.reglementes-edit-input[b-5gov7pfzh3],
.reglementes-edit-textarea[b-5gov7pfzh3] {
    font-size: .85rem;
    padding: .5rem .7rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: inherit;
    resize: vertical;
}

.reglementes-edit-input:focus[b-5gov7pfzh3],
.reglementes-edit-textarea:focus[b-5gov7pfzh3] {
    outline: none;
    border-color: #c92a2a;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.reglementes-edit-actions[b-5gov7pfzh3] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .4rem;
}

.reglementes-btn-cancel[b-5gov7pfzh3],
.reglementes-btn-save[b-5gov7pfzh3] {
    padding: .4rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: .2s;
}

.reglementes-btn-cancel[b-5gov7pfzh3] {
    background: #f3f4f6;
    color: #374151;
}

.reglementes-btn-cancel:hover[b-5gov7pfzh3] {
    background: #e5e7eb;
}

.reglementes-btn-save[b-5gov7pfzh3] {
    background: #c92a2a;
    color: #fff;
}

.reglementes-btn-save:hover[b-5gov7pfzh3] {
    background: #a81f1f;
}

/* ========== Carte de messagerie (droite) — aligné sur infoServiceAgents-main ========== */

.reglementes-chat[b-5gov7pfzh3] {
    flex: 0 0 35%;
    max-width: 35%;
    min-width: 0;

    padding: .8rem;

    display: flex;
    flex-direction: column;
    height: 70vh;
}

.reglementes-chat-header[b-5gov7pfzh3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    margin: 0;

    top: 0px;
    z-index: 0;

    background: #fff;
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.reglementes-chat-header span[b-5gov7pfzh3] {
    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;
}

.reglementes-chat-messages[b-5gov7pfzh3] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;

    padding: .8rem;
    padding-right: .6rem;

    display: flex;
    flex-direction: column;
    gap: .5rem;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.reglementes-bubble[b-5gov7pfzh3] {
    width: fit-content;
    max-width: 70%;
    min-width: 0;

    padding: .5rem .8rem;

    border-radius: 14px;

    font-size: .8rem;
    line-height: 1.4;

    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.reglementes-bubble-text[b-5gov7pfzh3] {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.reglementes-bubble.outgoing[b-5gov7pfzh3] {
    align-self: flex-end;
    background: #ffe5e5;
    color: #374151;
    border-bottom-right-radius: 4px;
}

.reglementes-bubble.incoming[b-5gov7pfzh3] {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    border-bottom-left-radius: 4px;
}

.reglementes-bubble-time[b-5gov7pfzh3] {
    font-size: .6rem;
    opacity: .7;
    margin-top: .2rem;
    text-align: right;
}

.reglementes-bubble.skeleton[b-5gov7pfzh3] {
    height: 34px;
    border-radius: 14px;
    border: none;
}

.reglementes-bubble.skeleton.incoming[b-5gov7pfzh3] {
    width: 55%;
    align-self: flex-start;
}

.reglementes-bubble.skeleton.outgoing[b-5gov7pfzh3] {
    width: 40%;
    align-self: flex-end;
}

.reglementes-chat-input[b-5gov7pfzh3] {
    display: flex;
    gap: .5rem;

    margin-top: .6rem;
}

.reglementes-chat-input input[b-5gov7pfzh3] {
    flex: 1;
    padding: .5rem .8rem;

    font-size: .8rem;

    border: 1px solid #e5e7eb;
    border-radius: 20px;
}

.reglementes-chat-input input:focus[b-5gov7pfzh3] {
    outline: none;
    border-color: #c92a2a;
    box-shadow: 0 0 0 2px rgba(201, 42, 42, .15);
}

.reglementes-chat-input button[b-5gov7pfzh3] {
    width: 36px;
    height: 36px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    color: #c92a2a;
    border: none;

    font-size: 1.2rem;
    line-height: 1;

    cursor: pointer;
    transition: .2s;
}

.reglementes-chat-input button:hover[b-5gov7pfzh3] {
    color: #a81f1f;
}

.reglementes-date-separator[b-5gov7pfzh3] {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: .4rem 0;
}

.reglementes-date-separator span[b-5gov7pfzh3] {
    padding: .25rem .7rem;

    font-size: .65rem;
    font-weight: 600;
    color: #6b7280;

    background: #eceff1;
    border-radius: 12px;
}
/* /Components/Pages/Services/Agents/ServiceAgents.razor.rz.scp.css */
.serviceAgents-page[b-4jzwmgc6ze]{
min-height:100vh;
background:url("/images/background.jpg") center/cover fixed no-repeat;
}

.serviceAgents-sticky[b-4jzwmgc6ze]{
    position: fixed;
    top: 65px;
    left: 250px;
    right: 55px;
    height: 140px;

    padding: .1rem;

    background: #fff;
    border-bottom: 1px solid #eee;
    border-radius: 16px;

    z-index: 1000;
    overflow: hidden;
}

.serviceAgents-content[b-4jzwmgc6ze]{
    position:fixed;
    top:315px;
    bottom:20px;
    left:240px;
    right:40px;
    display:flex;
    gap:.1rem;
    padding:1rem;
    background:rgba(255,255,255,.9);
    border-radius:16px;
    overflow:hidden;
}

.serviceAgents-left[b-4jzwmgc6ze]{
    flex:0 0 20%;
    height:100%;
    overflow-y:auto;
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    padding:.1rem;
}

.serviceAgents-right[b-4jzwmgc6ze]{
flex:0 0 80%;
height:100%;
overflow-y:auto;
background:#fff;
/* border:1px solid #eee; */
border-radius:12px;
/* padding:.1rem; */
}

.empty-serviceAgents[b-4jzwmgc6ze]{
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:#6b7280;
font-size:.85rem;
}

@media(max-width:900px){
.serviceAgents-sticky[b-4jzwmgc6ze]{
left:0;
right:0;
top:70px;
height:80px;
border-radius:0;
    }
.serviceAgents-content[b-4jzwmgc6ze]{
left:0;
right:0;
top:160px;
bottom:20px;
border-radius:0;
flex-direction:column;
    }
.serviceAgents-left[b-4jzwmgc6ze],
.serviceAgents-right[b-4jzwmgc6ze]{
flex:1;
width:100%;
    }
}
/* /Components/Pages/Services/Statistique/InfoServiceStatistiques.razor.rz.scp.css */
/* ==========================================
   Layout : 23 % / 55 % / 22 %
========================================== */

.infoStatistique[b-1pg3b72io7]{
--a-accent:#c92a2a;
--a-accent-soft:#fdecec;
--a-accent-border:#f8d4d4;
--a-text:#1d1d1f;
--a-muted:#86868b;
--a-faint:#a1a1a6;
--a-bg:#f5f5f7;
--a-surface:#fff;
--a-line:rgba(0,0,0,.06);
--a-radius:16px;
--a-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(0,0,0,.05);
--a-shadow-hover:0 2px 4px rgba(0,0,0,.08),0 14px 30px rgba(0,0,0,.12);

display:grid;
grid-template-columns:minmax(0,23fr) minmax(0,55fr) minmax(0,22fr);
align-items:stretch;
gap:.8rem;
width:100%;
height:var(--info-hauteur,100%);
min-height:0;
grid-template-rows:minmax(0,1fr);
}

.infoStatistique-col[b-1pg3b72io7]{
display:flex;
flex-direction:column;
gap:.3rem;
min-width:0;
min-height:0;
padding:.1rem;
overflow-x:hidden;
overflow-y:auto;
scrollbar-width:thin;
scrollbar-color:rgba(0,0,0,.2) transparent;
}

.infoStatistique-col[b-1pg3b72io7]::-webkit-scrollbar{
width:4px;
}

.infoStatistique-col[b-1pg3b72io7]::-webkit-scrollbar-thumb{
background:rgba(0,0,0,.2);
border-radius:999px;
}

/* Gauche : le dernier cadre est collé au fond de la colonne */
.infoStatistique-col--left > .infoStatistique-card:last-child[b-1pg3b72io7]{
margin-top:auto;
}

/* Milieu : blocs sans cadre ni séparation (cercles en haut, liste, graphique au fond) */
.infoStatistique-col--middle[b-1pg3b72io7]{
gap:.6rem;
}

.infoStatistique-section[b-1pg3b72io7]{
flex:0 0 auto;
display:flex;
flex-direction:column;
gap:.3rem;
min-width:0;
}

.infoStatistique-col--middle > .infoStatistique-section:last-child[b-1pg3b72io7]{
width:100%;
margin-top:auto;
}


/* ==========================================
   Cadre commun
========================================== */

.infoStatistique-card[b-1pg3b72io7]{
flex:0 0 auto;
display:flex;
flex-direction:column;
gap:.2rem;
min-width:0;
padding:.85rem;
background:var(--a-surface);
border:1px solid var(--a-line);
border-radius:var(--a-radius);
box-shadow:var(--a-shadow);
transition:box-shadow .2s ease;
}

.infoStatistique-card:hover[b-1pg3b72io7]{
box-shadow:var(--a-shadow-hover);
}

.infoStatistique-label[b-1pg3b72io7]{
font-size:.55rem;
font-weight:600;
color:var(--a-faint);
text-transform:uppercase;
}


/* ==========================================
   Agent : identité à gauche, photo à droite
========================================== */

.infoStatistique-agent[b-1pg3b72io7]{
display:flex;
align-items:center;
gap:.8rem;
min-width:0;
}

.infoStatistique-agent-info[b-1pg3b72io7]{
flex:1 1 auto;
min-width:0;
display:flex;
flex-direction:column;
gap:.1rem;
}

.infoStatistique-agent-name[b-1pg3b72io7]{
margin:0;
font-size:.7rem;
font-weight:700;
letter-spacing:-.01em;
color:var(--a-text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.infoStatistique-agent-type[b-1pg3b72io7]{
font-size:.52rem;
font-weight:600;
color:var(--a-accent);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.infoStatistique-avatar[b-1pg3b72io7]{
flex:0 0 auto;
width:56px;
height:56px;
margin-left:auto;
display:flex;
align-items:center;
justify-content:center;
background:var(--a-accent-soft);
border:1px solid var(--a-accent-border);
border-radius:50%;
overflow:hidden;
}

.infoStatistique-avatar img[b-1pg3b72io7]{
width:100%;
height:100%;
display:block;
object-fit:cover;
}

.infoStatistique-avatar-letter[b-1pg3b72io7]{
display:flex;
width:100%;
height:100%;
align-items:center;
justify-content:center;
color:var(--a-accent);
font-size:.7rem;
font-weight:700;
}


/* ==========================================
   Service
========================================== */

.infoStatistique-service-name[b-1pg3b72io7]{
margin:0;
font-size:.7rem;
font-weight:700;
line-height:1.2;
letter-spacing:-.01em;
color:var(--a-text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}


/* ==========================================
   Champs : libellé à gauche, valeur à droite
========================================== */

.infoStatistique-field[b-1pg3b72io7]{
display:flex;
align-items:center;
justify-content:space-between;
gap:.5rem;
min-width:0;
padding:.12rem 0;
border-radius:6px;
transition:background-color .15s ease;
}

.infoStatistique-field:hover[b-1pg3b72io7]{
background-color:var(--a-bg);
}

.infoStatistique-field-label[b-1pg3b72io7]{
flex:0 0 auto;
font-size:.55rem;
font-weight:600;
color:var(--a-faint);
text-transform:uppercase;
}

.infoStatistique-field-value[b-1pg3b72io7]{
flex:0 1 auto;
min-width:0;
margin-left:auto;
font-size:.7rem;
color:var(--a-text);
text-align:right;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:color .15s ease;
}

.infoStatistique-field:hover .infoStatistique-field-value[b-1pg3b72io7]{
color:var(--a-accent);
}

/* Valeurs longues (email, adresse) : défilement horizontal */
.infoStatistique-field-value--scroll[b-1pg3b72io7]{
overflow-x:auto;
text-overflow:clip;
scrollbar-width:thin;
scrollbar-color:rgba(0,0,0,.2) transparent;
}

.infoStatistique-field-value--scroll[b-1pg3b72io7]::-webkit-scrollbar{
height:3px;
}

.infoStatistique-field-value--scroll[b-1pg3b72io7]::-webkit-scrollbar-thumb{
background:rgba(0,0,0,.2);
border-radius:999px;
}


/* ==========================================
   Note de l'agent
========================================== */

.infoStatistique-rating[b-1pg3b72io7]{
align-self:flex-start;
margin-top:.15rem;
padding:.05rem .45rem;
background:var(--a-accent-soft);
color:var(--a-accent);
border:1px solid var(--a-accent-border);
border-radius:999px;
font-size:.52rem;
font-weight:700;
}


/* ==========================================
   Description
========================================== */

.infoStatistique-description[b-1pg3b72io7]{
margin:0;
font-size:.65rem;
line-height:1.4;
color:var(--a-muted);
overflow-wrap:anywhere;
}


/* ==========================================
   Pastilles d'état (on / off)
========================================== */

.infoStatistique-flags[b-1pg3b72io7]{
flex-direction:row;
flex-wrap:wrap;
gap:.2rem;
}

.infoStatistique-flag[b-1pg3b72io7]{
display:inline-block;
padding:.1rem .45rem;
border:1px solid transparent;
border-radius:999px;
font-size:.52rem;
font-weight:600;
white-space:nowrap;
cursor:default;
transition:transform .15s ease,box-shadow .15s ease;
}

.infoStatistique-flag:hover[b-1pg3b72io7]{
transform:translateY(-2px) scale(1.05);
}

.infoStatistique-flag.on[b-1pg3b72io7]{
background:#fdecec;
color:#c92a2a;
border-color:#f8d4d4;
}

.infoStatistique-flag.on:hover[b-1pg3b72io7]{
box-shadow:0 3px 8px rgba(201,42,42,.25);
}

.infoStatistique-flag.off[b-1pg3b72io7]{
background:var(--a-bg);
color:var(--a-faint);
border-color:rgba(0,0,0,.08);
}

.infoStatistique-flag.off:hover[b-1pg3b72io7]{
box-shadow:0 3px 8px rgba(0,0,0,.12);
}


/* ==========================================
   Documents
========================================== */

.infoStatistique-docs[b-1pg3b72io7]{
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:.2rem;
list-style:none;
}

.infoStatistique-docs li a[b-1pg3b72io7]{
display:block;
font-size:.65rem;
color:var(--a-accent);
text-decoration:none;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
background-image:linear-gradient(var(--a-accent),var(--a-accent));
background-repeat:no-repeat;
background-position:0 100%;
background-size:0% 1px;
transition:background-size .2s ease,color .2s ease;
}

.infoStatistique-docs li a:hover[b-1pg3b72io7]{
color:#a01f1f;
background-size:100% 1px;
}


/* ==========================================
   Milieu : liste au centre + barres
========================================== */

.infoStatistique-center[b-1pg3b72io7]{
flex:0 0 auto;
display:flex;
align-items:stretch;
gap:.8rem;
min-width:0;
}

.infoStatistique-center-left[b-1pg3b72io7]{
flex:1 1 0;
min-width:0;
display:flex;
flex-direction:column;
gap:.6rem;
}

.infoStatistique-middle-list[b-1pg3b72io7]{
flex:0 0 auto;
min-width:0;
}

.infoStatistique-bars[b-1pg3b72io7]{
flex:0 0 40%;
min-width:0;
display:flex;
flex-direction:column;
gap:.3rem;
}

.infoStatistique-hbars[b-1pg3b72io7]{
display:flex;
flex-direction:column;
gap:.4rem;
}

.infoStatistique-hbar[b-1pg3b72io7]{
display:grid;
grid-template-columns:5.2rem minmax(0,1fr) 1.6rem;
align-items:center;
gap:.4rem;
}

.infoStatistique-hbar-label[b-1pg3b72io7]{
font-size:.55rem;
font-weight:600;
color:var(--a-faint);
text-transform:uppercase;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.infoStatistique-hbar-track[b-1pg3b72io7]{
height:7px;
background:var(--a-bg);
border-radius:999px;
overflow:hidden;
}

.infoStatistique-hbar-fill[b-1pg3b72io7]{
width:100%;
height:100%;
background:linear-gradient(to right,#f5b5b5,#9b1c1c);
transition:clip-path .9s ease;
animation:barre-remplir-b-1pg3b72io7 .9s ease-out both;
}

.infoStatistique-hbar-value[b-1pg3b72io7]{
font-size:.6rem;
font-weight:700;
color:#c92a2a;
text-align:right;
}


/* ==========================================
   4 cercles : en cours / en attente / complétés / annulés
========================================== */

.infoStatistique-top[b-1pg3b72io7]{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
min-width:0;
}

.infoStatistique-rings[b-1pg3b72io7]{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:flex-start;
gap:1rem;
}

.infoStatistique-ring[b-1pg3b72io7]{
display:flex;
flex-direction:column;
align-items:center;
gap:.3rem;
min-width:0;
}

/* Anneau : piste grise + arc en dégradé conique rouge clair (0 %) → rouge foncé (100 %) */
.infoStatistique-ring-graphic[b-1pg3b72io7]{
--niveau:0%;
--epaisseur:6px;
position:relative;
width:64px;
height:64px;
transition:--niveau .9s ease;
animation:disc-remplir-b-1pg3b72io7 1.1s ease-out both;
}

.infoStatistique-ring-graphic[b-1pg3b72io7]::before,
.infoStatistique-ring-graphic[b-1pg3b72io7]::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
}

.infoStatistique-ring-graphic[b-1pg3b72io7]::before{
background:var(--a-bg);
-webkit-mask-image:radial-gradient(farthest-side,transparent calc(100% - var(--epaisseur) - .5px),#000 calc(100% - var(--epaisseur)));
mask-image:radial-gradient(farthest-side,transparent calc(100% - var(--epaisseur) - .5px),#000 calc(100% - var(--epaisseur)));
}

.infoStatistique-ring-graphic[b-1pg3b72io7]::after{
background:conic-gradient(from 0deg,#ee8a8a,#9b1c1c);
-webkit-mask-image:
radial-gradient(farthest-side,transparent calc(100% - var(--epaisseur) - .5px),#000 calc(100% - var(--epaisseur))),
conic-gradient(#000 var(--niveau),transparent var(--niveau));
-webkit-mask-composite:source-in;
mask-image:
radial-gradient(farthest-side,transparent calc(100% - var(--epaisseur) - .5px),#000 calc(100% - var(--epaisseur))),
conic-gradient(#000 var(--niveau),transparent var(--niveau));
mask-composite:intersect;
}

.infoStatistique-ring-value[b-1pg3b72io7]{
position:absolute;
inset:0;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
font-size:.72rem;
font-weight:700;
color:var(--a-text);
}

.infoStatistique-ring-count[b-1pg3b72io7]{
font-size:.5rem;
color:var(--a-muted);
white-space:nowrap;
}

.infoStatistique-ring-label[b-1pg3b72io7]{
font-size:.55rem;
font-weight:600;
color:var(--a-faint);
text-transform:uppercase;
white-space:nowrap;
}


/* ==========================================
   Grand cercle : moyenne globale
   Centre et anneau se remplissent du bas vers le haut.
========================================== */

.infoStatistique-disc[b-1pg3b72io7]{
flex:0 0 auto;
margin:auto;
transform:translate(-1rem,.6rem);
display:flex;
flex-direction:column;
align-items:center;
gap:.3rem;
}

.infoStatistique-disc-body[b-1pg3b72io7]{
--niveau:0%;
--epaisseur:7px;
position:relative;
box-sizing:border-box;
width:120px;
height:120px;
padding:var(--epaisseur);
border-radius:50%;
background:radial-gradient(circle closest-side,#fff5f5 calc(100% - var(--epaisseur)),#fdecec calc(100% - var(--epaisseur)));
box-shadow:0 1px 3px rgba(0,0,0,.12);
transition:--niveau .9s ease;
animation:disc-remplir-b-1pg3b72io7 1.1s ease-out both;
}

.infoStatistique-disc-body[b-1pg3b72io7]::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:linear-gradient(to top,#f5b5b5,#9b1c1c);
-webkit-mask-image:linear-gradient(to top,#000 calc(var(--niveau) * 1.1 - 10%),transparent calc(var(--niveau) * 1.1));
mask-image:linear-gradient(to top,#000 calc(var(--niveau) * 1.1 - 10%),transparent calc(var(--niveau) * 1.1));
}

.infoStatistique-disc-inner[b-1pg3b72io7]{
position:relative;
z-index:1;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);
}

.infoStatistique-disc-value[b-1pg3b72io7]{
position:relative;
z-index:1;
padding:.15rem .5rem;
background:#fff;
border-radius:999px;
box-shadow:0 1px 3px rgba(0,0,0,.18);
font-size:.72rem;
font-weight:700;
color:#c92a2a;
white-space:nowrap;
}


/* ==========================================
   Graphique : dossiers complétés par mois
   Courbe fine, très lisse, un seul trait (échelle 0 → 1000 dossiers)
========================================== */

.infoStatistique-chart-head[b-1pg3b72io7]{
display:flex;
align-items:center;
justify-content:space-between;
gap:.5rem;
}

.infoStatistique-chart-year[b-1pg3b72io7]{
padding:.05rem .45rem;
background:var(--a-accent-soft);
color:var(--a-accent);
border:1px solid var(--a-accent-border);
border-radius:999px;
font-size:.52rem;
font-weight:700;
}

/* Même proportion que le viewBox du SVG (360 × 140) ; la courbe se dessine de gauche à droite */
.infoStatistique-chart-wrap[b-1pg3b72io7]{
position:relative;
width:100%;
aspect-ratio:360 / 140;
animation:courbe-reveler-b-1pg3b72io7 1.2s ease-out both;
}

.infoStatistique-chart-svg[b-1pg3b72io7]{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
overflow:visible;
}

/* Zone sous la courbe : dégradé léger découpé par clip-path (polygone calculé dans le Razor).
   7,14 % et 92,86 % = positions de y = 130 (bas) et y = 10 (haut) dans le viewBox de 140. */
.infoStatistique-chart-area[b-1pg3b72io7]{
position:absolute;
inset:0;
background:linear-gradient(to top,#ee8a8a 7.14%,#9b1c1c 92.86%);
opacity:.2;
}

/* Trait fin, d'une seule couleur, sans remplissage */
.infoStatistique-chart-line[b-1pg3b72io7]{
fill:none;
stroke:#b42323;
stroke-width:1.2;
stroke-linecap:round;
stroke-linejoin:round;
}

/* Point survolable : zone de 16 px autour du point, centrée sur la courbe */
.infoStatistique-chart-point[b-1pg3b72io7]{
position:absolute;
z-index:2;
width:16px;
height:16px;
transform:translate(-50%,-50%);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
outline:none;
}

.infoStatistique-chart-dot[b-1pg3b72io7]{
display:block;
width:5px;
height:5px;
background:#b42323;
border:1px solid #fff;
border-radius:50%;
box-sizing:content-box;
transition:transform .15s ease;
}

.infoStatistique-chart-point:hover .infoStatistique-chart-dot[b-1pg3b72io7],
.infoStatistique-chart-point:focus-visible .infoStatistique-chart-dot[b-1pg3b72io7]{
transform:scale(1.6);
}

/* Infobulle au-dessus du point */
.infoStatistique-chart-tip[b-1pg3b72io7]{
position:absolute;
bottom:calc(100% + 2px);
left:50%;
transform:translate(-50%,4px);
display:flex;
flex-direction:column;
align-items:center;
gap:.05rem;
padding:.25rem .5rem;
background:var(--a-text);
color:#fff;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,.2);
font-size:.55rem;
white-space:nowrap;
pointer-events:none;
opacity:0;
transition:opacity .15s ease,transform .15s ease;
}

.infoStatistique-chart-tip strong[b-1pg3b72io7]{
font-size:.5rem;
font-weight:600;
text-transform:uppercase;
color:#f5b5b5;
}

.infoStatistique-chart-point:hover .infoStatistique-chart-tip[b-1pg3b72io7],
.infoStatistique-chart-point:focus-visible .infoStatistique-chart-tip[b-1pg3b72io7]{
opacity:1;
transform:translate(-50%,0);
}

.infoStatistique-chart-values[b-1pg3b72io7],
.infoStatistique-chart-months[b-1pg3b72io7]{
display:grid;
grid-template-columns:repeat(12,1fr);
text-align:center;
}

.infoStatistique-chart-values span[b-1pg3b72io7]{
font-size:.7rem;
font-weight:700;
color:var(--a-accent);
}

.infoStatistique-chart-months span[b-1pg3b72io7]{
font-size:.5rem;
font-weight:600;
color:var(--a-faint);
text-transform:uppercase;
}


/* ==========================================
   Transitions : remplissage progressif
========================================== */

/* Propriété enregistrée : sans elle, --niveau ne s'anime pas */
@property --niveau{
syntax:'<percentage>';
inherits:true;
initial-value:0%;
}

@keyframes disc-remplir-b-1pg3b72io7{
from{
--niveau:0%;
  }
}

@keyframes barre-remplir-b-1pg3b72io7{
from{
clip-path:inset(0 100% 0 0 round 999px);
  }
}

@keyframes courbe-reveler-b-1pg3b72io7{
from{
clip-path:inset(-200% 100% -50% 0);
  }
to{
clip-path:inset(-200% -20% -50% -20%);
  }
}

/* Les barres démarrent l'une après l'autre */
.infoStatistique-hbar:nth-child(2) .infoStatistique-hbar-fill[b-1pg3b72io7]{ animation-delay:.06s; }
.infoStatistique-hbar:nth-child(3) .infoStatistique-hbar-fill[b-1pg3b72io7]{ animation-delay:.12s; }
.infoStatistique-hbar:nth-child(4) .infoStatistique-hbar-fill[b-1pg3b72io7]{ animation-delay:.18s; }
.infoStatistique-hbar:nth-child(5) .infoStatistique-hbar-fill[b-1pg3b72io7]{ animation-delay:.24s; }
.infoStatistique-hbar:nth-child(6) .infoStatistique-hbar-fill[b-1pg3b72io7]{ animation-delay:.30s; }
.infoStatistique-hbar:nth-child(7) .infoStatistique-hbar-fill[b-1pg3b72io7]{ animation-delay:.36s; }

@media (prefers-reduced-motion:reduce){
.infoStatistique-disc-body[b-1pg3b72io7],
.infoStatistique-ring-graphic[b-1pg3b72io7],
.infoStatistique-hbar-fill[b-1pg3b72io7],
.infoStatistique-chart-wrap[b-1pg3b72io7]{
animation:none;
transition:none;
  }
}


/* ==========================================
   État vide
========================================== */

.empty-infoStatistique[b-1pg3b72io7]{
padding:1.5rem;
text-align:center;
color:#9ca3af;
font-size:.8rem;
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
}


/* ==========================================
   Petits écrans : une seule colonne
========================================== */

@media(max-width:900px){
.infoStatistique[b-1pg3b72io7]{
grid-template-columns:1fr;
grid-template-rows:none;
height:auto;
  }
.infoStatistique-col[b-1pg3b72io7]{
overflow:visible;
  }
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - milieu (cercles, barres, courbe) sur toute la largeur
   - service (gauche) et agent (droite) = tiroirs fixes qui glissent
     (transform), comme les languettes de la page : même durée,
     même courbe, même distance
   - collés sous la bande des agents, au-dessus de la bande des
     services ; coins arrondis seulement en bas ; même haut / même
     bas pour les deux, via les variables --content-top,
     --content-bottom, --drawer-inset
     (définies sur .serviceStatistiques-content dans ServiceStatistiques.razor.css)
   - ouverture pilotée par la classe .open (paramètres LeftOpen / RightOpen)
========================================================== */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    .infoStatistique[b-1pg3b72io7] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        height: 100%;
        gap: 0;
    }

    /* ---------- Milieu ---------- */
    .infoStatistique-col--middle[b-1pg3b72io7] { gap: .45rem; overflow-x: hidden; overflow-y: auto; padding: .1rem; }
    .infoStatistique-section[b-1pg3b72io7] { gap: .2rem; }
    .infoStatistique-label[b-1pg3b72io7] { font-size: .52rem; }

    .infoStatistique-rings[b-1pg3b72io7] { gap: .5rem; justify-content: space-between; }
    .infoStatistique-ring[b-1pg3b72io7] { gap: .2rem; }
    .infoStatistique-ring-graphic[b-1pg3b72io7] { --epaisseur: 5px; width: 48px; height: 48px; }
    .infoStatistique-ring-value[b-1pg3b72io7] { font-size: .56rem; }
    .infoStatistique-ring-label[b-1pg3b72io7] { font-size: .48rem; }
    .infoStatistique-ring-count[b-1pg3b72io7] { font-size: .45rem; }

    .infoStatistique-center[b-1pg3b72io7] { gap: .5rem; }
    .infoStatistique-center-left[b-1pg3b72io7] { gap: .35rem; }
    .infoStatistique-bars[b-1pg3b72io7] { flex: 0 0 50%; }
    .infoStatistique-hbars[b-1pg3b72io7] { gap: .3rem; }
    .infoStatistique-hbar[b-1pg3b72io7] { grid-template-columns: 4rem minmax(0, 1fr) 1.3rem; gap: .3rem; }
    .infoStatistique-hbar-label[b-1pg3b72io7] { font-size: .48rem; }
    .infoStatistique-hbar-track[b-1pg3b72io7] { height: 6px; }
    .infoStatistique-hbar-value[b-1pg3b72io7] { font-size: .5rem; }

    .infoStatistique-disc[b-1pg3b72io7] { transform: none; gap: .2rem; }
    .infoStatistique-disc-body[b-1pg3b72io7] { --epaisseur: 6px; width: 86px; height: 86px; }
    .infoStatistique-disc-value[b-1pg3b72io7] { font-size: .56rem; padding: .1rem .35rem; }

    .infoStatistique-chart-year[b-1pg3b72io7] { font-size: .5rem; padding: .03rem .35rem; }
    .infoStatistique-chart-values span[b-1pg3b72io7] { font-size: .55rem; }
    .infoStatistique-chart-months span[b-1pg3b72io7] { font-size: .45rem; }
    .infoStatistique-chart-tip[b-1pg3b72io7] { font-size: .52rem; padding: .2rem .4rem; }
    .infoStatistique-chart-tip strong[b-1pg3b72io7] { font-size: .48rem; }

    /* ---------- Volets gauche (service) et droite (agent) ----------
       Toujours rendus, glissent hors écran quand ils sont fermés. */
    .infoStatistique-col--left[b-1pg3b72io7],
    .infoStatistique-col--right[b-1pg3b72io7] {
        position: fixed;
        top: var(--content-top, 178px);
        bottom: calc(var(--content-bottom, 84px) + var(--drawer-inset, 3px));

        margin: 0;
        padding: .4rem;
        gap: .35rem;
        box-sizing: border-box;

        z-index: 1500;
        background: #fff;
        overflow-x: hidden;
        overflow-y: auto;

        visibility: hidden;
        pointer-events: none;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s linear var(--drawer-dur, .3s);
        will-change: transform;
    }

    .infoStatistique-col--left[b-1pg3b72io7] {
        left: 0;                                    /* collé au bord gauche */
        width: var(--left-w, 75vw);
        max-width: var(--left-w, 75vw);
        border-radius: 0 0 14px 0;
        box-shadow:
            2px 0 4px rgba(0, 0, 0, .12),
            8px 0 16px rgba(0, 0, 0, .18),
            16px 0 40px rgba(0, 0, 0, .22);
        transform: translateX(calc(-100% - 20px));  /* sort entièrement de l'écran */
    }

    .infoStatistique-col--right[b-1pg3b72io7] {
        right: 0;                                   /* collé au bord droit */
        width: var(--drawer-w, 72vw);
        max-width: var(--drawer-w, 72vw);
        border-radius: 0 0 0 14px;
        box-shadow:
            -2px 0 4px rgba(0, 0, 0, .12),
            -8px 0 16px rgba(0, 0, 0, .18),
            -16px 0 40px rgba(0, 0, 0, .22);
        transform: translateX(calc(100% + 20px));   /* sort entièrement de l'écran */
    }

    .infoStatistique-col--left.open[b-1pg3b72io7],
    .infoStatistique-col--right.open[b-1pg3b72io7] {
        transform: translateX(0);
        visibility: visible;         /* visible immédiatement à l'ouverture */
        pointer-events: auto;
        transition: transform var(--drawer-dur, .3s) var(--drawer-ease, ease),
                    visibility 0s;
    }

    /* ---------- Cartes des volets ---------- */
    .infoStatistique-card[b-1pg3b72io7] { padding: .5rem; border-radius: 10px; gap: .15rem; box-shadow: none; }
    .infoStatistique-service-name[b-1pg3b72io7] { font-size: .72rem; }
    .infoStatistique-field[b-1pg3b72io7] { padding: .1rem 0; gap: .4rem; }
    .infoStatistique-field-label[b-1pg3b72io7] { font-size: .52rem; }
    .infoStatistique-field-value[b-1pg3b72io7] { font-size: .65rem; }

    .infoStatistique-agent[b-1pg3b72io7] { gap: .5rem; }
    .infoStatistique-agent-name[b-1pg3b72io7] { font-size: .72rem; }
    .infoStatistique-agent-type[b-1pg3b72io7] { font-size: .56rem; }
    .infoStatistique-rating[b-1pg3b72io7] { font-size: .52rem; padding: .03rem .35rem; }
    .infoStatistique-avatar[b-1pg3b72io7] { width: 38px; height: 38px; }
    .infoStatistique-avatar-letter[b-1pg3b72io7] { font-size: .65rem; }
    .infoStatistique-description[b-1pg3b72io7] { font-size: .6rem; }
    .infoStatistique-flag[b-1pg3b72io7] { font-size: .52rem; padding: .08rem .4rem; }
    .infoStatistique-docs li a[b-1pg3b72io7] { font-size: .6rem; }

    .empty-infoStatistique[b-1pg3b72io7] { font-size: .65rem; padding: .7rem; }
}
/* /Components/Pages/Services/Statistique/ServiceStatistiques.razor.rz.scp.css */
/* ==========================================
   PAGE
========================================== */

.serviceStatistiques-page[b-krs3cpwgb3] {
    min-height: 100vh;
    background: url("/images/background.jpg") center/cover fixed no-repeat;
}

/* ==========================================
   BANDE DES AGENTS (bureau)
========================================== */

.serviceStatistiques-sticky[b-krs3cpwgb3] {
    position: fixed;
    top: 85px;
    left: 250px;
    right: 60px;
    height: 120px;

    padding: .5rem;
    background: #fff;

    border-bottom: 1px solid #eee;
    border-radius: 16px;

    z-index: 1000;
    overflow: hidden;
}

.statistique-scroll[b-krs3cpwgb3] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: .7rem;

    overflow-x: auto;
    overflow-y: hidden;

    padding: .2rem;
    height: 100%;
    align-items: center;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.statistique-scroll[b-krs3cpwgb3]::-webkit-scrollbar {
    display: none;
}

/* ==========================================
   CONTENU CENTRAL (bureau)
========================================== */

.serviceStatistiques-content[b-krs3cpwgb3] {
    position: fixed;

    top: 200px;
    bottom: 80px;
    left: 225px;
    right: 30px;

    padding: 2rem;

    background: rgba(255, 255, 255, .9);
    border-radius: 16px;

    overflow-y: auto;
}

/* ==========================================
   BANDE DES SERVICES (bas)
========================================== */

.serviceStatistiques-bottom[b-krs3cpwgb3] {
    position: fixed;
    bottom: 33px;
    left: 250px;
    right: 70px;

    z-index: 0;
    background: #fff;
    padding: .3rem;

    border-top: 1px solid #eee;
    border-radius: 12px 12px 0 0;

    animation: slideDown .3s ease;
    overflow: hidden;
}

.empty-serviceStatistiques[b-krs3cpwgb3] {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;
    font-size: .85rem;
}

/* Languettes et fond cliquable : cachés sur ordinateur */
.serviceStatistiques-content .drawer-tab[b-krs3cpwgb3],
.serviceStatistiques-content .drawer-backdrop[b-krs3cpwgb3] {
    display: none;
}

/* ==========================================================
   MOBILE + PAYSAGE COMPACT
   - les volets (service à gauche, agent à droite) sont définis
     dans InfoServiceStatistiques.razor.css : ils glissent avec
     transform, comme les languettes (même durée, même courbe,
     même distance)
   - un clic en dehors des volets les referme (fond cliquable)
   - les deux volets partagent le même haut et le même bas
     (--content-top, --content-bottom, --drawer-inset)
   - bande des agents et bande des services : bord à bord
========================================================== */

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Bande des agents : pleine largeur, sans coins arrondis */
    html body .serviceStatistiques-sticky[b-krs3cpwgb3] {
        top: 94px !important;
        left: 0 !important;
        right: 0 !important;
        height: 84px !important;
        padding: 2px 4px !important;
        border-radius: 0 !important;
        border-bottom: 0 !important;
    }

    /* Cadre : bord à bord, entre la bande des agents et la bande des services */
    html body .serviceStatistiques-content[b-krs3cpwgb3] {
        --content-top: 178px;                       /* = bas de la bande des agents (94 + 84) */
        --content-bottom: 84px;                     /* = 30 (pied de page) + 54 (bande des services) */
        --drawer-inset: 3px;                        /* marge du bas, identique pour les deux volets */
        --drawer-w: 72vw;                           /* volet droit (agent) */
        --left-w: 75vw;                             /* volet gauche (service) */
        --drawer-dur: .3s;
        --drawer-ease: cubic-bezier(.4, 0, .2, 1);

        top: var(--content-top) !important;
        bottom: var(--content-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        padding: .3rem !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Bande des services : pleine largeur, au-dessus du pied de page */
    html body .serviceStatistiques-bottom[b-krs3cpwgb3] {
        left: 0 !important;
        right: 0 !important;
        bottom: 30px !important;
        height: 54px !important;
        padding: .15rem !important;
        border-radius: 0 !important;
    }

    .empty-serviceStatistiques[b-krs3cpwgb3] { font-size: .65rem; }

    /* Clic en dehors des volets : les referme (sous les volets et les languettes) */
    html body .serviceStatistiques-content .drawer-backdrop[b-krs3cpwgb3] {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 20;
    }

    /* ---------- Languettes collées aux bords de l'écran ---------- */
    .serviceStatistiques-content .drawer-tab[b-krs3cpwgb3] {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 50%;
        z-index: 1600;

        width: 16px;
        height: 44px;
        padding: 0;

        border: none;
        background: rgba(240, 150, 150, .95);
        color: #fff;
        font-size: .6rem;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

        transform: translate(0, -50%);
        transition: transform var(--drawer-dur) var(--drawer-ease),
                    background-color .15s ease;
        will-change: transform;
    }

    .serviceStatistiques-content .drawer-tab:hover[b-krs3cpwgb3] {
        background: rgba(225, 110, 110, .98);
    }

    .serviceStatistiques-content .drawer-tab-left[b-krs3cpwgb3] {
        left: 0;                                      /* bord gauche de l'écran */
        border-radius: 0 10px 10px 0;
    }
    .serviceStatistiques-content.left-open .drawer-tab-left[b-krs3cpwgb3] {
        transform: translate(var(--left-w), -50%);    /* suit le bord du volet */
    }

    .serviceStatistiques-content .drawer-tab-right[b-krs3cpwgb3] {
        right: 0;                                     /* bord droit de l'écran */
        left: auto;
        border-radius: 10px 0 0 10px;
    }
    .serviceStatistiques-content.right-open .drawer-tab-right[b-krs3cpwgb3] {
        transform: translate(calc(-1 * var(--drawer-w)), -50%);
    }
}

/* ==========================================================
   PAYSAGE COMPACT
========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    html body .serviceStatistiques-sticky[b-krs3cpwgb3] {
        top: 94px !important;
        height: 54px !important;
        padding: 1px 4px !important;
    }

    html body .serviceStatistiques-content[b-krs3cpwgb3] {
        --content-top: 148px;                       /* = bas de la bande des agents (94 + 54) */
        --content-bottom: 66px;                     /* = 26 (pied de page) + 40 (bande des services) */
        --drawer-w: 42vw;
        --left-w: 48vw;
    }

    html body .serviceStatistiques-bottom[b-krs3cpwgb3] {
        bottom: 26px !important;
        height: 40px !important;
    }

    .serviceStatistiques-content .drawer-tab[b-krs3cpwgb3] {
        width: 16px;
        height: 38px;
    }
}
/* /Components/Pages/Statistiques/InfoStatistiques.razor.rz.scp.css */
.statistiques-details[b-kdb8jdcz8w] {
display: flex;
flex-direction: column;
gap: .6rem;
}

.statistiques-details-name[b-kdb8jdcz8w] {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #111827;
}

.statistiques-details-description[b-kdb8jdcz8w] {
margin: 0;
font-size: .9rem;
line-height: 1.6;
color: #374151;
}

.statistiques-details-count[b-kdb8jdcz8w] {
width: max-content;
padding: .15rem .6rem;
border-radius: 999px;
background: #fdecec;
color: #c92a2a;
font-size: .75rem;
font-weight: 700;
}

.empty-statistiques[b-kdb8jdcz8w] {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: .85rem;
}
/* /Components/Pages/Statistiques/Statistiques.razor.rz.scp.css */

.statistiques-page[b-qdwriuielx]{
min-height:100vh;
background:url("/images/background.jpg") center/cover fixed no-repeat;
}

.statistiques-sticky[b-qdwriuielx]{
position:fixed;
top:115px;
left:250px;
right:70px;
height:80px;
padding:.5rem;
background:#fff;
border-bottom:1px solid #eee;
border-radius:16px;
z-index:1000;
overflow:hidden;
}

.statistiques-content[b-qdwriuielx]{
position:fixed;
top:240px;
bottom:290px; /* remonté pour laisser la place à la barre du bas (150px + marges) */
left:240px;
right:70px;
padding:2rem;
background:rgba(255,255,255,.9);
border-radius:16px;
overflow-y:auto;
}

.statistiques-bottom[b-qdwriuielx]{
position: fixed;
bottom: 43px;
left: 250px;
right: 70px;
z-index: 900;
background: #fff;
padding: .3rem;
border-top: 1px solid #eee;
border-radius: 12px 12px 0 0;
/* box-shadow: 0 -4px 12px rgba(0,0,0,.08); */
animation: slideDown .3s ease;
overflow: hidden;
}

.empty-statistiques[b-qdwriuielx]{
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:#6b7280;
font-size:.85rem;
}

@media(max-width:900px){
.statistiques-sticky[b-qdwriuielx]{
left:0;
right:0;
top:70px;
height:80px;
border-radius:0;
    }
.statistiques-content[b-qdwriuielx]{
left:0;
right:0;
top:160px;
bottom:150px;
border-radius:0;
    }
.statistiques-bottom[b-qdwriuielx]{
left:0;
right:0;
bottom:0;
height:130px;
border-radius:16px 16px 0 0;
    }
}
/* /Components/Pages/WeatherTable.razor.rz.scp.css */
.weather-table-container[b-q1bvdfzsn8] {
    max-width: 100%;
    width: auto;
    padding: 1rem;
    display: block;
    overflow-x: auto;
}

.weather-table-container .table[b-q1bvdfzsn8] {
    margin-bottom: 0;
    width: auto;
    min-width: 100%;
}

.weather-table-container .table thead[b-q1bvdfzsn8] {
    background-color: rgba(201, 42, 42, 0.1);
    border-bottom: 2px solid rgba(201, 42, 42, 0.3);
}

.weather-table-container .table th[b-q1bvdfzsn8] {
    color: #c92a2a;
    font-weight: 600;
    padding: 1rem;
    text-align: left;
}

.weather-table-container .table td[b-q1bvdfzsn8] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(201, 42, 42, 0.1);
}

.weather-table-container .table tbody tr:hover[b-q1bvdfzsn8] {
    background-color: rgba(201, 42, 42, 0.05);
}