/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* ============================================================
   Back-office ROF — socle visuel sobre (maquette A)
   Une seule couleur d'accent : le bleu ROF.
   Le teal, l'ambre et le rouge ne servent qu'à signaler un état.
   ============================================================ */

/* ------------------------------------------------------------------
   JETONS DU BACK-OFFICE — des alias, et non des valeurs.

   Ces neuf jetons portaient leurs propres codes hexadécimaux, très proches
   de ceux du front-office sans jamais leur être égaux : #F4F6FA contre
   #F4F8FD pour le fond, #14202F contre #0B1A2E pour le texte, #B42318 contre
   #B81F38 pour le danger. Une seule paire coïncidait, la couleur d'accent.
   Assez peu pour passer pour un accident, assez pour que deux écrans côte à
   côte ne soient pas tout à fait de la même famille — et surtout, les
   garanties de contraste calculées en tête d'app.css ne valaient pas ici.

   Ils pointent désormais sur les jetons de la charte. Le back-office garde
   son vocabulaire propre — on continue d'écrire var(--admin-ink) — mais la
   valeur, elle, n'a plus qu'une seule source. Trois autres feuilles
   redéclaraient le même jeu sous les préfixes --c-, --d- et --ms- : elles
   sont alignées de la même façon.
   ------------------------------------------------------------------ */
.rof-admin[b-zy8s3oyi0j] {
    --admin-accent: var(--rof-blue-primary);
    --admin-accent-soft: var(--rof-blue-50);
    --admin-ground: var(--rof-bg-light);
    --admin-surface: var(--rof-card-bg);

    /* Deux filets, là où il n'y en avait qu'un.
       --admin-line servait indifféremment aux séparateurs (barres, cartes,
       tableaux) et au contour des COMPOSANTS (bouton de déconnexion, boutons
       d'action, champ de recherche). Or #E2E8F1 ne mesurait que 1,23:1 sur
       blanc : très en dessous des 3:1 qu'exige WCAG 1.4.11 pour la limite
       visible d'un élément d'interface. Sur une surface blanche, ce contour
       est le seul indice qui distingue un champ de saisie du fond.
       Le front-office avait déjà tranché en distinguant les deux rôles. */
    --admin-line: var(--rof-border);
    --admin-line-strong: var(--rof-border-strong);

    /* Trois niveaux de texte, et non deux.
       --admin-ink-2 (#5A6A7E) et --admin-ink-3 (#8494A6) étaient si proches
       que la hiérarchie secondaire/tertiaire n'existait pas vraiment, et le
       second tombait à 3,10:1 — sous le seuil de 4,5:1 exigé pour du texte,
       alors qu'il portait les plus petits libellés de l'interface. */
    --admin-ink: var(--rof-text-dark);
    --admin-ink-2: var(--rof-text-body);
    --admin-ink-3: var(--rof-text-muted);

    --admin-danger: var(--rof-danger);
    --admin-ok: var(--rof-ok);
    --admin-warn: var(--rof-warn);
    --admin-warn-bg: var(--rof-warn-light);

    /* ÉCHELLE TYPOGRAPHIQUE DU BACK-OFFICE — sept paliers, et non 24 valeurs.
       Les feuilles du back-office posaient 24 tailles distinctes écrites en dur,
       de .6rem à 1.7rem, sans jamais passer par un jeton : deux libellés de même
       niveau pouvaient différer de deux centièmes de rem sans raison. Huit de ces
       valeurs tombaient sous 12 px, plancher en deçà duquel un libellé cesse
       d'être confortablement lisible — .6rem valait 10,2 px.

       Le back-office reste plus dense que le front : c'est un outil de saisie,
       pas une page de lecture. Il garde donc son échelle propre, dont les paliers
       hauts rejoignent ceux de la charte (--fs-xs, --fs-md, --fs-lg, --fs-2xl)
       et dont le plus petit s'arrête à 12,75 px. */
    --admin-fs-xs: .75rem;      /* 12,75 px — pastilles, en-têtes de tableau  */
    --admin-fs-sm: .8125rem;    /* 13,8 px  — libellés, métadonnées          */
    --admin-fs-md: .875rem;     /* 14,9 px  — texte courant                  */
    --admin-fs-lg: 1rem;        /* 17 px    — sous-titres                    */
    --admin-fs-xl: 1.1875rem;   /* 20,2 px  — titres de page                 */
    --admin-fs-2xl: 1.5rem;     /* 25,5 px  — nombres mis en avant           */
    --admin-fs-3xl: 1.75rem;    /* 29,75 px — indicateur principal           */

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--admin-ground);
    color: var(--admin-ink);
}

/* ------------------------- barre supérieure ------------------------- */

.admin-topbar[b-zy8s3oyi0j] {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 56px;
    padding: 0 1rem;
    background: var(--admin-surface);
    border-bottom: 1px solid var(--admin-line);
}

.admin-brand[b-zy8s3oyi0j] {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 650;
    font-size: var(--admin-fs-md);
    letter-spacing: -.01em;
    color: var(--admin-ink);
    text-decoration: none;
}

.admin-brand:hover[b-zy8s3oyi0j] { color: var(--admin-accent); }

.admin-brand > i[b-zy8s3oyi0j] {
    font-size: var(--admin-fs-xl);
    color: var(--admin-accent);
}

.admin-brand small[b-zy8s3oyi0j] {
    display: block;
    font-weight: 400;
    /* .66rem donnait 11,2 px : sous le plancher de lisibilité de 12 px.
       La barre mesure 56 px de haut, la place ne manquait pas. */
    font-size: var(--admin-fs-xs);
    letter-spacing: .03em;
    color: var(--admin-ink-3);
}

.admin-topbar-right[b-zy8s3oyi0j] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .9rem;
}

.admin-who[b-zy8s3oyi0j] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: .9rem;
    border-left: 1px solid var(--admin-line);
}

.admin-who > i[b-zy8s3oyi0j] {
    font-size: var(--admin-fs-xl);
    color: var(--admin-ink-3);
}

.admin-who b[b-zy8s3oyi0j] {
    display: block;
    font-size: var(--admin-fs-sm);
    font-weight: 600;
    line-height: 1.2;
}

.admin-who .admin-role[b-zy8s3oyi0j] {
    font-style: normal;
    /* Même motif : .64rem valait 10,9 px, la plus petite taille du site. */
    font-size: var(--admin-fs-xs);
    letter-spacing: .04em;
    color: var(--admin-ink-3);
}

.admin-logout[b-zy8s3oyi0j] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--admin-fs-sm);
    font-weight: 500;
    color: var(--admin-ink-2);
    background: none;
    border: 1px solid var(--admin-line-strong);
    border-radius: 6px;
    padding: .3rem .6rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.admin-logout:hover[b-zy8s3oyi0j] {
    color: var(--admin-danger);
    border-color: var(--admin-danger);
}

.admin-logout:focus-visible[b-zy8s3oyi0j] {
    outline: 2px solid var(--admin-accent);
    outline-offset: 2px;
}

/* ------------------------- structure ------------------------- */

.admin-shell[b-zy8s3oyi0j] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

.admin-side[b-zy8s3oyi0j] {
    width: 214px;
    flex: none;
    background: var(--admin-surface);
    border-right: 1px solid var(--admin-line);
    padding: .8rem .65rem;
}

.admin-main[b-zy8s3oyi0j] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.15rem 1.25rem 2rem;
}

.admin-main-plain[b-zy8s3oyi0j] { padding: 1.5rem; }

/* ------------------------- groupes de navigation ------------------------- */

.admin-group[b-zy8s3oyi0j] { margin-bottom: .9rem; }

.admin-group-last[b-zy8s3oyi0j] {
    margin-top: .25rem;
    padding-top: .7rem;
    border-top: 1px solid var(--admin-line);
}

.admin-group-title[b-zy8s3oyi0j] {
    margin: 0 0 .3rem;
    padding: 0 .5rem;
    font-size: var(--admin-fs-xs);
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--admin-ink-3);
}

/* Les entrées de menu sont rendues par <NavLink>, un composant : le CSS isolé
   n'appose pas l'attribut de portée sur le <a> qu'il génère. On passe donc par
   ::deep depuis .admin-side, qui est bien un élément de ce composant.
   Sans cela, seul le lien « Voir le site public » (un <a> brut) serait stylé. */

