/* /Components/ActionsAffaire.razor.rz.scp.css */
.bloc-actions[b-k8c1k6b2et] { display: flex; flex-direction: column; gap: .75rem; }

.ligne-champs[b-k8c1k6b2et] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem 1rem;
}

/* Le libelle porte son champ : pas d'alignement a maintenir a la main, et
   cliquer le texte donne le focus au bon endroit. */
.ligne-champs label[b-k8c1k6b2et] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .55);
}

.ligne-champs label.grandit[b-k8c1k6b2et] { flex: 1 1 14rem; }

.raccourcis[b-k8c1k6b2et] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    padding-bottom: .1rem;
}

.separateur[b-k8c1k6b2et] { margin: .35rem 0; border-color: rgba(255, 255, 255, .12); }

.cloture > summary[b-k8c1k6b2et] {
    cursor: pointer;
    font-size: .8rem;
    color: rgba(255, 255, 255, .7);
    padding: .2rem 0;
}

.cloture > summary:hover[b-k8c1k6b2et] { color: #fff; }

.cloture[open] > summary[b-k8c1k6b2et] { margin-bottom: .5rem; }
/* /Components/Aide.razor.rz.scp.css */
/* L'aide d'un champ. Discrete fermee, lisible ouverte, jamais rognee.

   Les couleurs passent toutes par les variables de la charte : cette feuille
   vit sur le fond sombre de BELENOS, et la 50.1 a paye assez cher l'oubli. */

.aide-champ[b-u4y756uuif] {
    font-size: .78rem;
    line-height: 1.35;
    margin-top: .15rem;
}

.aide-champ > summary[b-u4y756uuif] {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    cursor: pointer;
    list-style: none;
    color: var(--texte-3, #9a9a9a);

    /* La zone cliquable descend jusqu'au champ suivant : sur un ecran tactile,
       une cible de dix pixels de haut ne s'atteint pas. */
    padding: .15rem 0 .2rem;
}

.aide-champ > summary[b-u4y756uuif]::-webkit-details-marker { display: none; }

.aide-champ > summary:hover[b-u4y756uuif],
.aide-champ > summary:focus-visible[b-u4y756uuif] {
    color: var(--datis-orange, #FD7E00);
}

/* Le "i" : un rond, pas une icone a charger. Il tourne quand l'aide s'ouvre,
   ce qui suffit a dire que quelque chose s'est passe. */
.aide-i[b-u4y756uuif] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: .68rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    transform: translateY(.1rem);
}

.aide-champ[open] > summary .aide-i[b-u4y756uuif] {
    background: var(--datis-orange, #FD7E00);
    border-color: var(--datis-orange, #FD7E00);
    color: #1e1e1e;
}

/* OBLIGATOIRE ou FACULTATIF, toujours visible : c'est la premiere question
   qu'on se pose devant un champ qu'on ne connait pas. */
.aide-etat[b-u4y756uuif] {
    flex: none;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .05rem .3rem;
    border-radius: .2rem;
}

.aide-etat.obligatoire[b-u4y756uuif] {
    color: #FF8A8A;
    border: 1px solid rgba(255, 138, 138, .45);
}

.aide-etat.facultatif[b-u4y756uuif] {
    color: var(--texte-3, #9a9a9a);
    border: 1px solid var(--bordure, #555);
}

.aide-resume[b-u4y756uuif] {
    min-width: 0;
}

/* Un jeton insecable dans un RESUME deborderait tout autant que dans un detail,
   et se ferait couper par le rognage de la rubrique. Meme protection, meme
   ::deep : le contenu du fragment est ecrit dans la page appelante. */
.aide-resume[b-u4y756uuif]  code {
    word-break: break-word;
}

.aide-corps[b-u4y756uuif] {
    margin: .3rem 0 .1rem;
    padding: .5rem .65rem;
    border-left: 2px solid var(--bordure, #555);
    background: var(--surface-2, #2f2f2f);
    border-radius: 0 .3rem .3rem 0;
    color: var(--texte-2, #d0d0d0);
}

/* ::deep, et ce n'est pas un ornement : les <p> et les <code> du fragment
   Detail sont ecrits DANS LA PAGE appelante, donc ils ne portent pas
   l'attribut de portee de ce composant. Sans ::deep, Blazor suffixe le dernier
   selecteur compose -- ".aide-corps code[b-xxx]" -- et la regle ne designe plus
   rien. Le mot n'est pas theorique ici : sans le "word-break", un jeton
   insecable comme MODULO.CONVIVIO.V3 ou une adresse de controle deborde du
   cadre, et ".rubrique { overflow: hidden }" le coupe -- exactement le rognage
   que cette livraison dit avoir evite. */
.aide-corps[b-u4y756uuif]  p:last-child { margin-bottom: 0; }

.aide-corps[b-u4y756uuif]  code {
    font-size: .95em;
    word-break: break-word;
}
/* /Components/Confirmation.razor.rz.scp.css */
.fond[b-h83gybzwqs] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 1080;
}

.boite[b-h83gybzwqs] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1081;
    width: min(30rem, calc(100vw - 2rem));
    padding: 1.2rem 1.3rem 1.1rem;
    border-radius: .5rem;
    background: #3C3C3C;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

.boite h2[b-h83gybzwqs] {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.question[b-h83gybzwqs] {
    margin: 0 0 .9rem;
    font-size: .87rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
}

.motif[b-h83gybzwqs] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-bottom: 1rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
}

.actions[b-h83gybzwqs] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}
/* /Components/DetailProspection.razor.rz.scp.css */
.grille-detail[b-8172qcjp7e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: .8rem;
}

.carte[b-8172qcjp7e] {
    padding: .85rem .95rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.carte.large[b-8172qcjp7e] { grid-column: span 2; }

@media (max-width: 900px) {
    .carte.large[b-8172qcjp7e] { grid-column: span 1; }
}

.carte h3[b-8172qcjp7e] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .5);
    margin: 0 0 .7rem;
}

.note-carte[b-8172qcjp7e] {
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
    margin: .6rem 0 0;
}

/* --- donut ---------------------------------------------------------------- */

.donut-bloc[b-8172qcjp7e] { position: relative; display: flex; justify-content: center; }
.donut[b-8172qcjp7e] { width: 9.5rem; height: 9.5rem; }

/* Le centre du donut porte le seul chiffre qui compte : le reste du graphique
   n'est la que pour le situer. */
.donut-centre[b-8172qcjp7e] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.donut-centre .valeur[b-8172qcjp7e] { font-size: 1.5rem; font-weight: 300; }
.donut-centre .note[b-8172qcjp7e] { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: rgba(255, 255, 255, .45); }

/* --- legendes ------------------------------------------------------------- */

.legende[b-8172qcjp7e] {
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    font-size: .76rem;
    color: rgba(255, 255, 255, .75);
}

.legende.colonnes[b-8172qcjp7e] { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.legende li[b-8172qcjp7e] { display: flex; align-items: center; gap: .35rem; }

.legende i[b-8172qcjp7e] {
    width: .7rem;
    height: .7rem;
    border-radius: .18rem;
    flex: 0 0 auto;
}

.legende b[b-8172qcjp7e] { font-variant-numeric: tabular-nums; }

/* --- barre empilee -------------------------------------------------------- */

.barre-empilee[b-8172qcjp7e] {
    display: flex;
    height: 1.1rem;
    border-radius: .25rem;
    overflow: hidden;
    /* L'ecart de 2 px entre segments : sans lui, deux teintes voisines de la
       meme rampe se lisent comme une seule bande. */
    gap: 2px;
    background: rgba(255, 255, 255, .05);
}

.barre-empilee .segment[b-8172qcjp7e] { display: block; min-width: 3px; }

/* --- barres horizontales -------------------------------------------------- */

.barres-h[b-8172qcjp7e] { display: flex; flex-direction: column; gap: .4rem; }

.ligne-barre[b-8172qcjp7e] {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
    gap: .6rem;
    font-size: .78rem;
}

.ligne-barre .etiquette[b-8172qcjp7e] { overflow: hidden; }
.ligne-barre .etiquette a[b-8172qcjp7e] { color: rgba(255, 255, 255, .82); text-decoration: none; }
.ligne-barre .etiquette a:hover[b-8172qcjp7e] { text-decoration: underline; }

.tronque[b-8172qcjp7e] { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.piste[b-8172qcjp7e] {
    display: flex;
    gap: 2px;
    height: .55rem;
    background: rgba(255, 255, 255, .05);
    border-radius: .28rem;
    overflow: hidden;
}

.piste .part[b-8172qcjp7e] { display: block; }

.valeur-barre[b-8172qcjp7e] { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- barres verticales ---------------------------------------------------- */

.barres-v[b-8172qcjp7e] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 6rem;
}

.barres-v .colonne[b-8172qcjp7e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.barres-v .tige[b-8172qcjp7e] {
    width: 100%;
    max-width: 1.6rem;
    background: #E06E72;
    /* Extremite arrondie cote donnee, pied carre sur la ligne de base. */
    border-radius: 3px 3px 0 0;
}

.barres-v .mois[b-8172qcjp7e] {
    font-size: .6rem;
    color: rgba(255, 255, 255, .42);
    margin-top: .2rem;
}

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

.liste-courte[b-8172qcjp7e] { list-style: none; margin: 0; padding: 0; }

.liste-courte li[b-8172qcjp7e] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .28rem 0;
    font-size: .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.liste-courte li:last-child[b-8172qcjp7e] { border-bottom: 0; }
.liste-courte a[b-8172qcjp7e] { color: rgba(255, 255, 255, .82); text-decoration: none; }
.liste-courte a:hover[b-8172qcjp7e] { text-decoration: underline; }
/* /Components/DeuxFaits.razor.rz.scp.css */
/* Deux elements de BLOC : c'est toute la raison d'etre du composant. Deux
   elements en ligne se colleraient des que le blanc qui les separe disparait,
   et c'est exactement la faute qu'on cherche a rendre impossible. */
.deux-faits[b-9us0m059zl] { display: block; }

.deux-faits .principal[b-9us0m059zl] { display: block; }

.deux-faits .secondaire[b-9us0m059zl] {
    display: block;
    font-size: .74rem;
    line-height: 1.25;
    color: var(--texte-3, rgba(255, 255, 255, .45));
}
/* /Components/EditeurDocument.razor.rz.scp.css */
/* L'EDITEUR DU DOCUMENT CONTRACTUEL -- livraisons 45, 47, 48.

   Ces regles vivaient dans ContratFiche.razor.css jusqu'a la 48. Elles ont
   suivi le composant, et il le fallait : l'isolation CSS de Blazor colle un
   attribut [b-xxxx] par composant, et une regle restee chez le parent ne
   s'applique pas a l'enfant. L'editeur serait sorti sans aucune mise en forme.

   Ce qui vient d'ailleurs et n'est PAS redeclare ici : .rubrique, .paires,
   .etat, .etat-info, .etat-alerte, .texte-faible, .texte-alerte, .date-claire
   (app.css et belenos-extra.css, non isoles). Tout le reste doit etre ici.
   ========================================================================== */

/* --- les bandeaux, repris du parent -------------------------------------- */

.bandeau[b-7y5q57lwof] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    margin-bottom: .9rem;
    font-size: .87rem;
}

.bandeau.ok[b-7y5q57lwof] { background: rgba(152, 251, 152, .12); border-left: 3px solid #98FB98; }
.bandeau.alerte[b-7y5q57lwof] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

/* Ni vert ni rouge : ce n'est ni une reussite ni une panne. Le bandeau du
   document libre explique pourquoi des blocs sont vides -- il informe, et une
   couleur d'alerte ferait chercher une erreur qui n'existe pas. */
.bandeau.info[b-7y5q57lwof] {
    background: rgba(255, 255, 255, .05);
    border-left: 3px solid rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .78);
}

/* Le paragraphe d'explication, repris du parent lui aussi. */
.aide[b-7y5q57lwof] {
    margin: 0 0 .7rem;
    font-size: .82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   LE DOCUMENT CONTRACTUEL (livraison 45)

   Tout est redeclare ici : l'isolation CSS de Blazor n'expose rien d'un
   composant a l'autre. Seules .rubrique, .paires, .etat, .etat-info,
   .texte-faible, .texte-alerte et .montant viennent d'ailleurs.
   ========================================================================== */

.rubrique.doc[b-7y5q57lwof] { margin-top: 1.2rem; }

.rubrique.doc > summary .compte[b-7y5q57lwof] {
    font-size: .72rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .45);
    margin-left: .6rem;
    text-transform: none;
    letter-spacing: 0;
}

.ligne-titre[b-7y5q57lwof] { margin-bottom: 1rem; }

.ligne-titre label.grandit[b-7y5q57lwof] { flex: 1 1 100%; }

.ligne-titre label[b-7y5q57lwof] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .55);
}

.rubriques[b-7y5q57lwof] { display: flex; flex-direction: column; gap: .55rem; }

/* --- une rubrique ---------------------------------------------------------

   Le filet de gauche marque le NIVEAU. Une indentation seule se perd des que
   la fenetre retrecit ; un filet reste lisible a n'importe quelle largeur, et
   c'est lui qui dit qu'un sous-point appartient a la section du dessus. */
.rub[b-7y5q57lwof] {
    border-left: 2px solid rgba(255, 255, 255, .1);
    padding: .5rem 0 .6rem .7rem;
}

.rub.n2[b-7y5q57lwof] {
    margin-left: 1.4rem;
    border-left-color: rgba(255, 255, 255, .06);
}

/* Ecartee : la rubrique reste lisible et modifiable, mais on voit qu'elle ne
   partira pas. Un affichage GRISE et non masque -- la faire disparaitre
   obligerait a se souvenir qu'elle existe pour la remettre. */
.rub.ecartee[b-7y5q57lwof] { opacity: .45; }
.rub.ecartee .titre[b-7y5q57lwof] { text-decoration: line-through; }

.rub .tete[b-7y5q57lwof] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.rub .num[b-7y5q57lwof] {
    flex: 0 0 auto;
    min-width: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .85rem;
    color: var(--datis-orange);
}

.rub.n2 .num[b-7y5q57lwof] { color: rgba(255, 255, 255, .5); font-weight: 400; }

.rub .titre[b-7y5q57lwof] { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.rub.n2 .titre[b-7y5q57lwof] { font-weight: 400; }

.rub .outils[b-7y5q57lwof] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.rub .outils label.case[b-7y5q57lwof] {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: rgba(255, 255, 255, .5);
    margin: 0 .3rem 0 0;
    white-space: nowrap;
}

.btn-outil[b-7y5q57lwof] {
    background: none;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .3rem;
    color: rgba(255, 255, 255, .55);
    font-size: .85rem;
    line-height: 1;
    padding: .2rem .4rem;
    cursor: pointer;
}

.btn-outil:hover[b-7y5q57lwof] { color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn-outil:disabled[b-7y5q57lwof] { opacity: .35; cursor: default; }
.btn-outil.danger:hover[b-7y5q57lwof] { color: #FF8A8A; border-color: rgba(255, 138, 138, .4); }

.rub .texte[b-7y5q57lwof] {
    font-family: inherit;
    font-size: .84rem;
    line-height: 1.5;
    resize: vertical;
}

/* --- le texte tel qu'il s'imprimera --------------------------------------

   Il ne se tape PAS : c'est un rendu. Il n'a donc ni bordure ni fond de champ
   -- un cadre modifiable qui ne se modifie pas est un cadre sur lequel on
   clique trois fois avant de comprendre.

   white-space: pre-wrap : les paragraphes du texte sont separes par de vrais
   retours a la ligne, et les ecraser ferait lire une clause de dix lignes
   comme un seul bloc. */
.rub .texte-rendu[b-7y5q57lwof] {
    white-space: pre-wrap;
    font-size: .84rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    padding: .3rem .1rem;
    border-left: 2px solid rgba(255, 255, 255, .07);
    padding-left: .7rem;
}

/* --- un bloc genere -------------------------------------------------------

   Il ne se tape pas, il se calcule : il n'a donc PAS l'apparence d'un champ.
   Un cadre modifiable qui ne se modifie pas est un cadre sur lequel on clique
   trois fois avant de comprendre. */
.bloc-genere[b-7y5q57lwof] {
    background: rgba(255, 255, 255, .03);
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: .35rem;
    padding: .55rem .7rem;
}

.bloc-genere .entete-bloc[b-7y5q57lwof] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
    font-size: .76rem;
}

.bloc-genere ul.apercu[b-7y5q57lwof] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
}

.bloc-genere ul.apercu li[b-7y5q57lwof] {
    padding: .1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.bloc-genere ul.apercu li:last-child[b-7y5q57lwof] { border-bottom: 0; }

/* --- le pied : ajouter, et l'aide ----------------------------------------- */

.pied-doc[b-7y5q57lwof] {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.pied-doc .ajout[b-7y5q57lwof] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .8rem;
    align-items: flex-end;
}

.pied-doc .ajout label[b-7y5q57lwof] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .55);
}

.pied-doc .ajout label.grandit[b-7y5q57lwof] { flex: 1 1 20rem; min-width: 0; }

/* La bascule d'apercu : une case a cocher, pas un bouton. Elle change ce
   qu'on REGARDE, pas ce qui est enregistre -- et un bouton laisserait croire
   qu'elle agit sur le document. */
.pied-doc label.case.bascule[b-7y5q57lwof] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
}

.aide-jetons > summary[b-7y5q57lwof] {
    cursor: pointer;
    font-size: .76rem;
    color: rgba(255, 255, 255, .55);
    padding: .2rem 0;
}

.aide-jetons > summary:hover[b-7y5q57lwof] { color: var(--datis-orange); }

.aide-jetons .paires[b-7y5q57lwof] {
    margin: .4rem 0 0;
    columns: 2;
    column-gap: 2rem;
    font-size: .76rem;
}

.aide-jetons .paires > div[b-7y5q57lwof] {
    break-inside: avoid;
    display: flex;
    gap: .5rem;
    padding: .1rem 0;
}

.aide-jetons .paires dt[b-7y5q57lwof] { color: var(--datis-orange); margin: 0; font-weight: 400; }
.aide-jetons .paires dd[b-7y5q57lwof] { margin: 0; color: rgba(255, 255, 255, .55); }

@media (max-width: 48rem) {
    .aide-jetons .paires[b-7y5q57lwof] { columns: 1; }
    .rub .tete[b-7y5q57lwof] { flex-wrap: wrap; }
    .rub .outils[b-7y5q57lwof] { width: 100%; justify-content: flex-end; }
}

/* ==========================================================================
   LES VERSIONS ET LA GENERATION (livraison 47)
   ========================================================================== */

.versions[b-7y5q57lwof] {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: .8rem;
}

.titre-versions[b-7y5q57lwof] {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin: 0 0 .4rem;
}

.versions td[b-7y5q57lwof] { vertical-align: middle; }

.versions .signe label[b-7y5q57lwof] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    margin: 0;
    white-space: nowrap;
}

.versions .signe input[b-7y5q57lwof] { max-width: 9.5rem; }

/* --- la fenetre du choix --------------------------------------------------

   DEUX COLONNES DE MEME LARGEUR, et c'est le sujet.

   Une ebauche et une publication ne sont pas deux reglages du meme bouton :
   ce sont deux gestes, dont l'un est reversible et l'autre non. Les mettre
   cote a cote, chacun avec sa phrase et son propre bouton, force a lire la
   difference avant de cliquer. Un menu deroulant "type de generation" aurait
   laisse choisir sans lire. */
.choix-generation[b-7y5q57lwof] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: .9rem;
}

@media (max-width: 40rem) {
    .choix-generation[b-7y5q57lwof] { grid-template-columns: 1fr; }
}

.choix[b-7y5q57lwof] {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .45rem;
    padding: .8rem .9rem;
    display: flex;
    flex-direction: column;
}

.choix h3[b-7y5q57lwof] {
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 .4rem;
}

.choix p[b-7y5q57lwof] {
    font-size: .8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .62);
    margin: 0 0 .6rem;
    flex: 1 1 auto;
}

.choix label[b-7y5q57lwof] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .55);
}

/* Le bouton de chaque cadre s'aligne en bas : les deux paragraphes n'ont pas
   la meme longueur, et deux boutons a deux hauteurs se lisent comme deux
   importances differentes. */
.choix > .btn[b-7y5q57lwof] { align-self: flex-start; }
/* /Components/EnvoiRapport.razor.rz.scp.css */
/* Les regles de formulaire sont redeclarees ici : le CSS des composants Blazor
   est ISOLE, et une fenetre qui ne les porte pas retombe sur des <label> en
   ligne et un <textarea> de vingt colonnes. La lecon de la liv25. */

.formulaire[b-861qiplwkj] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-861qiplwkj] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.formulaire textarea.form-control[b-861qiplwkj] {
    width: 100%;
    min-height: 9rem;
    resize: vertical;
    text-transform: none;
    letter-spacing: 0;
}

.aide[b-861qiplwkj] {
    margin: -.4rem 0 0;
    font-size: .78rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .5);
}

/* Le rappel d'un envoi deja fait. Un trait a gauche autant qu'une couleur :
   la couleur seule ne se voit pas sur un ecran mal regle, et c'est justement
   l'avertissement qu'il ne faut pas manquer. */
.deja-envoye[b-861qiplwkj] {
    padding: .5rem .7rem;
    border-left: 3px solid #F0A44E;
    background: rgba(240, 164, 78, .1);
    border-radius: .25rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .82);
}

/* Ce que le message emporte, annonce et cliquable. */
.piece[b-861qiplwkj] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .7rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .3rem;
    background: rgba(255, 255, 255, .03);
    font-size: .84rem;
}

.piece .etiquette[b-861qiplwkj] {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .45);
    white-space: nowrap;
}

.piece a[b-861qiplwkj] { color: rgba(255, 255, 255, .9); text-decoration: underline; overflow-wrap: anywhere; }
/* /Components/FicheEchange.razor.rz.scp.css */
.entete[b-b4mbf1ptxt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

.drapeaux[b-b4mbf1ptxt] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.ajout[b-b4mbf1ptxt] {
    margin: .9rem 0;
    padding: .7rem;
    border-radius: .4rem;
    background: rgba(255, 255, 255, .04);
}

.titre-fil[b-b4mbf1ptxt] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .55);
    margin: 1.1rem 0 .5rem;
}

.titre-fil .texte-faible[b-b4mbf1ptxt] { text-transform: none; letter-spacing: 0; font-size: .78rem; }
/* /Components/FilCommentaires.razor.rz.scp.css */
/* Feuille isolee : compilee dans Gmao.Web.styles.css, rien a declarer ailleurs. */

.fil[b-dfp8qavf2x] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    /* Explicitement SANS hauteur maximale ni overflow : c'est la page qui
       defile. Ces deux lignes annulent une eventuelle regle .fil globale. */
    max-height: none;
    overflow: visible;
}

.fil-recherche[b-dfp8qavf2x] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}

.fil-recherche input[b-dfp8qavf2x] { max-width: 26rem; }

/* Separateur d'annee : sur un fil de quinze ans, c'est ce qui evite de lire
   les dates une par une pour savoir ou l'on se trouve. */
.fil-annee[b-dfp8qavf2x] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .6rem 0 .1rem;
    font-size: .7rem;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .38);
}

.fil-annee[b-dfp8qavf2x]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .12);
}

.fil-item[b-dfp8qavf2x] {
    border-left: 3px solid #6E6E6E;   /* surcharge en ligne : couleur de l'auteur */
    background: rgba(255, 255, 255, .035);
    border-radius: 0 .35rem .35rem 0;
    padding: .5rem .7rem .55rem;
}

.fil-tete[b-dfp8qavf2x] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .3rem;
}

.fil-date[b-dfp8qavf2x] { font-size: .76rem; }

