@import '_content/Kernel/Kernel.za0iizgjtn.bundle.scp.css';
@import '_content/Platform/Platform.4xkx9b4yo3.bundle.scp.css';

/* _content/EspaceClient/Components/Layout/Footer.razor.rz.scp.css */
/* Footer global - Desktop first */
.container-footer[b-9u47q48y67] {
    width: 100%;
    display: flex;
    flex-direction: row; /* desktop : côte à côte */
    align-items: flex-start;
    justify-content: center;
    padding: clamp(2rem, 5vw, 5rem) 1rem clamp(1rem, 3vw, 2rem);
    position: relative;
    color: black;
    font-weight: 700;
}

    /* Colonnes desktop */
    .container-footer .col1[b-9u47q48y67],
    .container-footer .col2[b-9u47q48y67] {
        width: 50%;
        font-size: clamp(1rem, 1vw + 0.8rem, 1.3rem);
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-family: Montserrat, sans-serif;
        font-weight: 400;
        padding: 0.5rem 0;
    }

    .container-footer .col2[b-9u47q48y67] {
        border-left: solid #37454f 1px;
    }

/* Logo entreprise desktop */
.logo-entreprise-footer[b-9u47q48y67] {
    max-width: clamp(100px, 10vw, 200px);
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Bloc interne col2 */
.col2 .container-bloc-footer[b-9u47q48y67] {
    width: 100%;
    margin-top: clamp(0.5rem, 1vw, 1rem);
    font-size: clamp(1rem, 0.8vw + 0.6rem, 1.1rem);
    font-weight: 700;
    color: #37454f;
    text-decoration: none;
    cursor: pointer;
}

/* Texte */
.text-footer[b-9u47q48y67] {
    display: inline-block;
    font-size: clamp(0.85rem, 0.6vw + 0.6rem, 1rem);
    vertical-align: top;
}

.text-siret[b-9u47q48y67] {
    font-size: clamp(0.7rem, 0.5vw, 0.85rem);
    display: inline-block;
    color: #555;
}

.txt-map[b-9u47q48y67] {
    font-size: clamp(1rem, 2.5vw, 2rem);
}

.logo-map[b-9u47q48y67] {
    height: clamp(1rem, 2.5vw, 2rem);
    display: inline-block;
    margin-right: 0.5rem;
}

/* Logos */
.logo-footer[b-9u47q48y67] {
    height: clamp(1rem, 1vw + 0.5rem, 1.2rem);
    display: inline-block;
}

/* Zone SIRET */
.container-siret[b-9u47q48y67] {
    padding-top: clamp(1rem, 2vw, 1.5rem);
    font-size: clamp(1rem, 0.8vw + 0.6rem, 1.15rem);
    color: #444;
}

.logo-siret[b-9u47q48y67] {
    height: clamp(0.8rem, 0.5vw + 0.4rem, 0.9rem);
    display: inline-block;
}

/* Bloc social desktop */
.bloc-social a img[b-9u47q48y67] {
    width: clamp(80px, 150px - 10vw, 120px); /* plus petit écran → icône plus grosse */
    height: auto;
    margin-top: clamp(0.5rem, 2vw, 1rem);
    transition: transform 0.3s ease-out;
}

.bloc-social:hover img[b-9u47q48y67] {
    transform: scale(1.15) rotate(-5deg);
    cursor: pointer;
}

/* Liens internes */
.line-on-footer[b-9u47q48y67] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: clamp(0.3rem, 1vw, 0.7rem) 0;
    transition: transform 0.3s ease-out;
}

    .line-on-footer:hover[b-9u47q48y67] {
        transform: scale(1.08);
    }

    .editor-link:hover[b-9u47q48y67],
    .line-on-footer a:hover[b-9u47q48y67] {
        cursor: pointer;
        color: var(--color-primary-hover);
        transition: color 0.3s ease-in-out;
        font-family: Montserrat, sans-serif;
        font-weight: 700;
    }

/* ---------- Mobile / Tablette ---------- */
@media (width <= 767px) {
    .container-footer[b-9u47q48y67] {
        flex-direction: column; /* empilé */
        align-items: center;
        justify-content: center;
        padding: clamp(1.5rem, 4vw, 2rem) 1rem;
        gap: clamp(1rem, 3vw, 1.5rem); /* espacement entre blocs */
    }

        .container-footer .col1[b-9u47q48y67],
        .container-footer .col2[b-9u47q48y67] {
            width: 100%;
            font-size: 1rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            border-left: none;
            padding: 0.5rem 0;
        }

    .logo-entreprise-footer[b-9u47q48y67] {
        max-width: clamp(160px, 50vw, 220px);
        margin-bottom: clamp(1rem, 3vw, 2rem);
    }

    .container-siret[b-9u47q48y67] {
        font-size: clamp(0.9rem, 2vw, 1rem);
    }
}
/* _content/EspaceClient/Components/Layout/MainLayout.razor.rz.scp.css */
/* ======================================= */

/* 1. MISE EN PAGE DU LAYOUT (Tablet/Desktop First) */

/* C'est la structure qui est sp�cifique � ce progiciel. */

/* ======================================= */

/* --- Dispositions par d�faut (Tablette paysage / Desktop) --- */

/* .main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
} */

/* .container-content {
    flex: 1;
    display: flex; */

    /* STRUCTURE PAR D�FAUT : Menu + Corpus c�te � c�te */

    /* flex-direction: row;
    width: 100%;
} */



.container-content[b-a88zuwci6k] {
    /* REMPLACER flex: 1; par: */
    flex: 0 1 auto; /* Permet au contenu de prendre la taille de son contenu et de ne pas s'�tirer verticalement */
    display: flex;
    flex-direction: row;
    width: 100%;
}

/* ======================================= */

/* 2. STYLES BLAZOR SP�CIFIQUES (Unifi�s avec Settings) */

/* ======================================= */

/* Feedback de Validation (couleurs remplac�es par les variables) */
.valid.modified:not([type="checkbox"])[b-a88zuwci6k] {
    /* Utilisation de var(--color-green) pour le succ�s */
    outline: 1px solid var(--color-green);
}

.invalid[b-a88zuwci6k] {
    /* Utilisation de var(--color-error) pour l'erreur */
    outline: 1px solid var(--color-error);
}

.validation-message[b-a88zuwci6k] {
    color: var(--color-error);
}

/* Bordure d'erreur Blazor non g�r�e (.blazor-error-boundary) */
.blazor-error-boundary[b-a88zuwci6k] {
    /* Le style Base64 et la couleur de fond sont conserv�s car sp�cifiques */
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5LjccOTg2IDg3LjMwMDUgMjU5Ljc4NiA4OS43OTIxIDI1OS43ODYgOTIuMjgzNyAyNjEuMDQ5IDkzLjUyOTUgMjYzLjU3NiA5My41Mjk1IDI2Ni4xMTYgOTMuNTI5NSAyNjcuMzg3IDkyLjI4MzcgMjY3LjM4NyA4OS43OTIxIDI2Ny4zODcgODcuMzAwNSAyNjYuMTE2IDg2LjA1NDcgMjYzLjU3NiA4Ni4wNTQ3WiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=") no-repeat 1rem/1.8rem, var(--color-error);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--color-white);
}

    .blazor-error-boundary[b-a88zuwci6k]::after {
        content: "Une erreur s'est produite."
    }

/* Barre d'erreur Blazor fixe en bas (#blazor-error-ui) */
#blazor-error-ui[b-a88zuwci6k] {
    /* Utilisation d'une variable pour le fond */
    background: var(--color-warning-light);
    bottom: 0;
    box-shadow: 0 -1px 2px rgb(0 0 0 / 20%);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 999;
}

    #blazor-error-ui .dismiss[b-a88zuwci6k] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Sur Mobile : on fixe en bas */
@media (width <= 768px) {
    .footer-bar[b-a88zuwci6k] {
        display: none;
    }

}
/* _content/EspaceClient/Components/Pages/Admin/Admin.razor.rz.scp.css */
/* Conteneur principal des onglets */
.tabs-container[b-ofq9tdt0xo] {
  /*  display: flex;
    flex-direction: column;
    justify-content:flex-start;
    background: #ffffff; */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 5%);
    /* 🐛 overflow:hidden retiré : cet ancêtre re-clippait le menu déroulant "..." du tableau
       Clients (dernières lignes) qui doit dépasser sous le tableau — TableClient.razor.css
       (.table-wrapper { overflow: visible }) l'avait déjà résolu au niveau du tableau, mais ce
       conteneur, un niveau au-dessus, recréait le même clip. Le radius du haut est repris
       directement sur .tabs-header/.tabs-content pour garder l'angle arrondi visuel sans clipper. */
    margin: 1rem;
}

/* Barre d'onglets */
.tabs-header[b-ofq9tdt0xo] {
    display: flex;
    background-color: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    gap: 5px;
    padding: 0.5rem 1rem 0;
    border-radius: 12px 12px 0 0;
}

/* Boutons d'onglets */
.tab-btn[b-ofq9tdt0xo] {
    max-width:200px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    background: none;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}

    .tab-btn:hover[b-ofq9tdt0xo] {
        background-color: #e9ecef;
        color: #495057;
    }

    .tab-btn.active[b-ofq9tdt0xo] {
        color: #0d6efd; /* Ou ta couleur thématique principale */
        border-bottom: 3px solid #0d6efd;
        background-color: #fff;
    }

/* Contenu */
.tabs-content[b-ofq9tdt0xo] {
    padding: 2rem;
    min-height: 400px;
    background-color: #fff;
    border-radius: 0 0 12px 12px;
}

/* Animation douce lors du changement d'onglet */
.tab-panel.fade-in[b-ofq9tdt0xo] {
    animation: fadeIn-b-ofq9tdt0xo 0.3s ease-in-out;
}