.admin-side[b-zy8s3oyi0j]  .admin-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .5rem;
    border-radius: 6px;
    font-size: var(--admin-fs-sm);
    line-height: 1.35;
    color: var(--admin-ink-2);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.admin-side[b-zy8s3oyi0j]  .admin-link > i {
    font-size: var(--admin-fs-lg);
    color: var(--admin-ink-3);
    transition: color .15s ease;
}

.admin-side[b-zy8s3oyi0j]  .admin-link:hover {
    background: var(--admin-ground);
    color: var(--admin-ink);
}

.admin-side[b-zy8s3oyi0j]  .admin-link:hover > i { color: var(--admin-ink-2); }

.admin-side[b-zy8s3oyi0j]  .admin-link:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: -2px;
}

/* état actif : fond très pâle + filet d'accent à gauche */
.admin-side[b-zy8s3oyi0j]  .admin-link.active {
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    font-weight: 600;
}

.admin-side[b-zy8s3oyi0j]  .admin-link.active > i { color: var(--admin-accent); }

.admin-side[b-zy8s3oyi0j]  .admin-link.active::before {
    content: "";
    position: absolute;
    left: -.65rem;
    top: .25rem;
    bottom: .25rem;
    width: 2px;
    background: var(--admin-accent);
    border-radius: 0 2px 2px 0;
}

/* Pastille chiffrée — statique, pas d'animation infinie.
   Le rouge est ici une exception assumée à la règle « une seule couleur d'accent » :
   il ne qualifie pas une quantité mais un travail en souffrance, et il double
   volontairement la cloche et le tableau de bord pour que rien ne passe inaperçu. */
.admin-side[b-zy8s3oyi0j]  .admin-badge {
    margin-left: auto;
    flex: none;
    min-width: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--admin-danger);
    color: #FFFFFF;
    font-size: var(--admin-fs-xs);
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ------------------------- responsive ------------------------- */

@media (max-width: 991.98px) {
    .admin-shell[b-zy8s3oyi0j] { flex-direction: column; }

    .admin-side[b-zy8s3oyi0j] {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--admin-line);
        padding: .6rem .75rem;
        display: flex;
        gap: 1.1rem;
        overflow-x: auto;
    }

    .admin-group[b-zy8s3oyi0j] {
        margin-bottom: 0;
        flex: none;
    }

    .admin-group-last[b-zy8s3oyi0j] {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .admin-side[b-zy8s3oyi0j]  .admin-link { white-space: nowrap; }

    .admin-side[b-zy8s3oyi0j]  .admin-link.active::before { display: none; }

    .admin-main[b-zy8s3oyi0j] { padding: 1rem .9rem 2rem; }

    .admin-brand small[b-zy8s3oyi0j] { display: none; }

    .admin-who > div[b-zy8s3oyi0j] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .admin-link[b-zy8s3oyi0j],
    .admin-link > i[b-zy8s3oyi0j],
    .admin-logout[b-zy8s3oyi0j] { transition: none; }
}

/* ============================================================
   Chrome commun aux pages du back-office
   ------------------------------------------------------------
   Ces classes sont portées par le layout et appliquées au
   contenu des pages via ::deep. C'est ce qui rend l'harmonie
   réelle : une seule définition, pas une copie par page.
   Règle : la couleur dit un état, jamais une quantité.
   ============================================================ */

.admin-main[b-zy8s3oyi0j]  .bo-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.admin-main[b-zy8s3oyi0j]  .bo-crumb {
    font-size: var(--admin-fs-xs);
    color: var(--admin-ink-3);
    margin-bottom: .35rem;
}

.admin-main[b-zy8s3oyi0j]  .bo-crumb a {
    color: inherit;
    text-decoration: none;
}

.admin-main[b-zy8s3oyi0j]  .bo-crumb a:hover { color: var(--admin-accent); }

.admin-main[b-zy8s3oyi0j]  .bo-crumb strong {
    color: var(--admin-ink);
    font-weight: 600;
}

.admin-main[b-zy8s3oyi0j]  .bo-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: var(--admin-fs-xl);
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--admin-ink);
}

.admin-main[b-zy8s3oyi0j]  .bo-title > i { color: var(--admin-accent); font-size: var(--admin-fs-xl); }

.admin-main[b-zy8s3oyi0j]  .bo-sub {
    margin: .2rem 0 0;
    font-size: var(--admin-fs-sm);
    color: var(--admin-ink-2);
    max-width: 70ch;
}

/* compteur : neutre, jamais vert — le vert doit rester disponible pour un état */
.admin-main[b-zy8s3oyi0j]  .bo-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--admin-ink);
}

.admin-main[b-zy8s3oyi0j]  .bo-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

/* ------------------------- boutons ------------------------- */

.admin-main[b-zy8s3oyi0j]  .bo-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--admin-fs-sm);
    font-weight: 550;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--admin-ink-2);
    background: var(--admin-surface);
    border: 1px solid var(--admin-line-strong);
    border-radius: 6px;
    padding: .35rem .65rem;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.admin-main[b-zy8s3oyi0j]  .bo-btn > i { font-size: var(--admin-fs-md); }

.admin-main[b-zy8s3oyi0j]  .bo-btn:hover:not(:disabled) {
    color: var(--admin-accent);
    border-color: var(--admin-accent);
}

.admin-main[b-zy8s3oyi0j]  .bo-btn:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: 2px;
}

.admin-main[b-zy8s3oyi0j]  .bo-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.admin-main[b-zy8s3oyi0j]  .bo-btn-primary {
    background: var(--admin-accent);
    border-color: var(--admin-accent);
    color: #FFFFFF;
}

.admin-main[b-zy8s3oyi0j]  .bo-btn-primary:hover:not(:disabled) {
    background: var(--rof-blue-dark);
    border-color: var(--rof-blue-dark);
    color: #FFFFFF;
}

.admin-main[b-zy8s3oyi0j]  .bo-btn-danger { color: var(--admin-danger); }

.admin-main[b-zy8s3oyi0j]  .bo-btn-danger:hover:not(:disabled) {
    color: #FFFFFF;
    background: var(--admin-danger);
    border-color: var(--admin-danger);
}

.admin-main[b-zy8s3oyi0j]  .bo-btn-icon { padding: .35rem .45rem; }

/* ------------------------- filtres de liste -------------------------
   Un seul composant pour les sept barres de filtres du back-office.
   Auparavant chaque page avait sa grammaire : btn-group multicolore ici,
   btn-group noir la, pastilles rondes ailleurs. Le rouge et l'ambre y
   servaient tantot a dire « selectionne », tantot a dire « refuse » — deux
   sens pour un meme canal, et plus moyen de savoir lequel etait actif.

   Ici la selection est portee par le seul bleu ROF, comme partout dans ce
   back-office. Le statut reste porte par le libelle ecrit (« Refuses »,
   « En attente »), jamais par la couleur seule.

   Forme retenue : des onglets soulignes, sans cadre. Le survol pose un
   trait gris pour signaler que c'est cliquable, l'onglet actif un trait
   bleu. --------------------------------------------------------------- */

.admin-main[b-zy8s3oyi0j]  .bo-filters {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex-wrap: wrap;
    box-shadow: inset 0 -1px 0 var(--admin-line);
}

.admin-main[b-zy8s3oyi0j]  .bo-filter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: inherit;
    font-size: var(--admin-fs-sm);
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--admin-ink-2);
    background: none;
    border: 0;
    border-radius: 0;
    padding: .4rem .6rem;
    min-height: 32px;
    cursor: pointer;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color .15s ease, box-shadow .15s ease;
}

/* le trait gris au survol remplace le cadre : sans lui, rien ne dit que
   ces libelles sont cliquables tant qu'on ne les a pas touches */
.admin-main[b-zy8s3oyi0j]  .bo-filter:hover {
    color: var(--admin-ink);
    box-shadow: inset 0 -2px 0 var(--admin-line);
}

.admin-main[b-zy8s3oyi0j]  .bo-filter:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: -2px;
}

.admin-main[b-zy8s3oyi0j]  .bo-filter[aria-pressed="true"] {
    color: var(--admin-accent);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--admin-accent);
}

/* compteur : chiffres tabulaires, sinon le libelle danse quand on passe
   de 9 a 10 */
.admin-main[b-zy8s3oyi0j]  .bo-filter .n {
    font-variant-numeric: tabular-nums;
    font-size: var(--admin-fs-xs);
    font-weight: 600;
    color: var(--admin-ink-3);
}