.fil-texte[b-dfp8qavf2x] {
    /* pre-wrap plutot qu'un <pre> : les retours a la ligne d'Access sont
       conserves, mais le texte se recoupe a la largeur disponible au lieu
       de provoquer un defilement horizontal. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .84rem;
    line-height: 1.45;
    margin: 0;
    color: rgba(255, 255, 255, .88);
}

.fil-plus[b-dfp8qavf2x] {
    margin-top: .35rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: .76rem;
    color: var(--accent, #F0A500);
    cursor: pointer;
}

.fil-plus:hover[b-dfp8qavf2x] { text-decoration: underline; }

.fil-pied[b-dfp8qavf2x] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .7rem;
    flex-wrap: wrap;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-f6j0p1m4hc] { position: relative; display: flex; flex-direction: column; }

main[b-f6j0p1m4hc] { flex: 1; }

.sidebar[b-f6j0p1m4hc] {
    background: var(--barre, #2A2A2A);
    border-right: 1px solid var(--bordure, #4A4A4A);
}

.top-row[b-f6j0p1m4hc] {
    background-color: var(--surface, #3C3C3C);
    border-bottom: 1px solid var(--bordure, #4A4A4A);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-f6j0p1m4hc]  a, .top-row[b-f6j0p1m4hc]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    color: var(--texte-2, #ADADAD);
}

.top-row[b-f6j0p1m4hc]  a:hover, .top-row[b-f6j0p1m4hc]  .btn-link:hover {
    color: var(--datis-orange, #FD7E00);
}

.top-row[b-f6j0p1m4hc]  a:first-child { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640.98px) {
    .top-row[b-f6j0p1m4hc] { justify-content: space-between; }
    .top-row[b-f6j0p1m4hc]  a, .top-row[b-f6j0p1m4hc]  .btn-link { margin-left: 0; }
}

@media (min-width: 641px) {
    .page[b-f6j0p1m4hc] { flex-direction: row; }

    .sidebar[b-f6j0p1m4hc] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-f6j0p1m4hc] { position: sticky; top: 0; z-index: 1; }

    .top-row.auth[b-f6j0p1m4hc]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-f6j0p1m4hc], article[b-f6j0p1m4hc] { padding-left: 2rem !important; padding-right: 1.5rem !important; }
}

#blazor-error-ui[b-f6j0p1m4hc] {
    color-scheme: dark;
    background: rgba(255, 138, 138, .14);
    border-top: 2px solid #FF8A8A;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-f6j0p1m4hc] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-puu2oo1v7g] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28253, 126, 0, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") no-repeat center/1.75rem rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.navbar-toggler:checked[b-puu2oo1v7g] { background-color: rgba(255, 255, 255, 0.1); }

/* Bandeau de marque : fond sombre pour que le logo orange ressorte,
   sans degrade -- l'identite DATIS est plate et franche. */
.top-row[b-puu2oo1v7g] {
    height: 3.5rem;
    background: #262626;
    border-bottom: 1px solid var(--bordure, #4A4A4A);
}

.navbar-brand[b-puu2oo1v7g] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--texte, #EDEDED);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.navbar-brand img[b-puu2oo1v7g] { height: 1.6rem; width: auto; display: block; }

.nav-item[b-puu2oo1v7g] { font-size: 0.95rem; padding-bottom: 0.4rem; }

/* La marge du haut et celle du bas appartiennent a la COLONNE, pas a chaque
   groupe : depuis que les rubriques sont des <details>, les .nav-item ne sont
   plus tous freres, et un simple :first-of-type aurait rajoute un rem en haut
   et en bas de chacun des six groupes. */
nav > .nav-item:first-of-type[b-puu2oo1v7g] { padding-top: 1rem; }
nav > .nav-item:last-of-type[b-puu2oo1v7g] { padding-bottom: 1rem; }

.nav-item[b-puu2oo1v7g]  .nav-link {
    color: var(--texte-2, #ADADAD);
    background: none;
    border: none;
    border-radius: 4px;
    height: 2.85rem;
    display: flex;
    align-items: center;
    line-height: 2.85rem;
    width: 100%;
}

.nav-item[b-puu2oo1v7g]  a.active {
    background-color: rgba(253, 126, 0, 0.14);
    color: var(--datis-orange, #FD7E00);
    box-shadow: inset 3px 0 0 var(--datis-orange, #FD7E00);
}

.nav-item[b-puu2oo1v7g]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--texte, #EDEDED);
}

.nav-scrollable[b-puu2oo1v7g] { display: none; }
.navbar-toggler:checked ~ .nav-scrollable[b-puu2oo1v7g] { display: block; }

@media (min-width: 641px) {
    .navbar-toggler[b-puu2oo1v7g] { display: none; }
    .nav-scrollable[b-puu2oo1v7g] {
        display: block;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Le libelle ne doit jamais passer a la ligne : une adresse professionnelle
   depasse la largeur de la colonne et casserait l'alignement des icones. */
.nav-item[b-puu2oo1v7g]  .nav-link {
    white-space: nowrap;
    overflow: hidden;
}

.nav-item[b-puu2oo1v7g]  .tronque {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* --- numero de version ----------------------------------------------------
   En pied de colonne, la ou se rangent les informations sur l'outil lui-meme.
   A cote du logo il se battait avec la marque pour une place que la marque
   doit garder. */

.version[b-puu2oo1v7g] {
    display: block;
    margin: 1.2rem 1.5rem 1.5rem;
    padding: .25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .3);
    text-decoration: none;
    white-space: nowrap;
}

.version:hover[b-puu2oo1v7g] { color: var(--datis-orange, #FD7E00); }

/* --- rubriques du menu ----------------------------------------------------
   Quinze entrees a la file ne se lisent pas. Un intertitre tous les trois ou
   quatre liens, et l'oeil trouve la bonne moitie de la liste avant meme
   d'avoir lu les libelles.

   L'intertitre est le <summary> d'un <details> : il replie sa rubrique sans
   une ligne de script ni d'etat Blazor. Le clavier, le focus et le role
   viennent avec, et le chevron se pilote a l'attribut [open].

   (La mise en page est rendue en statique -- l'interactivite de BELENOS est
   declaree page par page. Un @onclick pose ici ne serait pas cable : il
   n'aurait produit ni erreur, ni effet.) */

.groupe-nav > summary.rubrique-nav[b-puu2oo1v7g] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .85rem 1.5rem .2rem;
    cursor: pointer;
    list-style: none;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: rgba(255, 255, 255, .3);
    user-select: none;
}

.groupe-nav > summary.rubrique-nav[b-puu2oo1v7g]::-webkit-details-marker { display: none; }

.groupe-nav > summary.rubrique-nav:hover[b-puu2oo1v7g] { color: rgba(255, 255, 255, .6); }

.groupe-nav > summary.rubrique-nav:focus-visible[b-puu2oo1v7g] {
    outline: 2px solid var(--datis-orange, #FD7E00);
    outline-offset: -2px;
    border-radius: 3px;
}

/* Le chevron est un caractere, pas une image : il tourne, il suit la couleur
   du texte, et il ne coute rien. */
.groupe-nav > summary.rubrique-nav .chevron[b-puu2oo1v7g]::before {
    content: "\25B8";
    display: inline-block;
    font-size: .85rem;
    line-height: 1;
    transition: transform .12s ease;
}

.groupe-nav[open] > summary.rubrique-nav .chevron[b-puu2oo1v7g]::before { transform: rotate(90deg); }

/* --- icones ---------------------------------------------------------------
   Un masque, pas une image de fond.

   Une image de fond porte sa propre couleur : il aurait fallu un dessin gris,
   un dessin blanc pour le survol et un dessin orange pour l'entree active,
   soit trois fois vingt-deux fichiers. Avec mask-image le dessin ne donne que
   sa forme, la couleur vient de currentColor -- donc du lien. Gris au repos,
   blanc au survol, orange quand la page est ouverte, sans une ligne de plus.

   (Les icones ajoutees apres coup en liv16 ne s'affichaient pas : leur URL
   commencait a "%3Csvg", sans le "data:image/svg+xml," qui doit la preceder.
   Une URL invalide ne fait pas d'erreur visible : elle ne dessine rien.) */

.ic[b-puu2oo1v7g] {
    flex: none;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: .75rem;
    position: relative;
    top: -1px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.ic-tableau[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E");
}

.ic-prospection[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.3 15.3 20.5 20.5'/%3E%3Cpath d='M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.3 15.3 20.5 20.5'/%3E%3Cpath d='M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
}

.ic-tiers[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5.5A1.5 1.5 0 0 1 5.5 4h7A1.5 1.5 0 0 1 14 5.5V21'/%3E%3Cpath d='M14 10h4.5A1.5 1.5 0 0 1 20 11.5V21'/%3E%3Cpath d='M2.8 21h18.4'/%3E%3Cpath d='M7 8h4M7 11.5h4M7 15h4M17 14h1M17 17.5h1'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5.5A1.5 1.5 0 0 1 5.5 4h7A1.5 1.5 0 0 1 14 5.5V21'/%3E%3Cpath d='M14 10h4.5A1.5 1.5 0 0 1 20 11.5V21'/%3E%3Cpath d='M2.8 21h18.4'/%3E%3Cpath d='M7 8h4M7 11.5h4M7 15h4M17 14h1M17 17.5h1'/%3E%3C/svg%3E");
}

.ic-contrats[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h7l5 5v13H6z'/%3E%3Cpath d='M13 3v5h5'/%3E%3Cpath d='M9 13h6M9 16.5h4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h7l5 5v13H6z'/%3E%3Cpath d='M13 3v5h5'/%3E%3Cpath d='M9 13h6M9 16.5h4'/%3E%3C/svg%3E");
}

/* Un texte redige : une feuille avec des lignes et un crayon. Ajoutee en 48.
   Distincte de .ic-contrats -- une feuille pliee -- parce que les deux entrees
   se suivent dans le menu et qu'un meme dessin les rendrait interchangeables. */
.ic-documents[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21H13'/%3E%3Cpath d='M8.5 7.5h6M8.5 11h6M8.5 14.5h3'/%3E%3Cpath d='M20 12.5 15.5 17l-2.5.6.6-2.5 4.5-4.5z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21H13'/%3E%3Cpath d='M8.5 7.5h6M8.5 11h6M8.5 14.5h3'/%3E%3Cpath d='M20 12.5 15.5 17l-2.5.6.6-2.5 4.5-4.5z'/%3E%3C/svg%3E");
}

/* Une courbe qui monte dans un cadre : ce que l'ecran montre, et rien de plus
   parlant a 16 pixels. Ajoutee en 49. */
.ic-graphiques[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v15.5h16'/%3E%3Cpath d='M7.5 15l3.5-4.5 3 2.5 4.5-6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v15.5h16'/%3E%3Cpath d='M7.5 15l3.5-4.5 3 2.5 4.5-6'/%3E%3C/svg%3E");
}

.ic-types[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.2V5a1.5 1.5 0 0 1 1.5-1.5h6.2a1.5 1.5 0 0 1 1.06.44l7.3 7.3a1.5 1.5 0 0 1 0 2.12l-6.2 6.2a1.5 1.5 0 0 1-2.12 0l-7.3-7.3a1.5 1.5 0 0 1-.44-1.06z'/%3E%3Ccircle cx='7.8' cy='7.8' r='1.3'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.2V5a1.5 1.5 0 0 1 1.5-1.5h6.2a1.5 1.5 0 0 1 1.06.44l7.3 7.3a1.5 1.5 0 0 1 0 2.12l-6.2 6.2a1.5 1.5 0 0 1-2.12 0l-7.3-7.3a1.5 1.5 0 0 1-.44-1.06z'/%3E%3Ccircle cx='7.8' cy='7.8' r='1.3'/%3E%3C/svg%3E");
}

.ic-montants[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Cpath d='M14.8 9.5a3.4 3.4 0 1 0 0 5'/%3E%3Cpath d='M8.6 11h4.4M8.6 13h4.4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Cpath d='M14.8 9.5a3.4 3.4 0 1 0 0 5'/%3E%3Cpath d='M8.6 11h4.4M8.6 13h4.4'/%3E%3C/svg%3E");
}

.ic-heures[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 6.8v5.4l3.4 2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 6.8v5.4l3.4 2'/%3E%3C/svg%3E");
}

.ic-ventes[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='19.6' r='1.4'/%3E%3Ccircle cx='17.6' cy='19.6' r='1.4'/%3E%3Cpath d='M2.5 3.5h2.4l2.3 11.1a1.5 1.5 0 0 0 1.47 1.2h8.3a1.5 1.5 0 0 0 1.47-1.18L20 7.5H6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='19.6' r='1.4'/%3E%3Ccircle cx='17.6' cy='19.6' r='1.4'/%3E%3Cpath d='M2.5 3.5h2.4l2.3 11.1a1.5 1.5 0 0 0 1.47 1.2h8.3a1.5 1.5 0 0 0 1.47-1.18L20 7.5H6'/%3E%3C/svg%3E");
}

.ic-catalogue[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A1.5 1.5 0 0 1 5.5 3H19v15H5.5A1.5 1.5 0 0 0 4 19.5z'/%3E%3Cpath d='M4 19.5A1.5 1.5 0 0 0 5.5 21H19v-3'/%3E%3Cpath d='M8 7.5h7M8 11h7'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A1.5 1.5 0 0 1 5.5 3H19v15H5.5A1.5 1.5 0 0 0 4 19.5z'/%3E%3Cpath d='M4 19.5A1.5 1.5 0 0 0 5.5 21H19v-3'/%3E%3Cpath d='M8 7.5h7M8 11h7'/%3E%3C/svg%3E");
}

.ic-interventions[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.6 3.6a5.5 5.5 0 0 0-6.9 6.9L3.6 15.6a2 2 0 0 0 0 2.8l2 2a2 2 0 0 0 2.8 0l5.1-5.1a5.5 5.5 0 0 0 6.9-6.9l-3 3-2.8-.7-.7-2.8z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.6 3.6a5.5 5.5 0 0 0-6.9 6.9L3.6 15.6a2 2 0 0 0 0 2.8l2 2a2 2 0 0 0 2.8 0l5.1-5.1a5.5 5.5 0 0 0 6.9-6.9l-3 3-2.8-.7-.7-2.8z'/%3E%3C/svg%3E");
}

.ic-machines[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5V3.5h10v5'/%3E%3Cpath d='M3 10.5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 16.5H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 13.5h10v7H7z'/%3E%3Cpath d='M5.8 11.5h1.6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5V3.5h10v5'/%3E%3Cpath d='M3 10.5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 16.5H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 13.5h10v7H7z'/%3E%3Cpath d='M5.8 11.5h1.6'/%3E%3C/svg%3E");
}

.ic-licences[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.2' cy='16.8' r='3.6'/%3E%3Cpath d='M9.9 14.2 20.3 3.8'/%3E%3Cpath d='M17.2 6.9l2.4 2.4M14.6 9.5l2.4 2.4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.2' cy='16.8' r='3.6'/%3E%3Cpath d='M9.9 14.2 20.3 3.8'/%3E%3Cpath d='M17.2 6.9l2.4 2.4M14.6 9.5l2.4 2.4'/%3E%3C/svg%3E");
}

/* AJOUTE EN 50. Un sceau : la licence qu'on EMET et qu'on signe.
   Deliberement differente de .ic-licences, qui est une cle et designe le
   parc du client : les deux entrees vivent dans le menu en meme temps, et
   un meme dessin les rendrait interchangeables. */
.ic-licences-datis[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.5' r='5.5'/%3E%3Cpath d='M12 6.8v5.4M10.3 8.2h3.4M10.3 11h3.4'/%3E%3Cpath d='M8.6 14.6 7.5 21l4.5-2.2L16.5 21l-1.1-6.4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.5' r='5.5'/%3E%3Cpath d='M12 6.8v5.4M10.3 8.2h3.4M10.3 11h3.4'/%3E%3Cpath d='M8.6 14.6 7.5 21l4.5-2.2L16.5 21l-1.1-6.4'/%3E%3C/svg%3E");
}

/* AJOUTE EN 50. Une fenetre d'application avec sa barre de titre : le
   PRODUIT, par opposition a son installation. */
.ic-applications[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 8.5h18'/%3E%3Ccircle cx='6' cy='6.2' r='.6' fill='%23000'/%3E%3Ccircle cx='8.4' cy='6.2' r='.6' fill='%23000'/%3E%3Cpath d='M7 12.5h10M7 16h6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 8.5h18'/%3E%3Ccircle cx='6' cy='6.2' r='.6' fill='%23000'/%3E%3Ccircle cx='8.4' cy='6.2' r='.6' fill='%23000'/%3E%3Cpath d='M7 12.5h10M7 16h6'/%3E%3C/svg%3E");
}

/* AJOUTE EN 50. Un bouclier avec une cle : la signature, et non l'acces. */
.ic-cles[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v6c0 4.2 3.1 7.6 7.5 9 4.4-1.4 7.5-4.8 7.5-9V6z'/%3E%3Ccircle cx='10.3' cy='13.2' r='2.1'/%3E%3Cpath d='M11.9 11.8 15.4 8.3'/%3E%3Cpath d='M14.1 9.6l1.3 1.3'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v6c0 4.2 3.1 7.6 7.5 9 4.4-1.4 7.5-4.8 7.5-9V6z'/%3E%3Ccircle cx='10.3' cy='13.2' r='2.1'/%3E%3Cpath d='M11.9 11.8 15.4 8.3'/%3E%3Cpath d='M14.1 9.6l1.3 1.3'/%3E%3C/svg%3E");
}

/* AJOUTE EN 50. Deux accolades : le contrat d'echange, dans le langage de
   celui qui va l'implementer. */
.ic-api[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3.5C7 3.5 7 6 7 7.5s0 3-2 4.5c2 1.5 2 3 2 4.5s0 4 2.5 4'/%3E%3Cpath d='M14.5 3.5c2.5 0 2.5 2.5 2.5 4s0 3 2 4.5c-2 1.5-2 3-2 4.5s0 4-2.5 4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3.5C7 3.5 7 6 7 7.5s0 3-2 4.5c2 1.5 2 3 2 4.5s0 4 2.5 4'/%3E%3Cpath d='M14.5 3.5c2.5 0 2.5 2.5 2.5 4s0 3 2 4.5c-2 1.5-2 3-2 4.5s0 4-2.5 4'/%3E%3C/svg%3E");
}

.ic-import[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.2V3.4'/%3E%3Cpath d='M7.6 7.8 12 3.4l4.4 4.4'/%3E%3Cpath d='M3.5 15v3.5a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V15'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.2V3.4'/%3E%3Cpath d='M7.6 7.8 12 3.4l4.4 4.4'/%3E%3Cpath d='M3.5 15v3.5a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V15'/%3E%3C/svg%3E");
}

.ic-demandes[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12.4c0 3.9-3.8 7.1-8.5 7.1a10 10 0 0 1-2.6-.34L4.2 21l1.4-3.6a6.8 6.8 0 0 1-2.1-5c0-3.9 3.8-7.1 8.5-7.1s8.5 3.2 8.5 7.1z'/%3E%3Cpath d='M8.4 11.8h7.2M8.4 8.8h4.4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12.4c0 3.9-3.8 7.1-8.5 7.1a10 10 0 0 1-2.6-.34L4.2 21l1.4-3.6a6.8 6.8 0 0 1-2.1-5c0-3.9 3.8-7.1 8.5-7.1s8.5 3.2 8.5 7.1z'/%3E%3Cpath d='M8.4 11.8h7.2M8.4 8.8h4.4'/%3E%3C/svg%3E");
}

.ic-nouveautes[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.2 3.6 13 8.9l5.3 1.8-5.3 1.8-1.8 5.3-1.8-5.3L4.1 10.7 9.4 8.9z'/%3E%3Cpath d='M18.6 3v3.4M16.9 4.7h3.4'/%3E%3Cpath d='M17.8 16.4v2.6M16.5 17.7h2.6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.2 3.6 13 8.9l5.3 1.8-5.3 1.8-1.8 5.3-1.8-5.3L4.1 10.7 9.4 8.9z'/%3E%3Cpath d='M18.6 3v3.4M16.9 4.7h3.4'/%3E%3Cpath d='M17.8 16.4v2.6M16.5 17.7h2.6'/%3E%3C/svg%3E");
}

.ic-utilisateurs[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.3' cy='8.4' r='3.6'/%3E%3Cpath d='M3.2 20c0-3.4 2.8-5.7 6.1-5.7s6.1 2.3 6.1 5.7'/%3E%3Cpath d='M16.4 5.4a3.5 3.5 0 0 1 0 6.2'/%3E%3Cpath d='M17.9 14.6c1.7.8 2.9 2.3 2.9 4.2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.3' cy='8.4' r='3.6'/%3E%3Cpath d='M3.2 20c0-3.4 2.8-5.7 6.1-5.7s6.1 2.3 6.1 5.7'/%3E%3Cpath d='M16.4 5.4a3.5 3.5 0 0 1 0 6.2'/%3E%3Cpath d='M17.9 14.6c1.7.8 2.9 2.3 2.9 4.2'/%3E%3C/svg%3E");
}

.ic-administration[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7h9.5M17.5 7h3M3.5 12h3M10.5 12h10M3.5 17h9.5M17.5 17h3'/%3E%3Ccircle cx='15.2' cy='7' r='2.1'/%3E%3Ccircle cx='8.7' cy='12' r='2.1'/%3E%3Ccircle cx='15.2' cy='17' r='2.1'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7h9.5M17.5 7h3M3.5 12h3M10.5 12h10M3.5 17h9.5M17.5 17h3'/%3E%3Ccircle cx='15.2' cy='7' r='2.1'/%3E%3Ccircle cx='8.7' cy='12' r='2.1'/%3E%3Ccircle cx='15.2' cy='17' r='2.1'/%3E%3C/svg%3E");
}

/* La sante : un trace de moniteur. Il ne represente PAS ce que la page
   montre -- elle ne surveille aucun rythme -- mais c'est le seul dessin
   que tout le monde lit comme "est-ce que ca va" sans legende. */
.ic-sante[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 12h4.1l2.1-5.4 3.6 11.2 2.3-5.8h6.3'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 12h4.1l2.1-5.4 3.6 11.2 2.3-5.8h6.3'/%3E%3C/svg%3E");
}

.ic-profil[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Ccircle cx='12' cy='9.9' r='3.2'/%3E%3Cpath d='M5.9 18.9a7 7 0 0 1 12.2 0'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Ccircle cx='12' cy='9.9' r='3.2'/%3E%3Cpath d='M5.9 18.9a7 7 0 0 1 12.2 0'/%3E%3C/svg%3E");
}

.ic-compte[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Ccircle cx='8.4' cy='10.8' r='2.3'/%3E%3Cpath d='M4.7 16.4a4.1 4.1 0 0 1 7.4 0'/%3E%3Cpath d='M14.5 9.8h4.6M14.5 13.4h4.6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Ccircle cx='8.4' cy='10.8' r='2.3'/%3E%3Cpath d='M4.7 16.4a4.1 4.1 0 0 1 7.4 0'/%3E%3Cpath d='M14.5 9.8h4.6M14.5 13.4h4.6'/%3E%3C/svg%3E");
}

.ic-ajout-utilisateur[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.6' cy='8.4' r='3.7'/%3E%3Cpath d='M3.2 20.2c0-3.5 2.9-5.9 6.4-5.9 1 0 1.9.2 2.8.5'/%3E%3Cpath d='M17.8 13.8v6.4M14.6 17h6.4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.6' cy='8.4' r='3.7'/%3E%3Cpath d='M3.2 20.2c0-3.5 2.9-5.9 6.4-5.9 1 0 1.9.2 2.8.5'/%3E%3Cpath d='M17.8 13.8v6.4M14.6 17h6.4'/%3E%3C/svg%3E");
}

.ic-deconnexion[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M9.8 8 5.8 12l4 4'/%3E%3Cpath d='M5.8 12H15'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M9.8 8 5.8 12l4 4'/%3E%3Cpath d='M5.8 12H15'/%3E%3C/svg%3E");
}

.ic-connexion[b-puu2oo1v7g] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4.5h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M14.2 8l4 4-4 4'/%3E%3Cpath d='M18.2 12H9'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4.5h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M14.2 8l4 4-4 4'/%3E%3Cpath d='M18.2 12H9'/%3E%3C/svg%3E");
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-qgrzs242cz],
.components-reconnect-repeated-attempt-visible[b-qgrzs242cz],
.components-reconnect-failed-visible[b-qgrzs242cz],
.components-pause-visible[b-qgrzs242cz],
.components-resume-failed-visible[b-qgrzs242cz],
.components-rejoining-animation[b-qgrzs242cz] {
    display: none;
}

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


#components-reconnect-modal[b-qgrzs242cz] {
    background-color: white;
    width: 20rem;
    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-qgrzs242cz 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-qgrzs242cz {
    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/LignesPieces.razor.rz.scp.css */
/* Les pieces posees : une CARTE par piece, pas une ligne de tableau.

   Un tableau aligne des colonnes pour qu'on les compare d'une ligne a l'autre.
   Ici on ne compare rien : on decrit une piece a la fois, avec cinq champs dont
   un commentaire libre. La carte donne au commentaire sa pleine largeur au lieu
   de l'ecraser dans une septieme colonne.

   Le CSS des composants est ISOLE : rien de ce qui est declare dans
   MachineFiche.razor.css n'arrive ici. Tout ce dont ce bloc a besoin est donc
   redeclare ci-dessous -- y compris .btn-supprimer, qui existe deja ailleurs
   sous le meme nom et qui ne serait pourtant pas applique. */

.pieces[b-y0lqhb4u5m] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.piece[b-y0lqhb4u5m] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .55rem .6rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 3px solid rgba(255, 255, 255, .18);
    border-radius: .35rem;
    background: rgba(255, 255, 255, .025);
}

/* Une piece que le client ne paiera pas se voit d'un coup d'oeil : c'est la
   question qu'on se pose en relisant une intervention trois semaines apres. */
.piece.hors-facture[b-y0lqhb4u5m] {
    border-left-color: rgba(120, 200, 255, .55);
}

.rangee[b-y0lqhb4u5m] {
    display: grid;
    grid-template-columns:
        minmax(9rem, 2.4fr)   /* designation */
        minmax(6.5rem, 1.1fr) /* reference   */
        4.2rem                /* quantite    */
        minmax(8.5rem, 1fr)   /* prise en charge */
        6rem                  /* prix unitaire   */
        1.5rem;               /* retirer      */
    gap: .4rem;
    align-items: end;
}

.rangee > label[b-y0lqhb4u5m] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.commentaire[b-y0lqhb4u5m] {
    font-size: .82rem;
    font-style: italic;
    background: transparent;
    border-style: dashed;
}

.commentaire:focus[b-y0lqhb4u5m] {
    font-style: normal;
    background: rgba(0, 0, 0, .2);
    border-style: solid;
}

.btn-supprimer[b-y0lqhb4u5m] {
    border: 0;
    background: none;
    font-size: 1.05rem;
    line-height: 1;
    color: rgba(255, 255, 255, .3);
    cursor: pointer;
    padding: 0 .2rem;
    align-self: center;
    margin-bottom: .15rem;
}

.btn-supprimer:hover[b-y0lqhb4u5m] { color: #FF8A8A; }

.pied[b-y0lqhb4u5m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .15rem;
}

.totaux .brut[b-y0lqhb4u5m] {
    margin-left: .4rem;
    opacity: .7;
}

/* Sous 900 px, six colonnes deviennent six colonnes illisibles. On abandonne la
   grille pour un enchainement souple : la designation prend toute la largeur,
   le reste se replie de lui-meme dans l'ordre de la saisie. Aucun placement
   explicite -- c'est la ou une grille se met a trouer. */
@media (max-width: 900px) {
    .rangee[b-y0lqhb4u5m] {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: flex-end;
    }

    .rangee > label[b-y0lqhb4u5m] { flex: 1 1 8rem; }
    .rangee > label.c-des[b-y0lqhb4u5m] { flex: 1 1 100%; }
    .rangee > label.c-qte[b-y0lqhb4u5m] { flex: 0 0 4.5rem; }
    .rangee > label.c-pu[b-y0lqhb4u5m] { flex: 0 0 6rem; }
}
/* /Components/ListeDocuments.razor.rz.scp.css */
.documents[b-3g0g872ne1] { list-style: none; margin: 0; padding: 0; }

.documents li[b-3g0g872ne1] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .22rem 0;
    font-size: .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.documents li:last-child[b-3g0g872ne1] { border-bottom: 0; }

/* Le nom du fichier est un bouton, pas un lien : il ouvre la visionneuse au
   lieu de quitter la page. Il doit malgre tout se lire comme un lien. */
.documents .nom[b-3g0g872ne1] {
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.documents .nom:hover[b-3g0g872ne1] { text-decoration: underline; color: #fff; }

.documents .telecharger[b-3g0g872ne1] {
    color: rgba(255, 255, 255, .35);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .15rem;
}

.documents .telecharger:hover[b-3g0g872ne1] { color: var(--datis-orange, #FD7E00); }

.btn-supprimer[b-3g0g872ne1] {
    border: 0;
    background: none;
    font-size: 1.05rem;
    line-height: 1;
    color: rgba(255, 255, 255, .3);
    cursor: pointer;
    padding: 0 .2rem;
}

.btn-supprimer:hover[b-3g0g872ne1] { color: #FF8A8A; }

/* --- la visionneuse ------------------------------------------------------- */

.visionneuse[b-3g0g872ne1] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 12rem;
}

/* 70vh : assez grand pour lire une page A4, assez court pour que le pied de la
   fenetre -- donc le bouton Telecharger -- reste visible sans defiler. */
.visionneuse iframe[b-3g0g872ne1] {
    width: 100%;
    height: 70vh;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .35rem;
    background: #fff;
}

.visionneuse img[b-3g0g872ne1] {
    max-width: 100%;
    max-height: 70vh;
    border-radius: .35rem;
}
/* /Components/NouvelleAffaire.razor.rz.scp.css */
.formulaire[b-1p0uj617po] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-1p0uj617po],
.formulaire .ligne label[b-1p0uj617po] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.formulaire .ligne[b-1p0uj617po] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    align-items: flex-end;
}

.raccourcis[b-1p0uj617po] {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    padding-bottom: .1rem;
}

.bandeau[b-1p0uj617po] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    font-size: .87rem;
}

.bandeau.alerte[b-1p0uj617po] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }
/* /Components/Pages/Administration.razor.rz.scp.css */
.bloc[b-e28uy5dbrl] { margin-bottom: 2rem; }

.bloc h2 .compte[b-e28uy5dbrl] {
    font-size: .7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .45);
    margin-left: .5rem;
    text-transform: none;
    letter-spacing: 0;
}

.bandeau[b-e28uy5dbrl] { padding: .55rem .8rem; border-radius: .35rem; margin-bottom: .9rem; font-size: .87rem; }
.bandeau.ok[b-e28uy5dbrl] { background: rgba(152, 251, 152, .12); border-left: 3px solid #98FB98; }
.bandeau.alerte[b-e28uy5dbrl] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

/* --- la porte -------------------------------------------------------------

   Volontairement etroite et centree : c'est un seuil, pas un ecran. Tout ce
   qu'il y a a faire est visible d'un coup d'oeil. */

.porte[b-e28uy5dbrl] {
    max-width: 22rem;
    margin: 2rem auto;
    padding: 1.2rem 1.4rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .5rem;
}

/* --- formulaire ----------------------------------------------------------- */

.formulaire[b-e28uy5dbrl] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-e28uy5dbrl],
.formulaire .ligne label[b-e28uy5dbrl] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.formulaire .ligne[b-e28uy5dbrl] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.formulaire .ligne label.grandit[b-e28uy5dbrl] { flex: 1 1 16rem; }

.formulaire .ligne label.case[b-e28uy5dbrl] {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    padding-bottom: .35rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
}

/* L'explication vit sous le champ qu'elle explique, pas dans une infobulle :
   ce qui se survole ne se lit jamais la premiere fois. */
.aide[b-e28uy5dbrl] {
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    margin: -.3rem 0 0;
    max-width: 80ch;
}

/* --- apercu ---------------------------------------------------------------

   L'apercu montre la STRUCTURE du message, pas son rendu : reproduire le HTML
   du courriel dans un fond sombre donnerait une idee fausse de ce qui arrive
   dans la boite mail. Ce qu'on verifie ici, c'est le contenu. */

.apercu-section[b-e28uy5dbrl] {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .4rem;
    padding: .6rem .8rem;
    margin-bottom: .7rem;
}

.apercu-section .titre[b-e28uy5dbrl] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .5);
    margin-bottom: .4rem;
}

.apercu-section .titre .texte-faible[b-e28uy5dbrl] { text-transform: none; letter-spacing: 0; }

.ligne-apercu[b-e28uy5dbrl] {
    font-size: .84rem;
    padding: .3rem 0 .3rem .6rem;
    border-left: 3px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ligne-apercu:last-child[b-e28uy5dbrl] { border-bottom: 0; }

/* Le niveau se lit au trait ET a la couleur du texte : sur un ecran mal
   regle, un liset de 3 px de large ne suffit pas. */
.ligne-apercu.n1[b-e28uy5dbrl] { border-left-color: #E0AC4E; }
.ligne-apercu.n2[b-e28uy5dbrl] { border-left-color: #FF8A8A; }
.ligne-apercu.n2 > span:first-child[b-e28uy5dbrl] { color: #FF8A8A; }

.ligne-apercu .detail[b-e28uy5dbrl] {
    font-size: .74rem;
    color: rgba(255, 255, 255, .45);
    margin-top: .1rem;
}
/* /Components/Pages/AffaireFiche.razor.rz.scp.css */
.fil-ariane[b-wwl2hzrlny] {
    display: flex;
    gap: .4rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    margin-bottom: .4rem;
}

.fil-ariane a[b-wwl2hzrlny] { color: rgba(255, 255, 255, .68); text-decoration: none; }
.fil-ariane a:hover[b-wwl2hzrlny] { color: #fff; text-decoration: underline; }

.entete-affaire[b-wwl2hzrlny] { margin-bottom: 1.1rem; }

.drapeaux[b-wwl2hzrlny] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .35rem;
}

/* Le bouton de renommage reste discret : il n'apparait franchement qu'au
   survol du titre, pour ne pas concurrencer le titre lui-meme. */
.btn-crayon[b-wwl2hzrlny] {
    border: 0;
    background: none;
    padding: 0 .3rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .3);
    cursor: pointer;
    vertical-align: middle;
}

h1:hover .btn-crayon[b-wwl2hzrlny] { color: rgba(255, 255, 255, .7); }

.ajout[b-wwl2hzrlny] {
    padding: .8rem;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
}

.liste-affaires[b-wwl2hzrlny] { list-style: none; margin: 0; padding: 0; }

.liste-affaires li[b-wwl2hzrlny] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .25rem 0;
    font-size: .82rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.liste-affaires li:last-child[b-wwl2hzrlny] { border-bottom: 0; }

/* --- l'interlocuteur ------------------------------------------------------
   Le nom seul, et le reste a un clic. Les coordonnees sont utiles une fois
   sur dix ; les afficher en permanence les rendait toutes illisibles, y
   compris le nom qu'on lit, lui, a chaque ouverture. */

.interlocuteur[b-wwl2hzrlny] { display: block; }

.interlocuteur .ligne-nom[b-wwl2hzrlny] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.interlocuteur .nom[b-wwl2hzrlny] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    cursor: pointer;
    text-align: left;
}

.interlocuteur .nom:hover[b-wwl2hzrlny] { color: #fff; text-decoration: underline; }

/* Le "i" : un rond discret, mais une cible d'au moins 1,15rem -- un bouton
   qu'on rate deux fois sur trois n'est pas un bouton. */
.interlocuteur .info[b-wwl2hzrlny] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28);
    background: none;
    color: rgba(255, 255, 255, .6);
    font-size: .68rem;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.interlocuteur .info:hover[b-wwl2hzrlny],
.interlocuteur .info.ouvert[b-wwl2hzrlny] {
    border-color: var(--datis-orange, #FD7E00);
    color: var(--datis-orange, #FD7E00);
}

.interlocuteur .changer[b-wwl2hzrlny] {
    margin-left: auto;
    background: none;
    border: 0;
    padding: 0;
    font-size: .72rem;
    color: rgba(255, 255, 255, .4);
    cursor: pointer;
    text-decoration: underline;
}

.interlocuteur .changer:hover[b-wwl2hzrlny] { color: var(--datis-orange, #FD7E00); }

.interlocuteur .details[b-wwl2hzrlny] {
    margin-top: .3rem;
    padding-left: .55rem;
    border-left: 2px solid rgba(255, 255, 255, .12);
    font-size: .8rem;
    line-height: 1.5;
}

.interlocuteur .details a[b-wwl2hzrlny] { color: rgba(255, 255, 255, .8); text-decoration: none; }
.interlocuteur .details a:hover[b-wwl2hzrlny] { color: var(--datis-orange, #FD7E00); text-decoration: underline; }
/* /Components/Pages/ApplicationsDatis.razor.rz.scp.css */
/* La liste des versions du depot, et le lien de partage.
   Livraison 55.

   FEUILLE SCOPEE, ET PREMIERE DE CE COMPOSANT : Blazor la compile avec un
   attribut de portee propre a ApplicationsDatis, donc rien de ce qui suit ne
   peut deteindre sur un autre ecran. Tout le reste de la page continue de
   s'habiller aux classes communes (belenos-extra.css, app.css, Bootstrap) --
   on n'en redeclare aucune ici.

   Pas de ::deep : ces elements sont ecrits DANS ce composant, donc ils portent
   son attribut de portee. Blazor ajoute cet attribut au dernier selecteur
   compose, ce qui est exactement ce qu'on veut. */

/* ---------- la barre de reglage des liens ---------- */

.barre-liens[b-uhwymcr33o] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.champ-duree[b-uhwymcr33o] {
    width: auto;
    display: inline-block;
}

/* ---------- un produit et ses versions ---------- */

.bloc-versions[b-uhwymcr33o] {
    margin-top: .8rem;
    border: 1px solid var(--bordure, #555);
    border-radius: 6px;
    overflow: hidden;
}

.titre-versions[b-uhwymcr33o] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .4rem .6rem;
    background: var(--surface-2, #2f2f2f);
    border-bottom: 1px solid var(--bordure, #555);
}

/* L'empreinte est TRONQUEE A L'ECRAN et complete en infobulle : douze
   caracteres suffisent a comparer deux versions d'un coup d'oeil, et la
   totalite ferait deborder la ligne sur un ecran de portable. */
.empreinte[b-uhwymcr33o] {
    white-space: nowrap;
}

.colonne-action[b-uhwymcr33o] {
    text-align: right;
    white-space: nowrap;
}

/* ---------- le lien fabrique ---------- */

.bloc-lien[b-uhwymcr33o] {
    border-left: 3px solid var(--datis-orange, #E8791E);
    background: var(--surface-2, #2f2f2f);
    padding: .6rem .85rem;
    border-radius: .3rem;
}

/* user-select: all -- un double-clic selectionne TOUT le lien, jetons compris.
   C'est l'idiome que la page Documentation API emploie deja pour ses blocs de
   prompt, et il evite un bouton "copier" qui demanderait du JavaScript et ne
   marcherait qu'en HTTPS.

   word-break plutot que overflow-x : un lien coupe a l'affichage se recolle
   juste a la copie, alors qu'une barre de defilement cache la moitie de ce
   qu'on croit avoir selectionne. */
.lien-partage[b-uhwymcr33o] {
    display: block;
    user-select: all;
    word-break: break-all;
    font-size: .78rem;
    line-height: 1.45;
    padding: .45rem .6rem;
    border: 1px solid var(--bordure, #555);
    border-radius: .3rem;
    background: var(--ground, #333);
}
/* /Components/Pages/CatalogueConsommables.razor.rz.scp.css */
.filtres[b-lqfxzbol2o] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.filtres label[b-lqfxzbol2o] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.filtres label.case[b-lqfxzbol2o] {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    padding-bottom: .35rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
}

.bandeau[b-lqfxzbol2o] { padding: .55rem .8rem; border-radius: .35rem; margin-bottom: .9rem; font-size: .87rem; }
.bandeau.ok[b-lqfxzbol2o] { background: rgba(152, 251, 152, .12); border-left: 3px solid #98FB98; }
.bandeau.alerte[b-lqfxzbol2o] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

/* Les deux categories portent la meme teinte que le graphique de l'accueil :
   une couleur qui change de sens d'un ecran a l'autre ne veut plus rien dire. */
.etat-etiquette[b-lqfxzbol2o] { background: rgba(217, 108, 0, .16); color: #F0A44E; }
.etat-ruban[b-lqfxzbol2o]     { background: rgba(57, 135, 229, .16); color: #7FB4EE; }

tr.retiree[b-lqfxzbol2o] { opacity: .55; }

/* --- formulaire ----------------------------------------------------------- */

.formulaire[b-lqfxzbol2o] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-lqfxzbol2o],
.formulaire .ligne label[b-lqfxzbol2o] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.formulaire .ligne[b-lqfxzbol2o] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.formulaire .ligne label.grandit[b-lqfxzbol2o] { flex: 1 1 16rem; }

.formulaire .ligne label.case[b-lqfxzbol2o] {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    padding-bottom: .35rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
}

/* Deux faits distincts, deux lignes : la reference fournisseur est plus pale et
   en chasse fixe, pour qu'elle ne se confonde jamais avec le nom du fournisseur
   meme quand les deux sont courts. */
.reference-f[b-lqfxzbol2o] { color: rgba(255, 255, 255, .4); font-size: .78rem; }

.aide[b-lqfxzbol2o] {
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    margin: -.3rem 0 0;
}

/* --- l'historique des prix d'achat ---------------------------------------- */

.prix-achat[b-lqfxzbol2o] {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: .8rem;
}

.prix-achat h3[b-lqfxzbol2o] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .55);
    margin-bottom: .5rem;
}

.prix-achat table[b-lqfxzbol2o] { margin-bottom: .6rem; }

/* Un prix date de demain existe deja mais ne s'applique pas encore. Il se
   distingue d'un prix en vigueur, sinon on croit que le tarif a change. */
.prix-achat tr.a-venir[b-lqfxzbol2o] { opacity: .6; }

.variation[b-lqfxzbol2o] {
    font-size: .68rem;
    padding: .05rem .3rem;
    border-radius: .2rem;
    white-space: nowrap;
}

.variation.hausse[b-lqfxzbol2o] { background: rgba(224, 172, 78, .14); color: #E0AC4E; }
.variation.baisse[b-lqfxzbol2o] { background: rgba(152, 251, 152, .13); color: #98FB98; }
.variation.futur[b-lqfxzbol2o]  { background: rgba(57, 135, 229, .16); color: #7FB4EE; margin-left: .3rem; }

.btn-supprimer[b-lqfxzbol2o] {
    border: 0;
    background: none;
    font-size: 1.05rem;
    line-height: 1;
    color: rgba(255, 255, 255, .3);
    cursor: pointer;
    padding: 0 .2rem;
}

.btn-supprimer:hover[b-lqfxzbol2o] { color: #FF8A8A; }
/* /Components/Pages/ClesSignature.razor.rz.scp.css */
/* Les commandes a copier telles quelles. Elles sont dans un <pre> parce qu'un
   retour a la ligne mal place dans une commande openssl produit une paire de
   cles inutilisable, sans message d'erreur -- et parce que la ligne icacls
   contient des guillemets qu'un habillage automatique couperait.

   CORRIGE EN 50.1 : le fond etait une transparence de NOIR, invisible sur le
   fond sombre de BELENOS. */
.commandes[b-6qj7206hls] {
    margin: .6rem 0 0;
    padding: .6rem .75rem;
    border-radius: .4rem;
    background: var(--surface-2, #2f2f2f);
    border: 1px solid var(--bordure, #555);
    font-size: .78rem;
    line-height: 1.45;

    /* Il defile DANS son cadre : une commande longue ne doit jamais pousser la
       page vers la droite. */
    overflow-x: auto;
    white-space: pre;

    user-select: all;
}
/* /Components/Pages/ClientFiche.razor.rz.scp.css */
/* --- la zone de notes, en tete de page ------------------------------------
   Neutre et sobre, volontairement : elle est au-dessus de l'encart des
   affaires, qui est orange, et deux blocs colores qui se suivent se
   disputeraient l'attention. Les notes se lisent, elles n'alertent pas. */

.notes-tiers[b-bcglj1sczj] {
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: .5rem;
    padding: .55rem .8rem .7rem;
    margin-bottom: 1rem;
}

.notes-tiers .chapeau[b-bcglj1sczj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .6);
    margin-bottom: .35rem;
}

/* min-height sur le chapeau, cale sur la hauteur reelle d'un .btn-sm de
   Bootstrap 5.3 (environ 1.94rem) : le temoin "non enregistre" apparait et
   disparait a cote des boutons, et sans reserve de place la zone de saisie
   sautait d'un pixel a chaque fois. */

.notes-tiers .chapeau .actions[b-bcglj1sczj] {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-transform: none;
    letter-spacing: 0;
}

.notes-tiers .zone[b-bcglj1sczj] {
    resize: vertical;
    line-height: 1.45;
}

/* L'ancien champ Divers : grise, en retrait, et clairement au-dessus de la
   zone de saisie -- c'est de l'archive, pas un second champ a remplir. */
.notes-tiers .divers-restant[b-bcglj1sczj] {
    border-left: 3px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .04);
    border-radius: .3rem;
    padding: .4rem .6rem;
    margin-bottom: .5rem;
    color: rgba(255, 255, 255, .62);
}

.notes-tiers .divers-restant .tete[b-bcglj1sczj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .3rem;
}

/* --- l'encart des affaires en cours, en tete de page ----------------------
   Il precede la fiche parce qu'on ouvre un tiers pour savoir ou on en est
   avec lui. Il reste dense : trois affaires doivent tenir sans repousser
   l'identite du tiers sous la ligne de flottaison. */

.encart-affaires[b-bcglj1sczj] {
    border: 1px solid rgba(253, 126, 0, .28);
    background: rgba(253, 126, 0, .06);
    border-radius: .5rem;
    padding: .6rem .8rem .5rem;
    margin-bottom: 1rem;
}

.encart-affaires .titre[b-bcglj1sczj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .6);
    margin-bottom: .35rem;
}

.encart-affaires ul[b-bcglj1sczj] { list-style: none; margin: 0; padding: 0; }

.encart-affaires li[b-bcglj1sczj] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .35rem;
    border-radius: .3rem;
    font-size: .84rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.encart-affaires li:last-child[b-bcglj1sczj] { border-bottom: 0; }
.encart-affaires li:hover[b-bcglj1sczj] { background: rgba(255, 255, 255, .05); }

/* Le retard se signale par un trait a gauche autant que par la couleur :
   la couleur seule ne se voit pas sur un ecran mal regle. */
.encart-affaires li.due[b-bcglj1sczj] {
    border-left: 3px solid #FF8A8A;
    padding-left: .5rem;
}

.encart-affaires li.due .quand[b-bcglj1sczj] { color: #FF8A8A; }

.encart-affaires .quand[b-bcglj1sczj] {
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
}

.encart-affaires a[b-bcglj1sczj] { text-decoration: none; white-space: nowrap; }
.encart-affaires a:hover[b-bcglj1sczj] { text-decoration: underline; }

/* --- recapitulatifs d'interventions --------------------------------------- */

.liste-recap[b-bcglj1sczj] { list-style: none; margin: 0; padding: 0; }

.liste-recap li[b-bcglj1sczj] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
    font-size: .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.liste-recap li:last-child[b-bcglj1sczj] { border-bottom: 0; }

.liste-recap a[b-bcglj1sczj] { color: rgba(255, 255, 255, .85); text-decoration: none; }
.liste-recap a:hover[b-bcglj1sczj] { text-decoration: underline; }

.liste-recap .texte-faible[b-bcglj1sczj] { margin-left: auto; white-space: nowrap; font-size: .72rem; }

/* Une seule regle de troncature, partagee : sans min-width:0, un element de
   flex refuse de retrecir sous la largeur de son texte et fait deborder la
   ligne entiere. */
.tronque[b-bcglj1sczj] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recap-machine[b-bcglj1sczj] {
    background: rgba(255, 255, 255, .03);
    padding: .5rem .8rem !important;
}

/* Le nombre de reappros en retard, dans le titre de l'encart : sans lui,
   l'information n'existe que pour qui lit toute la liste. */
.etiquette-alerte[b-bcglj1sczj] {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: .25rem;
    background: rgba(255, 138, 138, .16);
    color: #FF8A8A;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}


/* --- l'encart consommables ------------------------------------------------

   Meme forme que l'encart des affaires, teinte neutre : deux encarts oranges
   l'un sous l'autre se liraient comme un seul bloc, et l'orange reste la
   couleur de la marque. Ce qui doit ressortir ici, c'est la ligne en retard,
   pas le cadre. */

.encart-consommables[b-bcglj1sczj] {
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .03);
    border-radius: .5rem;
    padding: .6rem .8rem .5rem;
    margin-bottom: 1rem;
}

.encart-consommables .titre[b-bcglj1sczj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .6);
    margin-bottom: .35rem;
}

/* Le montant n'est pas un titre : il garde sa casse et ses chiffres lisibles. */
.encart-consommables .titre .normal[b-bcglj1sczj] {
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.encart-consommables ul[b-bcglj1sczj] { list-style: none; margin: 0; padding: 0; }

.encart-consommables li[b-bcglj1sczj] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .35rem;
    border-radius: .3rem;
    font-size: .84rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.encart-consommables li:last-child[b-bcglj1sczj] { border-bottom: 0; }

/* Le retard se signale par un trait a gauche autant que par la couleur :
   la couleur seule ne se voit pas sur un ecran mal regle. */
.encart-consommables li.due[b-bcglj1sczj] {
    border-left: 3px solid #FF8A8A;
    padding-left: .5rem;
}

.encart-consommables li.due .etat-retard[b-bcglj1sczj] { color: #FF8A8A; }

.encart-consommables .quand[b-bcglj1sczj] {
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
}

.encart-consommables .etat-retard[b-bcglj1sczj] {
    white-space: nowrap;
    font-size: .72rem;
    color: rgba(255, 255, 255, .45);
    min-width: 7rem;
    text-align: right;
}

.encart-consommables .source[b-bcglj1sczj] {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .05rem .3rem;
    border-radius: .2rem;
    white-space: nowrap;
}

.encart-consommables .source.observe[b-bcglj1sczj] { background: rgba(152, 251, 152, .13); color: #98FB98; }
.encart-consommables .source.annonce[b-bcglj1sczj] { background: rgba(57, 135, 229, .16); color: #7FB4EE; }

.encart-consommables .reste[b-bcglj1sczj] {
    margin: .4rem 0 0;
    font-size: .75rem;
    color: rgba(255, 255, 255, .45);
}

.encart-consommables a[b-bcglj1sczj] { text-decoration: none; white-space: nowrap; }
.encart-consommables a:hover[b-bcglj1sczj] { text-decoration: underline; }

/* Les deux teintes de categorie sont les memes que sur l'ecran consommables et
   sur le catalogue. Elles sont recopiees parce que le CSS des composants est
   isole -- si l'une des trois change, les trois changent : une couleur qui ne
   veut pas dire la meme chose d'un ecran a l'autre ne veut plus rien dire. */
.etat-etiquette[b-bcglj1sczj] { background: rgba(217, 108, 0, .16); color: #F0A44E; }
.etat-ruban[b-bcglj1sczj]     { background: rgba(57, 135, 229, .16); color: #7FB4EE; }


/* --- l'entete du tiers, en lecture ----------------------------------------

   Quatre blocs cote a cote la ou il y avait quatre rubriques de formulaires
   empilees. Le gain de place n'est pas cosmetique : ce qu'on vient lire sur
   une fiche tiers -- les affaires, le parc, les interventions -- commencait
   sous la ligne de flottaison.

   auto-fit plutot qu'un nombre de colonnes fixe : quatre colonnes sur un grand
   ecran, deux sur un portable, une sur un telephone, sans point de rupture a
   entretenir. */

.entete-tiers[b-bcglj1sczj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}

.entete-tiers .bloc[b-bcglj1sczj] {
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .03);
    border-radius: .5rem;
    padding: .45rem .7rem .55rem;

    /* Sans min-width:0, une adresse longue refuse de retrecir sous sa propre
       largeur et fait deborder la grille entiere vers la droite. */
    min-width: 0;
}

.entete-tiers .chapeau[b-bcglj1sczj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .55);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: .25rem;
    margin-bottom: .4rem;
}

/* Le bouton reste VISIBLE en permanence, et non revele au survol.

   Un bouton qui n'apparait qu'au survol n'existe pas pour qui ne survole pas,
   et n'existe pas du tout sur un ecran tactile. Il est donc contraste, mais
   petit et en contour : present sans disputer l'attention au contenu qu'il
   sert a corriger. */
.entete-tiers .modifier[b-bcglj1sczj] {
    flex: none;
    border: 1px solid rgba(253, 126, 0, .5);
    background: transparent;
    color: #FD7E00;
    border-radius: .25rem;
    padding: .05rem .4rem;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.4;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.entete-tiers .modifier:hover[b-bcglj1sczj],
.entete-tiers .modifier:focus-visible[b-bcglj1sczj] {
    background: rgba(253, 126, 0, .16);
    border-color: #FD7E00;
}

/* Cle et valeur sont deux elements de FLEX, jamais deux textes separes par une
   espace : deux boites ne peuvent pas se coller, quoi qu'il arrive au blanc
   entre elles. C'est la meme lecon que le composant DeuxFaits. */
.entete-tiers .ligne-fait[b-bcglj1sczj] {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    padding: .08rem 0;
    font-size: .82rem;
}

.entete-tiers .cle[b-bcglj1sczj] {
    flex: 0 0 5.5rem;
    font-size: .7rem;
    color: rgba(255, 255, 255, .45);
}

.entete-tiers .val[b-bcglj1sczj] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Une valeur absente s'ecrit, elle ne se laisse pas en blanc : un bloc a trou
   se lit comme un defaut d'affichage, pas comme une information manquante. */
.entete-tiers .vide[b-bcglj1sczj] { color: rgba(255, 255, 255, .3); font-style: italic; }

.entete-tiers .bloc-texte > div[b-bcglj1sczj] {
    font-size: .82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.entete-tiers .bloc-texte .fort[b-bcglj1sczj] { font-weight: 600; }
.entete-tiers .bloc-texte .pale[b-bcglj1sczj] { color: rgba(255, 255, 255, .5); }

/* Le selecteur descend jusqu'au > div : sans lui, la regle .bloc-texte > div
   ci-dessus le bat en specificite et le nom du contact reste a .82rem. */
.entete-tiers .bloc-texte > div.nom-contact[b-bcglj1sczj] { font-weight: 600; font-size: .9rem; }

.entete-tiers .note[b-bcglj1sczj],
.entete-tiers .bloc-texte > div.note[b-bcglj1sczj] {
    margin-top: .35rem;
    padding-top: .3rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: .7rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, .45);
}

.entete-tiers .bloc-texte > div.note > div[b-bcglj1sczj] { font-size: .7rem; line-height: 1.3; }

.entete-tiers a[b-bcglj1sczj] { color: rgba(255, 255, 255, .85); text-decoration: none; }
.entete-tiers a:hover[b-bcglj1sczj] { text-decoration: underline; }

/* Les notes gardent leurs retours a la ligne : saisies dans un textarea, elles
   seraient sinon rendues en un seul paragraphe compact. */
.texte-multiligne[b-bcglj1sczj] { white-space: pre-wrap; overflow-wrap: anywhere; }


/* --- le choix du contact principal ----------------------------------------

   Une liste cliquable, pas un formulaire. Chaque ligne est une CIBLE : elle
   porte le curseur main, un fond au survol, et une hauteur qui se vise sans
   precision. Le role de contact principal s'attribue en un clic ; le corriger
   demande le petit lien de droite, qui mene a la vraie fiche du contact. */

.choix-contacts[b-bcglj1sczj] { list-style: none; margin: 0; padding: 0; }

.choix-contacts.occupe[b-bcglj1sczj] { opacity: .5; pointer-events: none; }

.choix-contacts li[b-bcglj1sczj] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem;
    border-radius: .3rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    cursor: pointer;
}

.choix-contacts li:last-child[b-bcglj1sczj] { border-bottom: 0; }
.choix-contacts li:hover[b-bcglj1sczj] { background: rgba(255, 255, 255, .06); }

/* Celui qui porte le role : un fond, un trait a gauche ET une coche. La
   couleur seule ne se voit pas sur un ecran mal regle, et une coche seule se
   confond avec une case a cocher vide a la peripherie du regard. */
.choix-contacts li.choisi[b-bcglj1sczj] {
    background: rgba(253, 126, 0, .1);
    box-shadow: inset 3px 0 0 #FD7E00;
}

/* Sans cette regle, la ligne choisie serait la SEULE a ne pas reagir au
   survol : meme specificite que li:hover, declaree apres, elle l'emporte.
   Or c'est justement celle qu'on pointe pour verifier avant de cliquer
   ailleurs. */
.choix-contacts li.choisi:hover[b-bcglj1sczj] { background: rgba(253, 126, 0, .2); }

.choix-contacts .marque[b-bcglj1sczj] {
    flex: none;
    width: 1rem;
    text-align: center;
    color: #FD7E00;
    font-weight: 700;
}

/* Deux elements de BLOC empiles : le nom et ses reperes ne peuvent pas se
   coller, quoi qu'il arrive au blanc entre eux. */
.choix-contacts .qui[b-bcglj1sczj] { flex: 1 1 auto; min-width: 0; }
.choix-contacts .nom[b-bcglj1sczj] { display: block; font-size: .88rem; }

.choix-contacts .detail[b-bcglj1sczj] {
    display: block;
    font-size: .72rem;
    color: rgba(255, 255, 255, .45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.choix-contacts .lien-modifier[b-bcglj1sczj] {
    flex: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .45);
    font-size: .7rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.choix-contacts .lien-modifier:hover[b-bcglj1sczj] { color: rgba(255, 255, 255, .85); }

/* Le solde des forfaits, ecrit dans le titre de la rubrique : il garde sa casse
   et ses chiffres alignes la ou le resume est en majuscules. */
.rubrique > summary .solde-forfaits[b-bcglj1sczj] {
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Clients.razor.rz.scp.css */
/* --- creation d'un tiers -------------------------------------------------- */

.formulaire-tiers[b-cqg2ccivan] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire-tiers label[b-cqg2ccivan] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

/* L'explication vit sous le champ qu'elle explique, pas dans une infobulle :
   ce qui se survole ne se lit jamais la premiere fois. */
.aide-tiers[b-cqg2ccivan] {
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    margin: -.3rem 0 0;
}

.bandeau-tiers[b-cqg2ccivan] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    font-size: .87rem;
    background: rgba(255, 138, 138, .13);
    border-left: 3px solid #FF8A8A;
}

/* --- filtres --------------------------------------------------------------

   Memes regles que sur les contrats et les forfaits. Elles sont redeclarees
   parce que le CSS des composants Blazor est ISOLE : une page qui ne les porte
   pas retombe sur des <label> en ligne. Si l'une change, elles changent
   toutes -- un bandeau de filtres qui ne se presente pas pareil d'un ecran a
   l'autre se relit a chaque fois. */

.filtres[b-cqg2ccivan] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem .9rem;
    padding: .7rem .8rem;
    margin-bottom: .8rem;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.filtres label[b-cqg2ccivan] {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
}

.filtres label.grandit[b-cqg2ccivan] { flex: 1 1 16rem; }

.filtres label.case[b-cqg2ccivan] {
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    padding-bottom: .4rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .75);
}

.filtres select[b-cqg2ccivan] { min-width: 9rem; max-width: 16rem; }

/* --- colonnes triables ---------------------------------------------------- */

.triable[b-cqg2ccivan] { cursor: pointer; user-select: none; white-space: nowrap; }
.triable:hover[b-cqg2ccivan] { color: #fff; }

/* ::deep est indispensable : la fleche est injectee au rendu (MarkupString) et
   ne recoit donc pas l'attribut de portee ajoute a la compilation. Sans lui,
   la regle ne s'applique jamais. */
.triable[b-cqg2ccivan]  .fleche {
    font-size: .62rem;
    margin-left: .15rem;
    color: var(--accent, #FD7E00);
}

.triable[b-cqg2ccivan]  .fleche.vide { color: rgba(255, 255, 255, .18); }

/* --- la fenetre de statistiques ------------------------------------------- */

.stats-tiers[b-cqg2ccivan] { display: flex; flex-direction: column; }

.bascule[b-cqg2ccivan] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
}

.bascule .libelle[b-cqg2ccivan] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .45);
    margin-right: .2rem;
}

.bascule button[b-cqg2ccivan] {
    border: 1px solid rgba(255, 255, 255, .14);
    background: transparent;
    color: rgba(255, 255, 255, .6);
    border-radius: .25rem;
    padding: .12rem .6rem;
    font-size: .78rem;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.bascule button:hover[b-cqg2ccivan] { color: rgba(255, 255, 255, .9); }

/* L'option retenue porte la couleur de marque ET un fond : la couleur seule
   ne suffit pas a dire "c'est celui-la qui est actif". */
.bascule button.actif[b-cqg2ccivan] {
    border-color: #FD7E00;
    background: rgba(253, 126, 0, .16);
    color: #FD7E00;
}

.aide-stats[b-cqg2ccivan] {
    font-size: .78rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .5);
    margin: 0 0 1rem;
}
/* /Components/Pages/Consommables.razor.rz.scp.css */
.bloc[b-a5s8wzu1pt] { margin-bottom: 2rem; }

.bloc h2 .compte[b-a5s8wzu1pt] {
    font-size: .7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .45);
    margin-left: .5rem;
    text-transform: none;
    letter-spacing: 0;
}

.bandeau[b-a5s8wzu1pt] { padding: .55rem .8rem; border-radius: .35rem; margin-bottom: .9rem; font-size: .87rem; }
.bandeau.ok[b-a5s8wzu1pt] { background: rgba(152, 251, 152, .12); border-left: 3px solid #98FB98; }
.bandeau.alerte[b-a5s8wzu1pt] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

/* Memes teintes que le graphique de l'accueil : une couleur qui change de sens
   d'un ecran a l'autre ne veut plus rien dire. */
.etat-etiquette[b-a5s8wzu1pt] { background: rgba(217, 108, 0, .16); color: #F0A44E; }
.etat-ruban[b-a5s8wzu1pt]     { background: rgba(57, 135, 229, .16); color: #7FB4EE; }

/* Le retard se signale par un trait a gauche autant que par la couleur du
   texte : sur un ecran mal regle, la couleur seule ne se voit pas. */
tr.en-retard td:first-child[b-a5s8wzu1pt] { box-shadow: inset 3px 0 0 #FF8A8A; }

/* Un rythme calcule sur deux commandes n'est pas un rythme. Le dire coute une
   etiquette ; ne pas le dire coute un appel pour rien. */
.fragile[b-a5s8wzu1pt] {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .05rem .3rem;
    margin-left: .3rem;
    border-radius: .2rem;
    background: rgba(224, 172, 78, .14);
    color: #E0AC4E;
    white-space: nowrap;
}

/* --- tuiles du bilan ------------------------------------------------------ */

.tuile[b-a5s8wzu1pt] {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .45rem;
    padding: .75rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .05rem;
    height: 100%;
}

.tuile-libelle[b-a5s8wzu1pt] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .5);
}

.tuile-valeur[b-a5s8wzu1pt] {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.tuile-note[b-a5s8wzu1pt] { font-size: .72rem; color: rgba(255, 255, 255, .45); }

/* --- rappel de la derniere commande --------------------------------------- */

.rappel[b-a5s8wzu1pt] {
    background: rgba(253, 126, 0, .08);
    border: 1px solid rgba(253, 126, 0, .25);
    border-radius: .4rem;
    padding: .5rem .7rem;
    font-size: .84rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
}

/* --- formulaire ----------------------------------------------------------- */

.formulaire[b-a5s8wzu1pt] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-a5s8wzu1pt],
.formulaire .ligne label[b-a5s8wzu1pt] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.formulaire .ligne[b-a5s8wzu1pt] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.formulaire .ligne label.grandit[b-a5s8wzu1pt] { flex: 1 1 18rem; }

.btn-supprimer[b-a5s8wzu1pt] {
    border: 0;
    background: none;
    font-size: 1.05rem;
    line-height: 1;
    color: rgba(255, 255, 255, .3);
    cursor: pointer;
    padding: 0 .2rem;
}

.btn-supprimer:hover[b-a5s8wzu1pt] { color: #FF8A8A; }

/* --- d'ou vient le rythme -------------------------------------------------- */

/* Observe et annonce ne valent pas la meme chose, et la difference se lit sans
   survoler : un mot, pas une nuance de gris. */
.source[b-a5s8wzu1pt] {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .05rem .3rem;
    border-radius: .2rem;
    white-space: nowrap;
}

.source.observe[b-a5s8wzu1pt] { background: rgba(152, 251, 152, .13); color: #98FB98; }
.source.annonce[b-a5s8wzu1pt] { background: rgba(57, 135, 229, .16); color: #7FB4EE; }
.source.fragile[b-a5s8wzu1pt] { background: rgba(224, 172, 78, .14); color: #E0AC4E; }

.ecart[b-a5s8wzu1pt] { color: #E0AC4E; }

/* --- reperes de prix moyen ------------------------------------------------- */

.repere[b-a5s8wzu1pt] {
    display: inline-block;
    margin-right: 1.2rem;
    font-variant-numeric: tabular-nums;
}

/* Le projete porte une trame, comme sur le graphique de l'accueil : une tuile
   qui ressemble en tout point a une tuile de realise se lit comme du realise. */
.tuile.projete[b-a5s8wzu1pt] {
    background:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .05) 0 4px,
            rgba(255, 255, 255, .015) 4px 8px);
    border-style: dashed;
}

/* --- duree de stock a la saisie -------------------------------------------- */

.duree[b-a5s8wzu1pt] { display: flex; gap: .2rem; align-items: center; flex-wrap: nowrap; }

.duree .puce[b-a5s8wzu1pt] {
    border: 1px solid rgba(255, 255, 255, .14);
    background: none;
    color: rgba(255, 255, 255, .6);
    border-radius: .25rem;
    font-size: .7rem;
    padding: .18rem .32rem;
    cursor: pointer;
    line-height: 1;
}

.duree .puce:hover[b-a5s8wzu1pt] { border-color: rgba(255, 255, 255, .35); color: #fff; }

.duree .puce.active[b-a5s8wzu1pt] {
    background: rgba(253, 126, 0, .18);
    border-color: rgba(253, 126, 0, .55);
    color: #FFB870;
}

.duree .jours[b-a5s8wzu1pt] { width: 3.6rem; padding-left: .25rem; padding-right: .25rem; }

.avertissement[b-a5s8wzu1pt] {
    display: block;
    margin-top: .2rem;
    font-size: .7rem;
    color: #E0AC4E;
}

/* --- les reperes de prix, sous chaque ligne de saisie ---------------------- */

/* Une ligne entiere plutot qu'un coin de cellule : la phrase est longue, et la
   tasser dans la colonne de reference la rendrait illisible -- c'est la faute
   qu'on a deja faite deux fois sur cet ecran. */
.repere-ligne td[b-a5s8wzu1pt] {
    padding-top: 0 !important;
    padding-bottom: .5rem !important;
    border-top: 0 !important;
}

.repere-bloc[b-a5s8wzu1pt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    font-size: .74rem;
    color: rgba(255, 255, 255, .55);
}

/* Chaque fait est un element a part, avec son propre separateur visible : une
   mise en page ne doit jamais etre le seul separateur entre deux informations,
   sinon "BLUESTAR" et "TR4085+" finissent colles. */
.repere-bloc .fait[b-a5s8wzu1pt] { display: inline-block; }
.repere-bloc .fait + .fait[b-a5s8wzu1pt]::before { content: "·"; margin-right: .5rem; opacity: .45; }

.repere-bloc .montant[b-a5s8wzu1pt] { color: rgba(255, 255, 255, .8); font-weight: 500; }

.repere-bloc .hausse[b-a5s8wzu1pt] { color: #E0AC4E; }
.repere-bloc .baisse[b-a5s8wzu1pt] { color: #98FB98; }
.repere-bloc .manque[b-a5s8wzu1pt] { color: #FF8A8A; }

/* Le prix qui retablit la marge : proposition d'un clic, pas une correction
   automatique. Rien ne doit changer un prix sans qu'on l'ait demande. */
.repere-bloc .rattraper[b-a5s8wzu1pt] {
    border: 1px solid rgba(253, 126, 0, .5);
    background: rgba(253, 126, 0, .12);
    color: #FFB870;
    border-radius: .25rem;
    font-size: .72rem;
    padding: .1rem .4rem;
    cursor: pointer;
    line-height: 1.3;
}

.repere-bloc .rattraper:hover[b-a5s8wzu1pt] { background: rgba(253, 126, 0, .22); }
/* /Components/Pages/ContratFiche.razor.rz.scp.css */
.fil-ariane[b-9q32fmodab] {
    display: flex;
    gap: .4rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    margin-bottom: .4rem;
}

.fil-ariane a[b-9q32fmodab] { color: rgba(255, 255, 255, .68); text-decoration: none; }
.fil-ariane a:hover[b-9q32fmodab] { color: #fff; text-decoration: underline; }

.entete-contrat[b-9q32fmodab] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.drapeaux[b-9q32fmodab] { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* Grille de saisie : deux colonnes qui se replient a une seule sur petit
   ecran, sans avoir a decider champ par champ. */
.grille[b-9q32fmodab] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .7rem .9rem;
    align-items: end;
}

.grille label[b-9q32fmodab] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.grille label.large[b-9q32fmodab] { grid-column: 1 / -1; }

.grille label.case[b-9q32fmodab] {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
    padding-bottom: .35rem;
}

/* Une valeur calculee n'est pas un champ : elle ne doit pas ressembler a
   quelque chose qu'on peut remplir. */
.calcule[b-9q32fmodab] {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    padding: .3rem .55rem;
    border-radius: .3rem;
    background: rgba(255, 255, 255, .05);
    font-size: .82rem;
}

.bandeau[b-9q32fmodab] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    margin-bottom: .9rem;
    font-size: .87rem;
}

.bandeau.ok[b-9q32fmodab] { background: rgba(152, 251, 152, .12); border-left: 3px solid #98FB98; }
.bandeau.alerte[b-9q32fmodab] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

.btn-supprimer[b-9q32fmodab] {
    border: 0;
    background: none;
    font-size: 1.15rem;
    line-height: 1;
    color: rgba(255, 255, 255, .35);
    cursor: pointer;
    padding: 0 .2rem;
}

.btn-supprimer:hover[b-9q32fmodab] { color: #FF8A8A; }

tr.courante[b-9q32fmodab] { background: rgba(253, 126, 0, .1); }

.liste-affaires[b-9q32fmodab] { list-style: none; margin: 0; padding: 0; }

.liste-affaires li[b-9q32fmodab] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .25rem 0;
    font-size: .82rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.liste-affaires li:last-child[b-9q32fmodab] { border-bottom: 0; }

/* --- choisir plusieurs objets d'un coup -----------------------------------
   Une liste a cocher, filtrable, plutot qu'une liste deroulante par ligne :
   un contrat qui couvre trente machines se saisissait en trente
   allers-retours. */

.couverture .liste-objets[b-9q32fmodab] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 26rem;
    overflow-y: auto;
}

.couverture .liste-objets li[b-9q32fmodab] {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.couverture .liste-objets li:last-child[b-9q32fmodab] { border-bottom: 0; }

.couverture .liste-objets label[b-9q32fmodab] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .2rem;
    font-size: .82rem;
    cursor: pointer;
    margin: 0;
}

.couverture .liste-objets label:hover[b-9q32fmodab] { background: rgba(255, 255, 255, .04); }

.couverture .tronque[b-9q32fmodab] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- les lignes du contrat, en cartes -------------------------------------

   Un tableau de six colonnes dont deux portaient des champs de saisie empiles
   ne se lisait ni comme un tableau ni comme un formulaire : les libelles
   restaient en tete, a dix centimetres du champ qu'ils nomment, et le second
   champ d'une cellule ressemblait a un doublon vide.

   Trois etages par carte, dans l'ordre des questions qu'on se pose : ce que
   la ligne couvre, ce qu'elle designe, ce qu'elle coute. */

.lignes-contrat[b-9q32fmodab] { display: flex; flex-direction: column; gap: .7rem; margin-bottom: .9rem; }

.ligne-contrat[b-9q32fmodab] {
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .025);
    padding: .7rem .85rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* --- etage 1 : ce que la ligne couvre --- */

.ligne-contrat .entete[b-9q32fmodab] { display: flex; align-items: center; gap: .6rem; }

.ligne-contrat .entete input[b-9q32fmodab] { flex: 1 1 auto; min-width: 0; }

/* La nature de l'objet porte un MOT, pas seulement une couleur : deux teintes
   froides voisines ne se distinguent pas en vision daltonienne, et la pastille
   doit rester lisible en noir et blanc. */
.ligne-contrat .objet[b-9q32fmodab] {
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .2rem .5rem;
    border-radius: .25rem;
    white-space: nowrap;
}

.ligne-contrat .objet.machine[b-9q32fmodab] { background: rgba(111, 211, 196, .15); color: #6FD3C4; }
.ligne-contrat .objet.licence[b-9q32fmodab] { background: rgba(179, 166, 240, .16); color: #B3A6F0; }
.ligne-contrat .objet.libre[b-9q32fmodab]   { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .45); }

/* --- etages 2 et 3 : ce qu'elle designe, ce qu'elle coute --- */

.ligne-contrat .champs[b-9q32fmodab],
.ligne-contrat .chiffres[b-9q32fmodab] { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-end; }

.ligne-contrat label[b-9q32fmodab] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .45);
}

.ligne-contrat label.grandit[b-9q32fmodab] { flex: 1 1 16rem; }
.ligne-contrat .chiffres label[b-9q32fmodab] { flex: 0 0 7rem; }

/* Les signes de l'operation, poses sur la ligne des champs et non sur celle
   des libelles : le calcul se lit alors comme un calcul. */
.ligne-contrat .operateur[b-9q32fmodab] {
    color: rgba(255, 255, 255, .3);
    padding-bottom: .35rem;
    font-size: .9rem;
}

.ligne-contrat .total[b-9q32fmodab] {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    align-items: flex-end;
}

.ligne-contrat .total .libelle[b-9q32fmodab] {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .45);
}

.ligne-contrat .total .valeur[b-9q32fmodab] {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    padding-bottom: .3rem;
    white-space: nowrap;
}

.ligne-contrat .total .valeur.vide[b-9q32fmodab] { color: rgba(255, 255, 255, .3); }

.ligne-contrat .btn-supprimer[b-9q32fmodab] {
    flex: 0 0 auto;
    border: 0;
    background: none;
    font-size: 1.15rem;
    line-height: 1;
    color: rgba(255, 255, 255, .25);
    cursor: pointer;
    padding: 0 .1rem;
}

.ligne-contrat .btn-supprimer:hover[b-9q32fmodab] { color: #FF8A8A; }

.aucune-ligne[b-9q32fmodab] {
    font-size: .84rem;
    color: rgba(255, 255, 255, .45);
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: .5rem;
    padding: .8rem .9rem;
    margin: 0;
}

/* ========================================================= le perimetre

   Une LISTE et non des cartes. Le perimetre se lit en balayant : "qu'est-ce
   que ce contrat couvre". Une carte par objet sur un contrat de douze
   machines fait douze blocs a faire defiler pour repondre a une question
   qu'une liste repond d'un coup d'oeil.

   La ventilation, elle, garde ses cartes : on y saisit des chiffres, et un
   champ a dix centimetres de son libelle ne se remplit pas. */

.perimetre[b-9q32fmodab] { list-style: none; margin: 0 0 .8rem; padding: 0; }

.perimetre li[b-9q32fmodab] {
    display: flex;
    align-items: flex-end;
    gap: .55rem;
    padding: .45rem .1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.perimetre li:last-child[b-9q32fmodab] { border-bottom: 0; }

.perimetre li.aucune-ligne[b-9q32fmodab] {
    display: block;
    padding: .6rem .1rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .45);
    border-bottom: 0;
}

.perimetre .objet[b-9q32fmodab] {
    flex: 0 0 auto;
    align-self: center;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .12rem .4rem;
    border-radius: .25rem;
}

.perimetre .objet.machine[b-9q32fmodab] { background: rgba(111, 211, 196, .15); color: #6FD3C4; }
.perimetre .objet.licence[b-9q32fmodab] { background: rgba(179, 166, 240, .16); color: #B3A6F0; }

/* Le libelle vivant de l'objet : c'est l'identite de la ligne, donc il porte
   le poids visuel. La designation stockee est un complement, pas l'inverse. */
.perimetre .nom[b-9q32fmodab] {
    flex: 1 1 14rem;
    align-self: center;
    min-width: 0;
    font-size: .88rem;
    color: rgba(255, 255, 255, .88);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perimetre label[b-9q32fmodab] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .42);
}

.perimetre label.libelle-contrat[b-9q32fmodab] { flex: 1 1 12rem; min-width: 0; }
.perimetre label.montant-ligne[b-9q32fmodab]   { flex: 0 0 7.5rem; }

.perimetre .btn-supprimer[b-9q32fmodab] { align-self: center; }

/* Le paragraphe d'explication en tete de rubrique. Il dit ce que le geste
   fait REELLEMENT -- ici, qu'il ecrit tout de suite -- parce que deux
   doctrines d'enregistrement dans la meme page ne se devinent pas. */
.aide[b-9q32fmodab] {
    margin: 0 0 .7rem;
    font-size: .82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .55);
}

.couverture label.case[b-9q32fmodab] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   LE DOCUMENT (livraison 48)

   L'editeur est parti dans son propre composant, et sa mise en forme avec
   lui : l'isolation CSS de Blazor colle un attribut par composant, et une
   regle restee ici ne s'appliquerait pas la-bas. Ne restent que les quelques
   lignes de l'etat "pas encore de document", qui sont dessinees par CETTE
   page.
   ========================================================================== */

.rubrique.doc[b-9q32fmodab] { margin-top: 1.2rem; }

.rattacher[b-9q32fmodab] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .8rem;
    align-items: flex-end;
    margin: 1rem 0 .7rem;
}

.rattacher label.grandit[b-9q32fmodab] {
    flex: 1 1 24rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .55);
}
/* /Components/Pages/Contrats.razor.rz.scp.css */
.filtres[b-5n904sxhb6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem .9rem;
    padding: .7rem .8rem;
    margin-bottom: .8rem;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.filtres label[b-5n904sxhb6] {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
}

.filtres label.grandit[b-5n904sxhb6] { flex: 1 1 16rem; }

.filtres label.case[b-5n904sxhb6] {
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    padding-bottom: .4rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .75);
}

.filtres select[b-5n904sxhb6] { min-width: 9rem; }

.triable[b-5n904sxhb6] { cursor: pointer; user-select: none; white-space: nowrap; }
.triable:hover[b-5n904sxhb6] { color: #fff; }

/* ::deep est indispensable : la fleche est injectee au rendu (MarkupString)
   et ne recoit donc pas l'attribut de portee ajoute a la compilation. Sans
   lui, la regle ne s'applique jamais. */
.triable[b-5n904sxhb6]  .fleche {
    font-size: .62rem;
    margin-left: .15rem;
    color: var(--accent, #FD7E00);
}

.triable[b-5n904sxhb6]  .fleche.vide { color: rgba(255, 255, 255, .18); }

.lien-fiche[b-5n904sxhb6] {
    font-size: .74rem;
    white-space: nowrap;
    color: rgba(255, 255, 255, .45);
    text-decoration: none;
}

.lien-fiche:hover[b-5n904sxhb6] { color: var(--accent, #FD7E00); text-decoration: underline; }

.pied[b-5n904sxhb6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .4rem;
}

/* --- Approche de la date limite de denonciation ---------------------------
   Meme grammaire que la prospection : une seule teinte rouge qui s'intensifie
   a mesure que la date se rapproche, et rien du tout quand l'echeance est
   lointaine. Les valeurs ont ete verifiees (luminosite monotone, ecarts
   suffisants, extremite lisible sur fond sombre). */

tbody tr[b-5n904sxhb6] { border-left: 3px solid transparent; }

tbody tr.urgence-1[b-5n904sxhb6] { border-left-color: #C0555A; }
tbody tr.urgence-2[b-5n904sxhb6] { border-left-color: #E06E72; }
tbody tr.urgence-3[b-5n904sxhb6] { border-left-color: #F58F93; }

tbody tr.urgence-4[b-5n904sxhb6] {
    border-left-color: #FFB3B6;
    background: rgba(229, 72, 77, .07);
}

.jauge[b-5n904sxhb6] {
    display: inline-block;
    width: .95rem;
    height: .32rem;
    margin-right: .35rem;
    border-radius: .16rem;
    vertical-align: middle;
    background: rgba(255, 255, 255, .16);
}

.jauge-1[b-5n904sxhb6] { background: #C0555A; }
.jauge-2[b-5n904sxhb6] { background: #E06E72; }
.jauge-3[b-5n904sxhb6] { background: #F58F93; }
.jauge-4[b-5n904sxhb6] { background: #FFB3B6; }

/* --- lignees et periodes anterieures --------------------------------------

   Une ligne par lignee, portant sa periode en cours ; les reconductions se
   deplient dessous. Elles sont VISIBLEMENT secondaires -- decalees, plus
   pales, sur un fond legerement en retrait -- sinon on ne sait plus laquelle
   des six lignes est celle qui compte. */

/* Un chevron dans un cercle orange, qui TOURNE a l'ouverture.

   Trois versions ont ete essayees, et les deux premieres ont echoue pour des
   raisons opposees. Un chevron pale seul : trop discret, on ne pensait pas a
   cliquer. Une pastille pleine marquee "+" : bien visible, mais un plus sur une
   ligne de contrat se lit aussi bien comme "ajouter" -- elle montrait qu'il y
   avait quelque chose a faire sans dire quoi.

   Celle-ci garde le cercle, la couleur de marque et une cible de 1,4 rem : elle
   a l'air d'un bouton parce qu'elle en est un. Mais le caractere ne change plus,
   c'est le bouton qui pivote. Une icone qui change de dessin oblige a se
   souvenir de celui d'avant ; une icone qui tourne se lit seule.

   L'orange est reserve par la charte a l'identite, pour qu'un contrat en alerte
   ne s'y confonde pas. L'exception se defend ici : ce bouton n'exprime aucun
   ETAT du contrat, c'est une commande. Rien n'y dit "attention", tout y dit
   "il y a autre chose dessous". */
.deplier[b-5n904sxhb6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    flex: none;
    margin-right: .4rem;

    /* Aucun padding de recentrage optique : il pivoterait AVEC le bouton, et
       un decalage horizontal a l'etat ferme deviendrait vertical a l'etat
       ouvert. Deux defauts valent mieux qu'un seul qui se deplace. */
    padding: 0;

    border: 1px solid rgba(253, 126, 0, .55);
    border-radius: 50%;
    background: rgba(253, 126, 0, .16);
    color: #FD7E00;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: background .12s ease, border-color .12s ease, transform .15s ease;
}

.deplier:hover[b-5n904sxhb6],
.deplier:focus-visible[b-5n904sxhb6] {
    background: rgba(253, 126, 0, .32);
    border-color: #FD7E00;
}

/* Ouvert, le chevron pointe vers le bas -- vers les lignes qu'il vient
   justement de faire apparaitre. */
.deplier.ouvert[b-5n904sxhb6] { transform: rotate(90deg); }

/* Meme encombrement que le bouton, pour que les references restent alignees
   qu'une lignee ait un historique ou non. */
.chevron-vide[b-5n904sxhb6] {
    display: inline-block;
    width: 1.4rem;
    margin-right: .4rem;
    vertical-align: middle;
}

.compte-periodes[b-5n904sxhb6] {
    display: inline-block;
    margin-left: .4rem;
    font-size: .68rem;
    color: rgba(255, 255, 255, .4);
    white-space: nowrap;
}

tr.periode-anterieure[b-5n904sxhb6] { background: rgba(255, 255, 255, .025); }
tr.periode-anterieure td[b-5n904sxhb6] { color: rgba(255, 255, 255, .55); padding-top: .2rem; padding-bottom: .2rem; }

/* Le trait a gauche relie visuellement les periodes a leur tete : sans lui,
   deplier deux lignees voisines donne un bloc ou l'on ne sait plus ou
   commence l'une et ou finit l'autre. */
tr.periode-anterieure td:first-child[b-5n904sxhb6] { box-shadow: inset 2px 0 0 rgba(253, 126, 0, .35); }
/* /Components/Pages/Demandes.razor.rz.scp.css */
/* Une demande traitee reste lisible mais recule : elle n'est plus du travail. */
.traitee[b-kskgbs9qyz] { opacity: .55; }

.marque-type[b-kskgbs9qyz] {
    display: inline-block;
    margin-right: .4rem;
    padding: .05rem .4rem;
    border-radius: .25rem;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .75);
}

/* Trois teintes froides, distinctes de l'orange et du vert des statuts. */
.marque-anomalie[b-kskgbs9qyz] { background: rgba(224, 144, 197, .22); color: #E090C5; }
.marque-evolution[b-kskgbs9qyz] { background: rgba(115, 216, 230, .18); color: #73D8E6; }
.marque-question[b-kskgbs9qyz] { background: rgba(159, 148, 224, .2); color: #9F94E0; }

.marque-priorite[b-kskgbs9qyz] {
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: .3rem;
    border-radius: 50%;
    background: var(--alerte, #E5484D);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}

.formulaire[b-kskgbs9qyz] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-kskgbs9qyz],
.formulaire .ligne label[b-kskgbs9qyz] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .55);
}

.formulaire .ligne[b-kskgbs9qyz] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    align-items: flex-end;
}

.formulaire .ligne label.case[b-kskgbs9qyz] {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    padding-bottom: .35rem;
}

.separateur[b-kskgbs9qyz] { margin: .2rem 0; border-color: rgba(255, 255, 255, .12); }
/* /Components/Pages/DocumentationApi.razor.rz.scp.css */
/* Une page qui se LIT longtemps, et dont des morceaux se COPIENT.
   Deux besoins differents, deux traitements.

   CORRIGE EN 50.1 : les fonds et les bordures etaient des transparences de
   NOIR, invisibles sur le fond sombre de BELENOS -- les blocs de code se
   confondaient avec la page, et le trait sous les titres avait disparu. */

.doc-titre[b-2ao29kgug0] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 2rem 0 .6rem;
    padding-bottom: .3rem;
    border-bottom: 2px solid var(--bordure, #555);
}

.doc-sous[b-2ao29kgug0] {
    font-size: .95rem;
    font-weight: 600;
    margin: 1.2rem 0 .4rem;
}

/* La mesure de lecture. Une doc technique en pleine largeur d'ecran large
   devient illisible : l'oeil perd sa ligne au retour.

   Pas de ::deep ici : les paragraphes sont ecrits DANS ce composant, donc ils
   portent son attribut de portee. Blazor ajoute cet attribut au dernier
   selecteur compose -- "p" devient "p[b-xxx]", ce qui est exactement ce qu'on
   veut. Un "::deep p" aurait produit "[b-xxx] p" et n'aurait rien atteint. */
p[b-2ao29kgug0],
ul[b-2ao29kgug0],
ol[b-2ao29kgug0] {
    max-width: 84ch;
}

.doc-code[b-2ao29kgug0] {
    padding: .65rem .8rem;
    border-radius: .4rem;
    background: var(--surface-2, #2f2f2f);
    border: 1px solid var(--bordure, #555);
    font-size: .78rem;
    line-height: 1.45;

    /* Ces blocs se copient tels quels : ni retour a la ligne automatique, ni
       coupure de mot. Un JSON habille sur deux lignes se recolle faux. */
    white-space: pre;
    overflow-x: auto;
    user-select: all;
}

/* Le bloc de prompt, plus haut que les autres : il fait deux cents lignes et
   n'a pas vocation a etre lu ici, seulement selectionne d'un double-clic. */
.doc-prompt[b-2ao29kgug0] {
    max-height: 26rem;
    overflow: auto;
    font-size: .72rem;
}

/* L'encadre des choses qui cassent une implementation. Le rouge #FF8A8A est
   celui que le projet a valide contre le fond de la charte a la livraison 49 ;
   l'orange DATIS n'apparait pas ici, la charte le reserve a l'identite. */
.doc-avertissement[b-2ao29kgug0] {
    border-left: 3px solid #FF8A8A;
    background: rgba(255, 138, 138, .10);
    padding: .6rem .85rem;
    border-radius: .3rem;
    margin: .6rem 0 1rem;
    max-width: 84ch;
}

.doc-avertissement p:last-child[b-2ao29kgug0] {
    margin-bottom: 0;
}

.doc-table[b-2ao29kgug0] {
    max-width: 84ch;
    font-size: .85rem;
}

.doc-table code[b-2ao29kgug0] {
    white-space: nowrap;
}

.doc-liste li[b-2ao29kgug0] {
    margin-bottom: .35rem;
}

/* ------------------------------------------------------------------------
   LES SOUS-RUBRIQUES : un accordeon DANS un accordeon.
   ------------------------------------------------------------------------

   La page porte deux rubriques -- les licences, les mises a jour -- et une
   quinzaine de sections. A plat, ouvrir une rubrique deroulait un mur de texte
   ou l'on ne retrouvait plus la section cherchee ; en quinze rubriques de
   premier niveau, on ne voyait plus que les deux sujets sont distincts.

   ELLES NE PORTENT PAS LA CLASSE .rubrique, et c'est delibere : celle-ci
   dessine une carte -- bordure, fond, coins arrondis -- et une carte dans une
   carte fait un empilement de cadres qu'aucune page de ce projet n'a. Ici, un
   simple filet separateur et un chevron.

   Le chevron est pilote par l'attribut [open] du <details> natif : aucun
   script a maintenir, et la page fonctionne avant meme que Blazor ait pris la
   main. */

.doc-groupe > .sous-rubrique:first-of-type[b-2ao29kgug0] {
    border-top: 0;
    margin-top: 0;
}

.sous-rubrique[b-2ao29kgug0] {
    border-top: 1px solid var(--bordure, #555);
}

.sous-rubrique > summary[b-2ao29kgug0] {
    cursor: pointer;
    padding: .5rem .1rem;
    font-weight: 600;
    font-size: .86rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .45rem;
    user-select: none;
}

.sous-rubrique > summary[b-2ao29kgug0]::-webkit-details-marker { display: none; }

.sous-rubrique > summary[b-2ao29kgug0]::before {
    content: "";
    width: 0; height: 0;
    border-left: 5px solid var(--datis-orange, #E8791E);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .12s ease;
    flex: none;
}

.sous-rubrique[open] > summary[b-2ao29kgug0]::before { transform: rotate(90deg); }
.sous-rubrique > summary:hover[b-2ao29kgug0] { color: var(--datis-orange, #E8791E); }

/* Le trait vertical dit d'un coup d'oeil ou commence et ou finit le contenu
   d'une sous-rubrique ouverte -- sans lui, deux sections ouvertes a la suite
   se lisent comme une seule. */
.sous-rubrique > div[b-2ao29kgug0] {
    padding: .1rem 0 1rem .95rem;
    margin-left: .2rem;
    border-left: 2px solid var(--bordure, #555);
}

/* Le premier titre d'une sous-rubrique ne doit pas repousser le contenu : la
   marge haute de .doc-sous est faite pour separer DEUX sections dans un long
   texte, pas pour ouvrir un bloc qui vient d'etre deplie. */
.sous-rubrique > div > :first-child[b-2ao29kgug0] { margin-top: 0; }
.sous-rubrique > div > :last-child[b-2ao29kgug0] { margin-bottom: 0; }
/* /Components/Pages/DocumentFiche.razor.rz.scp.css */
/* L'isolation CSS de Blazor n'expose rien d'un composant a l'autre. Viennent
   d'ailleurs, et seulement elles : .rubrique, .rubrique > summary .actions,
   .actions-page, .etat, .etat-ok, .etat-info, .etat-neutre, .texte-faible
   (app.css et belenos-extra.css, non isoles). Tout le reste est ici.

   L'editeur, lui, porte sa propre feuille : EditeurDocument.razor.css. */

.fil-ariane[b-33tyfibrlc] {
    display: flex;
    gap: .4rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    margin-bottom: .4rem;
}

.fil-ariane a[b-33tyfibrlc] { color: rgba(255, 255, 255, .68); text-decoration: none; }
.fil-ariane a:hover[b-33tyfibrlc] { color: #fff; text-decoration: underline; }

.entete-doc[b-33tyfibrlc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.drapeaux[b-33tyfibrlc] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

.lien-contrat[b-33tyfibrlc] {
    font-size: .78rem;
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
}

.lien-contrat:hover[b-33tyfibrlc] { color: #fff; text-decoration: underline; }

.bandeau[b-33tyfibrlc] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    margin-bottom: .9rem;
    font-size: .87rem;
}

.bandeau.ok[b-33tyfibrlc] { background: rgba(152, 251, 152, .12); border-left: 3px solid #98FB98; }
.bandeau.alerte[b-33tyfibrlc] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

/* Deux colonnes qui se replient a une seule sur petit ecran, sans avoir a
   decider champ par champ. Meme grille que la fiche contrat. */
.grille[b-33tyfibrlc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .7rem .9rem;
    align-items: end;
    margin-bottom: .8rem;
}

.grille label[b-33tyfibrlc] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.grille label.large[b-33tyfibrlc] { grid-column: 1 / -1; }

/* Le paragraphe qui dit ce que l'ecran fait REELLEMENT -- ici, d'ou vient le
   tiers d'un document rattache. Il ne se lit qu'une fois, mais le jour ou on
   le cherche il doit etre la. */
.aide[b-33tyfibrlc] {
    margin: 0 0 .7rem;
    font-size: .82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .55);
}

.choix-contrat[b-33tyfibrlc] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    width: 100%;
    margin-bottom: .8rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}
/* /Components/Pages/Documents.razor.rz.scp.css */
/* La barre de filtres, reprise a l'identique des autres listes. L'isolation
   CSS de Blazor n'expose rien d'un composant a l'autre : ce qui n'est pas
   redeclare ici n'existe pas. Viennent d'ailleurs, et seulement elles :
   .etat, .etat-ok, .etat-info, .etat-neutre, .texte-faible (app.css). */

.filtres[b-en5apwvmpl] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem .9rem;
    padding: .7rem .8rem;
    margin-bottom: .8rem;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.filtres label[b-en5apwvmpl] {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
}

.filtres label.grandit[b-en5apwvmpl] { flex: 1 1 16rem; }
.filtres select[b-en5apwvmpl] { min-width: 11rem; }

.bandeau[b-en5apwvmpl] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    margin-bottom: .9rem;
    font-size: .87rem;
}

.bandeau.ok[b-en5apwvmpl] { background: rgba(152, 251, 152, .12); border-left: 3px solid #98FB98; }
.bandeau.alerte[b-en5apwvmpl] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

/* La note du document, sous son titre : un complement, jamais une seconde
   ligne de titre. Elle est tronquee -- cinq cents caracteres sous chaque
   ligne feraient un tableau qu'on ne balaie plus. */
.note[b-en5apwvmpl] {
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: .1rem;
}

/* --- la fenetre de creation ----------------------------------------------

   UNE COLONNE, et les champs dans l'ordre des questions : comment
   l'appeler, d'ou partir, ce que ce depart demande. Une grille a deux
   colonnes aurait mis "tiers pressenti" a cote de "partir de", et fait
   croire que les deux se repondent. */

.creation[b-en5apwvmpl] {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem .9rem;
}

.creation label[b-en5apwvmpl] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.creation label.large[b-en5apwvmpl] { flex: 1 1 100%; }

.creation label.case[b-en5apwvmpl] {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: .45rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .8);
}

.creation label.case input[b-en5apwvmpl] { margin-top: .15rem; flex: 0 0 auto; }

/* Le paragraphe qui dit ce que le choix fait REELLEMENT. Il occupe toute la
   largeur : une explication en colonne etroite se lit deux fois. */
.creation .aide[b-en5apwvmpl] {
    flex: 1 1 100%;
    margin: 0;
    font-size: .8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .55);
}
/* /Components/Pages/Equipements.razor.rz.scp.css */
.filtres[b-i5z64m0am4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem .9rem;
    padding: .7rem .8rem;
    margin-bottom: .8rem;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.filtres label[b-i5z64m0am4],
.formulaire > label[b-i5z64m0am4],
.formulaire .ligne label[b-i5z64m0am4] {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
}

.filtres label.grandit[b-i5z64m0am4] { flex: 1 1 16rem; }
.formulaire .ligne label.grandit[b-i5z64m0am4] { flex: 1 1 14rem; }

.filtres label.case[b-i5z64m0am4],
.formulaire .ligne label.case[b-i5z64m0am4] {
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    padding-bottom: .4rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .75);
}

.filtres select[b-i5z64m0am4] { min-width: 9rem; }

/* Une ligne inactive reste lisible mais recule : elle n'est plus du travail. */
.inactif[b-i5z64m0am4] { opacity: .5; }

.formulaire[b-i5z64m0am4] { display: flex; flex-direction: column; gap: .8rem; }
.formulaire .ligne[b-i5z64m0am4] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }

.titre-bloc[b-i5z64m0am4] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
    margin: .2rem 0 .3rem;
}

.bandeau[b-i5z64m0am4] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    font-size: .87rem;
}

.bandeau.alerte[b-i5z64m0am4] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

/* Devenu un <button> : la ligne entiere mene a la fiche, ce lien-ci ouvre
   l'edition rapide. Il faut donc lui retirer l'apparence de bouton. */
.lien-fiche[b-i5z64m0am4] {
    font-size: .74rem;
    white-space: nowrap;
    color: rgba(255, 255, 255, .45);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.lien-fiche:hover[b-i5z64m0am4] { color: var(--datis-orange, #FD7E00); text-decoration: underline; }

/* ============================================================ la couverture

   Toutes les regles ci-dessous sont ecrites ICI et pas ailleurs : le CSS d'un
   composant Blazor est ISOLE, il ne s'applique qu'aux balises de ce fichier.
   Une classe declaree sur une autre page n'existe pas sur celle-ci -- c'est ce
   qui avait produit les zones de saisie ecrasees de la livraison 25. */

.bandeau.ok[b-i5z64m0am4] { background: rgba(152, 251, 152, .12); border-left: 3px solid #98FB98; }

/* Le bandeau de tete : les trois chiffres qu'on vient chercher. */
.bandeau-parc[b-i5z64m0am4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .7rem;
    font-size: .86rem;
    color: rgba(255, 255, 255, .72);
}

.bandeau-parc .separateur[b-i5z64m0am4] { color: rgba(255, 255, 255, .25); }

/* La barre d'action de la selection. Collante en haut : sur un parc de deux
   cents machines, une barre qui defile hors de l'ecran oblige a remonter pour
   agir sur ce qu'on vient de cocher en bas. */
.barre-selection[b-i5z64m0am4] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .6rem .8rem;
    margin-bottom: .7rem;
    border-radius: .45rem;
    background: #3C3C3C;
    border: 1px solid rgba(253, 126, 0, .45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    font-size: .87rem;
}

/* Un contrat et ses machines. Le trait orange a gauche relie visuellement les
   lignes a leur en-tete : sans lui, deux groupes consecutifs se lisent comme
   un seul tableau. */
.groupe-contrat[b-i5z64m0am4] {
    margin-bottom: 1rem;
    border-radius: .45rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-left: 3px solid var(--datis-orange, #FD7E00);
    overflow: hidden;
}

.groupe-contrat > header[b-i5z64m0am4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    padding: .5rem .7rem;
    background: rgba(255, 255, 255, .05);
    font-size: .85rem;
}

.groupe-contrat > header .reference[b-i5z64m0am4] {
    font-weight: 600;
    color: var(--datis-orange, #FD7E00);
    text-decoration: none;
}

.groupe-contrat > header .reference:hover[b-i5z64m0am4] { text-decoration: underline; }

.groupe-contrat > header .tiers[b-i5z64m0am4] { color: rgba(255, 255, 255, .82); }

.groupe-contrat > header .periode[b-i5z64m0am4],
.groupe-contrat > header .compte[b-i5z64m0am4] {
    font-size: .78rem;
    color: rgba(255, 255, 255, .45);
}

.groupe-contrat > header .reconduit[b-i5z64m0am4] {
    font-size: .74rem;
    padding: .1rem .4rem;
    border-radius: .25rem;
    background: rgba(152, 251, 152, .12);
    color: #BFE8CE;
}

/* Le groupe des machines sans couverture : gris et non orange. Ce n'est pas
   une alerte -- une machine peut legitimement n'avoir jamais ete sous contrat
   -- c'est une liste de travail. */
.groupe-contrat.hors[b-i5z64m0am4] { border-left-color: rgba(255, 255, 255, .25); }
.groupe-contrat.hors > header .reference[b-i5z64m0am4] { color: rgba(255, 255, 255, .8); }

.groupe-contrat table[b-i5z64m0am4] { margin-bottom: 0; }

.colonne-coche[b-i5z64m0am4] { width: 2.2rem; }
.coche-groupe[b-i5z64m0am4] { display: flex; align-items: center; margin: 0; }

/* La croix de detachement : discrete tant qu'on ne la survole pas. Retirer une
   machine d'un contrat n'est pas un geste qu'on doit faire par inadvertance. */
.btn-supprimer[b-i5z64m0am4] {
    background: none;
    border: 0;
    padding: 0 .3rem;
    font-size: 1.05rem;
    line-height: 1;
    color: rgba(255, 255, 255, .3);
    cursor: pointer;
}

.btn-supprimer:hover[b-i5z64m0am4] { color: #FF6B6B; }
.btn-supprimer:disabled[b-i5z64m0am4] { opacity: .4; cursor: default; }
/* /Components/Pages/GraphiquesContrats.razor.rz.scp.css */
/* L'isolation CSS de Blazor n'expose rien d'un composant a l'autre. Viennent
   d'ailleurs, et seulement elles : .texte-faible, .texte-alerte, .montant,
   .etat (app.css). Le composant Repartition porte sa propre feuille.

   LES COULEURS NE SONT PAS CHOISIES A L'OEIL. Elles reprennent celles que le
   projet a deja validees contre le fond #3C3C3C de la charte :
     - le bleu #3987E5 des repartitions -- une GRANDEUR, une seule teinte ;
     - le vert #98FB98 et le rouge #FF8A8A des etats de la prospection --
       une POLARITE, deux teintes opposees, chacune toujours accompagnee de
       son libelle dans la legende ;
     - le gris #6E6E6E de "en attente", qui n'est pas un etat mais une absence
       de decision.
   L'orange #FD7E00 n'apparait nulle part ici : la charte le reserve a
   l'identite DATIS, et un graphique n'est pas une identite. */

.bandeau[b-4o5kmbz86q] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    margin-bottom: .9rem;
    font-size: .87rem;
}

.bandeau.alerte[b-4o5kmbz86q] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

/* --- ce qu'on sait avant ce qu'on montre --------------------------------- */

.couverture[b-4o5kmbz86q] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem 1.2rem;
    padding: .5rem .8rem;
    margin-bottom: 1rem;
    border-radius: .4rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    font-size: .84rem;
}

/* Un lisere, pas un fond rouge : la couverture partielle est une reserve a
   lire, pas une panne. */
.couverture.incomplete[b-4o5kmbz86q] { border-left: 3px solid #FF8A8A; }

.couverture a[b-4o5kmbz86q] { color: rgba(255, 255, 255, .75); }

/* --- le cadre commun a tous les graphiques -------------------------------- */

.carte-graphe[b-4o5kmbz86q] {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .5rem;
    padding: .9rem 1rem 1rem;
    margin-bottom: 1rem;
}

.tete-graphe[b-4o5kmbz86q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    margin-bottom: .8rem;
}

.tete-graphe h2[b-4o5kmbz86q] {
    font-size: .95rem;
    font-weight: 600;
    margin: 0;
}

/* Deux cartes cote a cote, qui se replient l'une sous l'autre en dessous de
   58rem. Le graphique divergent prend deux tiers : il a douze colonnes a
   nourrir, le donut n'en a qu'une. */
.duo[b-4o5kmbz86q] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 58rem) {
    .duo[b-4o5kmbz86q] { grid-template-columns: 1fr; }
}

/* --- la courbe du portefeuille -------------------------------------------- */

/* height:auto et largeur pleine : le viewBox fixe le rapport 720x190, et le
   dessin s'y adapte sans deformer les etiquettes. */
.courbe[b-4o5kmbz86q] {
    display: block;
    width: 100%;
    height: auto;
}

/* Le curseur dit qu'il y a quelque chose a survoler. Les bandes invisibles
   portent l'infobulle native du navigateur : pas de JavaScript, pas de
   composant.

   A LA SOURIS SEULEMENT, et c'est assume : un rect SVG n'entre pas dans
   l'ordre de tabulation. Ce qui compte est redit en TEXTE sous la courbe et
   dans l'aria-label du graphique. */
.courbe rect[b-4o5kmbz86q] { cursor: crosshair; }

.reperes[b-4o5kmbz86q] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.4rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: .8rem;
    color: rgba(255, 255, 255, .6);
}

.positif[b-4o5kmbz86q] { color: #98FB98; }
.negatif[b-4o5kmbz86q] { color: #FF8A8A; }

/* --- entrees et sorties ---------------------------------------------------

   UN GRAPHIQUE DIVERGENT, et non deux histogrammes empiles.

   Ce qui entre et ce qui sort ne s'additionnent pas : ce sont deux sens
   opposes du meme mouvement. Les empiler donnerait une hauteur totale qui ne
   veut rien dire. De part et d'autre d'une ligne, en revanche, l'oeil compare
   les deux moities et lit le solde tout seul.

   LES DEUX MOITIES PARTAGENT UNE ECHELLE, calculee dans la page sur le
   maximum des deux series. Deux echelles independantes feraient paraitre un
   mois a 2 000 EUR de sorties aussi grave qu'un mois a 40 000. */

.mouvements[b-4o5kmbz86q] {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 12rem;
}

.mouvements .colonne[b-4o5kmbz86q] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mouvements .demi[b-4o5kmbz86q] { flex: 1 1 50%; display: flex; min-height: 0; }

/* Les entrees poussent vers le haut depuis la ligne, les sorties vers le bas.
   La ligne elle-meme est le bord partage. */
.mouvements .haut[b-4o5kmbz86q] {
    align-items: flex-end;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.mouvements .bas[b-4o5kmbz86q] { align-items: flex-start; }

.mouvements .barre[b-4o5kmbz86q] { display: block; width: 100%; }

/* Extremite arrondie du cote de la donnee, pied carre sur la ligne de base :
   la meme regle que les trois autres histogrammes du logiciel.

   La COULEUR est portee par la serie -- .entree, .sortie -- et l'arrondi par
   la position. Peindre depuis .haut et .bas marchait aussi, mais le jour ou
   l'on voudra retourner le graphique, la couleur suivrait la position au lieu
   de suivre la donnee. */
.mouvements .barre.entree[b-4o5kmbz86q] { background: #98FB98; }
.mouvements .barre.sortie[b-4o5kmbz86q] { background: #FF8A8A; }

.mouvements .haut .barre[b-4o5kmbz86q] { border-radius: 3px 3px 0 0; }
.mouvements .bas .barre[b-4o5kmbz86q]  { border-radius: 0 0 3px 3px; }

.mouvements .colonne:hover .barre[b-4o5kmbz86q] { filter: brightness(1.15); }

.axe[b-4o5kmbz86q] {
    display: flex;
    gap: 4px;
    margin-top: .3rem;
}

.axe .mois[b-4o5kmbz86q] {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: .68rem;
    color: rgba(255, 255, 255, .45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.solde[b-4o5kmbz86q] {
    margin: .7rem 0 0;
    padding-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: .82rem;
    color: rgba(255, 255, 255, .6);
}

.solde strong[b-4o5kmbz86q] { font-variant-numeric: tabular-nums; }

/* --- la legende -----------------------------------------------------------

   Elle est presente des DEUX categories : l'identite d'une serie ne doit
   jamais reposer sur la seule couleur. */

.legende[b-4o5kmbz86q] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin: 0 0 .6rem;
    padding: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
}

.legende li[b-4o5kmbz86q] { display: flex; align-items: center; gap: .35rem; }

.legende i[b-4o5kmbz86q] {
    width: .7rem;
    height: .7rem;
    border-radius: .2rem;
    flex: 0 0 auto;
}

.legende b[b-4o5kmbz86q] { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- le donut de reconduction ---------------------------------------------

   Le meme dessin que celui de la prospection, et le meme trace d'arc : ils
   partagent Gmao.Shared.Donut depuis la 49. Le centre porte le seul chiffre
   qui compte -- c'est pour cela que le donut est perce. */

.donut-bloc[b-4o5kmbz86q] {
    position: relative;
    width: 100%;
    max-width: 13rem;
    margin: 0 auto .7rem;
}

.donut[b-4o5kmbz86q] { display: block; width: 100%; height: auto; }

.donut-centre[b-4o5kmbz86q] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.donut-centre .valeur[b-4o5kmbz86q] {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.donut-centre .note[b-4o5kmbz86q] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .5);
}

.note-carte[b-4o5kmbz86q] {
    margin: .6rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
}

.note-carte a[b-4o5kmbz86q] { color: rgba(255, 255, 255, .75); }

/* --- les repartitions ------------------------------------------------------ */

.grille-repartitions[b-4o5kmbz86q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 0 2rem;
}

@media (max-width: 52rem) {
    .grille-repartitions[b-4o5kmbz86q] { grid-template-columns: 1fr; }
}

.mesure label.case[b-4o5kmbz86q] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
}
/* /Components/Pages/Heures.razor.rz.scp.css */
/* --- la liste des forfaits ------------------------------------------------

   Un tableau, comme les contrats et les licences. La premiere version faisait
   des cartes : elles montraient bien les quatre chiffres ensemble, mais elles
   ne ressemblaient a aucun autre ecran de BELENOS, et deux presentations pour
   deux listes du meme genre obligent a reapprendre a lire a chaque page.

   Ce que les cartes reglaient -- des libelles a dix centimetres de leurs
   chiffres -- est ici regle autrement : les colonnes sont courtes, et les deux
   faits qui partagent une cellule passent par DeuxFaits, qui les rend en deux
   elements de bloc. */

tr.ligne-close td[b-zt3mgccliz] { color: rgba(255, 255, 255, .45); }


/* --- filtres et formulaires ----------------------------------------------

   Ces regles existent DEJA a l'identique sur les autres pages. Le CSS des
   composants Blazor est isole : une page qui ne les redeclare pas n'en herite
   pas. La liv24 les avait oubliees, et le resultat se voyait -- les <label>
   restaient des elements en ligne, et le <textarea> tombait a sa largeur par
   defaut de vingt colonnes, soit une colonne de la largeur d'un mot.

   Le jour ou l'une de ces regles change, elle change partout : un formulaire
   qui ne se presente pas pareil d'un ecran a l'autre se relit a chaque fois. */

.filtres[b-zt3mgccliz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem .9rem;
    padding: .7rem .8rem;
    margin-bottom: .8rem;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.filtres label[b-zt3mgccliz] {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
}

.filtres label.grandit[b-zt3mgccliz] { flex: 1 1 16rem; }

.filtres label.case[b-zt3mgccliz] {
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    padding-bottom: .4rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .75);
}

.filtres select[b-zt3mgccliz] { min-width: 9rem; max-width: 22rem; }

.formulaire[b-zt3mgccliz] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-zt3mgccliz],
.formulaire .ligne label[b-zt3mgccliz] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.formulaire .ligne[b-zt3mgccliz] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.formulaire .ligne label.grandit[b-zt3mgccliz] { flex: 1 1 16rem; }

.formulaire .ligne label.case[b-zt3mgccliz] {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    padding-bottom: .35rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
}

/* Un commentaire de temps passe est ce qu'on relit devant un client qui
   conteste : il merite la largeur de la fenetre et quatre lignes visibles,
   pas une colonne de la largeur d'un mot. Redimensionnable en hauteur
   seulement -- l'elargir casserait la mise en page de la fenetre. */
.formulaire textarea.form-control[b-zt3mgccliz] {
    width: 100%;
    min-height: 7rem;
    resize: vertical;
    text-transform: none;
    letter-spacing: 0;
}

/* --- la jauge d'utilisation ------------------------------------------------

   Un ratio contre une limite : la forme est une JAUGE, pas un camembert a deux
   parts. Elle double le solde chiffre, elle ne le remplace pas.

   Les trois couleurs ont ete MESUREES sur le fond #3C3C3C, et ce ne sont pas
   celles que j'avais prises d'instinct. Le vert pale et l'orange de l'interface
   ne s'ecartaient que de 10,9 du rouge saumon la ou il en faut 15 au minimum --
   deux etats qu'un oeil normal peine deja a separer. L'orange est donc pousse
   vers le jaune franc, ce qui remonte l'ecart a 16,0, et a 8,4 en vision
   daltonienne.

   La PISTE -- la part non remplie -- est une teinte sombre de la couleur de la
   barre, jamais un gris neutre. L'etat se lit alors sur toute la longueur : un
   forfait depasse de peu resterait sinon une barre presque vide, qu'on lit
   comme "tout va bien". */

.jauge-ligne[b-zt3mgccliz] {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 8rem;
}

.jauge-ligne .piste[b-zt3mgccliz] {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    min-width: 3.5rem;
}

.jauge-ligne .remplissage[b-zt3mgccliz] {
    display: block;
    height: 100%;
    border-radius: 3px;

    /* La barre ne descend jamais sous deux pixels : a 1 %, une largeur exacte
       donnerait un trait invisible, et "presque rien" se lirait comme "rien". */
    min-width: 2px;
}

.jauge-ligne .pct[b-zt3mgccliz] {
    flex: none;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    min-width: 2.6rem;
    text-align: right;
    color: rgba(255, 255, 255, .55);
}

.jauge-ligne.normal  .piste[b-zt3mgccliz] { background: #4E624E; }
.jauge-ligne.normal  .remplissage[b-zt3mgccliz] { background: #98FB98; }

.jauge-ligne.bientot .piste[b-zt3mgccliz] { background: #61573D; }
.jauge-ligne.bientot .remplissage[b-zt3mgccliz] { background: #F5C542; }

.jauge-ligne.depasse .piste[b-zt3mgccliz] { background: #634545; }
.jauge-ligne.depasse .remplissage[b-zt3mgccliz] { background: #FF6B6B; }

/* Le pourcentage prend la couleur de son etat seulement en cas de
   depassement : partout ailleurs il reste en encre neutre, parce qu'un chiffre
   colore par son etat devient un second signal redondant qui fatigue la
   lecture d'une liste de trente lignes. */
.jauge-ligne.depasse .pct[b-zt3mgccliz] { color: #FF6B6B; }
/* /Components/Pages/ImportMachines.razor.rz.scp.css */
.fil-ariane[b-9e8zl7s25w] {
    display: flex;
    gap: .4rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    margin-bottom: .4rem;
}

.fil-ariane a[b-9e8zl7s25w] { color: rgba(255, 255, 255, .68); text-decoration: none; }
.fil-ariane a:hover[b-9e8zl7s25w] { color: #fff; text-decoration: underline; }

.etapes[b-9e8zl7s25w] { display: flex; flex-direction: column; gap: .8rem; margin: 1.2rem 0; }

.etape[b-9e8zl7s25w] {
    display: flex;
    gap: .9rem;
    padding: .9rem 1rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

/* Le numero d'etape est la seule chose qui dise dans quel ordre faire les
   choses : il merite d'etre lisible avant le texte. */
.etape .numero[b-9e8zl7s25w] {
    flex: 0 0 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--datis-orange, #FD7E00);
    color: #1F1F1F;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.etape h2[b-9e8zl7s25w] { font-size: .95rem; margin: 0 0 .3rem; }
.etape input[type="file"][b-9e8zl7s25w] { max-width: 30rem; }

.case[b-9e8zl7s25w] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .78);
}

.bandeau[b-9e8zl7s25w] {
    padding: .6rem .85rem;
    border-radius: .4rem;
    margin: .9rem 0;
    font-size: .88rem;
}

.bandeau.ok[b-9e8zl7s25w] { background: rgba(152, 251, 152, .12); border-left: 3px solid #98FB98; }
.bandeau.alerte[b-9e8zl7s25w] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

.rejetee[b-9e8zl7s25w] { opacity: .6; }

/* --- le rattachement au contrat, entre l'analyse et l'ecriture -------------
   Encadre plutot que noye dans la page : c'est une decision, pas un chiffre
   de plus. Elle se prend une fois, juste avant d'ecrire. */

.contrat-import[b-9e8zl7s25w] {
    border: 1px solid rgba(253, 126, 0, .28);
    background: rgba(253, 126, 0, .06);
    border-radius: .5rem;
    padding: .8rem .95rem;
    margin-bottom: 1rem;
}

.contrat-import h2[b-9e8zl7s25w] { letter-spacing: .08em; }
.contrat-import label[b-9e8zl7s25w] { display: flex; flex-direction: column; gap: .2rem; }
.contrat-import label.grandit[b-9e8zl7s25w] { flex: 1 1 22rem; }
/* /Components/Pages/LicenceFiche.razor.rz.scp.css */
/* .clef-bloc, .clef-libelle et .clef-valeur ne sont PAS ici : elles sont dans
   belenos-extra.css, parce que la fiche d'une application les utilise aussi.
   Blazor isole le style d'un composant -- deux copies isolees finiraient par
   diverger, et deux valeurs qu'on lit au telephone doivent se presenter
   exactement pareil. */

/* Le conteneur signe n'est plus affiche : son payload porte le secret de
   prolongation de la licence, et une valeur qu'on n'a pas besoin de lire n'a
   pas besoin d'etre a l'ecran. Il sort par le fichier, et par lui seul. */

/* .journal est desormais dans belenos-extra.css : la fiche d'une application
   affiche le meme journal, et le style d'un composant Blazor ne sort pas de
   son composant. */
/* /Components/Pages/LicencesDatis.razor.rz.scp.css */
/* La veille : trois sources, trois colonnes, et le titre de chacune dit d'ou
   vient le chiffre.

   Ce n'est pas de la mise en page decorative. Un tableau de bord qui melange
   "ce que j'ai fait" et "ce qu'on m'a raconte" laisse croire qu'on connait
   l'etat d'un poste hors ligne -- alors qu'un poste hors ligne ne parle jamais.
   La separation visuelle EST l'information.

   CORRIGE EN 50.1 : cette feuille etait ecrite pour un fond CLAIR. Bordures en
   transparence de noir, cartes blanches, et deux teintes d'etat sombres. Sur le
   fond sombre de BELENOS, les bordures disparaissaient et le texte devenait
   gris fonce sur gris fonce. Tout passe desormais par les variables de la
   charte. */

.veille[b-oicz2yexcn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.veille-source[b-oicz2yexcn] {
    border: 1px solid var(--bordure, #555);
    border-radius: .5rem;
    padding: .75rem .9rem .9rem;
    background: var(--surface, #333);
}

.veille-titre[b-oicz2yexcn] {
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 .15rem;
}

.veille-source p[b-oicz2yexcn] {
    margin-bottom: .6rem;
}

.veille-chiffres[b-oicz2yexcn] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* Les cartes sont des <a> ou des <div> selon qu'elles menent quelque part.
   La regle porte donc sur la classe et remet a plat ce qu'un lien apporte. */
.veille-carte[b-oicz2yexcn] {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: .35rem .55rem;
    border-radius: .35rem;

    /* UNE SEULE teinte d'accent, et le gris neutre quand il n'y a rien a faire.

       La version precedente en avait deux -- "attention" et "alerte" -- et cette
       echelle de gravite etait une invention : ces compteurs disent tous la meme
       chose, "il y a du travail" ou "il n'y en a pas". Le libelle porte la
       nuance ; la couleur, elle, ne dit que l'etat. */
    border-left: 3px solid var(--bordure, #555);
    background: var(--surface-2, #2f2f2f);
    color: inherit;
    text-decoration: none;
}

a.veille-carte:hover[b-oicz2yexcn] {
    background: rgba(255, 255, 255, .06);
}

.veille-nb[b-oicz2yexcn] {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    min-width: 2.2ch;
    text-align: right;
    color: var(--texte-3, #9a9a9a);

    /* Chiffres a chasse fixe : sans cela, un 1 et un 8 n'ont pas la meme
       largeur et la colonne des libelles danse d'une ligne a l'autre. */
    font-variant-numeric: tabular-nums;
}

.veille-quoi[b-oicz2yexcn] {
    font-size: .82rem;
    line-height: 1.25;
    color: var(--texte-2, #d0d0d0);
}

/* Le rouge #FF8A8A est celui que le projet a valide contre le fond de la charte
   a la livraison 49. L'orange #FD7E00 n'apparait pas ici : la charte le reserve
   a l'identite de la maison, et il ne dit jamais un etat. */
.veille-carte.actif[b-oicz2yexcn] {
    border-left-color: #FF8A8A;
}

.veille-carte.actif .veille-nb[b-oicz2yexcn] {
    color: #FF8A8A;
}

.clef-courte[b-oicz2yexcn] {
    font-size: .8rem;
    white-space: nowrap;
}
/* /Components/Pages/LogicielFiche.razor.rz.scp.css */
/* Styles isoles de la fiche logiciel.

   Ils sont RECOPIES de la fiche machine, et non partages. L'isolation CSS de
   Blazor n'a pas de mecanisme d'heritage entre pages : sortir ces regles dans
   la feuille globale les rendrait visibles partout, et la moindre retouche
   d'ici toucherait des ecrans qu'on ne relit pas. Les deux fiches se
   ressemblent aujourd'hui ; rien ne dit qu'elles se ressembleront demain, et
   c'est precisement ce qui doit rester possible. */

.fil-ariane[b-ciuxnixbfh] {
    display: flex;
    gap: .4rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    margin-bottom: .4rem;
}

.fil-ariane a[b-ciuxnixbfh] { color: rgba(255, 255, 255, .68); text-decoration: none; }
.fil-ariane a:hover[b-ciuxnixbfh] { color: #fff; text-decoration: underline; }

.entete[b-ciuxnixbfh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.entete .serie[b-ciuxnixbfh] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem;
    color: rgba(255, 255, 255, .45);
    margin-left: .5rem;
}

/* La version PRES du nom mais distincte de lui : collee, "Reseau 5" et
   "Poste 2025" se lisaient comme un seul libelle. */
.entete .version[b-ciuxnixbfh] {
    font-size: .9rem;
    color: rgba(255, 255, 255, .55);
    margin-left: .35rem;
}

.drapeaux[b-ciuxnixbfh] { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }

.bandeau[b-ciuxnixbfh] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    margin-bottom: .9rem;
    font-size: .87rem;
    background: rgba(240, 165, 0, .10);
    border-left: 3px solid var(--datis-orange, #F0A500);
}

.bandeau.alerte[b-ciuxnixbfh] { background: rgba(255, 138, 138, .13); border-left-color: #FF8A8A; }

.titre-bloc[b-ciuxnixbfh] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
    margin: .9rem 0 .3rem;
}

/* --- l'ecran vide : il doit dire quoi faire ------------------------------- */

.rien[b-ciuxnixbfh] {
    padding: 1.2rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .04);
    border-left: 3px solid var(--datis-orange, #F0A500);
}

/* --- le fil des interventions -------------------------------------------- */

.fil[b-ciuxnixbfh] { display: flex; flex-direction: column; gap: .45rem; }

.intervention[b-ciuxnixbfh] {
    border-left: 3px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .035);
    border-radius: 0 .35rem .35rem 0;
}

/* La couverture se lit sur le bord de la ligne : c'est l'information qui
   change tout quand on relit un historique deux ans plus tard. */
.intervention.couverte[b-ciuxnixbfh] { border-left-color: #98FB98; }

.intervention header[b-ciuxnixbfh] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    cursor: pointer;
    flex-wrap: wrap;
}

.intervention header:hover[b-ciuxnixbfh] { background: rgba(255, 255, 255, .03); }

.intervention .date[b-ciuxnixbfh] { font-size: .78rem; flex: 0 0 auto; }

.intervention .couverture[b-ciuxnixbfh] {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .1rem .4rem;
    border-radius: .25rem;
}

.intervention .couverture.oui[b-ciuxnixbfh] { background: rgba(152, 251, 152, .14); color: #98FB98; }
.intervention .couverture.non[b-ciuxnixbfh] { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .55); }

.intervention .apercu[b-ciuxnixbfh] {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: .8rem;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.intervention .marques[b-ciuxnixbfh] {
    display: flex;
    gap: .5rem;
    font-size: .7rem;
    color: rgba(255, 255, 255, .45);
    white-space: nowrap;
}

.intervention .corps[b-ciuxnixbfh] {
    padding: .1rem .7rem .7rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.compte-rendu[b-ciuxnixbfh] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .84rem;
    line-height: 1.45;
    margin: .6rem 0 .8rem;
    color: rgba(255, 255, 255, .88);
}

.intervention h3[b-ciuxnixbfh] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
    margin: .8rem 0 .3rem;
}

.suite[b-ciuxnixbfh] {
    font-size: .8rem;
    padding: .4rem .6rem;
    border-radius: .3rem;
    background: rgba(255, 255, 255, .05);
    margin: .5rem 0 0;
}

.suite.due[b-ciuxnixbfh] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

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

.liste-simple[b-ciuxnixbfh] { list-style: none; margin: 0; padding: 0; }

.liste-simple li[b-ciuxnixbfh] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .22rem 0;
    font-size: .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.liste-simple li:last-child[b-ciuxnixbfh] { border-bottom: 0; }
.liste-simple a[b-ciuxnixbfh] { color: rgba(255, 255, 255, .85); text-decoration: none; flex: 1; }
.liste-simple a:hover[b-ciuxnixbfh] { text-decoration: underline; }

/* Les notes libres gardent leurs retours a la ligne : une note saisie en trois
   points devenait un paragraphe unique, illisible. */
.notes[b-ciuxnixbfh] { white-space: pre-wrap; overflow-wrap: anywhere; }
/* /Components/Pages/Logiciels.razor.rz.scp.css */
.filtres[b-4eqjyb49th] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem .9rem;
    padding: .7rem .8rem;
    margin-bottom: .8rem;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.filtres label[b-4eqjyb49th],
.formulaire > label[b-4eqjyb49th],
.formulaire .ligne label[b-4eqjyb49th] {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
}

.filtres label.grandit[b-4eqjyb49th] { flex: 1 1 16rem; }
.formulaire .ligne label.grandit[b-4eqjyb49th] { flex: 1 1 14rem; }

.filtres label.case[b-4eqjyb49th],
.formulaire .ligne label.case[b-4eqjyb49th] {
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    padding-bottom: .4rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .75);
}

.filtres select[b-4eqjyb49th] { min-width: 9rem; }

/* Une ligne inactive reste lisible mais recule : elle n'est plus du travail. */
.inactif[b-4eqjyb49th] { opacity: .5; }

.formulaire[b-4eqjyb49th] { display: flex; flex-direction: column; gap: .8rem; }
.formulaire .ligne[b-4eqjyb49th] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }

.titre-bloc[b-4eqjyb49th] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
    margin: .2rem 0 .3rem;
}

.bandeau[b-4eqjyb49th] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    font-size: .87rem;
}

.bandeau.alerte[b-4eqjyb49th] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

/* --- le bandeau du tri d'import -------------------------------------------
   Il ne crie pas. Ce n'est pas une alerte -- rien n'est casse, rien n'est en
   retard : c'est un travail qui attend, et qui a une fin. D'ou l'orange de la
   marque en filet plutot que le rouge, et la disparition pure et simple des
   que le compte tombe a zero. */

.bandeau-tri[b-4eqjyb49th] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    padding: .7rem .9rem;
    margin-bottom: .9rem;
    border-radius: .45rem;
    background: rgba(253, 126, 0, .09);
    border-left: 3px solid var(--datis-orange, #FD7E00);
    font-size: .88rem;
    line-height: 1.45;
}

.bandeau-tri > div[b-4eqjyb49th] { max-width: 74ch; }
.bandeau-tri .btn[b-4eqjyb49th] { flex: none; }
/* /Components/Pages/LotHeuresFiche.razor.rz.scp.css */
/* --- le bilan du forfait --------------------------------------------------

   Le CSS des composants est ISOLE : la jauge est redecrite ici alors qu'elle
   existe deja sur la liste des forfaits. C'est assume, mais a une condition --
   si l'une des deux change de couleur, les deux changent. Une jauge qui ne veut
   pas dire la meme chose d'un ecran a l'autre ne veut plus rien dire. */

.bilan-forfait[b-jq8ulaitly] {
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .03);
    border-radius: .5rem;
    padding: .7rem .9rem .8rem;
}

.bilan-forfait .cases[b-jq8ulaitly] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 2rem;
}

.bilan-forfait .case[b-jq8ulaitly] { display: block; }

.bilan-forfait .cle[b-jq8ulaitly] {
    display: block;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .42);
}

.bilan-forfait .valeur[b-jq8ulaitly] { display: block; font-size: 1rem; }
.bilan-forfait .case.fort .valeur[b-jq8ulaitly] { font-size: 1.5rem; font-weight: 600; line-height: 1.15; }

/* Les trois couleurs ont ete MESUREES sur le fond #3C3C3C. Le vert pale et
   l'orange de l'interface ne s'ecartaient que de 10,9 du rouge saumon la ou il
   en faut 15 -- deux etats qu'un oeil normal peine deja a separer. L'orange est
   pousse vers le jaune franc : ecart remonte a 16,0, et 8,4 en vision
   daltonienne. Les memes valeurs servent sur la liste des forfaits : une
   couleur qui ne veut pas dire la meme chose d'un ecran a l'autre ne veut plus
   rien dire. */
.jauge-forfait[b-jq8ulaitly] {
    height: 7px;
    border-radius: 4px;
    margin: .7rem 0 .5rem;
    overflow: hidden;

    /* La PISTE est une teinte sombre de la couleur de la barre, jamais un gris
       neutre : l'etat se lit alors sur toute la longueur. Un forfait depasse de
       peu resterait sinon une barre presque vide, qu'on lit comme "tout va
       bien". */
    background: #4E624E;
}

.jauge-forfait.bientot[b-jq8ulaitly] { background: #61573D; }
.jauge-forfait.depasse[b-jq8ulaitly] { background: #634545; }

.jauge-forfait .remplissage[b-jq8ulaitly] {
    display: block;
    height: 100%;
    border-radius: 4px;

    /* Jamais moins de deux pixels : a 1 %, une largeur exacte donnerait un
       trait invisible, et "presque rien" se lirait comme "rien". */
    min-width: 2px;
    background: #98FB98;
}

.jauge-forfait .remplissage.bientot[b-jq8ulaitly] { background: #F5C542; }
.jauge-forfait .remplissage.depasse[b-jq8ulaitly] { background: #FF6B6B; }

/* Les conditions du forfait sont ecrites en toutes lettres et pas seulement
   reglees dans une fenetre : le pas d'arrondi et le report sont ce qu'on
   conteste, et il faut pouvoir les relire sans ouvrir un formulaire. */
.bilan-forfait .conditions[b-jq8ulaitly] {
    margin: 0;
    font-size: .76rem;
    color: rgba(255, 255, 255, .5);
}

.bilan-forfait .conditions span[b-jq8ulaitly] { margin-left: .5rem; }

.bilan-forfait .avertissement[b-jq8ulaitly] {
    margin: .6rem 0 0;
    padding: .4rem .6rem;
    border-left: 3px solid #FF8A8A;
    background: rgba(255, 138, 138, .08);
    border-radius: .25rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .75);
}

/* --- les temps passes ---------------------------------------------------- */

.temps-passes[b-jq8ulaitly] { display: flex; flex-direction: column; gap: .4rem; }

.temps[b-jq8ulaitly] {
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .025);
    border-radius: .4rem;
    padding: .45rem .7rem .5rem;
    cursor: pointer;
    transition: background .12s ease;
}

.temps:hover[b-jq8ulaitly] { background: rgba(255, 255, 255, .06); }

.temps .entete[b-jq8ulaitly] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .25rem;
}

.temps .quand[b-jq8ulaitly] { font-size: .78rem; color: rgba(255, 255, 255, .6); flex: none; }
.temps .duree[b-jq8ulaitly] { font-size: .95rem; font-weight: 600; flex: none; }
.temps .qui[b-jq8ulaitly]   { font-size: .78rem; color: rgba(255, 255, 255, .6); }

.temps .rapport[b-jq8ulaitly] {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .05rem .35rem;
    border-radius: .2rem;
    white-space: nowrap;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .4);
}

.temps .rapport.envoye[b-jq8ulaitly] { background: rgba(111, 211, 196, .14); color: #6FD3C4; }

.temps .commentaire[b-jq8ulaitly] {
    margin: 0;
    font-size: .82rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .8);
}

.texte-multiligne[b-jq8ulaitly] { white-space: pre-wrap; overflow-wrap: anywhere; }


/* --- filtres et formulaires ----------------------------------------------

   Ces regles existent DEJA a l'identique sur les autres pages. Le CSS des
   composants Blazor est isole : une page qui ne les redeclare pas n'en herite
   pas. La liv24 les avait oubliees, et le resultat se voyait -- les <label>
   restaient des elements en ligne, et le <textarea> tombait a sa largeur par
   defaut de vingt colonnes, soit une colonne de la largeur d'un mot.

   Le jour ou l'une de ces regles change, elle change partout : un formulaire
   qui ne se presente pas pareil d'un ecran a l'autre se relit a chaque fois. */

.filtres[b-jq8ulaitly] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem .9rem;
    padding: .7rem .8rem;
    margin-bottom: .8rem;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.filtres label[b-jq8ulaitly] {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
}

.filtres label.grandit[b-jq8ulaitly] { flex: 1 1 16rem; }

.filtres label.case[b-jq8ulaitly] {
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    padding-bottom: .4rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .75);
}

.filtres select[b-jq8ulaitly] { min-width: 9rem; max-width: 22rem; }

.formulaire[b-jq8ulaitly] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-jq8ulaitly],
.formulaire .ligne label[b-jq8ulaitly] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.formulaire .ligne[b-jq8ulaitly] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.formulaire .ligne label.grandit[b-jq8ulaitly] { flex: 1 1 16rem; }

.formulaire .ligne label.case[b-jq8ulaitly] {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    padding-bottom: .35rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
}

/* Un commentaire de temps passe est ce qu'on relit devant un client qui
   conteste : il merite la largeur de la fenetre et quatre lignes visibles,
   pas une colonne de la largeur d'un mot. Redimensionnable en hauteur
   seulement -- l'elargir casserait la mise en page de la fenetre. */
.formulaire textarea.form-control[b-jq8ulaitly] {
    width: 100%;
    min-height: 7rem;
    resize: vertical;
    text-transform: none;
    letter-spacing: 0;
}

/* Le bouton "rapport" d'une ligne de temps passe. Discret mais toujours
   visible : un bouton qui n'apparait qu'au survol n'existe pas pour qui ne
   survole pas, et pas du tout sur un ecran tactile. */
.temps .btn-rapport[b-jq8ulaitly] {
    flex: none;
    border: 1px solid rgba(253, 126, 0, .45);
    background: transparent;
    color: #FD7E00;
    border-radius: .25rem;
    padding: .05rem .4rem;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.4;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.temps .btn-rapport:hover[b-jq8ulaitly],
.temps .btn-rapport:focus-visible[b-jq8ulaitly] {
    background: rgba(253, 126, 0, .16);
    border-color: #FD7E00;
}

/* Un SEUL element pousse a droite, qui contient les deux. Deux margin-left:auto
   voisins se partageraient l'espace au lieu de le donner au premier. */
.temps .fin[b-jq8ulaitly] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
}

/* Ce qu'est le report, sous son chiffre. Un "-0,50 h" sec ne dit pas s'il
   s'agit d'un depassement repris ou d'un reliquat retire. */
.bilan-forfait .nature[b-jq8ulaitly] {
    display: block;
    font-size: .66rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, .4);
}
/* /Components/Pages/MachineFiche.razor.rz.scp.css */
.fil-ariane[b-qneghuc5ty] {
    display: flex;
    gap: .4rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    margin-bottom: .4rem;
}

.fil-ariane a[b-qneghuc5ty] { color: rgba(255, 255, 255, .68); text-decoration: none; }
.fil-ariane a:hover[b-qneghuc5ty] { color: #fff; text-decoration: underline; }

.entete[b-qneghuc5ty] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.entete .serie[b-qneghuc5ty] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem;
    color: rgba(255, 255, 255, .45);
    margin-left: .5rem;
}

.drapeaux[b-qneghuc5ty] { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }

/* Un bandeau sans qualificatif est un AVERTISSEMENT : ce qui a marche mais
   qu'il faut savoir -- "ce deplacement couvre 3 machines". Il n'avait aucun
   fond ni bordure jusqu'ici, parce qu'aucun n'existait : il se lisait donc
   comme un paragraphe ordinaire, ce qui est exactement le contraire du but. */
.bandeau[b-qneghuc5ty] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    margin-bottom: .9rem;
    font-size: .87rem;
    background: rgba(240, 165, 0, .10);
    border-left: 3px solid var(--datis-orange, #F0A500);
}

.bandeau.ok[b-qneghuc5ty] { background: rgba(152, 251, 152, .12); border-left-color: #98FB98; }
.bandeau.alerte[b-qneghuc5ty] { background: rgba(255, 138, 138, .13); border-left-color: #FF8A8A; }

/* --- fil des interventions ------------------------------------------------ */

.fil[b-qneghuc5ty] { display: flex; flex-direction: column; gap: .45rem; }

.intervention[b-qneghuc5ty] {
    border-left: 3px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .035);
    border-radius: 0 .35rem .35rem 0;
}

/* La couverture se lit sur le bord de la ligne : c'est l'information qui
   change tout quand on relit un historique deux ans plus tard. */
.intervention.couverte[b-qneghuc5ty] { border-left-color: #98FB98; }

/* La note se distingue par le trait et par le fond, jamais par la couleur
   seule : sur un ecran de camion en plein soleil, la nuance disparait. */
.intervention.note[b-qneghuc5ty] {
    border-left-style: dashed;
    border-left-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .015);
}

.etat-note[b-qneghuc5ty] {
    background: rgba(253, 126, 0, .13);
    color: var(--datis-orange, #FD7E00);
}

.titre-bloc[b-qneghuc5ty] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
    margin: .9rem 0 .3rem;
}

/* Le trajet propose : une phrase et un lien, sur la ligne des durees. */
.trajet[b-qneghuc5ty] {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    flex: 1 1 16rem;
    font-size: .74rem;
    padding-bottom: .35rem;
}

.intervention header[b-qneghuc5ty] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    cursor: pointer;
    flex-wrap: wrap;
}

.intervention header:hover[b-qneghuc5ty] { background: rgba(255, 255, 255, .03); }

.intervention .date[b-qneghuc5ty] { font-size: .78rem; flex: 0 0 auto; }

.intervention .couverture[b-qneghuc5ty] {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .1rem .4rem;
    border-radius: .25rem;
}

.intervention .couverture.oui[b-qneghuc5ty] { background: rgba(152, 251, 152, .14); color: #98FB98; }
.intervention .couverture.non[b-qneghuc5ty] { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .55); }

.intervention .apercu[b-qneghuc5ty] {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: .8rem;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.intervention .marques[b-qneghuc5ty] {
    display: flex;
    gap: .5rem;
    font-size: .7rem;
    color: rgba(255, 255, 255, .45);
    white-space: nowrap;
}

.intervention .corps[b-qneghuc5ty] {
    padding: .1rem .7rem .7rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.compte-rendu[b-qneghuc5ty] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .84rem;
    line-height: 1.45;
    margin: .6rem 0 .8rem;
    color: rgba(255, 255, 255, .88);
}

.intervention h3[b-qneghuc5ty] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
    margin: .8rem 0 .3rem;
}

.suite[b-qneghuc5ty] {
    font-size: .8rem;
    padding: .4rem .6rem;
    border-radius: .3rem;
    background: rgba(255, 255, 255, .05);
    margin: .5rem 0 0;
}

.suite.due[b-qneghuc5ty] { background: rgba(255, 138, 138, .13); border-left: 3px solid #FF8A8A; }

.consignes[b-qneghuc5ty] {
    white-space: pre-wrap;
    font-size: .82rem;
    padding: .5rem .65rem;
    border-radius: .3rem;
    background: rgba(253, 126, 0, .1);
    border-left: 3px solid var(--datis-orange, #FD7E00);
    margin: .5rem 0 0;
}

/* --- documents ------------------------------------------------------------ */

/* Les listes de documents sont rendues par ListeDocuments, qui porte son
   propre style isole. Il ne reste ici que la liste des contrats rattaches. */
.liste-simple[b-qneghuc5ty] { list-style: none; margin: 0; padding: 0; }

.liste-simple li[b-qneghuc5ty] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .22rem 0;
    font-size: .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.liste-simple li:last-child[b-qneghuc5ty] { border-bottom: 0; }
.liste-simple a[b-qneghuc5ty] { color: rgba(255, 255, 255, .85); text-decoration: none; flex: 1; }
.liste-simple a:hover[b-qneghuc5ty] { text-decoration: underline; }

.btn-supprimer[b-qneghuc5ty] {
    border: 0;
    background: none;
    font-size: 1.05rem;
    line-height: 1;
    color: rgba(255, 255, 255, .3);
    cursor: pointer;
    padding: 0 .2rem;
}

.btn-supprimer:hover[b-qneghuc5ty] { color: #FF8A8A; }

/* --- formulaire ----------------------------------------------------------- */

.formulaire[b-qneghuc5ty] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-qneghuc5ty],
.formulaire .ligne label[b-qneghuc5ty] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.formulaire .ligne[b-qneghuc5ty] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.formulaire .ligne label.grandit[b-qneghuc5ty] { flex: 1 1 14rem; }

.formulaire .ligne label.case[b-qneghuc5ty] {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    padding-bottom: .35rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
}

/* Les blocs replies : tout est la, rien n'encombre. */
.bloc > summary[b-qneghuc5ty] {
    cursor: pointer;
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
    padding: .3rem 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.bloc > summary:hover[b-qneghuc5ty] { color: #fff; }
.bloc[open] > summary[b-qneghuc5ty] { margin-bottom: .5rem; }
/* /Components/Pages/MisesAJour.razor.rz.scp.css */
/* La page du programme de mise a jour. Livraison 56.

   FEUILLE SCOPEE : Blazor la compile avec un attribut de portee propre a
   MisesAJour, donc rien de ce qui suit ne peut deteindre sur un autre ecran.
   Le reste de la page s'habille aux classes communes (belenos-extra.css,
   app.css, Bootstrap) -- on n'en redeclare aucune ici.

   ELLE REPREND LES CLASSES QUE LA 55 AVAIT ECRITES POUR ApplicationsDatis, et
   c'est une COPIE, pas un partage. Une feuille scopee ne s'applique qu'aux
   elements du composant qui la porte : referencer celle de l'autre page ne
   marcherait tout simplement pas. Les deux fichiers vivront leur vie, et celui
   d'ApplicationsDatis maigrira quand sa rubrique depot aura disparu.

   Pas de ::deep : ces elements sont ecrits DANS ce composant, donc ils portent
   son attribut de portee. */

/* ---------- la cle manquante, en tete de page ---------- */

/* LE SEUL BLOC ROUGE DE LA PAGE, et il est reserve a la panne qui empeche tout
   le reste : sans cle, ni manifeste, ni carte, ni lien. Les autres anomalies --
   un dossier ecarte, un site mal orthographie -- se disent en ligne, dans leur
   rubrique. Un ecran ou tout est rouge n'a plus de rouge. */
.alerte-cle[b-3m99xgce0i] {
    border-left: 3px solid var(--alerte, #FF8A8A);
    background: var(--surface-2, #2f2f2f);
    padding: .6rem .85rem;
    border-radius: .3rem;
}

/* ---------- la barre de reglage des liens ---------- */

.barre-liens[b-3m99xgce0i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.champ-duree[b-3m99xgce0i] {
    width: auto;
    display: inline-block;
}

/* ---------- un produit et ses versions ---------- */

.bloc-versions[b-3m99xgce0i] {
    margin-top: .8rem;
    border: 1px solid var(--bordure, #555);
    border-radius: 6px;
    overflow: hidden;
}

.titre-versions[b-3m99xgce0i] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .4rem .6rem;
    background: var(--surface-2, #2f2f2f);
    border-bottom: 1px solid var(--bordure, #555);
}

/* L'empreinte est TRONQUEE A L'ECRAN et complete en infobulle : douze
   caracteres suffisent a comparer deux versions d'un coup d'oeil, et la
   totalite ferait deborder la ligne sur un ecran de portable. */
.empreinte[b-3m99xgce0i] {
    white-space: nowrap;
}

.colonne-action[b-3m99xgce0i] {
    text-align: right;
    white-space: nowrap;
}

/* ---------- ce qu'on vient de fabriquer : une carte, ou un lien ---------- */

.bloc-lien[b-3m99xgce0i] {
    border-left: 3px solid var(--datis-orange, #E8791E);
    background: var(--surface-2, #2f2f2f);
    padding: .6rem .85rem;
    border-radius: .3rem;
}

/* user-select: all -- un double-clic selectionne TOUT, sceau compris. C'est
   l'idiome que la page Documentation API emploie deja pour ses blocs de prompt,
   et il evite un bouton "copier" qui demanderait du JavaScript et ne
   marcherait qu'en HTTPS.

   word-break plutot que overflow-x : une valeur coupee a l'affichage se recolle
   juste a la copie, alors qu'une barre de defilement cache la moitie de ce
   qu'on croit avoir selectionne. */
.lien-partage[b-3m99xgce0i] {
    display: block;
    user-select: all;
    word-break: break-all;
    font-size: .78rem;
    line-height: 1.45;
    padding: .45rem .6rem;
    border: 1px solid var(--bordure, #555);
    border-radius: .3rem;
    background: var(--ground, #333);
}
/* /Components/Pages/Nouveautes.razor.rz.scp.css */
/* Le bloc reste un bloc -- pas un tableau. Ce qui change, c'est qu'il commence
   REPLIE : une ligne par version, et on ouvre celles qu'on veut relire.

   Le tableau avait ete ecarte pour une raison qui n'a pas bouge : les lignes
   d'une version n'ont pas de colonnes communes. Un resume, six lignes livrees
   et trois demandes ne rentrent pas dans une grille sans qu'on les tronque, et
   ce qu'on tronque ici c'est justement la phrase qui explique le changement. */

.version[b-nktlq3upld] {
    margin-bottom: .5rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .04);
    border-left: 3px solid var(--accent, #F0A500);
    overflow: hidden;
}

/* La version depliee se detache : sinon, dans une liste de trente lignes
   identiques, on perd celle qu'on vient d'ouvrir en faisant defiler. */
.version.ouverte[b-nktlq3upld] {
    background: rgba(255, 255, 255, .06);
    margin-bottom: 1rem;
}

/* --- l'entete repliable ------------------------------------------------- */

/* Le <h2> est conserve pour la navigation par titres au lecteur d'ecran, mais
   il ne doit rien apporter visuellement : c'est le bouton qui porte tout. */
.entete-titre[b-nktlq3upld] {
    margin: 0;
    font: inherit;
}

/* C'est un <button> : il se prend au clavier et s'annonce comme depliable.
   On le desabille de tout ce qu'un bouton porte par defaut, mais on garde
   l'anneau de focus -- le supprimer rendrait la page inutilisable au clavier
   sans que personne le remarque a la souris. */
.entete[b-nktlq3upld] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    width: 100%;
    padding: .7rem 1.1rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.entete:hover[b-nktlq3upld] { background: rgba(255, 255, 255, .05); }

.entete:focus-visible[b-nktlq3upld] {
    outline: 2px solid var(--accent, #F0A500);
    outline-offset: -2px;
}

/* Le chevron est dessine ici, pas dans le Razor : les fichiers source restent
   en ASCII pur. Il pivote au lieu de changer de caractere -- l'oeil suit un
   mouvement, il ne compare pas deux glyphes. */
.chevron[b-nktlq3upld]::before {
    content: "\25B8";
    display: inline-block;
    width: .8rem;
    color: rgba(255, 255, 255, .4);
    transition: transform .12s ease;
}

.version.ouverte .chevron[b-nktlq3upld]::before {
    transform: rotate(90deg);
    color: var(--accent, #F0A500);
}

/* nowrap, et c'est le point : en wrap, un titre trop long passe a la ligne au
   lieu de retrecir, et l'entete fait deux lignes -- exactement ce que "une
   ligne par version" cherche a eviter. Avec nowrap et min-width:0, il se coupe
   proprement a la place. */
.identite[b-nktlq3upld] {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.numero-version[b-nktlq3upld] {
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Le titre de version est ce qu'on lit pour decider d'ouvrir : il a le droit
   de prendre la place, et il se coupe proprement plutot que de pousser la date
   hors de l'ecran. */
.sujet[b-nktlq3upld] {
    font-size: .85rem;
    color: rgba(255, 255, 255, .75);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.compte[b-nktlq3upld],
.quand[b-nktlq3upld] {
    font-size: .74rem;
    color: rgba(255, 255, 255, .45);
    white-space: nowrap;
    flex: 0 0 auto;
}

.quand[b-nktlq3upld] {
    font-variant-numeric: tabular-nums;
    min-width: 5.5rem;
    text-align: right;
}

/* Sur telephone, la date passe a la ligne plutot que d'ecraser le titre. */
@media (max-width: 40rem) {
    .entete[b-nktlq3upld] { flex-wrap: wrap; }
    .quand[b-nktlq3upld] { min-width: 0; }
}

/* --- le corps deplie ---------------------------------------------------- */

.corps[b-nktlq3upld] { padding: 0 1.1rem 1rem 2.5rem; }

.resume[b-nktlq3upld] {
    font-size: .86rem;
    color: rgba(255, 255, 255, .8);
    margin: .1rem 0 .8rem;
    max-width: 80ch;
}

.groupe[b-nktlq3upld] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .45);
    margin: .8rem 0 .3rem;
}

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

.lignes[b-nktlq3upld] { list-style: none; margin: 0; padding: 0; }

.lignes li[b-nktlq3upld] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .22rem 0;
    font-size: .85rem;
    line-height: 1.4;
}

/* Le numero garde la meme largeur d'une ligne a l'autre : l'oeil suit une
   colonne, pas un texte qui se decale. */
.numero[b-nktlq3upld] {
    flex: 0 0 2.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: .74rem;
    color: rgba(255, 255, 255, .35);
}

.ecran[b-nktlq3upld] {
    font-size: .68rem;
    padding: .05rem .35rem;
    border-radius: .25rem;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .6);
    white-space: nowrap;
}

/* --- l'editeur ---------------------------------------------------------- */

.editeur[b-nktlq3upld] {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .9rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
}

.editeur label[b-nktlq3upld] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .55);
}

.editeur .ligne[b-nktlq3upld] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.editeur .ligne label.grandit[b-nktlq3upld] { flex: 1 1 16rem; }
/* /Components/Pages/Prospection.razor.rz.scp.css */
/* --- Barre de filtres ---------------------------------------------------- */

.filtres[b-w6rx52f8rq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem .9rem;
    padding: .7rem .8rem;
    margin-bottom: .8rem;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.filtres label[b-w6rx52f8rq] {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
}

.filtres label.grandit[b-w6rx52f8rq] { flex: 1 1 18rem; }

.filtres label.case[b-w6rx52f8rq] {
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    padding-bottom: .4rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .75);
}

.filtres select[b-w6rx52f8rq], .filtres input[type="text"][b-w6rx52f8rq], .filtres input:not([type])[b-w6rx52f8rq] { min-width: 9rem; }

/* ---------- la fenetre de relance (livraison 57) ---------- */

/* Les champs de date sont PLUS ETROITS que les listes deroulantes : le
   selecteur natif affiche jj/mm/aaaa, qui tient dans huit caracteres. Leur
   donner les 9rem des autres champs ferait une barre de filtres deux fois
   plus large pour rien. */
.filtres input[type="date"][b-w6rx52f8rq] {
    min-width: 8.5rem;
    width: 8.5rem;
}

/* LE BLOC DE PERIODE N'EST PAS UN label, c'est un div -- un label ne
   s'associe qu'a un seul champ. Il doit donc reprendre a la main la mise en
   colonne que .filtres label donne aux autres, et refuser d'etre etire par le
   flex de la barre. */
.filtres .periode[b-w6rx52f8rq] {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    flex: 0 0 auto;
}

/* L'intitule copie .filtres label, puisque ce bloc n'en est pas un. */
.filtres .periode .intitule[b-w6rx52f8rq] {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
}

/* Le "et" entre les deux champs, LUI, ne doit PAS heriter des capitales ni du
   .68rem de l'intitule : il s'afficherait "ET" en minuscules capitales entre
   deux dates, ce qui se lit comme une etiquette et non comme une liaison. */
.filtres .periode .liaison[b-w6rx52f8rq] {
    font-size: .78rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--texte-3, #8A8A8A);
}

/* Les deux dates et le "et" restent sur une ligne, meme quand la barre se
   replie : couper une periode en deux lignes la rend illisible. */
.filtres .deux-dates[b-w6rx52f8rq] {
    display: flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

/* Les raccourcis s'alignent sur le BAS des champs voisins, pas sur leur
   milieu : les labels de la barre posent leur intitule au-dessus du champ,
   et un bouton centre flotterait a mi-hauteur. */
.filtres .raccourcis[b-w6rx52f8rq] {
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    flex-wrap: wrap;
}

/* --- En-tetes triables ---------------------------------------------------- */

.triable[b-w6rx52f8rq] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.triable:hover[b-w6rx52f8rq] { color: #fff; }

.fleche[b-w6rx52f8rq] {
    font-size: .62rem;
    margin-left: .15rem;
    color: var(--accent, #F0A500);
}

/* La colonne non triee garde sa fleche, en filigrane : sans elle, rien
   n'indique que l'en-tete est cliquable avant de l'avoir survole. */
.fleche.vide[b-w6rx52f8rq] { color: rgba(255, 255, 255, .18); }

/* --- Gravite du retard ---------------------------------------------------- */

/* Un lisere a gauche de la ligne : lisible d'un coup d'oeil sur toute la
   hauteur du tableau, sans colorer un fond qui rendrait le texte penible.
   L'echelle ne monte que jusqu'a six mois : au-dela, l'affaire est dormante
   et sort du rouge -- une affaire oubliee depuis trois ans n'est pas une
   urgence, et la peindre comme telle rendait le rouge illisible. */
.tableau-relances tbody tr[b-w6rx52f8rq] { border-left: 3px solid transparent; }

.tableau-relances tbody tr.retard-1[b-w6rx52f8rq] { border-left-color: var(--datis-orange, #FD7E00); }
.tableau-relances tbody tr.retard-2[b-w6rx52f8rq] { border-left-color: rgba(229, 72, 77, .35); }
.tableau-relances tbody tr.retard-3[b-w6rx52f8rq] { border-left-color: rgba(229, 72, 77, .6); }
.tableau-relances tbody tr.retard-4[b-w6rx52f8rq] { border-left-color: rgba(229, 72, 77, .85); }

.tableau-relances tbody tr.retard-5[b-w6rx52f8rq] {
    border-left-color: #E5484D;
    background: rgba(229, 72, 77, .07);
}

/* Dormante : grise et en retrait. Elle demande une decision, pas une course. */
.tableau-relances tbody tr.dormante[b-w6rx52f8rq] {
    border-left-color: rgba(255, 255, 255, .22);
    opacity: .72;
}

.tableau-relances tbody tr.close[b-w6rx52f8rq] { opacity: .55; }

/* Jauge : une seule couleur qui s'intensifie, parce que c'est la meme chose
   qui s'aggrave -- et une teinte a part pour ce qui n'est plus une urgence. */
.jauge[b-w6rx52f8rq] {
    display: inline-block;
    width: .95rem;
    height: .32rem;
    margin-right: .35rem;
    border-radius: .16rem;
    vertical-align: middle;
    background: rgba(255, 255, 255, .16);
}

.jauge-1[b-w6rx52f8rq] { background: var(--datis-orange, #FD7E00); }
.jauge-2[b-w6rx52f8rq] { background: rgba(229, 72, 77, .35); }
.jauge-3[b-w6rx52f8rq] { background: rgba(229, 72, 77, .6); }
.jauge-4[b-w6rx52f8rq] { background: rgba(229, 72, 77, .85); }
.jauge-5[b-w6rx52f8rq] { background: #E5484D; }
.jauge-dormante[b-w6rx52f8rq] { background: rgba(255, 255, 255, .28); }

.texte-accent[b-w6rx52f8rq] { color: var(--datis-orange, #FD7E00); }

/* --- Divers --------------------------------------------------------------- */

.marque-priorite[b-w6rx52f8rq] {
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: .25rem;
    border-radius: 50%;
    background: var(--alerte, #E5484D);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
    vertical-align: middle;
}

.lien-fiche[b-w6rx52f8rq] {
    font-size: .74rem;
    white-space: nowrap;
    color: rgba(255, 255, 255, .45);
    text-decoration: none;
}

.lien-fiche:hover[b-w6rx52f8rq] { color: var(--accent, #F0A500); text-decoration: underline; }

.pied-tableau[b-w6rx52f8rq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .4rem;
}

.legende[b-w6rx52f8rq] {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    font-size: .72rem;
    color: rgba(255, 255, 255, .45);
}

.legende span[b-w6rx52f8rq] { display: inline-flex; align-items: center; }

/* --- Bande de tete --------------------------------------------------------
   Elle remplace l'histogramme des trente jours : meme information de fond,
   une ligne au lieu de soixante-dix pixels. Le detail complet vit dans une
   fenetre, ouverte a la demande. */

.bande[b-w6rx52f8rq] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "barre bouton" "legende bouton";
    align-items: center;
    gap: .4rem .9rem;
    margin-bottom: .9rem;
}

.bande-barre[b-w6rx52f8rq] {
    grid-area: barre;
    display: flex;
    gap: 2px;              /* l'interstice qui separe deux teintes voisines */
    height: .55rem;
    border-radius: .28rem;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
}

.bande-barre .segment[b-w6rx52f8rq] { display: block; min-width: 3px; }

.bande-legende[b-w6rx52f8rq] {
    grid-area: legende;
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .8rem;
    font-size: .72rem;
    color: rgba(255, 255, 255, .6);
}

.bande-legende span[b-w6rx52f8rq] { display: inline-flex; align-items: center; gap: .3rem; }

.bande-legende i[b-w6rx52f8rq] {
    width: .6rem;
    height: .6rem;
    border-radius: .15rem;
    display: inline-block;
}

.bande-legende b[b-w6rx52f8rq] { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }

.bande button[b-w6rx52f8rq] { grid-area: bouton; white-space: nowrap; }

@media (max-width: 640px) {
    .bande[b-w6rx52f8rq] {
        grid-template-columns: 1fr;
        grid-template-areas: "barre" "legende" "bouton";
    }
    .bande button[b-w6rx52f8rq] { justify-self: start; }
}
/* /Components/Pages/Sante.razor.rz.scp.css */
/* La page Sante.

   Tout est redeclare ici : l'isolation CSS de Blazor n'expose rien d'un
   composant a l'autre, et seules .etat, .etat-ok, .etat-neutre, .etat-alerte,
   .etat-attention, .texte-faible et .montant sont globales. */

.blocs-sante[b-p35m3fpsy2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
    gap: 1rem;
}

.bloc-sante[b-p35m3fpsy2] {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .5rem;
    padding: .9rem 1rem 1rem;

    /* Le filet de gauche porte l'etat du bloc : c'est le seul signal qu'on
       lise sans lire, et il permet de balayer six cadres en une seconde. */
    border-left-width: 3px;
    border-left-color: rgba(255, 255, 255, .12);
}

.bloc-sante.etat-ok[b-p35m3fpsy2] { border-left-color: var(--ok); }
.bloc-sante.etat-attention[b-p35m3fpsy2] { border-left-color: var(--attention); }
.bloc-sante.etat-alerte[b-p35m3fpsy2] { border-left-color: var(--alerte); }

/* Inconnu : le bloc n'a pas pu etre lu. Tirete plutot que plein -- ce n'est
   pas "tout va bien" et ce n'est pas non plus un probleme constate, c'est un
   trou. Sans cette regle, le cadre gardait le meme filet neutre qu'un cadre
   calme, sous un bandeau rouge qui disait le contraire. */
.bloc-sante.etat-neutre[b-p35m3fpsy2] {
    border-left-color: var(--attention);
    border-left-style: dashed;
}

.puce.etat-neutre[b-p35m3fpsy2] { background: var(--attention); }

.titre-bloc[b-p35m3fpsy2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texte-3);
    margin: 0 0 .7rem;
}

.puce[b-p35m3fpsy2] {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    flex: none;
}

.puce.etat-ok[b-p35m3fpsy2] { background: var(--ok); }
.puce.etat-attention[b-p35m3fpsy2] { background: var(--attention); }
.puce.etat-alerte[b-p35m3fpsy2] { background: var(--alerte); }

.constats[b-p35m3fpsy2] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.constat[b-p35m3fpsy2] {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: .2rem .8rem;
    align-items: baseline;
}

/* En dessous de 30rem de cadre, deux colonnes donnent quatre mots par ligne :
   on repasse en pile plutot que de couper les libelles. */
@media (max-width: 34rem) {
    .constat[b-p35m3fpsy2] {
        grid-template-columns: 1fr;
        gap: .1rem;
    }
}

.constat dt[b-p35m3fpsy2] {
    font-size: .8rem;
    color: var(--texte-3);
    font-weight: 400;
    margin: 0;
}

.constat dd[b-p35m3fpsy2] {
    margin: 0;
    font-size: .84rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.constat .valeur[b-p35m3fpsy2] { font-weight: 600; }

.constat.etat-attention .valeur[b-p35m3fpsy2] { color: var(--attention); }
.constat.etat-alerte .valeur[b-p35m3fpsy2] { color: var(--alerte); }

.constat .detail[b-p35m3fpsy2] {
    font-size: .78rem;
    color: var(--texte-3);
    line-height: 1.35;
}

.constat .chemin[b-p35m3fpsy2] {
    font-size: .78rem;
    align-self: flex-start;
}
/* /Components/Pages/TableauDeBord.razor.rz.scp.css */
/* --- Montant a renouveler par mois ----------------------------------------
   Graphique autonome. La grille globale ".barres" attend UNE barre par
   colonne ; deux elements empiles y debordaient vers le haut et venaient
   recouvrir le titre. Ici la zone de trace a une hauteur fixe, chaque colonne
   la remplit par le bas, et rien ne peut en sortir. */

.graphe-montants[b-bebx31b5rh] {
    margin-top: .4rem;
    overflow: hidden;
}

.trace[b-bebx31b5rh] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 7.5rem;
}

.colonne[b-bebx31b5rh] {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

/* Une seule teinte : ce ne sont pas des categories, c'est une grandeur. */
.barre[b-bebx31b5rh] {
    width: 100%;
    background: var(--datis-orange, #FD7E00);
    /* Extremite arrondie du cote de la donnee, pied carre sur la ligne de base. */
    border-radius: 3px 3px 0 0;
}

/* Le manque n'a pas de hauteur propre : 8 px fixes, hachures, poses sur la
   barre. Ils disent "il y a autre chose ici", pas "il y a tant". */
.chapeau[b-bebx31b5rh] {
    width: 100%;
    height: 8px;
    margin-bottom: 2px;
    border-radius: 3px 3px 0 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, .3) 0 3px,
        rgba(255, 255, 255, .06) 3px 6px);
}

.valeur[b-bebx31b5rh] {
    font-size: .6rem;
    line-height: 1;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .75);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.axe[b-bebx31b5rh] {
    display: flex;
    gap: 4px;
    margin-top: .3rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: .25rem;
}

.axe .mois[b-bebx31b5rh] {
    flex: 1;
    text-align: center;
    font-size: .62rem;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .45);
    min-width: 0;
}

/* Le nombre de contrats non chiffres, sous le mois : un chiffre lisible vaut
   mieux qu'une hauteur inventee. */
.axe .mois em[b-bebx31b5rh] {
    display: block;
    font-style: normal;
    font-size: .58rem;
    color: rgba(255, 255, 255, .3);
}

/* --- consommables : douze mois glissants ----------------------------------
   Deux categories empilees. Les teintes ne sont pas choisies a l'oeil : elles
   sont validees contre le fond #3C3C3C de la charte -- bande de clarte,
   saturation minimale, separation daltonienne (delta E 27 en protanopie) et
   contraste sur le fond. L'orange est celui de la charte, en version foncee. */

.legende-conso[b-bebx31b5rh] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.2rem;
    margin: 0 0 .5rem;
    padding: 0;
    font-size: .78rem;
    color: var(--texte-2, rgba(255, 255, 255, .7));
}

.legende-conso li[b-bebx31b5rh] { display: flex; align-items: center; gap: .4rem; }

.legende-conso .pastille[b-bebx31b5rh] {
    width: .7rem;
    height: .7rem;
    border-radius: .18rem;
    flex: 0 0 auto;
}

.pastille.etiquettes[b-bebx31b5rh], .segment.etiquettes[b-bebx31b5rh] { background: #D96C00; }
.pastille.rubans[b-bebx31b5rh],     .segment.rubans[b-bebx31b5rh]     { background: #3987E5; }

.graphe-conso[b-bebx31b5rh] { margin-top: .2rem; overflow: hidden; }

.graphe-conso .trace[b-bebx31b5rh] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 7.5rem;
}

.graphe-conso .colonne[b-bebx31b5rh] {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.graphe-conso .segment[b-bebx31b5rh] {
    width: 100%;
    display: block;
}

/* L'ecart de 2 px entre les deux fills : sans lui, deux teintes voisines se
   lisent comme une seule bande. */
.graphe-conso .segment.rubans[b-bebx31b5rh] { margin-bottom: 2px; border-radius: 3px 3px 0 0; }

/* Le segment du bas garde un pied carre sur la ligne de base. Il n'est arrondi
   en haut que lorsqu'il est seul dans la colonne -- la classe est posee par la
   page, un selecteur CSS ne peut pas le savoir. */
.graphe-conso .segment.etiquettes[b-bebx31b5rh] { border-radius: 0; }
.graphe-conso .segment.etiquettes.sommet[b-bebx31b5rh] { border-radius: 3px 3px 0 0; }

.graphe-conso .valeur[b-bebx31b5rh] {
    font-size: .6rem;
    line-height: 1;
    margin-bottom: 2px;
    color: var(--texte-3, rgba(255, 255, 255, .5));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.graphe-conso .axe[b-bebx31b5rh] {
    display: flex;
    gap: 4px;
    margin-top: .3rem;
}

.graphe-conso .mois[b-bebx31b5rh] {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: .6rem;
    color: var(--texte-3, rgba(255, 255, 255, .45));
    white-space: nowrap;
    overflow: hidden;
}

/* --- les mois attendus ----------------------------------------------------- */

/* Le projete n'est pas une troisieme categorie : c'est le meme produit, dans un
   mois qui n'a pas encore eu lieu. Il garde donc sa teinte et prend une trame,
   plus un liseré qui le separe du dernier mois reel. Un montant projete
   presente comme un montant realise est un mensonge. */
.graphe-conso .colonne.projete .segment[b-bebx31b5rh] {
    opacity: .55;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(0, 0, 0, .38) 0 3px,
            rgba(255, 255, 255, .12) 3px 6px);
}

.graphe-conso .colonne.projete .valeur[b-bebx31b5rh] { font-style: italic; opacity: .75; }

.graphe-conso .colonne.projete.debut[b-bebx31b5rh] { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18); }

.graphe-conso .mois.projete[b-bebx31b5rh] { font-style: italic; opacity: .7; }

.pastille.trame[b-bebx31b5rh] {
    background: #8A8A8A;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(0, 0, 0, .38) 0 3px,
            rgba(255, 255, 255, .12) 3px 6px);
}
/* /Components/Pages/TriLicences.razor.rz.scp.css */
/* La CSS des composants Blazor est ISOLEE : les classes communes sont
   redeclarees ici, a l'identique, plutot qu'esperees.

   Restent globales et non redeclarees : .etat, .etat-ok, .etat-neutre,
   .etat-alerte, .montant, .texte-faible, .texte-alerte (app.css), .etat-info,
   .rubrique et .paires (belenos-extra.css), et les classes Bootstrap. */

.bandeau[b-2m4b4tkqvh] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    margin-bottom: .9rem;
    font-size: .87rem;
    background: rgba(240, 165, 0, .10);
    border-left: 3px solid var(--accent, #F0A500);
}

.bandeau.ok[b-2m4b4tkqvh] { background: rgba(152, 251, 152, .12); border-left-color: #98FB98; }
.bandeau.alerte[b-2m4b4tkqvh] { background: rgba(255, 138, 138, .13); border-left-color: #FF8A8A; }

.filtres[b-2m4b4tkqvh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.2rem;
    padding: .6rem .8rem;
    margin-bottom: .9rem;
    border-radius: .4rem;
    background: rgba(255, 255, 255, .04);
}

.filtres label.case[b-2m4b4tkqvh] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
}

/* --- la file d'attente ----------------------------------------------------
   Une carte par objet, et pas un tableau : chaque ligne porte une decision,
   ses contrats et deux boutons. Un tableau aurait mis tout cela dans une
   cellule, ou -- pire -- aurait cache les contrats derriere un clic, alors
   que ce sont eux qui permettent de trancher. */

.liste[b-2m4b4tkqvh] { display: flex; flex-direction: column; gap: .75rem; }

.objet[b-2m4b4tkqvh] {
    background: var(--surface, #3A3A3A);
    border: 1px solid var(--bordure, #4A4A4A);
    border-radius: 6px;
    padding: .8rem .9rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.objet-tete[b-2m4b4tkqvh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.identite[b-2m4b4tkqvh] { min-width: 0; }
.nom[b-2m4b4tkqvh] { font-weight: 600; font-size: .98rem; }

/* Le tableau des contrats sans fond ni bordure exterieure : il vit DANS la
   carte, il n'en est pas un second. */
.contrats[b-2m4b4tkqvh] { background: none; }
.contrats > :not(caption) > * > *[b-2m4b4tkqvh] {
    padding: .3rem .55rem;
    border-bottom-color: rgba(255, 255, 255, .07);
}
.contrats tr:last-child > *[b-2m4b4tkqvh] { border-bottom: 0; }

.actions[b-2m4b4tkqvh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: .15rem;
    border-top: 1px dashed rgba(255, 255, 255, .1);
}

.actions .texte-faible[b-2m4b4tkqvh] { margin-left: .25rem; }

/* --- les fenetres ---------------------------------------------------------- */

.formulaire[b-2m4b4tkqvh] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-2m4b4tkqvh],
.formulaire .ligne label[b-2m4b4tkqvh] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

/* Le texte d'aide sous un champ reprend la casse normale : en majuscules, il
   se lirait comme une seconde etiquette. */
.formulaire label .texte-faible[b-2m4b4tkqvh] {
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.35;
    margin-top: .15rem;
}

.formulaire .ligne[b-2m4b4tkqvh] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.formulaire .ligne > label[b-2m4b4tkqvh] { flex: 1 1 11rem; }

.formulaire fieldset[b-2m4b4tkqvh] { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }

.etiquette-choix[b-2m4b4tkqvh] {
    float: none;
    width: auto;
    padding: 0;
    margin: 0;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

/* Le choix est une ZONE cliquable, pas un bouton radio suivi d'un paragraphe :
   la cible d'un bouton radio fait douze pixels, et la phrase qui l'explique en
   fait trois cents. */
.choix[b-2m4b4tkqvh] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .7rem;
    border: 1px solid var(--bordure, #4A4A4A);
    border-radius: 5px;
    cursor: pointer;
    font-size: .88rem;
    line-height: 1.45;
}

.choix:hover[b-2m4b4tkqvh] { background: rgba(255, 255, 255, .04); }
.choix input[b-2m4b4tkqvh] { margin-top: .2rem; flex: none; }
.choix em[b-2m4b4tkqvh] { color: rgba(255, 255, 255, .62); font-style: italic; }

.rubrique-plate[b-2m4b4tkqvh] {
    padding: .6rem .7rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, .05);
    font-size: .88rem;
}

.liens[b-2m4b4tkqvh] { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .25rem; }

/* Deux pastilles cote a cote se touchent et se lisent comme une seule
   etiquette. Meme regle que la liste des interventions -- mais la classe est
   isolee par composant, donc redeclaree ici et non esperee. */
.pastilles[b-2m4b4tkqvh] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
    flex: none;
}
/* /Components/Pages/Utilisateurs.razor.rz.scp.css */
.teintes[b-r8bmdzy614] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* Chaque pastille de choix a la forme de ce qu'elle produit : on choisit une
   pastille, pas un code couleur. */
.teinte[b-r8bmdzy614] {
    min-width: 2.6rem;
    height: 1.8rem;
    padding: 0 .4rem;
    border: 0;
    border-radius: .9rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
    opacity: .75;
    transition: opacity .12s ease, transform .12s ease;
}

.teinte:hover[b-r8bmdzy614] { opacity: 1; transform: translateY(-1px); }

/* Le choix courant se voit a son anneau, pas a une coche : la couleur doit
   rester entierement visible pour etre comparee aux autres. */
.teinte.choisie[b-r8bmdzy614] {
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25),
                0 0 0 2px var(--datis-orange, #FD7E00);
}
/* /Components/Pages/VisiteFiche.razor.rz.scp.css */
/* La CSS des composants Blazor est ISOLEE : rien de ce que porte
   MachineFiche.razor.css n'arrive ici. Les classes communes -- .bandeau,
   .formulaire, .ligne, .case, .liste-simple, .trajet -- sont donc redeclarees,
   a l'identique, plutot qu'esperees.

   Restent globales et non redeclarees : .etat, .etat-ok, .etat-neutre,
   .montant, .texte-faible (app.css), .rubrique et .paires
   (wwwroot/belenos-extra.css). */

/* Un bandeau sans qualificatif est un AVERTISSEMENT : ce qui a marche mais
   qu'il faut savoir -- "le preventif a ete avance", "la visite d'origine
   portait 87 km". Il ne ressemble ni au vert ni au rouge, sinon on le lit
   comme l'un des deux et on cesse de le lire du tout. */
.bandeau[b-r2x2p2msg2] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    margin-bottom: .9rem;
    font-size: .87rem;
    background: rgba(240, 165, 0, .10);
    border-left: 3px solid var(--accent, #F0A500);
}

.bandeau.ok[b-r2x2p2msg2] { background: rgba(152, 251, 152, .12); border-left-color: #98FB98; }
.bandeau.alerte[b-r2x2p2msg2] { background: rgba(255, 138, 138, .13); border-left-color: #FF8A8A; }

/* --- une machine de la visite --------------------------------------------- */

.machine[b-r2x2p2msg2] {
    border-left: 3px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .035);
    border-radius: 0 .35rem .35rem 0;
    margin-bottom: .45rem;
}

.machine.ouverte[b-r2x2p2msg2] {
    border-left-color: var(--accent, #F0A500);
    background: rgba(255, 255, 255, .06);
    margin-bottom: 1rem;
}

.machine .entete[b-r2x2p2msg2] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    width: 100%;
    padding: .5rem .7rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.machine .entete:hover[b-r2x2p2msg2] { background: rgba(255, 255, 255, .04); }

/* L'anneau de focus reste : le supprimer rend la page inutilisable au clavier
   sans que personne le remarque a la souris. */
.machine .entete:focus-visible[b-r2x2p2msg2] {
    outline: 2px solid var(--accent, #F0A500);
    outline-offset: -2px;
}

.chevron[b-r2x2p2msg2]::before {
    content: "\25B8";
    display: inline-block;
    width: .8rem;
    color: rgba(255, 255, 255, .4);
    transition: transform .12s ease;
}

.machine.ouverte .chevron[b-r2x2p2msg2]::before {
    transform: rotate(90deg);
    color: var(--accent, #F0A500);
}

.nom[b-r2x2p2msg2] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .92rem;
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
}

.meta[b-r2x2p2msg2] {
    flex: 0 0 auto;
    font-size: .74rem;
    color: rgba(255, 255, 255, .45);
    white-space: nowrap;
}

/* L'apercu replie : une ligne, coupee. On vient ici pour savoir SI on ouvre. */
.apercu[b-r2x2p2msg2] {
    margin: 0;
    padding: 0 .7rem .5rem 1.9rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .72);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Une machine touchee et non decrite : c'est ce que la cloture refusera, et
   ca doit se voir avant d'y arriver. */
.apercu.vide[b-r2x2p2msg2] { color: #FF8A8A; font-style: italic; }

.corps[b-r2x2p2msg2] { padding: 0 .7rem .8rem .7rem; display: flex; flex-direction: column; gap: .7rem; }

/* --- formulaire ------------------------------------------------------------ */

.formulaire[b-r2x2p2msg2] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-r2x2p2msg2],
.formulaire .ligne label[b-r2x2p2msg2],
.corps > label[b-r2x2p2msg2],
.corps .ligne label[b-r2x2p2msg2] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

/* LES HAUTS ALIGNES, PAS LES BAS.

   flex-end alignait les BAS des labels. Un label est une colonne : son titre,
   son champ, et parfois une ligne de plus -- la date en clair sous une date,
   l'aide sous un champ. Cette ligne de plus poussait le champ VOISIN vers le
   bas d'exactement sa hauteur : DATE et INTERVENANT cote a cote, deux champs
   decales, et pareil sous "Suite a donner". Ce n'etait pas un defaut de la
   1.51 -- c'est la depuis que cette rangee existe.

   Les hauts alignes alignent les titres, donc les champs, quoi qu'il y ait
   dessous. Ce qui doit rester en bas -- le lien vers la fiche de l'objet, a
   droite de la rangee -- le demande explicitement plus bas. */
.ligne[b-r2x2p2msg2] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-start; }
.ligne label.grandit[b-r2x2p2msg2] { flex: 1 1 14rem; }

/* Le lien vers la fiche de l'objet : lui, il se cale sur les champs, pas sur
   les titres. Le padding le remonte au niveau de la ligne de saisie plutot que
   du bas du bloc. */
.corps .ligne > .lien-objet[b-r2x2p2msg2] { align-self: flex-end; padding-bottom: .35rem; }

/* .case existe sous .formulaire ET directement dans le corps : les deux
   selecteurs, parce qu'une case a cocher qui garde le style d'un libelle en
   capitales est illisible. */
.formulaire > label.case[b-r2x2p2msg2],
.formulaire .ligne label.case[b-r2x2p2msg2] {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    padding-bottom: .35rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
}

/* Le trajet propose : une phrase et un lien. */
.trajet[b-r2x2p2msg2] {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    flex-wrap: wrap;
}

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

.liste-simple[b-r2x2p2msg2] { list-style: none; margin: 0; padding: 0; }

.liste-simple li[b-r2x2p2msg2] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .35rem 0;
    font-size: .82rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.liste-simple li:last-child[b-r2x2p2msg2] { border-bottom: 0; }

/* --- l'ecran vide : il doit dire quoi faire ------------------------------- */

/* Un ecran vide qui se contente d'etre vide est un cul-de-sac. Celui-ci
   nomme le geste suivant et l'endroit ou il se trouve.

   La classe s'appelle .rien et non .vide : .apercu.vide existe deja plus haut,
   et deux classes de meme specificite sur le meme element font gagner la
   derniere declaree -- l'apercu d'une machine sans compte rendu se serait
   affiche dans un gros encadre orange. */
.rien[b-r2x2p2msg2] {
    padding: 1.2rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .04);
    border-left: 3px solid var(--accent, #F0A500);
}

/* --- la prestation sans objet --------------------------------------------

   Un bouton et une phrase, hors de toute rubrique : il n'y a rien a deplier
   puisqu'il n'y a rien a choisir. La bordure gauche le rattache visuellement
   aux deux listes du dessus sans en faire une troisieme. */
.sans-objet[b-r2x2p2msg2] {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    margin: .8rem 0;
    padding: .6rem .8rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .03);
    border-left: 3px solid rgba(255, 255, 255, .18);
}

.sans-objet span[b-r2x2p2msg2] { flex: 1 1 16rem; min-width: 0; }

/* --- le parc du tiers, a cocher ------------------------------------------ */

.parc[b-r2x2p2msg2] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 22rem;
    overflow-y: auto;
}

.parc li[b-r2x2p2msg2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
    font-size: .82rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.parc li:last-child[b-r2x2p2msg2] { border-bottom: 0; }

/* Le libelle ET sa case forment une seule cible : cocher une machine ne doit
   pas demander de viser un carre de douze pixels avec un doigt. */
.parc label[b-r2x2p2msg2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    margin: 0;
}

.parc label span[b-r2x2p2msg2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Deja dans l'intervention : visible mais eteinte. On ne la RETIRE pas de la
   liste -- une absence laisse chercher, une ligne grisee dit "je l'ai deja". */
.parc li.dedans[b-r2x2p2msg2] { opacity: .55; }
.parc li.dedans label[b-r2x2p2msg2] { cursor: default; }

/* --- les blocs replies du formulaire de machine -------------------------- */

.bloc > summary[b-r2x2p2msg2] {
    cursor: pointer;
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
    padding: .3rem 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.bloc > summary:hover[b-r2x2p2msg2] { color: #fff; }
.bloc[open] > summary[b-r2x2p2msg2] { margin-bottom: .5rem; }
/* /Components/Pages/Visites.razor.rz.scp.css */
/* La CSS des composants Blazor est ISOLEE : les classes communes sont
   redeclarees ici, a l'identique, plutot qu'esperees.

   Restent globales et non redeclarees : .etat, .etat-ok, .etat-neutre,
   .etat-alerte, .montant, .texte-faible, .texte-alerte (app.css), et les
   classes Bootstrap. */

.bandeau[b-2nsqrk6jw7] {
    padding: .55rem .8rem;
    border-radius: .35rem;
    margin-bottom: .9rem;
    font-size: .87rem;
    background: rgba(240, 165, 0, .10);
    border-left: 3px solid var(--accent, #F0A500);
}

.bandeau.ok[b-2nsqrk6jw7] { background: rgba(152, 251, 152, .12); border-left-color: #98FB98; }
.bandeau.alerte[b-2nsqrk6jw7] { background: rgba(255, 138, 138, .13); border-left-color: #FF8A8A; }

/* --- la barre de filtres --------------------------------------------------- */

.filtres[b-2nsqrk6jw7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.2rem;
    padding: .6rem .8rem;
    margin-bottom: .9rem;
    border-radius: .4rem;
    background: rgba(255, 255, 255, .04);
}

.filtres label.case[b-2nsqrk6jw7] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
}

/* --- le tableau ------------------------------------------------------------ */

/* La ligne entiere ouvre l'intervention. Le curseur le dit, sinon on cherche
   un lien qui n'existe pas. */
.cliquable[b-2nsqrk6jw7] { cursor: pointer; }
.cliquable:hover[b-2nsqrk6jw7] { background: rgba(255, 255, 255, .05); }

/* Le nombre de machines garde la meme largeur d'une ligne a l'autre : c'est la
   colonne qu'on parcourt de haut en bas pour reperer les interventions
   multiples, et un chiffre qui se decale ne se parcourt pas. */
.nb[b-2nsqrk6jw7] {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0 .3rem;
    margin-right: .35rem;
    border-radius: .25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .85);
}

/* --- les pastilles d'etat --------------------------------------------------- */

/* Elles se TOUCHAIENT. Deux etiquettes collees se lisent comme une seule, et
   "non terminee preventif" ne veut rien dire. La gouttiere est le minimum
   syndical ; le flex evite en prime qu'une troisieme pastille deborde la
   cellule. */
.pastilles[b-2nsqrk6jw7] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
}

/* --- les colonnes ---------------------------------------------------------- */

/* Deux noms de machine avec leurs numeros de serie font quatre-vingt-dix
   caracteres : la colonne s'etirait et poussait l'etat et le montant hors de
   l'ecran. On coupe, et le libelle complet reste au survol.

   La largeur est posee sur le SPAN, pas sur la cellule : un max-width sur un
   <td> ne fait rien du tout tant que la table est en table-layout: auto, et
   elle l'est. */
.machines[b-2nsqrk6jw7] {
    display: inline-block;
    max-width: 21rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Les kilometres se collaient aux heures : "3,5 h278 km" se lit comme un seul
   nombre. */
.km[b-2nsqrk6jw7] { margin-left: .45rem; }

/* Les cellules respirent, et les entetes aussi -- "MONTANT" et "BON" se
   touchaient dans la ligne de titres. */
.table > :not(caption) > * > *[b-2nsqrk6jw7] { padding-left: .55rem; padding-right: .55rem; }

/* --- le formulaire de la fenetre ------------------------------------------- */

.formulaire[b-2nsqrk6jw7] { display: flex; flex-direction: column; gap: .8rem; }

.formulaire > label[b-2nsqrk6jw7],
.formulaire .ligne label[b-2nsqrk6jw7] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.formulaire .ligne[b-2nsqrk6jw7] { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }

/* --- la croix de suppression ----------------------------------------------
   Discrete au repos, franche au survol. Elle n'apparait que sur les lignes
   qu'on a encore le droit d'effacer, et elle vit dans une ligne entierement
   cliquable : sa cible doit etre assez grande pour qu'on ne rate pas, et son
   contraste assez faible pour qu'on ne la vise pas par erreur. */
.croix[b-2nsqrk6jw7] {
    background: none;
    border: 0;
    padding: 0 .35rem;
    line-height: 1;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, .28);
    cursor: pointer;
    border-radius: 3px;
}

.croix:hover[b-2nsqrk6jw7] { color: #FF8A8A; background: rgba(255, 138, 138, .12); }
.croix:disabled[b-2nsqrk6jw7] { opacity: .4; cursor: default; }

.croix:focus-visible[b-2nsqrk6jw7] {
    outline: 2px solid var(--datis-orange, #FD7E00);
    outline-offset: 1px;
}
/* /Components/Pastille.razor.rz.scp.css */
/* Feuille isolee : elle ne s'applique qu'a ce composant, et elle est
   automatiquement incluse dans Gmao.Web.styles.css a la compilation.
   Aucun lien a ajouter dans App.razor. */

.pastille[b-lsy9xuvpgm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.05rem;
    height: 1.45rem;
    padding: 0 .35rem;
    border-radius: .8rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    /* Un lisere sombre : sur un fond clair comme sur un fond fonce,
       la pastille garde un bord net sans dependre du contexte. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.pastille.grande[b-lsy9xuvpgm] {
    min-width: 2.6rem;
    height: 1.9rem;
    font-size: .88rem;
    border-radius: 1rem;
}
/* /Components/Repartition.razor.rz.scp.css */
.repartition[b-q3le5ck1lt] { margin-bottom: 1.4rem; }

.repartition .entete[b-q3le5ck1lt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding-bottom: .3rem;
    margin-bottom: .5rem;
}

.repartition .titre[b-q3le5ck1lt] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .6);
}

.repartition .total[b-q3le5ck1lt] {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .45);
}

.repartition ul[b-q3le5ck1lt] { list-style: none; margin: 0; padding: 0; }

.repartition li[b-q3le5ck1lt] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .22rem 0;
    font-size: .82rem;
}

/* Le libelle a une largeur FIXE : sans elle, les barres ne partent pas toutes
   du meme bord et on ne compare plus des longueurs mais des positions. */
.repartition .nom[b-q3le5ck1lt] {
    flex: 0 0 12rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, .85);
}

.repartition .piste[b-q3le5ck1lt] {
    flex: 1 1 auto;
    min-width: 3rem;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

/* Une SEULE teinte : c'est une grandeur, pas une identite. Donner une couleur
   par region ferait croire que le bleu et le vert veulent dire quelque chose.
   Le bleu est celui deja valide pour ce projet sur fond sombre. */
.repartition .barre[b-q3le5ck1lt] {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #3987E5;
    min-width: 2px;
}

/* Ce qu'on ignore n'est pas une categorie : la barre est grise et le libelle
   en retrait. Une part "Non renseigne" peinte comme les autres se lirait comme
   une region qui s'appellerait comme ca. */
.repartition li.inconnue .nom[b-q3le5ck1lt] { color: rgba(255, 255, 255, .45); font-style: italic; }
.repartition li.inconnue .barre[b-q3le5ck1lt] { background: rgba(255, 255, 255, .28); }

.repartition .valeur[b-q3le5ck1lt] {
    flex: 0 0 6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.repartition .pct[b-q3le5ck1lt] {
    flex: 0 0 4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .55);
}

.repartition .vide[b-q3le5ck1lt] { font-size: .82rem; color: rgba(255, 255, 255, .45); margin: 0; }
/* /Components/Trombone.razor.rz.scp.css */
.trombone[b-z3uyr156p5] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: .7rem;
    line-height: 1;
    color: rgba(255, 255, 255, .55);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trombone svg[b-z3uyr156p5] {
    width: .82rem;
    height: .82rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}