@keyframes fadeIn-b-ofq9tdt0xo {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* Badge de statut "à cheval" sur l'icône de l'onglet "entreprise" (cf. Admin.razor.cs, _configAllOk). */
.checklist-toggle-btn[b-ofq9tdt0xo] {
    position: relative;
    overflow: visible;
}

.checklist-status-badge[b-ofq9tdt0xo] {
    position: absolute;
    top: -4px;
    right: -8px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    box-shadow: 0 0 0 2px var(--color-white);
}

/* 🐛 warning.svg embarque fill="#fff" en dur — invisible sur un fond blanc, d'où la nécessité d'un
   fond coloré derrière pour ressortir. check_circle.svg est déjà coloré (vert), fond blanc neutre.
   --color-error (rouge) plutôt que --color-warning (ambre) : plus alarmant, cohérent avec la
   demande d'un signal plus proche du rouge que du jaune. */
.checklist-status-badge--ok[b-ofq9tdt0xo] {
    background: var(--color-white);
}

.checklist-status-badge--warning[b-ofq9tdt0xo] {
    background: var(--color-error);
}

/* Utilitaires */
.mb-2rem[b-ofq9tdt0xo] {
    margin-bottom: 2rem;
}

.margin-auto[b-ofq9tdt0xo] {
    margin: 0 auto;
}
/* _content/EspaceClient/Components/Pages/Dashboard.razor.rz.scp.css */
/* ÉTAPE CRUCIALE : On force tout le bloc de la mascotte (y compris la balise générée par Blazor) */

/* à devenir transparente aux clics. Vos boutons du dashboard sont libérés instantanément. */
.dashboard-mascot-container[b-nsoewg484q],
.dashboard-mascot-container *[b-nsoewg484q] {
    pointer-events: none !important;
}

    /* ÉTAPE FACULTATIVE : Si jamais le bouton de voix est présent sur ce dashboard et que */

    /* vous voulez qu'il reste cliquable, on réactive UNIQUEMENT le bouton spécifiquement. */
    .dashboard-mascot-container .btn-voice-control[b-nsoewg484q],
    .dashboard-mascot-container .btn-voice-control *[b-nsoewg484q] {
        pointer-events: auto !important;
    }


.container-mascot-dash[b-nsoewg484q] {
    display: flex;
    flex-direction: column; 
    flex-grow: 1; 
    justify-content: space-between; 
    align-items: center; 
    min-height: 70vh;
}

.mascot-responsive-block[b-nsoewg484q] {
    position: absolute !important;
    bottom: 2rem !important;
    right: 4rem !important;
    width: 400px !important;
}

.infopanel-responsive-container[b-nsoewg484q] {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: fit-content;
    justify-content: flex-end !important; /* Force le contenu à droite */
    margin-left: auto !important;

    /* margin-right: clamp(0.5rem, 1rem + 2vw, 2rem) !important; */
    margin-top: 1rem;
}

.teacher-feedback[b-nsoewg484q] {
    width: fit-content;
    display: flex;
    gap: 10px;
    background: #f0f7ff;
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid #007bff;
    margin-top: 10px;
}

.comment-bubble p[b-nsoewg484q] {
    font-style: italic;
    color: #333;
    margin: 0;
}

.status-badge.success[b-nsoewg484q] {
    color: #2ecc71;
    font-weight: bold;
}

.status-badge.waiting[b-nsoewg484q] {
    color: #f39c12;
}

/* Animation button commencer */
.btn-animated-start[b-nsoewg484q] {
    animation: bounce-point-b-nsoewg484q 3s infinite;

    /* box-shadow: 0 0 20px rgba(0, 210, 255, 0.8); */

    /* border: 3px solid white; */
}

@keyframes bounce-point-b-nsoewg484q {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.container-program-name-mobile[b-nsoewg484q] {
    width: 100%;
    margin: 1rem auto;
    z-index: 2;
    white-space: nowrap;
    font-size: clamp(3rem, 1.5vw, 4rem);
    font-family: var(--font-family-base);
    font-weight: 500;
    color: #fff;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 70%), -1px -1px 2px rgb(0 0 0 / 50%);
    text-align: center;
    justify-content: center;
}

.container-intro-com[b-nsoewg484q] {
    max-width: 65%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
}

/* Sur grand écran, on s'assure que le bouton reste bien droit sur une seule ligne */
.btn-welcome-step[b-nsoewg484q] {
    white-space: nowrap;
}


/* COMPORTEMENT ÉCRAN laptop/ tablette vertical */
@media (width <= 1024px) {
    .container-mascot-dash[b-nsoewg484q] {
        display: flex;
        flex-direction: column;
        flex-grow: 0;
        justify-content: flex-end;
        align-items: center;
        min-height: fit-content;
    }


}



/* COMPORTEMENT ÉCRAN MOBILE (On étale tout proprement sans absolute destructeur) */
@media (width <= 767px) {
    .infopanel-responsive-container[b-nsoewg484q] {
        justify-content: center !important; /* Centre l'InfoPanel horizontalement sur téléphone */
        margin: 15px auto !important;
        width: 95% !important; /* Prend presque toute la largeur pour respirer */
    }

    .mascot-responsive-block[b-nsoewg484q] {
        position: relative !important;
        width: 100% !important;
        max-width: 320px; /* Évite qu'elle soit géante sur les gros téléphones */
        margin-top: auto !important; /* Pousse la mascotte vers le bas de l'écran mobile */
        margin-bottom: 1rem !important;
    }

    .container-mascot-dash[b-nsoewg484q] {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: space-around;
        align-items: center;
        min-height: fit-content;
    }

    .btn-welcome-step[b-nsoewg484q] {
        white-space: normal !important;
        word-break: break-word;
        height: auto !important; /* Pour que le bouton s'agrandisse en hauteur si le texte passe sur 2 lignes */
    }

    .container-intro-com[b-nsoewg484q] {
        max-width: 95vw;
    }
}

/* _content/EspaceClient/Components/Pages/Home.razor.rz.scp.css */



/* css composant profilSelector */
.profile-selection-fullscreen[b-ty9thkp9rm] {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Un beau dégradé qui rappelle ton identité visuelle */
    background: var(--color-bg-main) ;
    padding: 1rem;
}

.selector-container[b-ty9thkp9rm] {
    background: white;
    padding: 1rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgb(0 0 0 / 10%);
    max-width: 90vw;
    width: fit-content;
    max-height:60dvh;
    height:fit-content;
}

.hero-section[b-ty9thkp9rm] {
    text-align: center;
    margin-bottom: 2rem;
    color: #2d3436;
}
/* _content/EspaceClient/Components/Pages/WelcomeView.razor.rz.scp.css */
/* ==========================================================
   WelcomeView — styles spécifiques à la page de pré-inscription
   ========================================================== */

/* --- Carte principale ---
   🎨 Verre sombre, même famille visuelle que les pricing cards (/catalogue/plans,
   /subscription/saasplans) — le fond animé (back-animed.svg) reste inchangé derrière (demandé
   explicitement : "je garde mon background dynamique"), seule la carte devient un panneau
   translucide sombre avec halo bleu/violet, cohérent avec .gradient-text déjà utilisé plus bas
   (mêmes teintes #4f8cff/#8b6bff que le SVG animé). */
.welcome-card[b-znnxjmvnak] {
    width: 45%;
    min-width: 280px;
    position: relative;
    background: linear-gradient(180deg, rgb(23 18 51 / 88%) 0%, rgb(10 7 32 / 92%) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 24px;
    box-shadow: 0 0 0 1px rgb(124 92 246 / 20%),
                0 30px 60px -20px rgb(79 140 255 / 35%),
                0 20px 50px rgb(0 0 0 / 45%);
    color: #e5e1f5;
}

/* Textes de la carte utilisant les classes utilitaires globales colorBlack/colorBlueDark/colorGrey
   (#000/#00008B/#444, pensées pour fond clair) — reclarifiées pour rester lisibles sur ce nouveau
   fond sombre. Seul .welcome-card (racine) suffirait par héritage pour le texte SANS classe de
   couleur explicite (titre, paragraphe), d'où les deux règles ci-dessous en plus. */
.welcome-card .colorBlack[b-znnxjmvnak],
.welcome-card .colorBlueDark[b-znnxjmvnak] {
    color: #f5f3ff;
}

.welcome-card .colorGrey[b-znnxjmvnak] {
    color: #b3aed6;
}

/* .welcome-offer garde volontairement son fond clair (effet "spotlight" sur le tarif à l'intérieur
   de la carte sombre) — ses propres colorBlueDark/colorGrey (prix, précisions tarifaires) doivent
   donc retrouver leurs teintes foncées d'origine ici. Spécificité supérieure (3 classes) pour
   gagner sur les 2 règles génériques ci-dessus, sans dépendre de l'ordre des règles. */
.welcome-card .welcome-offer .colorBlueDark[b-znnxjmvnak],
.welcome-card .welcome-offer .colorBlack[b-znnxjmvnak] {
    color: var(--color-blue-dark);
}

.welcome-card .welcome-offer .colorGrey[b-znnxjmvnak] {
    color: var(--color-grey);
}

/* Lien "Découvrir nos forfaits SaaS" — placé au-dessus du bouton "En savoir plus" discret,
   volontairement plus visible (pilule dégradée) pour orienter vers /subscription/saasplans. */
.welcome-saas-link[b-znnxjmvnak] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #4f8cff, #8b6bff);
    box-shadow: 0 8px 20px -6px rgb(79 140 255 / 55%);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

    .welcome-saas-link:hover[b-znnxjmvnak] {
        transform: translateY(-1px);
        filter: brightness(1.08);
        box-shadow: 0 10px 26px -4px rgb(139 107 255 / 65%);
        color: #fff;
    }

/* --- Bouton "Se connecter" (coin haut-droit de la carte, desktop) --- */
.welcome-login-btn-wrapper[b-znnxjmvnak] {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* --- Point 2 : mise en avant du bloc offre / prix --- */
.welcome-offer[b-znnxjmvnak] {
    background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
    border: 1px solid #e2e8f5;
    border-radius: var(--radius-medium, 0.6rem);
    padding: 1.5rem 1.25rem;
    box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
}

.welcome-price-main[b-znnxjmvnak] {
    font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
}

/* CTA principal : utilise la couleur CTA jaune du design system (--color-CTA-primary),
   jusqu'ici définie mais jamais réellement appliquée sur ce bouton (la classe .colorCTA
   ne fait que du texte, et était de toute façon écrasée par .btn { color } chargé après). */
.welcome-cta-primary[b-znnxjmvnak] {
    background-color: var(--color-CTA-primary);
    color: var(--color-CTA-primary-txt);
    box-shadow: 0 10px 24px rgb(249 196 1 / 40%), inset 0 1px 0 rgb(255 255 255 / 50%);
}

    .welcome-cta-primary:hover[b-znnxjmvnak] {
        background-color: var(--color-CTA-primary-hover);
        color: var(--color-CTA-primary-txt);
    }

/* --- Point 1 : le badge d'info ne doit plus chevaucher le bandeau sticky --- */
.welcome-sticky-footer[b-znnxjmvnak] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    min-height: 3.5rem;
}

.welcome-badge-wrapper[b-znnxjmvnak] {
    position: fixed;
    bottom: 4.5rem;
    right: 1rem;
}

/* --- Point 3 (confirmé) : neutralise .logo-entreprise (divers.css) qui écrase
       en !important la taille voulue du logo sur cette page --- */
.logo-entreprise[b-znnxjmvnak] {
    width: auto !important;
    height: 5rem !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* 🐛 LogoPathBlack (marque noire sur fond transparent) devenait invisible sur la nouvelle carte
   sombre — aucune variante blanche du logo n'existe côté Settings.Branding pour cette page.
   Recolore le PNG/SVG noir en blanc par filtre CSS plutôt que de créer un nouvel asset. */
.welcome-card .logo-entreprise[b-znnxjmvnak] {
    filter: brightness(0) invert(1);
}

/* Texte en dégradé (slogan + "entreprise") : en classe plutôt qu'en style inline
   pour que le validateur CSS de Visual Studio reconnaisse background-clip: text. */
.gradient-text[b-znnxjmvnak] {
    background: linear-gradient(135deg, #4f8cff 0%, #8b6bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #4f8cff;
}

.listpreviewsaas[b-znnxjmvnak] {
    list-style: none; padding-left: 12%; margin: 0 auto; max-width: 800px; text-align:left; font-size:15px;
}

.elementlistpreviewsaas[b-znnxjmvnak] {
    display:flex;
    flex-direction:row;
    width:100%;
    place-content:center start;
    align-items:center;
    margin-bottom: 8px;
}


/* ==========================================================
   MOBILE ( < 768px )
   ========================================================== */
@media (width <= 1199px) {
    /* Point 5 : la carte ne doit plus toucher les bords */
    .welcome-card[b-znnxjmvnak] {
        width: 92%;
        min-width: 0;
        max-height:100dvh;
    }

    .listpreviewsaas[b-znnxjmvnak] {
        list-style: none;
        padding-left: 0%;
        max-width: 100%;
    }

    .elementlistpreviewsaas[b-znnxjmvnak] {
        display: flex;
        flex-direction: row;
        width: 100%;
        place-content: flex-start start;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    /* Point 4 : le bouton "Se connecter" repasse en flux normal (au-dessus du logo)
       au lieu d'être positionné en absolu par-dessus, ce qui le faisait chevaucher
       le logo sur les cartes étroites. */
    .welcome-login-btn-wrapper[b-znnxjmvnak] {
        position: static;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 0.5rem;
    }

    /* Point 6 : un peu plus de respiration sur le bloc offre en mobile */
    .welcome-offer[b-znnxjmvnak] {
        padding: 1.25rem 0.75rem;
    }
}
/* _content/EspaceClient/Modules/ClientManager/Components/Pages/AddContact.razor.rz.scp.css */
/* Le composant radio custom (.hidden-radio / .radio-label / .custom-radio) a été déplacé
   dans form-v1.0.0.css (feuille globale non scopée) — voir section "5bis. RADIO CUSTOM".
   Raison : <InputRadio class="hidden-radio"> est un composant Blazor dont l'<input> généré
   ne porte pas l'attribut de scope b-xxxxxxxx de ce fichier, donc une règle CSS scopée ici
   ne le matchait jamais (bug radio natif + custom visibles en double). Le pattern est
   maintenant réutilisable tel quel dans n'importe quel composant (ex: ContactModal.razor)
   sans dupliquer ce fichier.
*/
/* _content/EspaceClient/Modules/ClientManager/Components/Pages/Client.razor.rz.scp.css */


.popup-overlay[b-wai7aub798] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgb(0 0 0 / 60%); /* fond assombri */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-content[b-wai7aub798] {
    background: #fff;
    width: 90%;
    height: 90%;
    border-radius: 10px;
    padding: 2rem;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 20px rgb(0 0 0 / 50%);
}

.close-btn[b-wai7aub798] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.info-btn[b-wai7aub798] {
    height: 2rem;
    width:auto;
    background-color: transparent;
    padding: 0.5rem 1rem;

    /* border-radius: 5px; */

    /* background: #e95356; */
    color: var(--color-VS);
    cursor: pointer;
    border:solid blue 2px;
}

    .info-btn img[b-wai7aub798] {
        width: 2rem; /* clamp(3rem, calc(3rem - 2vw), 2rem); */
        height: 2rem;
    }

    /**************  */


/* --- Navigation des onglets : toggle segmenté, même langage visuel que le bascule
   "En attente / Réglées" de l'onglet Factures (.facture-toggle/.toggle-option), avec une
   couleur d'accent par onglet (--tab-accent, posée inline sur chaque <li>). Remplace l'ancien
   look "onglet navigateur" (languettes découpées). --- */
.tabs-navigation[b-wai7aub798] {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    align-self: center; /* Centre verticalement le toggle face au bandeau d'accueil (row stretché) */
    padding: 6px;
    margin: 0;
    gap: 4px;
    background-color: #eef1f4;
    border-radius: 999px;
}

.tab-item[b-wai7aub798] {
    margin: 0;
}

.tab-button[b-wai7aub798] {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    color: #495057;
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

    /* Survol de l'onglet (non actif) — teinté par la couleur d'accent de l'onglet */
    .tab-button:hover:not(.tab-active)[b-wai7aub798] {
        background-color: rgb(255 255 255 / 60%);
        color: var(--tab-accent, #343a40);
    }

    /* Style de l'onglet actif */
    .tab-button.tab-active[b-wai7aub798] {
        background-color: #fff;
        color: var(--tab-accent, var(--tab-active-color));
        box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
    }

        .tab-button.tab-active .tab-icon[b-wai7aub798] {
            opacity: 1;
        }

/* --- Zone de contenu (Conteneur du contenu de l'onglet) --- */
.tab-content-area[b-wai7aub798] {
    padding: 20px 0;
}




/*********************  */


/* --- Styles de Contenu Uniforme --- */

/* Conteneur principal de chaque contenu d'onglet */
.tab-panel-content[b-wai7aub798] {
    padding: 10px;
}

.panel-title[b-wai7aub798] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #eee; /* Ligne de séparation subtile */
    padding-bottom: 5px;
}

.margin-top-2[b-wai7aub798] {
    margin-top: 2rem;
}

/* .info-group / .info-item / .info-label / .info-value / .info-card ont été remplacés par le
   design system générique .view-card / .info-row / InfoRow (Settings-v1.0.0.css), repris de
   l'onglet "Configuration Entreprise" de /admin. Seules .info-value.amount et .info-value.due
   restent ici : ce sont des variantes d'accentuation propres à cette page (montant/échéance de
   facture), posées par-dessus le .info-value générique. */

/* Bloc Commentaire */
.comment-block[b-wai7aub798] {
    padding: 15px;
    border: 1px solid #eee;
    background-color: #fafafa;
    border-radius: 4px;
    white-space: pre-wrap; /* Conserver les sauts de ligne si existants */
}

.comment-text[b-wai7aub798] {
    color: #495057;
}

.no-data-text[b-wai7aub798] {
    color: #999;
    font-style: italic;
    padding: 10px;
    border: 1px dashed #dee2e6;
    border-radius: 4px;
    text-align: center;
}

/* Boutons d'action pour le Contrat */
.action-link[b-wai7aub798] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 15px;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s;
}

.edit-button[b-wai7aub798] {
    background-color: #ffc107; /* Jaune/Orange */
    color: #212529;
}

.view-button[b-wai7aub798] {
    background-color: #17a2b8; /* Cyan */
    color: #fff;
}

/* --- Styles des Factures (Cartes) --- */
.facture-list[b-wai7aub798] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.facture-card[b-wai7aub798] {
    width: 300px; /* Taille standard pour chaque carte de facture */
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
}

    .facture-card.pending[b-wai7aub798] {
        border-left: 5px solid #dc3545; /* Rouge pour En Cours */
    }

    .facture-card.paid[b-wai7aub798] {
        border-left: 5px solid #28a745; /* Vert pour Réglée */
    }

.facture-header[b-wai7aub798] {
    font-size: 1.1rem;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #dee2e6;
    font-weight: 700;
}

.facture-details[b-wai7aub798] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.facture-actions[b-wai7aub798] {
    text-align: right;
    padding-top: 10px;
}

.info-value.amount[b-wai7aub798] {
    font-weight: 700;
    color: #007bff;
}

.info-value.due[b-wai7aub798] {
    color: #dc3545; /* Couleur d'alerte pour l'échéance */
    font-weight: 600;
}

/* Bandeau d'action global */
.action-alert-bar[b-wai7aub798] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f4f9f4; /* Un vert très clair et discret pro-business */
    border-left: 4px solid #28a745; /* Bordure verte de rappel */
    padding: 12px 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
}

.action-bar-title[b-wai7aub798] {
    color: #1e4620;
    font-size: 0.95rem;
}

/* Alignement parfait des contrôles sur une seule ligne */
.action-bar-controls[b-wai7aub798] {
    display: flex;
    align-items: center;
    gap: 15px; /* Espace homogène entre le select, la checkbox et le bouton */
}

.select-fixed-width[b-wai7aub798] {
    min-width: 240px;
}

/* Nettoyage de la checkbox */
.checkbox-inline[b-wai7aub798] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #495057;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    .checkbox-inline input[b-wai7aub798] {
        margin: 0;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

/* Animation douce à l'apparition */
/* 🐛 PAS "both" : "both"/"forwards" maintient indéfiniment le "transform: translateY(0)" du
   keyframe "to" une fois l'animation finie (identique visuellement à "none", mais PAS pour le
   CSS : tout transform != none crée un nouveau containing block pour les descendants
   position:fixed). Concrètement, chaque onglet (.tab-panel-content.animated.fadeIn) piégeait le
   backdrop plein écran de StripeCheckoutModal (enregistrement carte, onglet Souscription) DANS
   son propre conteneur au lieu du viewport. "backwards" garde l'anti-flash avant démarrage (état
   "from" pendant le délai) sans jamais figer le "to" après coup — rendu final strictement
   identique (opacity:1, transform:none), plus aucun containing-block parasite. */
.animated[b-wai7aub798] {
    animation-duration: 0.3s;
    animation-fill-mode: backwards;
}

@keyframes fadeIn-b-wai7aub798 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

.fadeIn[b-wai7aub798] {
    animation-name: fadeIn-b-wai7aub798;
}

/* ========================================================= */

/* PASSE DE COHÉRENCE VISUELLE — Onglets Forfait / Factures  */

/* ========================================================= */

/* --- Cartes Forfait : jusqu'ici sans aucune règle dédiée, elles héritaient seulement du
   style générique .info-group (pas de bordure, pas de distinction actif/inactif). --- */
.forfait-card[b-wai7aub798] {
    border: 1px solid #dee2e6;
    border-radius: var(--client-radius);
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
    transition: box-shadow 0.2s, border-color 0.2s;
}

    .forfait-card:hover[b-wai7aub798] {
        box-shadow: 0 4px 10px rgb(0 0 0 / 8%);
    }

    .forfait-card.forfait-active[b-wai7aub798] {
        border-left: 5px solid var(--client-success);
    }

    .forfait-card.forfait-inactive[b-wai7aub798] {
        border-left: 5px solid var(--client-muted);
        opacity: 0.85;
    }

/* .badge-unique / .badge-overdue ont été remplacés par le .status-badge générique
   (variantes info/danger) — voir Settings-v1.0.0.css. */

/* --- Bouton de règlement en ligne : jusqu'ici sans aucune règle, donc rendu par défaut du
   navigateur, sans lien visuel avec .btn-view-pdf juste à côté. --- */
.facture-actions[b-wai7aub798] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.btn-view-pdf[b-wai7aub798],
.btn-pay-online[b-wai7aub798] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--client-radius);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-view-pdf[b-wai7aub798] {
    background-color: #eef2f5;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-view-pdf:hover[b-wai7aub798] {
        background-color: #e2e6ea;
    }

.btn-pay-online[b-wai7aub798] {
    background-color: var(--client-success);
    color: #fff;
    border: none;
}

    .btn-pay-online:hover[b-wai7aub798] {
        background-color: #218838;
        transform: translateY(-1px);
    }

/* --- Cartes Facture : hiérarchie un peu plus marquée sur le montant, cohérente avec le reste. --- */
.facture-card[b-wai7aub798] {
    transition: box-shadow 0.2s;
}

    .facture-card:hover[b-wai7aub798] {
        box-shadow: 0 4px 10px rgb(0 0 0 / 8%);
    }

    .facture-card.facture-overdue[b-wai7aub798] {
        border-left-color: var(--client-danger);
        background-color: #fffaf9;
    }

/* ========================================================= */

/* REDESIGN — "Votre Espace Client"                          */

/* ========================================================= */

/* --- Bandeau d'accueil --- */
.client-hero[b-wai7aub798] {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, var(--client-accent) 0%, var(--client-tab-contact) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 22px 28px;
    margin: 5rem 0 1.25rem;
    box-shadow: 0 8px 20px rgb(35 52 96 / 18%);
}

.client-hero-icon[b-wai7aub798] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgb(255 255 255 / 18%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .client-hero-icon img[b-wai7aub798] {
        width: 30px;
        height: 30px;
        filter: brightness(0) invert(1);
    }

.client-hero-title[b-wai7aub798] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .2px;
    color: white;
}

.client-hero-subtitle[b-wai7aub798] {
    margin: 6px 0 0;
    font-size: 1rem;
    opacity: .95;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.client-hero-status[b-wai7aub798] {
    font-size: .78rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgb(255 255 255 / 20%);
    letter-spacing: .2px;
}

@media (width <= 640px) {
    .client-hero[b-wai7aub798] {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* .view-card-edit (Settings-v1.0.0.css) ne réinitialise que le rendu d'un lien <a> — l'onglet
   Informations l'utilise maintenant sur un <button> (ouverture d'AddClientModal), qui a besoin
   de son propre reset de chrome natif. */
button.view-card-edit[b-wai7aub798] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* --- Icônes + couleur d'identité par onglet --- */
.tab-icon[b-wai7aub798] {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
    margin-right: 6px;
    opacity: .85;
}

/* .tab-button.tab-active / .tab-button:hover : voir la définition consolidée du toggle
   segmenté en haut de fichier. */

/* --- Transition douce lors du changement d'onglet --- */
.tab-panel-content.animated.fadeIn[b-wai7aub798] {
    animation-duration: .25s;
}

/* --- Bascule (toggle) Factures en attente / Réglées --- */
.facture-toggle[b-wai7aub798] {
    display: inline-flex;
    background-color: #eef1f4;
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 1rem;
}

.toggle-option[b-wai7aub798] {
    border: none;
    background: transparent;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    color: #495057;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}

    .toggle-option.toggle-active[b-wai7aub798] {
        background-color: #fff;
        color: var(--client-accent);
        box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
    }

/* .status-badge (forfait actif/inactif, facture payée/en attente/en retard) est maintenant le
   badge générique défini dans Settings-v1.0.0.css (variantes success/warning/danger/info/neutral),
   partagé avec l'onglet "Configuration Entreprise" de /admin. */
/* _content/EspaceClient/Modules/ClientManager/Components/Widgets/AddClientModal.razor.rz.scp.css */
.custom-modal-backdrop[b-xclja2c5fh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 0 0 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.custom-modal-content[b-xclja2c5fh] {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    display: flex;
    flex-direction: column;
}

.custom-modal-header[b-xclja2c5fh] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .custom-modal-header h3[b-xclja2c5fh] {
        margin: 0;
        font-size: 1.2rem;
        color: #1e293b;
    }

.close-modal-btn[b-xclja2c5fh] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: #64748b;
}

.custom-modal-body[b-xclja2c5fh] {
    padding: 1.5rem;
}

.btn-quick-add[b-xclja2c5fh] {
    padding: 0.5rem;
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-quick-add:hover[b-xclja2c5fh] {
        background-color: #e2e8f0;
    }
/* _content/EspaceClient/Modules/ClientManager/Components/Widgets/Admin/ClientForfaitCard.razor.rz.scp.css */
/* Variante "large" (Wide="true", cf. son commentaire XML) : remplace le "w40" par défaut — qui,
   sous son plancher --w-min (300px), rendait la card bien plus étroite que le max-width:400px de
   .view-card — par une largeur qui utilise réellement cette marge, +~120px par rapport au rendu
   habituel (300px) pour ne plus casser les libellés longs du statut de paiement. */
.forfait-card-wide[b-j91xk0gtmg] {
    width: 100%;
    max-width: 520px;
}
/* _content/EspaceClient/Modules/ClientManager/Components/Widgets/Admin/TableClient.razor.rz.scp.css */


/* --- Charte graphique alignée sur l'onglet "Abonnements" (SubscriptionLedgerTable) : titre/
   sous-titre à gauche, gros "+" à droite, tableau "excel-table" — dupliqué ici plutôt que
   partagé car les styles Blazor sont scopés par composant (CSS isolation), cf. commentaire
   identique dans SubscriptionLedgerTable.razor.css. --- */
.ledger-container[b-af4dqc3f79] {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1c2733;
}

.ledger-header[b-af4dqc3f79] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ledger-header-left[b-af4dqc3f79] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.ledger-header-right[b-af4dqc3f79] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ledger-heading[b-af4dqc3f79] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    .ledger-heading h1[b-af4dqc3f79] {
        font-size: 1.5rem;
        margin: 0;
        font-weight: 700;
        color: #0f3057;
        letter-spacing: -0.01em;
    }

.ledger-subtitle[b-af4dqc3f79] {
    font-size: 0.85rem;
    color: #6c7a8c;
}

.ledger-empty[b-af4dqc3f79] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #6c7a8c;
    background-color: #f8f9fb;
    border: 1px dashed #d7dee8;
    border-radius: 10px;
    font-size: 0.95rem;
}

/* --- Tableau --- */
.table-wrapper[b-af4dqc3f79] {
    width: 100%;
    /* Pas d'overflow-x:auto ici : sur cet élément, ça forcerait aussi overflow-y à "auto" (règle
       CSS overflow-x/-y couplés) et clipperait le menu déroulant "..." dès qu'il dépasse le bas du
       tableau (barre de scroll intempestive dans le container). Le menu s'affiche donc sans être
       rogné ; un éventuel dépassement horizontal reste géré au niveau de la page. */
    overflow: visible;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgb(15 48 87 / 6%);
}

.excel-table[b-af4dqc3f79] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
}

    .excel-table th[b-af4dqc3f79] {
        background-color: #0f3057;
        color: #fff;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.74rem;
        letter-spacing: 0.04em;
        padding: 12px 14px;
        text-align: center;
        white-space: nowrap;
    }

    .excel-table td[b-af4dqc3f79] {
        padding: 11px 14px;
        border-bottom: 1px solid #eef1f6;
        vertical-align: middle;
    }

    .excel-table tbody tr:nth-child(even)[b-af4dqc3f79] {
        background-color: #fafbfd;
    }

    .excel-table tbody tr:hover[b-af4dqc3f79] {
        background-color: #eef4fc;
    }

    .excel-table tbody tr:last-child td[b-af4dqc3f79] {
        border-bottom: none;
    }

.client-name[b-af4dqc3f79] {
    font-weight: 600;
    color: #1e293b;
    text-align: left;
}

.text-center[b-af4dqc3f79] {
    text-align: center;
}

.position-relative[b-af4dqc3f79] {
    position: relative;
}

/* --- Boutons & Actions --- */
.custom-btn-magic[b-af4dqc3f79] {
    background-color: #0ea5e9;
    color: white;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

    .custom-btn-magic i[b-af4dqc3f79] {
        font-size: 1.2rem;
    }

.action-cell[b-af4dqc3f79] {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.action-icon-link img[b-af4dqc3f79] {
    width: 32px;
    height: 32px;
    transition: transform 0.2s;
}

    .action-icon-link img:hover[b-af4dqc3f79] {
        transform: scale(1.1);
    }

.btn-actions-trigger[b-af4dqc3f79] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
}

    .btn-actions-trigger:hover[b-af4dqc3f79] {
        color: #475569;
        background-color: #f1f5f9;
    }

/* --- Dropdown Custom --- */

/* .custom-dropdown-menu {
    position: absolute;
    right: 1.5rem;
    top: 70%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 999000;
    min-width: 180px;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
} */


/* 4. Ajustement du dropdown pour qu'il s'affiche par-dessus le reste des lignes arrière-plan */
.custom-dropdown-menu[b-af4dqc3f79] {
    position: absolute;
    right: 1.5rem; /* Ajuste selon ton besoin, par ex: right: 0; */
    top: 100%; /* Descend le menu juste en dessous du bouton '...' */
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    z-index: 500; /* Au-dessus de l'overlay de fermeture (400) et du reste du tableau */
    min-width: 180px;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
}

/* Overlay plein écran transparent posé derrière le menu, juste pour capter le clic "à
   l'extérieur" et refermer le menu (pas de JS interop nécessaire). */
.dropdown-outside-overlay[b-af4dqc3f79] {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: transparent;
}



.dropdown-item[b-af4dqc3f79] {
    /* Ligne de menu plate — même esprit que Menu.razor (container-row/btn-static) : pas de
       "pilule" bordée par item, juste une rangée pleine largeur, icône + texte alignés à gauche,
       qui ne se distingue qu'au survol. Les 4 actions partagent EXACTEMENT ce gabarit — ne jamais
       leur ajouter les classes .btn/.btn-primary/.btn-danger, qui recentrent le contenu et
       cassent l'uniformité. */
    box-sizing: border-box;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.6rem 1.25rem;
    background: none;
    border: none;
    color: #334155;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

    .dropdown-item:hover[b-af4dqc3f79] {
        background-color: #f1f5f9;
        color: #0f172a;
    }

.item-icon[b-af4dqc3f79] {
    width: 16px;
    height: 16px;
    flex: none;
    font-size: 1rem;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dropdown-divider[b-af4dqc3f79] {
    height: 1px;
    background-color: #e2e8f0;
    margin: 0.4rem 0;
}

/* --- Modal Custom --- */
.custom-modal-overlay[b-af4dqc3f79] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(15 23 42 / 60%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.custom-modal-card[b-af4dqc3f79] {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.custom-modal-header[b-af4dqc3f79] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .custom-modal-header h3[b-af4dqc3f79] {
        margin: 0;
        font-size: 1.2rem;
        color: #1e293b;
        font-weight: 700;
    }

.custom-close-btn[b-af4dqc3f79] {
    background: none;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    color: #94a3b8;
    line-height: 1;
}

    .custom-close-btn:hover[b-af4dqc3f79] {
        color: #334155;
    }

.custom-modal-body[b-af4dqc3f79] {
    padding: 1.5rem;
    overflow-y: auto;
}


/* Style pour l'item destructif dans le menu déroulant — même ligne plate que .dropdown-item,
   juste une teinte rouge au survol/au texte au lieu du gris neutre. */
.dropdown-item.item-danger[b-af4dqc3f79] {
    color: #dc2626; /* Rouge alerte */
}

    .dropdown-item.item-danger:hover[b-af4dqc3f79] {
        background-color: #fef2f2;
        color: #b91c1c;
    }

    .dropdown-item.item-danger .item-icon[b-af4dqc3f79] {
        color: #dc2626;
        /* `color` n'a aucun effet sur un <img> : on teinte l'icône (noire à la source) en rouge
           pour qu'elle reste cohérente avec le texte de l'action destructive. */
        filter: invert(20%) sepia(94%) saturate(6289%) hue-rotate(357deg) brightness(89%) contrast(92%);
    }

/* Fallback visuel si le nom du client est vide suite à un mauvais import */
.client-name:contains("[Nom manquant]")[b-af4dqc3f79] {
    color: #94a3b8;
    font-style: italic;
}
/* _content/EspaceClient/Modules/ClientManager/Components/Widgets/BulkCompanyImporter.razor.rz.scp.css */
/* Tags de Statuts Custom */
.custom-tag-status[b-ev61qu7n62] {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
}

.badge-waiting[b-ev61qu7n62] {
    background-color: #e0e0e0;
    color: #555;
}

.badge-processing[b-ev61qu7n62] {
    background-color: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #90caf9;
}

.badge-success[b-ev61qu7n62] {
    background-color: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #a5d6a7;
}

.badge-danger[b-ev61qu7n62] {
    background-color: #ffedee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

/* Animations et interactions */
.table-row-hover:hover[b-ev61qu7n62] {
    background-color: #f9f9f9;
}

.animated-pulse[b-ev61qu7n62] {
    animation: customPulse-b-ev61qu7n62 1.5s infinite ease-in-out;
}

@keyframes customPulse-b-ev61qu7n62 {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

/* Classe utilitaire sémantique manquante */
.text-secondary[b-ev61qu7n62] {
    color: #666;
}
/* _content/EspaceClient/Modules/ClientManager/Components/Widgets/ContactModal.razor.rz.scp.css */
.custom-modal-backdrop[b-bt9idfms0l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 0 0 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.custom-modal-content[b-bt9idfms0l] {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    display: flex;
    flex-direction: column;
}

.custom-modal-header[b-bt9idfms0l] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .custom-modal-header h3[b-bt9idfms0l] {
        margin: 0;
        font-size: 1.2rem;
        color: #1e293b;
    }

.close-modal-btn[b-bt9idfms0l] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: #64748b;
}

.custom-modal-body[b-bt9idfms0l] {
    padding: 1.5rem;
}

/* ::deep car .civility-options est rendu à l'intérieur du contenu du composant
   framework <InputRadioGroup> — Blazor ne porte pas toujours l'attribut de scope
   sur ce sous-arbre selon la structure ; ::deep garantit le ciblage dans tous les cas. */
[b-bt9idfms0l] .civility-options {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 0.25rem;
}
/* _content/EspaceClient/Modules/ClientManager/Components/Widgets/InviteClientModal.razor.rz.scp.css */
/* Le fond noir semi-transparent qui couvre tout l'écran */
.custom-modal-backdrop[b-v064rzawpl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 0 0 / 50%); /* Ombre à 50% */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* S'assure de passer au-dessus du tableau et du menu de l'app */
}

/* La carte blanche de la modale elle-même */
.custom-modal-content[b-v064rzawpl] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgb(0 0 0 / 20%);
    width: 100%;
    max-width: 500px; /* Aligné sur ton style inline */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeInModal-b-v064rzawpl 0.2s ease-out;
}

/* En-tête de la modale */
.custom-modal-header[b-v064rzawpl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #eee;
}

    .custom-modal-header h3[b-v064rzawpl] {
        margin: 0;
        font-size: 1.25rem;
    }

/* Bouton de fermeture [X] */
.close-modal-btn[b-v064rzawpl] {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
}

    .close-modal-btn:hover[b-v064rzawpl] {
        color: #000;
    }

/* Corps de la modale */
.custom-modal-body[b-v064rzawpl] {
    padding: 1.5rem;
}

/* Petite animation d'apparition pour faire propre */
@keyframes fadeInModal-b-v064rzawpl {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

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

/* Séparateur horizontal avec texte au milieu */
.modal-separator[b-v064rzawpl] {
    display: flex;
    align-items: center;
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    margin: 0.5rem 0;
}

    .modal-separator[b-v064rzawpl]::before, .modal-separator[b-v064rzawpl]::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #eee;
    }

    .modal-separator:not(:empty)[b-v064rzawpl]::before {
        margin-right: .5em;
    }

    .modal-separator:not(:empty)[b-v064rzawpl]::after {
        margin-left: .5em;
    }

/* Box alternative en bas de modale */
.alternative-copy-box[b-v064rzawpl] {
    border: 1px dashed #ccc;
}

.f-size-xsmall[b-v064rzawpl] {
    font-size: 0.75rem;
}

/* Petit bouton de copie inline */
.btn-copy-inline[b-v064rzawpl] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

    .btn-copy-inline:hover[b-v064rzawpl] {
        background-color: #0056b3;
    }

    .btn-copy-inline.copied[b-v064rzawpl] {
        background-color: #2e7d32 !important;
    }

/* Container du sélecteur type "Segmented Control" */
.invitation-type-selector[b-v064rzawpl] {
    display: flex;
    background-color: #f1f3f5;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* Options de sélection */
.selector-option[b-v064rzawpl] {
    flex: 1;
    text-align: center;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin: 0;
    color: #495057;
}

    /* On cache l'input radio natif moche */
    .selector-option input[type="radio"][b-v064rzawpl] {
        display: none;
    }

    /* Style de l'option sélectionnée */
    .selector-option.active[b-v064rzawpl] {
        background-color: #fff;
        color: #007bff;
        box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
    }

/* Animation fluide pour l'apparition du sélecteur de client */
.fade-in-input[b-v064rzawpl] {
    animation: fadeInField-b-v064rzawpl 0.25s ease-out;
}

@keyframes fadeInField-b-v064rzawpl {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/EspaceClient/Modules/Contact/Components/Pages/Contact.razor.rz.scp.css */
/* === SocialBar Responsive === */

/* Desktop par défaut (inchangé) */
.container-join-us[b-wbkkbhrxff] {
    width: 100%;
    height: auto;
    min-height: 58rem;
    max-height: 58rem;
    background-color: #2d2d2d;
    display: flex;
    justify-content: flex-start;
    border-top: 6px solid var(--color-CTA-primary);
    border-bottom: 4px solid var(--color-CTA-primary);
}

contactform[b-wbkkbhrxff] {
    width: 100%;
    height: auto;
}


.img-contact[b-wbkkbhrxff] {
    width: 100%;
    min-width: 45rem;
    height: 100%;
    min-height: 58rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/assets/images/background/back-vectoriel.jpg');
    background-position: center center;
    z-index: 100000;
}


.bloc-social[b-wbkkbhrxff] {
    display: flex;
    justify-content: center;

    /* flex-direction:column;
    align-items:center;
    align-content:center; */
    overflow: hidden;
    width: 4.5rem;
    height: auto;
}

    .bloc-social a img[b-wbkkbhrxff] {
        width: 4rem;
        height: auto;
    }

        .bloc-social a img:hover[b-wbkkbhrxff] {
            transform: scale(1.15) rotate(-5deg);
            cursor: pointer;
        }

    /*    .bloc-social:hover {
        transform: scale(1.1) rotate(-5deg);
        transition: transform 0.5s ease-out;
        cursor: pointer;
    } */
    .bloc-social a img[b-wbkkbhrxff] {
        width: clamp(60px, 150px - 10vw, 80px); /* plus petit écran → icône plus grosse */
        height: auto;
        margin-top: 0.5rem; /* clamp(0.5rem, 2vw, 1rem); */
        transition: transform 0.3s ease-out;
    }

.container-form-contact[b-wbkkbhrxff] {
    width: 45vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-img-contact[b-wbkkbhrxff] {
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.container-telnumber[b-wbkkbhrxff] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 0;
}


.container-logosocial[b-wbkkbhrxff] {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 0;
}


.container-infocontact[b-wbkkbhrxff] {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 2rem;
}

/* ================================
   MEDIA QUERIES
================================= */

/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */
@media (width <= 1599px) {
    .img-contact[b-wbkkbhrxff], .container-img-contact[b-wbkkbhrxff] {
        display: none;
    }

    .container-img-contact[b-wbkkbhrxff] {
        width: 0;
    }

    .container-form-contact[b-wbkkbhrxff] {
        width: 80vw;
    }

    .master-padding-left[b-wbkkbhrxff] {
        padding: 0 4rem;
        margin: 0 auto;
    }

    .container-infocontact[b-wbkkbhrxff] {
        width: 60%;
    }
}



/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (width <= 1024px) {
    .master-padding-left[b-wbkkbhrxff] {
        padding-left: 1rem;
    }

    .container-infocontact[b-wbkkbhrxff] {
        width: 100%;
    }
}



/* --- 4. MOBILES ( < 768px ) --- */
@media (width <= 767px) {
    h3[b-wbkkbhrxff] {
        margin: 1rem auto;
    }

    .container-infocontact[b-wbkkbhrxff] {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 0 auto 1rem 2rem;
    }

    .container-logosocial[b-wbkkbhrxff] {
        justify-content: flex-start;
    }

    .container-telnumber[b-wbkkbhrxff] {
        margin-bottom: 2rem;
    }

    .container-form-contact[b-wbkkbhrxff] {
        width: 100vw;
    }

    .master-padding-left[b-wbkkbhrxff] {
        padding-left: 0;
    }
}
/* _content/EspaceClient/Modules/Contact/Components/Widgets/ContactForm.razor.rz.scp.css */
/* ===============================
   Contact & Social Component CSS
   Responsive
=============================== */

/* === Desktop (>= 1025px) === */

/* => inchangé, ta base fonctionne bien */

/* Variables locales au composant */
.contact-us[b-a4b4mkgonf] {
    width: 100%;
    min-width:45rem;

    /* Animation d’apparition globale */
    opacity: 1;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
    background-color:white;
    color: #2d2d2d;
    border-radius: var(--radius-double);
}

    .contact-us.cu-visible[b-a4b4mkgonf] {
        opacity: 1;
        transform: translateY(0);
    }


 /* Carte du formulaire */
    .contact-us .container-form-add-big[b-a4b4mkgonf] {
        width: 100%;
        max-width: 45rem;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: clamp(1rem, 2vw, 1.5rem);
        box-shadow: 0 12px 30px rgb(235 123 12 / 6%);

        /* animation-delay: 0.3s; */
        margin: 0;
    }



/* Groupes de champs */
.contact-us .form-group[b-a4b4mkgonf] {
    width:100%;
    position: relative;
}



 /* Placeholder */
.contact-us .form-group [b-a4b4mkgonf]::placeholder {
        color: var(--text-muted);
        opacity: .9;
        font-size: 1rem;
    }

/* ================================
   REGLES MEDIA QUERIES
================================= */

/* Accessibilité - réduction des motions */
@media (prefers-reduced-motion:reduce) {
    .contact-us[b-a4b4mkgonf] {
        transition: none;
    }

        .contact-us .container-form-add-big[b-a4b4mkgonf] {
            animation: none;
        }

        .contact-us .form-group input:focus[b-a4b4mkgonf],
        .contact-us .form-group textarea:focus[b-a4b4mkgonf] {
            box-shadow: none;
        }
}


/* --- 2. PETITS PC / TABLETTES PAYSAGE ( < 1600px ) --- */

/* @media (max-width: 1599px) {

} */


/* --- 3. TABLETTES PORTRAIT ( < 1025px ) --- */
@media (width <= 1024px) {
    .contact-us[b-a4b4mkgonf] {
        width: 100vw;
        margin: 0;
    }

        .contact-us .container-form-add-big[b-a4b4mkgonf] {
            width: 100%;
            padding: clamp(0.8rem, 2vw, 1.2rem);
            border-radius: 12px;
        }

    .contact-us .form-group .input[b-a4b4mkgonf],
    .contact-us .form-group textarea[b-a4b4mkgonf] {
        font-size: 0.95rem;
        padding: 0.75rem 0.9rem;
    }
}



/* --- 4. MOBILES ( < 768px ) --- */
@media (width <= 767px) {
    :root[b-a4b4mkgonf] {
        --input-width: 100%; /* Pleine largeur sur mobile */
    }

    h3[b-a4b4mkgonf] {
        padding-left: 3rem;
        font-size: 2rem;
    }

    /* Optionnel : si tu as des formulaires dans tes colonnes paddingL12 */
    input[b-a4b4mkgonf], select[b-a4b4mkgonf], textarea[b-a4b4mkgonf] {
        max-width: 100% !important;
    }

    

        .contact-us .container-form-add-big[b-a4b4mkgonf] {
            border-radius: 0;
            box-shadow: 0 6px 16px rgb(235 123 12 / 10%);
            padding: 1rem;
            margin: 0 auto !important;
        }

    .contact-us .form-group[b-a4b4mkgonf] {
        width: 100%;
        margin-bottom: 0.8rem;
    }

        .contact-us .form-group textarea[b-a4b4mkgonf] {
            min-height: 100px; /* réduit pour petits écrans */
        }

    .contact-us .btn[b-a4b4mkgonf] {
        width: 100%; /* bouton prend toute la largeur */
    }

}

/* === Très petits mobiles (<= 480px) === */
@media (width <= 480px) {
    .contact-us .container-form-add-big[b-a4b4mkgonf] {
        width:100%;
        padding: 0.8rem;
        border-radius: 0;
    }

    .contact-us .form-group .input[b-a4b4mkgonf],
    .contact-us .form-group textarea[b-a4b4mkgonf] {
        font-size: 0.85rem;
        padding: 0.65rem 0.8rem;
    }
}


/* _content/EspaceClient/Modules/FactureAchatManager/Components/Widgets/FactureAchatDetailModal.razor.rz.scp.css */
.detail-modal[b-e2wwias8a6] {
    width: 70%;
}

.detail-loading[b-e2wwias8a6], .detail-empty[b-e2wwias8a6] {
    padding: 1rem;
    color: #6c757d;
    font-size: 0.95rem;
}

.detail-empty[b-e2wwias8a6] {
    background-color: #fff8ec;
    border: 1px solid #f2d9a6;
    border-radius: 8px;
    color: #7a5b12;
}

.detail-grid[b-e2wwias8a6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-card[b-e2wwias8a6] {
    background-color: #f8f9fb;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

    .detail-card h4[b-e2wwias8a6] {
        margin: 0 0 0.5rem;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #0f3057;
    }

    .detail-card p[b-e2wwias8a6] {
        margin: 0.2rem 0;
        font-size: 0.88rem;
        color: #33404f;
        line-height: 1.35;
    }

.detail-strong[b-e2wwias8a6] {
    font-weight: 600;
    color: #17202b !important;
}

.detail-section-title[b-e2wwias8a6] {
    margin: 1.4rem 0 0.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f3057;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid #e5e9f0;
}

.detail-table[b-e2wwias8a6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .detail-table th[b-e2wwias8a6] {
        background-color: #eef2f8;
        color: #33404f;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.72rem;
        letter-spacing: 0.03em;
        padding: 8px 10px;
        text-align: left;
        border-bottom: 1px solid #dde3ec;
    }

    .detail-table td[b-e2wwias8a6] {
        padding: 7px 10px;
        border-bottom: 1px solid #eef1f6;
    }

    .detail-table tbody tr:hover[b-e2wwias8a6] {
        background-color: #f5f8fc;
    }

.text-right[b-e2wwias8a6] {
    text-align: right;
}

.event-timeline[b-e2wwias8a6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .event-timeline li[b-e2wwias8a6] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.55rem 0.8rem;
        background-color: #f8f9fb;
        border: 1px solid #e5e9f0;
        border-left: 3px solid #0f3057;
        border-radius: 6px;
        font-size: 0.85rem;
    }

.event-date[b-e2wwias8a6] {
    color: #6c757d;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.78rem;
    min-width: 130px;
}

.event-code[b-e2wwias8a6] {
    font-weight: 700;
    color: #0f3057;
    background-color: #e7f1ff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
}

.event-text[b-e2wwias8a6] {
    color: #33404f;
}
/* _content/EspaceClient/Modules/FactureAchatManager/Components/Widgets/RegistreAchats.razor.rz.scp.css */
.ledger-container[b-t9db1ut5hu] {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1c2733;
}

.ledger-header[b-t9db1ut5hu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ledger-heading[b-t9db1ut5hu] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    .ledger-heading h1[b-t9db1ut5hu] {
        font-size: 1.5rem;
        margin: 0;
        font-weight: 700;
        color: #0f3057;
        letter-spacing: -0.01em;
    }

.ledger-subtitle[b-t9db1ut5hu] {
    font-size: 0.85rem;
    color: #6c7a8c;
}

.btn-refresh[b-t9db1ut5hu] {
    background-color: #0f3057;
    color: #fff;
}

    .btn-refresh:hover[b-t9db1ut5hu] {
        background-color: #1a4473;
    }

.ledger-empty[b-t9db1ut5hu] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #6c7a8c;
    background-color: #f8f9fb;
    border: 1px dashed #d7dee8;
    border-radius: 10px;
    font-size: 0.95rem;
}

/* --- Tableau --- */
.table-wrapper[b-t9db1ut5hu] {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgb(15 48 87 / 6%);
}

.excel-table[b-t9db1ut5hu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
}

    .excel-table th[b-t9db1ut5hu] {
        background-color: #0f3057;
        color: #fff;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.74rem;
        letter-spacing: 0.04em;
        padding: 12px 14px;
        text-align: left;
        white-space: nowrap;
    }

    .excel-table td[b-t9db1ut5hu] {
        padding: 11px 14px;
        border-bottom: 1px solid #eef1f6;
        vertical-align: middle;
        white-space: nowrap;
    }

    .excel-table tbody tr[b-t9db1ut5hu] {
        transition: background-color 0.12s ease;
    }

        .excel-table tbody tr:nth-child(even)[b-t9db1ut5hu] {
            background-color: #fafbfd;
        }

        .excel-table tbody tr:hover[b-t9db1ut5hu] {
            background-color: #eef4fc;
        }

        .excel-table tbody tr:last-child td[b-t9db1ut5hu] {
            border-bottom: none;
        }

.text-right[b-t9db1ut5hu] {
    text-align: right;
}

.text-center[b-t9db1ut5hu] {
    text-align: center;
}

.font-mono[b-t9db1ut5hu] {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.font-bold[b-t9db1ut5hu] {
    font-weight: 700;
}

/* --- Badges de statut --- */
.badge[b-t9db1ut5hu] {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-recue[b-t9db1ut5hu] {
    background-color: #e7f1ff;
    color: #0c63e4;
}

.badge-en-validation[b-t9db1ut5hu] {
    background-color: #fff3cd;
    color: #b06000;
}

.badge-validee[b-t9db1ut5hu] {
    background-color: #e0f2f1;
    color: #007a70;
}

.badge-refusee[b-t9db1ut5hu] {
    background-color: #fdecea;
    color: #c62828;
}

.badge-litige[b-t9db1ut5hu] {
    background-color: #ffe9e0;
    color: #c04d17;
}

.badge-mise-en-paiement[b-t9db1ut5hu] {
    background-color: #ede7f6;
    color: #5e35b1;
}

.badge-payee[b-t9db1ut5hu] {
    background-color: #e6f4ea;
    color: #137333;
}

/* --- Actions --- */
.actions-cell[b-t9db1ut5hu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.btn-icon[b-t9db1ut5hu] {
    border: 1px solid #d7dee8;
    background-color: #fff;
}

    .btn-icon:hover[b-t9db1ut5hu] {
        background-color: #eef4fc;
        border-color: #0c63e4;
    }

.btn-action-success[b-t9db1ut5hu] {
    background-color: #e6f4ea;
    color: #137333;
}

.btn-action-danger[b-t9db1ut5hu] {
    background-color: #fdecea;
    color: #c62828;
}

.btn-action-primary[b-t9db1ut5hu] {
    background-color: #0f3057;
    color: #fff;
}

    .btn-action-success:hover:not(:disabled)[b-t9db1ut5hu],
    .btn-action-danger:hover:not(:disabled)[b-t9db1ut5hu],
    .btn-action-primary:hover:not(:disabled)[b-t9db1ut5hu] {
        filter: brightness(0.95);
    }
/* _content/EspaceClient/Modules/FactureManager/Components/Pages/FactureLibre.razor.rz.scp.css */
/* Alignements globaux */
.invoice-workspace[b-6rpw88hjg2] {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: system-ui, -apple-system, sans-serif;
}

.invoice-header-action[b-6rpw88hjg2] {
    margin-bottom: 1.5rem;
}

/* Ligne "Type de document" + actions Générer/Retour, alignées à droite */
.invoice-header-row[b-6rpw88hjg2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.invoice-header-row-left[b-6rpw88hjg2] {
    display: flex;
    align-items: center;
}

.form-footer-actions--top[b-6rpw88hjg2] {
    margin-top: 0;
}

/* La Feuille Facture Blanche */
.invoice-sheet[b-6rpw88hjg2] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 3rem;
    box-shadow: 0 8px 24px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 6%);
}

/* Layout En-tête */
.invoice-top-section[b-6rpw88hjg2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 3rem;
}

.issuer-card[b-6rpw88hjg2] {
    border-left: 4px solid #10b981; /* Vert émeraude signature */
    background: #f8fafc;
    padding: 1rem 1.5rem;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 1px 4px rgb(15 23 42 / 6%);
    text-align: left;
}

/* Émetteur : uniquement l'enfant direct de .invoice-top-section (pas .recipient-card, qui
   partage la classe .issuer-card mais gère sa propre largeur) — colonne jumelle de
   .invoice-recipient-section ci-dessous, même flex-basis pour rester alignées. */
.invoice-top-section > .issuer-card[b-6rpw88hjg2] {
    flex: 1 1 0;
    min-width: 260px;
    max-width: 480px;
}

/* Placeholder tant qu'aucun client n'est sélectionné — occupe la même colonne que
   .recipient-card pour que le bloc Émetteur ne s'étire pas seul sur toute la largeur. */
.recipient-placeholder[b-6rpw88hjg2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    min-height: 100%;
    padding: 1.25rem;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
}

.issuer-tag[b-6rpw88hjg2] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #10b981;
    letter-spacing: 0.05em;
}

.issuer-name[b-6rpw88hjg2] {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    color: #1e293b;
}

.issuer-id[b-6rpw88hjg2] {
    font-size: 0.8rem;
    color: #64748b;
}

/* Métadonnées à droite */
.meta-card[b-6rpw88hjg2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    text-align: right;
}

.document-title[b-6rpw88hjg2] {
    text-transform: uppercase;
    font-size: 1.5rem;
    color: #64748b;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

.meta-field[b-6rpw88hjg2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

    .meta-field label[b-6rpw88hjg2] {
        font-size: 0.75rem;
        color: #64748b;
        margin-bottom: 0.25rem;
    }

/* Client / Destinataire — colonne jumelle de .invoice-top-section > .issuer-card ci-dessus,
   même flex-basis pour que les deux blocs démarrent alignés sur la même ligne. */
.invoice-recipient-section[b-6rpw88hjg2] {
    display: flex;
    justify-content: flex-end;
    flex: 1 1 0;
    min-width: 260px;
    max-width: 480px;
}

.recipient-card[b-6rpw88hjg2] {
    background: #f8fafc;
    border-left: 4px solid #2563eb; /* Bleu */
    padding: 1.25rem;
    border-radius: 0 6px 6px 0;
    width: 100%;
    max-width: 400px;
}

.recipient-label[b-6rpw88hjg2] {
    display: block;
    font-weight: 600;
    color: #2563eb;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Sélection du client — ligne pleine largeur au-dessus des blocs Émetteur/Récepteur.
   .meta-field aligne normalement à droite (usage d'origine sous le titre du document) : cette
   ligne, elle, doit rester alignée à gauche comme le reste du formulaire. */
.client-select-field.meta-field[b-6rpw88hjg2] {
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.client-select-row[b-6rpw88hjg2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Barre technique intermédiaire */
.invoice-settings-bar[b-6rpw88hjg2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f1f5f9;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 2rem;
    gap: 1rem;
    box-shadow: inset 0 1px 2px rgb(15 23 42 / 4%);
}

.setting-item[b-6rpw88hjg2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

    /* 🐛 Le libellé et son ":" sont un seul texte ("Echéance :") : sans nowrap, l'espace avant
       le ":" est un point de rupture valide et le navigateur peut le renvoyer seul à la ligne
       suivante dès que le conteneur est un peu à l'étroit. */
    .setting-item label[b-6rpw88hjg2] {
        white-space: nowrap;
    }

/* Barre de métadonnées (Processus métier / Échéance / Statut / Paiement...) — grille fixe à 3
   colonnes égales : les champs (date, select, texte) ont tous des contenus de longueur
   différente, la grille évite le désalignement inesthétique d'un simple flex-wrap. */
.meta-card.container-row[b-6rpw88hjg2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    box-shadow: inset 0 1px 2px rgb(15 23 42 / 4%);
}

    .meta-card.container-row .setting-item[b-6rpw88hjg2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        min-width: 0; /* laisse la grille rétrécir la colonne sans faire déborder le select */
    }

    .meta-card.container-row .native-input[b-6rpw88hjg2],
    .meta-card.container-row .native-select[b-6rpw88hjg2],
    .meta-card.container-row select[b-6rpw88hjg2] {
        width: 100%;
        box-sizing: border-box;
    }

    /* "Émise" est figée (toujours la date du jour) : ligne d'entête en pleine largeur, détachée
       visuellement de la grille des 3 champs modifiables ci-dessous. */
    .meta-card.container-row .meta-item-emise[b-6rpw88hjg2] {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: baseline;
        padding-bottom: 0.75rem;
        margin-bottom: 0.25rem;
        border-bottom: 1px dashed #cbd5e1;
    }

@media (max-width: 640px) {
    .meta-card.container-row[b-6rpw88hjg2] {
        grid-template-columns: 1fr;
    }
}

/* Éléments de formulaire natifs */
.native-input[b-6rpw88hjg2], .native-select[b-6rpw88hjg2] {
    padding: 0.4rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    font-size: 0.9rem;
    color: #1e293b;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .native-input:hover[b-6rpw88hjg2], .native-select:hover[b-6rpw88hjg2] {
        border-color: #94a3b8;
    }

    .native-input:focus[b-6rpw88hjg2], .native-select:focus[b-6rpw88hjg2] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgb(59 130 246 / 15%);
    }

    .native-select.large[b-6rpw88hjg2] {
        width: 100%;
    }

    .native-input.compact[b-6rpw88hjg2], .native-select.compact[b-6rpw88hjg2] {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }

/* Input TVA collé au suffixe % */
.input-with-suffix[b-6rpw88hjg2] {
    display: inline-flex;
    align-items: center;
}

    .input-with-suffix .native-input[b-6rpw88hjg2] {
        border-radius: 4px 0 0 4px;
        border-right: none;
        width: 60px;
    }

    .input-with-suffix .suffix[b-6rpw88hjg2] {
        background: #e2e8f0;
        border: 1px solid #cbd5e1;
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
        border-radius: 0 4px 4px 0;
        color: #475569;
    }

/* Tableau WySIWYG */
.table-wrapper[b-6rpw88hjg2] {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.native-invoice-table[b-6rpw88hjg2] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

    .native-invoice-table th[b-6rpw88hjg2] {
        padding: 0.75rem 0.5rem;
        border-bottom: 2px solid #cbd5e1;
        color: #64748b;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.invoice-row[b-6rpw88hjg2] {
    border-bottom: 1px solid #e2e8f0;
}

/* Inputs "Invisibles" dans le tableau (Mode Document) */
.clean-input[b-6rpw88hjg2], .clean-select[b-6rpw88hjg2], .clean-textarea[b-6rpw88hjg2] {
    border: 1px solid transparent;
    background: transparent;
    width: 100%;
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
    box-sizing: border-box;
    font-family: inherit;
    resize: none;
}

    .clean-input.row-title[b-6rpw88hjg2] {
        font-weight: 600;
        color: #1e293b;
    }

    .clean-textarea.row-desc[b-6rpw88hjg2] {
        font-size: 0.8rem;
        color: #64748b;
        margin-top: 0.2rem;
    }

    /* État au survol / focus des champs du tableau */
    .clean-input:hover[b-6rpw88hjg2], .clean-select:hover[b-6rpw88hjg2], .clean-textarea:hover[b-6rpw88hjg2] {
        border-color: #e2e8f0;
        background: #f8fafc;
        border-radius: 4px;
    }

    .clean-input:focus[b-6rpw88hjg2], .clean-select:focus[b-6rpw88hjg2], .clean-textarea:focus[b-6rpw88hjg2] {
        outline: none;
        border-color: #3b82f6;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 0 0 3px rgb(59 130 246 / 15%);
    }

.row-total-cell[b-6rpw88hjg2] {
    font-weight: 600;
    color: #1e293b;
    padding-right: 0.5rem;
}

.empty-table-message[b-6rpw88hjg2] {
    text-align: center;
    padding: 3rem 0;
    color: #94a3b8;
    font-style: italic;
    background: #f8fafc;
}

/* Boutons */
.btn-delete-line[b-6rpw88hjg2] {
    opacity: 0.7;
    border-radius: 6px;
    transition: opacity 0.2s, background 0.2s, transform 0.15s;
}

    .btn-delete-line:hover[b-6rpw88hjg2] {
        opacity: 1;
        background: #fee2e2;
        transform: scale(1.08);
    }

/* Icône poubelle recolorée en rouge via masque CSS — le SVG source (delete.svg) est fourni en
   blanc plein (pensé pour un fond coloré), donc invisible sur ce tableau au fond blanc tel quel. */
.delete-line-icon[b-6rpw88hjg2] {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #dc2626;
    -webkit-mask-image: url('/assets/images/ico-svg/delete.svg');
    mask-image: url('/assets/images/ico-svg/delete.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.table-actions[b-6rpw88hjg2] {
    margin-bottom: 3rem;
}

.btn-secondary-action[b-6rpw88hjg2] {
    background: #fff;
    border: 1px dashed #cbd5e1;
    color: #475569;
    font-weight: 500;
}

    .btn-secondary-action:hover[b-6rpw88hjg2] {
        border-color: #2563eb;
        color: #2563eb;
        background: #f0f5ff;
    }

/* Bloc de calcul des totaux */
.totals-section[b-6rpw88hjg2] {
    display: flex;
    justify-content: flex-end;
}

.totals-box[b-6rpw88hjg2] {
    width: 100%;
    max-width: 350px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
}

.total-row[b-6rpw88hjg2] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

    .total-row .label[b-6rpw88hjg2] {
        color: #64748b;
    }

    .total-row .value[b-6rpw88hjg2] {
        font-weight: 600;
        color: #1e293b;
    }

    .total-row.grand-total[b-6rpw88hjg2] {
        border-top: 2px dashed #cbd5e1;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        font-size: 1.15rem;
        font-weight: 700;
    }

.color-primary[b-6rpw88hjg2] {
    color: #2563eb !important;
}

/* Barre d'action finale */
.form-footer-actions[b-6rpw88hjg2] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-link-back[b-6rpw88hjg2] {
    color: #64748b;
    font-weight: 500;
}

.btn-submit-primary[b-6rpw88hjg2] {
    background: #10b981;
    color: white;
    font-size: 0.95rem;
}

    .btn-submit-primary:hover:not(:disabled)[b-6rpw88hjg2] {
        background: #059669;
    }

    .btn-submit-primary:disabled[b-6rpw88hjg2] {
        background: #cbd5e1;
    }



.text-muted[b-6rpw88hjg2] {
    color: #64748b;
}

.validation-errors-summary[b-6rpw88hjg2] {
    color: #dc2626;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
/* _content/EspaceClient/Modules/FactureManager/Components/Widgets/ReglementFactureModal.razor.rz.scp.css */
.modal-overlay[b-31wp6wjekk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgb(0 0 0 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* min-height/max-height explicitement réinitialisés : modal-v1.0.0.css (feuille globale, non
   scopée) pose min-height/max-height: 90vh sur .modal-container pour ses propres grandes modales
   — sans cet override, cette règle globale s'applique quand même ici (elle ne cible aucune
   propriété que ce bloc ne redéfinit pas déjà, la cascade CSS s'applique alors propriété par
   propriété) et forçait cette modale, pourtant courte, à occuper ~tout le viewport. */
.modal-container[b-31wp6wjekk] {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    min-height: auto;
    max-height: 90vh;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    display: flex;
    flex-direction: column;
}

.modal-header[b-31wp6wjekk], .modal-footer[b-31wp6wjekk] {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

    .modal-header h3[b-31wp6wjekk] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        color: #0f3057;
    }

.modal-footer[b-31wp6wjekk] {
    border-bottom: none;
    border-top: 1px solid #eee;
    justify-content: flex-end;
    gap: 8px;
}

.modal-body[b-31wp6wjekk] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reglement-intro[b-31wp6wjekk] {
    margin: 0 0 4px;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.4;
}

    .reglement-intro strong[b-31wp6wjekk] {
        color: #0f3057;
    }

.reglement-badge[b-31wp6wjekk] {
    display: block;
    width: fit-content;
    margin-top: 4px;
}

.btn-close[b-31wp6wjekk] {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: #6c7a8c;
    cursor: pointer;
}

    .btn-close:hover[b-31wp6wjekk] {
        color: #0f3057;
    }
/* _content/EspaceClient/Modules/MyAccount/Components/Widgets/TwoFactorSettings.razor.rz.scp.css */
/* Variante rouge/vert du .switch générique (form-v1.0.0.css), réservée à ce toggle sécurité :
   l'état activé/désactivé doit rester lisible sans dépendre de la couleur de marque du tenant. */
.switch-security .slider[b-wfz2q8kpz5] {
    background-color: var(--color-error);
}

.switch-security input:checked + .slider[b-wfz2q8kpz5] {
    background-color: var(--color-success);
}
/* _content/EspaceClient/Modules/PaymentManager/Components/Pages/PaiementFactureSuccess.razor.rz.scp.css */
/* 🎯 Apparition douce des phrases de la page "success" (paiement facture unique) — même doctrine
   que Platform/.../IdentityConfigPanel.razor.css .onboarding-fade-in (installation) : durée longue
   + easing "easeOutExpo"-like avec léger glissement vertical, pas un simple opacity 0→1 abrupt. CSS
   scoped Blazor non partageable entre composants : dupliquée ici plutôt qu'inventer une nouvelle
   courbe. @key posé sur chaque élément côté .razor pour forcer Blazor à recréer le nœud DOM (donc
   rejouer l'animation) à chaque bascule d'état (@switch), plutôt qu'un simple patch du texte qui ne
   la rejouerait jamais. */
.onboarding-fade-in[b-hfsva9bheo] {
    animation: onboardingFadeIn-b-hfsva9bheo 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Léger effet de cascade entre les lignes qui apparaissent ensemble, plutôt qu'un fondu simultané
   — animation-fill-mode: backwards garde le texte invisible pendant le délai (sinon il apparaîtrait
   en clair avant de rejouer son propre fondu). */
.onboarding-fade-in.onboarding-fade-in-delay-1[b-hfsva9bheo] {
    animation-delay: 0.12s;
    animation-fill-mode: backwards;
}

@keyframes onboardingFadeIn-b-hfsva9bheo {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/EspaceClient/Modules/PaymentManager/Components/Widgets/Admin/PaymentMonitoring.razor.rz.scp.css */

.admin-container[b-8fhxrti2f0] {
    padding: 20px;
    font-family: sans-serif;
    color: #333;
}

.header-row[b-8fhxrti2f0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.table-wrapper[b-8fhxrti2f0] {
    overflow-x: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
}

.custom-table[b-8fhxrti2f0] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

    .custom-table th[b-8fhxrti2f0], .custom-table td[b-8fhxrti2f0] {
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
    }

    .custom-table th[b-8fhxrti2f0] {
        background: #f8f9fa;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
    }

.badge[b-8fhxrti2f0] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

.bg-success[b-8fhxrti2f0] {
    background: #e6ffed;
    color: #22863a;
    border: 1px solid #22863a;
}

.bg-error[b-8fhxrti2f0] {
    background: #ffeef0;
    color: #d73a49;
    border: 1px solid #d73a49;
}

.email-tag[b-8fhxrti2f0] {
    color: #0366d6;
    font-size: 13px;
}

.f-mono[b-8fhxrti2f0] {
    font-family: monospace;
    font-size: 11px;
    color: #666;
}

.action-stack[b-8fhxrti2f0] {
    display: flex;
    gap: 5px;
}

.btn-refresh[b-8fhxrti2f0] {
    background: #6f42c1;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.btn-retry[b-8fhxrti2f0] {
    background: #28a745;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.btn-info[b-8fhxrti2f0] {
    background: #e1e4e8;
    color: #24292e;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

button:hover[b-8fhxrti2f0] {
    opacity: 0.8;
}

.controls[b-8fhxrti2f0] {
    display: flex;
    gap: 10px;
    align-items: center;
}

    /* Le .form-select global est width:100% (pensé pour un form-group empilé) ;
       ici le select vit dans une barre d'actions horizontale, donc on garde
       une largeur de contenu plutôt que de laisser le select écraser les
       boutons voisins. Ne redéfinit aucune couleur/bordure/rayon. */
    .controls .form-select[b-8fhxrti2f0] {
        width: auto;
        min-width: 200px;
    }
/* _content/EspaceClient/Modules/PaymentManager/Components/Widgets/PaymentMethodCard.razor.rz.scp.css */
/* Interrupteur "Renouvellement automatique" — même socle que le .switch générique
   (form-v1.0.0.css), recoloré en rouge/vert plutôt que gris/bleu primaire : l'état a ici une
   vraie portée financière (renouvellement actif ou non), une couleur de statut est plus lisible
   qu'une couleur de marque neutre. */
.switch-renewal .slider[b-wdkdkokx2v] {
    background-color: var(--color-error);
}

    .switch-renewal input:checked + .slider[b-wdkdkokx2v] {
        background-color: var(--color-success);
    }
/* _content/EspaceClient/Modules/PaymentManager/Components/Widgets/PayplugPaymentWidget.razor.rz.scp.css */


/* Le fond sombre et flou */
.payplug-overlay[b-vpfiqojk5w] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgb(15 23 42 / 60%); /* Bleu-nuit transparent */
    backdrop-filter: blur(4px); /* Flou derrière la modal */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    /* 🎯 Apparition douce à l'ouverture — même doctrine que .onboarding-fade-in (les pages
       "success") : 0.3s ease-out était trop court/sec pour être perçu comme progressif. */
    animation: fadeIn-b-vpfiqojk5w 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Le header de la modal */
.payplug-header[b-vpfiqojk5w] {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
}

.payplug-card[b-vpfiqojk5w] {
    background: white;
    width: 95%;
    max-width: 500px;
    height: fit-content;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden; /* On cache le scroll de la carte... */
}

/* L'iframe doit occuper tout l'espace disponible de la carte */
.payplug-iframe[b-vpfiqojk5w] {
    width: 100%;
    height: fit-content;
    flex-grow: 1;
    border: none;
}

.close-btn[b-vpfiqojk5w] {
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .close-btn:hover[b-vpfiqojk5w] {
        background: #e2e8f0;
    }


@keyframes fadeIn-b-vpfiqojk5w {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }

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



/* --- COMPORTEMENT SUR PC (Grand écran) --- */
@media (width >= 769px) {
    .payplug-card[b-vpfiqojk5w] {
        /* Sur PC, on fige une hauteur parfaite pour le formulaire Payplug sans scroll */
        height: 750px;
    }
}

/* --- COMPORTEMENT SUR MOBILE (Ton Samsung) --- */
@media (width <= 768px) {
    .payplug-card[b-vpfiqojk5w] {
        /* Sur mobile, on colle la modal presque en haut/bas de l'écran (93% de la hauteur) */
        height: 80vh;
        border-radius: 12px; /* Légèrement plus petit pour le mobile */
    }

    /* Sécurité pour l'iframe sur mobile si Payplug dépasse un tout petit peu */
    .payplug-card[b-vpfiqojk5w] {
        overflow-y: auto;
    }
}




/* Le fond sombre et flou */
/* .payplug-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6); */ /* Bleu-nuit transparent */

/* backdrop-filter: blur(4px); */

 /* Flou derrière la modal */

/* display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    /* 🎯 Apparition douce à l'ouverture — même doctrine que .onboarding-fade-in (les pages
       "success") : 0.3s ease-out était trop court/sec pour être perçu comme progressif. */
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);[b-vpfiqojk5w]
} */[b-vpfiqojk5w]

/* Le conteneur de la modal */

/* .payplug-card {
    background: white;
    width: 95%;
    max-width: 500px; */
/* min-height:750px;
    max-height: 60vh; */ /* Taille optimale pour le formulaire Payplug */

/* border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative; */

/* 1. CORRECTION : On supprime le min-height fixe de 750px qui cassait tout */

/* À la place, on lui dit de prendre la hauteur de son contenu, ou d'occuper l'espace disponible */

/* height: auto; */

/* 2. CORRECTION : On augmente le max-height pour le mobile */

/* 60vh c'est trop petit pour un iframe Payplug sur mobile. On lui donne 85% de l'écran */

/* max-height: 85vh;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column; */

/* 3. SÉCURITÉ ABSOLUE : Permet de scroller à l'intérieur de la modal */

/* Si le formulaire Payplug est plus grand que les 85vh de l'écran, */

/* un scrollbar propre apparaîtra dans la modal, sans dépasser de l'écran du téléphone */

/* overflow-y: auto;
    position: relative;
} */

/* Le header de la modal */

/* .payplug-header {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
}

.close-btn {
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .close-btn:hover {
        background: #e2e8f0;
    } */

/* L'iframe */

/* .payplug-iframe {
    flex-grow: 1;
    width: 100%;
    border: none; */

/* On lui donne une hauteur minimale de départ, mais qui s'adaptera */

/* min-height: 350px;

} */

/* @keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }

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

.payplug-card {
    background: white;
    width: 95%;
    max-width: 500px;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden; */ /* On cache le scroll de la carte... */

/* } */

/* L'iframe doit occuper tout l'espace disponible de la carte */

/* .payplug-iframe {
    width: 100%;
    height: 100%;
    flex-grow: 1;
    border: none;
} */

/* --- COMPORTEMENT SUR PC (Grand écran) --- */

/* @media (min-width: 769px) {
    .payplug-card { */

/* Sur PC, on fige une hauteur parfaite pour le formulaire Payplug sans scroll */

/* height: 750px;
    }
} */

/* --- COMPORTEMENT SUR MOBILE (Ton Samsung) --- */

/* @media (max-width: 768px) {
    .payplug-card { */

/* Sur mobile, on colle la modal presque en haut/bas de l'écran (93% de la hauteur) */
/* height: 80vh;
        border-radius: 12px; */ /* Légèrement plus petit pour le mobile */

/* } */

/* Sécurité pour l'iframe sur mobile si Payplug dépasse un tout petit peu */

/* .payplug-card {
        overflow-y: auto;
    }
} */
/* _content/EspaceClient/Modules/PaymentManager/Components/Widgets/StripeCheckoutModal.razor.rz.scp.css */
/* Copie assumée de AddClientModal.razor.css (CSS isolation Blazor : scopé au composant, donc pas
   réutilisable tel quel via les seuls noms de classe) — même chrome de modal générique que le
   reste de l'app, adapté pour héberger l'iframe Stripe Checkout intégré. */

.custom-modal-backdrop[b-uwyf8c4zoh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 0 0 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    /* 🎯 Apparition douce à l'ouverture — jusqu'ici aucune transition, la modal surgissait d'un
       coup. Même doctrine que .onboarding-fade-in (durée longue, easing "easeOutExpo"-like) : le
       fond s'estompe pendant que le contenu (ci-dessous) glisse légèrement. */
    animation: stripeModalBackdropIn-b-uwyf8c4zoh 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-modal-content[b-uwyf8c4zoh] {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    display: flex;
    flex-direction: column;
    animation: stripeModalContentIn-b-uwyf8c4zoh 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes stripeModalBackdropIn-b-uwyf8c4zoh {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes stripeModalContentIn-b-uwyf8c4zoh {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }

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

.custom-modal-header[b-uwyf8c4zoh] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .custom-modal-header h3[b-uwyf8c4zoh] {
        margin: 0;
        font-size: 1.2rem;
        color: #1e293b;
    }

.close-modal-btn[b-uwyf8c4zoh] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: #64748b;
}

.custom-modal-body[b-uwyf8c4zoh] {
    padding: 1.5rem;
}
/* _content/EspaceClient/Modules/ReportingManager/Components/Widgets/DashboardInvoice.razor.rz.scp.css */
/* Conteneur principal */
.dashboard-container[b-tslwvk9od7] {
    padding: 24px;
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

/* En-tête et barre de filtres */
.dashboard-header[b-tslwvk9od7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f0f2f5;
    padding-bottom: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

    .dashboard-header h2[b-tslwvk9od7] {
        margin: 0;
        color: #1e293b;
        font-size: 1.5rem;
        font-weight: 700;
    }

.filter-bar[b-tslwvk9od7] {
    display: flex;
    align-items: flex-end; /* On garde l'alignement bas, mais on stabilise les hauteurs */
    gap: 12px;
    padding-bottom: 5px; /* Évite que l'ombre du bouton ne soit tronquée */
    margin: 1rem auto;
}

    .filter-bar .form-group[b-tslwvk9od7] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

/* 📈 Grille des cartes KPI */
.kpi-grid[b-tslwvk9od7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.kpi-card[b-tslwvk9od7] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
}

.kpi-title[b-tslwvk9od7] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-value[b-tslwvk9od7] {
    font-size: 2rem;
    font-weight: 700;
    margin: 8px 0;
    color: #0f172a;
}

.kpi-sub[b-tslwvk9od7] {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Variations de couleur pour les KPIs — fond légèrement teinté (demande utilisateur), même
   principe que .pricing-card (dégradé vers blanc, accent visible mais toujours lisible). */
.kpi-card.emis[b-tslwvk9od7] {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(180deg, color-mix(in srgb, #3b82f6 12%, white) 0%, white 70%);
}

.kpi-card.encaisse[b-tslwvk9od7] {
    border-left: 4px solid #10b981;
    background: linear-gradient(180deg, color-mix(in srgb, #10b981 12%, white) 0%, white 70%);
}

.kpi-card.attente[b-tslwvk9od7] {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(180deg, color-mix(in srgb, #f59e0b 12%, white) 0%, white 70%);
}

.text-success[b-tslwvk9od7] {
    color: #10b981 !important;
}

.text-warning[b-tslwvk9od7] {
    color: #f59e0b !important;
}

/* 📑 Section et Tableaux */
.dashboard-section[b-tslwvk9od7] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
}

    .dashboard-section h3[b-tslwvk9od7] {
        margin-top: 0;
        margin-bottom: 16px;
        color: #1e293b;
        font-size: 1.2rem;
    }

.table-custom[b-tslwvk9od7] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

    .table-custom th[b-tslwvk9od7] {
        background-color: #f8fafc;
        color: #475569;
        padding: 12px 16px;
        font-weight: 600;
        font-size: 0.875rem;
        border-bottom: 2px solid #e2e8f0;
    }

    .table-custom td[b-tslwvk9od7] {
        padding: 14px 16px;
        border-bottom: 1px solid #edf2f7;
        color: #334155;
        font-size: 0.95rem;
    }

    .table-custom tbody tr:hover[b-tslwvk9od7] {
        background-color: #f8fafc;
    }



/* _content/EspaceClient/Modules/ReportingManager/Components/Widgets/InvoiceLedgerTable.razor.rz.scp.css */

/* Colonne Actions : menu déroulant compact ("⋯") regroupant les actions contextuelles (Éditer/
   Supprimer, Encaisser, Traduire en facture, Générer un avoir, Voir) — cf. InvoiceLedgerTable.razor.
   Même pattern que TableClient.razor.css (custom-dropdown-menu/dropdown-item), dupliqué ici car les
   styles Blazor sont scopés par composant (CSS isolation), pas partagés entre .razor.css. */
.actions-cell[b-3lithldsri] {
    position: relative;
}

.btn-actions-trigger[b-3lithldsri] {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
}

    .btn-actions-trigger:hover[b-3lithldsri] {
        color: #0f3057;
        background-color: #f1f5f9;
    }

.custom-dropdown-menu[b-3lithldsri] {
    position: absolute;
    right: 0.5rem;
    top: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    z-index: 100;
    min-width: 210px;
    padding: 0.4rem 0;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    text-align: left;
}

.dropdown-item[b-3lithldsri] {
    padding: 0.5rem 1rem;
    color: #334155;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: normal;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
}

    .dropdown-item:hover[b-3lithldsri] {
        background-color: #f1f5f9;
        color: #0f172a;
    }

    .dropdown-item:disabled[b-3lithldsri] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.dropdown-item.item-danger[b-3lithldsri] {
    color: #dc2626;
}

    .dropdown-item.item-danger:hover[b-3lithldsri] {
        background-color: #fef2f2;
        color: #b91c1c;
    }

/* Padding horizontal porté par le conteneur plutôt que par .ledger-header (ex-classe utilitaire
   .marginLR2, 2rem) : la barre d'outils ET le tableau/la pagination partagent maintenant le même
   inset, alignés sur les mêmes marges au lieu de la barre décalée par rapport au tableau. */
.ledger-container[b-3lithldsri] {
    width: 100%;
    padding: 0 2rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
}

.ledger-header[b-3lithldsri] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

    /*.ledger-header h1 {
        font-size: 1.4rem;
        margin: 0;
        font-weight: 600;
    }*/

.ledger-heading[b-3lithldsri] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    .ledger-heading h1[b-3lithldsri] {
        font-size: 1.5rem;
        margin: 0;
        font-weight: 700;
        color: #0f3057;
        letter-spacing: -0.01em;
    }

.ledger-subtitle[b-3lithldsri] {
    font-size: 0.85rem;
    color: #6c7a8c;
}

.ledger-header-left[b-3lithldsri] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.ledger-header-right[b-3lithldsri] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Bouton "Créer" en vert — pas de variante "succès" dans la taxonomie officielle de
   button-v1.0.0.css (Primaire/Secondaire/Outline/Ghost/Danger/Retour) : réutilise directement les
   tokens --color-success déjà définis (Settings-v1.0.0.css) via le même mécanisme de variables CSS
   consommées par le socle .btn commun — pas de nouvelle classe globale ajoutée à la charte. */
.btn-success[b-3lithldsri] {
    --btn-bg: var(--color-success);
    --btn-bg-hover: var(--color-success-hover);
    --btn-bg-active: color-mix(in srgb, var(--color-success) 80%, black);
    --btn-color: #fff;
    --btn-shadow: 0 4px 10px var(--color-success-shadow, rgb(65 205 1 / 30%));
}

/* Menu "⋯" de la barre d'outils (Filtrer/Exporter) — même trigger (.btn-actions-trigger) et même
   carte (.custom-dropdown-menu) que le menu Actions du tableau, mais son propre panneau : il
   contient des champs de formulaire, pas une simple liste d'actions. */
.toolbar-menu-wrapper[b-3lithldsri] {
    position: relative;
}

.toolbar-dropdown-panel[b-3lithldsri] {
    padding: 0.75rem;
    min-width: 220px;
}

.toolbar-dropdown-section-label[b-3lithldsri] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}

.toolbar-dropdown-filters[b-3lithldsri] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.toolbar-dropdown-field[b-3lithldsri] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: #475569;
}

    .toolbar-dropdown-field input[type="date"][b-3lithldsri] {
        padding: 0.35rem 0.5rem;
        border: 1px solid #d0d7de;
        border-radius: 4px;
        font-size: 0.85rem;
    }

.dropdown-divider[b-3lithldsri] {
    height: 1px;
    background-color: #e2e8f0;
    margin: 0.5rem 0;
}

/* Conteneur pour le scroll horizontal si l'écran est trop petit */
.table-wrapper[b-3lithldsri] {
    width: 100%;
    /* 🐛 overflow-x:auto retiré : la règle CSS overflow-x/-y couplée forçait overflow-y à "auto"
       sur ce même élément, ce qui clippait le menu déroulant "..." des dernières lignes dès qu'il
       dépassait le bas du tableau — même bug déjà résolu sur TableClient.razor.css
       (.table-wrapper), même remède : le menu s'affiche sans être rogné, un éventuel dépassement
       horizontal reste géré au niveau de la page. */
    overflow: visible;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgb(15 48 87 / 6%);
}

/* Style Tableur Excel */
.excel-table[b-3lithldsri] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    white-space: nowrap;
}

    /* Entête Bleu foncé calqué sur ton image */
    .excel-table th[b-3lithldsri] {
        background-color: #0f3057;
        color: #fff;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.8rem;
        padding: 6px 12px;
        border: 1px solid #1a365d;
        text-align: center;
    }

    /* Densité : padding vertical réduit (8px -> 3px) pour afficher plus de lignes par écran, sans
       toucher au padding horizontal (lisibilité des colonnes texte inchangée). Les cellules
       composites (facturation-cell/montant-cell/envoi-cell) gèrent leur propre espacement interne
       via gap, donc restent bien alignées malgré l'empilement. */
    .excel-table td[b-3lithldsri] {
        padding: 3px 12px;
        border: 1px solid #d0d7de;
    }

    /* Lignes alternées grises */
    .excel-table tbody tr:nth-child(even)[b-3lithldsri] {
        background-color: #f8f9fa;
    }

    .excel-table tbody tr:hover[b-3lithldsri] {
        background-color: #f1f4f9;
    }

/* Ligne spécifique si en attente (fond légèrement orangé/jaune très subtil si tu veux, ou neutre) */
.row-pending[b-3lithldsri] {
    background-color: #fffdf5;
}

/* Alignements et Typographies */
.text-center[b-3lithldsri] {
    text-align: center;
}

.text-right[b-3lithldsri] {
    text-align: right;
}

.font-bold[b-3lithldsri] {
    font-weight: bold;
}

.font-mono[b-3lithldsri] {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.text-muted[b-3lithldsri] {
    color: #6c757d;
}

/* Cellules composites empilées (Date facturation+Nature / Montant TTC+HT / Date d'envoi+badge) —
   même motif flex-column que la colonne Statut, pour rester compact malgré le padding vertical
   réduit de .excel-table td. */
.facturation-cell[b-3lithldsri] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.25;
}

.facturation-nature[b-3lithldsri] {
    font-size: 0.72rem;
}

.montant-cell[b-3lithldsri] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    line-height: 1.25;
}

.montant-ht[b-3lithldsri] {
    font-size: 0.72rem;
}

.envoi-cell[b-3lithldsri] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.25;
}

/* --- Pagination --- */
.pagination-bar[b-3lithldsri] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.25rem;
    font-size: 0.85rem;
    color: #475569;
}

.pagination-info[b-3lithldsri] {
    white-space: nowrap;
}

.pagination-controls[b-3lithldsri] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.pagination-page-size[b-3lithldsri] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.5rem;
    white-space: nowrap;
}

    .pagination-page-size select[b-3lithldsri] {
        padding: 0.2rem 0.4rem;
        border: 1px solid #d0d7de;
        border-radius: 4px;
        font-size: 0.85rem;
    }

.btn-pagination[b-3lithldsri] {
    min-width: 2rem;
    padding: 0.3rem 0.6rem;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    color: #334155;
    font-size: 0.85rem;
    cursor: pointer;
}

    .btn-pagination:hover:not(:disabled)[b-3lithldsri] {
        background-color: #f1f5f9;
        border-color: #94a3b8;
    }

    .btn-pagination.active[b-3lithldsri] {
        background-color: #0f3057;
        border-color: #0f3057;
        color: #fff;
        font-weight: 600;
    }

    .btn-pagination:disabled[b-3lithldsri] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Badges d'envoi */
.badge[b-3lithldsri] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: bold;
}

.badge-blue[b-3lithldsri] {
    background-color: #e7f1ff;
    color: #0c63e4;
}

.badge-green[b-3lithldsri] {
    background-color: #e6f4ea;
    color: #137333;
}

.badge-gray[b-3lithldsri] {
    color: #ccc;
}

/* États de paiement */
.status-waiting[b-3lithldsri] {
    color: #b06000;
    background-color: #fff3cd;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
}

.status-done[b-3lithldsri] {
    color: #137333;
    background-color: #e6f4ea;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
}
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Pages/OnboardingAssistant.razor.rz.scp.css */
/* ============================================================================
   Vocabulaire visuel "onboarding plein écran" — même bloc que les autres pôles (cf.
   OnboardingFacturationAssistant.razor.css pour la doctrine de duplication). Utilisé uniquement
   pour l'écran de clôture (_allConfigured) — le reste du temps cette page n'affiche qu'un <Loader>.
   ============================================================================ */
.onboarding-installer[b-8tuy2d9och] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 60% at 50% -10%, #2c2170 0%, transparent 60%),
                linear-gradient(160deg, #171233 0%, #100c29 55%, #0a0720 100%);
}

.onboarding-installer-watermark[b-8tuy2d9och] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 130vh;
    max-width: none;
    opacity: 0.07;
    filter: brightness(0) invert(1);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.onboarding-installer-scroll[b-8tuy2d9och] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    box-sizing: border-box;
}

.onboarding-installer-content[b-8tuy2d9och] {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: rgb(255 255 255 / 92%);
}

.onboarding-installer-step-title[b-8tuy2d9och] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
}

.onboarding-installer-step-subtitle[b-8tuy2d9och] {
    font-size: 1.1rem;
    color: rgb(255 255 255 / 65%);
    text-align: center;
}

.onboarding-fade-in[b-8tuy2d9och] {
    animation: onboardingFadeIn-b-8tuy2d9och 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes onboardingFadeIn-b-8tuy2d9och {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Pages/OnboardingClientAssistant.razor.rz.scp.css */
/* ============================================================================
   Vocabulaire visuel "onboarding plein écran" — même bloc que les autres pôles (cf.
   OnboardingFacturationAssistant.razor.css pour la doctrine de duplication).
   ============================================================================ */
.onboarding-installer[b-3ws22qbiga] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 60% at 50% -10%, #2c2170 0%, transparent 60%),
                linear-gradient(160deg, #171233 0%, #100c29 55%, #0a0720 100%);
}

.onboarding-installer-watermark[b-3ws22qbiga] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 130vh;
    max-width: none;
    opacity: 0.07;
    filter: brightness(0) invert(1);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.onboarding-installer-scroll[b-3ws22qbiga] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16vh 1.5rem 2rem;
    overflow-y: auto;
    box-sizing: border-box;
}

.onboarding-installer-content[b-3ws22qbiga] {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Pas de `gap` — même doctrine que les autres pôles : l'espacement vient des margin-bottom
       explicites (titre/sous-titre ci-dessous), jamais cumulé avec un gap de conteneur. */
    color: rgb(255 255 255 / 92%);
}

.onboarding-installer-content .btn-outline[b-3ws22qbiga] {
    background: transparent;
    color: rgb(255 255 255 / 85%);
    border: 1px solid rgb(255 255 255 / 35%);
}

    .onboarding-installer-content .btn-outline:hover[b-3ws22qbiga] {
        background: rgb(255 255 255 / 8%);
    }

.onboarding-installer-step-title[b-3ws22qbiga] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0 0 0.5rem;
}

.onboarding-installer-step-subtitle[b-3ws22qbiga] {
    font-size: 1rem;
    color: rgb(255 255 255 / 65%);
    text-align: center;
    margin: 0 0 1.5rem;
}

.onboarding-wizard-actions[b-3ws22qbiga] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Pages/OnboardingCloseAssistant.razor.rz.scp.css */
/* Bouton discret, ancré en haut à droite de l'écran quel que soit le pôle hôte — position:fixed
   plutôt que relatif au conteneur d'appel, pour ne dépendre d'aucune particularité de mise en page
   d'un pôle en particulier. */
.onboarding-close-btn[b-j5gqsbagsc] {
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    z-index: 2100;
    background: transparent;
    border: none;
    color: rgb(255 255 255 / 55%);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease;
}

    .onboarding-close-btn:hover[b-j5gqsbagsc] {
        color: #ffffff;
        background: rgb(255 255 255 / 10%);
    }

/* Écran de clôture — recouvre tout (watermark, contenu du pôle hôte compris), z-index au-dessus
   de .onboarding-installer (2000) des pôles. */
.onboarding-close-overlay[b-j5gqsbagsc] {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: radial-gradient(ellipse 90% 60% at 50% -10%, #2c2170 0%, transparent 60%),
                linear-gradient(160deg, #171233 0%, #100c29 55%, #0a0720 100%);
}

.onboarding-close-title[b-j5gqsbagsc] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
}

.onboarding-close-subtitle[b-j5gqsbagsc] {
    font-size: 1rem;
    color: rgb(255 255 255 / 65%);
    text-align: center;
    margin: 0;
}

.onboarding-close-fade-in[b-j5gqsbagsc] {
    animation: onboardingCloseFadeIn-b-j5gqsbagsc 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes onboardingCloseFadeIn-b-j5gqsbagsc {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Pages/OnboardingFacturationAssistant.razor.rz.scp.css */
/* ============================================================================
   Vocabulaire visuel "onboarding plein écran" — copié depuis IdentityConfigPanel.razor.css
   (lignes 370-656 au moment de l'écriture), même doctrine que les 8 autres pages qui dupliquent
   déjà ce même bloc (SuccessSubscribeSaaS.razor.css, SaaSPlanForfait.razor.css, etc.) : CSS scopée
   Blazor, jamais partagée entre composants, pour ne jamais coupler l'évolution de cette page à
   celle d'IdentityConfigPanel (ou inversement).
   ============================================================================ */
.onboarding-installer[b-ksd7yyyiz4] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 60% at 50% -10%, #2c2170 0%, transparent 60%),
                linear-gradient(160deg, #171233 0%, #100c29 55%, #0a0720 100%);
}

.onboarding-installer-watermark[b-ksd7yyyiz4] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 130vh;
    max-width: none;
    opacity: 0.07;
    filter: brightness(0) invert(1);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.onboarding-installer-scroll[b-ksd7yyyiz4] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16vh 1.5rem 2rem;
    overflow-y: auto;
    box-sizing: border-box;
}

.onboarding-installer-content[b-ksd7yyyiz4] {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 🎯 Pas de `gap` ici : l'espacement entre blocs est porté explicitement par chaque bloc
       (margin-bottom sur .onboarding-wizard-question/-field ci-dessous, 1.5rem) plutôt que par un
       gap uniforme sur le conteneur — un gap aurait ajouté sa propre marge EN PLUS de celles des
       blocs, la rendant incohérente/imprévisible selon ce qui suit (question, champ, hint, actions). */
    color: rgb(255 255 255 / 92%);
}

.onboarding-installer-content .btn-outline[b-ksd7yyyiz4] {
    background: transparent;
    color: rgb(255 255 255 / 85%);
    border: 1px solid rgb(255 255 255 / 35%);
}

    .onboarding-installer-content .btn-outline:hover[b-ksd7yyyiz4] {
        background: rgb(255 255 255 / 8%);
    }

.onboarding-installer-steps[b-ksd7yyyiz4] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.onboarding-installer-dot[b-ksd7yyyiz4] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(255 255 255 / 25%);
    transition: background 0.2s ease, transform 0.2s ease;
}

.onboarding-installer-dot--active[b-ksd7yyyiz4] {
    background: #ffffff;
    transform: scale(1.2);
}

.onboarding-installer-step-title[b-ksd7yyyiz4] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0 0 0.5rem;
}

.onboarding-installer-step-subtitle[b-ksd7yyyiz4] {
    font-size: 1rem;
    color: rgb(255 255 255 / 65%);
    text-align: center;
    margin: 0 0 1.5rem;
}

.onboarding-fade-in[b-ksd7yyyiz4] {
    animation: onboardingFadeIn-b-ksd7yyyiz4 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes onboardingFadeIn-b-ksd7yyyiz4 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ============================================================================
   Éléments propres au wizard (questions Oui/Non, champs, actions) — pas de précédent
   exact dans IdentityConfigPanel (formulaire classique, pas de chips), nouveau ici.
   ============================================================================ */
.onboarding-wizard-question[b-ksd7yyyiz4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Label + chips volontairement proches (l'œil doit les relier naturellement) — l'espacement
       avec la question/le champ SUIVANT vient de margin-bottom, pas de ce gap interne. */
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

.onboarding-wizard-question-label[b-ksd7yyyiz4] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}

.onboarding-wizard-chips[b-ksd7yyyiz4] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

    .onboarding-wizard-chips .btn[b-ksd7yyyiz4] {
        min-width: 96px;
    }

.onboarding-wizard-field[b-ksd7yyyiz4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Label + input volontairement proches (0.4rem, l'œil doit les relier naturellement) —
       l'espacement avec le bloc SUIVANT (question ou bouton de validation) vient de ce
       margin-bottom (1.5rem), même schéma que .onboarding-wizard-question ci-dessus. */
    gap: 0.4rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

    .onboarding-wizard-field label[b-ksd7yyyiz4] {
        font-size: 0.9rem;
        color: rgb(255 255 255 / 75%);
        text-align: center;
    }

    /* Champs raisonnablement étroits et centrés plutôt qu'étirés sur toute la largeur du contenu
       (640px) — demande utilisateur : les distinguer visuellement des blocs question/texte. */
    .onboarding-wizard-field .form-control[b-ksd7yyyiz4],
    .onboarding-wizard-field input[b-ksd7yyyiz4],
    .onboarding-wizard-field .preview-box[b-ksd7yyyiz4] {
        max-width: 360px;
        width: 100%;
        text-align: center;
    }

.onboarding-wizard-actions[b-ksd7yyyiz4] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    /* Pas de margin-top : le bloc question/champ juste au-dessus porte déjà 1.5rem de
       margin-bottom, cf. commentaire sur .onboarding-wizard-question/-field. */
}

.onboarding-wizard-hint[b-ksd7yyyiz4] {
    font-size: 0.85rem;
    color: #ffb4b4;
    text-align: center;
    /* Rattaché visuellement à son champ (à l'intérieur du même .onboarding-wizard-field, cf.
       .razor) : pas de marge propre, hérite du margin-bottom du bloc englobant. */
}

/* 🎯 .preview-box/.preview-code existent déjà (EnterpriseFacturationPanel.razor.css et consorts)
   mais en CSS scopée Blazor — invisibles depuis ce composant. Réédités ici avec la même doctrine
   de duplication que le reste de ce fichier, adaptés au fond sombre de l'assistant (l'original est
   pensé pour un fond clair). */
.preview-box[b-ksd7yyyiz4] {
    background: rgb(255 255 255 / 8%);
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 6px;
    color: rgb(255 255 255 / 92%);
    padding: 10px 14px;
    font-size: 0.875rem;
    text-align: center;
}

.preview-code[b-ksd7yyyiz4] {
    background: rgb(255 255 255 / 12%);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgb(255 255 255 / 25%);
    font-weight: bold;
    color: #ffffff;
}
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Pages/OnboardingFacturationElectroniqueAssistant.razor.rz.scp.css */
/* ============================================================================
   Vocabulaire visuel "onboarding plein écran" — même bloc que OnboardingFacturationAssistant.razor.css
   (copié depuis IdentityConfigPanel.razor.css, lignes 370-656 au moment de l'écriture), même
   doctrine que les 8+ autres pages qui dupliquent déjà ce même bloc : CSS scopée Blazor, jamais
   partagée entre composants, pour ne jamais coupler l'évolution de cette page à celle des autres.
   ============================================================================ */
.onboarding-installer[b-sy2vvj0137] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 60% at 50% -10%, #2c2170 0%, transparent 60%),
                linear-gradient(160deg, #171233 0%, #100c29 55%, #0a0720 100%);
}

.onboarding-installer-watermark[b-sy2vvj0137] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 130vh;
    max-width: none;
    opacity: 0.07;
    filter: brightness(0) invert(1);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.onboarding-installer-scroll[b-sy2vvj0137] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16vh 1.5rem 2rem;
    overflow-y: auto;
    box-sizing: border-box;
}

.onboarding-installer-content[b-sy2vvj0137] {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 🎯 Pas de `gap` ici : l'espacement entre blocs est porté explicitement par chaque bloc
       (margin-bottom sur .onboarding-wizard-question/-field ci-dessous, 1.5rem) — même doctrine
       que OnboardingFacturationAssistant.razor.css. */
    color: rgb(255 255 255 / 92%);
}

.onboarding-installer-content .btn-outline[b-sy2vvj0137] {
    background: transparent;
    color: rgb(255 255 255 / 85%);
    border: 1px solid rgb(255 255 255 / 35%);
}

    .onboarding-installer-content .btn-outline:hover[b-sy2vvj0137] {
        background: rgb(255 255 255 / 8%);
    }

.onboarding-installer-step-title[b-sy2vvj0137] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0 0 0.5rem;
}

.onboarding-installer-step-subtitle[b-sy2vvj0137] {
    font-size: 1rem;
    color: rgb(255 255 255 / 65%);
    text-align: center;
    margin: 0 0 1.5rem;
}

.onboarding-fade-in[b-sy2vvj0137] {
    animation: onboardingFadeIn-b-sy2vvj0137 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes onboardingFadeIn-b-sy2vvj0137 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ============================================================================
   Éléments propres au wizard (questions Oui/Non, champs, actions) — même vocabulaire que
   OnboardingFacturationAssistant.razor.css.
   ============================================================================ */
.onboarding-wizard-question[b-sy2vvj0137] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Label + chips volontairement proches (l'œil doit les relier naturellement) — l'espacement
       avec le bloc SUIVANT vient de margin-bottom, pas de ce gap interne. */
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

.onboarding-wizard-question-label[b-sy2vvj0137] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}

.onboarding-wizard-chips[b-sy2vvj0137] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

    .onboarding-wizard-chips .btn[b-sy2vvj0137] {
        min-width: 96px;
    }

.onboarding-wizard-field[b-sy2vvj0137] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

    .onboarding-wizard-field label[b-sy2vvj0137] {
        font-size: 0.9rem;
        color: rgb(255 255 255 / 75%);
        text-align: center;
    }

    .onboarding-wizard-field .form-control[b-sy2vvj0137],
    .onboarding-wizard-field input[b-sy2vvj0137] {
        max-width: 360px;
        width: 100%;
        text-align: center;
    }

.onboarding-wizard-actions[b-sy2vvj0137] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.onboarding-wizard-hint[b-sy2vvj0137] {
    font-size: 0.85rem;
    color: #ffb4b4;
    text-align: center;
}
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Pages/OnboardingPaiementEnLigneAssistant.razor.rz.scp.css */
/* ============================================================================
   Vocabulaire visuel "onboarding plein écran" — même bloc que les autres pôles (cf.
   OnboardingFacturationAssistant.razor.css pour la doctrine de duplication et le schéma
   d'espacement : label+input proches, margin-bottom 1.5rem entre chaque bloc question/champ).
   ============================================================================ */
.onboarding-installer[b-luugw9k402] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 60% at 50% -10%, #2c2170 0%, transparent 60%),
                linear-gradient(160deg, #171233 0%, #100c29 55%, #0a0720 100%);
}

.onboarding-installer-watermark[b-luugw9k402] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 130vh;
    max-width: none;
    opacity: 0.07;
    filter: brightness(0) invert(1);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.onboarding-installer-scroll[b-luugw9k402] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16vh 1.5rem 2rem;
    overflow-y: auto;
    box-sizing: border-box;
}

.onboarding-installer-content[b-luugw9k402] {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(255 255 255 / 92%);
}

.onboarding-installer-content .btn-outline[b-luugw9k402] {
    background: transparent;
    color: rgb(255 255 255 / 85%);
    border: 1px solid rgb(255 255 255 / 35%);
}

    .onboarding-installer-content .btn-outline:hover[b-luugw9k402] {
        background: rgb(255 255 255 / 8%);
    }

.onboarding-installer-step-title[b-luugw9k402] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0 0 0.5rem;
}

.onboarding-installer-step-subtitle[b-luugw9k402] {
    font-size: 1rem;
    color: rgb(255 255 255 / 65%);
    text-align: center;
    margin: 0 0 1.5rem;
}

.onboarding-fade-in[b-luugw9k402] {
    animation: onboardingFadeIn-b-luugw9k402 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes onboardingFadeIn-b-luugw9k402 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.onboarding-wizard-question[b-luugw9k402] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

.onboarding-wizard-question-label[b-luugw9k402] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}

.onboarding-wizard-chips[b-luugw9k402] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

    .onboarding-wizard-chips .btn[b-luugw9k402] {
        min-width: 96px;
    }

.onboarding-wizard-field[b-luugw9k402] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

    .onboarding-wizard-field label[b-luugw9k402] {
        font-size: 0.9rem;
        color: rgb(255 255 255 / 75%);
        text-align: center;
    }

    .onboarding-wizard-field .form-control[b-luugw9k402],
    .onboarding-wizard-field input[b-luugw9k402] {
        max-width: 360px;
        width: 100%;
        text-align: center;
    }

.onboarding-wizard-actions[b-luugw9k402] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.onboarding-wizard-hint[b-luugw9k402] {
    font-size: 0.85rem;
    color: #ffb4b4;
    text-align: center;
}
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Pages/OnboardingPersonnalisationAssistant.razor.rz.scp.css */
/* ============================================================================
   Vocabulaire visuel "onboarding plein écran" — même bloc que les autres pôles (cf.
   OnboardingFacturationAssistant.razor.css pour la doctrine de duplication et le schéma
   d'espacement : label+input proches, margin-bottom 1.5rem entre chaque bloc question/champ).
   ============================================================================ */
.onboarding-installer[b-7hvn0lowlr] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 60% at 50% -10%, #2c2170 0%, transparent 60%),
                linear-gradient(160deg, #171233 0%, #100c29 55%, #0a0720 100%);
}

.onboarding-installer-watermark[b-7hvn0lowlr] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 130vh;
    max-width: none;
    opacity: 0.07;
    filter: brightness(0) invert(1);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.onboarding-installer-scroll[b-7hvn0lowlr] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16vh 1.5rem 2rem;
    overflow-y: auto;
    box-sizing: border-box;
}

.onboarding-installer-content[b-7hvn0lowlr] {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(255 255 255 / 92%);
}

.onboarding-installer-content .btn-outline[b-7hvn0lowlr] {
    background: transparent;
    color: rgb(255 255 255 / 85%);
    border: 1px solid rgb(255 255 255 / 35%);
}

    .onboarding-installer-content .btn-outline:hover[b-7hvn0lowlr] {
        background: rgb(255 255 255 / 8%);
    }

.onboarding-installer-step-title[b-7hvn0lowlr] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0 0 0.5rem;
}

.onboarding-installer-step-subtitle[b-7hvn0lowlr] {
    font-size: 1rem;
    color: rgb(255 255 255 / 65%);
    text-align: center;
    margin: 0 0 1.5rem;
}

.onboarding-fade-in[b-7hvn0lowlr] {
    animation: onboardingFadeIn-b-7hvn0lowlr 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes onboardingFadeIn-b-7hvn0lowlr {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.onboarding-wizard-question[b-7hvn0lowlr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

.onboarding-wizard-question-label[b-7hvn0lowlr] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}

.onboarding-wizard-chips[b-7hvn0lowlr] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

    .onboarding-wizard-chips .btn[b-7hvn0lowlr] {
        min-width: 96px;
    }

.onboarding-wizard-field[b-7hvn0lowlr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

    .onboarding-wizard-field label[b-7hvn0lowlr] {
        font-size: 0.9rem;
        color: rgb(255 255 255 / 75%);
        text-align: center;
    }

    .onboarding-wizard-field .form-control[b-7hvn0lowlr],
    .onboarding-wizard-field input[b-7hvn0lowlr] {
        max-width: 360px;
        width: 100%;
        text-align: center;
    }

.onboarding-wizard-actions[b-7hvn0lowlr] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.onboarding-wizard-hint[b-7hvn0lowlr] {
    font-size: 0.85rem;
    color: #ffb4b4;
    text-align: center;
}
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Pages/OnboardingTwoFactorAssistant.razor.rz.scp.css */
/* ============================================================================
   Vocabulaire visuel "onboarding plein écran" — même bloc que les autres pôles (cf.
   OnboardingFacturationAssistant.razor.css pour la doctrine de duplication).
   ============================================================================ */
.onboarding-installer[b-u2m31mvjhl] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 60% at 50% -10%, #2c2170 0%, transparent 60%),
                linear-gradient(160deg, #171233 0%, #100c29 55%, #0a0720 100%);
}

.onboarding-installer-watermark[b-u2m31mvjhl] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 130vh;
    max-width: none;
    opacity: 0.07;
    filter: brightness(0) invert(1);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.onboarding-installer-scroll[b-u2m31mvjhl] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16vh 1.5rem 2rem;
    overflow-y: auto;
    box-sizing: border-box;
}

.onboarding-installer-content[b-u2m31mvjhl] {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Pas de `gap` — même doctrine que les autres pôles : l'espacement vient des margin-bottom
       explicites (titre/sous-titre/carte ci-dessous), jamais cumulé avec un gap de conteneur. */
    color: rgb(255 255 255 / 92%);
}

.onboarding-installer-step-title[b-u2m31mvjhl] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0 0 0.5rem;
}

.onboarding-installer-step-subtitle[b-u2m31mvjhl] {
    font-size: 1rem;
    color: rgb(255 255 255 / 65%);
    text-align: center;
    margin: 0 0 1.5rem;
}

.onboarding-wizard-actions[b-u2m31mvjhl] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.onboarding-fade-in[b-u2m31mvjhl] {
    animation: onboardingFadeIn-b-u2m31mvjhl 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes onboardingFadeIn-b-u2m31mvjhl {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Composant existant (TwoFactorSettings) conservé dans son propre habillage clair — flotte en
   carte blanche sur le fond sombre de l'assistant, plutôt que de réécrire son thème. */
.onboarding-wizard-embedded-card[b-u2m31mvjhl] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
}
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Pages/SaaSPlanForfait.razor.rz.scp.css */
/* =========================================================================
   /subscription/saasplans — mêmes cartes "pricing" que /catalogue/plans (fond sombre, halo
   coloré), mutualisées dans wwwroot/assets/css/pricing-cards-dark.css (chargée via
   <SectionContent SectionName="ModuleResources"> dans SaaSPlanForfait.razor). Ce fichier ne
   contient plus que ce qui est propre à CETTE page : toggle de récurrence, bandeaux de remise,
   note de proratisation, liens légaux — tous restylés pour le fond sombre.
   ========================================================================= */

/* 🐛 Même bug que /catalogue/plans (cf. TableForfait.razor.css, section "Pied de page légal") :
   .pricing-page-bg (pricing-cards-dark.css, partagé) impose min-height:100vh sur
   .background-main-content — redondant avec .main-container qui porte DÉJÀ min-height:100vh un
   niveau au-dessus. Résultat : la page dépassait un plein viewport, laissant un vide sous le bloc
   de liens légaux (.pricing-legal-footer, margin-top:auto) et un scroll vertical inutile — plus
   visible depuis que "Pourquoi choisir EntOS ?" a été retiré (contenu plus court). flex-grow:1
   (déjà porté par .background-main-content, cf. responsive-v1.0.0.css) suffit seul à occuper
   l'espace restant ; correctif scopé à cette page (CSS isolation Blazor) pour ne pas toucher
   /catalogue/plans, qui porte déjà son propre override identique. */
.pricing-page-bg[b-sjm6rgdcqu] {
    min-height: 0;
}

/* 🎯 ?fromOnboarding=1 (cf. .razor.cs) : même fondu + léger décalage vertical que l'onboarding
   plein écran (.onboarding-fade-in, IdentityConfigPanel.razor.css) — dupliqué ici plutôt que
   partagé, la CSS isolation Blazor scope chaque .razor.css à son seul composant. */
.onboarding-fade-in[b-sjm6rgdcqu] {
    animation: onboardingFadeIn-b-sjm6rgdcqu 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes onboardingFadeIn-b-sjm6rgdcqu {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 🛡️ Filet de sécurité pour le même symptôme (scroll vertical résiduel malgré un contenu qui tient
   entièrement dans le viewport), constaté encore après le correctif ci-dessus. Le suspect principal
   est le filigrane décoratif (.pricing-page-watermark ci-dessous) : position:absolute + height:120vh
   + centrage vertical, pensé pour déborder volontairement de son cadre (overflow-x:hidden sur body
   couvre le débordement horizontal, jamais le vertical) — un élément purement décoratif ne doit
   jamais pouvoir agrandir la zone scrollable de la page. .main-container (racine de la page, écrite
   directement dans SaaSPlanForfait.razor, jamais un composant enfant) est le bon niveau pour clore
   ce débordement : le contenu réel (Taskbar, cartes, footer) reste dimensionné normalement en flux
   (min-height/flex-grow ne sont pas affectés par overflow), seul un élément qui s'évade de son cadre
   via position:absolute/transform est concerné. */
.main-container[b-sjm6rgdcqu] {
    overflow-y: clip;
}

/* Filigrane logo EntOS en fond de page — grand format, très peu opaque, purement décoratif.
   LogoPathBlack recolorée en blanc par filtre CSS (même technique que .welcome-card .logo-entreprise
   sur /decouvrir-entos) : c'est la seule variante à fond transparent disponible, et un logo noir
   serait invisible sur ce fond sombre. pointer-events:none pour ne jamais intercepter de clic sur
   le contenu (il est posé AVANT .container-col dans le markup, donc en dessous dans l'ordre du DOM
   — mais reste tout de même à exclure des interactions par prudence). */
.pricing-page-watermark[b-sjm6rgdcqu] {
    position: absolute;
    top: 50%;
    left: 0;
    /* 🐛 Centré (left:50% + translateX(-50%)) il se retrouvait pile derrière la colonne de contenu
       elle-même centrée : totalement invisible. Ancré à gauche + grande marge + hauteur imposante
       (120vh, donc plus large que haut vu le ratio du logo — il déborde volontairement du cadre,
       cf. overflow-x:hidden sur body dans pricing-cards-dark.css) pour qu'il dépasse VISIBLEMENT du
       bloc de contenu plutôt que de se cacher pile dessous. */
    margin-left: 10rem;
    transform: translateY(-50%);
    width: auto;
    height: 120vh;
    max-width: none;
    opacity: 0.09;
    filter: brightness(0) invert(1);
    pointer-events: none;
    user-select: none;
    /* 🐛 z-index négatif OBLIGATOIRE : un élément position:absolute avec z-index:0/auto se peint
       AU-DESSUS du contenu normal non positionné (.container-col ci-dessous), quel que soit son
       ordre dans le DOM — l'inverse de l'effet "filigrane en fond" recherché. -1 le renvoie derrière,
       dans le contexte d'empilement de .pricing-page-bg (position:relative, cf. pricing-cards-dark.css). */
    z-index: -1;
}

/* "Se connecter" — coin haut-droit de la ligne de titre (position:relative posée en inline sur
   cette ligne, cf. .razor), même esprit que .catalogue-search-toggle sur TableForfait.razor.css
   mais en texte simple : pas d'icône dédiée nécessaire pour un lien aussi discret. */
.pricing-login-link[b-sjm6rgdcqu] {
    position: absolute;
    top: 0.5rem;
    right: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #c9b8ff;
    text-decoration: underline;
}

    .pricing-login-link:hover[b-sjm6rgdcqu] {
        color: #fff;
    }

/* "Pourquoi choisir EntOS ?" — ouvre WhyEntosModal (contenu partagé avec /decouvrir-entos). */
.pricing-why-entos-link[b-sjm6rgdcqu] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #b3aed6;
    text-decoration: underline;
}

    .pricing-why-entos-link:hover[b-sjm6rgdcqu] {
        color: #fff;
    }

/* 🎯 Toggle de récurrence — switch entre les groupes (Category, RecurrenceSaaSType) filtrés
   côté C# (FilteredGroupedForfaits). Grand format, très visible, placé en haut de page. */
.recurrence-toggle[b-sjm6rgdcqu] {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.4rem;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 999px;
    backdrop-filter: blur(10px);
}

.recurrence-toggle-option[b-sjm6rgdcqu] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.65rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #c9b8ff;
    border-radius: 999px;
    transition: all 0.25s ease;
    white-space: nowrap;
}

    .recurrence-toggle-option:hover[b-sjm6rgdcqu] {
        background: rgb(255 255 255 / 10%);
        color: #fff;
    }

    .recurrence-toggle-option.active[b-sjm6rgdcqu] {
        background: linear-gradient(90deg, #7c5cf6, #a78bfa);
        color: #fff;
        box-shadow: 0 6px 14px rgb(124 92 246 / 45%);
    }

/* Bandeau d'offre mutualisé (au-dessus de la grille, cf. AllDisplayedPlansShareSameDiscount) et
   bandeau par carte (cf. IsDiscountActive) — même dégradé "offre limitée" chaud, cohérent avec
   les halos verts/bleus/oranges/violets des cartes sans s'y confondre. */
.header-discount-banner[b-sjm6rgdcqu] {
    background: linear-gradient(90deg, #fb923c, #f43f5e);
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    max-width: 900px;
    box-shadow: 0 8px 24px rgb(244 63 94 / 35%);
}

.pricing-card-discount-banner[b-sjm6rgdcqu] {
    background: linear-gradient(90deg, #fb923c, #f43f5e);
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

/* Prix catalogue barré au-dessus du prix remisé — même ligne que .pricing-card-price mais en
   plus petit, comme le "avant/après" du mockup référence. */
.pricing-card-price-strike[b-sjm6rgdcqu] {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: line-through;
    color: #9a94bd;
}

/* =========================================================================
   CTA "Souscrire" (grille ET fiche détail) = une seule couleur de marque (--color-primary/
   --color-text-button/--color-primary-hover, Settings-v1.0.0.css) au lieu des 4 couleurs d'accent
   tournantes de la carte (--accent/--accent-2, pricing-cards-dark.css). Cette page vit sur le
   domaine racine EntOS (pas de tenant, <TenantThemeStyle> ne s'y applique jamais — cf. son garde
   MasterTenantId) : --color-primary y reste la couleur de marque PAR DÉFAUT d'EntOS, exactement ce
   qu'il faut ici. Même correctif que /catalogue/plans, avec le même piège corrigé : .pricing-card-
   cta/.product-detail-cta sont rendus par <NavLink>, un COMPOSANT ENFANT (framework, autre
   assembly) — l'isolation CSS Blazor n'ajoute JAMAIS son attribut de scope aux éléments qu'un
   composant enfant rend lui-même (vérifié en live : l'élément réel ne porte que
   class="pricing-card-cta", aucun attribut b-xxxxx). Un sélecteur scopé ordinaire ne matchait donc
   RIEN, !important ou pas. ::deep (ancré sur .main-container, div ordinaire écrite directement dans
   ce .razor) traverse la frontière du composant NavLink pour atteindre le <a> qu'il génère.
   ========================================================================= */
.main-container[b-sjm6rgdcqu]  .pricing-card-cta,
.main-container[b-sjm6rgdcqu]  .product-detail-cta {
    background: var(--color-primary, #22546f) !important;
    color: var(--color-text-button, #fff) !important;
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--color-primary, #22546f) 60%, transparent) !important;
}

    .main-container[b-sjm6rgdcqu]  .pricing-card-cta:hover,
    .main-container[b-sjm6rgdcqu]  .product-detail-cta:hover {
        filter: none;
        background: var(--color-primary-hover, #2ebaf9) !important;
        color: var(--color-text-button, #fff) !important;
    }

.main-container[b-sjm6rgdcqu]  .pricing-card-cta-owned {
    border-color: color-mix(in srgb, var(--color-primary, #22546f) 70%, transparent) !important;
}

    .main-container[b-sjm6rgdcqu]  .pricing-card-cta-owned:hover {
        background: color-mix(in srgb, var(--color-primary, #22546f) 12%, transparent) !important;
    }

/* Fiche détail : tous les éléments (titre, prix, description, "Ce qui est inclus"...) justifiés à
   gauche — même correctif scopé que TableForfait.razor.css. */
.product-detail-info[b-sjm6rgdcqu] {
    text-align: left;
}

/* Lien discret "Déjà abonné ?" sous le CTA + accordéon animé — même styles que
   TableForfait.razor.css (copiés, CSS isolation Blazor : pas de feuille partagée entre les deux
   .razor.css scopés, cf. l'en-tête de ce fichier). */
.product-detail-note-toggle[b-sjm6rgdcqu] {
    display: inline-block;
    width: fit-content;
    margin: -1rem 0 0.75rem;
    padding: 0;
    background: none;
    border: none;
    color: #b9a6ff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

    .product-detail-note-toggle:hover[b-sjm6rgdcqu] {
        color: #fff;
    }

.product-detail-note-accordion[b-sjm6rgdcqu] {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin-bottom 0.3s ease;
}

.product-detail-note-accordion.product-detail-note-open[b-sjm6rgdcqu] {
    max-height: 220px;
    opacity: 1;
    margin-bottom: 1.5rem;
}

.product-detail-note-content[b-sjm6rgdcqu] {
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 14%);
    color: #d8d4f0;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Pastille compacte "Membre fondateur" à côté du prix (fiche détail) — remplace l'ancien bandeau
   pleine largeur (⚡ Offre... Plus que X places... jusqu'au DATE), déplacé en tooltip (title). Même
   dégradé chaud que .header-discount-banner/.pricing-card-discount-banner, format pilule compacte. */
.product-detail-founding-badge[b-sjm6rgdcqu] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.6rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #fb923c, #f43f5e);
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

/* Note TVA + liens légaux du footer (Mentions légales, Politique de confidentialité, CGV) —
   remplace le bleu marine #00008B codé en dur (illisible sur fond sombre) par les mêmes teintes
   lavande claire que /catalogue/plans (cf. TableForfait.razor.css .cgv-*). */
.pricing-legal-text[b-sjm6rgdcqu] {
    color: #b3aed6;
}

.pricing-legal-link[b-sjm6rgdcqu] {
    color: #c9b8ff;
    cursor: pointer;
}

    .pricing-legal-link:hover[b-sjm6rgdcqu] {
        color: #fff;
    }
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Pages/SuccessSubscribeSaaS.razor.rz.scp.css */
/* 🎯 Apparition douce des phrases de la page "success" (paiement SaaS) — même doctrine que
   Platform/.../IdentityConfigPanel.razor.css .onboarding-fade-in (installation) : durée longue +
   easing "easeOutExpo"-like avec léger glissement vertical, pas un simple opacity 0→1 abrupt. CSS
   scoped Blazor non partageable entre composants : dupliquée ici (déjà fait pour la même classe
   dans SaaSPlanForfait.razor.css) plutôt qu'inventer une nouvelle courbe. @key posé sur chaque
   élément côté .razor pour forcer Blazor à recréer le nœud DOM (donc rejouer l'animation) à chaque
   bascule Pending/Success, plutôt qu'un simple patch du texte qui ne la rejouerait jamais. */
.onboarding-fade-in[b-sp88a10thy] {
    animation: onboardingFadeIn-b-sp88a10thy 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Léger effet de cascade entre les lignes qui apparaissent ensemble, plutôt qu'un fondu simultané
   — animation-fill-mode: backwards garde le texte invisible pendant le délai (sinon il apparaîtrait
   en clair avant de rejouer son propre fondu). */
.onboarding-fade-in.onboarding-fade-in-delay-1[b-sp88a10thy] {
    animation-delay: 0.12s;
    animation-fill-mode: backwards;
}

.onboarding-fade-in.onboarding-fade-in-delay-2[b-sp88a10thy] {
    animation-delay: 0.24s;
    animation-fill-mode: backwards;
}

@keyframes onboardingFadeIn-b-sp88a10thy {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Widgets/CheckConfigSaaS.razor.rz.scp.css */
/* 🎨 Habillage "todo list" de la checklist — la fait ressortir du reste de la carte
   (box-shadow-primary, qui n'a elle-même aucun fond) plutôt que de rester un simple
   empilement de lignes nues. */

/* Conteneur : fond légèrement teinté + contour discret, pour que la liste se détache
   visuellement de la carte englobante. */
.checklist-list[b-huhlzzp1yq] {
    background: color-mix(in srgb, var(--color-primary) 4%, white);
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, white);
    border-radius: var(--radius-medium);
    padding: 0.5rem 0.6rem;
}

/* Chaque point devient sa propre petite carte (façon todo item) : fond blanc, coins
   arrondis, ombre légère, barre de couleur à gauche selon le statut (vert = fait, ambre =
   à faire — cf. sélecteurs :has(img[alt=...]) ci-dessous, aucun changement de markup
   nécessaire). Espacement resserré par rapport à l'ancien 0.7rem. */
.checklist-row[b-huhlzzp1yq] {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    text-align: left;
    padding: 0.45rem 0.6rem;
    background: white;
    border-radius: var(--radius-min);
    border-left: 3px solid transparent;
    box-shadow: var(--shadow-card-light);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.checklist-row:hover[b-huhlzzp1yq] {
    transform: translateX(3px);
    box-shadow: var(--shadow-card-hover);
}

/* 🎯 Un point coché disparaît désormais entièrement de la liste (cf. CheckConfigSaaS.razor.cs,
   son gain % est absorbé par la barre de progression de MonEntreprise) — seules les lignes "non
   configuré" (croix rouge) restent affichées ici, donc le seul statut visuel encore possible. */
.checklist-row:has(img[alt="non configuré"])[b-huhlzzp1yq] {
    border-left-color: var(--color-warning);
}

/* Ligne affichée quand la checklist ne contient plus aucun point à traiter (tout est vert, donc
   absorbé par la barre de %) — évite une carte vide, sans statut ni bouton "Configurer". */
.checklist-row--complete[b-huhlzzp1yq] {
    justify-content: center;
    border-left-color: var(--color-success);
    color: var(--color-success);
    font-weight: 600;
}

/* 🎯 Ex-Dashboard.razor fournissait text-align:left via un ancêtre (sa propre carte englobante) —
   perdu en déplaçant ce widget dans Admin.razor (aucun ancêtre équivalent côté onglet "dashboard").
   Fixé ici, scopé à ce composant (jamais un .box-shadow-primary ailleurs dans l'app). Fond blanc
   explicite (sinon transparent — le fond par défaut n'apporte qu'une ombre) : fait ressortir la
   teinte de .checklist-list ci-dessus par contraste. */
.box-shadow-primary[b-huhlzzp1yq] {
    text-align: left;
    background: white;
}
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Widgets/SaaSPlanCatalogPreview.razor.rz.scp.css */
/* Panneau contenu (PAS .pricing-page-bg, qui impose min-height:100vh — pensée pour une page
   entière, pas un encart) : même dégradé sombre que les pages catalogue, mais borné à son contenu,
   coins arrondis, pour s'intégrer dans une carte Dashboard existante plutôt que de la remplacer. */
.saas-preview-panel[b-2gr6sfa0af] {
    background: radial-gradient(ellipse 90% 60% at 50% -10%, #2c2170 0%, transparent 60%),
                linear-gradient(160deg, #171233 0%, #100c29 55%, #0a0720 100%);
    border-radius: 16px;
    padding: 1.5rem 1rem;
}

/* Cartes plus compactes qu'en pleine page catalogue (pas de description longue de features ici,
   juste nom + prix + résumé) — gap réduit, largeur mini plus petite pour en montrer davantage
   d'un coup d'œil dans un simple encart. */
.saas-preview-grid[b-2gr6sfa0af] {
    padding: 0;
    gap: 1.25rem;
}

.saas-preview-card[b-2gr6sfa0af] {
    flex-basis: 220px;
    max-width: 260px;
}

    .saas-preview-card .pricing-card-header[b-2gr6sfa0af] {
        padding: 1.5rem 1.25rem 0.5rem;
    }

    .saas-preview-card .pricing-card-body[b-2gr6sfa0af] {
        padding: 0 1.25rem 1.25rem;
    }

.saas-preview-link[b-2gr6sfa0af] {
    color: #c9b8ff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: underline;
}

    .saas-preview-link:hover[b-2gr6sfa0af] {
        color: #fff;
    }
/* _content/EspaceClient/Modules/SaaSPlanManager/Components/Widgets/SubscriptionSummarySaaS.razor.rz.scp.css */
/* 🎯 Reprend le design pattern des cartes de présentation des forfaits SaaS
   (wwwroot/assets/css/pricing-cards-dark.css, .pricing-card et consorts) — demande utilisateur.
   🐛 Les CARTES restent teintées (fond coloré par accent, pas un fond blanc plat) — seul le
   CONTENEUR autour d'elles ne doit pas être sombre (retour utilisateur) : l'original est pensé
   pour reposer sur le dégradé sombre de body{} (pricing-cards-dark.css, jamais chargé ici), d'où un
   dégradé accent→transparent + texte blanc illisibles une fois posés sur la page claire de l'admin.
   Ici, le dégradé va vers du BLANC (pas transparent) : la teinte reste visible et pleinement
   opaque, sans dépendre d'un fond sombre derrière — texte sombre en conséquence. Classes dupliquées
   (CSS isolation Blazor, même doctrine que .onboarding-fade-in ailleurs dans ce repo). */
.pricing-card[b-ihoqdymoev] {
    --accent: #4ade80;
    --accent-2: #22c55e;

    position: relative;
    flex: 1 1 320px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, white) 0%,
                color-mix(in srgb, var(--accent) 10%, white) 45%,
                white 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-left: 4px solid var(--accent-2);
    border-radius: 20px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
                0 12px 28px -14px color-mix(in srgb, var(--accent) 40%, transparent),
                0 2px 8px rgb(0 0 0 / 8%);
    overflow: hidden;
}

.pricing-card-accent-1[b-ihoqdymoev] {
    --accent: #38bdf8;
    --accent-2: #0ea5e9;
}

.pricing-card-accent-3[b-ihoqdymoev] {
    --accent: #c084fc;
    --accent-2: #a855f7;
}

.pricing-card-header[b-ihoqdymoev] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.pricing-card-category[b-ihoqdymoev] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
}

.pricing-card-title[b-ihoqdymoev] {
    margin: 0.15rem 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #202124;
    text-align: left;
}

.pricing-card-body[b-ihoqdymoev] {
    flex-grow: 1;
    padding: 1rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pricing-card-description[b-ihoqdymoev] {
    color: #5f6368;
    font-size: 0.95rem;
}

.pricing-card-features[b-ihoqdymoev] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .pricing-card-features li[b-ihoqdymoev] {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: #3c4043;
    }

.pricing-card-check[b-ihoqdymoev] {
    color: var(--accent-2);
    font-weight: 700;
    flex-shrink: 0;
}

.pricing-card-footer[b-ihoqdymoev] {
    padding: 0 1.5rem 1.5rem;
}

.pricing-card-cta[b-ihoqdymoev] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 15%);
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent);
    transition: filter 0.2s ease, transform 0.2s ease;
}

    .pricing-card-cta:hover[b-ihoqdymoev] {
        filter: brightness(1.1);
        transform: translateY(-1px);
        color: #fff;
    }
/* _content/EspaceClient/Modules/StorageManager/Components/StorageConfigureCors.razor.rz.scp.css */
/* On réutilise la même base que le VPS Monitor */
.vps-card[b-y1ss973zej] {
    background: #1e1e1e;
    color: #e0e0e0;
    border-radius: 8px;
    border: 1px solid #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    max-width: 350px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.header[b-y1ss973zej] {
    background: #252526;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

.title[b-y1ss973zej] {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-indicator[b-y1ss973zej] {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
}

.dot[b-y1ss973zej] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
}

/* On allume le point vert si l'opération est un succès récent */
.live .dot[b-y1ss973zej] {
    background: #4caf50;
    box-shadow: 0 0 8px #4caf50;
}

.content[b-y1ss973zej] {
    padding: 16px;
}

.metric-group[b-y1ss973zej] {
    margin-bottom: 20px;
}

.label-row[b-y1ss973zej] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.description[b-y1ss973zej] {
    font-size: 0.8rem;
    color: #bbb;
    line-height: 1.4;
    margin: 0;
}

.action-row[b-y1ss973zej] {
    display: flex;
    justify-content: center;
}

/* Style du bouton personnalisé */
.action-button[b-y1ss973zej] {
    background: #333;
    color: white;
    border: 1px solid #444;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

    .action-button:hover:not(:disabled)[b-y1ss973zej] {
        background: #444;
        border-color: #555;
    }

    .action-button:active:not(:disabled)[b-y1ss973zej] {
        background: #222;
    }

    .action-button:disabled[b-y1ss973zej] {
        opacity: 0.5;
    }

/* Filtre pour rendre l'icône SVG blanche */
.icon-white[b-y1ss973zej] {
    filter: brightness(0) invert(1);
}

/* Mini spinner si nécessaire */
.spinner[b-y1ss973zej] {
    width: 16px;
    height: 16px;
    border: 2px solid rgb(255 255 255 / 30%);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin-b-y1ss973zej 1s ease-in-out infinite;
}

@keyframes spin-b-y1ss973zej {
    to {
        transform: rotate(360deg);
    }
}
/* _content/EspaceClient/Modules/SubscriptionManager/Components/Pages/Admin/AddForfait.razor.rz.scp.css */
/* Bouton de suppression de l'image en overlay, coin haut-droit de la miniature (cf. .image-preview-box) */
.image-preview-remove[b-i3qq0i52f3] {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
}

/* ============================================================================
   Grille des 3 colonnes du formulaire — même logique d'espacement que
   /admin/entreprise/identite (IdentityConfigPanel : cartes à largeur fixe,
   gap constant, rangée centrée) plutôt que le width:22% + margin:auto d'origine
   de .container-form-add qui, réparti sur seulement 3 cartes, distribuait tout
   l'espace restant dans les marges auto et créait de grands vides.
   ============================================================================ */
.container-wrap[b-i3qq0i52f3] {
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
}

.container-form-add[b-i3qq0i52f3] {
    width: 400px;
    max-width: 100%;
    margin: 0;
}

/* ============================================================================
   Icône d'aide contextuelle — remplace les anciens blocs de texte affichés en
   permanence sous chaque champ. Un seul clic ouvre la modale d'information
   globale avec le texte correspondant (cf. AddForfait.razor.cs, ShowHelp).
   ============================================================================ */
.info-icon-btn[b-i3qq0i52f3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
}

    .info-icon-btn img[b-i3qq0i52f3] {
        width: 16px;
        height: 16px;
        opacity: 0.6;
        transition: opacity 0.15s ease;
    }

    .info-icon-btn:hover img[b-i3qq0i52f3] {
        opacity: 1;
    }

/* Dans un champ à label flottant, le label (cf. .floating-label) ne prend que la
   largeur de son texte à gauche : le coin haut-droit du champ reste libre pour
   y ancrer l'icône d'aide, au même niveau que le label. */
.form-group-floating > .info-icon-btn[b-i3qq0i52f3] {
    position: absolute;
    top: 0;
    right: 12px;
    z-index: 2;
}
/* _content/EspaceClient/Modules/SubscriptionManager/Components/Pages/Admin/PannelViewerAdmin.razor.rz.scp.css */


/* AFFICHAGE TABLEAU */
.custom-admin-table[b-6xbowcazg7] {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin-bottom: 2rem;
}

    .custom-admin-table thead th[b-6xbowcazg7] {
        background-color: #f8f9fa;
        color: #333;
        padding: 15px;
        text-align: left;
        border-bottom: 2px solid orange; /* Rappel de ton identité visuelle */
        white-space: nowrap; /* Empêche l'écrasement des titres */
        font-weight: 600;
    }

    .custom-admin-table tbody td[b-6xbowcazg7] {
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
    }

    /* Effet de survol pour mieux se repérer */
    .custom-admin-table tbody tr:hover[b-6xbowcazg7] {
        background-color: #fff9f0;
    }

.admin-input[b-6xbowcazg7] {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 10px;
    width: 100%;
}

/* Pour le responsive : scroll horizontal si trop de colonnes */
@media (width <= 1024px) {
    .container-row[b-6xbowcazg7] {
        overflow-x: auto;
    }
}

/***********  */


/* On s'assure que le tableau se comporte comme un tableau */
#admin-validation-table[b-6xbowcazg7] {
    display: table !important;
    width: 95% !important;
    margin: 20px auto;
}

    /* Force l'alignement des titres (thead) et des cellules (tbody) */

    /* Colonne 1 (Élève) & 2 (Séance) & 5 (Commentaire) -> A GAUCHE */
    #admin-validation-table th:nth-child(1)[b-6xbowcazg7], #admin-validation-table td:nth-child(1)[b-6xbowcazg7],
    #admin-validation-table th:nth-child(2)[b-6xbowcazg7], #admin-validation-table td:nth-child(2)[b-6xbowcazg7],
    #admin-validation-table th:nth-child(5)[b-6xbowcazg7], #admin-validation-table td:nth-child(5)[b-6xbowcazg7] {
        text-align: left !important;
        padding-left: 20px !important;
    }

    /* Colonne 3 (Date), 4 (Aperçu) & 6 (Actions) -> AU CENTRE */
    #admin-validation-table th:nth-child(3)[b-6xbowcazg7], #admin-validation-table td:nth-child(3)[b-6xbowcazg7],
    #admin-validation-table th:nth-child(4)[b-6xbowcazg7], #admin-validation-table td:nth-child(4)[b-6xbowcazg7],
    #admin-validation-table th:nth-child(6)[b-6xbowcazg7], #admin-validation-table td:nth-child(6)[b-6xbowcazg7] {
        text-align: center !important;
        align-content: center;
        align-items: center;
    }

        /* On force aussi l'alignement du contenu Flexbox dans les cellules centrées */
        #admin-validation-table td:nth-child(6) .container-row[b-6xbowcazg7] {
            justify-content: center !important;
            width: 100%;
        }

    /* Empêche les titres de se mettre sur deux lignes */
    #admin-validation-table th[b-6xbowcazg7] {
        white-space: nowrap !important;
    }

/* gestion MODAL */

/* Fond noir transparent */
.modal-overlay[b-6xbowcazg7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 80%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Conteneur de la modale */
.modal-container[b-6xbowcazg7] {
    background: white;
    padding: 20px;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90%;
    position: relative;
    box-shadow: 0 10px 30px rgb(0 0 0 / 50%);
}

.modal-header[b-6xbowcazg7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.modal-body img[b-6xbowcazg7] {
    max-width: 100%;
    max-height: 70vh; /* Évite que l'image dépasse de l'écran */
    display: block;
    margin: 0 auto;
    border-radius: 4px;
}

/* _content/EspaceClient/Modules/SubscriptionManager/Components/Pages/Success.razor.rz.scp.css */
/* 🎯 Apparition douce des phrases de la page "success" (paiement) — même doctrine que
   Platform/.../IdentityConfigPanel.razor.css .onboarding-fade-in (installation) : durée longue +
   easing "easeOutExpo"-like avec léger glissement vertical, pas un simple opacity 0→1 abrupt. CSS
   scoped Blazor non partageable entre composants : dupliquée ici plutôt qu'inventer une nouvelle
   courbe. @key posé sur chaque élément côté .razor pour forcer Blazor à recréer le nœud DOM (donc
   rejouer l'animation) à chaque bascule Pending/Success, plutôt qu'un simple patch du texte qui ne
   la rejouerait jamais. */
.onboarding-fade-in[b-ak16ifvql5] {
    animation: onboardingFadeIn-b-ak16ifvql5 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Léger effet de cascade entre les lignes qui apparaissent ensemble, plutôt qu'un fondu simultané
   — animation-fill-mode: backwards garde le texte invisible pendant le délai (sinon il apparaîtrait
   en clair avant de rejouer son propre fondu). */
.onboarding-fade-in.onboarding-fade-in-delay-1[b-ak16ifvql5] {
    animation-delay: 0.12s;
    animation-fill-mode: backwards;
}

.onboarding-fade-in.onboarding-fade-in-delay-2[b-ak16ifvql5] {
    animation-delay: 0.24s;
    animation-fill-mode: backwards;
}

@keyframes onboardingFadeIn-b-ak16ifvql5 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/EspaceClient/Modules/SubscriptionManager/Components/Pages/TableForfait.razor.rz.scp.css */
/* =========================================================================
   Catalogue (une seule vue, plus de picker/route par section — cf. TableForfait.razor.cs)
   Le design des cartes pricing (fond sombre, halo coloré) est mutualisé avec
   /subscription/saasplans dans wwwroot/assets/css/pricing-cards-dark.css (chargé via
   <SectionContent SectionName="ModuleResources"> ci-dessus dans le .razor) — seuls les éléments
   propres à CETTE page (recherche, chips de filtre par section, note légale CGV) restent ici.
   ========================================================================= */

/* =========================================================================
   CTA "Souscrire"/"Commander" (grille ET fiche détail) = la couleur DE MARQUE du tenant
   (--color-primary/--color-text-button/--color-primary-hover, posées sur :root par
   <TenantThemeStyle> dans MainLayout — cf. Settings-v1.0.0.css pour leurs valeurs par défaut),
   jamais l'une des 4 couleurs d'accent tournantes de la carte (--accent/--accent-2,
   pricing-cards-dark.css — pensées pour /subscription/saasplans, où EntOS vend SES PROPRES offres
   et où la variété visuelle a du sens ; ici c'est la boutique d'UN tenant, un seul CTA de marque).
   Scopé aux seuls boutons d'action principaux : le halo/badge/check de la carte et le bouton
   "Voir mon espace client"/"Voir mon compte" (état déjà possédé, .pricing-card-cta-owned) gardent
   --accent, hors périmètre de la demande.
   ========================================================================= */
/* 🐛 Cause réelle du "rien ne change" : .pricing-card-cta/.product-detail-cta sont rendus par
   <NavLink>, un COMPOSANT ENFANT (framework, autre assembly) — l'isolation CSS Blazor n'ajoute
   JAMAIS son attribut de scope aux éléments qu'un composant enfant rend lui-même (vérifié en live :
   l'élément réel ne porte que class="pricing-card-cta", aucun attribut b-xxxxx). Un sélecteur scopé
   ORDINAIRE ne matche donc RIEN ici, !important ou pas — la règle ne s'applique jamais, quelle que
   soit sa spécificité. ::deep est le combinateur prévu pour ce cas précis : ancré sur .main-container
   (div ORDINAIRE, écrit directement dans ce .razor, donc bien scopé) puis ::deep pour traverser la
   frontière du composant NavLink et atteindre le <a> qu'il génère. Toujours !important en plus (la
   classe globale .btn pose déjà background-color sur ce même élément). */
.main-container[b-komtreuwyn]  .pricing-card-cta,
.main-container[b-komtreuwyn]  .product-detail-cta {
    background: var(--color-primary, #22546f) !important;
    color: var(--color-text-button, #fff) !important;
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--color-primary, #22546f) 60%, transparent) !important;
}

    .main-container[b-komtreuwyn]  .pricing-card-cta:hover,
    .main-container[b-komtreuwyn]  .product-detail-cta:hover {
        filter: none;
        background: var(--color-primary-hover, #2ebaf9) !important;
        color: var(--color-text-button, #fff) !important;
    }

/* Bouton "Voir mon espace client"/"Voir mon compte" (état déjà possédé) — même logique de marque
   unique, pour que TOUS les boutons d'action de la fiche/carte restent cohérents entre eux. */
.main-container[b-komtreuwyn]  .pricing-card-cta-owned {
    border-color: color-mix(in srgb, var(--color-primary, #22546f) 70%, transparent) !important;
}

    .main-container[b-komtreuwyn]  .pricing-card-cta-owned:hover {
        background: color-mix(in srgb, var(--color-primary, #22546f) 12%, transparent) !important;
    }

/* =========================================================================
   Fiche détail produit — justification à gauche (titre, prix, description, features...) : le
   fond commun (.product-detail-info, pricing-cards-dark.css) ne fige pas explicitement
   text-align, on le fait ici, scopé à cette page (CSS isolation Blazor) pour ne pas toucher
   /subscription/saasplans/{id}, qui partage la même classe.
   ========================================================================= */
.product-detail-info[b-komtreuwyn] {
    text-align: left;
}

/* Lien discret "Déjà abonné ?" sous le CTA — remplace l'ancien bandeau pleine largeur sous la
   grille : jamais imposé à la lecture, ouvert à la demande via l'accordéon juste en dessous. */
.product-detail-note-toggle[b-komtreuwyn] {
    display: inline-block;
    width: fit-content;
    margin: -1rem 0 0.75rem;
    padding: 0;
    background: none;
    border: none;
    color: #b9a6ff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

    .product-detail-note-toggle:hover[b-komtreuwyn] {
        color: #fff;
    }

/* Accordéon animé (max-height/opacity — un display:none n'aurait rien à transitionner) : replié
   par défaut (0), .product-detail-note-open l'ouvre au clic sur le lien ci-dessus. */
.product-detail-note-accordion[b-komtreuwyn] {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin-bottom 0.3s ease;
}

.product-detail-note-accordion.product-detail-note-open[b-komtreuwyn] {
    max-height: 220px;
    opacity: 1;
    margin-bottom: 1.5rem;
}

.product-detail-note-content[b-komtreuwyn] {
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 14%);
    color: #d8d4f0;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Barre de filtrage/recherche, légère et intégrée juste sous la Taskbar (cf. TableForfait.razor) :
   pastilles de section à gauche, recherche toujours à droite, alignées dans la même bande plutôt
   qu'un flyout séparé posé au-dessus du titre (ancien design, cf. historique du fichier). */
/* 🐛 flex-wrap:nowrap + hauteur fixe : "wrap" laissait la barre passer sur 2 lignes dès que
   l'ouverture du champ de recherche ne tenait plus sur une seule ligne — la barre grandissait,
   poussant les pastilles et faisant "sursauter" la grille en dessous. Avec nowrap, c'est la ligne
   de pastilles elle-même qui défile horizontalement si besoin (cf. .catalogue-filter-bar-chips),
   jamais la hauteur de la barre. */
.catalogue-filter-bar[b-komtreuwyn] {
    width: 100%;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: 0 2rem;
    box-sizing: border-box;
    background: rgb(255 255 255 / 4%);
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

/* Chips de filtre par section — remplacent l'ancienne vue "picker" intermédiaire : le principe de
   section ne sert plus qu'à filtrer la grille en place (SetFamilyFilter), jamais à naviguer.
   overflow-x:auto (pas de wrap) : si elles ne tiennent pas sur une ligne, elles défilent
   horizontalement plutôt que de faire grandir la barre en hauteur. */
.catalogue-filter-bar-chips[b-komtreuwyn] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 0.3rem 0; /* évite que le focus-ring des chips soit rogné par overflow */
}

.catalogue-filter-chip[b-komtreuwyn] {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 16%);
    background: rgb(255 255 255 / 7%);
    color: #d8d3f0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .catalogue-filter-chip:hover[b-komtreuwyn] {
        background: rgb(255 255 255 / 14%);
        border-color: rgb(255 255 255 / 30%);
    }

.catalogue-filter-chip-active[b-komtreuwyn] {
    background: #6c5ce7;
    border-color: #6c5ce7;
    color: #fff;
}

    .catalogue-filter-chip-active:hover[b-komtreuwyn] {
        background: #5b4bd1;
        border-color: #5b4bd1;
    }

/* Recherche : toujours à droite de la barre, bouton + champ alignés côte à côte dans le flux
   normal (plus de flyout en position:absolute superposé au contenu — ancien design). */
.catalogue-filter-bar-search[b-komtreuwyn] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

.catalogue-search-toggle-inline[b-komtreuwyn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 16%);
    background: rgb(255 255 255 / 7%);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .catalogue-search-toggle-inline:hover[b-komtreuwyn] {
        background: rgb(255 255 255 / 14%);
        border-color: rgb(255 255 255 / 30%);
    }

    .catalogue-search-toggle-inline img[b-komtreuwyn] {
        filter: invert(1) brightness(1.6);
    }

/* 🐛 Toujours dans le DOM (cf. TableForfait.razor, plus de @if) et animé via width/opacity plutôt
   que monté/démonté brutalement — fermé par défaut (width:0), .catalogue-search-input-open l'ouvre.
   Placé AVANT le bouton dans l'ordre du flex (.catalogue-filter-bar-search) : la loupe reste fixe
   à droite, le champ s'anime et s'ouvre à sa gauche, sans jamais déplacer la loupe elle-même. */
.catalogue-search-input-inline[b-komtreuwyn] {
    width: 0;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.45rem 0;
    margin: 0;
    font-size: 0.9rem;
    color: #f5f3ff;
    background: rgb(255 255 255 / 6%);
    outline: none;
    opacity: 0;
    pointer-events: none;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.15s ease, border-color 0.2s ease;
}

.catalogue-search-input-inline.catalogue-search-input-open[b-komtreuwyn] {
    width: min(240px, 45vw);
    padding: 0.45rem 1rem;
    opacity: 1;
    pointer-events: auto;
    border-color: rgb(255 255 255 / 16%);
}

    .catalogue-search-input-inline[b-komtreuwyn]::placeholder {
        color: #9a94bd;
    }

    .catalogue-search-input-inline:focus[b-komtreuwyn] {
        border-color: rgb(255 255 255 / 32%);
    }

/* =========================================================================
   Pied de page légal (CGV) — toujours collé en bas de page (jamais "perdu" en milieu de page pour
   un contenu court), même comportement sur la grille ET la fiche détail d'un produit.
   ========================================================================= */

/* 🐛 .pricing-page-bg (wwwroot/assets/css/pricing-cards-dark.css, partagé avec /subscription/
   saasplans) impose min-height:100vh sur .background-main-content — redondant avec .main-container
   qui porte DÉJÀ min-height:100vh un niveau au-dessus (Taskbar + la barre de filtres, cf.
   .catalogue-filter-bar, sont dans ce même flex column). Résultat : la page dépassait un plein
   viewport de la hauteur cumulée Taskbar+barre, et .catalogue-legal-footer (margin-top:auto)
   n'était plus poussé au bas du VIEWPORT visible mais au bas de cette boîte surdimensionnée —
   perçu comme "perdu en milieu de page" pour un contenu court. flex-grow:1 (déjà porté par
   .background-main-content, cf. responsive-v1.0.0.css) suffit seul à occuper l'espace restant ;
   ce correctif est scopé à cette page (CSS isolation Blazor) pour ne pas toucher SaaSPlanForfait,
   qui partage la même classe globale sans porter cette barre supplémentaire. */
.pricing-page-bg[b-komtreuwyn] {
    min-height: 0;
}

/* 🐛 margin-top:auto (PAS une valeur fixe) : c'est ce qui colle réellement le footer en bas de
   .container-col (cf. TableForfait.razor, flex:1 1 auto) — .pricing-legal-footer, l'autre classe
   posée sur ce même élément, porte déjà cette règle (pricing-cards-dark.css), mais cette règle-ci
   étant scopée (isolation CSS Blazor ajoute un attribut, donc plus spécifique que la classe
   globale), une valeur fixe ici l'emporterait TOUJOURS silencieusement sur le margin-top:auto
   global, quel que soit l'ordre des classes dans le markup. */
.catalogue-legal-footer[b-komtreuwyn] {
    width: 100%;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(255 255 255 / 12%);
    color: #b3aed6;
}

/* 🐛 <CgvWidget> (Platform, partagé par tout le site) définit .cgv-tva-note dans un <style> global
   non isolé (#4a4a5e, gris pensé pour fond clair) — quasi invisible sur ce fond sombre. On ne
   touche PAS ce style global (utilisé sur d'autres pages en thème clair) : ::deep cible l'élément
   rendu par ce composant enfant, mais seulement à l'intérieur de .catalogue-legal-footer (élément
   scopé à CETTE page), donc sans effet ailleurs. */
.catalogue-legal-footer[b-komtreuwyn]  .cgv-tva-note {
    color: #cfc9ec;
}

.catalogue-legal-footer[b-komtreuwyn]  .cgv-link {
    color: #c9b8ff;
}

    .catalogue-legal-footer[b-komtreuwyn]  .cgv-link:hover {
        color: #fff;
    }
/* _content/EspaceClient/Modules/SubscriptionManager/Components/Widgets/Admin/EmettreFactureModal.razor.rz.scp.css */
/* Structure de modale — même pattern que ReglementFactureModal.razor.css (dupliqué ici, styles
   Blazor scopés par composant). */
.modal-overlay[b-f2ed89l3sz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgb(0 0 0 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* min-height/max-height explicitement réinitialisés : modal-v1.0.0.css (feuille globale, non
   scopée) pose min-height/max-height: 90vh sur .modal-container pour ses propres grandes modales
   — sans cet override, cette règle globale s'applique quand même ici (elle ne cible aucune
   propriété que ce bloc ne redéfinit pas déjà, la cascade CSS s'applique alors propriété par
   propriété) et forçait cette modale, pourtant courte, à occuper ~tout le viewport. */
.modal-container[b-f2ed89l3sz] {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 460px;
    min-height: auto;
    max-height: 90vh;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    display: flex;
    flex-direction: column;
}

.modal-header[b-f2ed89l3sz], .modal-footer[b-f2ed89l3sz] {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

    .modal-header h3[b-f2ed89l3sz] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        color: #0f3057;
    }

.modal-footer[b-f2ed89l3sz] {
    border-bottom: none;
    border-top: 1px solid #eee;
    justify-content: flex-end;
    gap: 8px;
}

.modal-body[b-f2ed89l3sz] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-close[b-f2ed89l3sz] {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: #6c7a8c;
    cursor: pointer;
}

    .btn-close:hover[b-f2ed89l3sz] {
        color: #0f3057;
    }

/* --- Récapitulatif client / abonnement / prix --- */
.emission-summary[b-f2ed89l3sz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background-color: #f8f9fb;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.emission-summary-row[b-f2ed89l3sz] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.emission-summary-label[b-f2ed89l3sz] {
    font-size: 0.8rem;
    color: #6c7a8c;
}

.emission-summary-value[b-f2ed89l3sz] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1c2733;
    text-align: right;
}

.emission-price[b-f2ed89l3sz] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: #0f3057;
    font-size: 1.1rem;
    font-weight: 700;
}

.emission-price-original[b-f2ed89l3sz] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: line-through;
}

/* --- Toggles / cases --- */
.emission-toggle-group[b-f2ed89l3sz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.emission-toggle-label[b-f2ed89l3sz] {
    font-size: 0.85rem;
    color: #334155;
}

.emission-email-hint[b-f2ed89l3sz] {
    font-size: 0.8rem;
    color: #6c7a8c;
}

.emission-email-missing[b-f2ed89l3sz] {
    color: #b06000;
}

/* --- Échéance --- */
.emission-echeance-group[b-f2ed89l3sz] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    .emission-echeance-group input[type="date"][b-f2ed89l3sz] {
        max-width: 180px;
    }
/* _content/EspaceClient/Modules/SubscriptionManager/Components/Widgets/Admin/Forfait.razor.rz.scp.css */
/* Grille de cartes catalogue admin — même pas de grille que le catalogue public
   (TableForfait.razor.css .catalogue-grid / .pricing-grid) pour une cohérence visuelle directe.
   Le style de la carte elle-même (.forfait-card et ses enfants) vit désormais dans
   ForfaitCard.razor.css : c'est ce composant enfant qui rend ce markup, et la CSS Isolation Blazor
   ne stampe l'attribut de scope que sur les éléments écrits dans le fichier propriétaire.
   ⚠️ Ne JAMAIS combiner ce conteneur avec la classe utilitaire .container-wrap (LibFusion-v1.0.0.css)
   : elle pose display:flex/flex-wrap en !important qui écrasait ce display:grid et laissait les
   cartes s'étirer en pleine largeur (pas de flex-basis sur .forfait-card). */
.forfait-cards-container[b-wnvhiy9ixu] {
    width: 100%;
    height: auto;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 0.5rem 0 1.5rem;
}

/* Filtre catalogue à 3 positions (Abonnements / Achats uniques / Forfaits techniques) — pill
   switch scoped à ce composant plutôt que le .segmented-control générique de divers.css (jamais
   utilisé ailleurs, gris neutre sans lien avec la charte --color-primary, et rendu à plat façon
   3 boutons collés faute de transition/ombre sur l'état actif). */
.catalogue-filtre[b-wnvhiy9ixu] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background-color: var(--color-white-break1, #f4f4f4);
    border: 1px solid var(--color-disabled, #ccc);
    border-radius: var(--radius-double, 3rem);
    padding: 4px;
}

.catalogue-filtre-item[b-wnvhiy9ixu] {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.5rem 1.15rem;
    border-radius: var(--radius-double, 3rem);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

    .catalogue-filtre-item:hover:not(.active)[b-wnvhiy9ixu] {
        background-color: rgb(255 255 255 / 65%);
    }

    .catalogue-filtre-item:focus-visible[b-wnvhiy9ixu] {
        outline: 2px solid var(--color-primary-hover, var(--color-primary));
        outline-offset: 2px;
    }

    .catalogue-filtre-item.active[b-wnvhiy9ixu] {
        background-color: var(--color-primary);
        color: var(--color-white);
        box-shadow: 0 2px 6px rgb(0 0 0 / 18%);
    }
/* _content/EspaceClient/Modules/SubscriptionManager/Components/Widgets/Admin/ForfaitCard.razor.rz.scp.css */
/* Style de la carte — déplacé depuis Forfait.razor.css : ce composant enfant (ForfaitCard.razor)
   rend lui-même le markup .forfait-card, or la CSS Isolation Blazor ne stampe l'attribut de scope
   (b-xxxxxxxx) que sur les éléments écrits directement dans LE FICHIER PROPRIÉTAIRE du .css — jamais
   sur ceux rendus par le template d'un composant enfant (pas de ::deep utilisé). Les règles restées
   dans Forfait.razor.css ne matchaient donc jamais le DOM réellement produit. Même langage visuel que
   .pricing-card côté public (TableForfait.razor.css) : ombre légère, coins arrondis, hauteur uniforme
   sur une ligne (flex column + justify-content:space-between). */
.forfait-card[b-om36dek8al] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    border: 2px solid var(--color-border-container-form, #e0e0e0);
    border-radius: var(--radius-input, 12px);
    box-shadow: 0 2px 8px rgb(20 20 43 / 6%);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    max-width: none;
}

    .forfait-card:hover[b-om36dek8al] {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgb(108 92 231 / 15%);
        border-color: #6c5ce7;
    }

.forfait-card-featured-badge[b-om36dek8al] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background: #6c5ce7;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.9rem;
    border-radius: 0 0 8px 8px;
    letter-spacing: 0.02em;
}

/* En-tête image ratio 16:9, cohérent avec .catalogue-card-image côté public */
.forfait-card-image[b-om36dek8al] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
    overflow: hidden;
}

    .forfait-card-image img[b-om36dek8al] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.forfait-card-image-placeholder[b-om36dek8al] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .forfait-card-image-placeholder img[b-om36dek8al] {
        opacity: 0.4;
    }

.forfait-card-edit-btn[b-om36dek8al] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    background: rgb(255 255 255 / 92%);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgb(20 20 43 / 15%);
    transition: background 0.15s ease;
}

    .forfait-card-edit-btn:hover[b-om36dek8al] {
        background: #fff;
    }

.card-body[b-om36dek8al] {
    flex-grow: 1;
    padding: 1.1rem 1.4rem 0.5rem;
}

.forfait-card-category[b-om36dek8al] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c5ce7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-title[b-om36dek8al] {
    margin: 0.3rem 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
}

.price-tag[b-om36dek8al] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.6rem;
}

.description-resume[b-om36dek8al] {
    color: #3a3a4e;
    font-size: 0.92rem;
    margin-bottom: 0.4rem;
}

.card-details[b-om36dek8al] {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #e5e5ee;
    color: #6c757d;
    font-size: 0.85rem;
}

.actions-bar[b-om36dek8al] {
    padding: 1rem 1.4rem 1.25rem;
}

.forfait-card-cta[b-om36dek8al] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: transparent;
    color: #6c5ce7;
    font-weight: 600;
    border: 1px solid #6c5ce7;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

    .forfait-card-cta:hover[b-om36dek8al] {
        background: #6c5ce7;
        color: #fff;
    }
/* _content/EspaceClient/Modules/SubscriptionManager/Components/Widgets/Admin/SubscriptionLedgerTable.razor.rz.scp.css */
/* Même design que l'onglet "Factures & Livre" (InvoiceLedgerTable.razor.css) et "Registre des
   achats" (RegistreAchats.razor.css) — dupliqué ici car les styles Blazor sont scopés par
   composant (CSS isolation), pas partagés entre .razor.css. */

.ledger-container[b-e19asbkw1y] {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1c2733;
}

.ledger-header[b-e19asbkw1y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ledger-header-left[b-e19asbkw1y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.ledger-header-right[b-e19asbkw1y] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ledger-heading[b-e19asbkw1y] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    .ledger-heading h1[b-e19asbkw1y] {
        font-size: 1.5rem;
        margin: 0;
        font-weight: 700;
        color: #0f3057;
        letter-spacing: -0.01em;
    }

.ledger-subtitle[b-e19asbkw1y] {
    font-size: 0.85rem;
    color: #6c7a8c;
}

.ledger-empty[b-e19asbkw1y] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #6c7a8c;
    background-color: #f8f9fb;
    border: 1px dashed #d7dee8;
    border-radius: 10px;
    font-size: 0.95rem;
}

/* --- Tableau --- */
.table-wrapper[b-e19asbkw1y] {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgb(15 48 87 / 6%);
}

.excel-table[b-e19asbkw1y] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
}

    .excel-table th[b-e19asbkw1y] {
        background-color: #0f3057;
        color: #fff;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.74rem;
        letter-spacing: 0.04em;
        padding: 12px 14px;
        text-align: center;
        white-space: nowrap;
    }

    .excel-table td[b-e19asbkw1y] {
        padding: 11px 14px;
        border-bottom: 1px solid #eef1f6;
        vertical-align: middle;
    }

    .excel-table tbody tr[b-e19asbkw1y] {
        transition: background-color 0.12s ease;
    }

        .excel-table tbody tr:nth-child(even)[b-e19asbkw1y] {
            background-color: #fafbfd;
        }

        .excel-table tbody tr:hover[b-e19asbkw1y] {
            background-color: #eef4fc;
        }

        .excel-table tbody tr:last-child td[b-e19asbkw1y] {
            border-bottom: none;
        }

.text-center[b-e19asbkw1y] {
    text-align: center;
}

/* Colonne Actions — 3 zones (grid 1fr/auto/1fr) : "Émettre la facture" reste centré dans la
   colonne quel que soit le nombre d'icônes affichées à côté, pendant que Modifier (pen) et
   Supprimer se regroupent tous deux justifiés à droite (Supprimer en dernier, donc le plus à
   droite). Un simple flex justify-content ne peut pas centrer le bouton central indépendamment
   du groupe d'icônes de droite — d'où la grille plutôt qu'un .container-row classique ici. */
.action-cell[b-e19asbkw1y] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
}

.action-cell-center[b-e19asbkw1y] {
    grid-column: 2;
    justify-self: center;
}

.action-cell-end[b-e19asbkw1y] {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
/* _content/EspaceClient/Modules/SubscriptionManager/Components/Widgets/PaymentMethodsCard.razor.rz.scp.css */
/* Boutons de choix du moyen de paiement (carte / SEPA) — même style, empilés verticalement (voir
   le container-col qui les enveloppe dans PaymentMethodsCard.razor). Alignés à gauche (icône +
   libellé) plutôt que centrés comme .btn par défaut, et de largeur homogène pour un empilement
   propre malgré des libellés de longueurs différentes. */
.payment-method-btn[b-wyffoduevt] {
    justify-content: flex-start;
    width: 100%;
    max-width: 320px;
}

    .payment-method-btn img[b-wyffoduevt] {
        flex-shrink: 0;
    }

/* "Remplacer..."/"Supprimer" un moyen déjà enregistré : lien discret plutôt qu'un CTA pleine
   largeur — les libellés plus longs ("Remplacer par un mandat SEPA") débordaient du gabarit
   .btn-primary standard. <button> natif conservé (garde le "disabled" natif, utile en lecture
   seule tenant admin) mais dépouillé de son chrome visuel — couleur/soulignement viennent des
   classes utilitaires globales (colorCTA/colorAlert/txt-deco-underline) posées dans le markup. */
.payment-method-link[b-wyffoduevt] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

    .payment-method-link:disabled[b-wyffoduevt] {
        cursor: not-allowed;
        opacity: 0.6;
    }

/* Icône poubelle recolorée en rouge via masque CSS — même technique que FactureLibre.razor.css
   (delete.svg est fourni en blanc plein, invisible tel quel sur un fond clair). */
.delete-icon-alert[b-wyffoduevt] {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: var(--color-error);
    -webkit-mask-image: url('/assets/images/ico-svg/delete.svg');
    mask-image: url('/assets/images/ico-svg/delete.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}