.admin-main[b-zy8s3oyi0j]  .bo-filter[aria-pressed="true"] .n {
    color: var(--admin-accent);
    opacity: .75;
}

/* libelle qui precede la barre (« Nature : » sur le journal) */
.admin-main[b-zy8s3oyi0j]  .bo-filters-label {
    font-size: var(--admin-fs-sm);
    font-weight: 600;
    color: var(--admin-ink-2);
    padding-right: .3rem;
    align-self: center;
}

/* ------------------------- menu « autres actions » ------------------------- */

.admin-main[b-zy8s3oyi0j]  .bo-menu {
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(15, 26, 43, .1);
    padding: .3rem;
    font-size: var(--admin-fs-sm);
    min-width: 15rem;
}

.admin-main[b-zy8s3oyi0j]  .bo-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: 5px;
    padding: .4rem .55rem;
    color: var(--admin-ink-2);
}

.admin-main[b-zy8s3oyi0j]  .bo-menu .dropdown-item > i {
    font-size: var(--admin-fs-md);
    color: var(--admin-ink-3);
}

.admin-main[b-zy8s3oyi0j]  .bo-menu .dropdown-item:hover {
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
}

.admin-main[b-zy8s3oyi0j]  .bo-menu .dropdown-item:hover > i { color: var(--admin-accent); }

.admin-main[b-zy8s3oyi0j]  .bo-menu .dropdown-divider { margin: .3rem .2rem; border-color: var(--admin-line); }

/* ------------------------- carte de contenu ------------------------- */

.admin-main[b-zy8s3oyi0j]  .bo-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

/* Corps de carte, pour les cartes qui portent du texte ou un formulaire.

   .bo-card n'a volontairement aucune marge intérieure : un tableau doit toucher
   ses bords, sinon il perd la largeur dont il a besoin. Mais un formulaire posé
   dans la même carte se retrouvait collé au filet, sans le moindre air. */
.admin-main[b-zy8s3oyi0j]  .bo-card-body {
    padding: 1rem 1.15rem 1.15rem;
}

/* Colonne de lecture.

   Le panneau de relance s'étirait sur toute la largeur de l'écran : son
   paragraphe faisait une ligne de près de 180 signes — au retour à la marge,
   l'œil ne retrouve plus la ligne suivante — et sa zone de saisie de deux
   lignes occupait 1 400 px pour recueillir une phrase. La place disponible
   n'est pas une raison de l'occuper.

   Un formulaire tient donc dans une colonne d'environ 72 signes, la mesure
   confortable en lecture continue. Les tableaux, eux, gardent toute la largeur :
   c'est leur besoin propre, et c'est pourquoi la règle est portée par une classe
   qu'on pose, et non par .bo-card-body. */
.admin-main[b-zy8s3oyi0j]  .bo-mesure {
    max-width: 72ch;
}

/* Filet de sécurité pour un tableau non enveloppé.
   L'overflow caché ci-dessus, posé pour arrondir les coins, COUPE un tableau
   plus large que sa carte au lieu de le laisser défiler : la dernière colonne
   disparaît sans le moindre indice à l'écran, ce qui s'était déjà produit sur
   le tableau des inscriptions.
   Ce tableau-là est aujourd'hui enveloppé dans un .table-responsive, qui gère
   lui-même son défilement — la règle ne le concerne donc pas, et il ne faut
   surtout pas lui ajouter un second conteneur défilant. Elle ne vise que le cas
   d'un futur .bo-table posé sans enveloppe. */
.admin-main[b-zy8s3oyi0j]  .bo-card:has(.bo-table):not(:has(.table-responsive)) {
    overflow-x: auto;
}

.admin-main[b-zy8s3oyi0j]  .bo-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .6rem .75rem;
    background: var(--admin-ground);
    border-bottom: 1px solid var(--admin-line);
}

.admin-main[b-zy8s3oyi0j]  .bo-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 240px;
    max-width: 22rem;
    background: var(--admin-surface);
    border: 1px solid var(--admin-line-strong);
    border-radius: 6px;
    padding: .3rem .55rem;
    color: var(--admin-ink-3);
}

.admin-main[b-zy8s3oyi0j]  .bo-search:focus-within { border-color: var(--admin-accent); }

.admin-main[b-zy8s3oyi0j]  .bo-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font-size: var(--admin-fs-sm);
    color: var(--admin-ink);
}

@media (max-width: 767.98px) {
    .admin-main[b-zy8s3oyi0j]  .bo-head { align-items: flex-start; }
    .admin-main[b-zy8s3oyi0j]  .bo-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .admin-main[b-zy8s3oyi0j]  .bo-btn,
    .admin-main[b-zy8s3oyi0j]  .bo-filter { transition: none; }
}

/* ============================================================
   Zébrage des listes
   ------------------------------------------------------------
   Deux technologies de tableau coexistent dans le back-office :
   les grilles Syncfusion, qui portent les listes principales, et
   les tableaux Bootstrap des écrans restants. Elles doivent
   produire exactement la même alternance : une ligne sur deux sur
   fond gris très clair, en partant du blanc sous l'en-tête.
   (Le tableau maison de la page Minisites a été remplacé par une
   grille Syncfusion : il n'y a plus de troisième cas.)
   Le gris reste faible pour ne pas concurrencer les pastilles
   d'état, qui doivent rester ce que l'œil voit en premier.
   ============================================================ */

/* --- tableaux Bootstrap (.table-striped) ---
   Deux temps : on eteint d'abord le zebrage natif de Bootstrap (qui grise les
   lignes IMPAIRES via un box-shadow interne), puis on le repose sur les lignes
   PAIRES. Cette phase-la est celle des grilles Syncfusion, qui posent .e-altrow
   sur la 2e, 4e, 6e ligne. Sans ce decalage les deux tableaux alternaient bien
   dans le meme gris, mais en opposition de phase : cote inscriptions la premiere
   ligne de donnees etait grise, collee sous un en-tete deja gris, et la limite
   entre l'en-tete et le corps disparaissait. */
.admin-main[b-zy8s3oyi0j]  .table-striped > tbody > tr > * {
    --bs-table-accent-bg: transparent;
    --bs-table-bg-type: transparent;
    box-shadow: none;
    color: inherit;
}

.admin-main[b-zy8s3oyi0j]  .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--rof-blue-50);
}

.admin-main[b-zy8s3oyi0j]  .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: transparent;
    background-color: var(--rof-band);
    color: inherit;
}

/* --- en-tete des tableaux Bootstrap ---
   Le zebrage etait deja commun aux trois technologies, mais pas l'en-tete :
   .table-light rendait une bande grise en 14 px normale la ou les grilles
   Syncfusion affichent une ligne de capitales fines et espacees. Cote a cote,
   les deux tableaux ne se ressemblaient pas.

   Comme pour le zebrage, il faut neutraliser --bs-table-* et l'ombre interne :
   Bootstrap 5.3 peint le fond des cellules avec un box-shadow inset de 9999px,
   qui recouvrirait sans cela le background-color pose ici.

   Classe explicite plutot que regle sur toutes les .table : les tableaux des
   fenetres modales ne doivent pas etre embarques. */
.admin-main[b-zy8s3oyi0j]  .bo-table > thead > tr > th {
    --bs-table-accent-bg: transparent;
    --bs-table-bg-type: transparent;
    background-color: var(--admin-ground);
    box-shadow: none;
    border-bottom: 1px solid var(--admin-line);
    font-size: var(--admin-fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--admin-ink-3);
    padding: .6rem;
    white-space: nowrap;
}

.admin-main[b-zy8s3oyi0j]  .bo-table > tbody > tr > td {
    font-size: var(--admin-fs-sm);
    padding: .5rem .6rem;
    border-color: var(--admin-line);
}

/* --- grilles Syncfusion --- */
.admin-main[b-zy8s3oyi0j]  .e-grid .e-altrow,
.admin-main[b-zy8s3oyi0j]  .e-grid .e-altrow .e-rowcell {
    background-color: var(--rof-blue-50);
}

.admin-main[b-zy8s3oyi0j]  .e-grid .e-row:hover .e-rowcell,
.admin-main[b-zy8s3oyi0j]  .e-grid .e-altrow:hover .e-rowcell {
    background-color: var(--rof-band);
}

/* en-tête de grille aligné sur le reste du back-office */
.admin-main[b-zy8s3oyi0j]  .e-grid .e-headercell {
    background-color: var(--admin-ground);
    border-bottom: 1px solid var(--admin-line);
}

.admin-main[b-zy8s3oyi0j]  .e-grid .e-headercelldiv {
    font-size: var(--admin-fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--admin-ink-3);
}

/* ============================================================
   Pastilles d'état — communes à tout le back-office
   ------------------------------------------------------------
   Définies ici et non dans un .razor.css de page, pour deux
   raisons : ce sont des états du domaine (donc partagés), et
   surtout le contenu injecté via MarkupString ne reçoit PAS
   l'attribut de portée du CSS isolé — une règle scopée ne s'y
   appliquerait jamais. Le passage par ::deep règle les deux.
   Rappel : la couleur dit un état, jamais une quantité.
   ============================================================ */

.admin-main[b-zy8s3oyi0j]  .pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: var(--admin-fs-xs);
    font-weight: 650;
    line-height: 1.5;
    padding: .05rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* ============================================================
   INDICATEURS CHIFFRÉS — motif partagé.

   Ces classes étaient définies DEUX fois, dans les feuilles isolées du tableau
   de bord et des cotisations, à quelques détails près. Une troisième page,
   Messages de contact, s'en servait sans posséder de feuille : le CSS isolé ne
   s'appliquant qu'au composant qui le porte, ses quatre indicateurs retombaient
   en texte brut, alignés les uns sous les autres. C'est le défaut visible à
   l'écran.

   Le motif rejoint donc le chrome commun, avec .bo-card et .bo-btn. Toute page
   du back-office y a désormais droit sans rien redéclarer.
   ============================================================ */

.admin-main[b-zy8s3oyi0j]  .kpi-row,
.admin-main[b-zy8s3oyi0j]  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .6rem;
    margin-bottom: .9rem;
}

.admin-main[b-zy8s3oyi0j]  .kpi {
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    border-left: 3px solid var(--admin-line);
    border-radius: 8px;
    padding: .75rem .9rem;
}

/* Un indicateur qui réclame une action porte son liseré en ambre. */
.admin-main[b-zy8s3oyi0j]  .kpi.is-attn { border-left-color: var(--admin-warn); }
.admin-main[b-zy8s3oyi0j]  .kpi.is-attn .kpi-v { color: var(--admin-warn); }

.admin-main[b-zy8s3oyi0j]  .kpi-l {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--admin-fs-xs);
    color: var(--admin-ink-2);
    margin-bottom: .3rem;
}

.admin-main[b-zy8s3oyi0j]  .kpi-l > i {
    color: var(--admin-ink-3);
    font-size: var(--admin-fs-md);
}

.admin-main[b-zy8s3oyi0j]  .kpi-v {
    display: block;
    font-size: var(--admin-fs-2xl);
    font-weight: 650;
    letter-spacing: -.025em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--admin-ink);
}

.admin-main[b-zy8s3oyi0j]  .kpi-v small {
    font-size: var(--admin-fs-lg);
    font-weight: 600;
    color: var(--admin-ink-2);
}

.admin-main[b-zy8s3oyi0j]  .kpi-d {
    display: block;
    font-size: var(--admin-fs-xs);
    color: var(--admin-ink-3);
    margin-top: .2rem;
}

.admin-main[b-zy8s3oyi0j]  .kpi-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--admin-ground);
    margin: .4rem 0 .1rem;
    overflow: hidden;
}

.admin-main[b-zy8s3oyi0j]  .kpi-bar > i {
    display: block;
    height: 100%;
    background: var(--admin-ok);
    border-radius: 2px;
}

/* ============================================================
   ENCART D'INFORMATION — équivalent sobre de .rof-callout.

   Les pages du back-office empruntaient .rof-callout au front-office : rayon de
   12 px et crème chaude #FBEFDC, deux registres qui jurent au milieu de surfaces
   blanches et de bleus froids — l'encart « mode restreint » y prenait une teinte
   brunâtre. Ce motif-ci reprend les jetons du back-office et son rayon de 8 px.
   ============================================================ */

.admin-main[b-zy8s3oyi0j]  .bo-note {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .9rem;
    border: 1px solid var(--admin-line);
    border-left: 3px solid var(--admin-ink-3);
    border-radius: 8px;
    background: var(--admin-ground);
    font-size: var(--admin-fs-sm);
    color: var(--admin-ink-2);
    margin-bottom: .9rem;
}

.admin-main[b-zy8s3oyi0j]  .bo-note > i {
    flex: none;
    margin-top: .1rem;
    font-size: var(--admin-fs-lg);
    color: var(--admin-ink-3);
}

.admin-main[b-zy8s3oyi0j]  .bo-note strong { color: var(--admin-ink); }

/* L'alerte garde le fond neutre : l'ambre de la charte, #FBEFDC, est une crème
   CHAUDE, et le back-office est bâti sur des bleus froids — l'aplat y prenait
   une teinte brunâtre au milieu des surfaces blanches. La couleur reste portée
   par le liseré et l'icône, ce qui suffit largement : le message porte en plus
   un titre en gras qui dit l'état en toutes lettres, donc l'information ne
   repose jamais sur la seule couleur. */
.admin-main[b-zy8s3oyi0j]  .bo-note-warn {
    border-left-color: var(--admin-warn);
}
.admin-main[b-zy8s3oyi0j]  .bo-note-warn > i { color: var(--admin-warn); }

.admin-main[b-zy8s3oyi0j]  .bo-note-info {
    border-left-color: var(--admin-accent);
    background: var(--admin-accent-soft);
}
.admin-main[b-zy8s3oyi0j]  .bo-note-info > i { color: var(--admin-accent); }

/* Une anomalie à corriger avant d'agir : rouge, mais jamais seul — l'icône et un titre en
   toutes lettres disent l'état, la couleur ne fait que l'appuyer. */
.admin-main[b-zy8s3oyi0j]  .bo-note-danger {
    border-left-color: var(--rof-danger);
    background: var(--rof-danger-light);
}
.admin-main[b-zy8s3oyi0j]  .bo-note-danger > i { color: var(--rof-danger); }

/* Les champs de saisie posés sur une carte blanche doivent être BLANCS : le
   gris-bleu du fond de page les faisait passer pour désactivés. */
.admin-main[b-zy8s3oyi0j]  .bo-card textarea,
.admin-main[b-zy8s3oyi0j]  .bo-card input[type="text"],
.admin-main[b-zy8s3oyi0j]  .bo-card input[type="email"],
.admin-main[b-zy8s3oyi0j]  .bo-card input[type="number"],
.admin-main[b-zy8s3oyi0j]  .bo-card input[type="date"],
.admin-main[b-zy8s3oyi0j]  .bo-card select {
    background-color: var(--admin-surface);
    border: 1px solid var(--admin-line-strong);
    border-radius: 6px;
    color: var(--admin-ink);
    font-size: var(--admin-fs-sm);
}

.admin-main[b-zy8s3oyi0j]  .bo-card textarea:focus-visible,
.admin-main[b-zy8s3oyi0j]  .bo-card input:focus-visible,
.admin-main[b-zy8s3oyi0j]  .bo-card select:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: 2px;
}

/* Pagination des grilles Syncfusion. Son thème pose sur les numéros de page un
   gris qui ne mesure que 3,80:1 — sous le seuil de 4,5:1, et sur un élément
   cliquable. La règle ne touche que la couleur, pas la mécanique du composant. */
.admin-main[b-zy8s3oyi0j]  .e-pager .e-link,
.admin-main[b-zy8s3oyi0j]  .e-pager .e-numericitem {
    color: var(--admin-ink-2);
}

/* Plancher de lisibilité pour les éléments dimensionnés par Bootstrap.
   .badge vaut .75em et <small> .875em : des tailles RELATIVES, qui se composent
   avec celle du parent. Une pastille posée dans un texte déjà réduit à 14,9 px
   retombait ainsi à 11,2 px, et dans un libellé de tableau, plus bas encore —
   sous le plancher que l'échelle du back-office s'est fixé. Les remettre sur le
   jeton coupe cette composition. */
.admin-main[b-zy8s3oyi0j]  .badge,
.admin-main[b-zy8s3oyi0j]  small,
.admin-main[b-zy8s3oyi0j]  .form-text {
    font-size: var(--admin-fs-xs);
}

.admin-main[b-zy8s3oyi0j]  .pill-ok { color: var(--rof-ok); background: var(--rof-ok-light); }
.admin-main[b-zy8s3oyi0j]  .pill-wa { color: var(--rof-warn); background: var(--rof-warn-light); }
.admin-main[b-zy8s3oyi0j]  .pill-da { color: var(--rof-danger); background: var(--rof-danger-light); }
.admin-main[b-zy8s3oyi0j]  .pill-ne { color: var(--rof-text-muted); background: var(--rof-surface-soft); }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Bandeau d'erreur Blazor. Les styles de la barre laterale du modele par defaut
   (.page, .sidebar, .top-row) ont ete retires : plus aucun element ne les portait. */

#blazor-error-ui[b-yxu88z0ir5] {
    color-scheme: light only;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    /* Une croix de texte dans un coin : sur un téléphone, il fallait viser un
       carré de 12 px. La zone d'appui est portée à 44 px sans changer le dessin. */
    #blazor-error-ui .dismiss[b-yxu88z0ir5] {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    #blazor-error-ui .reload[b-yxu88z0ir5] {
        display: inline-block;
        padding: 10px 8px;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-i7t9ehf4ot],
.components-reconnect-repeated-attempt-visible[b-i7t9ehf4ot],
.components-reconnect-failed-visible[b-i7t9ehf4ot],
.components-pause-visible[b-i7t9ehf4ot],
.components-resume-failed-visible[b-i7t9ehf4ot],
.components-rejoining-animation[b-i7t9ehf4ot] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-i7t9ehf4ot],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-i7t9ehf4ot],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-i7t9ehf4ot],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-i7t9ehf4ot],
#components-reconnect-modal.components-reconnect-retrying[b-i7t9ehf4ot],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-i7t9ehf4ot],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-i7t9ehf4ot],
#components-reconnect-modal.components-reconnect-failed[b-i7t9ehf4ot],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-i7t9ehf4ot] {
    display: block;
}


#components-reconnect-modal[b-i7t9ehf4ot] {
    background-color: white;
    /* 20rem fait 340 px au pas de base du site : sur un écran de 320, la fenêtre
       de reconnexion — celle qui s'affiche quand le réseau mobile décroche —
       sortait de l'écran par la droite. */
    width: min(20rem, calc(100vw - 2rem));
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-i7t9ehf4ot 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-i7t9ehf4ot 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-i7t9ehf4ot 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-i7t9ehf4ot]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-i7t9ehf4ot 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-i7t9ehf4ot {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-i7t9ehf4ot {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-i7t9ehf4ot {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-i7t9ehf4ot] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-i7t9ehf4ot] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-i7t9ehf4ot] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    min-height: 44px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-i7t9ehf4ot] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-i7t9ehf4ot] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-i7t9ehf4ot] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-i7t9ehf4ot] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-i7t9ehf4ot 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-i7t9ehf4ot] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-i7t9ehf4ot {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/NotificationBell.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════
   NotificationBell – Styles (scoped)

   Ce composant avait été dessiné pour une barre supérieure SOMBRE : icône
   #e2e8f0, panneau #1e2235, accents ambre #fbbf24 — une palette Tailwind
   étrangère à la charte. Le back-office est passé depuis à la maquette A,
   dont la barre est BLANCHE ; les couleurs, elles, n'ont pas suivi. L'icône
   de la cloche se retrouvait à 1,23:1 sur son fond, donc pratiquement
   invisible, et dans le panneau les notifications déjà lues comme leur
   horodatage tombaient à 2,07:1.

   Tout passe désormais par les jetons --admin-*, eux-mêmes alias de la
   charte. Le composant n'est employé que dans la barre du back-office
   (AdminLayout.razor), où ces jetons sont toujours définis.
   ════════════════════════════════════════════════════════════ */

/* ── Wrapper positionné ──────────────────────────────────── */
.notif-bell-wrapper[b-ik0u666sfy] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ── Bouton cloche ───────────────────────────────────────── */
.notif-bell-btn[b-ik0u666sfy] {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 10px;
    transition: background 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-bell-btn:hover[b-ik0u666sfy] {
    background: var(--admin-ground);
}

.notif-bell-icon[b-ik0u666sfy] {
    font-size: var(--admin-fs-xl);
    color: var(--admin-ink-2);
    transition: color 0.2s;
}

.notif-bell-btn:hover .notif-bell-icon[b-ik0u666sfy] {
    color: var(--admin-accent);
}

/* Animation "sonnerie" quand il y a des notifs non lues */
@keyframes ring-b-ik0u666sfy {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(18deg); }
    20%  { transform: rotate(-16deg); }
    30%  { transform: rotate(14deg); }
    40%  { transform: rotate(-10deg); }
    50%  { transform: rotate(8deg); }
    60%  { transform: rotate(-6deg); }
    70%  { transform: rotate(4deg); }
    80%  { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

.notif-bell-icon.ringing[b-ik0u666sfy] {
    animation: ring-b-ik0u666sfy 1.8s ease infinite;
    transform-origin: top center;
    /* L'ambre #fbbf24 ne tenait que sur fond sombre : 1,8:1 sur la barre
       blanche. L'ambre de la charte est calé pour ce fond-là. */
    color: var(--admin-warn);
}

/* ── Badge rouge ─────────────────────────────────────────── */
.notif-badge[b-ik0u666sfy] {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--admin-danger);
    color: #fff;
    font-size: var(--admin-fs-xs);
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--admin-surface);
    animation: pop-in-b-ik0u666sfy 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes pop-in-b-ik0u666sfy {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* ── Dropdown ────────────────────────────────────────────── */
.notif-dropdown[b-ik0u666sfy] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    box-shadow: var(--rof-shadow-lg);
    overflow: hidden;
    z-index: 9999;
    animation: slide-down-b-ik0u666sfy 0.18s ease;
}

@keyframes slide-down-b-ik0u666sfy {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header du dropdown ──────────────────────────────────── */
.notif-dropdown-header[b-ik0u666sfy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--admin-line);
}

.notif-dropdown-title[b-ik0u666sfy] {
    font-size: var(--admin-fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--admin-ink-3);
}

/* Bouton "tout marquer comme lu" (double check emoji) */
.notif-mark-all-btn[b-ik0u666sfy] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--admin-fs-xl);
    padding: 2px 6px;
    border-radius: 6px;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s, transform 0.15s;
    line-height: 1;
}

.notif-mark-all-btn:hover[b-ik0u666sfy] {
    opacity: 1;
    background: var(--admin-ground);
    transform: scale(1.05);
}

/* Tooltip natif via title= suffisant, mais on peut aussi faire du CSS */

/* ── Liste scrollable ────────────────────────────────────── */
.notif-list[b-ik0u666sfy] {
    max-height: 340px;
    overflow-y: auto;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--admin-line-strong) transparent;
}

.notif-list[b-ik0u666sfy]::-webkit-scrollbar {
    width: 4px;
}

.notif-list[b-ik0u666sfy]::-webkit-scrollbar-track {
    background: transparent;
}

.notif-list[b-ik0u666sfy]::-webkit-scrollbar-thumb {
    background: var(--admin-line-strong);
    border-radius: 99px;
}

/* ── Item individuel ─────────────────────────────────────── */
.notif-item[b-ik0u666sfy] {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background 0.15s ease;
    border-left: 3px solid transparent;
}

.notif-item:hover[b-ik0u666sfy] {
    background: var(--admin-ground);
}

/* Non lue : texte blanc + bordure colorée + fond subtil */
.notif-item.notif-unread[b-ik0u666sfy] {
    border-left-color: var(--admin-accent);
    background: var(--admin-accent-soft);
}

.notif-item.notif-unread .notif-message[b-ik0u666sfy] {
    color: var(--admin-ink);
    font-weight: 600;
}

/* Lue : texte grisé */
.notif-item.notif-read .notif-message[b-ik0u666sfy] {
    color: var(--admin-ink-2);
    font-weight: 400;
}

.notif-item-content[b-ik0u666sfy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Petit point indicateur non-lu */
.notif-dot[b-ik0u666sfy] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--admin-accent);
}

.notif-message[b-ik0u666sfy] {
    font-size: var(--admin-fs-md);
    line-height: 1.4;
}

.notif-time[b-ik0u666sfy] {
    font-size: var(--admin-fs-xs);
    color: var(--admin-ink-3);
    padding-left: 15px;
}

/* ── État vide ───────────────────────────────────────────── */
.notif-empty[b-ik0u666sfy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    color: var(--admin-ink-3);
    font-size: var(--admin-fs-md);
}

.notif-empty i[b-ik0u666sfy] {
    font-size: var(--admin-fs-3xl);
    color: var(--admin-line-strong);
}

/* ── Overlay (fermer en cliquant hors) ───────────────────── */
.notif-overlay[b-ik0u666sfy] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

/* La sonnerie est décorative : elle se tait si le système demande moins
   de mouvement. */
@media (prefers-reduced-motion: reduce) {
    .notif-bell-icon[b-ik0u666sfy],
    .notif-dropdown[b-ik0u666sfy] {
        animation: none !important;
    }
    .notif-mark-all-btn:hover[b-ik0u666sfy] { transform: none; }
}
/* /Components/Pages/Admin/Cotisations.razor.rz.scp.css */
/* Cotisations & règlements — styles propres à cette page.
   L'en-tête, les boutons, la carte et les pastilles d'état viennent du chrome
   commun défini dans AdminLayout.razor.css. Ne pas les redéfinir ici.
   Rappel de la charte du back-office : la couleur dit un état, jamais une quantité. */

.cot[b-oz9lur6obe] {
    /* Alias sur les jetons de la charte — voir l'explication en tête de
       AdminLayout.razor.css. Cette feuille redéclarait la palette entière
       avec ses propres valeurs, alors que le commentaire ci-dessus demandait
       déjà de ne pas la redéfinir. --c-ink-3 y portait encore #8494A6,
       soit 3,10:1 : sous le seuil pour du texte. */
    --c-accent: var(--rof-blue-primary);
    --c-surface: var(--rof-card-bg);
    --c-ground: var(--rof-bg-light);
    --c-line: var(--rof-border);
    --c-ink: var(--rof-text-dark);
    --c-ink-2: var(--rof-text-body);
    --c-ink-3: var(--rof-text-muted);
    --c-ok: var(--rof-ok);
    --c-warn: var(--rof-warn);
    --c-warn-bg: var(--rof-warn-light);
    color: var(--c-ink);
}

/* ------------------------- sélecteur d'exercice ------------------------- */

.cot-year[b-oz9lur6obe],
.cot-field[b-oz9lur6obe] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--admin-fs-xs);
    color: var(--c-ink-2);
}

.cot-year > span[b-oz9lur6obe],
.cot-field > span[b-oz9lur6obe] {
    white-space: nowrap;
}

.cot-year select[b-oz9lur6obe],
.cot-field select[b-oz9lur6obe],
.cot-field input[b-oz9lur6obe] {
    font-size: var(--admin-fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: 6px;
    padding: .3rem .5rem;
}

.cot-year select:focus[b-oz9lur6obe],
.cot-field select:focus[b-oz9lur6obe],
.cot-field input:focus[b-oz9lur6obe] {
    outline: 2px solid var(--c-accent);
    outline-offset: 1px;
}

.cot-toolbar-note[b-oz9lur6obe] {
    margin-left: auto;
    font-size: var(--admin-fs-xs);
    color: var(--c-ink-3);
}

/* ------------------------- bandeau d'information ------------------------- */

.cot-flash[b-oz9lur6obe] {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-accent);
    border-radius: 8px;
    padding: .6rem .75rem;
    margin-bottom: 1rem;
    font-size: var(--admin-fs-sm);
    color: var(--c-ink-2);
}

.cot-flash > i[b-oz9lur6obe] { color: var(--c-accent); }
.cot-flash > span[b-oz9lur6obe] { flex: 1; }

.cot-flash-x[b-oz9lur6obe] {
    border: 0;
    background: none;
    color: var(--c-ink-3);
    font-size: var(--admin-fs-xs);
    line-height: 1;
    padding: .2rem;
    cursor: pointer;
}

.cot-flash-x:hover[b-oz9lur6obe] { color: var(--c-ink); }

/* ------------- bandeau d'ouverture d'exercice ------------- */

.cot-open[b-oz9lur6obe] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: var(--c-warn-bg);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-warn);
    border-radius: 8px;
    padding: .8rem .9rem;
    margin-bottom: 1rem;
}

.cot-open > i[b-oz9lur6obe] {
    color: var(--c-warn);
    font-size: var(--admin-fs-xl);
}

.cot-open-txt[b-oz9lur6obe] {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.cot-open-txt b[b-oz9lur6obe] {
    font-size: var(--admin-fs-sm);
    color: var(--c-ink);
}

.cot-open-txt span[b-oz9lur6obe] {
    font-size: var(--admin-fs-sm);
    color: var(--c-ink-2);
}

/* ------------------------- onglets ------------------------- */

.cot-tabs[b-oz9lur6obe] {
    display: flex;
    gap: .15rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--c-line);
    margin-bottom: 1.25rem;
}

.cot-tab[b-oz9lur6obe] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: .5rem .75rem;
    font-size: var(--admin-fs-sm);
    font-weight: 550;
    color: var(--c-ink-2);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.cot-tab > i[b-oz9lur6obe] { font-size: var(--admin-fs-md); color: var(--c-ink-3); }

.cot-tab:hover[b-oz9lur6obe] { color: var(--c-ink); }

.cot-tab:focus-visible[b-oz9lur6obe] {
    outline: 2px solid var(--c-accent);
    outline-offset: -2px;
}

.cot-tab.is-on[b-oz9lur6obe] {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
    font-weight: 650;
}

.cot-tab.is-on > i[b-oz9lur6obe] { color: var(--c-accent); }

/* compteur d'onglet : ambre, c'est un état « en souffrance », pas une quantité neutre */
.cot-tab-n[b-oz9lur6obe] {
    font-size: var(--admin-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--c-warn);
    background: var(--c-warn-bg);
    border-radius: 999px;
    padding: .05rem .45rem;
}

/* ------------------------- sections ------------------------- */

.cot-sec[b-oz9lur6obe] { margin-bottom: 1.5rem; }

.cot-sec-t[b-oz9lur6obe] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 .7rem;
    font-size: var(--admin-fs-sm);
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}

.cot-sec-t > i[b-oz9lur6obe] { font-size: var(--admin-fs-lg); }

.cot-sec-note[b-oz9lur6obe] {
    font-size: var(--admin-fs-xs);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-ink-3);
}

.cot-sub-t[b-oz9lur6obe] {
    margin: 1.25rem 0 .6rem;
    font-size: var(--admin-fs-xs);
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}

/* Les indicateurs chiffrés (.kpi-row, .kpi, .kpi-l, .kpi-v, .kpi-d) sont
   définis dans le chrome commun d'AdminLayout.razor.css : ils étaient
   redéclarés ici et sur le tableau de bord, et manquaient à la page Contact. */

/* ------------------------- listes ------------------------- */

.cot-empty[b-oz9lur6obe] {
    margin: 0;
    padding: 2rem .75rem;
    text-align: center;
    font-size: var(--admin-fs-sm);
    color: var(--c-ink-3);
}

.cot-empty > i[b-oz9lur6obe] {
    display: block;
    font-size: var(--admin-fs-2xl);
    margin-bottom: .4rem;
}

.cot-empty-ok[b-oz9lur6obe] { color: var(--c-ok); }

.cot-t[b-oz9lur6obe] {
    font-size: var(--admin-fs-sm);
}

.cot-t thead th[b-oz9lur6obe] {
    background: var(--c-ground);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--admin-fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-ink-3);
    white-space: nowrap;
}

.cot-t td[b-oz9lur6obe] { color: var(--c-ink-2); }

.cot-row[b-oz9lur6obe] { cursor: pointer; }

.cot-ident b[b-oz9lur6obe] {
    display: block;
    font-size: var(--admin-fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.25;
}

.cot-ident span[b-oz9lur6obe] {
    display: block;
    font-size: var(--admin-fs-xs);
    color: var(--c-ink-3);
}

.cot-mono[b-oz9lur6obe] {
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--admin-fs-xs);
}

.cot-amount[b-oz9lur6obe] {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink);
    white-space: nowrap;
}

/* ------------------------- extraction ------------------------- */

.cot-filters[b-oz9lur6obe] { gap: .75rem; }

.cot-checks[b-oz9lur6obe] {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--admin-fs-xs);
    color: var(--c-ink-2);
}

.cot-checks label[b-oz9lur6obe] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    cursor: pointer;
}

.cot-filters-actions[b-oz9lur6obe] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

/* Le bilan se recalcule à chaque changement de filtre : ce témoin dit à l'admin que
   les chiffres affichés ne sont pas encore ceux de la période qu'il vient de choisir. */
.cot-recalc[b-oz9lur6obe] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--admin-fs-xs);
    color: var(--c-ink-3);
    white-space: nowrap;
}

.cot-recalc > i[b-oz9lur6obe] {
    animation: cot-spin-b-oz9lur6obe 1s linear infinite;
}

@keyframes cot-spin-b-oz9lur6obe {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cot-recalc > i[b-oz9lur6obe] { animation: none; }
}

.cot-report[b-oz9lur6obe] { padding: .9rem; }

.cot-methods[b-oz9lur6obe] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
}

.cot-method[b-oz9lur6obe] {
    background: var(--c-ground);
    border: 1px solid var(--c-line);
    border-radius: 8px;
    padding: .65rem .8rem;
}

.cot-method-l[b-oz9lur6obe] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--admin-fs-xs);
    color: var(--c-ink-2);
    margin-bottom: .25rem;
}

.cot-method-l > i[b-oz9lur6obe] { color: var(--c-ink-3); }

.cot-method > b[b-oz9lur6obe] {
    display: block;
    font-size: var(--admin-fs-lg);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink);
}

.cot-method-d[b-oz9lur6obe] {
    display: block;
    font-size: var(--admin-fs-xs);
    color: var(--c-ink-3);
}

/* ------------------------- responsive ------------------------- */

@media (max-width: 991.98px) {
    .cot-methods[b-oz9lur6obe] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .kpi-row[b-oz9lur6obe] { grid-template-columns: 1fr; }
    .cot-methods[b-oz9lur6obe] { grid-template-columns: 1fr; }
    .cot-filters-actions[b-oz9lur6obe] { margin-left: 0; width: 100%; }
    .cot-toolbar-note[b-oz9lur6obe] { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cot-tab[b-oz9lur6obe] { transition: none; }
}

/* Les anomalies de l'appel : rouge, mais jamais seul — l'icône et le mot « Anomalie » portent le sens. */
.cot[b-oz9lur6obe]  .kpi.is-danger { border-left-color: var(--rof-danger); }
.cot[b-oz9lur6obe]  .kpi.is-danger .kpi-v { color: var(--rof-danger); }

/* Tableau d'aperçu de l'appel : la ligne se clique, l'anomalie se voit. */
.cot[b-oz9lur6obe]  .cot-apercu .e-row { cursor: pointer; }

.cot[b-oz9lur6obe]  .cot-apercu .e-row.cot-row-anomalie td.e-rowcell {
    background: var(--rof-danger-light);
    color: var(--rof-danger);
}

.cot[b-oz9lur6obe]  .cot-apercu .e-row.cot-row-anomalie:hover td.e-rowcell { filter: brightness(.97); }

.cot[b-oz9lur6obe]  .cot-raisons {
    display: block;
    margin-top: .2rem;
    color: var(--rof-danger);
    font-size: var(--admin-fs-xs);
    white-space: normal;
}
/* /Components/Pages/Admin/Index.razor.rz.scp.css */
/* Tableau de bord — styles propres à cette page.
   L'en-tête, les boutons, la carte et les pastilles d'état viennent du chrome
   commun défini dans AdminLayout.razor.css. Ne pas les redéfinir ici. */

.dash[b-lsh8xu0sa2] {
    /* Alias sur les jetons de la charte — voir l'explication en tête de
       AdminLayout.razor.css. Cette feuille redéclarait la palette entière
       avec ses propres valeurs, alors que le commentaire ci-dessus demandait
       déjà de ne pas la redéfinir. --d-ink-3 y portait encore #8494A6,
       soit 3,10:1 : sous le seuil pour du texte. */
    --d-accent: var(--rof-blue-primary);
    --d-surface: var(--rof-card-bg);
    --d-ground: var(--rof-bg-light);
    --d-line: var(--rof-border);
    --d-ink: var(--rof-text-dark);
    --d-ink-2: var(--rof-text-body);
    --d-ink-3: var(--rof-text-muted);
    --d-ok: var(--rof-ok);
    --d-warn: var(--rof-warn);
    --d-warn-bg: var(--rof-warn-light);
    color: var(--d-ink);
}

.dash-loading[b-lsh8xu0sa2],
.dash-error[b-lsh8xu0sa2] {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 8px;
    padding: 1.5rem;
    font-size: var(--admin-fs-md);
    color: var(--d-ink-2);
}

.dash-error[b-lsh8xu0sa2] {
    border-color: var(--rof-danger);
    background: var(--rof-danger-light);
    align-items: flex-start;
}

.dash-error > i[b-lsh8xu0sa2] {
    font-size: var(--admin-fs-xl);
    color: var(--rof-danger);
    flex: none;
}

.dash-error div[b-lsh8xu0sa2] { flex: 1; }
.dash-error b[b-lsh8xu0sa2] { display: block; color: var(--d-ink); }
.dash-error span[b-lsh8xu0sa2] { font-size: var(--admin-fs-sm); }

/* ------------------------- sections ------------------------- */

.dash-sec[b-lsh8xu0sa2] { margin-bottom: 1.75rem; }

.dash-sec-t[b-lsh8xu0sa2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .7rem;
    font-size: var(--admin-fs-sm);
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--d-ink-3);
}

.dash-sec-t > i[b-lsh8xu0sa2] { font-size: var(--admin-fs-lg); }

.dash-badge[b-lsh8xu0sa2] {
    font-size: var(--admin-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--d-warn);
    background: var(--d-warn-bg);
    border-radius: 999px;
    padding: .05rem .5rem;
    letter-spacing: 0;
}

.dash-clear[b-lsh8xu0sa2] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--admin-fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--d-ok);
}

/* ------------------------- file de travail ------------------------- */

.todo-grid[b-lsh8xu0sa2] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .6rem;
}

.todo[b-lsh8xu0sa2] {
    display: block;
    position: relative;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-left: 3px solid var(--d-line);
    border-radius: 8px;
    padding: .7rem .85rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.todo:hover[b-lsh8xu0sa2] {
    border-color: var(--d-accent);
    border-left-color: var(--d-accent);
    box-shadow: 0 2px 10px rgba(15, 26, 43, .07);
}

.todo:focus-visible[b-lsh8xu0sa2] {
    outline: 2px solid var(--d-accent);
    outline-offset: 2px;
}

.todo > i[b-lsh8xu0sa2] {
    font-size: var(--admin-fs-lg);
    color: var(--d-ink-3);
}

.todo > b[b-lsh8xu0sa2] {
    display: block;
    font-size: var(--admin-fs-3xl);
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--d-ink);
}

.todo > span[b-lsh8xu0sa2] {
    display: block;
    font-size: var(--admin-fs-xs);
    color: var(--d-ink-2);
    line-height: 1.35;
}

.todo > em[b-lsh8xu0sa2] {
    display: block;
    margin-top: .25rem;
    font-style: normal;
    font-size: var(--admin-fs-xs);
    color: var(--d-warn);
}

/* rien à faire : la tuile s'efface */
.todo.is-clear > b[b-lsh8xu0sa2] { color: var(--d-ink-3); }

/* quelque chose attend : liseré et chiffre en ambre */
.todo.is-attn[b-lsh8xu0sa2] {
    border-left-color: var(--d-warn);
}

.todo.is-attn > b[b-lsh8xu0sa2] { color: var(--d-warn); }
.todo.is-attn > i[b-lsh8xu0sa2] { color: var(--d-warn); }

/* Les indicateurs chiffrés viennent du chrome commun (AdminLayout.razor.css). */

/* ------------------------- activité récente ------------------------- */

.dash-cols[b-lsh8xu0sa2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.dash-card-h[b-lsh8xu0sa2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-ground);
}

.dash-card-h b[b-lsh8xu0sa2] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--admin-fs-xs);
    font-weight: 650;
}

.dash-card-h b > i[b-lsh8xu0sa2] { color: var(--d-ink-3); }

.dash-card-h a[b-lsh8xu0sa2] {
    margin-left: auto;
    font-size: var(--admin-fs-xs);
    color: var(--d-accent);
    text-decoration: none;
}

.dash-card-h a:hover[b-lsh8xu0sa2] { text-decoration: underline; }

.dash-t[b-lsh8xu0sa2] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--admin-fs-xs);
}

.dash-t td[b-lsh8xu0sa2] {
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--d-line);
    color: var(--d-ink-2);
    vertical-align: middle;
}

.dash-t tr:last-child td[b-lsh8xu0sa2] { border-bottom: 0; }

.dash-t .nm[b-lsh8xu0sa2] { color: var(--d-ink); font-weight: 600; }
.dash-t .num[b-lsh8xu0sa2] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-t .st[b-lsh8xu0sa2] { text-align: right; }

.dash-empty[b-lsh8xu0sa2] {
    margin: 0;
    padding: 1.5rem .75rem;
    text-align: center;
    font-size: var(--admin-fs-sm);
    color: var(--d-ink-3);
}

/* ------------------------- responsive ------------------------- */

@media (max-width: 1199.98px) {
    .todo-grid[b-lsh8xu0sa2] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kpi-grid[b-lsh8xu0sa2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .todo-grid[b-lsh8xu0sa2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-grid[b-lsh8xu0sa2] { grid-template-columns: 1fr; }
    .dash-cols[b-lsh8xu0sa2] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .todo[b-lsh8xu0sa2] { transition: none; }
}
/* /Components/Pages/Admin/Minisites.razor.rz.scp.css */
/* Minisites — styles propres à cette page uniquement.
   L'en-tête, les boutons, la barre d'outils et la carte viennent du chrome commun
   défini dans AdminLayout.razor.css (classes .bo-*). Ne pas les redéfinir ici. */

.ms-page[b-6l0m31rqz2] {
    /* Alias sur les jetons de la charte — voir l'explication en tête de
       AdminLayout.razor.css. Cette feuille redéclarait la palette entière
       avec ses propres valeurs, alors que le commentaire ci-dessus demandait
       déjà de ne pas la redéfinir. --ms-ink-3 y portait encore #8494A6,
       soit 3,10:1 : sous le seuil pour du texte. */
    --ms-accent: var(--rof-blue-primary);
    --ms-accent-soft: var(--rof-blue-50);
    --ms-ground: var(--rof-bg-light);
    --ms-surface: var(--rof-card-bg);
    --ms-line: var(--rof-border);
    --ms-ink: var(--rof-text-dark);
    --ms-ink-2: var(--rof-text-body);
    --ms-ink-3: var(--rof-text-muted);
    --ms-ok: var(--rof-ok);
    --ms-warn: var(--rof-warn);
    color: var(--ms-ink);
    font-size: var(--admin-fs-md);
}

/* ------------------------- compteurs ------------------------- */

.ms-stats[b-6l0m31rqz2] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: .9rem;
}

.ms-stat[b-6l0m31rqz2] {
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: 8px;
    padding: .6rem .75rem;
}

.ms-stat-lbl[b-6l0m31rqz2] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--admin-fs-xs);
    color: var(--ms-ink-2);
    margin-bottom: .3rem;
}

.ms-stat-lbl i[b-6l0m31rqz2] { color: var(--ms-ink-3); }

.ms-stat b[b-6l0m31rqz2] {
    font-size: var(--admin-fs-xl);
    font-weight: 650;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* ------------------------- couleurs des compteurs -------------------------
   Le tableau maison a laisse la place a la grille Syncfusion commune ; il ne
   reste ici que les quatre compteurs, seul element propre a cette page. */

.ms-ok[b-6l0m31rqz2] { color: var(--ms-ok); }
.ms-warn[b-6l0m31rqz2] { color: var(--ms-warn); }

/* ------------------------- responsive ------------------------- */

@media (max-width: 991.98px) {
    .ms-stats[b-6l0m31rqz2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* /Components/Shared/IconPicker.razor.rz.scp.css */
/* Sélecteur d'icône — styles isolés au composant, comme AdminLayout.
   Palette et graisses reprises du back-office : le sélecteur doit passer pour un champ
   de formulaire de plus, pas pour une pièce rapportée. */

.picker[b-s45b5dr3rp] {
    position: relative;
}

/* ---------- Le champ fermé ---------- */

.declencheur[b-s45b5dr3rp] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 8px;
    min-height: 31px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #1E293B;
    text-align: left;
    cursor: pointer;
}

.declencheur:hover[b-s45b5dr3rp] { border-color: #94A3B8; }

.declencheur:focus-visible[b-s45b5dr3rp] {
    outline: 2px solid #20499F;
    outline-offset: 1px;
}

.apercu[b-s45b5dr3rp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background: #F1F5F9;
    border-radius: 4px;
    color: #20499F;
}

.nom[b-s45b5dr3rp] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: #475569;
}

.fleche[b-s45b5dr3rp] { flex: 0 0 auto; color: #94A3B8; font-size: 0.7rem; }

/* ---------- Le panneau ouvert ---------- */

.voile[b-s45b5dr3rp] {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.panneau[b-s45b5dr3rp] {
    position: absolute;
    z-index: 1060;
    top: calc(100% + 6px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.barre[b-s45b5dr3rp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
}

.barre > .bi-search[b-s45b5dr3rp] { color: #94A3B8; flex: 0 0 auto; }
.barre input[b-s45b5dr3rp] { flex: 1 1 auto; }

.fermer[b-s45b5dr3rp] {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #64748B;
    padding: 2px 4px;
    line-height: 1;
    cursor: pointer;
}

.fermer:hover[b-s45b5dr3rp] { color: #1E293B; }

/* Une hauteur bornée : le panneau défile, la page derrière ne bouge pas. */
.corps[b-s45b5dr3rp] {
    max-height: 340px;
    overflow-y: auto;
    padding: 10px;
}

.titre-groupe[b-s45b5dr3rp] {
    margin: 10px 0 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748B;
}

.corps > .titre-groupe:first-child[b-s45b5dr3rp] { margin-top: 0; }

.grille[b-s45b5dr3rp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 4px;
}

.case[b-s45b5dr3rp] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #F8FAFC;
    color: #334155;
    font-size: 1.05rem;
    cursor: pointer;
}

.case:hover[b-s45b5dr3rp] {
    background: #E8EDF7;
    border-color: #C3D0EA;
    color: #20499F;
}

.case:focus-visible[b-s45b5dr3rp] {
    outline: 2px solid #20499F;
    outline-offset: 1px;
}

/* L'icône en place se repère d'un coup d'œil en rouvrant le panneau. */
.case.choisie[b-s45b5dr3rp] {
    background: #20499F;
    border-color: #20499F;
    color: #FFFFFF;
}

.vide[b-s45b5dr3rp] {
    margin: 0;
    padding: 18px 6px;
    text-align: center;
    font-size: 0.8125rem;
    color: #64748B;
}

@media (max-width: 575.98px) {
    .panneau[b-s45b5dr3rp] { width: 300px; }
}
/* /Components/Shared/InfoBulle.razor.rz.scp.css */
.info-bulle[b-9pk13fqcfo] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: .4rem;
    color: #6b7280;
    cursor: help;
    border-radius: 50%;
}

.info-bulle:focus-visible[b-9pk13fqcfo] {
    outline: 2px solid #2a78d6;
    outline-offset: 2px;
}

.info-bulle-texte[b-9pk13fqcfo] {
    visibility: hidden;
    opacity: 0;
    /* Fixe, et non absolue : le corps d'une fenêtre défile, et un texte absolu y est rogné à droite et
       lui ajoute une barre horizontale. rofInfoBulle (js/rof-app.js) pose --ib-gauche et --ib-haut. */
    position: fixed;
    z-index: 3000;
    left: var(--ib-gauche, 0);
    top: var(--ib-haut, 0);
    width: max-content;
    max-width: 300px;
    padding: .55rem .75rem;
    border-radius: .5rem;
    background: #1f2937;
    color: #fff;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: opacity .12s ease;
    pointer-events: none;
}

.info-bulle:hover .info-bulle-texte[b-9pk13fqcfo],
.info-bulle:focus .info-bulle-texte[b-9pk13fqcfo],
.info-bulle:focus-within .info-bulle-texte[b-9pk13fqcfo] {
    visibility: visible;
    opacity: 1;
}