/* /Components/AddressFields.razor.rz.scp.css */
/*
 * Les champs d'une adresse (CTC-048).
 *
 * Le bloc qui écoute le clavier n'a pas de boîte : le champ qu'il contient se
 * range directement dans la grille de l'écran, comme s'il était seul.
 */
.adresse-champ[b-siz7x2ztvr] {
    display: contents;
}

/*
 * La liste s'ouvre sous la saisie, par-dessus ce qui suit. Field l'accroche
 * sous le champ ; kofreo.placeList la repose ensuite par rapport à la fenêtre
 * du navigateur (position fixe), parce qu'une carte ou une fenêtre modale
 * rognerait ce qui dépasse d'elle. Le motif d'identité des listes (charte v2
 * §2.9), serré ; une hauteur bornée, parce qu'un code postal peut servir
 * quarante-six communes.
 */
.adresse-suggestions[b-siz7x2ztvr] {
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-encart);
    background-color: var(--surface);
    box-shadow: var(--ombre-flottante);
    overflow: hidden;
}

.adresse-suggestions-liste[b-siz7x2ztvr] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 232px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    overflow-y: auto;
}

.adresse-suggestion[b-siz7x2ztvr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    color: var(--texte-courant);
    font-size: var(--taille);
    cursor: pointer;
}

.adresse-suggestion:hover[b-siz7x2ztvr],
.adresse-suggestion-courante[b-siz7x2ztvr] {
    background-color: var(--accent-doux);
}

.adresse-suggestion-texte[b-siz7x2ztvr] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.adresse-suggestion-detail[b-siz7x2ztvr] {
    flex: 0 0 auto;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    white-space: nowrap;
}

/* La source des données, que leurs licences demandent de citer. */
.adresse-suggestions-source[b-siz7x2ztvr] {
    margin: 0;
    padding: 6px 12px;
    border-top: 1px solid var(--filet);
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}
/* /Components/Avatar.razor.rz.scp.css */
/* Avatar — charte v2 §2.15. */

.avatar[b-fzm5g99o76] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--rayon-menu);
    font-size: var(--taille-marqueur);
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Les initiales sont en texte FONCÉ sur l'orange : le blanc n'y tenait pas le
   contraste (charte §7.1). */
.avatar-entreprise[b-fzm5g99o76] {
    background-color: var(--accent-logo);
    color: var(--texte);
}

.avatar-fournisseur[b-fzm5g99o76] {
    background-color: var(--fournisseur);
    color: var(--surface);
}

.avatar-personne[b-fzm5g99o76] {
    border-radius: var(--rayon-pastille);
    background-color: var(--filet);
    color: var(--texte-compteur);
}

.avatar-utilisateur[b-fzm5g99o76] {
    width: 26px;
    height: 26px;
    border-radius: var(--rayon-pastille);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
}

.avatar-grand[b-fzm5g99o76] {
    width: 58px;
    height: 58px;
    border-radius: var(--rayon-surface);
    font-size: var(--taille-titre-section);
}

.avatar-personne.avatar-grand[b-fzm5g99o76] {
    border-radius: var(--rayon-pastille);
}

/* La teinte choisie par la société pour le couple rôle × type d'un contact
   (CTC-045). Après les sortes : à spécificité égale, elle l'emporte sur leur
   couleur, et la sorte garde la FORME — carré ou cercle. */

.avatar-teinte-orange[b-fzm5g99o76] {
    background-color: var(--teinte-orange-fond);
    color: var(--teinte-orange-texte);
}

.avatar-teinte-indigo[b-fzm5g99o76] {
    background-color: var(--teinte-indigo-fond);
    color: var(--teinte-indigo-texte);
}

.avatar-teinte-bleu[b-fzm5g99o76] {
    background-color: var(--teinte-bleu-fond);
    color: var(--teinte-bleu-texte);
}

.avatar-teinte-sarcelle[b-fzm5g99o76] {
    background-color: var(--teinte-sarcelle-fond);
    color: var(--teinte-sarcelle-texte);
}

.avatar-teinte-vert[b-fzm5g99o76] {
    background-color: var(--teinte-vert-fond);
    color: var(--teinte-vert-texte);
}

.avatar-teinte-ambre[b-fzm5g99o76] {
    background-color: var(--teinte-ambre-fond);
    color: var(--teinte-ambre-texte);
}

.avatar-teinte-rose[b-fzm5g99o76] {
    background-color: var(--teinte-rose-fond);
    color: var(--teinte-rose-texte);
}

.avatar-teinte-violet[b-fzm5g99o76] {
    background-color: var(--teinte-violet-fond);
    color: var(--teinte-violet-texte);
}

.avatar-teinte-ardoise[b-fzm5g99o76] {
    background-color: var(--teinte-ardoise-fond);
    color: var(--teinte-ardoise-texte);
}

.avatar-teinte-gris[b-fzm5g99o76] {
    background-color: var(--teinte-gris-fond);
    color: var(--teinte-gris-texte);
}

/* La photo d'un contact (CTC-046) : elle remplit la forme sans la déformer,
   et en prend l'arrondi — carré pour une entreprise, cercle pour une personne. */
.avatar[b-fzm5g99o76] {
    overflow: hidden;
}

.avatar-image[b-fzm5g99o76] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
/* /Components/Badge.razor.rz.scp.css */
.pastille[b-d4hdf3yhw6] {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--hauteur-pastille);
    padding: 0 10px;
    border-radius: var(--rayon-pastille);
    font-size: var(--taille-pastille);
    font-weight: 700;
    white-space: nowrap;
}

.pastille-accent[b-d4hdf3yhw6] {
    background-color: var(--pastille-accent-fond);
    color: var(--pastille-accent-texte);
}

.pastille-grise[b-d4hdf3yhw6] {
    background-color: var(--pastille-gris-fond);
    color: var(--pastille-gris-texte);
}

.pastille-verte[b-d4hdf3yhw6] {
    background-color: var(--pastille-vert-fond);
    color: var(--pastille-vert-texte);
}

.pastille-ambre[b-d4hdf3yhw6] {
    background-color: var(--pastille-ambre-fond);
    color: var(--pastille-ambre-texte);
}

.pastille-rouge[b-d4hdf3yhw6] {
    background-color: var(--pastille-rouge-fond);
    color: var(--pastille-rouge-texte);
}

.pastille-fournisseur[b-d4hdf3yhw6] {
    background-color: var(--fournisseur-doux);
    color: var(--fournisseur-texte);
}

/*
 * Le point d'un cycle de vie (charte v2 §2.4) : la « pastille pleine » de
 * l'état. L'orange n'en a pas dans la charte ; il prend la couleur du texte.
 */
.pastille-point[b-d4hdf3yhw6] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.pastille-accent .pastille-point[b-d4hdf3yhw6] {
    background-color: var(--accent);
}

.pastille-grise .pastille-point[b-d4hdf3yhw6] {
    background-color: var(--neutre);
}

.pastille-verte .pastille-point[b-d4hdf3yhw6] {
    background-color: var(--vert);
}

.pastille-rouge .pastille-point[b-d4hdf3yhw6] {
    background-color: var(--danger);
}

/* Marqueur d'anomalie (charte v2 §2.4) : rectangulaire, plus bas, plus serré. */
.pastille-marqueur[b-d4hdf3yhw6] {
    height: var(--hauteur-marqueur);
    padding: 0 7px;
    border-radius: var(--rayon-etiquette);
    font-size: var(--taille-marqueur);
}
/* /Components/Banner.razor.rz.scp.css */
/* Bandeau d'information — charte v2 §2.10. */

.bandeau[b-zsl9zhs9w4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-encart);
    font-size: var(--taille-secondaire);
}

.bandeau-icone[b-zsl9zhs9w4] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--rayon-petit);
}

.bandeau-texte[b-zsl9zhs9w4] {
    flex: 1 1 auto;
    min-width: 0;
}

.bandeau-texte[b-zsl9zhs9w4]  strong {
    font-weight: 800;
}

.bandeau-action[b-zsl9zhs9w4] {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.bandeau-fermer[b-zsl9zhs9w4] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--rayon-petit);
    background-color: transparent;
    color: inherit;
    cursor: pointer;
}

.bandeau-fermer:hover[b-zsl9zhs9w4] {
    background-color: var(--surface);
}

.bandeau-succes[b-zsl9zhs9w4] {
    border-color: var(--succes-bordure);
    background-color: var(--succes-bandeau);
    color: var(--succes-bandeau-texte);
}

.bandeau-succes .bandeau-icone[b-zsl9zhs9w4] {
    background-color: var(--pastille-vert-fond);
    color: var(--pastille-vert-texte);
}

.bandeau-succes .bandeau-texte[b-zsl9zhs9w4]  strong {
    color: var(--succes-bandeau-fort);
}

/*
 * Le bouton plein d'un bandeau de réussite est vert et non à l'accent (charte
 * v2 §1.5, « bouton plein de bandeau ») : il continue la phrase du bandeau,
 * « Transformer en facture » après « … n'a pas encore été facturé ».
 */
.bandeau-succes .bandeau-action[b-zsl9zhs9w4]  .bouton-principal {
    background-color: var(--pastille-vert-texte);
    border-color: var(--pastille-vert-texte);
}

.bandeau-succes .bandeau-action[b-zsl9zhs9w4]  .bouton-principal:hover:not(:disabled),
.bandeau-succes .bandeau-action[b-zsl9zhs9w4]  .bouton-principal:active:not(:disabled) {
    background-color: var(--succes-bandeau-fort);
    border-color: var(--succes-bandeau-fort);
}

.bandeau-attention[b-zsl9zhs9w4] {
    border-color: var(--attention-bordure);
    background-color: var(--attention-bandeau);
    color: var(--attention-bandeau-texte);
}

.bandeau-attention .bandeau-icone[b-zsl9zhs9w4] {
    background-color: var(--attention-icone-fond);
    color: var(--ambre);
}

.bandeau-attention .bandeau-texte[b-zsl9zhs9w4]  strong {
    color: var(--attention-bandeau-fort);
}

/*
 * Le bouton plein d'un bandeau d'attention est à l'ambre (charte v2 §1.5,
 * « fond du bouton plein du bandeau ») : « Comparer », « Aligner sur Rexel »
 * continuent la phrase du bandeau, et un second bouton à l'accent disputerait
 * sa place à l'action principale de l'écran (§2.1).
 */
.bandeau-attention .bandeau-action[b-zsl9zhs9w4]  .bouton-principal {
    background-color: var(--ambre);
    border-color: var(--ambre);
}

.bandeau-attention .bandeau-action[b-zsl9zhs9w4]  .bouton-principal:hover:not(:disabled),
.bandeau-attention .bandeau-action[b-zsl9zhs9w4]  .bouton-principal:active:not(:disabled) {
    background-color: var(--attention-bandeau-fort);
    border-color: var(--attention-bandeau-fort);
}

.bandeau-danger[b-zsl9zhs9w4] {
    border-color: var(--danger-bordure);
    background-color: var(--danger-bandeau);
    color: var(--danger-bandeau-texte);
}

.bandeau-danger .bandeau-icone[b-zsl9zhs9w4] {
    background-color: var(--danger-icone-fond);
    color: var(--rouge);
}

.bandeau-danger .bandeau-texte[b-zsl9zhs9w4]  strong {
    color: var(--danger-bandeau-fort);
}

.bandeau-neutre[b-zsl9zhs9w4] {
    background-color: var(--surface);
    color: var(--texte-courant);
}

.bandeau-neutre .bandeau-icone[b-zsl9zhs9w4] {
    background-color: var(--pastille-gris-fond);
    color: var(--texte-libelle);
}
/* /Components/BarcodeImage.razor.rz.scp.css */
/* Le code-barres d'un article (CAT-020) : des barres pleines, ses chiffres dessous. */

.code-barres[b-jtqxn8x8bj] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    width: 100%;
}

.code-barres svg[b-jtqxn8x8bj] {
    display: block;
    width: 100%;
    height: 48px;
    background: var(--surface);
}

.code-barres path[b-jtqxn8x8bj] {
    fill: var(--texte);
}

/* Les chiffres à largeur égale, comme sur un emballage : ils se recopient à la
   main quand le code ne passe pas. */
.code-barres figcaption[b-jtqxn8x8bj] {
    color: var(--texte);
    font-size: var(--taille-secondaire);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    text-align: center;
}
/* /Components/BlockingFlag.razor.rz.scp.css */
/* Le drapeau d'une tâche bloquante (PRJ-019, P11) : en encre sur fond clair,
   cerclé d'un filet — ni une étiquette pleine, ni une pastille d'état, et
   jamais du rouge. */
.drapeau-bloquante[b-w9ea2fdqrv] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    height: var(--hauteur-pastille);
    padding: 0 8px;
    border-radius: var(--rayon-pastille);
    background-color: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--texte-courant);
    color: var(--texte);
    font-size: var(--taille-pastille);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
/* /Components/BulkActionBar.razor.rz.scp.css */
/* Barre d'actions groupées — charte v2 §2.12. */

.barre-selection[b-xh207c546h] {
    /*
     * Au-dessus du pied de liste, qui colle lui aussi au bas de la fenêtre
     * (UI-088) : sans ce décalage, la barre le chevauchait de neuf pixels.
     * Les deux valeurs vont ensemble, mesurées le 24/09/2026 — « bottom » la
     * tient à quinze pixels du pied pendant le défilement, la marge basse à
     * treize en fin de liste, où le collage la remonte d'autant.
     */
    position: sticky;
    bottom: 44px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin: 0 auto 36px;
    padding: 10px 12px 10px 18px;
    border-radius: var(--rayon-pastille);
    background-color: var(--barre-selection);
    color: var(--surface);
    box-shadow: var(--ombre-barre-selection);
    font-size: var(--taille-secondaire);
}

.barre-selection-compte[b-xh207c546h] {
    font-weight: 700;
    white-space: nowrap;
}

.barre-selection-filet[b-xh207c546h] {
    width: 1px;
    height: 20px;
    background-color: var(--barre-selection-filet);
}

.barre-selection-actions[b-xh207c546h] {
    display: flex;
    gap: 8px;
}

/* Les actions de la barre sont des boutons sombres de 32 px, écrits par la
   page : la barre leur donne leur dessin, pour qu'aucun écran ne l'invente. */
.barre-selection-actions[b-xh207c546h]  button {
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: var(--rayon-pastille);
    background-color: var(--barre-selection-bouton);
    color: var(--surface);
    font-family: var(--police);
    font-size: var(--taille-libelle);
    font-weight: 700;
    cursor: pointer;
}

.barre-selection-actions[b-xh207c546h]  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.barre-selection-actions[b-xh207c546h]  .barre-selection-danger {
    color: var(--danger-sur-sombre);
}

.barre-selection-fermer[b-xh207c546h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--rayon-pastille);
    background-color: transparent;
    color: var(--surface);
    cursor: pointer;
}

.barre-selection-fermer:hover[b-xh207c546h] {
    background-color: var(--barre-selection-bouton);
}
/* /Components/Button.razor.rz.scp.css */
/* Charte §2 et §5. Aucune valeur en clair : tout vient des jetons. */

.bouton[b-ijowlgd0yn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: var(--hauteur-bouton);
    padding: 0 14px;
    border: 1px solid var(--bouton-bordure);
    border-radius: var(--rayon-champ);
    background-color: var(--bouton);
    color: var(--texte-bouton);
    font-family: var(--police);
    font-size: var(--taille);
    font-weight: 600;
    /* Un bouton qui mène ailleurs est un lien (Href) : il ne se souligne pas pour autant. */
    text-decoration: none;
    cursor: pointer;
    /* Le calme au repos, la réaction au survol. */
    transition: background-color 90ms ease, border-color 90ms ease, color 90ms ease;
}

.bouton:hover:not(:disabled)[b-ijowlgd0yn] {
    background-color: var(--bouton-survol);
    border-color: var(--bouton-bordure-survol);
    color: var(--accent);
}

.bouton:active:not(:disabled)[b-ijowlgd0yn] {
    background-color: var(--bouton-enfonce);
    border-color: var(--bouton-bordure-survol);
    color: var(--accent);
}

.bouton:disabled[b-ijowlgd0yn] {
    /* Charte v2 §2.1 : un bouton inactif garde son dessin, à moitié effacé.
       Il reste reconnaissable — on sait ce qui manque pour s'en servir. */
    opacity: 0.5;
    cursor: not-allowed;
}

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

/* L'action que l'écran attend. Une seule par écran. */
.bouton-principal[b-ijowlgd0yn] {
    background-color: var(--accent);
    border-color: var(--accent);
    padding: 0 18px;
    color: var(--surface);
    font-weight: 700;
}

.bouton-principal:hover:not(:disabled)[b-ijowlgd0yn] {
    background-color: var(--accent-survol);
    border-color: var(--accent-survol);
    color: var(--surface);
}

.bouton-principal:active:not(:disabled)[b-ijowlgd0yn] {
    background-color: var(--accent-enfonce);
    border-color: var(--accent-enfonce);
    color: var(--surface);
}

/*
 * Destructif : bordure et texte rouges, jamais de rouge plein. Dix boutons
 * rouges pleins dans une liste diraient tous la même chose et ne
 * préviendraient plus de rien.
 */
.bouton-destructif[b-ijowlgd0yn] {
    border-color: var(--bouton-bordure);
    color: var(--rouge);
}

.bouton-destructif:hover:not(:disabled)[b-ijowlgd0yn] {
    background-color: var(--pastille-rouge-fond);
    border-color: var(--rouge);
    color: var(--rouge);
}

.bouton-destructif:active:not(:disabled)[b-ijowlgd0yn] {
    background-color: var(--pastille-rouge-fond);
    border-color: var(--rouge);
    color: var(--pastille-rouge-texte);
}

/*
 * Tout ce qui n'est pas l'action principale d'un écran (UI-051). Le mot n'y
 * apportait que sa largeur : il est dans l'infobulle, qui paraît sans délai au
 * survol comme au focus clavier, et dans « aria-label » pour qui ne survole
 * rien.
 */
.bouton-icone[b-ijowlgd0yn] {
    /* Carré, à la hauteur des boutons voisins (charte v2 §2.1). */
    width: var(--hauteur-bouton);
    min-width: var(--hauteur-bouton);
    padding: 0;
}

.bouton-icone[b-ijowlgd0yn]  svg {
    width: 16px;
    height: 16px;
}
/* /Components/Card.razor.rz.scp.css */
.carte[b-9ibvy5jdxz] {
    background-color: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    /*
     * La découpe se pose sur le cadre, pas sur le contenu : un corps qui
     * déborde mangerait les coins arrondis.
     */
    overflow: hidden;
}

.carte-entete[b-9ibvy5jdxz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-blocs);
    padding: var(--marge-carte-haut) var(--marge-carte) 0;
}

.carte-titre[b-9ibvy5jdxz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--taille-titre-section);
    font-weight: 800;
    color: var(--texte);
}

/* Le pictogramme du titre : atténué, parce qu'il repère et ne crie pas. Le
   mot reste ce qu'on lit ; le dessin est ce qu'on voit en faisant défiler. */
.carte-icone[b-9ibvy5jdxz] {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--accent);
}

.carte-actions[b-9ibvy5jdxz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
 * Le corps rythme ses blocs lui-même. Une carte ne contenait longtemps qu'un
 * seul élément, et l'espacement ne s'est pas vu manquer ; dès qu'une phrase
 * d'introduction précède un formulaire, les deux se collent et le libellé du
 * premier champ semble appartenir à la phrase.
 */
.carte-corps[b-9ibvy5jdxz] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
    padding: var(--marge-carte-haut) var(--marge-carte) var(--marge-carte);
}
/* /Components/CataloguePicker.razor.rz.scp.css */
/*
 * Ajouter depuis le catalogue (DEV-007) — la recherche commune au devis et à
 * la facture : un champ, huit résultats au motif d'identité des listes.
 */

.catalogue-recherche[b-ad0rrk8gzy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.catalogue-recherche-champ[b-ad0rrk8gzy] {
    box-sizing: border-box;
    width: 100%;
    height: var(--hauteur-champ);
    padding: 0 12px;
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-champ);
    background-color: var(--surface);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--taille);
}

.catalogue-recherche-champ:focus[b-ad0rrk8gzy] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.catalogue-rien[b-ad0rrk8gzy] {
    margin: 0;
}

/* Les résultats : le motif d'identité des listes (charte v2 §2.9), en plus serré. */
.catalogue-resultats[b-ad0rrk8gzy] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--filet);
    border-radius: var(--rayon-encart);
    list-style: none;
    overflow: hidden;
}

.catalogue-resultats li + li[b-ad0rrk8gzy] {
    border-top: 1px solid var(--filet);
}

.catalogue-resultat[b-ad0rrk8gzy] {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background-color: var(--surface);
    color: var(--texte-courant);
    font-family: var(--police);
    font-size: var(--taille);
    text-align: left;
    cursor: pointer;
}

.catalogue-resultat:hover[b-ad0rrk8gzy],
.catalogue-resultat-courant[b-ad0rrk8gzy] {
    background-color: var(--accent-doux);
}

.catalogue-resultat:disabled[b-ad0rrk8gzy] {
    cursor: progress;
}

.catalogue-resultat-icone[b-ad0rrk8gzy] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--rayon-menu);
    background-color: var(--compteur-fond);
    color: var(--texte-compteur);
}

.catalogue-resultat-texte[b-ad0rrk8gzy] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.catalogue-resultat-nom[b-ad0rrk8gzy] {
    color: var(--texte);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.catalogue-resultat-detail[b-ad0rrk8gzy] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

.catalogue-resultat-prix[b-ad0rrk8gzy] {
    flex: 0 0 auto;
    color: var(--texte);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* /Components/CommandBar.razor.rz.scp.css */
/*
 * La barre reste visible pendant qu'on fait défiler des centaines de lignes :
 * c'est sa raison d'être (charte §5).
 */
.barre[b-wpmowqaerl] {
    position: sticky;
    top: 0;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-blocs);
    flex-wrap: wrap;

    padding: 10px var(--marge-carte);

    /*
     * Pas de marge basse ici : depuis le 17/09/2026 c'est la zone de travail
     * qui espace ses blocs (MainLayout, gap de 16 px). Les deux s'ajoutaient
     * et creusaient 32 px entre la barre et la liste qu'elle commande, alors
     * que la charte en demande 16 partout.
     */

    background-color: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
}

.barre-gauche[b-wpmowqaerl],
.barre-droite[b-wpmowqaerl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Les filtres prennent la largeur : un décompte posé en dernier peut ainsi
   se ranger à l'extrémité droite (charte v2 §2.8, écran des tâches). */
.barre-gauche[b-wpmowqaerl],
.barre-filtres[b-wpmowqaerl] {
    flex: 1 1 auto;
    min-width: 0;
}

.barre-filtres[b-wpmowqaerl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.decompte[b-wpmowqaerl] {
    font-size: var(--taille-secondaire);
    color: var(--texte-attenue);
    white-space: nowrap;
}
/* /Components/DataTable.razor.rz.scp.css */
/* Tableau — charte §5. C'est là que le travail se fait. */

.tableau-cadre[b-or2u97v6te] {
    background-color: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);

    /* « clip » et non « hidden » (UI-088) : les deux arrondissent les coins,
       mais « hidden » fait du cadre un conteneur qui défile, et le pied collé
       en bas de la fenêtre se collerait alors à ce cadre immobile — c'est-à-
       dire nulle part. */
    overflow: clip;

    /* Le cadre est aussi le bloc conteneur de ce que le tableau porte en
       position absolue (UI-122). Sans lui, le « Sans objet » caché d'un devis
       accepté se plaçait par rapport à la page : il échappait au défilement du
       cadre sous 900 px et étirait le document — 430 px sur un écran de 375, où
       toute fenêtre modale débordait à droite. */
    position: relative;
}

.tableau[b-or2u97v6te] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--taille-ligne-tableau);
}

/*
 * En-tête : il doit se distinguer des lignes au premier coup d'œil, sinon on
 * lit la première ligne de données comme un titre.
 */
.entete[b-or2u97v6te] {
    position: relative;
    height: var(--hauteur-entete-tableau);
    padding: 0 12px;
    background-color: var(--surface-douce);
    border-bottom: 1px solid var(--filet);
    font-size: var(--taille-entete-colonne);
    font-weight: 700;
    color: var(--texte-libelle);
    user-select: none;
}

.entete-contenu[b-or2u97v6te] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
}

.entete-titre[b-or2u97v6te] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entete-triable .entete-contenu[b-or2u97v6te] {
    cursor: pointer;
}

.entete-triable:hover[b-or2u97v6te] {
    color: var(--texte);
}

.entete-tri[b-or2u97v6te] {
    color: var(--accent);
    flex: 0 0 auto;
}

/* Poignée de redimensionnement : discrète, et large de quelques pixels pour
   rester attrapable à la souris. */
.poignee[b-or2u97v6te] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.poignee:hover[b-or2u97v6te] {
    background-color: var(--bouton-bordure-survol);
}

/* Lignes : séparateurs horizontaux seulement. Les traits verticaux enferment
   la donnée pour rien. */
.tableau tbody tr[b-or2u97v6te] {
    height: var(--hauteur-ligne-tableau);
    border-bottom: 1px solid var(--filet);
}

.tableau tbody tr:last-child[b-or2u97v6te] {
    border-bottom: none;
}

.tableau tbody tr:hover[b-or2u97v6te] {
    /* Un repère, pas une alerte. */
    background-color: var(--surface-douce);
}

/* Sélection : le texte ne change pas de couleur. Un tableau de consultation ne
   se repeint pas en blanc. */
.ligne-selectionnee[b-or2u97v6te],
.ligne-selectionnee:hover[b-or2u97v6te] {
    background-color: var(--accent-doux);
}

.cellule[b-or2u97v6te] {
    padding: 0 12px;
    color: var(--texte-courant);
    overflow: hidden;
}

/* Troncature avec points de suspension, jamais coupée net. L'infobulle du
   « title » donne la valeur entière. */
.cellule-texte[b-or2u97v6te] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aligne-gauche[b-or2u97v6te] {
    text-align: left;
}

.aligne-droite[b-or2u97v6te] {
    text-align: right;
}

.aligne-centre[b-or2u97v6te] {
    text-align: center;
}

/*
 * Une colonne privée — prix d'achat, marge — prend le fond jaune pâle et un
 * cadenas devant son titre (charte v2 §5). Les deux, et pas la couleur seule :
 * un fond ne se lit pas de la même façon selon les yeux (§7).
 */
.colonne-privee[b-or2u97v6te] {
    background-color: var(--prive-colonne);
}

.entete.colonne-privee[b-or2u97v6te] {
    color: var(--prive-texte);
}

.tableau-vide[b-or2u97v6te] {
    padding: var(--marge-fenetre);
    text-align: center;
    color: var(--texte-attenue);
}

/* --- Sous 900 px : le tableau défile au lieu de se comprimer (UI-009) ---
 *
 * « table-layout: fixed » répartit la largeur disponible entre les colonnes.
 * Sur 375 px et six colonnes, cela donne soixante pixels chacune, où « Entreprise »
 * devient « Entrep » et « Fournisseur » « Fournis » : la page ne déborde pas, et
 * elle ne se lit pas non plus.
 *
 * Le tableau garde donc une largeur minimale et défile horizontalement dans son
 * propre cadre. Rien n'est perdu et la page, elle, ne bouge pas.
 *
 * Aucun « tabindex » n'est ajouté sur le cadre : chaque ligne contient un lien,
 * donc la tabulation traverse déjà le tableau et le navigateur fait défiler le
 * cadre pour montrer ce qui reçoit le focus. Un point d'arrêt de plus
 * n'apporterait rien et s'ajouterait aussi sur les grands écrans, où rien ne
 * défile.
 */
@container ecran (max-width: 900px) {
    .tableau-cadre[b-or2u97v6te] {
        overflow-x: auto;
    }

    .tableau[b-or2u97v6te] {
        min-width: 640px;
    }
}

/* --- Cases à cocher (charte v2 §2.9) --- */

.colonne-case[b-or2u97v6te] {
    width: 48px;
}

.entete-case[b-or2u97v6te],
.cellule-case[b-or2u97v6te] {
    width: 48px;
    padding: 0 0 0 20px;
}

.entete-case input[b-or2u97v6te],
.cellule-case input[b-or2u97v6te] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* --- Pied du tableau : décompte à gauche, pagination à droite --- */

/*
 * Collé au bas de la fenêtre tant que la liste défile (UI-088, Renald,
 * 24/09/2026 : « cette zone ne sera plus visible lorsqu'il y aura beaucoup de
 * contacts »). Il porte le décompte, la pagination et l'aide qui s'affiche au
 * survol : tout ce qu'on doit voir sans descendre cinquante lignes. Arrivé en
 * bas, il reprend sa place sous la dernière ligne.
 *
 * « bottom » négatif de la marge de la zone de travail : un collage se compte
 * depuis la boîte de CONTENU du conteneur qui défile, marge interne déduite.
 * À « 0 », il s'arrêterait à vingt pixels du bord, et les lignes défileraient
 * dans l'interstice.
 */
.tableau-pied[b-or2u97v6te] {
    position: sticky;
    bottom: calc(-1 * var(--marge-fenetre));
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--filet-fort);
    background-color: var(--surface-douce);
    font-size: var(--taille-secondaire);
    color: var(--texte-libelle);
}
/* /Components/DocumentLines.razor.rz.scp.css */
/*
 * Le tableau des lignes d'un document — devis ou facture (charte v2 §3.3) :
 * un vrai tableau à colonnes, une section qui le coupe avec son sous-total, un
 * texte qui s'y lit en entier, et la ligne en saisie (DEV-025).
 */

/*
 * Le cadre défile de côté quand le tableau est plus large que la carte — sur un
 * téléphone, toujours. Il est aussi le bloc conteneur de ce qu'il porte en
 * position absolue (UI-122) : sans « position: relative », le libellé caché des
 * colonnes d'ordre et d'actions (.lecteur-seul) se plaçait par rapport à la page
 * entière. Il échappait alors au défilement du cadre comme au « overflow:
 * hidden » de la coquille, et étirait le document jusqu'à sa colonne : 623 px
 * sur un écran de 430, où toute fenêtre modale se calait et débordait à droite.
 */
.document-tableau-cadre[b-q25fxgavqv] {
    position: relative;
    overflow-x: auto;
}

.document-tableau[b-q25fxgavqv] {
    width: 100%;
    border-collapse: collapse;
}

.document-tableau thead tr[b-q25fxgavqv] {
    border-top: 1px solid var(--filet);
    border-bottom: 1px solid var(--filet);
    background-color: var(--surface-douce);
}

.document-tableau th[b-q25fxgavqv] {
    height: 38px;
    padding: 0 12px;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.document-tableau td[b-q25fxgavqv] {
    padding: 12px;
    border-bottom: 1px solid var(--filet);
    color: var(--texte-courant);
    vertical-align: middle;
}

.document-tableau .col-nombre[b-q25fxgavqv] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.document-tableau .col-poignee[b-q25fxgavqv] {
    width: 28px;
    padding: 0 0 0 14px;
}

.document-tableau .col-actions[b-q25fxgavqv] {
    width: 40px;
    padding: 0 12px 0 4px;
}

.col-designation[b-q25fxgavqv] {
    min-width: 200px;
}

.col-montant[b-q25fxgavqv] {
    color: var(--texte);
    font-weight: 700;
}

/* Une colonne privée prend le fond jaune pâle (charte v2 §5). */
.col-privee[b-q25fxgavqv] {
    background-color: var(--prive-colonne);
}

.document-tableau th.col-privee[b-q25fxgavqv] {
    color: var(--prive-texte);
}

.doc-poignee[b-q25fxgavqv] {
    display: inline-flex;
    color: var(--icone-pale);
    cursor: grab;
}

.doc-ligne[draggable="true"]:hover .doc-poignee[b-q25fxgavqv] {
    color: var(--texte-libelle);
}

/*
 * Une ligne d'un brouillon se modifie d'un clic : la main le dit au survol,
 * et la ligne s'éclaire comme dans toute liste (charte v2 §2.9).
 */
.doc-ligne-modifiable td:not(.col-poignee):not(.col-actions)[b-q25fxgavqv] {
    cursor: pointer;
}

.doc-ligne-modifiable:hover td[b-q25fxgavqv] {
    background-color: var(--surface-douce);
}

.doc-ligne-modifiable:hover td.col-privee[b-q25fxgavqv] {
    background-color: var(--prive-fond);
}

/* Un libellé long passe à la ligne : c'est le contenu du document (charte v2 §6.4). */
.designation[b-q25fxgavqv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.designation-libelle[b-q25fxgavqv] {
    color: var(--texte);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.designation-description[b-q25fxgavqv] {
    color: var(--texte-courant);
    font-size: var(--taille-libelle);
    white-space: pre-wrap;
}

.designation-reference[b-q25fxgavqv] {
    color: var(--texte-attenue);
    font-size: var(--taille-pastille);
}

/*
 * La nature d'une ligne de facture (FAC-037) : après la référence, dans la
 * même petite ligne atténuée ; en saisie, le sélecteur sous la précision.
 */
.designation-nature[b-q25fxgavqv] {
    margin-left: 4px;
}

.ligne-edition-nature[b-q25fxgavqv] {
    margin-top: 8px;
}

.remise[b-q25fxgavqv] {
    display: inline-flex;
    align-items: center;
    height: var(--hauteur-marqueur);
    padding: 0 7px;
    border-radius: var(--rayon-etiquette);
    background-color: var(--pastille-ambre-fond);
    color: var(--pastille-ambre-texte);
    font-size: var(--taille-marqueur);
    font-weight: 700;
}

.valeur-absente[b-q25fxgavqv] {
    color: var(--texte-attenue);
}

.marge-ligne[b-q25fxgavqv] {
    display: block;
    color: var(--texte);
    font-weight: 600;
}

.marge-taux[b-q25fxgavqv] {
    display: block;
    color: var(--prive-texte);
    font-size: var(--taille-pastille);
}

/* Une section coupe le tableau avec son sous-total ; un texte s'y lit en entier. */
.doc-ligne-section td[b-q25fxgavqv] {
    background-color: var(--surface-douce);
}

.doc-section-titre[b-q25fxgavqv] {
    color: var(--texte);
    font-weight: 800;
}

.doc-section-total[b-q25fxgavqv] {
    color: var(--texte);
    font-weight: 700;
}

.doc-texte-libre[b-q25fxgavqv] {
    color: var(--texte-courant);
    font-style: italic;
    white-space: pre-wrap;
}

.document-vide[b-q25fxgavqv] {
    margin: 0;
    padding: 18px 22px;
    border-top: 1px solid var(--filet);
    color: var(--texte-attenue);
}

/* --- La ligne en saisie (DEV-025) --- */

/*
 * Posée sur l'accent doux, pour qu'on voie d'un coup d'œil quelle ligne on
 * modifie ; les champs gardent leur fond blanc, leur bordure et leur rayon
 * (charte v2 §2.3), à la hauteur compacte d'un tableau.
 */
.doc-ligne-edition td[b-q25fxgavqv] {
    padding: 8px 8px;
    background-color: var(--accent-doux);
    vertical-align: top;
}

.doc-ligne-edition td.col-privee[b-q25fxgavqv] {
    background-color: var(--prive-fond);
}

.champ-ligne[b-q25fxgavqv],
.champ-ligne-compose[b-q25fxgavqv] {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--hauteur-champ-compact);
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-champ);
    background-color: var(--surface);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--taille);
}

.champ-ligne[b-q25fxgavqv] {
    display: block;
    padding: 0 10px;
}

textarea.champ-ligne[b-q25fxgavqv] {
    padding: 8px 10px;
    resize: vertical;
}

.champ-ligne:focus[b-q25fxgavqv] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/*
 * Des champs aussi étroits que leurs nombres : la ligne en saisie doit tenir
 * dans la carte du document, sans faire défiler le tableau de côté.
 */
.champ-ligne-nombre[b-q25fxgavqv] {
    width: 88px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.champ-ligne-choix[b-q25fxgavqv] {
    width: 76px;
    padding: 0 6px;
    cursor: pointer;
}

/* Une ligne en saisie : la désignation cède de la place aux champs de nombres. */
.document-tableau-saisie .col-designation[b-q25fxgavqv] {
    min-width: 150px;
}

.champ-ligne-section[b-q25fxgavqv] {
    font-weight: 800;
}

.champ-ligne-texte[b-q25fxgavqv] {
    font-style: italic;
}

.champ-ligne-precision[b-q25fxgavqv] {
    margin-top: 2px;
    font-size: var(--taille-libelle);
}

/* La valeur et son unité dans un seul cadre, séparées d'un filet (charte v2 §2.3). */
.champ-ligne-compose[b-q25fxgavqv] {
    display: inline-flex;
    align-items: stretch;
    width: 108px;
    overflow: hidden;
}

.champ-ligne-compose-court[b-q25fxgavqv] {
    width: 76px;
}

.champ-ligne-valeur[b-q25fxgavqv],
.champ-ligne-unite[b-q25fxgavqv] {
    min-width: 0;
    border: none;
    background-color: transparent;
    color: inherit;
    font: inherit;
}

.champ-ligne-valeur[b-q25fxgavqv] {
    flex: 1 1 auto;
    width: 40px;
    padding: 0 6px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/*
 * Dans un champ composé, chaque partie garde son contour de focus, tracé à
 * l'intérieur du cadre commun : on voit laquelle des deux on tape.
 */
.champ-ligne-valeur:focus[b-q25fxgavqv],
.champ-ligne-unite:focus[b-q25fxgavqv] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.champ-ligne-unite[b-q25fxgavqv],
.champ-ligne-suffixe[b-q25fxgavqv] {
    flex: 0 0 auto;
    border-left: 1px solid var(--filet);
    background-color: var(--surface-unite);
    font-size: var(--taille-libelle);
    font-weight: 600;
}

.champ-ligne-unite[b-q25fxgavqv] {
    width: 40px;
    padding: 0 4px;
}

.champ-ligne-suffixe[b-q25fxgavqv] {
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    color: var(--texte-libelle);
}

.ligne-edition-libelle[b-q25fxgavqv] {
    display: block;
    margin-top: 8px;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 600;
}

/* Enregistrer au-dessus d'Annuler : la ligne est haute, la colonne reste étroite. */
.ligne-edition-commandes[b-q25fxgavqv] {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.document-tableau .col-actions-edition[b-q25fxgavqv] {
    width: auto;
    padding: 8px 12px 8px 4px;
    white-space: nowrap;
}

/* Le refus, sous la ligne qu'il concerne : jamais la couleur seule (charte v2 §2.3). */
.doc-ligne-erreur td[b-q25fxgavqv] {
    padding: 6px 12px 10px;
    background-color: var(--champ-erreur-fond);
}

.ligne-edition-erreur[b-q25fxgavqv] {
    margin: 0;
    color: var(--rouge);
    font-size: var(--taille-aide);
    font-weight: 600;
}

/* Lu par un lecteur d'écran, invisible à l'œil. */
.lecteur-seul[b-q25fxgavqv] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* /Components/DossierPicker.razor.rz.scp.css */
/*
 * Le dossier lié d'une tâche ou d'un échange (TRV-011, ECH-004, UI-096) : la
 * pastille du dossier choisi, ou la recherche qui s'ouvre à la place du bouton
 * pointillé. Un seul dessin pour les deux fiches, qui en avaient chacune un.
 */

/* Chacun garde sa largeur : le bouton pointillé et la pastille ne s'étirent
   pas sur la ligne qui les porte. */
.dossier-choix[b-ib8a6goa8x] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.dossier-lie[b-ib8a6goa8x] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    max-width: 100%;
    height: var(--hauteur-bouton-compact);
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: var(--rayon-pastille);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
    font-size: var(--taille-libelle);
    font-weight: 700;
}

/* Avec sa croix, la pastille rend un peu de marge à droite : la croix a sa
   propre cible de 24 px. */
.dossier-lie-detachable[b-ib8a6goa8x] {
    padding-right: 6px;
}

.dossier-lie-nom[b-ib8a6goa8x] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dossier-lie-retrait[b-ib8a6goa8x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--rayon-pastille);
    background: none;
    color: inherit;
    cursor: pointer;
}

.dossier-lie-retrait:hover[b-ib8a6goa8x] {
    background-color: var(--surface);
}

.dossier-champ[b-ib8a6goa8x] {
    min-width: 0;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}

.dossier-resultats[b-ib8a6goa8x] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-encart);
    background-color: var(--surface);
    box-shadow: var(--ombre-flottante);
    list-style: none;
}

.dossier-resultats button[b-ib8a6goa8x] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: var(--hauteur-bouton);
    padding: 0 10px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--rayon-petit);
    background: none;
    color: var(--texte);
    font: inherit;
    font-size: var(--taille-secondaire);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.dossier-resultats button:hover[b-ib8a6goa8x],
.dossier-resultats button:focus-visible[b-ib8a6goa8x] {
    background-color: var(--surface-douce);
}

.dossier-resultat-nom[b-ib8a6goa8x] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dossier-detail[b-ib8a6goa8x] {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    font-weight: 500;
}

.dossier-aucun[b-ib8a6goa8x] {
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* Le bouton garde son libellé sur une ligne. */
.dossier-choix .bouton-pointille[b-ib8a6goa8x] {
    max-width: 100%;
    white-space: nowrap;
}

/* Ce que le texte nomme (SOC-094) : proposé en pointillé, pris d'un clic. */
.dossier-suggestions[b-ib8a6goa8x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}

.dossier-suggestions-mot[b-ib8a6goa8x] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

.dossier-suggestion[b-ib8a6goa8x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: var(--hauteur-pastille);
    padding: 2px 10px;
    box-sizing: border-box;
    border: 1px dashed var(--accent);
    border-radius: var(--rayon-pastille);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
    font: inherit;
    font-size: var(--taille-aide);
    font-weight: 700;
    cursor: pointer;
}

.dossier-suggestion:hover[b-ib8a6goa8x] {
    background-color: var(--surface);
}
/* /Components/Field.razor.rz.scp.css */
.champ[b-ke0e9p9x1c] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-champs);
}

.champ-libelle[b-ke0e9p9x1c] {
    font-size: var(--taille-libelle);
    font-weight: 600;
    color: var(--texte-libelle);
}

.champ-requis[b-ke0e9p9x1c] {
    color: var(--danger);
    margin-left: 2px;
}

/* --- Tous les contrôles d'une ligne ont la MÊME hauteur (UI-079) ---
 *
 * Signalé par Renald le 22/09/2026, capture à l'appui : sur la fiche d'une
 * tâche, « Priorité » et « Pour le » sont côte à côte, et la liste déroulante
 * était plus courte que le champ de date.
 *
 * Les deux demandaient pourtant « --hauteur-champ », mais pas de la même
 * boîte : sans « box-sizing », une hauteur minimale s'applique au CONTENU, et
 * la marge intérieure de sept pixels du champ de saisie s'y ajoutait — pas
 * celle de la liste, qui n'en a pas verticalement. Deux fois la même valeur,
 * deux hauteurs à l'écran.
 *
 * La hauteur est donc FIXE et comptée bordure comprise : trente-deux pixels
 * pour tout ce qui tient sur une ligne, quel qu'en soit le contenu. La marge
 * verticale disparaît — le texte d'un contrôle d'une seule ligne se centre
 * tout seul dans sa boîte — et la marge horizontale de la charte reste.
 */
.champ-saisie[b-ke0e9p9x1c] {
    box-sizing: border-box;
    height: var(--hauteur-champ);
    padding: 0 12px;
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-champ);
    background-color: var(--surface);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--taille);
    transition: border-color 90ms ease;
}

.champ-saisie:hover:not(:disabled):not(:read-only)[b-ke0e9p9x1c] {
    border-color: var(--texte-attenue);
}

/* Le contour de focus n'est pas retiré : un simple changement de couleur
   de bordure sur 1 px se rate, surtout sur un formulaire de dix champs.
   Le contour global de app.css s'ajoute donc au teintage. */
.champ-saisie:focus[b-ke0e9p9x1c] {
    border-color: var(--accent);
}

.champ-saisie:disabled[b-ke0e9p9x1c],
.champ-saisie:read-only[b-ke0e9p9x1c] {
    background-color: var(--fond-travail);
    color: var(--texte-attenue);
}

.champ-saisie[b-ke0e9p9x1c]::placeholder {
    color: var(--texte-attenue);
}

/* --- La zone de texte (charte v2 §2.3) ---
 *
 * 80 px au moins, les marges et les coins d'un encart. Sa hauteur suit ses
 * lignes : elle n'est pas de la famille « une ligne, une hauteur » ci-dessus.
 * L'erreur, déclarée après, garde la main sur la bordure et le fond.
 */
.champ-zone[b-ke0e9p9x1c] {
    box-sizing: border-box;
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-encart);
    background-color: var(--surface);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--taille);
    line-height: 1.5;
    resize: vertical;
    transition: border-color 90ms ease;
}

.champ-zone:hover:not(:disabled):not(:read-only)[b-ke0e9p9x1c] {
    border-color: var(--texte-attenue);
}

.champ-zone:focus[b-ke0e9p9x1c] {
    border-color: var(--accent);
}

.champ-zone:disabled[b-ke0e9p9x1c],
.champ-zone:read-only[b-ke0e9p9x1c] {
    background-color: var(--fond-travail);
    color: var(--texte-attenue);
}

.champ-zone[b-ke0e9p9x1c]::placeholder {
    color: var(--texte-attenue);
}

.champ-saisie-erreur[b-ke0e9p9x1c] {
    /* Le fond rosé de la v2, mais pas sa bordure rose pâle : à 1,6:1 elle
       effacerait le bord même du champ (charte §2.3). Le rouge le garde. */
    border-color: var(--danger);
    background-color: var(--champ-erreur-fond);
}

.champ-saisie-erreur:focus[b-ke0e9p9x1c] {
    border-color: var(--danger);
}

/*
 * L'accroche d'une liste ouverte sous la saisie (CTC-048) : sans hauteur, et
 * remontée de l'écart des champs, si bien que l'aide ou l'erreur restent à
 * leur place quand la liste paraît. La liste elle-même est au dessin de qui
 * la fournit.
 */
.champ-ancre[b-ke0e9p9x1c] {
    position: relative;
    height: 0;
    margin-top: calc(-1 * var(--espace-champs));
}

.champ-aide[b-ke0e9p9x1c],
.champ-erreur[b-ke0e9p9x1c] {
    margin: 0;
    font-size: var(--taille-aide);
}

.champ-aide[b-ke0e9p9x1c] {
    color: var(--texte-attenue);
}

.champ-erreur[b-ke0e9p9x1c] {
    color: var(--rouge);
    font-weight: 600;
}
/* /Components/FilterChip.razor.rz.scp.css */
/* Un filtre actif — charte v2 §2.8.3 : accent, fond doux, une croix. */

.filtre-actif[b-hk7r4geoye] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: var(--hauteur-champ);
    padding: 0 12px;
    border: 1px solid var(--accent);
    border-radius: var(--rayon-champ);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
    font-family: var(--police);
    font-size: var(--taille-libelle);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.filtre-actif:hover[b-hk7r4geoye] {
    border-color: var(--accent-survol);
}

.filtre-actif:focus-visible[b-hk7r4geoye] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/IdentityCell.razor.rz.scp.css */
/*
 * La colonne d'identité d'une liste — charte v2 §2.9 : avatar 32 px, libellé
 * 14 px / 700 qui mène à la fiche, sous-titre --taille-aide en --texte-attenue.
 */

.identite[b-qogvioyjtj] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/*
 * Le carré d'une icône, là où une initiale ne dirait rien (un article) : la
 * taille d'un avatar, le fond et l'encre d'un compteur (maquette « Catalogue »).
 */
.identite-tuile[b-qogvioyjtj] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--rayon-menu);
    background: var(--compteur-fond);
    color: var(--texte-compteur);
}

.identite-texte[b-qogvioyjtj] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.identite-nom[b-qogvioyjtj] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--texte);
    font-weight: 700;
}

/* Une ligne, des points de suspension, et l'infobulle pour le reste (charte v2 §6.2). */
.identite-libelle[b-qogvioyjtj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* « Non numéroté » : en retrait, pour ne pas passer pour un numéro (LST-DEV-004). */
.identite-attenue[b-qogvioyjtj] {
    color: var(--texte-attenue);
    font-weight: 400;
    font-style: italic;
}

.identite-detail[b-qogvioyjtj] {
    overflow: hidden;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/ItemLabel.razor.rz.scp.css */
/* L'étiquette d'un article (CAT-020) : le QR code à gauche, le texte et les
   barres à droite. Ses proportions sont celles de l'étiquette imprimée,
   70 × 37 mm, pour que la fiche montre ce qui sortira.

   Le rapport vaut pour la boîte ENTIÈRE, marges et bord compris : compté sur
   son seul intérieur, il donnait 38,7 mm de haut pour 70 de large, et
   l'impression débordait sur une seconde étiquette. */

.etiquette[b-o384juwmrp] {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 34% 1fr;
    align-items: center;
    gap: 10px;
    aspect-ratio: 70 / 37;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    color: var(--texte);
    overflow: hidden;
}

.etiquette-qr[b-o384juwmrp] {
    min-width: 0;
}

.etiquette-texte[b-o384juwmrp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Deux lignes au plus : le libellé complet est dans l'infobulle et sur la fiche. */
.etiquette-nom[b-o384juwmrp] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: var(--taille-libelle);
    font-weight: 700;
    line-height: 1.25;
}

.etiquette-reference[b-o384juwmrp] {
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
    font-variant-numeric: tabular-nums;
}
/* /Components/ListFooter.razor.rz.scp.css */
/* Le pied d'une liste — charte v2 §2.9. */

.pied-liste[b-uvix5my2od] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pied-liste-gauche[b-uvix5my2od],
.pied-liste-droite[b-uvix5my2od] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.decompte[b-uvix5my2od] {
    color: var(--texte);
    font-weight: 700;
    white-space: nowrap;
}

.barre-etat-aide[b-uvix5my2od] {
    color: var(--texte-libelle);
}

.pied-liste-taille[b-uvix5my2od] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--texte-libelle);
    white-space: nowrap;
}

.pied-liste-taille select[b-uvix5my2od] {
    height: var(--hauteur-bouton-compact);
    padding: 0 6px 0 10px;
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-champ);
    background-color: var(--surface);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--taille-secondaire);
}
/* /Components/LogoCard.razor.rz.scp.css */
/* --- Le logo (SOC-029) ---
 *
 * L'aperçu se pose sur un damier clair : un logo transparent sur fond blanc ne
 * se distingue pas d'un logo à fond blanc, et la différence compte le jour où
 * il arrive sur un bandeau de couleur.
 */

.logo-apercu[b-svphuizodk] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    padding: 12px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    background-color: var(--surface);
    background-image:
        linear-gradient(45deg, var(--fond-travail) 25%, transparent 25%),
        linear-gradient(-45deg, var(--fond-travail) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--fond-travail) 75%),
        linear-gradient(-45deg, transparent 75%, var(--fond-travail) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

.logo-image[b-svphuizodk] {
    max-height: 70px;
    max-width: 100%;
}

/* Le cadre de recadrage. « touch-action: none » est ce qui rend le glissement
 * possible sur un écran tactile : sans lui le navigateur fait défiler la page
 * au lieu de transmettre le déplacement. */
.logo-cadre[b-svphuizodk] {
    position: relative;
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-champ);
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

.logo-source[b-svphuizodk] {
    display: block;
    max-width: 100%;
    max-height: 320px;
    pointer-events: none;
}

/* Le voile : ce qui est GARDÉ est clair, le reste s'assombrit. Un cadre en
 * pointillés seul laisse hésiter sur le sens de la sélection. */
.logo-voile[b-svphuizodk] {
    position: absolute;
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 9999px var(--voile);
    pointer-events: none;
}

/* « ::deep » : le <input> vient d'InputFile, un composant enfant, et
 * n'hérite donc pas de la portée de ce fichier. Sans lui la règle ne
 * s'applique à rien — voir ScopedStyleTests, qui l'a refusée. */
[b-svphuizodk] .fichier {
    font-size: var(--taille);
    color: var(--texte);
}

/* Ce qui suit le logo dans la même carte — la couleur d'accent — sous un filet. */
.logo-suite[b-svphuizodk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--filet);
}

/* --- L'outil compact (maquette « Paramètres », UI-118) --- */

.logo-compact[b-svphuizodk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.logo-vignette[b-svphuizodk] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 74px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-encart);
    background-color: var(--surface-douce);
    overflow: hidden;
}

.logo-vignette img[b-svphuizodk] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-vignette-vide[b-svphuizodk] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    font-weight: 600;
}

.logo-commandes[b-svphuizodk] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}

/*
 * « position: relative » : la rangée est le bloc conteneur du champ de fichier
 * masqué, qui est en position absolue (UI-128). Sans elle, le champ se plaçait
 * par rapport à la page entière, échappait au « overflow: hidden » de la
 * coquille et allongeait la page Paramètres de 281 px : toute l'application
 * pouvait glisser vers le haut. Même mécanisme qu'UI-122.
 */
.logo-boutons[b-svphuizodk] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/*
 * Le champ de fichier, masqué des yeux mais pas du clavier : c'est lui qui
 * prend le focus, et le libellé qui le suit en montre le contour.
 * « ::deep » parce qu'InputFile dessine son <input> lui-même.
 */
.logo-boutons[b-svphuizodk]  .fichier-masque {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.bouton-fichier[b-svphuizodk] {
    display: inline-flex;
    align-items: center;
    height: var(--hauteur-bouton-compact);
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--bouton-bordure);
    border-radius: var(--rayon-champ);
    background-color: var(--bouton);
    color: var(--texte-bouton);
    font-size: var(--taille-libelle);
    font-weight: 700;
    cursor: pointer;
}

.bouton-fichier:hover[b-svphuizodk] {
    border-color: var(--bouton-bordure-survol);
    background-color: var(--bouton-survol);
}

.logo-boutons[b-svphuizodk]  .fichier-masque:focus-visible + .bouton-fichier {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.bouton-retirer[b-svphuizodk] {
    height: var(--hauteur-bouton-compact);
    padding: 0 12px;
    border: none;
    border-radius: var(--rayon-champ);
    background: transparent;
    color: var(--rouge);
    font: inherit;
    font-size: var(--taille-libelle);
    font-weight: 700;
    cursor: pointer;
}

.bouton-retirer:hover[b-svphuizodk] {
    background-color: var(--pastille-rouge-fond);
}

.bouton-retirer:focus-visible[b-svphuizodk] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/MenuItem.razor.rz.scp.css */
/* Une entrée du menu « … » — charte v2 §2.2. */

.menu-entree[b-hpfmvmm370] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--hauteur-champ);
    padding: 0 10px;
    border: none;
    border-radius: var(--rayon-petit);
    background-color: transparent;
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--taille-secondaire);
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-entree[b-hpfmvmm370]  svg {
    flex: 0 0 auto;
    color: var(--texte-libelle);
}

.menu-entree:hover:not(:disabled)[b-hpfmvmm370],
.menu-entree:focus-visible[b-hpfmvmm370] {
    background-color: var(--surface-douce);
}

/* Rouge au survol seulement : au repos, rien ne crie (charte v2 §2.1). */
.menu-entree-danger:hover:not(:disabled)[b-hpfmvmm370],
.menu-entree-danger:hover:not(:disabled)[b-hpfmvmm370]  svg {
    color: var(--rouge);
}

.menu-entree:disabled[b-hpfmvmm370] {
    opacity: 0.5;
    cursor: not-allowed;
}

.menu-filet[b-hpfmvmm370] {
    height: 1px;
    margin: 5px 6px;
    background-color: var(--filet);
}
/* /Components/Modal.razor.rz.scp.css */
.voile[b-rx2d0teily] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--marge-fenetre);
    background-color: var(--voile);
}

.fenetre[b-rx2d0teily] {
    width: min(520px, 100%);
    max-height: calc(100vh / var(--zoom) - 2 * var(--marge-fenetre));
    display: flex;
    flex-direction: column;
    background-color: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-fenetre);
    box-shadow: var(--ombre-fenetre);
    overflow: hidden;
}

/* Assez large pour deux colonnes, et pas davantage. Au-delà, le fil de
   discussion s'étale et ses lignes deviennent trop longues à suivre.

   Passée de 960 à 1080 pixels le 21/09/2026 : à 960, la colonne des
   commentaires tombait sous 380 pixels une fois le formulaire servi, et Renald
   l'a trouvée trop petite — à juste titre. Les 120 pixels vont au fil, qui se
   partage désormais la fenêtre à égalité avec le formulaire. */
.fenetre-large[b-rx2d0teily] {
    width: min(1080px, 100%);
}

/* La seule exception au contour de focus, et elle est justifiée : la
   fenêtre reçoit le focus à l'ouverture pour que les lecteurs d'écran
   annoncent son contenu. Un contour autour de toute la boîte de dialogue
   ne renseigne personne — elle est visible, c'est tout ce qu'elle a à
   être — et ce qu'on tabule ensuite, à l'intérieur, garde le sien. */
.fenetre:focus[b-rx2d0teily] {
    outline: none;
}

/* L'en-tête porte le titre à gauche, ce qui situe la fenêtre juste après, et
   les commandes à l'angle haut-droit quand la fenêtre les y met. Le même
   partage que la bande haute d'un écran (charte §5), pour que la fenêtre se
   lise comme le reste.

   « align-items: center » et non « flex-start » : le choix qui accompagne le
   titre est un contrôle d'une ligne, et le poser en haut le décalerait d'un
   demi-caractère au-dessus du texte qu'il prolonge. */
.fenetre-entete[b-rx2d0teily] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px var(--espace-blocs);
    padding: var(--marge-fenetre) var(--marge-fenetre) 0 var(--marge-fenetre);
}

/* C'EST LE SUJET QUI SE REPLIE, JAMAIS LES COMMANDES. L'en-tête ne passe donc
   pas à la ligne lui-même : sur une fenêtre étroite, « Annuler » et
   « Enregistrer » tombaient sous le sélecteur au lieu de faire face au titre,
   ce qui est exactement ce que Renald a demandé d'éviter. Ici, c'est ce qui
   situe la fenêtre qui glisse sous le titre, et les deux boutons restent à
   l'angle. */
.fenetre-sujet[b-rx2d0teily] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.fenetre-titre[b-rx2d0teily] {
    margin: 0;
    font-size: var(--taille-sous-titre);
    font-weight: 600;
    color: var(--texte);
}

/* Ce qui situe la fenêtre se lit APRÈS le titre et pas à sa place : même
   hauteur, poids ordinaire. Un second gras en ferait un deuxième titre. */
.fenetre-situation[b-rx2d0teily] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    color: var(--texte-attenue);
}

/* Les deux boutons, où qu'ils soient. La classe est la même en haut et en bas
   pour que ce qui les cherche — un essai, une règle de style — n'ait pas à
   savoir lequel des deux emplacements la fenêtre a choisi.

   « margin-left: auto » les pousse à droite même quand l'en-tête revient à la
   ligne sous un titre long : sans lui, ils se recollent au titre. */
.fenetre-commandes[b-rx2d0teily] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.fenetre-corps[b-rx2d0teily] {
    padding: 12px var(--marge-fenetre);
    overflow-y: auto;
    color: var(--texte);
}

/* La bande d'état d'une fenêtre : ce qui s'est passé, ancré en bas.
 *
 * « Mets les informations utilisateur toujours en bas de la fenêtre, fixées
 * bien sûr en bas » (Renald, 21/09/2026). Elle est SŒUR de la barre d'état
 * d'un écran (UI-053) et suit la même règle : le haut à ce qu'on commande, le
 * bas à ce qui s'est passé.
 *
 * Hors du corps qui défile, et « flex-shrink: 0 » le garantit : c'est le corps
 * qui se comprime quand la fenêtre manque de hauteur, jamais le message. Posé
 * dans le formulaire, il partait sous l'horizon dès qu'on descendait d'un
 * bloc — et un refus d'enregistrement se lisait donc exactement quand on ne
 * regardait plus. */
.fenetre-etat[b-rx2d0teily] {
    flex-shrink: 0;
    padding: 10px var(--marge-fenetre);
    border-top: 1px solid var(--bordure);
}

/* Rien ne s'est passé : pas de bande. Vide, la zone laissait vingt pixels entre
   deux filets au-dessus des boutons (UI-122, vu sur la fenêtre d'émission). */
.fenetre-etat:empty[b-rx2d0teily] {
    display: none;
}

/*
 * Les commandes en bas dans une fenêtre — pas en haut comme dans une liste :
 * ici le contenu est court et se lit avant de décider.
 *
 * Une fenêtre QUI DÉFILE renverse l'argument, et celles-là passent en
 * « ActionsOnTop » : le bouton n'est alors plus au bout de la lecture, il est
 * sous l'horizon, et on fait défiler pour le retrouver après chaque saisie.
 * Le pied ne porte donc plus que son filet et ses marges ; la disposition des
 * deux boutons vient de « fenetre-commandes », qui vaut aux deux endroits.
 *
 * Sauf sa marge automatique : dans la colonne de la fenêtre, elle réduirait le
 * pied à la largeur de ses boutons, et son filet avec lui (UI-121, vu dans
 * Ekvaro sur une fenêtre à un seul bouton). Le pied prend toute la largeur ;
 * ses boutons restent à droite par « justify-content ».
 */
.fenetre-pied[b-rx2d0teily] {
    margin-left: 0;
    padding: 12px var(--marge-fenetre) var(--marge-fenetre) var(--marge-fenetre);
    border-top: 1px solid var(--bordure);
}
/* /Components/NoteCard.razor.rz.scp.css */
/*
 * Un échange (SOC-090, maquette « Échanges — proposition ») : une carte
 * blanche, le texte, puis la ligne du dossier, de l'auteur et des gestes.
 */

.echange[b-hkq6mzpejd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-barre);
    background-color: var(--surface);
}

/* Le texte tel qu'il a été écrit, retours à la ligne compris ; une adresse
   longue passe à la ligne au lieu d'élargir la carte. */
.echange-texte[b-hkq6mzpejd] {
    margin: 0;
    max-width: 70ch;
    color: var(--texte);
    font-size: var(--taille);
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.echange-pied[b-hkq6mzpejd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
}

/* Le dossier en pastille, qui mène à lui (ECH-003). */
.echange-dossier[b-hkq6mzpejd],
.echange-a-classer[b-hkq6mzpejd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    min-height: var(--hauteur-pastille);
    padding: 2px 10px;
    box-sizing: border-box;
    border-radius: var(--rayon-petit);
    font: inherit;
    font-size: var(--taille-aide);
    font-weight: 700;
    text-decoration: none;
}

.echange-dossier[b-hkq6mzpejd] {
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
}

.echange-dossier:hover[b-hkq6mzpejd] {
    color: var(--accent-fonce);
    text-decoration: underline;
}

.echange-dossier-nom[b-hkq6mzpejd] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* À classer, pas en faute : l'ambre de « à contrôler » (charte §1.5), en
   pointillé comme tout ce qui ajoute ce qui manque. */
.echange-a-classer[b-hkq6mzpejd] {
    border: 1px dashed var(--ambre);
    background-color: var(--attention-bandeau);
    color: var(--ambre);
    cursor: pointer;
}

.echange-a-classer:hover[b-hkq6mzpejd] {
    background-color: var(--attention-icone-fond);
}

.echange-auteur[b-hkq6mzpejd] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* Les deux gestes, à droite, discrets au repos (charte §2.1, bouton icône
   « transparent » dans une carte). */
.echange-commandes[b-hkq6mzpejd] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.echange .echange-commandes[b-hkq6mzpejd]  .bouton {
    width: var(--hauteur-bouton-compact);
    min-width: var(--hauteur-bouton-compact);
    min-height: var(--hauteur-bouton-compact);
    border-color: transparent;
    background-color: transparent;
    color: var(--texte-attenue);
}

.echange .echange-commandes[b-hkq6mzpejd]  .bouton:hover:not(:disabled) {
    border-color: transparent;
    background-color: var(--surface-douce);
    color: var(--texte);
}

/* La corbeille ne rougit qu'au survol (charte v2 §2.1). */
.echange .corbeille[b-hkq6mzpejd]  .bouton:hover:not(:disabled),
.echange .corbeille[b-hkq6mzpejd]  .bouton:focus-visible {
    color: var(--rouge);
}
/* /Components/NoteSheet.razor.rz.scp.css */
/*
 * La fiche d'un échange au gabarit v2 (SOC-091) — fenêtre de la charte §2.11,
 * en-tête et rail du gabarit « fiche » §3.2, aux mêmes valeurs que la fiche
 * d'une tâche (SOC-077) : les deux fenêtres modifient un objet léger et
 * doivent se ressembler. Les cartes, les champs, les pastilles et les
 * bandeaux viennent de leurs composants ; ne s'habille ici que ce que la fiche
 * écrit elle-même.
 */

/* --- Les deux habillages --- */

.voile-echange[b-0rnq92ibuh] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--marge-fenetre);
    background-color: var(--voile);
}

.fiche-echange[b-0rnq92ibuh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--fond-travail);
    color: var(--texte);
}

/* 1 040 px, 90 % de la hauteur au plus, corps sur le fond de travail : les
   cartes blanches des pages se retrouvent dans la fenêtre (charte §2.11). */
.fiche-echange-fenetre[b-0rnq92ibuh] {
    width: min(1040px, 100%);
    max-height: calc(90vh / var(--zoom));
    border-radius: var(--rayon-fenetre);
    box-shadow: var(--ombre-fenetre);
    overflow: hidden;
}

.fiche-echange-fenetre:focus[b-0rnq92ibuh] {
    outline: none;
}

.fiche-echange-page[b-0rnq92ibuh] {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    overflow: hidden;
}

/* --- L'en-tête --- */

.echange-entete[b-0rnq92ibuh] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
    padding: 18px 24px;
    border-bottom: 1px solid var(--bordure);
    background-color: var(--surface);
}

.echange-entete-haut[b-0rnq92ibuh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.echange-ariane[b-0rnq92ibuh] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--icone-pale);
    font-size: var(--taille-libelle);
}

.echange-ariane-lien[b-0rnq92ibuh] {
    flex-shrink: 0;
    max-width: 40%;
    overflow: hidden;
    padding: 0;
    border: none;
    background: none;
    color: var(--texte-libelle);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.echange-ariane-lien:hover[b-0rnq92ibuh] {
    color: var(--accent);
    text-decoration: underline;
}

.echange-ariane-ici[b-0rnq92ibuh] {
    overflow: hidden;
    color: var(--texte);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.echange-entete-outils[b-0rnq92ibuh] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.echange-entete-ligne[b-0rnq92ibuh] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.echange-entete-icone[b-0rnq92ibuh] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--rayon-barre);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
}

.echange-entete-texte[b-0rnq92ibuh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.echange-entete-titre[b-0rnq92ibuh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* Un titre long passe sur deux lignes puis se coupe (charte §6.1). */
.echange-entete-titre h1[b-0rnq92ibuh] {
    display: -webkit-box;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    font-size: var(--taille-titre-fiche);
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.echange-entete-meta[b-0rnq92ibuh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
}

.meta-personne[b-0rnq92ibuh],
.meta[b-0rnq92ibuh] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.meta-personne strong[b-0rnq92ibuh] {
    color: var(--texte);
}

/* Le bloc d'actions ne rétrécit jamais (charte §6.1). */
.echange-entete-actions[b-0rnq92ibuh] {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

/* --- Le corps --- */

.echange-corps[b-0rnq92ibuh] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
    min-height: 0;
    padding: 20px 24px 24px;
    overflow-y: auto;
}

.echange-grille[b-0rnq92ibuh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--largeur-rail);
    gap: var(--espace-colonnes);
    align-items: start;
}

.echange-principale[b-0rnq92ibuh],
.echange-rail[b-0rnq92ibuh] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
    min-width: 0;
}

/* Sous 900 px le rail passe sous la colonne principale et l'icône s'efface ;
   ANNULER ET ENREGISTRER RESTENT EN FACE DU TITRE (UI-063), comme sur la
   fiche d'une tâche. */
@container ecran (max-width: 900px) {
    .echange-grille[b-0rnq92ibuh] {
        grid-template-columns: minmax(0, 1fr);
    }

    .echange-entete-icone[b-0rnq92ibuh] {
        display: none;
    }
}

/* Sur un téléphone seulement, les commandes descendent sous le titre. */
@container ecran (max-width: 600px) {
    .echange-entete-ligne[b-0rnq92ibuh] {
        flex-wrap: wrap;
    }
}

/* --- Les champs --- */

.echange-champs[b-0rnq92ibuh],
.echange-champ[b-0rnq92ibuh] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-champs);
    min-width: 0;
}

.echange-champs[b-0rnq92ibuh] {
    gap: 10px;
}

.echange-libelle[b-0rnq92ibuh] {
    color: var(--texte-libelle);
    font-size: var(--taille-libelle);
    font-weight: 600;
}

.echange-requis[b-0rnq92ibuh] {
    margin-left: 2px;
    color: var(--danger);
}

/* Le texte prend la largeur de sa carte : la borne de lecture des zones de
   texte ordinaires (70 caractères) laisserait un blanc à droite. */
.echange-zone[b-0rnq92ibuh] {
    width: 100%;
    max-width: none;
    min-height: 160px;
    box-sizing: border-box;
    line-height: 1.5;
}

/* Un champ obligatoire vide se borde de rouge, et le dit dessous (UI-065). */
.echange-zone-manquante[b-0rnq92ibuh] {
    border-color: var(--danger);
    background-color: var(--champ-erreur-fond);
}

.echange-erreur[b-0rnq92ibuh] {
    margin: 0;
    color: var(--rouge);
    font-size: var(--taille-aide);
    font-weight: 600;
}

.echange-aide[b-0rnq92ibuh] {
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* La ligne de création, au bas du rail (charte §3.2). */
.fiche-meta[b-0rnq92ibuh] {
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}
/* /Components/NoteThread.razor.rz.scp.css */
/*
 * Le fil d'échanges d'un dossier (SOC-037, SOC-090) : la saisie en tête, puis
 * les échanges du plus récent au plus ancien, dans les cartes du journal.
 */

.fil-saisie[b-rolpmp95ee] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

/* La zone de texte prend la largeur de sa carte : la borne de lecture des
   zones de texte ordinaires laisserait un blanc à droite. */
.fil-saisie-texte[b-rolpmp95ee] {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    line-height: 1.5;
}

.fil-saisie-manquante[b-rolpmp95ee] {
    border-color: var(--danger);
    background-color: var(--champ-erreur-fond);
}

.fil-saisie-erreur[b-rolpmp95ee] {
    margin: 0;
    color: var(--rouge);
    font-size: var(--taille-aide);
    font-weight: 600;
}

.fil-saisie-pied[b-rolpmp95ee] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.fil-saisie-aide[b-rolpmp95ee] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

.fil-echanges[b-rolpmp95ee] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* /Components/Notice.razor.rz.scp.css */
.avis[b-wul7ytvj4r] {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--rayon-champ);
    font-size: var(--taille);
    line-height: 1.5;
}

.avis-succes[b-wul7ytvj4r] {
    background-color: var(--pastille-vert-fond);
    color: var(--pastille-vert-texte);
}

.avis-probleme[b-wul7ytvj4r] {
    background-color: var(--pastille-rouge-fond);
    color: var(--pastille-rouge-texte);
}

.avis-attention[b-wul7ytvj4r] {
    background-color: var(--pastille-ambre-fond);
    color: var(--pastille-ambre-texte);
}
/* /Components/OverflowMenu.razor.rz.scp.css */
/* Le menu « … » — charte v2 §2.2. Aucune valeur en clair. */

.menu-plus[b-gh9p2nocdc] {
    position: relative;
    display: inline-flex;
}

/* Le « … » d'une ligne, sans cadre au repos : une commande discrète (maquettes v2). */
.menu-plus-discret[b-gh9p2nocdc]  .bouton {
    border-color: transparent;
    background-color: transparent;
}

.menu-plus-discret[b-gh9p2nocdc]  .bouton:hover:not(:disabled) {
    background-color: var(--surface-douce);
}

.menu-plus-voile[b-gh9p2nocdc] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.menu-plus-panneau[b-gh9p2nocdc] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    width: 250px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-encart);
    background-color: var(--surface);
    box-shadow: var(--ombre-flottante);
}
/* /Components/Pager.razor.rz.scp.css */
.pagination[b-dvnrl4v78t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espace-blocs);
    padding-top: 12px;
}

.pagination-position[b-dvnrl4v78t] {
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
}

.pagination-boutons[b-dvnrl4v78t] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-page[b-dvnrl4v78t] {
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
    /*
     * Une largeur minimale : sans elle, passer de « 9 sur 12 » à « 10 sur 12 »
     * décale les deux boutons sous le curseur, et le clic suivant tombe à côté.
     */
    min-width: 9ch;
    text-align: center;
}
/* /Components/Picker.razor.rz.scp.css */
/* --- Ce qui est posé, et de quoi en poser (UI-062) ---
 *
 * Trois choses dans ce fichier : la rangée de ce qui est posé, le panneau qui
 * s'ouvre sous elle, et la pastille — qui sert aux deux et qui est la même
 * forme que celle de la charte §5, à un retrait près.
 *
 * La feuille est isolée : ces classes ne sont écrites que dans Picker.razor,
 * et rien d'autre dans Kofreo ne doit pouvoir les attraper au passage.
 */

.choix[b-a93f30aqq9] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-champs);
    min-width: 0;
}

/* Le bouton « + » vit SUR la rangée, à la suite de ce qui est posé, et non
   au-dessus ni au bout d'une ligne à lui : le geste « j'en ajoute un » part de
   là où on vient de lire ce qu'il y a. */
.choix-posees[b-a93f30aqq9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* La même pastille que la charte, avec de quoi la retirer. Le fond d'accent
   est le défaut : c'est le ton de ce qu'on a choisi. Une étiquette, elle,
   arrive avec ses deux couleurs en style — elles SONT la donnée (charte §10),
   et elles passent devant celles-ci. */
.choix-posee[b-a93f30aqq9] {
    /* La marge intérieure comptée DANS la largeur : sans elle, « max-width:
       100 % » vaut cent pour cent plus douze pixels, et une pastille au nom
       long pousse une barre de défilement horizontale dans la fenêtre. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 4px 1px 8px;
    border-radius: var(--rayon-pastille);
    background-color: var(--pastille-accent-fond);
    color: var(--pastille-accent-texte);
    font-size: var(--taille-pastille);
    font-weight: 700;
    line-height: 1.6;
    max-width: 100%;
}

/* Un nom trop long se coupe au lieu de pousser la rangée : la fiche vit dans
   une fenêtre, et une pastille qui déborde y met une barre de défilement
   horizontale. Le nom entier reste dans l'infobulle du retrait. */
.choix-nom[b-a93f30aqq9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le retrait hérite de la couleur du texte de sa pastille : sur une étiquette
   sombre comme sur un fond d'accent clair, la croix reste lisible sans qu'on
   ait à deviner laquelle des deux couleurs elle porte. */
.choix-retrait[b-a93f30aqq9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: var(--rayon-pastille);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.choix-retrait:hover[b-a93f30aqq9] {
    background-color: var(--voile);
}

.choix-retrait:focus-visible[b-a93f30aqq9] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Rien de posé : on le dit. Une rangée vide à côté d'un « + » se lit comme un
   affichage qui n'a pas fini de charger. */
.choix-aucun[b-a93f30aqq9] {
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
}

/* --- Le panneau ---
 *
 * Une surface, un filet, un rayon : la carte de la charte §5, en plus petit.
 * L'ombre est ce qui le fait lire comme une fenêtre posée par-dessus plutôt
 * que comme une section de plus du formulaire.
 */
.choix-panneau[b-a93f30aqq9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-champ);
    background-color: var(--surface);
    box-shadow: var(--ombre-flottante);
}

.choix-liste[b-a93f30aqq9] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    /* Une société à trente collègues ne pousse pas le formulaire de trente
       lignes : au-delà, le panneau défile tout seul. */
    max-height: calc(40vh / var(--zoom));
    overflow-y: auto;
}

.choix-option[b-a93f30aqq9] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border: 0;
    border-radius: var(--rayon-pastille);
    background-color: var(--pastille-gris-fond);
    color: var(--pastille-gris-texte);
    font-family: inherit;
    font-size: var(--taille-pastille);
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
}

.choix-option:focus-visible[b-a93f30aqq9] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/*
 * Ce qui est pris porte un anneau d'accent ET une coche.
 *
 * Deux marques et non une, parce qu'aucune ne suffit seule : l'anneau se perd
 * sur une étiquette dont le fond est déjà sombre, et la coche seule demande de
 * comparer une pastille à l'autre pour voir laquelle en a une.
 */
.choix-option-prise[b-a93f30aqq9] {
    box-shadow: 0 0 0 2px var(--accent);
}

.choix-option:disabled[b-a93f30aqq9] {
    cursor: not-allowed;
    opacity: 0.4;
}

.choix-note[b-a93f30aqq9] {
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
}

.choix-fin[b-a93f30aqq9] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/QrImage.razor.rz.scp.css */
/* Un QR code (CAT-020) : des modules pleins sur le fond de la carte. */

.qr[b-suo3btud66] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    background: var(--surface);
}

.qr path[b-suo3btud66] {
    fill: var(--texte);
}
/* /Components/RecordHeader.razor.rz.scp.css */
/* L'en-tête d'une fiche — charte v2 §3.2. */

.fiche-entete[b-whpxnyaypq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: calc(-1 * var(--marge-fenetre)) calc(-1 * var(--marge-fenetre)) 0;
    padding: var(--marge-fenetre) var(--marge-fenetre) 0;
    border-bottom: 1px solid var(--bordure);
    background-color: var(--surface);
}

/* La marge du haut, en bas aussi, quand aucun onglet ne la fait (UI-110). */
.fiche-entete-sans-onglets[b-whpxnyaypq] {
    padding-bottom: var(--marge-fenetre);
}

.fiche-ariane[b-whpxnyaypq] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: var(--taille-libelle);
    color: var(--texte-libelle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fiche-ariane[b-whpxnyaypq]  a {
    color: var(--texte-libelle);
    text-decoration: none;
}

.fiche-ariane[b-whpxnyaypq]  a:hover {
    color: var(--accent);
}

.fiche-ariane[b-whpxnyaypq]  .fiche-ariane-ici {
    color: var(--texte);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fiche-ariane[b-whpxnyaypq]  svg {
    flex: 0 0 auto;
    color: var(--icone-pale);
}

/*
 * La ligne se replie dès que le titre manquerait de place (UI-123) : il garde
 * au moins --largeur-titre-fiche-min, et ce sont alors le chiffre clé et les
 * boutons qui descendent, entiers (§6.1). Un seuil d'écran ne suffisait pas :
 * les boutons d'une facture émise font 456 px, et à 1 024 px utiles — un écran
 * de 1 024, ou 125 % de zoom sur 1 280 — le titre tombait à une centaine de
 * pixels : « FAC-202… », et l'échéance sur cinq lignes.
 */
.fiche-entete-ligne[b-whpxnyaypq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

.fiche-entete-visuel[b-whpxnyaypq] {
    flex: 0 0 auto;
}

.fiche-entete-texte[b-whpxnyaypq] {
    display: flex;
    flex: 1 1 var(--largeur-titre-fiche-min);
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.fiche-entete-titre[b-whpxnyaypq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Un libellé long : deux lignes, puis coupé (charte v2 §6.1). */
.fiche-entete-titre h1[b-whpxnyaypq] {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--taille-titre-fiche);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fiche-entete-pastilles[b-whpxnyaypq] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fiche-entete-meta[b-whpxnyaypq] {
    display: flex;
    align-items: center;
    gap: 6px 18px;
    flex-wrap: wrap;
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
}

.fiche-entete-chiffre[b-whpxnyaypq] {
    flex: 0 0 auto;
    text-align: right;
}

/* Le chiffre clé : son libellé en petit, la valeur en chiffre d'en-tête (§1.6). */
.fiche-chiffre[b-whpxnyaypq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-right: 6px;
}

.fiche-chiffre-libelle[b-whpxnyaypq] {
    color: var(--texte-attenue);
    font-size: var(--taille-pastille);
}

.fiche-chiffre-valeur[b-whpxnyaypq] {
    color: var(--texte);
    font-size: var(--taille-chiffre);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * Le bloc d'actions ne rétrécit jamais (charte v2 §6.1). Plus large que la
 * ligne — sur un téléphone, une fois passé sous le titre —, ses boutons
 * passent à la ligne entre eux, chacun à sa taille (UI-124) : ceux d'une
 * facture émise font 457 px pour 390 de large, et son « … » (aperçu,
 * téléchargement) sortait de l'écran, la zone de travail défilant de côté.
 */
.fiche-entete-actions[b-whpxnyaypq] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.fiche-entete-actions[b-whpxnyaypq]  .bouton {
    min-height: var(--hauteur-entete);
}
/* /Components/SaveBar.razor.rz.scp.css */
/*
 * La barre d'enregistrement des réglages (charte v2 §3.6) : une bande au bord
 * bas de la zone de travail, pas une carte — la même mécanique que la barre
 * d'état (StatusBar.razor.css, UI-075), dont elle reprend le débord latéral.
 */
.barre-enregistrement[b-ay7wslyz17] {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;

    margin-left: calc(-1 * var(--marge-fenetre));
    margin-right: calc(-1 * var(--marge-fenetre));
    padding: 14px var(--marge-fenetre);

    background-color: var(--surface);
    border-top: 1px solid var(--bordure);
}

/* Ce qui attend, dans le ton d'un bandeau d'attention : rien n'est perdu, mais rien n'est fait. */
.barre-enregistrement-compte[b-ay7wslyz17] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ambre);
    font-size: var(--taille-libelle);
    font-weight: 600;
}

.barre-enregistrement-actions[b-ay7wslyz17] {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* /Components/SegmentedSelect.razor.rz.scp.css */
/* --- Le sélecteur à segments (UI-077) ---
 *
 * Deux ou trois options côte à côte, une seule enfoncée. Dessiné avec les
 * jetons du bouton et du champ, parce que c'est exactement ce qu'il est : un
 * champ de choix qui a la tête d'une rangée de boutons.
 */

.selecteur[b-1dapxppe6w] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-champs);
    min-width: 0;
}

.selecteur-libelle[b-1dapxppe6w] {
    font-size: var(--taille-libelle);
    font-weight: 600;
    color: var(--texte-libelle);
}

/* La rangée entière est un seul contrôle : un cadre, et des segments qui se
   partagent l'intérieur. Deux cadres accolés auraient donné un trait double
   entre les deux mots. */
.selecteur-options[b-1dapxppe6w] {
    display: inline-flex;
    /* Trois mots longs ne tiennent pas sur la largeur d'un téléphone : mesuré
       à 360 px, « Entreprises et particuliers » fait déborder la rangée d'une
       centaine de pixels. Elle passe donc à la ligne, ce qui n'arrive que
       lorsqu'il n'y a plus la place — sur un écran ordinaire rien ne bouge. */
    flex-wrap: wrap;
    box-sizing: border-box;
    min-height: var(--hauteur-champ);
    padding: 2px;
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-champ);
    background-color: var(--fond-travail);
}

.selecteur-option[b-1dapxppe6w] {
    display: inline-flex;
    position: relative;
    align-items: center;
    cursor: pointer;
}

/* Le bouton radio fait tout le travail et ne se voit pas : c'est lui qui
   retient le choix, qui répond aux flèches du clavier et qui s'annonce. Ni
   « display: none » ni « visibility: hidden », qui le retireraient du parcours
   clavier avec le reste. */
.selecteur-option input[b-1dapxppe6w] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.selecteur-mot[b-1dapxppe6w] {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: var(--rayon-champ);
    color: var(--texte-attenue);
    font-size: var(--taille);
    line-height: 1;
    white-space: nowrap;
    transition: background-color 90ms ease, color 90ms ease;
}

.selecteur-option:hover input:not(:checked):not(:disabled) + .selecteur-mot[b-1dapxppe6w] {
    color: var(--accent);
}

/* Le choix courant est PLEIN et non seulement teinté : dans une barre de
   filtres, à côté d'une liste déroulante et de deux cases à cocher, une nuance
   de gris ne dit pas laquelle des deux vues on regarde. */
.selecteur-option input:checked + .selecteur-mot[b-1dapxppe6w] {
    background-color: var(--surface);
    border: 1px solid var(--bordure);
    color: var(--texte);
    font-weight: 600;
    /* La bordure est comptée dans la hauteur, sinon le segment coché pousse la
       rangée de deux pixels et la barre saute à chaque clic. */
    box-sizing: border-box;
    padding: 0 11px;
}

/* Le contour de focus du contrôle caché, reporté sur ce qui se voit. */
.selecteur-option input:focus-visible + .selecteur-mot[b-1dapxppe6w] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.selecteur-option input:disabled + .selecteur-mot[b-1dapxppe6w] {
    color: var(--texte-attenue);
    cursor: not-allowed;
}

/* Dans une barre de filtres : le libellé à gauche des segments, sur une seule
   ligne, comme <Select> en mode compact. */
.selecteur-compact[b-1dapxppe6w] {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.selecteur-compact .selecteur-libelle[b-1dapxppe6w] {
    font-size: var(--taille-libelle);
    white-space: nowrap;
}

.selecteur-compact .selecteur-mot[b-1dapxppe6w] {
    font-size: var(--taille-secondaire);
}

/* --- Nu, pour l'en-tête d'un écran (UI-080) ---
 *
 * « L'interrupteur avec les boutons principaux, sans le texte "Vue" et sans
 * cadre entourant l'interrupteur » (Renald, 22/09/2026).
 *
 * Le cadre disparaît, et chaque segment prend alors la forme des boutons qui
 * l'entourent : celui qu'on regarde est posé comme un bouton, l'autre est à
 * plat. La bordure transparente au repos tient la rangée immobile — peinte
 * seulement sur le segment choisi, elle décalerait les deux mots à chaque clic.
 *
 * LA HAUTEUR EST CELLE DE L'EN-TÊTE, et elle est écrite ici plutôt que dans
 * app.css : la feuille d'un composant est chargée après elle et gagne à
 * spécificité égale, si bien qu'une règle posée là-bas serait doublée par
 * celles d'au-dessus. Cette variante ne vit que dans l'en-tête, donc elle en
 * connaît la mesure.
 */
.selecteur-nu .selecteur-options[b-1dapxppe6w] {
    min-height: var(--hauteur-entete);
    padding: 0;
    border: 0;
    background: none;
    gap: var(--espace-champs);
}

.selecteur-nu .selecteur-mot[b-1dapxppe6w] {
    box-sizing: border-box;
    min-height: var(--hauteur-entete);
    padding: 0 14px;
    border: 1px solid transparent;
}

.selecteur-nu .selecteur-option input:checked + .selecteur-mot[b-1dapxppe6w] {
    padding: 0 14px;
    background-color: var(--bouton);
    border-color: var(--bouton-bordure);
}

/* Le texte que seul un lecteur d'écran lit : masqué pour de bon, et référencé
   par « aria-describedby », qui va le chercher quand même. */
.selecteur-aide[b-1dapxppe6w] {
    display: none;
}
/* /Components/Select.razor.rz.scp.css */
.champ[b-wl01v7z5op] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-champs);
}

.champ-libelle[b-wl01v7z5op] {
    font-size: var(--taille-libelle);
    font-weight: 600;
    color: var(--texte-libelle);
}

.champ-requis[b-wl01v7z5op] {
    color: var(--rouge);
    margin-left: 2px;
}

/* --- Tous les contrôles d'une ligne ont la MÊME hauteur (UI-079) ---
 *
 * Signalé par Renald le 22/09/2026, capture à l'appui : sur la fiche d'une
 * tâche, « Priorité » et « Pour le » sont côte à côte, et la liste déroulante
 * était plus courte que le champ de date.
 *
 * Les deux demandaient pourtant « --hauteur-champ », mais pas de la même
 * boîte : sans « box-sizing », une hauteur minimale s'applique au CONTENU, et
 * la marge intérieure de sept pixels du champ de saisie s'y ajoutait — pas
 * celle de la liste, qui n'en a pas verticalement. Deux fois la même valeur,
 * deux hauteurs à l'écran.
 *
 * La hauteur est donc FIXE et comptée bordure comprise : trente-deux pixels
 * pour tout ce qui tient sur une ligne, quel qu'en soit le contenu. La marge
 * verticale disparaît — le texte d'un contrôle d'une seule ligne se centre
 * tout seul dans sa boîte — et la marge horizontale de la charte reste.
 */
.champ-choix[b-wl01v7z5op] {
    box-sizing: border-box;
    height: var(--hauteur-champ);
    padding: 0 8px 0 12px;
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-champ);
    background-color: var(--surface);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--taille);
    transition: border-color 90ms ease;
}

.champ-choix:hover:not(:disabled)[b-wl01v7z5op] {
    border-color: var(--texte-attenue);
}

/* Le contour de focus n'est pas retiré : un simple changement de couleur
   de bordure sur 1 px se rate, surtout sur un formulaire de dix champs.
   Le contour global de app.css s'ajoute donc au teintage. */
.champ-choix:focus[b-wl01v7z5op] {
    border-color: var(--accent);
}

/* Un filtre qui retient quelque chose (charte v2 §2.8.3). */
.champ-choix-actif[b-wl01v7z5op] {
    border-color: var(--accent);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
    font-weight: 700;
}

.champ-choix-actif:hover:not(:disabled)[b-wl01v7z5op] {
    border-color: var(--accent-survol);
}

.champ-choix:disabled[b-wl01v7z5op] {
    background-color: var(--fond-travail);
    color: var(--texte-attenue);
}

.champ-aide[b-wl01v7z5op] {
    margin: 0;
    font-size: var(--taille-aide);
    color: var(--texte-attenue);
}

.champ-compact[b-wl01v7z5op] {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.champ-compact .champ-libelle[b-wl01v7z5op] {
    font-size: var(--taille-libelle);
    white-space: nowrap;
}
/* /Components/Slider.razor.rz.scp.css */
/* Le curseur (charte v2 §2.20) : un champ, une glissière, sa valeur. */

/* Seul dans sa grille, le champ s'y étirerait sur toute la carte : un curseur
   de 900 px se vise mal et se lit mal. Vu dans l'aperçu du 25/09/2026. */
.champ[b-ytv1factrr] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-champs);
    max-width: var(--largeur-curseur);
}

/* Le curseur et sa valeur sur une ligne : la valeur à droite, à largeur fixe,
   pour que la poignée ne bouge pas quand « 248 px » devient « 256 px ». */
.curseur[b-ytv1factrr] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--hauteur-champ);
}

/* Le curseur du navigateur, à l'accent de la société — comme la case à
   cocher d'un tableau (§2.9) : la poignée et la partie parcourue. */
.curseur-saisie[b-ytv1factrr] {
    flex: 1;
    min-width: 0;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.curseur-saisie:focus-visible[b-ytv1factrr] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.curseur-saisie:disabled[b-ytv1factrr] {
    cursor: not-allowed;
}

.curseur-valeur[b-ytv1factrr] {
    min-width: 6ch;
    color: var(--texte);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
/* /Components/SprintBanner.razor.rz.scp.css */
/* L'en-tête d'un tableau en sprint (PRJ-016, maquette v2) : la pastille, les
   dates et les jours restants, la jauge des tâches terminées. */

.bandeau-sprint[b-p7k4z96hi4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: var(--espace-blocs);
    padding: 12px 16px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-encart);
    background-color: var(--surface);
    font-size: var(--taille-secondaire);
}

.bandeau-sprint-texte[b-p7k4z96hi4] {
    color: var(--texte);
    font-weight: 600;
}

/* Une jauge de la charte (§2.16) : 6 px, le fond des compteurs, le vert de ce qui est fait. */
.bandeau-sprint-jauge[b-p7k4z96hi4] {
    position: relative;
    display: inline-block;
    width: 220px;
    max-width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
}

.bandeau-sprint-jauge i[b-p7k4z96hi4] {
    position: absolute;
    inset: 0 auto 0 0;
    background-color: var(--vert);
}

.bandeau-sprint-compte[b-p7k4z96hi4] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
}
/* /Components/StageStepper.razor.rz.scp.css */
/* Le bandeau d'étapes d'un document — charte v2 §3.3. */

.etapes[b-jnq8nd2j89] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 18px;
    box-sizing: border-box;
    list-style: none;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-barre);
    background-color: var(--surface);
}

.etape[b-jnq8nd2j89] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 30px;
    padding: 0 12px;
    border-radius: var(--rayon-pastille);
    font-size: var(--taille-libelle);
    white-space: nowrap;
}

.etape-numero[b-jnq8nd2j89] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: var(--taille-marqueur);
    font-weight: 800;
}

.etape-detail[b-jnq8nd2j89] {
    font-weight: 600;
    opacity: 0.8;
}

/* À venir : cerclée, en retrait. */
.etape-a-venir[b-jnq8nd2j89] {
    border: 1px solid var(--bordure);
    color: var(--texte-libelle);
    font-weight: 600;
}

.etape-a-venir .etape-numero[b-jnq8nd2j89] {
    background-color: var(--compteur-fond);
}

/* Courante : pleine, à l'accent. */
.etape-courante[b-jnq8nd2j89] {
    background-color: var(--accent);
    color: var(--surface);
    font-weight: 700;
}

.etape-courante .etape-numero[b-jnq8nd2j89] {
    background-color: var(--surface);
    color: var(--accent);
}

/* Franchie : cochée, en teinte douce. */
.etape-franchie[b-jnq8nd2j89] {
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
    font-weight: 700;
}

.etape-franchie .etape-numero[b-jnq8nd2j89] {
    background-color: var(--accent);
    color: var(--surface);
}

/* Là où le parcours s'arrête mal : refusé, expiré. */
.etape-arretee.etape-courante[b-jnq8nd2j89] {
    background-color: var(--danger);
}

.etape-arretee.etape-courante .etape-numero[b-jnq8nd2j89] {
    color: var(--danger);
}

.etape-trait[b-jnq8nd2j89] {
    flex: 1 1 16px;
    height: 2px;
    background-color: var(--filet);
}

.etape-trait-franchi[b-jnq8nd2j89] {
    background-color: var(--accent);
}

/* Sous 900 px, les étapes passent à la ligne plutôt que de déborder. */
@container ecran (max-width: 900px) {
    .etapes[b-jnq8nd2j89] {
        flex-wrap: wrap;
    }

    .etape-trait[b-jnq8nd2j89] {
        display: none;
    }
}
/* /Components/StatTile.razor.rz.scp.css */
/* Charte §5. Aucune valeur en clair : tout vient des jetons. */

.tuile[b-pkeheawegm] {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    /* Une tuile est une CARTE, pas un encadré dans une carte : elle se pose
       sur le fond de travail, en tête d'écran, et c'est ce qui la fait lire
       avant le reste. */
    flex: 1 1 200px;
    padding: var(--marge-carte);
    background-color: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);

    /* Elle hérite du bouton quand elle en est un : pas de fond gris, pas de
       coin carré, rien de la mise en forme par défaut. */
    font-family: var(--police);
    font-size: var(--taille);
    color: var(--texte);
    text-align: left;
}

/* Cliquable : la tuile filtre la liste sous elle. Le curseur et le survol le
   disent, parce qu'une cible qui ne se signale pas n'est pas une cible. */
button.tuile[b-pkeheawegm] {
    cursor: pointer;
    transition: border-color 90ms ease, background-color 90ms ease;
}

button.tuile:hover[b-pkeheawegm] {
    border-color: var(--accent);
}

button.tuile:focus-visible[b-pkeheawegm] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Le filtre en cours. La bordure d'accent et non un fond teinté : un fond
   changerait la couleur sur laquelle se lit le chiffre, et c'est le chiffre
   qu'on vient voir. */
.tuile-active[b-pkeheawegm] {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* La pastille d'icône reprend les teintes des pastilles d'état — même échelle,
   même sens. Ronde, parce qu'elle porte un dessin et non un mot. */
.tuile-icone[b-pkeheawegm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--rayon-pastille);
}

.tuile-texte[b-pkeheawegm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tuile-libelle[b-pkeheawegm] {
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
}

/* Le chiffre est ce qu'on vient lire : il est le plus gros de la tuile, et en
   chiffres tabulaires pour qu'une colonne de tuiles s'aligne. */
.tuile-valeur[b-pkeheawegm] {
    font-size: var(--taille-chiffre-fort);
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.tuile-aide[b-pkeheawegm] {
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
}
/* /Components/StatusBar.razor.rz.scp.css */
/*
 * Ancrée au bas de la fenêtre, et elle y reste.
 *
 * DEUX PROPRIÉTÉS, DEUX CAS. « margin-top: auto » la fait descendre au bas de
 * la zone de travail quand l'écran tient dans la fenêtre — sans lui, elle
 * flotterait sous la dernière carte, au milieu du vide. « sticky » la retient
 * en bas quand la liste est plus longue que la fenêtre — sans lui, il faudrait
 * descendre trois cents lignes pour lire « la tâche est enregistrée », ce qui
 * est précisément ce que la charte §5 refuse.
 *
 * La marge n'est donc pas un écart ajouté à celui de la zone de travail (cf.
 * WorkAreaSpacingTests) : c'est ce qui la pousse en bas.
 */
.barre-etat[b-9c777h6krn] {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-blocs);
    flex-wrap: wrap;

    /*
     * UNE BANDE, PAS UNE CARTE, ET COLLÉE AU BORD (UI-075).
     *
     * Renald, le 22/09/2026 : « la zone des messages est trop haute, elle prend
     * trop de place, il faudrait vraiment la coller tout en bas ». Elle était
     * dessinée comme une carte — quatre bordures, coins arrondis, sa propre
     * surface — posée à vingt pixels du bas, dans la marge de la zone de
     * travail. Une carte au bas d'un écran se lit comme un BLOC DE CONTENU de
     * plus, et c'est ce qui la faisait peser : ce n'est pas un bloc, c'est le
     * bord de l'écran.
     *
     * Elle déborde donc la marge horizontale de la zone de travail pour toucher
     * les deux côtés, perd son rayon et ses bordures sauf celle du haut — le
     * seul trait qui ait un sens, celui qui la sépare du travail — et prend la
     * hauteur de l'en-tête d'un tableau, qui est la bande fine déjà connue du
     * produit, au lieu de celle de l'en-tête d'écran.
     *
     * La marge du bas, elle, ne se rattrape pas ici : une marge négative
     * déréglerait le « sticky », dont la contrainte porte sur la boîte de
     * marge. C'est la zone de travail qui retire sa marge basse quand elle
     * porte une barre — voir MainLayout.razor.css.
     */
    min-height: var(--hauteur-entete-tableau);
    margin-left: calc(-1 * var(--marge-fenetre));
    margin-right: calc(-1 * var(--marge-fenetre));
    padding: 0 var(--marge-fenetre);

    background-color: var(--surface);
    border-top: 1px solid var(--bordure);
}

.barre-etat-message[b-9c777h6krn] {
    display: flex;
    align-items: center;
    min-width: 0;
}

/*
 * Le message garde sa teinte — c'est elle qui distingue un enregistrement
 * d'un refus — mais pas ses marges de bandeau : dans une barre de quarante
 * pixels, dix de marge en haut et en bas la feraient grandir de moitié à
 * chaque message, et le bas de l'écran sauterait.
 *
 * ::deep parce que « avis » appartient au composant Notice.
 */
.barre-etat-message[b-9c777h6krn]  .avis {
    padding: 3px 10px;
}

/*
 * L'aide au survol : le ton du décompte, pas celui d'un avis. Tronquée plutôt
 * que coupée si la fenêtre est étroite, et sur une seule ligne — la barre ne
 * doit pas grandir quand le pointeur passe, sinon le bas de l'écran saute.
 */
.barre-etat-aide[b-9c777h6krn] {
    font-size: var(--taille-secondaire);
    color: var(--texte-attenue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.decompte[b-9c777h6krn] {
    font-size: var(--taille-secondaire);
    color: var(--texte-attenue);
    white-space: nowrap;
    /* Ancré à droite : c'est là que Renald va le lire (21/09/2026). */
    margin-left: auto;
}
/* /Components/Switch.razor.rz.scp.css */
/* Interrupteur — charte v2 §2.17. Éteint : fond blanc, bord --bordure-controle
   (3:1, §7.1), pastille --neutre. Allumé : l'accent, pastille blanche. */

.interrupteur[b-0qwh4qq6fj] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    box-sizing: border-box;
    width: var(--largeur-interrupteur);
    height: var(--hauteur-interrupteur);
    padding: 3px;
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-pastille);
    background-color: var(--surface);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.interrupteur-pastille[b-0qwh4qq6fj] {
    display: block;
    width: var(--pastille-interrupteur);
    height: var(--pastille-interrupteur);
    border-radius: var(--rayon-pastille);
    background-color: var(--neutre);
    transition: transform 120ms ease, background-color 120ms ease;
}

.interrupteur-allume[b-0qwh4qq6fj] {
    border-color: var(--accent);
    background-color: var(--accent);
}

/* La course : la largeur, moins la pastille, la marge interne et le bord. */
.interrupteur-allume .interrupteur-pastille[b-0qwh4qq6fj] {
    background-color: var(--surface);
    transform: translateX(calc(var(--largeur-interrupteur) - var(--pastille-interrupteur) - 8px));
}

/* Inactif : à demi effacé, et le curseur dit pourquoi on ne peut pas (§2.1). */
.interrupteur:disabled[b-0qwh4qq6fj] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .interrupteur[b-0qwh4qq6fj],
    .interrupteur-pastille[b-0qwh4qq6fj] {
        transition: none;
    }
}
/* /Components/TabStrip.razor.rz.scp.css */
/* Onglets — charte v2 §2.6. */

.onglets[b-83ekkoyr4j] {
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.onglet[b-83ekkoyr4j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background-color: transparent;
    color: var(--texte-libelle);
    font-family: var(--police);
    font-size: var(--taille);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.onglet:hover[b-83ekkoyr4j] {
    color: var(--texte);
}

.onglet-actif[b-83ekkoyr4j],
.onglet-actif:hover[b-83ekkoyr4j] {
    border-bottom-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}

.onglet-compteur[b-83ekkoyr4j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
    color: var(--texte-compteur);
    font-size: var(--taille-pastille);
    font-weight: 700;
}

.onglet-actif .onglet-compteur[b-83ekkoyr4j] {
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
}
/* /Components/TaskBoard.razor.rz.scp.css */
/*
 * Le tableau des tâches — gabarit « kanban » de la charte v2 (§3.5, SOC-076).
 *
 * La largeur d'une colonne est fixée, contrairement à celle d'un tableau de
 * données où la charte l'interdit : une colonne porte des cartes de texte, et
 * douze colonnes réparties sur la largeur donneraient douze bandes où aucun
 * titre ne tient. Le clamp la fait respirer avec la fenêtre.
 */

.tableau-taches[b-9bgeht6wwj] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: var(--espace-champs);
}

.tableau-colonne[b-9bgeht6wwj] {
    display: flex;
    flex: 0 0 clamp(250px, 24vw / var(--zoom), 320px);
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh / var(--zoom) - 260px);
    padding: 14px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--rayon-surface);
    background-color: var(--colonne);
}

/* Sous une carte en vol : la cible se nomme, elle ne clignote pas. */
.tableau-colonne-visee[b-9bgeht6wwj] {
    border-color: var(--accent);
}

.tableau-colonne-entete[b-9bgeht6wwj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 0 2px 0 4px;
}

.tableau-colonne-point[b-9bgeht6wwj] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--rayon-pastille);
}

.point-attente[b-9bgeht6wwj] {
    background-color: var(--neutre);
}

.point-cours[b-9bgeht6wwj] {
    background-color: var(--accent);
}

.point-fini[b-9bgeht6wwj] {
    background-color: var(--vert);
}

.tableau-colonne-nom[b-9bgeht6wwj] {
    flex: 1 1 auto;
    margin: 0;
    overflow: hidden;
    color: var(--texte);
    font-size: var(--taille-titre-colonne);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tableau-colonne-compte[b-9bgeht6wwj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    box-sizing: border-box;
    border-radius: var(--rayon-pastille);
    background-color: var(--surface);
    color: var(--texte-compteur);
    font-size: var(--taille-pastille);
    font-weight: 700;
}

/* Une colonne longue défile dans son cadre ; son en-tête reste (charte §6.8). */
.tableau-colonne-cartes[b-9bgeht6wwj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
}

/* --- La carte --- */

.carte-tache[b-9bgeht6wwj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 13px 15px;
    border-radius: var(--rayon-encart);
    background-color: var(--surface);
    box-shadow: var(--ombre-carte);
    cursor: grab;
}

.carte-tache:active[b-9bgeht6wwj] {
    cursor: grabbing;
}

/* Le liseré de retard (KAN-003, charte §3.5). */
.carte-tache-retard[b-9bgeht6wwj] {
    border-left: 3px solid var(--danger);
    padding-left: 12px;
}

/* Un libellé long passe sur deux ou trois lignes, la carte grandit (charte §6.3). */
.carte-tache-titre[b-9bgeht6wwj] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--texte);
    font: inherit;
    font-size: var(--taille);
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.carte-tache-titre:hover[b-9bgeht6wwj] {
    color: var(--accent);
}

.carte-tache-faite .carte-tache-titre[b-9bgeht6wwj] {
    color: var(--texte-attenue);
    text-decoration: line-through;
}

.carte-tache-dossier[b-9bgeht6wwj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: var(--hauteur-etiquette);
    padding: 0 9px;
    box-sizing: border-box;
    border-radius: var(--rayon-pastille);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
    font-size: var(--taille-etiquette);
    font-weight: 700;
}

.carte-tache-dossier span[b-9bgeht6wwj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le projet de la carte (PRJ-006) : une pastille neutre, à côté du dossier lié. */
.carte-tache-projet[b-9bgeht6wwj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: var(--hauteur-etiquette);
    padding: 0 9px;
    box-sizing: border-box;
    border-radius: var(--rayon-pastille);
    border: 1px solid var(--bordure);
    color: var(--texte-attenue);
    font-size: var(--taille-etiquette);
    font-weight: 700;
    text-decoration: none;
}

a.carte-tache-projet:hover[b-9bgeht6wwj],
a.carte-tache-projet:focus-visible[b-9bgeht6wwj] {
    border-color: var(--accent);
    color: var(--accent-fonce);
}

.carte-tache-projet span[b-9bgeht6wwj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La progression et les sous-actions, sur un encart (charte §2.5). */
.carte-tache-etapes[b-9bgeht6wwj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: stretch;
    padding: var(--marge-encart-haut) var(--marge-encart);
    border-radius: var(--rayon-encart);
    background-color: var(--surface-douce);
}

.carte-tache-progression[b-9bgeht6wwj] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
    white-space: nowrap;
}

.progression[b-9bgeht6wwj] {
    flex: 1 1 auto;
    height: 6px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
}

.progression span[b-9bgeht6wwj] {
    display: block;
    height: 100%;
    border-radius: var(--rayon-pastille);
    background-color: var(--accent);
}

.carte-tache-pied[b-9bgeht6wwj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    align-self: stretch;
}

/* L'échéance dite en mots (TRV-001), en pastille : rouge quand elle est passée. */
.carte-tache-echeance[b-9bgeht6wwj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: var(--hauteur-etiquette);
    padding: 0 9px;
    box-sizing: border-box;
    border-radius: var(--rayon-pastille);
    background-color: var(--pastille-gris-fond);
    color: var(--pastille-gris-texte);
    font-size: var(--taille-etiquette);
    font-weight: 700;
    white-space: nowrap;
}

.echeance-retard[b-9bgeht6wwj] {
    background-color: var(--pastille-rouge-fond);
    color: var(--pastille-rouge-texte);
}

.carte-tache-compte[b-9bgeht6wwj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 600;
}

.carte-tache-qui[b-9bgeht6wwj] {
    display: inline-flex;
    margin-left: auto;
}

.carte-tache-qui[b-9bgeht6wwj]  .avatar + .avatar {
    margin-left: -6px;
}

/*
 * Les deux pointes et le transfert n'apparaissent qu'au survol : sur vingt
 * cartes, soixante boutons permanents mangent la place du texte. Au focus
 * elles reviennent, sans quoi elles seraient inatteignables au clavier.
 */
.carte-tache-commandes[b-9bgeht6wwj] {
    display: flex;
    gap: 2px;
    opacity: 0;
}

.carte-tache:hover .carte-tache-commandes[b-9bgeht6wwj],
.carte-tache:focus-within .carte-tache-commandes[b-9bgeht6wwj] {
    opacity: 1;
}

@media (hover: none) {
    .carte-tache-commandes[b-9bgeht6wwj] {
        opacity: 1;
    }
}

/* --- Colonne vide, reste, ajout --- */

/* L'état vide de la charte §2.13 : il dit ce qui se passera ici. Le texte
   posé sur --colonne est en --texte-libelle, jamais atténué (§7.1). */
.tableau-colonne-vide[b-9bgeht6wwj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 16px;
    border: 2px dashed var(--pointille);
    border-radius: var(--rayon-encart);
    color: var(--texte-libelle);
    font-size: var(--taille-libelle);
    text-align: center;
}

.tableau-colonne-vide strong[b-9bgeht6wwj] {
    color: var(--texte);
    font-size: var(--taille);
}

.tableau-colonne-reste[b-9bgeht6wwj] {
    margin: 0;
    padding: 0 4px;
    color: var(--texte-libelle);
}

.tableau-colonne-ajout[b-9bgeht6wwj] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    flex-shrink: 0;
    height: var(--hauteur-bouton-compact);
    padding: 0 8px;
    border: none;
    border-radius: var(--rayon-champ);
    background: none;
    color: var(--texte-libelle);
    font: inherit;
    font-size: var(--taille-libelle);
    font-weight: 600;
    cursor: pointer;
}

.tableau-colonne-ajout:hover[b-9bgeht6wwj] {
    background-color: var(--surface);
    color: var(--texte);
}

.tableau-colonne-saisie[b-9bgeht6wwj] {
    flex-shrink: 0;
    height: var(--hauteur-champ-compact);
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--accent);
    border-radius: var(--rayon-champ);
    background-color: var(--surface);
    color: var(--texte);
    font: inherit;
}

@container ecran (max-width: 900px) {
    .tableau-colonne[b-9bgeht6wwj] {
        max-height: none;
    }
}
/* /Components/Timeline.razor.rz.scp.css */
/* La chronologie (charte v2 §2.14). */
.chronologie[b-vvn3tfo90x] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chronologie-entree[b-vvn3tfo90x] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 16px 26px;
}

.chronologie-entree[b-vvn3tfo90x]::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: var(--rayon-pastille);
    background-color: var(--bordure);
}

.chronologie-entree:not(:last-child)[b-vvn3tfo90x]::after {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 2px;
    left: 5px;
    width: 2px;
    background-color: var(--filet);
}

.chronologie-recente[b-vvn3tfo90x]::before {
    border: 3px solid var(--accent);
    background-color: var(--surface);
}

.chronologie-fait[b-vvn3tfo90x] {
    color: var(--texte);
    font-size: var(--taille-secondaire);
    font-weight: 600;
}

.chronologie-quand[b-vvn3tfo90x] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}
/* /Components/TodoBoardSettings.razor.rz.scp.css */
/*
 * La fenêtre des tableaux (SOC-078) : la liste filtrée à gauche, la fiche du
 * tableau à droite. Fenêtre de la charte v2 §2.11, corps sur le fond de
 * travail ; les réglages eux-mêmes gardent leurs classes « reglage-* » d'app.css.
 */

.voile-tableaux[b-2mr7z28ved] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--marge-fenetre);
    background-color: var(--voile);
}

.fenetre-tableaux[b-2mr7z28ved] {
    display: flex;
    flex-direction: column;
    width: min(1040px, 100%);
    height: min(720px, 90vh / var(--zoom));
    overflow: hidden;
    border-radius: var(--rayon-fenetre);
    background-color: var(--fond-travail);
    box-shadow: var(--ombre-fenetre);
}

.fenetre-tableaux:focus[b-2mr7z28ved] {
    outline: none;
}

.tableaux-entete[b-2mr7z28ved] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    padding: 18px 24px;
    border-bottom: 1px solid var(--bordure);
    background-color: var(--surface);
}

/* Le carré d'icône d'un en-tête de fiche (charte v2 §3.2), à la taille d'une fenêtre. */
.tableaux-entete-icone[b-2mr7z28ved] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--rayon-encart);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
}

.tableaux-entete-texte[b-2mr7z28ved] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.tableaux-entete h2[b-2mr7z28ved] {
    margin: 0;
    font-size: var(--taille-chiffre);
    font-weight: 800;
}

.tableaux-entete-resume[b-2mr7z28ved] {
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
}

.tableaux-corps[b-2mr7z28ved] {
    display: grid;
    grid-template-columns: var(--largeur-rail) minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
}

/* --- La liste --- */

.tableaux-liste[b-2mr7z28ved] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    border-right: 1px solid var(--bordure);
    background-color: var(--surface);
}

.tableaux-liste .bouton-pointille[b-2mr7z28ved] {
    align-self: flex-start;
}

.tableaux-groupe[b-2mr7z28ved] {
    margin: 6px 4px 0;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
    text-transform: uppercase;
}

.tableaux-lignes[b-2mr7z28ved] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tableaux-ligne[b-2mr7z28ved] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: var(--hauteur-bouton);
    padding: 0 4px;
    border-radius: var(--rayon-petit);
}

.tableaux-ligne:hover[b-2mr7z28ved] {
    background-color: var(--surface-douce);
}

.tableaux-ligne-choisie[b-2mr7z28ved],
.tableaux-ligne-choisie:hover[b-2mr7z28ved] {
    background-color: var(--accent-doux);
}

.tableaux-epingle[b-2mr7z28ved] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--rayon-petit);
    background: none;
    color: var(--icone-pale);
    cursor: pointer;
}

.tableaux-epingle:hover[b-2mr7z28ved] {
    color: var(--texte-libelle);
}

.tableaux-epingle-posee[b-2mr7z28ved],
.tableaux-epingle-posee:hover[b-2mr7z28ved] {
    color: var(--accent);
}

.tableaux-nom[b-2mr7z28ved] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: none;
    background: none;
    color: var(--texte);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.tableaux-nom:hover[b-2mr7z28ved] {
    color: var(--accent);
}

.tableaux-affiche[b-2mr7z28ved] {
    flex-shrink: 0;
    height: var(--hauteur-marqueur);
    padding: 0 7px;
    border-radius: var(--rayon-etiquette);
    background-color: var(--pastille-accent-fond);
    color: var(--pastille-accent-texte);
    font-size: var(--taille-marqueur);
    font-weight: 700;
    line-height: var(--hauteur-marqueur);
}

/* --- La fiche --- */

.tableaux-fiche[b-2mr7z28ved] {
    min-height: 0;
    padding: 22px 24px;
    overflow-y: auto;
}

/* La fiche défile ; ses cartes gardent leur hauteur au lieu de se tasser
   pour tenir dans la fenêtre. */
.tableaux-fiche > *[b-2mr7z28ved],
.tableaux-fiche[b-2mr7z28ved]  .carte {
    flex-shrink: 0;
}

.tableaux-fiche-entete[b-2mr7z28ved] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tableaux-fiche-titre-groupe[b-2mr7z28ved] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tableaux-fiche-titre[b-2mr7z28ved] {
    margin: 0;
    overflow: hidden;
    font-size: var(--taille-chiffre);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tableaux-fiche-pastilles[b-2mr7z28ved] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pastille[b-2mr7z28ved] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--hauteur-pastille);
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: var(--rayon-pastille);
    font-size: var(--taille-pastille);
    font-weight: 700;
    white-space: nowrap;
}

.pastille-point[b-2mr7z28ved] {
    width: 7px;
    height: 7px;
    border-radius: var(--rayon-pastille);
    background-color: currentColor;
}

.pastille-accent[b-2mr7z28ved] {
    background-color: var(--pastille-accent-fond);
    color: var(--pastille-accent-texte);
}

.pastille-gris[b-2mr7z28ved] {
    background-color: var(--pastille-gris-fond);
    color: var(--pastille-gris-texte);
}

.tableaux-precision[b-2mr7z28ved] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* Une personne : ses initiales, puis son nom (charte v2 §2.15). */
.reglage-personne[b-2mr7z28ved] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.tableaux-fiche-pied[b-2mr7z28ved] {
    display: flex;
    padding-top: 8px;
    border-top: 1px solid var(--filet);
}

/* Supprimer le tableau : un lien, rouge parce qu'il détruit, mais seul et au
   bas de la fiche — pas un bouton rouge au repos sur chaque ligne (§2.1). */
.lien-danger[b-2mr7z28ved] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--rouge);
    font: inherit;
    font-size: var(--taille-libelle);
    font-weight: 700;
    cursor: pointer;
}

.lien-danger:hover[b-2mr7z28ved] {
    text-decoration: underline;
}

/* Les corbeilles des lignes ne rougissent qu'au survol (charte v2 §2.1). */
.corbeille[b-2mr7z28ved]  .bouton:hover,
.corbeille[b-2mr7z28ved]  .bouton:focus-visible {
    color: var(--rouge);
}

@container ecran (max-width: 900px) {
    .tableaux-corps[b-2mr7z28ved] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .tableaux-liste[b-2mr7z28ved] {
        max-height: calc(40vh / var(--zoom));
        border-right: none;
        border-bottom: 1px solid var(--bordure);
    }
}

/* Les dates d'un sprint (PRJ-016) : début et fin côte à côte, l'un sous
   l'autre au téléphone. */
.reglage-sprint[b-2mr7z28ved] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.reglage-sprint-retrait[b-2mr7z28ved] {
    margin: 0;
}

@container ecran (max-width: 600px) {
    .reglage-sprint[b-2mr7z28ved] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/TodoChecklist.razor.rz.scp.css */
/*
 * La check-list en LECTURE (SOC-061).
 *
 * Une feuille à ce composant, et non une section de plus dans app.css : ces
 * deux règles ne servent nulle part ailleurs, et la feuille commune est déjà
 * assez longue pour qu'on n'y cherche plus rien.
 *
 * Le reste des formes — la rangée, la case, le barré d'une sous-action faite —
 * vit toujours dans app.css : c'est le même composant, dessiné pareil, et
 * seul le libellé change de nature.
 */

/*
 * Le libellé, quand il ne se modifie pas.
 *
 * Un texte et non un champ, parce qu'un champ qu'on ne peut pas modifier est un
 * champ qui ment : on clique dedans, le curseur y entre, et rien ne se passe.
 * Il garde la hauteur et les marges internes du champ pour que la rangée reste
 * alignée sur celle de la fiche — on lit les deux le même jour, et une
 * sous-action ne doit pas sauter de deux pixels en changeant d'écran.
 */
.sous-action-texte[b-ey6pctcgox] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 8px;
    line-height: var(--hauteur-champ);
    color: var(--texte);

    /* Trois mots qui débordent se coupent proprement plutôt que d'élargir la
       ligne : sur une carte de tableau, la largeur est ce qui manque. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Faite : atténuée et barrée, exactement comme le champ l'est sur la fiche. */
.sous-action-faite .sous-action-texte[b-ey6pctcgox] {
    color: var(--texte-attenue);
    text-decoration: line-through;
}
/* /Components/TodoImages.razor.rz.scp.css */
/* --- Les photos d'une tâche (SOC-048, UI-066) ---
 *
 * PLEINE LARGEUR, LES UNES SOUS LES AUTRES. Les vignettes carrées de 96 pixels
 * tenaient sur une ligne et ne montraient rien : à cette taille, une fissure,
 * un relevé de compteur et une palette livrée se ressemblent tous. Renald l'a
 * dit le 21/09/2026 — « je mettrais les images avec une largeur identique à la
 * zone note, comme ça elles seraient plus visibles ». Une photo est là pour
 * être regardée ; si on doit l'ouvrir pour savoir ce qu'elle montre, elle ne
 * sert qu'à dire qu'il y en a une.
 *
 * La feuille est isolée, comme tout ce qui s'écrit depuis le 21/09/2026 :
 * app.css porte encore les anciennes règles « image-* », que plus rien n'appelle.
 */

.photos[b-hs3pume2kf] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-champs);
}

.photos-liste[b-hs3pume2kf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.photo[b-hs3pume2kf] {
    position: relative;
}

/*
 * La largeur du bloc — donc celle de la zone de notes, qui est ce que Renald a
 * pris comme référence. La hauteur suit la photo, jusqu'à un plafond : cinq
 * photos de chantier en portrait feraient sinon une fiche de trois mètres.
 *
 * « cover » plutôt que « contain » : au plafond, une photo en hauteur est
 * recadrée par son centre au lieu d'être posée entre deux bandes grises. Ce
 * qu'elle perd se retrouve en un clic, la photo entière s'ouvrant dans un
 * onglet — et la borne du serveur (1024 px) fait que ce clic n'est jamais un
 * téléchargement de dix mégaoctets.
 */
.photo-vue[b-hs3pume2kf] {
    /* La bordure comptée DANS la largeur : sans elle, « width: 100 % » vaut
       cent pour cent plus deux pixels, et la fiche gagne une barre de
       défilement horizontale. */
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-champ);
    background: var(--fond-travail);
}

/* Le cadre pendant que les octets arrivent : la fiche garde sa place plutôt
   que de sauter quand la cinquième photo se pose. Une hauteur lui est due —
   un « img » vide n'en a aucune. */
.photo-attente[b-hs3pume2kf] {
    height: 120px;
    border-style: dashed;
}

/* Le retrait se pose SUR la photo, en haut à droite. Le bouton est rendu par
   le composant Button, donc il ne porte pas la portée de cette feuille :
   « ::deep » la reporte sur l'ancêtre, faute de quoi la règle ne s'applique à
   rien — sans erreur ni avertissement.

   Le fond plein est nécessaire : posée sur une photo, une icône seule se perd
   dès que le coin est clair. */
.photo[b-hs3pume2kf] >  button {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--surface);
}

.photo-ajout[b-hs3pume2kf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--taille-secondaire);
    color: var(--texte-attenue);
}

.photo-note[b-hs3pume2kf] {
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
}

.photo-refus[b-hs3pume2kf] {
    margin: 0;
    color: var(--pastille-rouge-texte);
    font-size: var(--taille-secondaire);
}
/* /Components/TodoLabelFilter.razor.rz.scp.css */
/*
 * Le filtre par étiquette, dans la barre de commande (UI-058).
 *
 * Une feuille à ce composant : ces règles ne servent qu'ici, et app.css est
 * tenue par un autre lot. Rien n'est écrit en dur — que des jetons (charte §10).
 */

.filtre-etiquettes[b-8uixdxtmgx] {
    display: flex;
    align-items: center;
    gap: var(--espace-champs);

    /* Le repère du panneau flottant, plus bas. */
    position: relative;
}

/*
 * LE PANNEAU FLOTTE ICI, ALORS QU'IL POUSSE SUR LA FICHE.
 *
 * Picker ouvre son panneau dans le flux, et c'est le bon choix là où il est né :
 * la fiche d'une tâche vit dans une fenêtre dont le corps défile à l'intérieur
 * d'un cadre qui rogne, et un panneau posé en absolu s'y fait couper net dès
 * qu'il ouvre près du bas.
 *
 * La barre de commande ne rogne rien. Un panneau dans le flux y pousserait la
 * liste entière vers le bas à chaque ouverture — la barre est « sticky », elle
 * grandirait sous le curseur et les tâches sauteraient. Ce qu'on veut est une
 * petite pop-up, ce que Renald a demandé le 21/09/2026 : elle se pose PAR-DESSUS
 * et rien ne bouge derrière.
 *
 * « ::deep » parce que le panneau appartient à Picker : c'est la façon prévue
 * par Blazor pour qu'un parent situe un composant qu'il place, et elle laisse
 * Picker inchangé. Le jour où Picker portera lui-même un paramètre « Floating »,
 * ces règles disparaissent au profit de celui-là.
 */
.filtre-etiquettes[b-8uixdxtmgx]  .choix-panneau {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;

    /* Assez large pour deux ou trois pastilles par ligne, et jamais plus large
       que l'écran d'un téléphone. */
    width: max-content;
    min-width: 220px;
    max-width: min(420px, calc(100vw / var(--zoom) - 2 * var(--marge-carte)));

    background-color: var(--surface);
    box-shadow: var(--ombre-flottante);
}

/*
 * La barre est « sticky » avec z-index 10 ; le panneau lui appartient et doit
 * passer au-dessus de la liste, sans jamais passer au-dessus d'une fenêtre
 * modale (z-index 100). Vingt tient entre les deux.
 */

/*
 * La rangée des étiquettes retenues ne se replie pas sur plusieurs lignes ici :
 * la barre de commande garde sa hauteur d'une ligne, et au-delà de trois ou
 * quatre filtres c'est le décompte qu'on lit, pas la liste des pastilles.
 */
.filtre-etiquettes[b-8uixdxtmgx]  .choix-posees {
    flex-wrap: nowrap;
}
/* /Components/TodoSheet.razor.rz.scp.css */
/*
 * La fiche d'une tâche au gabarit v2 (SOC-077) — fenêtre de la charte §2.11,
 * en-tête et rail du gabarit « fiche » §3.2. Les cartes, les champs, les
 * onglets et les bandeaux viennent de leurs composants ; ne s'habille ici que
 * ce que la fiche écrit elle-même.
 */

/* --- Les deux habillages --- */

.voile-tache[b-j29m7nnrht] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--marge-fenetre);
    background-color: var(--voile);
}

.fiche-tache[b-j29m7nnrht] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--fond-travail);
    color: var(--texte);
}

/* 1 040 px, 90 % de la hauteur au plus, corps sur le fond de travail : les
   cartes blanches des pages se retrouvent dans la fenêtre (charte §2.11). */
.fiche-tache-fenetre[b-j29m7nnrht] {
    width: min(1040px, 100%);
    max-height: calc(90vh / var(--zoom));
    border-radius: var(--rayon-fenetre);
    box-shadow: var(--ombre-fenetre);
    overflow: hidden;
}

.fiche-tache-fenetre:focus[b-j29m7nnrht] {
    outline: none;
}

.fiche-tache-page[b-j29m7nnrht] {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    overflow: hidden;
}

/* --- L'en-tête --- */

.tache-entete[b-j29m7nnrht] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
    padding: 18px 24px 0;
    border-bottom: 1px solid var(--bordure);
    background-color: var(--surface);
}

/* Sans onglets (une tâche neuve), l'en-tête garde son souffle du bas. */
.tache-entete-sans-onglets[b-j29m7nnrht] {
    padding-bottom: 18px;
}

.tache-entete-haut[b-j29m7nnrht] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tache-ariane[b-j29m7nnrht] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--icone-pale);
    font-size: var(--taille-libelle);
}

.tache-ariane-lien[b-j29m7nnrht] {
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--texte-libelle);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tache-ariane-lien:hover[b-j29m7nnrht] {
    color: var(--accent);
    text-decoration: underline;
}

.tache-ariane-ici[b-j29m7nnrht] {
    overflow: hidden;
    color: var(--texte);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tache-entete-outils[b-j29m7nnrht] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tache-entete-ligne[b-j29m7nnrht] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.tache-entete-icone[b-j29m7nnrht] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--rayon-barre);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
}

.tache-entete-texte[b-j29m7nnrht] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.tache-entete-titre[b-j29m7nnrht] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* Un libellé long passe sur deux lignes puis se coupe (charte §6.1). */
.tache-entete-titre h1[b-j29m7nnrht] {
    display: -webkit-box;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    font-size: var(--taille-titre-fiche);
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pastille[b-j29m7nnrht] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--hauteur-pastille);
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: var(--rayon-pastille);
    font-size: var(--taille-pastille);
    font-weight: 700;
    white-space: nowrap;
}

.pastille-point[b-j29m7nnrht] {
    width: 7px;
    height: 7px;
    border-radius: var(--rayon-pastille);
    background-color: currentColor;
}

.pastille-accent[b-j29m7nnrht] {
    background-color: var(--pastille-accent-fond);
    color: var(--pastille-accent-texte);
}

.pastille-vert[b-j29m7nnrht] {
    background-color: var(--pastille-vert-fond);
    color: var(--pastille-vert-texte);
}

.pastille-rouge[b-j29m7nnrht] {
    background-color: var(--pastille-rouge-fond);
    color: var(--pastille-rouge-texte);
}

.tache-entete-meta[b-j29m7nnrht] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
}

.meta-personne[b-j29m7nnrht],
.meta[b-j29m7nnrht] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.meta-personne strong[b-j29m7nnrht] {
    color: var(--texte);
}

/* Le bloc d'actions ne rétrécit jamais (charte §6.1). */
.tache-entete-actions[b-j29m7nnrht] {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

/* --- Le corps --- */

.tache-corps[b-j29m7nnrht] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
    min-height: 0;
    padding: 20px 24px 24px;
    overflow-y: auto;
}

.tache-grille[b-j29m7nnrht] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--largeur-rail);
    gap: var(--espace-colonnes);
    align-items: start;
}

.tache-principale[b-j29m7nnrht],
.tache-rail[b-j29m7nnrht] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
    min-width: 0;
}

/* Sous 900 px le rail passe sous la colonne principale, et l'icône s'efface ;
   ANNULER ET ENREGISTRER RESTENT EN FACE DU TITRE (UI-063) : c'est le titre
   qui passe à la ligne, pas les commandes. */
@container ecran (max-width: 900px) {
    .tache-grille[b-j29m7nnrht] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tache-entete-icone[b-j29m7nnrht] {
        display: none;
    }
}

/* Sur un téléphone seulement, les commandes descendent sous le titre : il n'y
   a plus la place d'un titre lisible à côté d'elles. */
@container ecran (max-width: 600px) {
    .tache-entete-ligne[b-j29m7nnrht] {
        flex-wrap: wrap;
    }
}

/* La description prend la largeur de sa carte : la borne de lecture des zones
   de texte ordinaires (70 caractères) laisserait un blanc à droite. */
.tache-champ textarea[b-j29m7nnrht] {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* --- Les champs --- */

.tache-champs[b-j29m7nnrht] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tache-champ[b-j29m7nnrht] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-champs);
    min-width: 0;
}

/* La ligne des dates (PRJ-012) : le début à côté de l'échéance, à parts égales.
   Les deux colonnes tiennent dans les 330 px du rail comme sur un téléphone, où
   le rail passe sous la colonne principale. */
.tache-dates[b-j29m7nnrht] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

/* Au téléphone, l'un sous l'autre : côte à côte, à 116 px chacun, le champ de
   date coupait « jj/mm/aaaa ». Écrit APRÈS la règle de base, qui l'emporterait
   sinon à spécificité égale. */
@container ecran (max-width: 600px) {
    .tache-dates[b-j29m7nnrht] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tache-bloquante[b-j29m7nnrht] {
    color: var(--texte);
    font-size: var(--taille-secondaire);
    font-weight: 600;
}

/* Le libellé de Field et de Select, réécrit : le leur ne franchit pas la
   frontière de leur composant. */
.tache-libelle[b-j29m7nnrht] {
    color: var(--texte-libelle);
    font-size: var(--taille-libelle);
    font-weight: 600;
}

.tache-requis[b-j29m7nnrht] {
    color: var(--danger);
}

.tache-groupe-manquant[b-j29m7nnrht] {
    padding: 6px;
    border: 1px solid var(--danger);
    border-radius: var(--rayon-champ);
    background-color: var(--champ-erreur-fond);
}

.tache-erreur[b-j29m7nnrht] {
    margin: 0;
    color: var(--rouge);
    font-size: var(--taille-aide);
    font-weight: 600;
}

.tache-rangement[b-j29m7nnrht] {
    color: var(--texte);
    font-size: var(--taille-secondaire);
    font-weight: 600;
}

/* --- Sous-actions --- */

.carte-precision[b-j29m7nnrht] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* Barre de progression de la charte §2.16 : 6 px, légende chiffrée à côté. */
.progression[b-j29m7nnrht] {
    height: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
}

.progression span[b-j29m7nnrht] {
    display: block;
    height: 100%;
    border-radius: var(--rayon-pastille);
    background-color: var(--accent);
}

/* La ligne de création, au bas du rail (charte §3.2). */
.fiche-meta[b-j29m7nnrht] {
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}
/* /Components/TodoThumbnails.razor.rz.scp.css */
/*
 * Les photos d'une tâche, dans une ligne de liste ou sur une carte (SOC-060).
 *
 * Une feuille à ce composant plutôt qu'une section de plus dans app.css : rien
 * ici ne sert ailleurs, et ces formes n'ont pas à être lisibles depuis un autre
 * écran. Les valeurs viennent des jetons, comme partout (charte §10).
 */

.photos[b-f4c0c1gwd8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-champs);
    margin: var(--espace-champs) 0 0;
    padding: 0;
    list-style: none;
}

/*
 * Quarante-huit pixels, et c'est une décision.
 *
 * Assez pour reconnaître une fissure d'un compteur d'une palette — ce pour quoi
 * on prend ces photos — et assez peu pour que cinq d'entre elles tiennent sur
 * une ligne de tâche sans la faire grossir plus que la tâche elle-même. La
 * vignette servie fait 160 px : un écran dense a donc de quoi dessiner, au lieu
 * d'un carré flou agrandi.
 *
 * « object-fit: cover » plutôt que « contain » : une photo de chantier est de
 * travers et de proportions quelconques, et un carré rempli aligne cinq
 * vignettes sur une rangée nette là où « contain » laisserait des bandes
 * blanches de largeurs différentes.
 */
.photo[b-f4c0c1gwd8] {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-champ);
    background-color: var(--fond-travail);
}

/* Le lien ne souligne rien : ce qu'on clique est l'image, pas du texte. */
.photos a[b-f4c0c1gwd8] {
    display: block;
    line-height: 0;
}

/*
 * Au survol, l'anneau d'accent dit que ça s'ouvre. Le contour de focus n'est
 * pas remplacé, il s'y ajoute (QUAL-008) : c'est lui qui rend la rangée
 * parcourable au clavier.
 */
.photos a:hover .photo[b-f4c0c1gwd8] {
    border-color: var(--accent);
}
/* /Components/TodoTransfer.razor.rz.scp.css */
/* --- La fenêtre de transfert (SOC-068) ---
 *
 * Deux questions l'une sous l'autre — quel tableau, puis quelle colonne — et
 * rien d'autre. La fenêtre fait 520 px de large : les deux listes y tiennent
 * côte à côte, mais empilées elles se lisent dans l'ordre où on y répond.
 */
.transfert[b-mq0pa9mbeh] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
}
/* /Components/Tooltip.razor.rz.scp.css */
.infobulle[b-4cx6rdqoog] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.infobulle:focus-visible[b-4cx6rdqoog] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--rayon-champ);
}

.infobulle-bulle[b-4cx6rdqoog] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;

    padding: 5px 8px;
    border-radius: var(--rayon-champ);
    background-color: var(--nav);
    color: var(--surface);
    font-size: var(--taille-secondaire);
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: var(--ombre-flottante);

    /* Retirée de la mise en page tant qu'on ne la montre pas : invisible, elle
       occuperait sa place et ferait déborder l'écran (voir app.css, infobulle
       des boutons). */
    display: none;
    opacity: 0;
    transition: opacity 90ms ease, display 90ms allow-discrete;
}

/* Au survol comme au focus : le clavier fait le travail courant (charte §8). */
.infobulle:hover .infobulle-bulle[b-4cx6rdqoog],
.infobulle:focus-visible .infobulle-bulle[b-4cx6rdqoog] {
    display: block;
    opacity: 1;
}

@starting-style {
    .infobulle:hover .infobulle-bulle[b-4cx6rdqoog],
    .infobulle:focus-visible .infobulle-bulle[b-4cx6rdqoog] {
        opacity: 0;
    }
}
/* /Layout/AccountLayout.razor.rz.scp.css */
.page-compte[b-wr2fvqqtb8] {
    min-height: calc(100vh / var(--zoom));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--marge-fenetre);
    background-color: var(--fond-travail);
}

.panneau[b-wr2fvqqtb8] {
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
}

.marque[b-wr2fvqqtb8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.marque-symbole[b-wr2fvqqtb8] {
    width: 28px;
    height: 28px;
}

.marque-nom[b-wr2fvqqtb8] {
    font-size: var(--taille-marque);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--texte);
}

.marque-o[b-wr2fvqqtb8] {
    color: var(--accent-logo);
}
/* /Layout/DemonstrationBanner.razor.rz.scp.css */
/*
 * Le bandeau de la société de démonstration (ONB-003) : en tête du contenu, au-dessus
 * du titre de chaque écran, avec l'écart qui le sépare de lui.
 */

.demonstration-bandeau[b-c8husj23tu] {
    display: grid;
    gap: var(--espace-champs);
    margin-bottom: var(--espace-blocs);
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Charte §2 et §5 : menu latéral sombre, fond de travail clair. */

.page[b-cwm124noi3] {
    display: flex;
    height: calc(100vh / var(--zoom));
    overflow: hidden;
}

.sidebar[b-cwm124noi3] {
    flex: 0 0 var(--largeur-menu);
    background-color: var(--nav);
    /* La largeur est celle que la personne a choisie dans Paramètres, entre
       deux bornes (UI-105) : elle ne bouge pas à la souris, le menu se lit. */
    overflow: hidden;
}

.content[b-cwm124noi3] {
    flex: 1;
    overflow-y: auto;
    padding: var(--marge-fenetre);
    background-color: var(--fond-travail);

    /*
     * Les blocs d'un écran se suivent à 16 px (charte §4, « espacement entre
     * blocs »). Ils se TOUCHAIENT : cette zone était en display:block et une
     * carte ne porte aucune marge, ce qui faisait zéro pixel entre deux cartes.
     * Mesuré à l'écran le 17/09/2026, après que Renald a demandé « séparer un
     * peu les blocs » : l'écart réel valait 0, et la fiche de devis se lisait
     * comme une seule dalle.
     *
     * La même règle que le cadre des paramètres, qui l'avait déjà et qui est
     * précisément le seul écran où les cartes respiraient.
     */
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
}

/*
 * L'écart vient du conteneur maintenant. La marge basse du titre s'y
 * ajouterait et creuserait 32 px sous chaque titre de liste.
 *
 * ::deep parce que ce h1 n'appartient pas à ce composant : il vient de la page
 * rendue dans @Body, et une règle isolée ne le verrait pas.
 *
 * Les deux niveaux, parce qu'il y a deux sortes d'écrans : ceux qui portent
 * l'en-tête (ScreenTitle, où le titre est dans « .entete-ecran ») et ceux qui
 * n'ont encore qu'un titre nu. Le jour où tous l'auront, la première règle
 * tombera d'elle-même.
 */
.content[b-cwm124noi3] >  h1,
.content[b-cwm124noi3] >  .entete-ecran h1 {
    margin-bottom: 0;
}

/*
 * Un bloc garde sa hauteur : la colonne défile, elle n'écrase pas.
 *
 * En flex, un enfant vaut flex-shrink: 1 par défaut. Une carte plus haute que
 * la fenêtre se faisait donc COMPRIMER pour tenir dedans — et comme une carte
 * est en overflow: hidden, ce qui dépassait était coupé net. Vu à l'écran le
 * 17/09/2026 sur le tableau de bord : la carte « Facturation » mesurait 351 px
 * pour 488 px de contenu, et la quatrième tuile était tranchée en deux.
 *
 * Défaut introduit par le passage de cette zone en flex le même jour, et
 * invisible tant qu'aucun écran n'était plus haut que la fenêtre.
 */
.content[b-cwm124noi3] >  * {
    flex-shrink: 0;
}

/*
 * Un écran qui porte une barre d'état ne garde pas de marge sous elle (UI-075).
 *
 * « Il faudrait vraiment la coller tout en bas » (Renald, 22/09/2026). Ce qui
 * l'en séparait n'était pas un réglage de la barre : c'étaient les vingt pixels
 * de marge basse de la zone de travail, qu'elle ne pouvait pas rattraper
 * elle-même — une marge négative déplacerait sa boîte de marge, et c'est
 * précisément sur cette boîte que porte la contrainte du « sticky ». La barre
 * se retrouverait sous l'horizon dès que l'écran défile.
 *
 * C'est donc la zone de travail qui la retire, et seulement quand une barre est
 * là pour occuper le bord : les écrans qui n'en ont pas encore gardent leur
 * marge, faute de quoi leur dernière carte toucherait le bas de la fenêtre. La
 * règle se retire d'elle-même au fur et à mesure qu'ils en reçoivent une
 * (UI-055) — c'est l'intérêt de la poser sur la présence de la barre plutôt
 * que sur le nom des écrans.
 */
.content:has(.barre-etat)[b-cwm124noi3] {
    padding-bottom: 0;
}

/* Au-dessus du seuil, le bouton du tiroir et le voile n'existent pas : retirés
   de l'affichage, donc aussi de l'ordre de tabulation. Les masquer seulement
   des yeux laisserait une personne au clavier buter sur un bouton invisible. */
.menu-bouton[b-cwm124noi3],
.menu-voile[b-cwm124noi3] {
    display: none;
}

/* --- Replier le menu, sur un écran large (UI-053) ---
 *
 * Tout ce bloc est enfermé au-dessus du seuil du tiroir. Sous 1024 px, le menu
 * est une autre mécanique — il glisse par-dessus au lieu de rendre sa place —
 * et un choix fait sur un grand écran n'a aucune raison de la dérégler.
 */
@container ecran (min-width: 1024px) {

    /*
     * Le bouton se pose là où il se voit sans bouger : sur la ligne du logo
     * quand le menu est déployé, au centre du rail quand il est replié — dans
     * les deux cas en haut à gauche, sur le menu, à la même hauteur.
     * « fixed » et non « absolute » : il doit rester sous les yeux pendant
     * qu'on fait défiler, comme la barre de commande.
     *
     * CENTRÉ SUR LA RANGÉE DU LOGO (UI-073, « il faut aligner le bouton avec
     * le logo »), et calculé plutôt que recopié : les vingt pixels de marge du
     * menu v2, puis la moitié de ce que la rangée de 32 px a de moins que le
     * bouton de 40. Les 7 px d'avant avaient été mesurés sur le menu v1, dont
     * la marge était de 12 px ; la v2 l'avait portée à 20 sans déplacer le
     * bouton, qui flottait neuf pixels au-dessus du logo (UI-097).
     */
    .bascule[b-cwm124noi3] {
        position: fixed;
        z-index: 20;
        top: calc(20px + (var(--hauteur-logo-menu) - var(--hauteur-entete)) / 2);
        left: calc(var(--largeur-menu) - var(--hauteur-entete) - 10px);
    }

    /* La hauteur de la pastille du titre, à côté de laquelle il se lit. */
    .bascule[b-cwm124noi3]  .bouton {
        width: var(--hauteur-entete);
        min-width: var(--hauteur-entete);
        height: var(--hauteur-entete);
    }

    /*
     * LE BOUTON PREND LA COULEUR DU MENU (UI-072).
     *
     * Renald, le 22/09/2026 : « il y a un problème avec le bouton du menu de
     * base ». Le problème était celui-ci : un bouton ORDINAIRE — fond presque
     * blanc, bordure grise, icône sombre (charte §5) — collé sur le menu
     * SOMBRE. Un carré blanc au milieu du bleu nuit, qui se lit comme un défaut
     * d'affichage et non comme une commande.
     *
     * Ce n'est pas une cinquième variante de bouton — la charte §5 en compte
     * quatre et il n'en faut pas plus. C'est la même variante ordinaire, lue
     * avec les jetons du menu latéral (charte §2, « fond sombre »). La feuille
     * de la coquille est d'ailleurs le seul endroit qui SAIT sur quelle surface
     * le bouton tombe ; le composant Button, lui, ne peut pas le deviner.
     *
     * LA RÈGLE VALAIT D'ABORD POUR LE SEUL ÉTAT DÉPLOYÉ, parce que le bouton
     * partait alors sur le fond de travail quand le menu disparaissait. Depuis
     * UI-076 le menu ne disparaît plus, il se réduit à un rail : le bouton est
     * sur le sombre dans les deux états, et la distinction est tombée d'
     * elle-même. C'est une simplification que le rail a offerte, pas un oubli.
     */
    .bascule[b-cwm124noi3]  .bouton {
        border-color: transparent;
        background-color: transparent;
        color: var(--nav-texte);
    }

    .bascule[b-cwm124noi3]  .bouton:hover:not(:disabled) {
        border-color: transparent;
        background-color: var(--nav-entree-survol);
        color: var(--nav-texte-survol);
    }

    /* Le contour de focus reste celui de tout le monde, dans la couleur qui se
       voit sur le menu : l'accent n'y tient pas le 3:1 du §7 (UI-097). */
    .bascule[b-cwm124noi3]  .bouton:focus-visible {
        outline-color: var(--nav-contour-focus);
        color: var(--nav-texte-survol);
    }

    /*
     * REPLIÉ, LE MENU DEVIENT UN RAIL D'ICÔNES (UI-076).
     *
     * Renald, le 22/09/2026 : « lorsqu'il est masqué, il faudrait voir les
     * icônes des différents items, masquer le champ recherche ». Il disparais-
     * sait entièrement jusque-là, et rendait bien ses deux cent vingt pixels —
     * mais il fallait le rouvrir pour changer d'écran, donc le replier coûtait
     * un aller-retour à chaque navigation. Le rail rend l'essentiel de la place
     * sans rien coûter : on garde le geste, on perd seulement le mot.
     *
     * Ce qui disparaît et ce qui reste se décide dans NavMenu.razor.css, qui
     * est le seul à connaître ses propres morceaux.
     */
    .page-menu-replie[b-cwm124noi3] {
        --largeur-menu: var(--largeur-menu-rail);
    }

    /* Centré dans le rail, à la place qu'y tenait le logo : à cette largeur il
       n'y a de place que pour une chose par rangée, et celle dont on a besoin
       est celle qui ramène le menu. La rangée y prend la hauteur du bouton :
       il s'y pose donc au ras de la marge du menu. */
    .page-menu-replie .bascule[b-cwm124noi3] {
        top: 20px;
        left: calc((var(--largeur-menu) - var(--hauteur-entete)) / 2);
    }

    /*
     * CE QUE LE RAIL A FAIT TOMBER (UI-076).
     *
     * Trois règles vivaient ici tant que le menu disparaissait pour de bon :
     * le « visibility: hidden » qui le retirait de l'ordre de tabulation, le
     * décalage du bouton vers l'angle du contenu, et deux compensations de
     * marge — l'en-tête de l'écran, puis l'écran entier pour ceux qui n'en ont
     * pas encore — qui réservaient au bouton la place qu'il occupait par-dessus
     * le travail.
     *
     * Le rail les rend toutes inutiles d'un coup : le menu reste tabulable
     * puisqu'il reste là, le bouton ne quitte plus le menu, et la zone de
     * travail n'a plus rien à réserver puisque la largeur du rail la pousse
     * déjà. Elles sont retirées plutôt que laissées sans effet — une règle qui
     * ne s'applique plus est un piège pour qui la lira ensuite.
     */
}

/* --- Un tiroir de module à côté, sur un écran large (IA-018) ---
 *
 * Un tiroir ouvert à côté (charte §2.21) ne serre jamais l'écran sous sa
 * largeur minimale : c'est le tiroir qui cède, la page qui reste utilisable
 * (décision de Renald du 02/10/2026). Sans cela, cette zone qui défile
 * descendait jusqu'à zéro : un tiroir de 720 px sur une fenêtre de 1 100 px ne
 * lui laissait que 116 px. Au-dessus du seuil seulement : en dessous, le
 * tiroir passe par-dessus l'écran, qui garde toute la largeur.
 *
 * Un bloc à part, APRÈS celui du repli du menu : les épreuves de la coquille
 * lisent le premier bloc large comme celui du menu.
 *
 * Marges comprises (border-box) : c'est la largeur que la personne voit, et
 * celle que la poignée du tiroir mesure. Sans cela, l'écran gardait 520 px —
 * ses 20 px de marge de chaque côté en plus —, et la poignée annonçait 40 px
 * de tiroir qui n'existaient pas (vu à l'aperçu du 02/10/2026).
 */
@container ecran (min-width: 1024px) {
    .content[b-cwm124noi3] {
        box-sizing: border-box;
        min-width: var(--largeur-ecran-min);
    }
}

/* --- Sous 1024 px : le menu devient un tiroir (UI-009, UI-097) ---
 *
 * Deux cent trente pixels de menu fixe sur un écran de 375 en laissent 143 au
 * contenu, où rien ne tient ; sur une tablette de 768, le tableau qu'on est
 * venu lire perd le tiers de sa largeur. Le tiroir rend l'écran entier à ce
 * qu'on est venu lire ; le menu revient d'un bouton et se referme dès qu'on a
 * choisi.
 */
@container ecran (max-width: 1023.98px) {

    /* Le bouton du bureau n'a rien à dire ici : c'est le tiroir qui commande,
       et son bouton à lui est juste en dessous. */
    .bascule[b-cwm124noi3] {
        display: none;
    }

    .menu-bouton[b-cwm124noi3] {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 30;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--hauteur-entete);
        height: var(--hauteur-entete);
        padding: 0;
        border: 1px solid var(--bordure-controle);
        border-radius: var(--rayon-champ);
        background-color: var(--surface);
        color: var(--texte);
        cursor: pointer;
    }

    .menu-bouton:hover[b-cwm124noi3] {
        background-color: var(--bouton-survol);
    }

    /* Le bouton flotte au-dessus du contenu : la page lui réserve sa place en
       haut à gauche, sinon il couvre le titre de l'écran. */
    .content[b-cwm124noi3] {
        padding-top: 60px;
    }

    /*
     * LE TIROIR PREND LA LARGEUR CHOISIE, SANS COUVRIR TOUT LE TÉLÉPHONE
     * (UI-105). À 320 px sur un écran de 320, il ne resterait plus un pixel
     * du voile qu'on touche pour le refermer. Il laisse donc toujours 15 % de
     * l'écran à découvert.
     */
    .sidebar[b-cwm124noi3] {
        position: fixed;
        z-index: 40;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(var(--largeur-menu), 85vw / var(--zoom));
        flex: none;
        /* Hors champ au repos, et non masqué : ce qui se traduit revient en
           glissant, ce qui s'affiche apparaît d'un coup. */
        transform: translateX(-100%);
        transition: transform 0.18s ease-out;
    }

    .page-menu-ouvert .sidebar[b-cwm124noi3] {
        transform: translateX(0);
    }

    .menu-voile[b-cwm124noi3] {
        position: fixed;
        z-index: 35;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: none;
        background-color: var(--voile);
        cursor: pointer;
    }
}

/* Quelqu'un qui a demandé moins d'animation n'en veut pas ici non plus : le
   tiroir arrive, sans glisser. */
@media (prefers-reduced-motion: reduce) {
    .sidebar[b-cwm124noi3] {
        transition: none;
    }
}
/* /Layout/NavBadge.razor.rz.scp.css */
/* Badge du menu latéral — charte v2, menu (UI-097). Aligné à droite de son
   entrée : c'est l'entrée, un flex, qui le pousse au bout de la ligne. */

.badge-menu[b-cosxhy99jm] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--hauteur-badge-menu);
    height: var(--hauteur-badge-menu);
    margin-left: auto;
    padding: 0 6px;
    border-radius: var(--rayon-pastille);
    font-size: var(--taille-marqueur);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.badge-menu-info[b-cosxhy99jm] {
    background-color: var(--nav-badge-info-fond);
    color: var(--nav-badge-info-texte);
}

.badge-menu-attention[b-cosxhy99jm] {
    background-color: var(--nav-badge-attention-fond);
    color: var(--nav-badge-texte);
}

.badge-menu-danger[b-cosxhy99jm] {
    background-color: var(--nav-badge-danger-fond);
    color: var(--nav-badge-texte);
}
/* /Layout/NavMenu.razor.rz.scp.css */
/*
 * Menu latéral — charte v2 §1.4 et §9.6, au pixel près (UI-097).
 *
 * Toutes les couleurs, tailles de texte, hauteurs et rayons sont des jetons de
 * kofreo-tokens.css ; seuls les espacements, pris sur l'échelle de 2 px de la
 * charte (§1.7), s'écrivent ici. Une épreuve le vérifie (MenuStyleTests).
 */

.menu[b-lj1ri9q1vy] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    padding: 20px 14px;
    gap: 18px;
    color: var(--nav-texte-survol);
}

/* --- Marque : le logo de la charte v2 (§0) --- */

.marque[b-lj1ri9q1vy] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    height: var(--hauteur-logo-menu);
    padding: 0 6px;
}

.marque-symbole[b-lj1ri9q1vy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: var(--ecart-brique);
    width: var(--largeur-symbole);
}

.brique[b-lj1ri9q1vy] {
    display: block;
    height: var(--hauteur-brique);
    border-radius: var(--rayon-brique);
    background-color: var(--surface);
}

/* Le module qu'on ajoute : la brique en haut à droite se soulève et tourne,
   comme dans les fichiers du logo (GLOBAL-014 ; Renald, 03/10/2026). */
.brique-levee[b-lj1ri9q1vy] {
    background-color: var(--accent-logo);
    transform: translateY(calc(-1 * var(--ecart-brique))) rotate(var(--rotation-brique));
}

.marque-nom[b-lj1ri9q1vy] {
    font-size: var(--taille-marque);
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--surface);
}

.marque-o[b-lj1ri9q1vy] {
    color: var(--accent-logo);
}

/* --- Recherche globale ---
 *
 * « recherche-globale » et non « recherche » : ce nom-là appartient au champ
 * de recherche des listes (app.css), dont le fond blanc, la bordure et les
 * 240 px minimum s'appliquaient aussi à ce conteneur — le champ du menu
 * débordait de onze pixels hors du menu (UI-097).
 */

.recherche-globale[b-lj1ri9q1vy] {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.recherche-icone[b-lj1ri9q1vy] {
    position: absolute;
    left: 12px;
    display: flex;
    color: var(--nav-texte-2);
    pointer-events: none;
}

.recherche-champ[b-lj1ri9q1vy] {
    /* Marge interne et bordure comptées DANS la largeur : sinon le champ
       déborde du menu d'autant, et sa bordure disparaît sous le bord. */
    box-sizing: border-box;
    width: 100%;
    height: var(--hauteur-champ);
    padding: 0 12px 0 36px;
    border: 1px solid transparent;
    border-radius: var(--rayon-menu);
    background-color: var(--nav-champ);
    color: var(--surface);
    font-family: var(--police);
    font-size: var(--taille);
}

.recherche-champ[b-lj1ri9q1vy]::placeholder {
    color: var(--nav-texte-2);
}

/* Le contour de focus n'est pas retiré, il change de couleur : sur ce fond
   sombre, l'accent ne tient pas le 3:1 du §7. */
.recherche-champ:focus-visible[b-lj1ri9q1vy] {
    outline-color: var(--nav-contour-focus);
}

/* --- Panneau de résultats (SOC-009) ---
 *
 * Il sort du menu sombre sur le fond clair de l'application : c'est de la
 * donnée, et la donnée se lit sur clair. Posé en absolu pour ne pas pousser
 * les entrées vers le bas à chaque frappe.
 */

.resultats[b-lj1ri9q1vy] {
    position: absolute;
    top: calc(var(--hauteur-champ) + 6px);
    left: 0;
    z-index: 30;
    width: var(--largeur-resultats-recherche);
    max-height: calc(60vh / var(--zoom));
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-champ);
    background-color: var(--surface);
    box-shadow: var(--ombre-flottante);
}

.resultats-vide[b-lj1ri9q1vy] {
    margin: 0;
    padding: 8px 10px;
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
}

.resultats-groupe + .resultats-groupe[b-lj1ri9q1vy] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--bordure);
}

.resultats-titre[b-lj1ri9q1vy] {
    display: block;
    padding: 4px 10px;
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.resultat[b-lj1ri9q1vy] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    border-radius: var(--rayon-champ);
    color: var(--texte);
    text-decoration: none;
}

.resultat:hover[b-lj1ri9q1vy],
.resultat:focus[b-lj1ri9q1vy] {
    background-color: var(--surface-douce);
}

.resultat-titre[b-lj1ri9q1vy] {
    color: var(--texte);
}

.resultat-detail[b-lj1ri9q1vy] {
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
}

/* « et 42 autres » : dire ce qu'on ne montre pas, sinon la recherche ment par
   omission et on repart convaincu que la ligne n'existe pas. */
.resultats-reste[b-lj1ri9q1vy] {
    display: block;
    padding: 4px 10px;
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
    font-style: italic;
}

/* --- La navigation : trois zones ---
 *
 * Elle défile quand l'écran est bas. Le contour de focus déborde de quatre
 * pixels — deux de décalage, deux d'épaisseur — et une zone qui défile coupe
 * ce qui dépasse d'elle : la marge interne les lui rend, la marge négative
 * rend la place au reste du menu.
 */

.navigation[b-lj1ri9q1vy] {
    flex: 1 1 auto;
    min-height: 0;
    margin: -4px;
    padding: 4px;
    overflow-y: auto;
    /* Une barre discrète, dans les tons du menu : celle du navigateur est un
       rail clair au milieu du bleu nuit. */
    scrollbar-width: thin;
    scrollbar-color: var(--nav-filet) transparent;
}

.entrees[b-lj1ri9q1vy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Le séparateur entre deux zones : un filet, douze pixels de chaque côté. */
.entrees + .entrees[b-lj1ri9q1vy] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--nav-filet);
}

/* --- Les entrées ---
 *
 * « ::deep » et non un sélecteur ordinaire : l'entrée est dessinée par
 * MenuLink, un autre composant, et le CSS de composant ne marque que les
 * éléments écrits dans son propre fichier .razor. Une règle écrite
 * normalement ici ne l'atteindrait pas, sans que rien ne le signale.
 */

.menu[b-lj1ri9q1vy]  .entree {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: var(--hauteur-entree-menu);
    padding: 0 12px;
    border-radius: var(--rayon-menu);
    color: var(--nav-texte);
    font-size: var(--taille);
    font-weight: 500;
    text-decoration: none;
    /* Le calme au repos, la réaction au survol. */
    transition: background-color 90ms ease, color 90ms ease;
}

.menu[b-lj1ri9q1vy]  .entree:hover {
    background-color: var(--nav-entree-survol);
    color: var(--nav-texte-survol);
}

/* L'entrée active : l'accent en aplat, texte blanc et gras (§1.4). */
.menu[b-lj1ri9q1vy]  .entree.active {
    background-color: var(--accent);
    color: var(--surface);
    font-weight: 700;
}

.menu[b-lj1ri9q1vy]  .entree.active:hover {
    color: var(--surface);
}

/* Le contour global d'app.css — deux pixels, décalé de deux — dans la couleur
   qui se voit sur le menu. */
.menu[b-lj1ri9q1vy]  .entree:focus-visible {
    outline-color: var(--nav-contour-focus);
}

.menu[b-lj1ri9q1vy]  .entree-mot {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Écran pas encore écrit : grisé, pas cliquable, et l'infobulle dit pour
   quelle version il arrive. */
.menu[b-lj1ri9q1vy]  .entree-a-venir {
    opacity: 0.4;
    cursor: default;
}

.menu[b-lj1ri9q1vy]  .entree-a-venir:hover {
    background-color: transparent;
    color: var(--nav-texte);
}

/* --- Les groupes des modules métier (UI-097) ---
 *
 * L'en-tête a le dessin d'une entrée racine — il en porte la classe — plus un
 * chevron de 14 px qui pivote d'un quart de tour à l'ouverture. C'est un
 * bouton : il faut lui retirer le fond, la bordure et le centrage que le
 * navigateur donne à tout bouton.
 */

.groupe-entete[b-lj1ri9q1vy] {
    width: 100%;
    margin: 0;
    border: none;
    background-color: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.groupe-chevron[b-lj1ri9q1vy] {
    display: inline-flex;
    flex: 0 0 auto;
    transition: transform 150ms ease;
}

.groupe.ouvert > .groupe-entete .groupe-chevron[b-lj1ri9q1vy] {
    transform: rotate(90deg);
}

/* Fermé sur la page qu'il tient, le groupe le dit : son libellé passe en blanc. */
.groupe.tient-la-page:not(.ouvert) > .groupe-entete[b-lj1ri9q1vy] {
    color: var(--surface);
}

.sous-entrees[b-lj1ri9q1vy] {
    position: relative;
    display: none;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.groupe.ouvert > .sous-entrees[b-lj1ri9q1vy] {
    display: flex;
}

/* Le filet : un pixel, à vingt-deux du bord — sous l'icône de l'en-tête,
   qu'il prolonge —, sur toute la hauteur du groupe ouvert. */
.sous-entrees[b-lj1ri9q1vy]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 22px;
    border-left: 1px solid var(--nav-filet);
}

/* Le titre du volet : il n'existe que dans le rail. */
.volant-titre[b-lj1ri9q1vy] {
    display: none;
}

.menu[b-lj1ri9q1vy]  .sous-entree {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: var(--hauteur-sous-entree-menu);
    padding: 0 12px 0 42px;
    border-radius: var(--rayon-menu);
    color: var(--nav-texte);
    font-size: var(--taille-secondaire);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 90ms ease, color 90ms ease;
}

.menu[b-lj1ri9q1vy]  .sous-entree:hover {
    background-color: var(--nav-entree-survol);
    color: var(--nav-texte-survol);
}

.menu[b-lj1ri9q1vy]  .sous-entree.active {
    background-color: var(--nav-sous-entree-active);
    color: var(--surface);
    font-weight: 700;
}

.menu[b-lj1ri9q1vy]  .sous-entree.active:hover {
    color: var(--surface);
}

/* Le repère de la page à l'écran : trois pixels d'accent, posés sur le filet. */
.menu[b-lj1ri9q1vy]  .sous-entree.active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 21px;
    border-left: 3px solid var(--accent);
    border-radius: var(--rayon-pastille);
}

.menu[b-lj1ri9q1vy]  .sous-entree:focus-visible {
    outline-color: var(--nav-contour-focus);
}

/* Qui a demandé moins d'animation n'en veut pas ici non plus. */
@media (prefers-reduced-motion: reduce) {
    .groupe-chevron[b-lj1ri9q1vy],
    .menu[b-lj1ri9q1vy]  .entree,
    .menu[b-lj1ri9q1vy]  .sous-entree {
        transition: none;
    }
}

/* --- Bas du menu : la vitrine, puis le compte --- */

/* Le lanceur d'un panneau (IA-010) : un bouton dessiné comme une entrée — la
   classe « entree » lui donne tout le reste. Ici, seulement ce qu'un bouton a
   de plus qu'un lien. */
.lanceur[b-lj1ri9q1vy] {
    box-sizing: border-box;
    width: 100%;
    border: none;
    background-color: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.bas[b-lj1ri9q1vy] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--nav-filet);
}

.compte[b-lj1ri9q1vy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 0 8px;
}

.compte-avatar[b-lj1ri9q1vy] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--hauteur-compte-menu);
    height: var(--hauteur-compte-menu);
    border-radius: var(--rayon-champ);
    background-color: var(--nav-avatar);
    color: var(--surface);
    font-size: var(--taille-pastille);
    font-weight: 800;
}

.compte-nom[b-lj1ri9q1vy] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--nav-texte-2);
    font-size: var(--taille-aide);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.deconnexion[b-lj1ri9q1vy] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--hauteur-compte-menu);
    height: var(--hauteur-compte-menu);
    padding: 0;
    border: none;
    border-radius: var(--rayon-petit);
    background-color: transparent;
    color: var(--nav-texte-2);
    cursor: pointer;
}

.deconnexion:hover[b-lj1ri9q1vy] {
    background-color: var(--nav-entree-survol);
    color: var(--nav-texte-survol);
}

.deconnexion:focus-visible[b-lj1ri9q1vy] {
    outline-color: var(--nav-contour-focus);
}

/* --- Le menu replié : un rail d'icônes (UI-076) ---
 *
 * C'EST LA COQUILLE QUI PORTE L'ÉTAT, et ce menu qui sait ce qu'il en fait :
 * « page-menu-replie » appartient à MainLayout et se lit ici comme un ancêtre.
 *
 * Enfermé au-dessus du seuil du tiroir, comme dans la coquille : sous 1024 px
 * le menu est un tiroir de pleine largeur, et un repli choisi sur un grand
 * écran n'a aucune raison d'y réduire les entrées à leur dessin.
 *
 * « display: none » et non « visibility: hidden » pour tout ce qui part : un
 * champ seulement invisible reste tabulable.
 */

@container ecran (min-width: 1024px) {

    .page-menu-replie .recherche-globale[b-lj1ri9q1vy],
    .page-menu-replie .compte-nom[b-lj1ri9q1vy],
    .page-menu-replie .compte-avatar[b-lj1ri9q1vy],
    .page-menu-replie .marque-symbole[b-lj1ri9q1vy],
    .page-menu-replie .marque-nom[b-lj1ri9q1vy] {
        display: none;
    }

    /* La rangée de la marque se vide mais garde sa place : le bouton de
       bascule, en position fixe, l'occupe. Sans elle, il couvrirait la
       première entrée. */
    .page-menu-replie .marque[b-lj1ri9q1vy] {
        height: var(--hauteur-entete);
        padding: 0;
    }

    /* Dix pixels de marge et non quatorze : le rail en laisse sinon trente-six
       à une entrée qui en demande quarante. */
    .page-menu-replie .menu[b-lj1ri9q1vy] {
        padding: 20px 10px;
    }

    /* L'icône au centre d'une cible carrée : on perd le mot, jamais la surface. */
    .page-menu-replie .menu[b-lj1ri9q1vy]  .entree {
        position: relative;
        justify-content: center;
        gap: 0;
        padding: 0;
    }

    .page-menu-replie .menu[b-lj1ri9q1vy]  .entree-mot {
        display: none;
    }

    /* Le badge reste, posé sur le coin de l'icône : ce qui presse se voit
       aussi dans le rail. */
    .page-menu-replie .menu[b-lj1ri9q1vy]  .badge-menu {
        position: absolute;
        top: 2px;
        right: 2px;
    }

    .page-menu-replie .compte[b-lj1ri9q1vy] {
        justify-content: center;
        padding: 6px 0 0;
    }

    /*
     * LES GROUPES DEVIENNENT DES VOLETS (UI-097). Replié, un groupe n'est plus
     * que son icône ; il s'ouvre à côté du rail au survol, ou par son en-tête
     * au clavier — Échap le referme. « fixed » et non « absolute » : le menu
     * coupe ce qui déborde de lui, pas ce qui est fixé à la fenêtre. Posé sur
     * les dix derniers pixels du rail, le volet touche l'en-tête : la souris
     * passe de l'un à l'autre sans traverser de vide, où il se refermerait.
     */
    .page-menu-replie .groupe-chevron[b-lj1ri9q1vy] {
        display: none;
    }

    .page-menu-replie .groupe.ouvert > .sous-entrees[b-lj1ri9q1vy] {
        display: none;
    }

    .page-menu-replie .groupe.tient-la-page > .groupe-entete[b-lj1ri9q1vy] {
        color: var(--surface);
    }

    .page-menu-replie .groupe:hover > .sous-entrees[b-lj1ri9q1vy],
    .page-menu-replie .groupe.volant:focus-within > .sous-entrees[b-lj1ri9q1vy] {
        position: fixed;
        z-index: 40;
        left: calc(var(--largeur-menu) - 10px);
        display: flex;
        box-sizing: border-box;
        width: var(--largeur-volant-menu);
        margin-top: calc(-1 * var(--hauteur-entree-menu));
        padding: 6px;
        border: 1px solid var(--nav-filet);
        border-radius: var(--rayon-encart);
        background-color: var(--nav);
        box-shadow: var(--ombre-flottante);
    }

    /* Dans le volet, les sous-entrées retrouvent leur mot, sans filet ni
       retrait : un volet se lit comme une liste, pas comme un arbre. */
    .page-menu-replie .sous-entrees[b-lj1ri9q1vy]::before {
        display: none;
    }

    .page-menu-replie .volant-titre[b-lj1ri9q1vy] {
        display: block;
        padding: 6px 12px 8px;
        color: var(--surface);
        font-size: var(--taille-etiquette);
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .page-menu-replie .menu[b-lj1ri9q1vy]  .sous-entree {
        padding: 0 12px;
    }

    .page-menu-replie .menu[b-lj1ri9q1vy]  .sous-entree .entree-mot {
        display: block;
    }

    .page-menu-replie .menu[b-lj1ri9q1vy]  .sous-entree.active::before {
        display: none;
    }

    .page-menu-replie .menu[b-lj1ri9q1vy]  .sous-entree .badge-menu {
        position: static;
    }
}
/* /Layout/PrintLayout.razor.rz.scp.css */
/* Ce qui s'imprime (CAT-020) : à l'écran, posé sur le fond de travail ; sur
   le papier, rien autour. */

.impression[b-vn71bqwgvb] {
    min-height: calc(100vh / var(--zoom));
    padding: var(--marge-contenu);
    background: var(--fond-travail);
    color: var(--texte);
}

@media print {
    .impression[b-vn71bqwgvb] {
        min-height: 0;
        padding: 0;
        background: none;
    }
}
/* /Layout/SettingsShell.razor.rz.scp.css */
/*
 * Le gabarit « réglages » (charte v2 §3.6) : le sous-menu à gauche, sur 232 px
 * qui ne suivent pas la largeur que chacun donne au menu principal (UI-105) ;
 * le contenu à droite, en cartes. Une seule colonne sur un écran étroit : sur
 * un téléphone le sous-menu passe au-dessus du contenu, où il se lit d'un coup
 * d'œil, plutôt que de voler la moitié de la largeur au formulaire.
 */
.reglages[b-aqu3e6p7d8] {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.sous-menu[b-aqu3e6p7d8] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /*
     * Le sous-menu suit la page : un formulaire de société est long, et
     * remonter chercher « Devis » en haut coûte un aller-retour à chaque fois.
     */
    position: sticky;
    top: var(--marge-fenetre);
}

.sous-menu-groupe[b-aqu3e6p7d8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Le sur-titre d'un thème : petit, en capitales espacées, et qui ne se clique pas. */
.sous-menu-surtitre[b-aqu3e6p7d8] {
    padding: 0 12px;
    color: var(--neutre);
    font-size: var(--taille-etiquette);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@container ecran (max-width: 900px) {
    .reglages[b-aqu3e6p7d8] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sous-menu[b-aqu3e6p7d8] {
        position: static;
    }
}

/* --- Entrées ---
 *
 * « ::deep », pour la même raison que le menu latéral : le CSS de composant
 * n'attribue sa portée qu'aux éléments écrits DANS ce fichier .razor, et le <a>
 * que produit NavLink vient d'un autre composant. Sans ça les entrées restent
 * des liens bleus soulignés — vu à l'écran le 16/09/2026, la leçon était déjà
 * écrite dans NavMenu.razor.css.
 */

.reglages[b-aqu3e6p7d8]  .sous-menu-entree {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 38px;
    padding: 0 12px;
    border-radius: var(--rayon-menu);
    color: var(--texte-courant);
    text-decoration: none;
    font-size: var(--taille-secondaire);
    font-weight: 600;
}

.reglages[b-aqu3e6p7d8]  .sous-menu-entree svg {
    flex-shrink: 0;
    color: var(--texte-libelle);
}

.reglages[b-aqu3e6p7d8]  .sous-menu-entree:hover {
    background-color: var(--bouton-survol);
    color: var(--texte);
}

.reglages[b-aqu3e6p7d8]  .sous-menu-entree.active {
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
    font-weight: 700;
}

.reglages[b-aqu3e6p7d8]  .sous-menu-entree.active svg {
    color: currentColor;
}

.reglages[b-aqu3e6p7d8]  .sous-menu-entree:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/*
 * Le renvoi vers l'écran des applications : un lien qui mène ailleurs, et le
 * dit. Même précision que la règle des entrées, et après elle, sans quoi c'est
 * elle qui l'emporte.
 */
.reglages[b-aqu3e6p7d8]  .sous-menu-renvoi {
    color: var(--accent);
    font-weight: 700;
}

.reglages[b-aqu3e6p7d8]  .sous-menu-renvoi svg {
    color: currentColor;
}

.contenu[b-aqu3e6p7d8] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
    /* Sans ça, un tableau large pousse la grille au lieu de défiler. */
    min-width: 0;
}

.apercu-devis[b-aqu3e6p7d8] {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: var(--ombre-flottante);
}

/* Le nombre de comptes actifs, au bout de l'entrée « Utilisateurs ». */
.sous-menu-compteur[b-aqu3e6p7d8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
    color: var(--texte-compteur);
    font-size: var(--taille-etiquette);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* /Layout/ShellPanelHost.razor.rz.scp.css */
/* Le tiroir d'un module, à droite de l'écran (IA-010, charte v2 §2.21). */

/* Au-dessus de 1024 px : une colonne de la page, qui pousse l'écran plutôt
   que de le couvrir — on lit la fiche et la réponse côte à côte. Il cède la
   place quand elle manque : l'écran d'à côté garde toujours
   --largeur-ecran-min (règle dans MainLayout, IA-018). */
.tiroir[b-z47gwk7x2l] {
    position: relative;
    display: flex;
    flex: 0 1 auto;
    box-sizing: border-box;
    width: var(--largeur-tiroir-courante, var(--largeur-tiroir));
    min-width: 0;
    height: calc(100vh / var(--zoom));
    border-left: 1px solid var(--bordure);
    background-color: var(--surface);
}

.tiroir-contenu[b-z47gwk7x2l] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* La poignée, posée sur le bord gauche : une cible confortable, invisible au
   repos, qui se montre au survol et au clavier. */
.tiroir-poignee[b-z47gwk7x2l] {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: calc(var(--largeur-poignee-tiroir) / -2);
    width: var(--largeur-poignee-tiroir);
    cursor: col-resize;
    touch-action: none;
}

.tiroir-poignee:hover[b-z47gwk7x2l],
.tiroir-poignee:focus-visible[b-z47gwk7x2l] {
    background-color: var(--accent-doux);
}

.tiroir-glissement[b-z47gwk7x2l] {
    position: fixed;
    z-index: 30;
    inset: 0;
    cursor: col-resize;
    touch-action: none;
}

/* Le voile n'existe que sous le seuil : au-dessus, le tiroir est une colonne
   et il n'y a rien à couvrir. */
.tiroir-voile[b-z47gwk7x2l] {
    display: none;
}

/* --- Sous 1024 px : le tiroir passe par-dessus l'écran ---
 *
 * Comme le menu : jamais plus de 85 % de l'écran, pour que le voile qu'on
 * touche pour le refermer reste à portée du doigt (charte v2 §2.19).
 */
@container ecran (max-width: 1023.98px) {

    .tiroir[b-z47gwk7x2l] {
        position: fixed;
        z-index: 40;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(var(--largeur-tiroir-courante, var(--largeur-tiroir)), 85vw / var(--zoom));
        height: auto;
        box-shadow: var(--ombre-fenetre);
    }

    .tiroir-poignee[b-z47gwk7x2l] {
        display: none;
    }

    .tiroir-voile[b-z47gwk7x2l] {
        position: fixed;
        z-index: 35;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: none;
        background-color: var(--voile);
        cursor: pointer;
    }
}
/* /Modules/Assistant/Components/AssistantPanel.razor.rz.scp.css */
/* L'assistant IA dans le tiroir de droite (IA-010, charte v2 §2.21).
   Toutes les classes portent le préfixe « assistant- » : les classes
   globales d'app.css (« .note », « .ligne »…) ne doivent rien y dessiner. */

.assistant[b-pxfxvfb55o] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background-color: var(--surface);
}

.assistant-entete[b-pxfxvfb55o] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-champs);
    padding: var(--marge-encart-haut) var(--marge-encart);
    border-bottom: 1px solid var(--filet);
}

.assistant-titre[b-pxfxvfb55o] {
    display: flex;
    align-items: center;
    gap: var(--espace-champs);
    margin: 0;
    color: var(--texte);
    font-size: var(--taille-titre-section);
    font-weight: 700;
}

.assistant-actions[b-pxfxvfb55o] {
    display: flex;
    align-items: center;
    gap: var(--espace-champs);
}

.assistant-attente[b-pxfxvfb55o],
.assistant-promesse[b-pxfxvfb55o],
.assistant-invite[b-pxfxvfb55o] {
    margin: 0;
    padding: var(--marge-encart-haut) var(--marge-encart) 0;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

.assistant-promesse[b-pxfxvfb55o] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 2px;
}

.assistant-qui[b-pxfxvfb55o] {
    color: var(--texte-libelle);
    font-weight: 600;
}

.assistant-corps[b-pxfxvfb55o] {
    padding: var(--marge-encart-haut) var(--marge-encart) 0;
}

/* Le fil : seul ce qui défile, le reste du tiroir reste en place. */
.assistant-fil[b-pxfxvfb55o] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--marge-encart-haut);
    min-height: 0;
    padding: var(--marge-encart);
    overflow-y: auto;
}

.assistant-message[b-pxfxvfb55o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
}

.assistant-auteur[b-pxfxvfb55o] {
    color: var(--texte-libelle);
    font-size: var(--taille-etiquette);
    font-weight: 700;
}

.assistant-vous .assistant-question[b-pxfxvfb55o] {
    margin: 0;
    padding: var(--marge-encart-haut) var(--marge-encart);
    border-radius: var(--rayon-encart);
    background-color: var(--surface-douce);
    color: var(--texte);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.assistant-ia[b-pxfxvfb55o]  .assistant-texte {
    color: var(--texte);
    overflow-wrap: anywhere;
}

.assistant-ia[b-pxfxvfb55o]  .assistant-texte p {
    margin: 0 0 var(--espace-champs);
}

.assistant-ia[b-pxfxvfb55o]  .assistant-texte pre {
    overflow-x: auto;
    padding: var(--marge-encart-haut);
    border-radius: var(--rayon-champ);
    background-color: var(--surface-douce);
}

.assistant-ia[b-pxfxvfb55o]  .assistant-texte table {
    border-collapse: collapse;
}

.assistant-ia[b-pxfxvfb55o]  .assistant-texte th,
.assistant-ia[b-pxfxvfb55o]  .assistant-texte td {
    padding: 4px var(--espace-champs);
    border: 1px solid var(--filet);
}

.assistant-ecrit[b-pxfxvfb55o],
.assistant-arretee[b-pxfxvfb55o] {
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    font-style: italic;
}

/* L'état vide (charte §2.13) : ce qui se passera, et le geste qui y mène. */
.assistant-vide-zone[b-pxfxvfb55o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espace-champs);
    margin: var(--marge-encart);
    padding: var(--marge-carte);
    border: 2px dashed var(--pointille);
    border-radius: var(--rayon-encart);
    color: var(--texte-attenue);
    text-align: center;
}

.assistant-vide-titre[b-pxfxvfb55o] {
    margin: 0;
    color: var(--texte);
    font-weight: 700;
}

.assistant-vide-texte[b-pxfxvfb55o] {
    margin: 0;
    font-size: var(--taille-aide);
}

.assistant-saisie[b-pxfxvfb55o] {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    gap: var(--espace-champs);
    padding: var(--marge-encart-haut) var(--marge-encart);
    border-top: 1px solid var(--filet);
}

.assistant-zone[b-pxfxvfb55o] {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    resize: none;
}

.assistant-mention[b-pxfxvfb55o] {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 var(--marge-encart) var(--marge-encart-haut);
    color: var(--texte-attenue);
    font-size: var(--taille-etiquette);
}
/* /Modules/Assistant/Pages/AssistantSettingsPage.razor.rz.scp.css */
/* Les réglages de l'assistant IA (IA-010). Préfixées « assistant-reglage- » :
   aucune classe globale d'app.css ne doit y dessiner quoi que ce soit. */

.assistant-reglage-nom[b-zqtc0w9c0s] {
    display: block;
    color: var(--texte);
    font-weight: 700;
}

.assistant-reglage-sous[b-zqtc0w9c0s] {
    display: block;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

.assistant-reglage-ligne[b-zqtc0w9c0s] {
    margin: 0;
    color: var(--texte-courant);
    font-size: var(--taille-aide);
}
/* /Modules/Logiciel/Components/ArtifactUpload.razor.rz.scp.css */
/*
 * La fenêtre de dépôt d'un fichier (LOG-002). La zone suit l'état vide de la
 * charte v2 (§2.13) : pointillé, contenu centré, une phrase et son aide. Le
 * champ de fichier la couvre entière, invisible : un fichier lâché dessus ou
 * un clic la choisissent pareil.
 */

.zone-depot[b-7ecuikc7zb] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px;
    border: 2px dashed var(--pointille);
    border-radius: var(--rayon-surface);
    background-color: var(--surface);
    color: var(--texte-attenue);
    text-align: center;
    cursor: pointer;
}

.zone-depot:hover[b-7ecuikc7zb],
.zone-depot:focus-within[b-7ecuikc7zb] {
    border-color: var(--accent);
}

.zone-depot:focus-within[b-7ecuikc7zb] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.zone-depot strong[b-7ecuikc7zb] {
    color: var(--texte);
}

.zone-depot-choisie[b-7ecuikc7zb] {
    border-style: solid;
    border-color: var(--accent);
    background-color: var(--accent-doux);
}

.zone-depot-nom[b-7ecuikc7zb] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le champ couvre la zone : c'est lui qui reçoit le clic et le fichier lâché. */
.zone-depot[b-7ecuikc7zb]  .zone-depot-champ {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.rangee-choix[b-7ecuikc7zb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-champs);
}

@container ecran (max-width: 700px) {
    .rangee-choix[b-7ecuikc7zb] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Barre de progression de la charte §2.16 : 6 px, légende chiffrée dessous. */
.progression[b-7ecuikc7zb] {
    height: 6px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
}

.progression span[b-7ecuikc7zb] {
    display: block;
    height: 100%;
    border-radius: var(--rayon-pastille);
    background-color: var(--accent);
}
/* /Modules/Logiciel/Components/SoftwareIdentity.razor.rz.scp.css */
/*
 * La colonne d'identité des listes du module — le motif de la liste des
 * contacts (charte v2 §2.9), dont seules les cellules sont habillées ici.
 */

.identite[b-pd0hf7imeh] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.identite-texte[b-pd0hf7imeh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.identite-nom[b-pd0hf7imeh] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 700;
    color: var(--texte);
}

.identite-nom .lien-fiche[b-pd0hf7imeh] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identite-detail[b-pd0hf7imeh] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Modules/Logiciel/Components/SoftwareReleaseTable.razor.rz.scp.css */
/*
 * Le tableau des versions (charte v2 §2.9). Une valeur de cellule tient sur une
 * ligne et se coupe par des points de suspension : la hauteur d'une ligne ne
 * change pas (charte v2 §6.2). Le tableau le fait pour ses cellules simples ;
 * un gabarit écrit ici le demande lui-même.
 */

.ligne-unique[b-dmewaxmaz4] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Modules/Logiciel/Pages/SoftwareProducts.razor.rz.scp.css */
/*
 * La liste des produits et des composants (charte v2 §3.1). Le tableau, son
 * pied, les bandeaux et la barre de sélection viennent de leurs composants ;
 * la colonne d'identité, de SoftwareIdentity.
 */

/* La dernière version publiée, et sa date dessous. */
.derniere[b-1jq52q6bk1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.numero[b-1jq52q6bk1] {
    font-weight: 700;
    color: var(--texte);
    font-variant-numeric: tabular-nums;
}

.derniere-date[b-1jq52q6bk1] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    white-space: nowrap;
}
/* /Modules/Logiciel/Pages/SoftwareProductSheet.razor.rz.scp.css */
/*
 * La fiche d'un produit ou d'un composant — gabarit « fiche » de la charte v2
 * (§3.2). La colonne, le rail, les actions rapides et la zone privée viennent
 * des classes communes des fiches (app.css) ; seules les valeurs de la
 * présentation s'habillent ici.
 */

.description[b-7t5oez75dw] {
    margin: 0 0 var(--espace-champs);
    color: var(--texte-courant);
    white-space: pre-wrap;
}

/* Le libellé à gauche, la valeur à droite, en deux colonnes. */
.valeurs[b-7t5oez75dw] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 24px;
    margin: 0;
}

.valeurs dt[b-7t5oez75dw] {
    color: var(--texte-libelle);
}

.valeurs dd[b-7t5oez75dw] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--texte);
    font-weight: 600;
}

/*
 * L'emplacement sur le réseau (LOG-026) : un chemin à copier, jamais un lien.
 * Il se coupe n'importe où plutôt que de déborder, et se sélectionne d'un coup
 * quand le navigateur refuse de le copier.
 */
.emplacement[b-7t5oez75dw] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    min-width: 0;
}

.emplacement-chemin[b-7t5oez75dw] {
    overflow-wrap: anywhere;
    user-select: all;
}

/* Le dessin d'un lien d'action, sans en être un : copier ne change rien, et un
   collègue en lecture seule le voit aussi. */
.emplacement-copier[b-7t5oez75dw] {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: var(--taille-libelle);
    font-weight: 700;
    cursor: pointer;
}

.emplacement-copier:hover[b-7t5oez75dw] {
    text-decoration: underline;
}

/*
 * La fenêtre de modification au dessin v2 (charte §2.11, LOG-025) : des
 * cartes blanches sur le fond gris des pages, jusqu'aux bords de la fenêtre,
 * et les champs courts deux par ligne.
 */
.edition[b-7t5oez75dw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: -12px calc(-1 * var(--marge-fenetre));
    padding: var(--marge-fenetre);
    background-color: var(--fond-travail);
}

.edition-grille[b-7t5oez75dw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px var(--espace-blocs);
}

/* Les champs longs — description, technologies, emplacement — sur toute la largeur. */
.edition-grille[b-7t5oez75dw]  .edition-large {
    grid-column: 1 / -1;
}

.edition-refus[b-7t5oez75dw] {
    margin: 0;
    color: var(--rouge);
    font-size: var(--taille-secondaire);
    font-weight: 600;
}

@container ecran (max-width: 700px) {
    .edition-grille[b-7t5oez75dw] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Modules/Logiciel/Pages/SoftwarePublishingSettings.razor.rz.scp.css */
/* Les réglages du module : ce que le stockage de l'installation dit de lui. */

.valeurs[b-omnxur70x0] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 24px;
    margin: 0 0 var(--espace-champs);
}

.valeurs dt[b-omnxur70x0] {
    color: var(--texte-libelle);
}

.valeurs dd[b-omnxur70x0] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--texte);
    font-weight: 600;
}

/* Un chemin ou une adresse : sélectionnable d'un geste, pour le copier. */
.emplacement[b-omnxur70x0] {
    user-select: all;
}

/* L'interrupteur, et ce qu'il allume écrit à côté (charte v2 §2.17). */
.interrupteur-ligne[b-omnxur70x0] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--texte);
    font-weight: 600;
}

/* Une cellule de l'aperçu tient sur une ligne (charte v2 §6.2). */
.ligne-unique[b-omnxur70x0] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Modules/Logiciel/Pages/SoftwareVersionSheet.razor.rz.scp.css */
/*
 * La fiche d'une version — gabarit « fiche » de la charte v2 (§3.2). La
 * colonne, le rail et la zone privée viennent des classes communes des fiches
 * (app.css) ; seules les cellules des fichiers et la liste des dépendances
 * s'habillent ici.
 */

/* Une valeur de cellule tient sur une ligne (charte v2 §6.2). */
.ligne-unique[b-vhnfjpyxeb] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le fichier : son nom, et dessous son type et sa cible. */
.fichier[b-vhnfjpyxeb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fichier-nom[b-vhnfjpyxeb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--texte);
    font-weight: 700;
}

.fichier-detail[b-vhnfjpyxeb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* L'empreinte abrégée : ses deux bouts, l'entière en infobulle. */
.empreinte-courte[b-vhnfjpyxeb] {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: var(--taille-aide);
    color: var(--texte-attenue);
}

.etats[b-vhnfjpyxeb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Les dépendances : la cible et sa règle, ce qu'elle retient, la version retenue. */
.dependances[b-vhnfjpyxeb] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dependance[b-vhnfjpyxeb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--filet);
}

.dependance:first-child[b-vhnfjpyxeb] {
    border-top: 0;
    padding-top: 0;
}

.dependance-texte[b-vhnfjpyxeb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dependance-cible[b-vhnfjpyxeb] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-weight: 700;
}

.dependance-regle[b-vhnfjpyxeb] {
    color: var(--texte-courant);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dependance-sens[b-vhnfjpyxeb] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

.dependance-retenue[b-vhnfjpyxeb] {
    color: var(--texte);
    font-weight: 600;
    white-space: nowrap;
}

.notes-client[b-vhnfjpyxeb] {
    margin: 0;
    color: var(--texte-courant);
    white-space: pre-wrap;
}

/*
 * La fenêtre des notes au dessin v2 (charte §2.11, LOG-025) : la carte des
 * notes de version et la zone privée des notes techniques sur le fond gris
 * des pages, jusqu'aux bords de la fenêtre. Le même dessin que la fenêtre de
 * la fiche d'un produit.
 */
.edition[b-vhnfjpyxeb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: -12px calc(-1 * var(--marge-fenetre));
    padding: var(--marge-fenetre);
    background-color: var(--fond-travail);
}

.edition-refus[b-vhnfjpyxeb] {
    margin: 0;
    color: var(--rouge);
    font-size: var(--taille-secondaire);
    font-weight: 600;
}
/* /Modules/Projects/Components/CustomerProjectsTab.razor.rz.scp.css */
/* L'onglet Projets de la fiche client (PRJ-004) : une ligne par projet. */

.projets-client[b-dmx5wh15in] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.projets-client li[b-dmx5wh15in] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.projets-client-nom[b-dmx5wh15in] {
    color: var(--texte);
    font-weight: 700;
}

.projets-client-code[b-dmx5wh15in],
.projets-client-dates[b-dmx5wh15in] {
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
}
/* /Modules/Projects/Components/MyProjectsCard.razor.rz.scp.css */
/*
 * La carte Projets du tableau de bord général (PRJ-017, plan v2 §4.4).
 * Uniquement des jetons de la charte v2.
 */

.projets-accueil-lien[b-gks04k2wuc] {
    color: var(--accent);
    font-size: var(--taille-secondaire);
    font-weight: 700;
    text-decoration: none;
}

.projets-accueil-lien:hover[b-gks04k2wuc] {
    color: var(--accent-survol);
    text-decoration: underline;
}

.projets-accueil-perimetre[b-gks04k2wuc] {
    margin: 0;
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
}

.projets-accueil-liste[b-gks04k2wuc] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Une ligne : qui, puis où il en est. Au téléphone, l'avancement passe dessous (flex-wrap). */
.projets-accueil-ligne[b-gks04k2wuc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--filet);
}

.projets-accueil-ligne:last-child[b-gks04k2wuc] {
    border-bottom: 0;
}

/*
 * Côte à côte, le nom prend presque toute la place libre (999 contre 1) et
 * l'avancement garde sa largeur ; passé dessous, l'avancement prend toute sa
 * ligne.
 */
.projets-accueil-identite[b-gks04k2wuc] {
    display: flex;
    flex: 999 1 240px;
    flex-direction: column;
    min-width: 0;
}

.projets-accueil-nom[b-gks04k2wuc] {
    overflow: hidden;
    color: var(--texte);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.projets-accueil-nom:hover[b-gks04k2wuc] {
    color: var(--accent);
    text-decoration: underline;
}

.projets-accueil-precision[b-gks04k2wuc] {
    overflow: hidden;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.projets-accueil-avancement[b-gks04k2wuc] {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 3px;
    min-width: 160px;
}

/* Une jauge de la charte (§2.16) : 6 px, le fond des compteurs, le fait en vert. */
.projets-accueil-jauge[b-gks04k2wuc] {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
}

.projets-accueil-rempli[b-gks04k2wuc] {
    display: block;
    height: 100%;
    background-color: var(--vert);
}

.projets-accueil-etat[b-gks04k2wuc] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    text-align: right;
}

/* La fin dépassée, en ambre comme partout dans le module (P7) : jamais en rouge. */
.projets-accueil-retard[b-gks04k2wuc] {
    color: var(--pastille-ambre-texte);
    font-weight: 700;
}

.projets-accueil-pied[b-gks04k2wuc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--filet);
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
}
/* /Modules/Projects/Components/ProjectBurndown.razor.rz.scp.css */
/* La courbe du reste à faire d'un sprint (PRJ-016, P10) : une série à
   l'accent, le rythme régulier en pointillé. Rien que des jetons. */

.projet-courbe[b-ie5arda5qz] {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 10px;
}

.projet-courbe-grille[b-ie5arda5qz] {
    stroke: var(--filet);
}

.projet-courbe-echelle[b-ie5arda5qz],
.projet-courbe-jour[b-ie5arda5qz] {
    fill: var(--texte-attenue);
    font-size: var(--taille-etiquette);
}

.projet-courbe-aujourdhui[b-ie5arda5qz] {
    fill: var(--accent-fonce);
    font-weight: 800;
}

.projet-courbe-rythme[b-ie5arda5qz] {
    stroke: var(--texte-attenue);
    stroke-dasharray: 4 4;
}

.projet-courbe-reste[b-ie5arda5qz] {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
}

.projet-courbe-point[b-ie5arda5qz] {
    fill: var(--accent);
}

.projet-courbe-legende[b-ie5arda5qz] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
}

.projet-courbe-legende span[b-ie5arda5qz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.projet-courbe-cle[b-ie5arda5qz] {
    display: inline-block;
    width: 14px;
    height: 0;
    border-top: 2px solid var(--accent);
}

.projet-courbe-cle-rythme[b-ie5arda5qz] {
    border-top: 2px dashed var(--texte-attenue);
}
/* /Modules/Projects/Components/ProjectEditor.razor.rz.scp.css */
/* La fenêtre d'un projet (PRJ-004). */

/* Le code attribué en automatique : dit, pas saisi. */
.projet-code-auto[b-iemngzc4ze] {
    margin: 0;
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
}

.projet-code-auto strong[b-iemngzc4ze] {
    color: var(--texte);
}
/* /Modules/Projects/Components/ProjectGroupsDialog.razor.rz.scp.css */
/* La fenêtre « Gérer les groupes » (PRJ-013, maquette v2) : une grille de
   lignes — poignée, code, libellé, nombre de tâches, retrait. */

.groupes[b-m74t491hos] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.groupe-ligne[b-m74t491hos] {
    display: grid;
    grid-template-columns: 28px 110px minmax(0, 1fr) 56px 36px;
    gap: 8px 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--filet);
}

.groupe-tete[b-m74t491hos] {
    padding-top: 0;
    border-bottom-color: var(--bordure);
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
}

/* La ligne qu'on glisse se reconnaît, pour savoir où on la pose. */
.groupe-glisse[b-m74t491hos] {
    background-color: var(--surface-douce);
}

.groupe-poignee[b-m74t491hos] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--rayon-champ);
    background: none;
    color: var(--texte-attenue);
    cursor: grab;
}

.groupe-poignee:hover[b-m74t491hos],
.groupe-poignee:focus-visible[b-m74t491hos] {
    background-color: var(--surface-douce);
    color: var(--texte);
}

.groupe-saisie[b-m74t491hos] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--hauteur-champ);
    padding: 0 10px;
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-champ);
    background-color: var(--surface);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--taille-secondaire);
}

.groupe-saisie:focus[b-m74t491hos] {
    border-color: var(--accent);
}

.groupe-saisie[b-m74t491hos]::placeholder {
    color: var(--texte-attenue);
}

.groupe-code[b-m74t491hos] {
    font-weight: 700;
    text-transform: uppercase;
}

.groupe-saisie-erreur[b-m74t491hos] {
    border-color: var(--danger);
    background-color: var(--champ-erreur-fond);
}

.groupe-compte[b-m74t491hos] {
    color: var(--texte-libelle);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* La cause sous sa ligne, sur toute la largeur. */
.groupe-erreur[b-m74t491hos] {
    grid-column: 2 / -1;
    margin: 0;
    color: var(--rouge);
    font-size: var(--taille-aide);
    font-weight: 600;
}

.groupes-pied[b-m74t491hos] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 12px;
}

.groupes-aide[b-m74t491hos] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
}

/* La question avant de retirer un groupe qui a des tâches (P4). */
.groupes-question[b-m74t491hos] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--rayon-champ);
    background-color: var(--pastille-ambre-fond);
    color: var(--pastille-ambre-texte);
    font-size: var(--taille-secondaire);
}

.groupes-question strong[b-m74t491hos] {
    color: var(--texte);
}

.groupes-question-actions[b-m74t491hos] {
    display: inline-flex;
    gap: 8px;
}

.groupes-refus[b-m74t491hos] {
    margin: 0;
    color: var(--rouge);
    font-weight: 600;
}

/* Au téléphone, le libellé passe sous le code. */
@container ecran (max-width: 600px) {
    .groupe-ligne[b-m74t491hos] {
        grid-template-columns: 28px minmax(0, 1fr) 40px 36px;
    }

    .groupe-tete span:nth-child(3)[b-m74t491hos] {
        display: none;
    }

    .groupe-ligne .groupe-saisie:not(.groupe-code)[b-m74t491hos] {
        grid-column: 2 / -1;
        grid-row: 2;
    }
}
/* /Modules/Projects/Components/ProjectLoadChart.razor.rz.scp.css */
/* Le graphe de la charge (PRJ-014, P12) : une barre par personne, la valeur
   au bout, la moyenne en pointillé. Rien que des jetons de la charte. */

.projet-charge-graphe[b-u0qnn9rrb4] {
    margin: 0;
    padding: 4px 0 4px;
    min-width: 0;
}

.projet-charge-graphe figcaption[b-u0qnn9rrb4] {
    display: grid;
    gap: 2px;
}

.projet-charge-graphe figcaption b[b-u0qnn9rrb4] {
    color: var(--texte);
    font-size: var(--taille-secondaire);
}

.projet-charge-graphe figcaption small[b-u0qnn9rrb4] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
}

/* La colonne des noms est commune aux barres, au repère et à l'axe. */
.projet-charge-barres[b-u0qnn9rrb4] {
    --noms: 96px;
    position: relative;
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.projet-charge-ligne[b-u0qnn9rrb4] {
    display: grid;
    grid-template-columns: var(--noms) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.projet-charge-nom[b-u0qnn9rrb4] {
    overflow: hidden;
    color: var(--texte-courant);
    font-size: var(--taille-libelle);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La piste prend le focus : l'infobulle et le contour suivent le clavier. */
.projet-charge-piste[b-u0qnn9rrb4] {
    display: flex;
    align-items: center;
    height: 24px;
    border-radius: var(--rayon-etiquette);
}

.projet-charge-piste i[b-u0qnn9rrb4] {
    display: block;
    height: 14px;
    border-radius: 0 var(--rayon-etiquette) var(--rayon-etiquette) 0;
    background-color: var(--accent);
}

.projet-charge-piste:hover i[b-u0qnn9rrb4],
.projet-charge-piste:focus-visible i[b-u0qnn9rrb4] {
    background-color: var(--accent-fonce);
}

/* Le contour tracé en dedans : la carte coupe ce qui dépasse à droite. */
.projet-charge-piste:focus-visible[b-u0qnn9rrb4] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* La valeur au bout de la barre, sur un fond qui la détache du pointillé. */
.projet-charge-piste span[b-u0qnn9rrb4] {
    position: relative;
    z-index: 1;
    margin-left: 4px;
    padding: 0 4px;
    background-color: var(--surface);
    color: var(--texte);
    font-size: var(--taille-aide);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.projet-charge-piste span small[b-u0qnn9rrb4] {
    color: var(--texte-libelle);
    font-weight: 500;
}

/* La moyenne : un trait pointillé à travers toutes les barres. */
.projet-charge-moyenne[b-u0qnn9rrb4] {
    position: absolute;
    top: -6px;
    bottom: -4px;
    left: calc(var(--noms) + 10px + (100% - var(--noms) - 10px) * var(--x));
    z-index: 0;
    border-left: 1.5px dashed var(--texte-attenue);
    pointer-events: none;
}

.projet-charge-moyenne b[b-u0qnn9rrb4] {
    position: absolute;
    top: -18px;
    left: 0;
    transform: translateX(-50%);
    color: var(--texte-libelle);
    font-size: var(--taille-etiquette);
    font-weight: 600;
    white-space: nowrap;
}

.projet-charge-axe[b-u0qnn9rrb4] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    margin-top: 8px;
}

.projet-charge-axe > div[b-u0qnn9rrb4] {
    position: relative;
    height: 16px;
    border-top: 1px solid var(--filet-fort);
}

.projet-charge-axe > div span[b-u0qnn9rrb4] {
    position: absolute;
    top: 3px;
    transform: translateX(-50%);
    color: var(--texte-attenue);
    font-size: var(--taille-etiquette);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.projet-charge-axe > div span:first-child[b-u0qnn9rrb4] {
    transform: none;
}

.projet-charge-axe > div span:last-child[b-u0qnn9rrb4] {
    transform: translateX(-100%);
}

.projet-charge-vide[b-u0qnn9rrb4] {
    margin: 12px 0 0;
}
/* /Modules/Projects/Components/ProjectOverview.razor.rz.scp.css */
/* L'Aperçu d'un projet, son tableau de bord (PRJ-014, maquette v2). Ses règles
   à elle, rien que des jetons de la charte : celles de la fiche vivent dans
   la fiche, celles du graphe dans le graphe. */

/* --- La rangée de chiffres, au-dessus des deux colonnes --- */

/* Autant de cartes qu'il y a de chiffres à dire : un chiffre qu'on ne peut pas
   calculer ne laisse pas de trou. */
.projet-chiffres[b-2mmi1ecevy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: var(--espace-blocs);
}

.projet-chiffre[b-2mmi1ecevy] {
    min-width: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    background-color: var(--surface);
    box-shadow: var(--ombre-carte);
}

.projet-chiffre-libelle[b-2mmi1ecevy] {
    color: var(--texte-libelle);
    font-size: var(--taille-libelle);
    font-weight: 700;
}

.projet-chiffre-valeur[b-2mmi1ecevy] {
    margin-top: 4px;
    color: var(--texte);
    font-size: var(--taille-chiffre-fort);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.projet-chiffre-valeur small[b-2mmi1ecevy] {
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
    font-weight: 600;
}

.projet-chiffre-detail[b-2mmi1ecevy] {
    margin-top: 2px;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* Un retard, en ambre comme partout dans le module (P7) : jamais en rouge. */
.projet-chiffre-alerte[b-2mmi1ecevy] {
    color: var(--pastille-ambre-texte);
    font-weight: 700;
}

/* Une jauge de la charte (§2.16) : 6 px, le fond des compteurs. */
.projet-chiffre-jauge[b-2mmi1ecevy] {
    display: flex;
    height: 6px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
}

.projet-chiffre-jauge i[b-2mmi1ecevy] {
    display: block;
    height: 100%;
}

.projet-chiffre-jauge-faite[b-2mmi1ecevy] {
    background-color: var(--vert);
}

.projet-chiffre-jauge-passee[b-2mmi1ecevy] {
    background-color: var(--accent);
}

/* --- Les tableaux de la colonne principale --- */

/* Le cadre défile seul au téléphone : la page ne défile jamais de côté. */
.projet-tdb-cadre[b-2mmi1ecevy] {
    max-width: 100%;
    overflow-x: auto;
}

.projet-tdb[b-2mmi1ecevy] {
    width: 100%;
    border-collapse: collapse;
}

.projet-tdb th[b-2mmi1ecevy] {
    height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid var(--bordure);
    background-color: var(--surface-douce);
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.projet-tdb td[b-2mmi1ecevy] {
    height: 46px;
    padding: 0 12px;
    border-bottom: 1px solid var(--filet);
    font-size: var(--taille-secondaire);
}

.projet-tdb tr:last-child td[b-2mmi1ecevy] {
    border-bottom: 0;
}

.projet-tdb .nombre[b-2mmi1ecevy] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* « Sans groupe », « Sans personne » : la ligne de ce qui n'est à personne. */
.projet-tdb-sans td[b-2mmi1ecevy] {
    color: var(--texte-libelle);
    font-style: italic;
}

.projet-tdb-groupe[b-2mmi1ecevy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.projet-tdb-code[b-2mmi1ecevy] {
    padding: 2px 7px;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
    color: var(--texte-compteur);
    font-size: var(--taille-aide);
    font-weight: 700;
    white-space: nowrap;
}

.projet-tdb-nom[b-2mmi1ecevy] {
    color: var(--texte);
    font-weight: 700;
}

.projet-tdb-barre[b-2mmi1ecevy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.projet-tdb-barre small[b-2mmi1ecevy] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.projet-tdb-jauge[b-2mmi1ecevy] {
    position: relative;
    display: inline-block;
    flex: none;
    width: 110px;
    height: 6px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
}

.projet-tdb-jauge i[b-2mmi1ecevy] {
    position: absolute;
    inset: 0 auto 0 0;
    background-color: var(--vert);
}

/* Plus de temps passé que prévu : l'ambre de la charte. */
.projet-tdb-depasse[b-2mmi1ecevy] {
    color: var(--pastille-ambre-texte);
    font-weight: 700;
}

.projet-tdb-personne[b-2mmi1ecevy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.projet-tdb-personne-nom[b-2mmi1ecevy] {
    display: grid;
    line-height: 1.2;
    white-space: nowrap;
}

.projet-tdb-personne-nom span[b-2mmi1ecevy] {
    color: var(--texte);
    font-weight: 700;
}

.projet-tdb-personne-nom small[b-2mmi1ecevy] {
    color: var(--texte-libelle);
    font-size: var(--taille-etiquette);
}

.projet-tdb-vide[b-2mmi1ecevy] {
    margin: 0;
}

/* --- Équipe et charge (P12) --- */

/* Le tableau resserré, puis le graphe, et entre eux un espace franc : un filet,
   puis du blanc (Renald, 12/10/2026). Quand la carte est trop étroite pour les
   deux, le graphe passe dessous, selon la largeur de la carte et non celle de
   l'écran — d'où un retour à la ligne plutôt qu'un seuil (les seuils lisent
   l'écran entier, ZoomTests). Le filet est dessiné au milieu de l'écart par le
   graphe lui-même ; passé à la ligne, il sort du cadre et ne se voit plus. */
.projet-charge-grille[b-2mmi1ecevy] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 48px;
    overflow-x: clip;
}

.projet-charge-tableau[b-2mmi1ecevy] {
    flex: 1.15 1 340px;
    min-width: 0;
}

.projet-charge-cote[b-2mmi1ecevy] {
    position: relative;
    flex: 1 1 300px;
    min-width: 0;
}

.projet-charge-cote[b-2mmi1ecevy]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -24px;
    border-left: 1px solid var(--bordure);
}

/* --- Le rail --- */

.projet-rail-liste[b-2mmi1ecevy] {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Toute la ligne ouvre la tâche : la date, le titre et qui la tient. */
.projet-rail-tache[b-2mmi1ecevy] {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 7px 6px;
    border: 0;
    border-radius: var(--rayon-petit);
    background: none;
    color: var(--texte);
    font: inherit;
    font-size: var(--taille-secondaire);
    text-align: left;
    cursor: pointer;
}

.projet-rail-tache:hover[b-2mmi1ecevy],
.projet-rail-tache:focus-visible[b-2mmi1ecevy] {
    background-color: var(--surface-douce);
}

.projet-rail-quand[b-2mmi1ecevy] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    font-variant-numeric: tabular-nums;
}

.projet-rail-retard[b-2mmi1ecevy] {
    color: var(--pastille-ambre-texte);
    font-weight: 700;
}

.projet-rail-quoi[b-2mmi1ecevy] {
    display: grid;
    min-width: 0;
}

.projet-rail-quoi b[b-2mmi1ecevy] {
    overflow: hidden;
    color: var(--texte);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projet-rail-quoi small[b-2mmi1ecevy] {
    overflow: hidden;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le compte des bloquantes : un drapeau et le nombre, en encre, cerclés d'un
   filet comme le drapeau d'une tâche (P11). */
.projet-rail-bloquantes[b-2mmi1ecevy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--rayon-pastille);
    box-shadow: inset 0 0 0 1.5px var(--texte-courant);
    background-color: var(--surface);
    color: var(--texte);
    font-size: var(--taille-aide);
    font-weight: 700;
}

.projet-rail-retards[b-2mmi1ecevy] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--rayon-pastille);
    background-color: var(--pastille-ambre-fond);
    color: var(--pastille-ambre-texte);
    font-size: var(--taille-aide);
    font-weight: 700;
}

/* L'ancien aperçu, replié en bas du rail. */
.projet-replie > summary[b-2mmi1ecevy] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--texte);
    font-size: var(--taille-titre-section);
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.projet-replie > summary[b-2mmi1ecevy]::-webkit-details-marker {
    display: none;
}

.projet-replie > summary[b-2mmi1ecevy]::after {
    content: "▾";
    margin-left: auto;
    color: var(--texte-libelle);
}

.projet-replie[open] > summary[b-2mmi1ecevy] {
    margin-bottom: var(--espace-champs);
}

.projet-replie[open] > summary[b-2mmi1ecevy]::after {
    content: "▴";
}

.description[b-2mmi1ecevy] {
    margin: 0 0 var(--espace-champs);
    color: var(--texte-courant);
    white-space: pre-wrap;
}

/* Le libellé à gauche, la valeur à droite, en deux colonnes. */
.valeurs[b-2mmi1ecevy] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 16px;
    margin: 0;
}

.valeurs dt[b-2mmi1ecevy] {
    color: var(--texte-libelle);
}

.valeurs dd[b-2mmi1ecevy] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--texte);
    font-weight: 600;
}

/* L'équipe : une personne par ligne, son avatar devant. */
.projet-equipe[b-2mmi1ecevy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.projet-equipe li[b-2mmi1ecevy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* La ligne de création, en bas du rail (charte v2 §3.2). */
.fiche-creation[b-2mmi1ecevy] {
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* --- Le sprint en cours (PRJ-016) --- */

.projet-sprint-tete[b-2mmi1ecevy] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 10px;
    margin-bottom: 4px;
}

.projet-sprint-nom[b-2mmi1ecevy] {
    min-width: 0;
    overflow: hidden;
    color: var(--texte);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projet-sprint-reste[b-2mmi1ecevy] {
    color: var(--texte);
    font-weight: 700;
}

.projet-sprint-note[b-2mmi1ecevy] {
    margin: 8px 0 0;
}
/* /Modules/Projects/Components/ProjectPlanningTab.razor.rz.scp.css */
/* L'onglet Planning d'un projet (PRJ-015) : la barre d'outils, les noms de la
   frise, les tâches sans date et la légende. La frise a ses règles à elle. */

.planning-outils[b-ypiuj6760g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.planning-pas[b-ypiuj6760g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.planning-periode[b-ypiuj6760g],
.planning-lecture[b-ypiuj6760g] {
    margin: 0;
}

.planning-lecture[b-ypiuj6760g] {
    margin-left: auto;
}

.planning-attente[b-ypiuj6760g] {
    margin: 0;
}

/* Les noms de la frise : le code en pastille, le titre qui se coupe. */
.planning-code[b-ypiuj6760g] {
    flex: none;
    padding: 2px 6px;
    border-radius: var(--rayon-etiquette);
    background-color: var(--compteur-fond);
    color: var(--texte-compteur);
    font-size: var(--taille-aide);
    font-weight: 800;
    white-space: nowrap;
}

.planning-titre[b-ypiuj6760g] {
    min-width: 0;
    overflow: hidden;
    color: var(--texte);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-compte[b-ypiuj6760g] {
    flex: none;
    margin-left: auto;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-variant-numeric: tabular-nums;
}

.planning-plier[b-ypiuj6760g] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--rayon-champ);
    background: none;
    color: var(--texte-libelle);
    cursor: pointer;
}

.planning-plier:hover[b-ypiuj6760g],
.planning-plier:focus-visible[b-ypiuj6760g] {
    background-color: var(--surface);
    color: var(--texte);
}

.planning-tache[b-ypiuj6760g] {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: none;
    color: var(--texte-courant);
    font: inherit;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.planning-tache:hover[b-ypiuj6760g] {
    color: var(--texte);
    text-decoration: underline;
}

/* Terminée : barrée et atténuée, comme dans la liste des tâches. */
.planning-tache-fermee[b-ypiuj6760g] {
    color: var(--texte-libelle);
    text-decoration: line-through;
}

.planning-drapeau[b-ypiuj6760g] {
    display: inline-flex;
    flex: none;
    color: var(--texte);
}

/* Les tâches ouvertes sans date, sous la frise. */
.planning-sans-date[b-ypiuj6760g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bordure);
    font-size: var(--taille-secondaire);
}

.planning-sans-date b[b-ypiuj6760g] {
    color: var(--texte);
}

/* La légende : une clé par sorte de marque, aux couleurs de la frise. */
.planning-legende[b-ypiuj6760g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bordure);
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
}

.planning-legende span[b-ypiuj6760g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.planning-cle[b-ypiuj6760g] {
    display: inline-block;
    width: 22px;
    height: 10px;
    border-radius: 3px;
}

/* Les couleurs des pastilles, comme la frise (elle a sa portée, la légende la sienne). */
.frise-afaire[b-ypiuj6760g] {
    background-color: var(--bordure-controle);
}

.frise-encours[b-ypiuj6760g] {
    background-color: var(--accent);
}

.frise-terminee[b-ypiuj6760g] {
    background-color: var(--vert);
}

.planning-cle-retard[b-ypiuj6760g] {
    background-color: var(--surface);
    box-shadow: 0 0 0 2px var(--pastille-ambre-texte);
}

.planning-cle-losange[b-ypiuj6760g] {
    width: 10px;
    border-radius: 2px;
    transform: rotate(45deg);
}

.planning-cle-debut[b-ypiuj6760g] {
    background-color: var(--bordure-controle);
    mask-image: linear-gradient(to right, var(--texte), transparent);
}

.planning-cle-groupe[b-ypiuj6760g] {
    height: 6px;
    background-color: var(--texte-compteur);
}
/* /Modules/Projects/Components/ProjectPortfolio.razor.rz.scp.css */
/* Le planning de tous les projets (PRJ-015) : la barre d'outils, les noms de
   la frise, les projets sans dates et la légende. */

.portefeuille-outils[b-4xrm5d8xp9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.portefeuille-pas[b-4xrm5d8xp9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.portefeuille-periode[b-4xrm5d8xp9],
.portefeuille-lecture[b-4xrm5d8xp9],
.portefeuille-vide[b-4xrm5d8xp9],
.portefeuille-plus[b-4xrm5d8xp9] {
    margin: 0;
}

.portefeuille-lecture[b-4xrm5d8xp9] {
    margin-left: auto;
}

.portefeuille-plus[b-4xrm5d8xp9] {
    margin-top: 12px;
}

.portefeuille-code[b-4xrm5d8xp9] {
    flex: none;
    padding: 2px 6px;
    border-radius: var(--rayon-etiquette);
    background-color: var(--compteur-fond);
    color: var(--texte-compteur);
    font-size: var(--taille-aide);
    font-weight: 800;
    white-space: nowrap;
}

/* Le nom et le client, l'un sous l'autre, coupés s'ils sont longs. */
.portefeuille-deux[b-4xrm5d8xp9] {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.portefeuille-deux a[b-4xrm5d8xp9] {
    overflow: hidden;
    color: var(--texte);
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portefeuille-deux a:hover[b-4xrm5d8xp9] {
    text-decoration: underline;
}

.portefeuille-deux small[b-4xrm5d8xp9] {
    overflow: hidden;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portefeuille-responsable[b-4xrm5d8xp9] {
    display: inline-flex;
    flex: none;
    margin-left: auto;
}

.portefeuille-sans-dates[b-4xrm5d8xp9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bordure);
    font-size: var(--taille-secondaire);
}

.portefeuille-sans-dates b[b-4xrm5d8xp9] {
    color: var(--texte);
}

.portefeuille-legende[b-4xrm5d8xp9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bordure);
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
}

.portefeuille-legende span[b-4xrm5d8xp9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.portefeuille-cle[b-4xrm5d8xp9] {
    display: inline-block;
    width: 22px;
    height: 10px;
    border-radius: 3px;
}

.portefeuille-cle-avancement[b-4xrm5d8xp9] {
    background-color: var(--accent);
}

.portefeuille-cle-retard[b-4xrm5d8xp9] {
    background-color: var(--surface);
    box-shadow: 0 0 0 2px var(--pastille-ambre-texte);
}

.portefeuille-cle-deduite[b-4xrm5d8xp9] {
    border: 2px dashed var(--texte-compteur);
}
/* /Modules/Projects/Components/ProjectProgress.razor.rz.scp.css */
/* L'avancement d'un projet (PRJ-005), charte v2 §2.16 : 6 px, la barre et sa légende. */

.projet-avancement[b-konmql5tnp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.projet-avancement-barre[b-konmql5tnp] {
    display: inline-block;
    flex: 0 0 64px;
    height: 6px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
}

.projet-avancement-rempli[b-konmql5tnp] {
    display: block;
    height: 100%;
    background-color: var(--accent);
}

.projet-avancement-legende[b-konmql5tnp] {
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
    white-space: nowrap;
}
/* /Modules/Projects/Components/ProjectTaskField.razor.rz.scp.css */
/* Le projet, puis son groupe (PRJ-013) : l'un sous l'autre, comme les autres
   réglages du rail de la fiche. */
.projet-groupe[b-fk555fhh0d] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
/* /Modules/Projects/Components/ProjectTasksTab.razor.rz.scp.css */
/* L'onglet Tâches d'un projet (PRJ-005), en tableau depuis le lot 6 (PRJ-012) :
   une ligne par tâche, un en-tête par groupe, comme la maquette v2. */

/* Le cadre défile seul au téléphone : la page ne défile jamais de côté. */
.projet-taches-cadre[b-cm40qhkv7q] {
    max-width: 100%;
    overflow-x: auto;
}

.projet-taches[b-cm40qhkv7q] {
    width: 100%;
    border-collapse: collapse;
}

.projet-taches thead th[b-cm40qhkv7q] {
    height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid var(--bordure);
    background-color: var(--surface-douce);
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.projet-taches td[b-cm40qhkv7q] {
    height: 46px;
    padding: 0 12px;
    border-bottom: 1px solid var(--filet);
    font-size: var(--taille-secondaire);
}

.projet-taches .nombre[b-cm40qhkv7q] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* L'en-tête d'un groupe : son nom et combien il en tient. */
.projet-taches-groupe th[b-cm40qhkv7q] {
    height: 40px;
    padding: 0 12px;
    border-bottom: 1px solid var(--bordure);
    background-color: var(--surface-douce);
    color: var(--texte);
    font-size: var(--taille-secondaire);
    font-weight: 700;
    text-align: left;
}

.projet-taches-compte[b-cm40qhkv7q] {
    margin-left: 6px;
    color: var(--texte-attenue);
    font-weight: 600;
}

/* L'en-tête d'un groupe (PRJ-013, maquette v2) : replier, code, libellé,
   jauge, chiffres, et « + Tâche » poussé à droite. */
.projet-groupe-entete[b-cm40qhkv7q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-height: 40px;
}

.projet-groupe-plier[b-cm40qhkv7q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--rayon-champ);
    background: none;
    color: var(--texte-libelle);
    cursor: pointer;
}

.projet-groupe-plier:hover[b-cm40qhkv7q],
.projet-groupe-plier:focus-visible[b-cm40qhkv7q] {
    background-color: var(--surface);
    color: var(--texte);
}

.projet-groupe-code[b-cm40qhkv7q] {
    padding: 2px 7px;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
    color: var(--texte-compteur);
    font-size: var(--taille-aide);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.projet-groupe-libelle[b-cm40qhkv7q] {
    color: var(--texte);
    font-weight: 700;
}

.projet-groupe-jauge[b-cm40qhkv7q] {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 6px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
}

.projet-groupe-jauge i[b-cm40qhkv7q] {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: var(--rayon-pastille);
    background-color: var(--pastille-vert-texte);
}

.projet-groupe-chiffres[b-cm40qhkv7q] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.projet-groupe-ajouter[b-cm40qhkv7q] {
    margin-left: auto;
}

.projet-tache-cellule[b-cm40qhkv7q] {
    min-width: 220px;
}

.projet-tache-nom[b-cm40qhkv7q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.projet-tache-titre[b-cm40qhkv7q] {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: none;
    color: var(--texte);
    font: inherit;
    font-weight: 700;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

/* Terminée ou annulée : barrée et atténuée, comme dans la liste des tâches. */
.projet-tache-fermee[b-cm40qhkv7q] {
    color: var(--texte-libelle);
    font-weight: 600;
    text-decoration: line-through;
}

.projet-tache-detail[b-cm40qhkv7q] {
    color: var(--texte-libelle);
    white-space: nowrap;
}

/* Une échéance dépassée, en ambre comme partout dans le module (P7). */
.projet-tache-retard[b-cm40qhkv7q] {
    color: var(--pastille-ambre-texte);
    font-weight: 700;
}

.projet-tache-tableau[b-cm40qhkv7q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--taille-aide);
}

/* La case qui choisit les tâches à envoyer dans un tableau (PRJ-006). */
.projet-tache-choix-colonne[b-cm40qhkv7q] {
    width: 36px;
    padding-right: 0;
}

.projet-tache-choix[b-cm40qhkv7q] {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
}
/* /Modules/Projects/Components/ProjectTimeline.razor.rz.scp.css */
/* La frise des plannings (PRJ-015, maquette v2) : une colonne de noms, une
   piste, le quadrillage dessous et les marques dessus. Rien que des jetons. */

/* La frise défile dans son cadre ; la page, jamais. */
.frise-cadre[b-5ujdjo0nm3] {
    max-width: 100%;
    overflow-x: auto;
}

.frise[b-5ujdjo0nm3] {
    --frise-noms: 290px;
    position: relative;
    min-width: 980px;
}

.frise-large[b-5ujdjo0nm3] {
    --frise-noms: 430px;
}

.frise-rang[b-5ujdjo0nm3] {
    display: grid;
    grid-template-columns: var(--frise-noms) minmax(0, 1fr);
    min-height: 38px;
    border-bottom: 1px solid var(--filet);
}

.frise-tete[b-5ujdjo0nm3] {
    min-height: 40px;
    border-bottom: 1px solid var(--bordure);
    background-color: var(--surface-douce);
}

/* Les noms restent à gauche quand la piste défile. */
.frise-nom[b-5ujdjo0nm3] {
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 12px;
    border-right: 1px solid var(--bordure);
    background-color: var(--surface);
    font-size: var(--taille-secondaire);
}

.frise-tete .frise-nom[b-5ujdjo0nm3] {
    background-color: var(--surface-douce);
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
}

.frise-rang-groupe[b-5ujdjo0nm3],
.frise-rang-groupe .frise-nom[b-5ujdjo0nm3] {
    background-color: var(--surface-douce);
}

.frise-rang-tache .frise-nom[b-5ujdjo0nm3] {
    padding-left: 38px;
}

.frise-rang-portefeuille[b-5ujdjo0nm3] {
    min-height: 52px;
}

.frise-piste[b-5ujdjo0nm3] {
    position: relative;
}

/* L'échelle : une case par semaine, mois ou trimestre. */
.frise-echelle span[b-5ujdjo0nm3] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-left: 8px;
    box-sizing: border-box;
    overflow: hidden;
    border-left: 1px solid var(--bordure);
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
    white-space: nowrap;
}

.frise-echelle small[b-5ujdjo0nm3] {
    margin-left: 5px;
    color: var(--texte-attenue);
    font-weight: 600;
}

/* Le quadrillage, sous les marques. */
.frise-quadrillage[b-5ujdjo0nm3] {
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 0;
    left: var(--frise-noms);
    z-index: 1;
    pointer-events: none;
}

.frise-quadrillage i[b-5ujdjo0nm3] {
    position: absolute;
    top: 0;
    bottom: 0;
}

.frise-colonne[b-5ujdjo0nm3] {
    border-left: 1px solid var(--filet);
}

.frise-weekend[b-5ujdjo0nm3] {
    background-color: var(--surface-douce);
}

.frise-aujourdhui[b-5ujdjo0nm3] {
    position: absolute;
    top: -40px;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background-color: var(--accent);
}

.frise-aujourdhui b[b-5ujdjo0nm3] {
    position: absolute;
    top: 2px;
    left: 5px;
    color: var(--accent-fonce);
    font-size: var(--taille-etiquette);
    font-weight: 800;
    white-space: nowrap;
}

/* --- Les marques --- */

/* La largeur d'une marque compte sa bordure : une barre qui finit avec la
   fenêtre ne la dépasse pas. */
.frise-barre[b-5ujdjo0nm3],
.frise-losange[b-5ujdjo0nm3] {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
}

button.frise-barre[b-5ujdjo0nm3],
button.frise-losange[b-5ujdjo0nm3] {
    cursor: pointer;
}

button.frise-barre:focus-visible[b-5ujdjo0nm3],
button.frise-losange:focus-visible[b-5ujdjo0nm3] {
    outline: 2px solid var(--accent-fonce);
    outline-offset: 2px;
}

.frise-barre[b-5ujdjo0nm3] {
    top: 9px;
    height: 20px;
    min-width: 6px;
    overflow: hidden;
    border-radius: var(--rayon-etiquette);
}

button.frise-barre:hover[b-5ujdjo0nm3] {
    box-shadow: var(--ombre-flottante);
}

/* Les couleurs des pastilles de statut. */
.frise-afaire[b-5ujdjo0nm3] {
    background-color: var(--bordure-controle);
}

.frise-encours[b-5ujdjo0nm3] {
    background-color: var(--accent);
}

.frise-terminee[b-5ujdjo0nm3] {
    background-color: var(--vert);
}

/* Le retard, un contour ambre (P7). */
.frise-retard[b-5ujdjo0nm3] {
    box-shadow: 0 0 0 2px var(--pastille-ambre-texte);
}

/* Un début seul : une barre d'un jour qui s'efface vers la droite. */
.frise-unjour[b-5ujdjo0nm3] {
    min-width: 22px;
    mask-image: linear-gradient(to right, var(--texte), transparent);
}

/* Une échéance seule : un losange sur le jour. */
.frise-losange[b-5ujdjo0nm3] {
    top: 12px;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    transform: translateX(-7px) rotate(45deg);
}

/* Un groupe : une barre fine, ses deux bouts en pointe. */
.frise-resume[b-5ujdjo0nm3] {
    top: 14px;
    height: 8px;
    overflow: visible;
    border-radius: 2px;
    background-color: var(--texte-compteur);
}

/* Le projet : sa durée, et son avancement en remplissage. */
.frise-projet[b-5ujdjo0nm3] {
    top: 11px;
    height: 16px;
    border: 1px solid var(--accent);
    background-color: var(--accent-doux);
}

.frise-projet i[b-5ujdjo0nm3],
.frise-portefeuille i[b-5ujdjo0nm3] {
    display: block;
    height: 100%;
    background-color: var(--accent);
}

.frise-portefeuille[b-5ujdjo0nm3] {
    top: 15px;
    height: 22px;
    border: 1px solid var(--accent);
    background-color: var(--accent-doux);
}

.frise-portefeuille b[b-5ujdjo0nm3] {
    position: absolute;
    top: 2px;
    left: 6px;
    padding: 0 4px;
    border-radius: var(--rayon-etiquette);
    background-color: var(--surface);
    color: var(--texte);
    font-size: var(--taille-etiquette);
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}

/* Des dates déduites des tâches : en pointillé. */
.frise-deduite[b-5ujdjo0nm3] {
    border: 2px dashed var(--texte-compteur);
    background-color: transparent;
}

.frise-deduite i[b-5ujdjo0nm3] {
    background-color: var(--compteur-fond);
}

/* Une marque qui déborde de la fenêtre a ses bouts droits de ce côté. */
.frise-coupee-avant[b-5ujdjo0nm3] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.frise-coupee-apres[b-5ujdjo0nm3] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Au téléphone, la colonne des noms se resserre : la piste garde de la place. */
@container ecran (max-width: 720px) {
    .frise[b-5ujdjo0nm3] {
        --frise-noms: 160px;
        min-width: 720px;
    }

    .frise-large[b-5ujdjo0nm3] {
        --frise-noms: 200px;
    }

    .frise-rang-tache .frise-nom[b-5ujdjo0nm3] {
        padding-left: 20px;
    }
}
/* /Modules/Projects/Components/SendToBoardDialog.razor.rz.scp.css */
/* « Quel tableau utiliser ? » (PRJ-006) : les dates du sprint d'un tableau
   neuf, côte à côte (PRJ-016), l'un sous l'autre au téléphone. */

.envoi-sprint[b-4ra9tof20n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@container ecran (max-width: 600px) {
    .envoi-sprint[b-4ra9tof20n] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Modules/Projects/Pages/ProjectList.razor.rz.scp.css */
/* La liste des projets (PRJ-004). */

/* La colonne d'identité : le nom, qui mène à la fiche, et le code dessous. */
.projet-identite[b-qyk2uhrwiy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.projet-nom[b-qyk2uhrwiy] {
    overflow: hidden;
    color: var(--texte);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projet-code[b-qyk2uhrwiy] {
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
}

/* Un filtre venu de l'adresse — le client, les retards —, dans la barre, avec sa croix (charte v2 §2.8). */
.projets-filtre[b-qyk2uhrwiy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--texte);
    font-size: var(--taille-secondaire);
    font-weight: 600;
}

.projets-filtre-retrait[b-qyk2uhrwiy] {
    display: inline-flex;
    padding: 2px;
    border: 0;
    background: none;
    color: var(--texte-libelle);
    cursor: pointer;
}
/* /Modules/Projects/Pages/ProjectSettingsPage.razor.rz.scp.css */
/* Paramètres > Projets (PRJ-003) : les trois choix l'un sous l'autre, les
   jetons à insérer en rangée sous le modèle, et l'aperçu du prochain code. */

.projets-codes[b-26wgfezfdq] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-champs);
    max-width: 520px;
}

.projets-jetons[b-26wgfezfdq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-champs);
}

.projets-apercu[b-26wgfezfdq] {
    margin: 0;
    color: var(--texte-libelle);
    font-size: var(--taille-secondaire);
}

.projets-apercu strong[b-26wgfezfdq] {
    color: var(--texte);
}
/* /Modules/Projects/Pages/ProjectSheet.razor.rz.scp.css */
/* La fiche d'un projet (PRJ-004). Ses règles à elle : celles des autres fiches
   vivent dans leurs composants, et ne franchissent pas leur frontière. */

.meta-personne[b-8xbfifhi3v] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.meta-personne strong[b-8xbfifhi3v] {
    color: var(--texte);
}
/* /Modules/Redaction/Pages/WordProcessing.razor.rz.scp.css */
/* Rédaction (prototype WordCraft) : l'avertissement, puis le cadre, qui prend
   toute la hauteur restante — un traitement de texte se lit page entière. */

.redaction-avertissement[b-jcjwvpyhoy] {
    margin: 0;
}

.redaction-limites[b-jcjwvpyhoy] {
    margin: 4px 0 0;
    padding-left: 20px;
}

/* La hauteur se divise par le zoom de Mon affichage (UI-123), et la bordure
   tient dans la largeur : sans quoi le cadre dépasse de deux pixels. */
.redaction-cadre[b-jcjwvpyhoy] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh / var(--zoom) - 220px);
    min-height: 480px;
    margin-top: var(--espace-blocs);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    background: var(--surface);
}

.redaction-absent[b-jcjwvpyhoy] {
    margin-top: var(--espace-blocs);
    color: var(--texte-courant);
}

.redaction-commandes[b-jcjwvpyhoy] {
    margin: 8px 0 0;
    padding: 12px;
    border-radius: var(--rayon-petit);
    background: var(--surface);
    border: 1px solid var(--bordure);
    overflow-x: auto;
}
/* /Modules/Timesheets/Pages/TimesheetSettingsPage.razor.rz.scp.css */
/* Paramètres > Temps (TPS-003) : les catégories en lignes, chacune avec sa
   pastille de couleur, son nom, son état et ses gestes ; le nuancier s'ouvre
   sous la ligne. Puis la saisie, puis les personnes en tableau. */

.temps-categories[b-btz0dp0kf1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.temps-categorie[b-btz0dp0kf1] {
    display: grid;
    grid-template-columns: var(--hauteur-champ) minmax(160px, 360px) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--filet);
}

.temps-categorie:last-child[b-btz0dp0kf1] {
    border-bottom: none;
}

/* La pastille : la teinte de la charte dans un carré de la hauteur d'un champ. */
.temps-couleur[b-btz0dp0kf1] {
    width: var(--hauteur-champ);
    height: var(--hauteur-champ);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-champ);
    background: var(--surface);
    cursor: pointer;
}

.temps-couleur span[b-btz0dp0kf1] {
    width: 20px;
    height: 20px;
    border-radius: var(--rayon-etiquette);
    background-color: var(--nuance);
}

.temps-couleur[aria-expanded="true"][b-btz0dp0kf1] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-doux);
}

.temps-couleur:disabled[b-btz0dp0kf1] {
    cursor: default;
}

.temps-couleur:focus-visible[b-btz0dp0kf1],
.temps-nom:focus-visible[b-btz0dp0kf1],
.temps-choix:focus-visible[b-btz0dp0kf1],
.temps-jour input:focus-visible[b-btz0dp0kf1] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.temps-nom[b-btz0dp0kf1],
.temps-choix[b-btz0dp0kf1] {
    height: var(--hauteur-champ);
    min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-champ);
    background: var(--surface);
    color: var(--texte);
    font: inherit;
}

.temps-nom[b-btz0dp0kf1] {
    font-weight: 600;
}

.temps-nom:disabled[b-btz0dp0kf1],
.temps-choix:disabled[b-btz0dp0kf1] {
    background: var(--surface-douce);
    color: var(--texte-courant);
}

.temps-compte[b-btz0dp0kf1] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    white-space: nowrap;
}

.temps-archivee .temps-nom[b-btz0dp0kf1] {
    color: var(--texte-libelle);
}

.temps-actions[b-btz0dp0kf1] {
    display: flex;
    gap: 4px;
}

.temps-nuancier[b-btz0dp0kf1] {
    grid-column: 1 / -1;
    padding: 4px 0 6px;
}

.temps-ajout[b-btz0dp0kf1] {
    margin-top: 12px;
}

.temps-saisie[b-btz0dp0kf1] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
    max-width: 560px;
}

.temps-heures[b-btz0dp0kf1] {
    display: flex;
    gap: 12px;
}

.temps-jours[b-btz0dp0kf1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.temps-jours legend[b-btz0dp0kf1] {
    margin-bottom: var(--espace-champs);
}

.temps-jour[b-btz0dp0kf1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--texte);
    cursor: pointer;
}

.temps-interrupteur[b-btz0dp0kf1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--texte);
    font-weight: 600;
}

/* Les personnes : un tableau qui défile de côté sur un écran étroit plutôt
   que d'élargir la page. */
.temps-personnes-cadre[b-btz0dp0kf1] {
    overflow-x: auto;
}

.temps-personnes[b-btz0dp0kf1] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--taille-secondaire);
}

.temps-personnes th[b-btz0dp0kf1],
.temps-personnes td[b-btz0dp0kf1] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--filet);
    text-align: left;
    vertical-align: middle;
}

.temps-personnes thead th[b-btz0dp0kf1] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
    background: var(--surface-douce);
}

.temps-personnes tbody th[b-btz0dp0kf1] {
    color: var(--texte);
    font-weight: 700;
    white-space: nowrap;
}

.temps-jours-personne[b-btz0dp0kf1] {
    display: inline-flex;
    gap: 6px;
}

.temps-jour-court[b-btz0dp0kf1] {
    gap: 3px;
    font-size: var(--taille-aide);
    color: var(--texte-courant);
}

@container ecran (max-width: 768px) {
    .temps-categorie[b-btz0dp0kf1] {
        grid-template-columns: var(--hauteur-champ) minmax(0, 1fr) auto;
    }

    .temps-compte[b-btz0dp0kf1],
    .temps-actions[b-btz0dp0kf1] {
        grid-column: 2 / -1;
    }
}
/* /Pages/Applications.razor.rz.scp.css */
/*
 * Les applications — charte v2, maquette « Applications » (SOC-096).
 *
 * Des cartes sur trois colonnes, deux puis une quand l'écran rétrécit. Une
 * application qui attend son réglage prend toute la largeur, dans les tons
 * d'un bandeau d'attention : c'est la seule qui demande quelque chose.
 */

.applications-intro[b-32eqbwboi7] {
    margin: 0;
    color: var(--texte-libelle);
    line-height: 1.5;
}

.applications-vide[b-32eqbwboi7],
.applications-pied[b-32eqbwboi7] {
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    line-height: 1.6;
}

.applications-grille[b-32eqbwboi7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

@container ecran (max-width: 1279.98px) {
    .applications-grille[b-32eqbwboi7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container ecran (max-width: 767.98px) {
    .applications-grille[b-32eqbwboi7] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Une carte --- */

.application[b-32eqbwboi7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    padding: 18px 20px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    background-color: var(--surface);
}

.application-tete[b-32eqbwboi7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Le carré d'icône : gris éteinte, dans le ton d'accent allumée — la même
   pastille que le titre de l'écran de l'application. */
.application-icone[b-32eqbwboi7] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--hauteur-icone-carte);
    height: var(--hauteur-icone-carte);
    border-radius: var(--rayon-encart);
    background-color: var(--pastille-gris-fond);
    color: var(--pastille-gris-texte);
}

.application-allumee .application-icone[b-32eqbwboi7] {
    background-color: var(--pastille-accent-fond);
    color: var(--pastille-accent-texte);
}

.application-titres[b-32eqbwboi7] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.application-nom[b-32eqbwboi7] {
    margin: 0;
    color: var(--texte);
    font-size: var(--taille-titre-fenetre);
    font-weight: 800;
    line-height: 1.15;
}

.application-chiffres[b-32eqbwboi7] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    font-variant-numeric: tabular-nums;
}

.application-description[b-32eqbwboi7] {
    margin: 0;
    color: var(--texte-libelle);
    font-size: var(--taille-libelle);
    line-height: 1.5;
}

.application-ailleurs[b-32eqbwboi7] {
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    line-height: 1.5;
}

.application-reste[b-32eqbwboi7] {
    margin: 0;
    color: var(--pastille-ambre-texte);
    font-size: var(--taille-aide);
    line-height: 1.5;
}

/* --- Une application à régler avant de s'allumer --- */

.application-a-configurer[b-32eqbwboi7] {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    border-color: var(--attention-bordure);
    background-color: var(--attention-bandeau);
}

.application-a-configurer .application-icone[b-32eqbwboi7] {
    background-color: var(--attention-icone-fond);
    color: var(--ambre);
}

.application-a-configurer .application-description[b-32eqbwboi7] {
    color: var(--attention-bandeau-texte);
}

.application-texte[b-32eqbwboi7] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.application-ligne[b-32eqbwboi7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.application-etat[b-32eqbwboi7] {
    display: inline-flex;
    align-items: center;
    height: var(--hauteur-etiquette);
    padding: 0 9px;
    border-radius: var(--rayon-pastille);
    background-color: var(--attention-icone-fond);
    color: var(--ambre);
    font-size: var(--taille-etiquette);
    font-weight: 700;
}

/* Le bouton plein du bandeau d'attention (§1.5) : il mène là où l'on règle. */
.application-configurer[b-32eqbwboi7] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: var(--hauteur-champ-compact);
    padding: 0 14px;
    border-radius: var(--rayon-champ);
    background-color: var(--ambre);
    color: var(--surface);
    font-size: var(--taille-libelle);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.application-configurer:hover[b-32eqbwboi7] {
    background-color: var(--attention-bandeau-fort);
    color: var(--surface);
}

@container ecran (max-width: 767.98px) {
    .application-a-configurer[b-32eqbwboi7] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/CatalogueLabel.razor.rz.scp.css */
/* L'étiquette prête à imprimer (CAT-020). */

.impression-commandes[b-jh05me1v2u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-champs);
    margin-bottom: var(--espace-blocs);
}

.impression-commandes .note[b-jh05me1v2u] {
    flex-basis: 100%;
    margin: 0;
}

/* À l'écran, à sa taille réelle : 70 mm, ce que l'imprimante sortira. */
.etiquette-imprimee[b-jh05me1v2u] {
    width: 70mm;
}

@media print {
    .impression-commandes[b-jh05me1v2u] {
        display: none;
    }

    /* La page nommée d'app.css : 70 × 37 mm, sans marge. Et l'étiquette sans
       son cadre d'écran — le bord du papier en tient lieu. */
    .etiquette-imprimee[b-jh05me1v2u] {
        page: etiquette;
        width: 70mm;
        height: 37mm;
    }

    .etiquette-imprimee[b-jh05me1v2u]  .etiquette {
        height: 100%;
        border: none;
        border-radius: 0;
    }
}
/* /Pages/CatalogueList.razor.rz.scp.css */
/*
 * Le catalogue — gabarit « liste » de la charte v2 (§3.1, LST-CAT). Seules les
 * cellules écrites par cet écran s'habillent ici ; le tableau, ses colonnes
 * privées, son pied, les onglets, les bandeaux, l'identité et le menu de ligne
 * viennent de leurs composants.
 */

/* La famille : son chemin, sur une ligne. */
.catalogue-famille[b-ugh4y1amsx] {
    display: block;
    overflow: hidden;
    color: var(--texte-courant);
    font-size: var(--taille-secondaire);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* « Classer » : le bouton pointillé de la charte (§2.1), à la hauteur d'une pastille. */
.catalogue-classer[b-ugh4y1amsx] {
    height: var(--hauteur-pastille);
    padding: 0 9px;
    font-size: var(--taille-pastille);
}

/* Une valeur qui manque et ne se remplit pas d'ici : le tiret de la charte (§2.9). */
.catalogue-absent[b-ugh4y1amsx] {
    color: var(--texte-attenue);
}

/* Le prix d'achat : un chiffre de la colonne privée, en chiffres alignés. */
.catalogue-prix[b-ugh4y1amsx] {
    color: var(--texte-courant);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Le prix de vente : le chiffre qu'on vient chercher, un cran au-dessus. */
.catalogue-vente[b-ugh4y1amsx] {
    color: var(--texte);
    font-size: var(--taille-titre-colonne);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Le taux de marque : jaune même quand il est bon — « pour vous seul » (§5). */
.catalogue-marque[b-ugh4y1amsx] {
    display: inline-flex;
    align-items: center;
    height: var(--hauteur-etiquette);
    padding: 0 9px;
    border-radius: var(--rayon-etiquette);
    background-color: var(--prive-fond);
    color: var(--prive-texte);
    font-size: var(--taille-aide);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* « 4 articles n'ont pas de prix d'achat : leur marge reste inconnue. » */
.catalogue-sans-cout[b-ugh4y1amsx] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
}

.catalogue-colonnes[b-ugh4y1amsx] {
    flex-direction: column;
    align-items: flex-start;
}
/* /Pages/CatalogueOrganisation.razor.rz.scp.css */
/*
 * Familles et unités, au gabarit « liste » de la charte v2 (LST-CAT-009).
 * Seules les cellules écrites par cet écran s'habillent ici ; le tableau, les
 * onglets et l'en-tête viennent de leurs composants.
 */

/* Une famille : son nom, en retrait de sa profondeur, et son chemin dessous. */
.famille[b-zvf7pqju7y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-left: calc(var(--profondeur, 0) * 20px);
}

.famille-nom[b-zvf7pqju7y] {
    color: var(--texte);
    font-weight: 700;
}

.famille-chemin[b-zvf7pqju7y] {
    overflow: hidden;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Une unité : son code, et « à vous » quand elle n'est pas de Kofreo. */
.unite[b-zvf7pqju7y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.unite-code[b-zvf7pqju7y] {
    color: var(--texte);
    font-weight: 700;
}

.valeur-absente[b-zvf7pqju7y] {
    color: var(--texte-attenue);
}
/* /Pages/CatalogueSheet.razor.rz.scp.css */
/*
 * La fiche d'un article — gabarit « fiche » de la charte v2 (§3.2, ART). Le
 * rail, la zone privée, les actions rapides et la ligne de création viennent
 * des classes communes des fiches (app.css, UI-091) ; l'en-tête, les onglets,
 * les cartes et les bandeaux de leurs composants.
 */

/* Le visuel de l'en-tête : le carré d'un colis ou d'une clé, à la taille d'un grand avatar (§2.15). */
.article-visuel[b-8soj9w8trr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: var(--rayon-surface);
    background-color: var(--compteur-fond);
    color: var(--texte-compteur);
}

/* La famille dans la ligne de métadonnées : une étiquette qui mène à la liste filtrée. */
.article-famille[b-8soj9w8trr] {
    display: inline-flex;
    align-items: center;
    height: var(--hauteur-etiquette);
    padding: 0 9px;
    border: 1px solid var(--bouton-bordure);
    border-radius: var(--rayon-etiquette);
    color: var(--texte-libelle);
    font-size: var(--taille-etiquette);
    font-weight: 700;
    text-decoration: none;
}

.article-famille:hover[b-8soj9w8trr] {
    border-color: var(--accent);
    color: var(--accent-fonce);
}

/* « Sans famille, classer » : le bouton pointillé, à la hauteur d'une étiquette. */
.article-classer[b-8soj9w8trr] {
    height: var(--hauteur-etiquette);
    padding: 0 9px;
    font-size: var(--taille-etiquette);
}

/* « Hors taxes », à droite du titre de la carte (charte v2 §2.5). */
.article-precision[b-8soj9w8trr] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* --- Prix et marge en tuiles (ART-003) --- */

.article-tuiles[b-8soj9w8trr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.article-tuile[b-8soj9w8trr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--marge-encart-haut) var(--marge-encart);
    border: 1px solid transparent;
    border-radius: var(--rayon-encart);
    background-color: var(--surface-douce);
}

/* La marge et le taux de marque : jaunes même quand ils sont bons (charte v2 §5). */
.article-tuile-privee[b-8soj9w8trr] {
    border-color: var(--prive-bordure);
    background-color: var(--prive-fond);
}

.article-tuile-libelle[b-8soj9w8trr] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 600;
}

.article-tuile-valeur[b-8soj9w8trr] {
    color: var(--texte);
    font-size: var(--taille-chiffre);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.article-tuile-absente[b-8soj9w8trr] {
    color: var(--texte-attenue);
}

.article-tuile-geste[b-8soj9w8trr] {
    min-height: 30px;
}

.article-tuile-aide[b-8soj9w8trr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

.article-tuile-privee .article-tuile-aide[b-8soj9w8trr] {
    color: var(--prive-texte);
}

/* La jauge coût / marge (charte v2 §2.16) : 12 px, et toujours sa légende chiffrée. */
.article-jauge[b-8soj9w8trr] {
    display: flex;
    height: 12px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--compteur-fond);
}

.article-jauge-cout[b-8soj9w8trr] {
    background-color: var(--pointille);
}

.article-jauge-marge[b-8soj9w8trr] {
    background-color: var(--marge);
}

.article-jauge-legende[b-8soj9w8trr] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-variant-numeric: tabular-nums;
}

.article-jauge-legende > span[b-8soj9w8trr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.article-point[b-8soj9w8trr] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--rayon-pastille);
}

.article-point-cout[b-8soj9w8trr] {
    background-color: var(--pointille);
}

.article-point-marge[b-8soj9w8trr] {
    background-color: var(--marge);
}

/* Vendu à perte : c'est une alerte, et elle se dit en toutes lettres (charte v2 §7). */
.article-perte[b-8soj9w8trr] {
    margin: 0;
    color: var(--rouge);
    font-size: var(--taille-secondaire);
    font-weight: 700;
}

/* --- Les fournisseurs (ART-005) --- */

.article-fournisseurs[b-8soj9w8trr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Un encart par fournisseur (charte v2 §2.5) : avatar, nom et détail, tarif, menu. */
.article-fournisseur[b-8soj9w8trr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--marge-encart-haut) var(--marge-encart);
    border-radius: var(--rayon-encart);
    background-color: var(--surface-douce);
}

.article-fournisseur-texte[b-8soj9w8trr] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.article-fournisseur-nom[b-8soj9w8trr] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--texte);
    font-weight: 700;
}

.article-fournisseur-detail[b-8soj9w8trr] {
    overflow: hidden;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-fournisseur-prix[b-8soj9w8trr] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.article-fournisseur-prix strong[b-8soj9w8trr] {
    color: var(--texte);
    font-weight: 800;
}

.article-fournisseur-prix span[b-8soj9w8trr] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* La description en saisie, dans la zone privée du rail. */
.article-description[b-8soj9w8trr] {
    background-color: var(--surface);
}
/* /Pages/ContactList.razor.rz.scp.css */
/*
 * La liste des contacts — gabarit « liste » de la charte v2 (§3.1, CTC-039).
 * Seules les cellules écrites par cet écran s'habillent ici ; le tableau, son
 * pied, les bandeaux et la barre de sélection viennent de leurs composants.
 */

/* La colonne d'identité : avatar, nom, et « Entreprise, Vannes » dessous. */
.identite[b-9k2c0od3hp] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.identite-texte[b-9k2c0od3hp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.identite-nom[b-9k2c0od3hp] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 700;
    color: var(--texte);
}

.identite-nom .lien-fiche[b-9k2c0od3hp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identite-detail[b-9k2c0od3hp] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.roles[b-9k2c0od3hp] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.coordonnees[b-9k2c0od3hp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.coordonnee[b-9k2c0od3hp] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--texte-courant);
}

.coordonnee[b-9k2c0od3hp]  svg {
    flex: 0 0 auto;
    color: var(--texte-attenue);
}

/* Le vide devient une action (charte v2 §4.6). */
.lien-action[b-9k2c0od3hp] {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.lien-action:hover[b-9k2c0od3hp] {
    color: var(--accent-survol);
    text-decoration: underline;
}

.valeur-absente[b-9k2c0od3hp] {
    color: var(--texte-attenue);
}

.colonnes-choix[b-9k2c0od3hp] {
    flex-direction: column;
    align-items: flex-start;
}
/* /Pages/ContactSheet.razor.rz.scp.css */
/*
 * La fiche d'un contact — gabarit « fiche » de la charte v2 (§3.2, CTC-040).
 * L'en-tête, les onglets, les cartes et les bandeaux viennent de leurs
 * composants ; la colonne principale, le rail, la zone privée et les actions
 * rapides sont communs à toutes les fiches (app.css). Ne s'habille ici que ce
 * que la fiche d'un contact écrit elle-même.
 */

/*
 * Le groupe de la facturation électronique (FAC-037), en fin de formulaire :
 * un intertitre, pour que son adresse de facturation ne se lise pas comme la
 * suite de l'adresse électronique qui la précède.
 */
.contact-reforme-titre[b-e0gxeu7hmn] {
    margin: 8px 0 -4px;
    padding-top: 14px;
    border-top: 1px solid var(--filet);
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* L'identité en lecture : deux colonnes de libellé / valeur. */
.fiche-valeurs[b-e0gxeu7hmn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}

/*
 * Le libellé prend sa largeur, sans dépasser 45 % de la colonne (UI-123) : en
 * « auto », « Catégorie pour la facturation électronique » prenait toute la
 * place à 1 024 px utiles, et la valeur se cassait lettre par lettre
 * (« Men / uise / rie »). Le libellé passe à la ligne, la valeur se lit.
 */
.fiche-valeurs dl[b-e0gxeu7hmn] {
    display: grid;
    grid-template-columns: fit-content(45%) minmax(0, 1fr);
    gap: 10px 16px;
    margin: 0;
}

.fiche-valeurs dt[b-e0gxeu7hmn] {
    color: var(--texte-libelle);
}

.fiche-valeurs dd[b-e0gxeu7hmn] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--texte);
    font-weight: 600;
}

@container ecran (max-width: 700px) {
    .fiche-valeurs[b-e0gxeu7hmn] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Le vide devient une action (charte v2 §4.6). */
.lien-action[b-e0gxeu7hmn] {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font-family: var(--police);
    font-size: inherit;
    font-weight: 700;
    cursor: pointer;
}

.lien-action:hover[b-e0gxeu7hmn] {
    color: var(--accent-survol);
    text-decoration: underline;
}

.valeur-absente[b-e0gxeu7hmn] {
    color: var(--texte-attenue);
    font-weight: 400;
}

/* Le bandeau de ce qui manque pour facturer. */
.bandeau-titre[b-e0gxeu7hmn],
.bandeau-aide[b-e0gxeu7hmn] {
    margin: 0 0 6px;
}

.annuaire-rapide[b-e0gxeu7hmn] {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.annuaire-saisie[b-e0gxeu7hmn] {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--hauteur-bouton-compact);
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--bordure-controle);
    border-radius: var(--rayon-champ);
    background-color: var(--surface);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--taille-secondaire);
}

.bandeau-bouton[b-e0gxeu7hmn] {
    height: var(--hauteur-bouton-compact);
    padding: 0 14px;
    border: none;
    border-radius: var(--rayon-champ);
    background-color: var(--ambre);
    color: var(--surface);
    font-family: var(--police);
    font-size: var(--taille-libelle);
    font-weight: 700;
    cursor: pointer;
}

.bandeau-gestes[b-e0gxeu7hmn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.bandeau-geste[b-e0gxeu7hmn] {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--attention-bordure);
    border-radius: var(--rayon-pastille);
    background-color: var(--surface);
    color: var(--ambre);
    font-family: var(--police);
    font-size: var(--taille-libelle);
    font-weight: 700;
    cursor: pointer;
}

/* Les actions rapides : l'icône du titre à l'orange (charte v2 §2.5). */
.actions-rapides[b-e0gxeu7hmn]  .carte-icone {
    color: var(--accent-logo);
}


/* La chronologie (charte v2 §2.14). */
.chronologie[b-e0gxeu7hmn] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chronologie-entree[b-e0gxeu7hmn] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 16px 26px;
}

.chronologie-entree[b-e0gxeu7hmn]::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: var(--rayon-pastille);
    background-color: var(--bordure);
}

.chronologie-entree:not(:last-child)[b-e0gxeu7hmn]::after {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 2px;
    left: 5px;
    width: 2px;
    background-color: var(--filet);
}

.chronologie-recente[b-e0gxeu7hmn]::before {
    border: 3px solid var(--accent);
    background-color: var(--surface);
}

.chronologie-fait[b-e0gxeu7hmn] {
    color: var(--texte);
    font-size: var(--taille-secondaire);
    font-weight: 600;
}

.chronologie-quand[b-e0gxeu7hmn] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* Le cercle cliquable de l'en-tête (CTC-046) : un vrai bouton, pour le
   clavier, sans rien de l'allure d'un bouton — la pastille suffit. */
.avatar-bouton[b-e0gxeu7hmn] {
    display: inline-flex;
    padding: 0;
    border: none;
    border-radius: var(--rayon-surface);
    background: none;
    cursor: pointer;
}

.avatar-bouton:hover[b-e0gxeu7hmn] {
    opacity: 0.85;
}

.photo-contact[b-e0gxeu7hmn] {
    align-items: flex-start;
}

[b-e0gxeu7hmn] .fichier {
    font-size: var(--taille);
    color: var(--texte);
}
/* /Pages/Dashboard.razor.rz.scp.css */
/*
 * Le tableau de bord, gabarit v2 (charte v2 §3.4).
 *
 * Uniquement des jetons de kofreo-tokens.css, aucune valeur de couleur écrite
 * ici : la charte v2 remplace les jetons un par un (UI-085), et cet écran doit
 * la suivre sans qu'on y revienne.
 */

/* --- En-tête : salutation à gauche, période et action principale à droite --- */

.tdb-entete[b-rc0llxnf65] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    /* Pas de marge basse : la zone de contenu espace déjà ses blocs (MainLayout). */
    gap: var(--espace-blocs);
}

.tdb-salut[b-rc0llxnf65] {
    min-width: 0;
}

.tdb-date[b-rc0llxnf65] {
    margin: 4px 0 0;
    font-size: var(--taille-secondaire);
    color: var(--texte-attenue);
}

.tdb-commandes[b-rc0llxnf65] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Sélecteur segmenté (charte v2 §2.7). */
.segment[b-rc0llxnf65] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--rayon-menu);
    background-color: var(--pastille-gris-fond);
}

.segment-bouton[b-rc0llxnf65] {
    height: calc(var(--hauteur-bouton) - 2px);
    padding: 0 12px;
    border: none;
    border-radius: var(--rayon-champ);
    background: transparent;
    color: var(--pastille-gris-texte);
    font: inherit;
    font-size: var(--taille-secondaire);
    font-weight: 600;
    cursor: pointer;
}

.segment-bouton[aria-pressed="true"][b-rc0llxnf65] {
    background-color: var(--surface);
    color: var(--texte);
    font-weight: 700;
    box-shadow: var(--ombre-flottante);
}

.segment-bouton:focus-visible[b-rc0llxnf65] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Grille : colonne principale et rail --- */

.tdb-grille[b-rc0llxnf65] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: var(--espace-blocs);
}

.tdb-principal[b-rc0llxnf65],
.tdb-rail[b-rc0llxnf65] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
    min-width: 0;
}

.tdb-paire[b-rc0llxnf65] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-blocs);
}

@container ecran (max-width: 1180px) {
    .tdb-grille[b-rc0llxnf65] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container ecran (max-width: 760px) {
    .tdb-paire[b-rc0llxnf65] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.precision[b-rc0llxnf65] {
    font-size: var(--taille-secondaire);
    color: var(--texte-attenue);
}

.lien-carte[b-rc0llxnf65] {
    font-size: var(--taille-secondaire);
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}

.lien-carte:hover[b-rc0llxnf65] {
    text-decoration: underline;
}

.vide[b-rc0llxnf65] {
    color: var(--texte-attenue);
    font-weight: 400;
}

/* Les chiffres s'alignent en colonne (charte v2 §1.6). */
.ca-heros[b-rc0llxnf65],
.ca-details dd[b-rc0llxnf65],
.enc-montant strong[b-rc0llxnf65],
.jauge-legende strong[b-rc0llxnf65],
.tdb-client-montant[b-rc0llxnf65],
.tdb-client-part[b-rc0llxnf65],
.etape-nombre[b-rc0llxnf65],
.etape-montant[b-rc0llxnf65],
.barre-valeur[b-rc0llxnf65] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Chiffre d'affaires --- */

.ca[b-rc0llxnf65] {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 28px;
}

@container ecran (max-width: 760px) {
    .ca[b-rc0llxnf65] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ca-heros[b-rc0llxnf65] {
    margin: 0;
    font-size: calc(var(--taille-chiffre-fort) * 1.5);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--texte);
}

.ca-sous[b-rc0llxnf65] {
    margin: 6px 0 0;
    font-size: var(--taille-secondaire);
    color: var(--texte-attenue);
}

.ca-details[b-rc0llxnf65] {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--bordure);
}

.ca-details div[b-rc0llxnf65] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: var(--taille-secondaire);
}

.ca-details dt[b-rc0llxnf65] {
    color: var(--texte-attenue);
}

.ca-details dd[b-rc0llxnf65] {
    margin: 0;
    font-weight: 700;
    color: var(--texte);
}

.ca-graphique[b-rc0llxnf65] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
}

.graphique-legende[b-rc0llxnf65] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--taille-secondaire);
    color: var(--texte-attenue);
}

.legende-cles[b-rc0llxnf65] {
    display: inline-flex;
    gap: 12px;
}

.cle[b-rc0llxnf65] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cle[b-rc0llxnf65]::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.cle-facture[b-rc0llxnf65]::before {
    background-color: var(--accent);
}

.cle-a-venir[b-rc0llxnf65]::before {
    border: 1px dashed var(--bordure-controle);
}

.barres[b-rc0llxnf65] {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 190px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.barre-colonne[b-rc0llxnf65] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.barre-valeur[b-rc0llxnf65] {
    height: 18px;
    font-size: var(--taille-pastille);
    font-weight: 700;
    color: var(--texte);
}

/* La piste porte la hauteur ; la barre s'y pose par le bas. */
.barre-piste[b-rc0llxnf65] {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    box-sizing: border-box;
    width: 100%;
    max-width: 34px;
    border-bottom: 1px solid var(--bordure);
}

.barre[b-rc0llxnf65] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    border-radius: 4px 4px 0 0;
    background-color: var(--pastille-accent-fond);
}

.barre-colonne.courante .barre[b-rc0llxnf65] {
    background-color: var(--accent);
}

/* À venir : un emplacement, pas un zéro. */
.barre-colonne.a-venir .barre[b-rc0llxnf65] {
    border: 1px dashed var(--bordure-controle);
    border-bottom: none;
    background: transparent;
}

.barre-etiquette[b-rc0llxnf65] {
    height: 18px;
    margin-top: 6px;
    overflow: hidden;
    font-size: var(--taille-pastille);
    color: var(--texte-attenue);
    white-space: nowrap;
}

.barre-colonne.courante .barre-etiquette[b-rc0llxnf65] {
    font-weight: 700;
    color: var(--texte);
}

/* --- Argent à encaisser --- */

.enc-montant[b-rc0llxnf65] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
}

.enc-montant strong[b-rc0llxnf65] {
    font-size: var(--taille-chiffre-fort);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--texte);
}

.jauge[b-rc0llxnf65] {
    display: flex;
    height: 10px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--pastille-gris-fond);
}

.jauge-delais[b-rc0llxnf65] {
    background-color: var(--vert);
}

.jauge-retard[b-rc0llxnf65] {
    background-color: var(--rouge);
}

.jauge-legende[b-rc0llxnf65] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--taille-secondaire);
    color: var(--texte-attenue);
}

.jauge-legende li[b-rc0llxnf65] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jauge-legende strong[b-rc0llxnf65] {
    color: var(--texte);
}

.point[b-rc0llxnf65] {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--rayon-pastille);
    background-color: var(--pastille-gris-texte);
}

.point-delais[b-rc0llxnf65],
.point-accepte[b-rc0llxnf65] {
    background-color: var(--vert);
}

.point-retard[b-rc0llxnf65] {
    background-color: var(--rouge);
}

.point-attente[b-rc0llxnf65] {
    background-color: var(--accent);
}

.point-neutre[b-rc0llxnf65],
.point-brouillon[b-rc0llxnf65] {
    background-color: var(--bordure-controle);
}

.enc-action[b-rc0llxnf65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 12px;
    border-radius: var(--rayon-surface);
    background-color: var(--fond-travail);
    font-size: var(--taille-secondaire);
}

.enc-action p[b-rc0llxnf65] {
    margin: 0;
}

/* --- Principaux tdb-clients --- */

.tdb-clients[b-rc0llxnf65] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tdb-client[b-rc0llxnf65] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Avatar d'entreprise : carré arrondi, couleur d'accent de la société (charte v2 §2.15). */
.monogramme[b-rc0llxnf65] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--rayon-surface);
    background-color: var(--accent-logo);
    color: var(--surface);
    font-size: var(--taille-pastille);
    font-weight: 800;
}

.tdb-client-corps[b-rc0llxnf65] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tdb-client-ligne[b-rc0llxnf65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tdb-client-nom[b-rc0llxnf65] {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tdb-client-montant[b-rc0llxnf65] {
    font-weight: 700;
    color: var(--texte);
}

.part[b-rc0llxnf65] {
    flex: 1 1 auto;
    height: 6px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--pastille-gris-fond);
}

.part-remplie[b-rc0llxnf65] {
    display: block;
    height: 100%;
    background-color: var(--accent);
}

.tdb-client-part[b-rc0llxnf65] {
    font-size: var(--taille-pastille);
    color: var(--texte-attenue);
}

/* --- Rail : actions rapides, devis en cours --- */

.raccourcis[b-rc0llxnf65] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Le bouton remplit la ligne : une liste de gestes, pas une rangée. */
.raccourcis[b-rc0llxnf65]  .bouton {
    justify-content: flex-start;
    width: 100%;
}

.etapes[b-rc0llxnf65] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--taille-secondaire);
}

.etapes li[b-rc0llxnf65] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
}

.etape-nombre[b-rc0llxnf65] {
    min-width: 2ch;
    font-weight: 700;
    text-align: right;
    color: var(--texte);
}

.etape-montant[b-rc0llxnf65] {
    min-width: 11ch;
    text-align: right;
    color: var(--texte-attenue);
}

.etapes-commentaire[b-rc0llxnf65] {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--bordure);
    font-size: var(--taille-secondaire);
    color: var(--texte-attenue);
}

/* --- « Ce qui vous attend » (SOC-069, charte v2 §3.4) ---
 * Deux colonnes d'alertes ; chacune son carré d'icône à la couleur de sa
 * gravité, un fait, une précision, un verbe.
 */

.alertes[b-rc0llxnf65] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.alerte[b-rc0llxnf65] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: var(--marge-encart-haut) var(--marge-encart);
    border-radius: var(--rayon-encart);
    background-color: var(--surface-douce);
}

.alerte-icone[b-rc0llxnf65] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--rayon-petit);
}

.alerte-danger .alerte-icone[b-rc0llxnf65] {
    background-color: var(--danger-icone-fond);
    color: var(--rouge);
}

.alerte-attention .alerte-icone[b-rc0llxnf65] {
    background-color: var(--attention-icone-fond);
    color: var(--ambre);
}

.alerte-texte[b-rc0llxnf65] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.alerte-texte strong[b-rc0llxnf65] {
    color: var(--texte);
    font-size: var(--taille-secondaire);
    font-weight: 800;
}

.alerte-detail[b-rc0llxnf65] {
    overflow: hidden;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alertes-rien[b-rc0llxnf65] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--pastille-vert-texte);
    font-weight: 700;
}

.alertes-reglage[b-rc0llxnf65] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@container ecran (max-width: 900px) {
    .alertes[b-rc0llxnf65] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/DemonstrationSettings.razor.rz.scp.css */
/*
 * La société de démonstration (ONB-003), dans les paramètres : ce qu'elle est,
 * où elle en est, et ses boutons.
 */

.demonstration-intro[b-jtho30hh55] {
    margin: 0 0 var(--espace-champs);
    color: var(--texte);
}

.demonstration-etat[b-jtho30hh55] {
    margin: var(--espace-champs) 0 0;
    font-weight: 600;
}

.demonstration-actions[b-jtho30hh55] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--espace-blocs);
}
/* /Pages/InvoiceList.razor.rz.scp.css */
/*
 * La liste des factures — gabarit « liste » de la charte v2 (§3.1, LST-FAC).
 * Seules les cellules écrites par cet écran s'habillent ici ; le tableau, son
 * pied, les onglets, les bandeaux, la colonne d'identité et la barre de
 * sélection viennent de leurs composants.
 */

/* L'émission, puis l'échéance en toutes lettres (LST-FAC-004). */
.dates-facture[b-5ov36edgqa] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: nowrap;
}

.echeance[b-5ov36edgqa] {
    color: var(--texte-courant);
    font-size: var(--taille-secondaire);
}

.echeance-retard[b-5ov36edgqa] {
    color: var(--rouge);
    font-weight: 700;
}

/* Le reste dû : la pastille du règlement, puis le montant (LST-FAC-002). */
.reste-du[b-5ov36edgqa] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

/*
 * Un montant de ligne : le chiffre qu'on vient chercher, un cran au-dessus du
 * texte de la ligne, comme sur la liste des devis.
 */
.montant[b-5ov36edgqa] {
    color: var(--texte);
    font-size: var(--taille-titre-colonne);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.valeur-absente[b-5ov36edgqa] {
    color: var(--texte-attenue);
}

/* « Facturé 2 880,00 € · Reste dû 1 880,00 € », à droite du pied (LST-FAC-005). */
.totaux-affiches[b-5ov36edgqa] {
    display: inline-flex;
    align-items: baseline;
    gap: 18px;
    color: var(--texte-libelle);
    white-space: nowrap;
}

.totaux-affiches strong[b-5ov36edgqa] {
    margin-left: 6px;
    color: var(--texte);
    font-size: var(--taille-titre-colonne);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* L'avoir, la facture qu'il corrige (LST-FAC-006) : un lien du ton du détail. */
.facture-corrigee[b-5ov36edgqa] {
    color: inherit;
    text-decoration: none;
}

.facture-corrigee:hover[b-5ov36edgqa] {
    color: var(--accent);
    text-decoration: underline;
}
/* /Pages/InvoiceSheet.razor.rz.scp.css */
/*
 * La fiche d'une facture — gabarit « document » de la charte v2 (§3.3, FAC-001
 * à 013). L'en-tête, les onglets, les cartes, les bandeaux et le tableau des
 * lignes viennent de leurs composants ; la colonne principale, le rail, la
 * zone privée et les envois sont communs à toutes les fiches (app.css). Ne
 * s'habille ici que ce que la fiche d'une facture écrit elle-même — la carte
 * document reprend celle du devis.
 */

/* --- L'en-tête --- */

/* L'icône du document, dans son carré de 56 px (charte v2 §3.2). */
.document-icone[b-1v9n1x3yac] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--rayon-surface);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
}

.meta-lien[b-1v9n1x3yac] {
    color: var(--texte);
    font-weight: 700;
    text-decoration: none;
}

.meta-lien:hover[b-1v9n1x3yac] {
    color: var(--accent);
}

/* Les initiales du client, en petit carré orange, devant son nom. */
.meta-avatar[b-1v9n1x3yac] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background-color: var(--accent-logo);
    color: var(--surface);
    font-size: var(--taille-marqueur);
    font-weight: 800;
}

/* --- La carte document (charte v2 §3.3) --- */

/*
 * En deux cartes depuis le 30/09/2026 : l'en-tête, puis les lignes et les
 * totaux, séparés par l'écart qui sépare deux cartes (charte §4). Dans un
 * seul cadre, un simple filet les séparait, et Renald les trouvait trop collés
 * pour se lire d'un coup d'œil.
 */
.document[b-1v9n1x3yac] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
}

.document-entete[b-1v9n1x3yac] {
    padding: 18px 22px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    background-color: var(--surface-douce);
}

/* Les lignes, les totaux et les mentions : la seconde carte. */
.document-corps[b-1v9n1x3yac] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    background-color: var(--surface);
}

/*
 * L'en-tête en rangées de deux blocs, un bloc par type d'information (Renald,
 * le 30/09/2026) : « Facturé à » et la livraison, puis les dates et le
 * règlement, puis la remise, la nature et la référence. Chaque bloc prend une
 * moitié et la partage en deux colonnes (.document-champs) : d'une rangée à
 * l'autre, les champs tombent sur les mêmes colonnes. Avant, le client et sa
 * livraison s'empilaient à gauche, tous les champs à droite, et la livraison
 * se lisait en face de la remise.
 */
.facture-rangee[b-1v9n1x3yac] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 32px;
}

.facture-rangee + .facture-rangee[b-1v9n1x3yac] {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--filet);
}

.facture-bloc[b-1v9n1x3yac] {
    min-width: 0;
}

.document-bloc-titre[b-1v9n1x3yac] {
    display: block;
    margin-bottom: 8px;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.facture-adresse[b-1v9n1x3yac] {
    margin: 0;
    color: var(--texte-courant);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.facture-adresse strong[b-1v9n1x3yac] {
    color: var(--texte);
}

/*
 * La livraison (FAC-037), en face de « Facturé à » : le nom, la rue et le
 * complément sur toute la largeur du bloc, le code postal et la ville côte à
 * côte, dans les mêmes colonnes que les champs des rangées suivantes.
 */
.facture-livraison[b-1v9n1x3yac]  .champ-plein,
.facture-livraison > .champ-aide[b-1v9n1x3yac] {
    grid-column: 1 / -1;
}

/* La mention d'une exonération (CTC-012), sur toute la largeur de son bloc. */
.document-champs[b-1v9n1x3yac]  .champ-plein {
    grid-column: 1 / -1;
}

.facture-livraison > .champ-aide[b-1v9n1x3yac] {
    margin: 0;
}

.facture-fige[b-1v9n1x3yac] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

.document-champs[b-1v9n1x3yac] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 18px;
}

.document-valeurs[b-1v9n1x3yac] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 0;
}

.document-valeurs div[b-1v9n1x3yac] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.document-valeurs dt[b-1v9n1x3yac] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
}

.document-valeurs dd[b-1v9n1x3yac] {
    margin: 0;
    color: var(--texte);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Le titre des lignes, son compteur et ses commandes. */
.document-lignes-entete[b-1v9n1x3yac] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 22px 12px;
}

.document-lignes-entete h2[b-1v9n1x3yac] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--taille-titre-section);
    font-weight: 800;
}

.document-lignes-entete h2[b-1v9n1x3yac]  svg {
    color: var(--accent);
}

.document-lignes-commandes[b-1v9n1x3yac] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* « Depuis le catalogue » : le bouton teinté, mis en avant (DEV-007). */
.bouton-teinte[b-1v9n1x3yac] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--hauteur-bouton-compact);
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--accent);
    border-radius: var(--rayon-champ);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
    font-family: var(--police);
    font-size: var(--taille-libelle);
    font-weight: 700;
    cursor: pointer;
}

.bouton-teinte:hover[b-1v9n1x3yac] {
    background-color: var(--surface);
}

/* Le pied : « Ajouter une ligne » à gauche, les totaux à droite. */
.document-pied[b-1v9n1x3yac] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 22px 16px;
}

.document-totaux[b-1v9n1x3yac] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
    min-width: 260px;
    margin: 0 0 0 auto;
    font-size: var(--taille-secondaire);
    font-variant-numeric: tabular-nums;
}

.document-totaux dt[b-1v9n1x3yac] {
    color: var(--texte-libelle);
}

.document-totaux dd[b-1v9n1x3yac] {
    margin: 0;
    color: var(--texte);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* Un filet au-dessus du total TTC (charte v2 §3.3). */
.document-totaux .document-total-ttc[b-1v9n1x3yac] {
    padding-top: 8px;
    border-top: 1px solid var(--bordure);
    color: var(--texte);
    font-size: var(--taille-titre-colonne);
    font-weight: 800;
}

.document-totaux dd.document-total-ttc[b-1v9n1x3yac] {
    font-size: var(--taille-titre-section);
}

/* Le reste dû, sous ce qui est déjà réglé : le chiffre qu'on vient chercher (FAC-004). */
.document-totaux .document-reste-du[b-1v9n1x3yac] {
    color: var(--pastille-ambre-texte);
    font-weight: 800;
}

/* Les mentions imprimées sous les totaux, en texte affirmatif (FAC-005). */
.document-mentions[b-1v9n1x3yac] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--filet);
}

.document-mentions-titre[b-1v9n1x3yac] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
}

.document-mention[b-1v9n1x3yac] {
    margin: 0;
    color: var(--texte-courant);
    font-size: var(--taille-libelle);
    white-space: pre-wrap;
}

.document-mention-seule[b-1v9n1x3yac] {
    padding: 0 22px 12px;
}

/* --- L'encaissement (FAC-006) --- */

.encaissement[b-1v9n1x3yac] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.encaissement-barre[b-1v9n1x3yac] {
    height: 8px;
    overflow: hidden;
    border-radius: var(--rayon-pastille);
    background-color: var(--surface-douce);
}

.encaissement-rempli[b-1v9n1x3yac] {
    display: block;
    height: 100%;
    border-radius: var(--rayon-pastille);
    background-color: var(--vert);
}

.encaissement-texte[b-1v9n1x3yac] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-variant-numeric: tabular-nums;
}

.reglements[b-1v9n1x3yac] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--filet);
    border-radius: var(--rayon-encart);
    list-style: none;
}

.reglement[b-1v9n1x3yac],
.rail-reglement[b-1v9n1x3yac] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.reglement + .reglement[b-1v9n1x3yac] {
    border-top: 1px solid var(--filet);
}

.rail-reglement[b-1v9n1x3yac] {
    margin-bottom: 8px;
    border: 1px solid var(--filet);
    border-radius: var(--rayon-encart);
}

/* Un règlement annulé reste, barré : la paire se lit avec sa contre-écriture (FAC-004). */
.reglement-annule .reglement-montant[b-1v9n1x3yac] {
    color: var(--texte-attenue);
    text-decoration: line-through;
}

.reglement-icone[b-1v9n1x3yac] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--rayon-petit);
    background-color: var(--pastille-vert-fond);
    color: var(--pastille-vert-texte);
}

.reglement-texte[b-1v9n1x3yac] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.reglement-montant[b-1v9n1x3yac] {
    color: var(--texte);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.reglement-detail[b-1v9n1x3yac] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/* --- Envoi et archive (FAC-007) --- */

/* Les phrases types de la fenêtre d'envoi (FAC-033) : un groupe comme le
   nuancier des paramètres, sa légende au-dessus, les phrases en pointillé
   dessous, prises d'un clic. */
.envoi-phrases[b-1v9n1x3yac] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-champs);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.envoi-phrases-choix[b-1v9n1x3yac] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* « Jamais envoyée depuis Kofreo » : un fait à connaître, pas une alerte. */
.rail-avis[b-1v9n1x3yac] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--attention-bordure);
    border-radius: var(--rayon-encart);
    background-color: var(--attention-bandeau);
    color: var(--attention-bandeau-texte);
    font-size: var(--taille-aide);
}

.rail-archive[b-1v9n1x3yac] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--filet);
    border-radius: var(--rayon-encart);
    color: var(--texte-libelle);
}

.rail-archive-texte[b-1v9n1x3yac] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rail-archive-titre[b-1v9n1x3yac] {
    color: var(--texte);
    font-weight: 700;
}

.empreinte-courte[b-1v9n1x3yac] {
    overflow: hidden;
    font-size: var(--taille-aide);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-privee-saisie[b-1v9n1x3yac] {
    background-color: var(--surface);
}

/* --- Les règles de la facture électronique qu'une émission enfreint (FAC-038) --- */

/*
 * Sous le message du refus, une règle par ligne : ce qui ne va pas, ce qu'il faut
 * corriger, puis le code officiel, en plus discret. Bornée en hauteur : la zone
 * d'état de la fenêtre ne rétrécit pas, et dix règles pousseraient le formulaire
 * hors de l'écran.
 */
.refus-regles[b-1v9n1x3yac] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(40vh / var(--zoom));
    margin: var(--espace-champs) 0 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.refus-regle[b-1v9n1x3yac] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: var(--rayon-champ);
    background-color: var(--pastille-rouge-fond);
    font-size: var(--taille);
    line-height: 1.45;
}

.refus-regle-message[b-1v9n1x3yac] {
    color: var(--pastille-rouge-texte);
}

.refus-regle-correction[b-1v9n1x3yac] {
    color: var(--texte);
}

.refus-regle-code[b-1v9n1x3yac] {
    color: var(--texte-attenue);
    font-size: var(--taille-libelle);
}

/* --- L'aperçu du PDF --- */

.apercu-pdf[b-1v9n1x3yac] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(70vh / var(--zoom));
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-encart);
    background-color: var(--surface-douce);
}

@container ecran (max-width: 900px) {
    .facture-rangee[b-1v9n1x3yac],
    .document-champs[b-1v9n1x3yac],
    .document-valeurs[b-1v9n1x3yac] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/NoteList.razor.rz.scp.css */
/*
 * Les échanges au dessin v2 (SOC-090, maquette « Échanges — proposition »).
 * Le journal à gauche, les dossiers concernés à droite ; les cartes des
 * échanges, le sélecteur de dossier et la fiche ont leur propre feuille.
 */

/* --- La recherche de l'en-tête (ECH-010) ---
 *
 * Le champ de recherche ordinaire (« recherche », app.css), à la hauteur de
 * l'en-tête, avec sa loupe posée dedans comme sur la maquette. C'est le champ
 * qui porte le cadre et le contour de focus, pas l'étiquette autour.
 */

.echanges-recherche[b-z1f5j30p41] {
    position: relative;
    display: flex;
    align-items: center;
    width: 300px;
    max-width: 100%;
    color: var(--texte-attenue);
}

.echanges-recherche[b-z1f5j30p41]  svg {
    position: absolute;
    left: 12px;
    pointer-events: none;
}

.echanges-recherche .recherche[b-z1f5j30p41] {
    width: 100%;
    min-width: 0;
    height: var(--hauteur-entete);
    padding-left: 36px;
    box-sizing: border-box;
}

/* --- La grille : le journal, et le rail des dossiers --- */

.echanges-grille[b-z1f5j30p41] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

.echanges-principale[b-z1f5j30p41] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
    min-width: 0;
}

@container ecran (max-width: 1100px) {
    .echanges-grille[b-z1f5j30p41] {
        grid-template-columns: minmax(0, 1fr);
    }

    .echanges-rail[b-z1f5j30p41] {
        position: static;
    }
}

/* --- La zone de saisie (ECH-001) --- */

.echanges-saisie[b-z1f5j30p41] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    background-color: var(--surface);
}

.echanges-saisie:focus-within[b-z1f5j30p41] {
    border-color: var(--accent);
}

.echanges-saisie-haut[b-z1f5j30p41] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* La zone de texte se fond dans la carte, qui porte le cadre et prend
   l'accent au focus : un second cadre dans le premier ferait formulaire. */
.echanges-saisie-texte[b-z1f5j30p41] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 58px;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: var(--texte);
    font: inherit;
    font-size: var(--taille);
    line-height: 1.5;
    resize: vertical;
}

.echanges-saisie-manquante[b-z1f5j30p41] {
    background-color: var(--champ-erreur-fond);
}

.echanges-saisie-erreur[b-z1f5j30p41] {
    margin: 0;
    color: var(--rouge);
    font-size: var(--taille-aide);
    font-weight: 600;
}

/* Sur une ligne étroite, le bouton principal passe dessous plutôt que
   d'écraser « Rattacher à un dossier » sur trois lignes. */
.echanges-saisie-pied[b-z1f5j30p41] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--filet);
}

.echanges-saisie-pied[b-z1f5j30p41]  .dossier-choix {
    flex: 1 1 auto;
}

.echanges-saisie-pied[b-z1f5j30p41]  .bouton-principal {
    flex-shrink: 0;
    margin-left: auto;
}

/* --- Les onglets (ECH-005) --- */

.echanges-onglets[b-z1f5j30p41] {
    border-bottom: 1px solid var(--filet-fort);
}

/* Les onglets passent à la ligne plutôt que de défiler : une barre de
   défilement sous sept onglets cache le dernier, qui est « Non rattachés » —
   celui qu'on vient justement chercher (ECH-004). */
.echanges-onglets[b-z1f5j30p41]  .onglets {
    flex-wrap: wrap;
    overflow-x: visible;
}

/* --- Les filtres actifs et le décompte (TRV-006) --- */

.echanges-filtres-actifs[b-z1f5j30p41] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--texte-libelle);
    font-size: var(--taille-libelle);
}

.echanges-filtre[b-z1f5j30p41] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--hauteur-bouton-compact);
    padding: 0 6px 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--accent);
    border-radius: var(--rayon-pastille);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
    font-weight: 700;
}

.echanges-filtre-retrait[b-z1f5j30p41] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--rayon-pastille);
    background: none;
    color: inherit;
    cursor: pointer;
}

.echanges-filtre-retrait:hover[b-z1f5j30p41] {
    background-color: var(--surface);
}

.echanges-decompte[b-z1f5j30p41] {
    margin-left: auto;
}

.echanges-decompte strong[b-z1f5j30p41] {
    color: var(--texte);
}

/* --- L'état vide (charte §2.13) --- */

.echanges-vide[b-z1f5j30p41] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px;
    border: 2px dashed var(--pointille);
    border-radius: var(--rayon-encart);
    color: var(--texte-attenue);
    text-align: center;
}

.echanges-vide-titre[b-z1f5j30p41] {
    margin: 0;
    color: var(--texte);
    font-size: var(--taille);
    font-weight: 700;
}

.echanges-vide-texte[b-z1f5j30p41] {
    max-width: 60ch;
    margin: 0;
    color: var(--texte-libelle);
    font-size: var(--taille-libelle);
}

/* --- Le journal, jour par jour (ECH-002, charte §2.14) --- */

.echanges-jour[b-z1f5j30p41] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Le jour, et un filet qui court jusqu'au bord. */
.echanges-jour-titre[b-z1f5j30p41] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--texte-libelle);
    font-size: var(--taille-libelle);
    font-weight: 700;
}

.echanges-jour-titre[b-z1f5j30p41]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--filet-fort);
}

/* L'heure en marge, la puce, la carte ; le fil vertical relie les puces. */
.echanges-fil[b-z1f5j30p41] {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.echanges-fil[b-z1f5j30p41]::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 82px;
    width: 2px;
    background-color: var(--filet-fort);
}

.echanges-entree[b-z1f5j30p41] {
    display: flex;
    gap: 16px;
    padding: 6px 0;
}

.echanges-heure[b-z1f5j30p41] {
    flex-shrink: 0;
    width: 58px;
    padding-top: 14px;
    color: var(--texte-courant);
    font-size: var(--taille-libelle);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.echanges-puce[b-z1f5j30p41] {
    position: relative;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin: 15px 3px 0;
    box-sizing: border-box;
    border: 3px solid var(--icone-pale);
    border-radius: var(--rayon-pastille);
    background-color: var(--surface);
}

/* Le plus récent porte l'accent (charte §2.14). */
.echanges-puce-recente[b-z1f5j30p41] {
    border-color: var(--accent);
}

.echanges-entree[b-z1f5j30p41]  .echange {
    flex: 1 1 auto;
}

.echanges-suite[b-z1f5j30p41] {
    display: flex;
    justify-content: center;
    padding-left: 92px;
}

.echanges-fin[b-z1f5j30p41] {
    margin: 0;
    padding-left: 92px;
    color: var(--texte-attenue);
    font-size: var(--taille-libelle);
}

/* --- Les dossiers concernés (ECH-006) --- */

/* Le rail reste sous les yeux pendant qu'on fait défiler le journal, juste
   sous l'en-tête qui colle lui aussi (UI-053). */
.echanges-rail[b-z1f5j30p41] {
    position: sticky;
    top: calc(var(--hauteur-entete) + var(--espace-blocs));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--marge-carte-rail-haut) var(--marge-carte-rail) var(--marge-carte-rail);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    background-color: var(--surface);
}

.echanges-rail-titre[b-z1f5j30p41] {
    margin: 0;
    font-size: var(--taille-titre-section);
    font-weight: 800;
}

.echanges-rail-vide[b-z1f5j30p41] {
    margin: 0;
    color: var(--texte-attenue);
    font-size: var(--taille-libelle);
}

.echanges-dossiers[b-z1f5j30p41] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.echanges-dossier[b-z1f5j30p41] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--rayon-menu);
    background: none;
    color: var(--texte);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.echanges-dossier:hover[b-z1f5j30p41],
.echanges-dossier-choisi[b-z1f5j30p41] {
    background-color: var(--surface-douce);
}

.echanges-dossier-choisi .echanges-dossier-nom[b-z1f5j30p41] {
    color: var(--accent-fonce);
}

.echanges-dossier-icone[b-z1f5j30p41] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--rayon-petit);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
}

.echanges-dossier-icone-a-classer[b-z1f5j30p41] {
    background-color: var(--attention-bandeau);
    color: var(--ambre);
}

.echanges-dossier-texte[b-z1f5j30p41] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.echanges-dossier-nom[b-z1f5j30p41] {
    overflow: hidden;
    font-size: var(--taille-secondaire);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.echanges-dossier-nature[b-z1f5j30p41] {
    color: var(--texte-attenue);
    font-size: var(--taille-pastille);
}

.echanges-dossier-compte[b-z1f5j30p41] {
    flex-shrink: 0;
    color: var(--texte-compteur);
    font-size: var(--taille-pastille);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.echanges-rail-note[b-z1f5j30p41] {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--filet);
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    line-height: 1.5;
}

/* Sur un téléphone, l'heure et la puce se serrent pour laisser la carte lire. */
@container ecran (max-width: 600px) {
    .echanges-recherche[b-z1f5j30p41] {
        width: 100%;
    }

    .echanges-heure[b-z1f5j30p41] {
        width: 40px;
    }

    .echanges-entree[b-z1f5j30p41] {
        gap: 10px;
    }

    .echanges-fil[b-z1f5j30p41]::before {
        left: 58px;
    }

    .echanges-suite[b-z1f5j30p41],
    .echanges-fin[b-z1f5j30p41] {
        padding-left: 0;
    }
}
/* /Pages/Prospecting.razor.rz.scp.css */
/*
 * La prospection — gabarit « liste » de la charte v2 (§3.1). Seules les
 * cellules écrites par cet écran s'habillent ici ; le tableau, son pied, les
 * onglets, les bandeaux, l'identité et le menu de ligne viennent de leurs
 * composants.
 */

/* Une date de la ligne : secondaire, en chiffres alignés, sur une ligne. */
.prospect-date[b-lgo7d617my] {
    color: var(--texte-courant);
    font-size: var(--taille-secondaire);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* L'effacement qui approche (dans les trente jours, au sens du serveur). */
.prospect-date-proche[b-lgo7d617my] {
    color: var(--pastille-ambre-texte);
    font-weight: 700;
}

/* « Dernière purge le … : rien n'avait expiré. Voir le journal » — à droite du pied. */
.prospect-purge[b-lgo7d617my] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
}
/* /Pages/QuoteList.razor.rz.scp.css */
/*
 * La liste des devis — gabarit « liste » de la charte v2 (§3.1, LST-DEV).
 * Seules les cellules écrites par cet écran s'habillent ici ; le tableau, son
 * pied, les onglets, les bandeaux et la barre de sélection viennent de leurs
 * composants.
 */

/* La colonne d'identité : avatar, numéro et marqueurs, puis client · objet. */
.identite[b-oagea55reu] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.identite-texte[b-oagea55reu] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.identite-nom[b-oagea55reu] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 700;
    color: var(--texte);
}

.identite-nom .lien-fiche[b-oagea55reu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* « Non numéroté » (LST-DEV-004) : en retrait, pour ne pas passer pour un numéro. */
.identite-nom .devis-sans-numero[b-oagea55reu] {
    color: var(--texte-attenue);
    font-weight: 400;
    font-style: italic;
}

.identite-detail[b-oagea55reu] {
    overflow: hidden;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lien-client[b-oagea55reu] {
    color: inherit;
    text-decoration: none;
}

.lien-client:hover[b-oagea55reu] {
    color: var(--accent);
    text-decoration: underline;
}

/* L'émission, puis la validité en toutes lettres (LST-DEV-008). */
.dates[b-oagea55reu] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: nowrap;
}

.validite[b-oagea55reu] {
    color: var(--texte-courant);
    font-size: var(--taille-secondaire);
}

.validite-proche[b-oagea55reu] {
    color: var(--pastille-ambre-texte);
    font-weight: 700;
}

.validite-passee[b-oagea55reu] {
    color: var(--rouge);
    font-weight: 700;
}

.validite-sans-objet[b-oagea55reu] {
    color: var(--texte-attenue);
}

/*
 * Le total d'une ligne : le chiffre qu'on vient chercher, un cran au-dessus du
 * texte de la ligne (15 px, la taille des titres de colonne).
 */
.montant[b-oagea55reu] {
    color: var(--texte);
    font-size: var(--taille-titre-colonne);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* « Total affiché 110,07 € », à droite du pied (LST-DEV-009). */
.total-affiche[b-oagea55reu] {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--texte-libelle);
    white-space: nowrap;
}

.total-affiche strong[b-oagea55reu] {
    color: var(--texte);
    font-size: var(--taille-titre-colonne);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Le « … » d'une ligne, sans cadre (maquette) : une commande discrète, pas un bouton de l'écran. */
.ligne-menu[b-oagea55reu]  .bouton {
    border-color: transparent;
    background-color: transparent;
}

.ligne-menu[b-oagea55reu]  .bouton:hover:not(:disabled) {
    background-color: var(--surface-douce);
}

.colonnes-choix[b-oagea55reu] {
    flex-direction: column;
    align-items: flex-start;
}

/* Lu par un lecteur d'écran, invisible à l'œil : « Sans objet » derrière le tiret. */
.lecteur-seul[b-oagea55reu] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* /Pages/QuoteSheet.razor.rz.scp.css */
/*
 * La fiche d'un devis — gabarit « document » de la charte v2 (§3.3, DEV-001 à
 * DEV-019). L'en-tête, les onglets, le bandeau d'étapes, les cartes et les
 * bandeaux viennent de leurs composants ; la colonne principale, le rail, la
 * zone privée et les actions rapides sont communs à toutes les fiches
 * (app.css). Ne s'habille ici que ce que la fiche d'un devis écrit elle-même.
 */

/* --- L'en-tête --- */

/* L'icône du document, dans son carré de 56 px (charte v2 §3.2). */
.document-icone[b-nhuhlywuqo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--rayon-surface);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
}

.meta-lien[b-nhuhlywuqo] {
    color: var(--texte);
    font-weight: 700;
    text-decoration: none;
}

.meta-lien:hover[b-nhuhlywuqo] {
    color: var(--accent);
}

/* Les initiales du client, en petit carré orange, devant son nom. */
.meta-avatar[b-nhuhlywuqo] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background-color: var(--accent-logo);
    color: var(--surface);
    font-size: var(--taille-marqueur);
    font-weight: 800;
}

.meta-objet[b-nhuhlywuqo] {
    max-width: 40ch;
    overflow: hidden;
    color: var(--texte-courant);
    font-style: italic;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Le chiffre clé : le total TTC, toujours visible (DEV-003). */
.chiffre-cle[b-nhuhlywuqo] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-right: 6px;
}

.chiffre-cle-libelle[b-nhuhlywuqo] {
    color: var(--texte-attenue);
    font-size: var(--taille-pastille);
}

.chiffre-cle-valeur[b-nhuhlywuqo] {
    color: var(--texte);
    font-size: var(--taille-chiffre);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Les actions rapides : l'icône du titre à l'orange (charte v2 §2.5). */
.actions-rapides[b-nhuhlywuqo]  .carte-icone {
    color: var(--accent-logo);
}

/* --- La carte document (charte v2 §3.3) --- */

/*
 * En deux cartes depuis le 30/09/2026 : l'en-tête, puis les lignes et les
 * totaux, séparés par l'écart qui sépare deux cartes (charte §4). Dans un
 * seul cadre, un simple filet les séparait, et Renald les trouvait trop collés
 * pour se lire d'un coup d'œil.
 */
.document[b-nhuhlywuqo] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
}

/* L'en-tête gris clair : client, objet, dates, remise. */
.document-entete[b-nhuhlywuqo] {
    padding: 18px 22px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    background-color: var(--surface-douce);
}

/* Les lignes, les totaux et les mentions : la seconde carte. */
.document-corps[b-nhuhlywuqo] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-surface);
    background-color: var(--surface);
}

.document-champs[b-nhuhlywuqo] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 18px;
}

/* La mention d'une exonération (CTC-012), sur toute la largeur de l'en-tête. */
.document-champs[b-nhuhlywuqo]  .champ-plein {
    grid-column: 1 / -1;
}

.document-valeurs[b-nhuhlywuqo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px 24px;
    margin: 0;
}

.document-valeurs div[b-nhuhlywuqo] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.document-valeurs dt[b-nhuhlywuqo] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
}

.document-valeurs dd[b-nhuhlywuqo] {
    margin: 0;
    color: var(--texte);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.document-attention[b-nhuhlywuqo] {
    display: block;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    font-weight: 400;
}

.lien-client[b-nhuhlywuqo] {
    color: inherit;
    text-decoration: none;
}

.lien-client:hover[b-nhuhlywuqo] {
    color: var(--accent);
    text-decoration: underline;
}

/* Le titre des lignes, son compteur et ses commandes. */
.document-lignes-entete[b-nhuhlywuqo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 22px 12px;
}

.document-lignes-entete h2[b-nhuhlywuqo] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--taille-titre-section);
    font-weight: 800;
}

.document-lignes-entete h2[b-nhuhlywuqo]  svg {
    color: var(--accent);
}

.document-lignes-commandes[b-nhuhlywuqo] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* « Depuis le catalogue » : le bouton teinté, mis en avant (DEV-007). */
.bouton-teinte[b-nhuhlywuqo] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--hauteur-bouton-compact);
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--accent);
    border-radius: var(--rayon-champ);
    background-color: var(--accent-doux);
    color: var(--accent-fonce);
    font-family: var(--police);
    font-size: var(--taille-libelle);
    font-weight: 700;
    cursor: pointer;
}

.bouton-teinte:hover[b-nhuhlywuqo] {
    background-color: var(--surface);
}

/* « Afficher la marge », cadenas compris : une case qui touche au privé. */
.case-privee[b-nhuhlywuqo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    min-height: var(--hauteur-bouton-compact);
    box-sizing: border-box;
    border: 1px solid var(--prive-bordure);
    border-radius: var(--rayon-champ);
    background-color: var(--prive-fond);
    color: var(--prive-texte);
    font-size: var(--taille-libelle);
    font-weight: 600;
    cursor: pointer;
}

/*
 * Le tableau de l'onglet Marge, ligne par ligne (DEV-016). Celui des lignes du
 * document est le composant commun DocumentLines, qui porte ses propres styles.
 */
.document-tableau[b-nhuhlywuqo] {
    width: 100%;
    border-collapse: collapse;
}

.document-tableau thead tr[b-nhuhlywuqo] {
    border-top: 1px solid var(--filet);
    border-bottom: 1px solid var(--filet);
    background-color: var(--surface-douce);
}

.document-tableau th[b-nhuhlywuqo] {
    height: 38px;
    padding: 0 12px;
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.document-tableau td[b-nhuhlywuqo] {
    padding: 12px;
    border-bottom: 1px solid var(--filet);
    color: var(--texte-courant);
    vertical-align: middle;
}

.document-tableau .col-nombre[b-nhuhlywuqo] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.col-designation[b-nhuhlywuqo] {
    min-width: 200px;
}

/*
 * La remise globale se soustrait à découvert, au pied du tableau de marge
 * (DEV-013) : les lignes chiffrées, ce que la remise leur prend, ce qui reste.
 */
.marge-remise[b-nhuhlywuqo] {
    margin: 0 0 12px;
}

.marge-tableau tfoot th[b-nhuhlywuqo],
.marge-tableau tfoot td[b-nhuhlywuqo] {
    height: auto;
    padding: 10px 12px;
    border-bottom: 1px solid var(--filet);
    color: var(--texte-courant);
    font-size: var(--taille);
    font-weight: 600;
}

.marge-tableau .marge-pied-total th[b-nhuhlywuqo],
.marge-tableau .marge-pied-total td[b-nhuhlywuqo] {
    border-top: 1px solid var(--filet-fort);
    color: var(--texte);
    font-weight: 800;
}

/* Le pied : « Ajouter une ligne » à gauche, les totaux à droite. */
.document-pied[b-nhuhlywuqo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 22px 16px;
}

.document-totaux[b-nhuhlywuqo] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
    min-width: 260px;
    margin: 0 0 0 auto;
    font-size: var(--taille-secondaire);
    font-variant-numeric: tabular-nums;
}

.document-totaux dt[b-nhuhlywuqo] {
    color: var(--texte-libelle);
}

.document-totaux dd[b-nhuhlywuqo] {
    margin: 0;
    color: var(--texte);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* Un filet au-dessus du total TTC (charte v2 §3.3). */
.document-totaux .document-total-ttc[b-nhuhlywuqo] {
    padding-top: 8px;
    border-top: 1px solid var(--bordure);
    color: var(--texte);
    font-size: var(--taille-titre-colonne);
    font-weight: 800;
}

.document-totaux dd.document-total-ttc[b-nhuhlywuqo] {
    font-size: var(--taille-titre-section);
}

/* Les mentions imprimées sous les totaux. */
.document-mentions[b-nhuhlywuqo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--filet);
}

.document-mentions-titre[b-nhuhlywuqo] {
    color: var(--texte-libelle);
    font-size: var(--taille-aide);
    font-weight: 700;
}

.document-mention[b-nhuhlywuqo] {
    margin: 0;
    color: var(--texte-courant);
    font-size: var(--taille-libelle);
    white-space: pre-wrap;
}

/*
 * La phrase qui dit pourquoi le devis ne collecte pas de TVA, seule sous les
 * totaux (CTC-012) : alignée sur eux, comme sur la facture, et non collée au
 * bord de la carte.
 */
.document-mention-seule[b-nhuhlywuqo] {
    padding: 0 22px 12px;
}

/* --- Le rail --- */

/* La marge en pastille jaune (DEV-010) : privée, cadenas compris. */
.pastille-marge[b-nhuhlywuqo] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--prive-bordure);
    border-radius: var(--rayon-encart);
    background-color: var(--prive-fond);
    color: var(--prive-texte);
}

.pastille-marge-texte[b-nhuhlywuqo] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pastille-marge-montant[b-nhuhlywuqo] {
    color: var(--texte);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pastille-marge-taux[b-nhuhlywuqo] {
    font-size: var(--taille-aide);
}

.zone-privee-saisie[b-nhuhlywuqo] {
    background-color: var(--surface);
}

/* --- Les modèles de conditions (DEV-025) --- */

/* Le choix du modèle et son bouton, sur une ligne, au-dessus du champ. */
.modeles[b-nhuhlywuqo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.modeles-aide[b-nhuhlywuqo] {
    margin: 6px 0 12px;
}

.modeles[b-nhuhlywuqo]  .champ {
    flex: 1 1 260px;
    margin: 0;
}

.modeles-pied[b-nhuhlywuqo] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.modele-apercu[b-nhuhlywuqo] {
    max-height: 160px;
    margin: 0;
    overflow-y: auto;
    white-space: pre-wrap;
}

.modeles-liste[b-nhuhlywuqo] {
    display: flex;
    flex-direction: column;
    margin: 12px 0 0;
    padding: 0;
    border: 1px solid var(--filet);
    border-radius: var(--rayon-encart);
    list-style: none;
    overflow: hidden;
}

.modele[b-nhuhlywuqo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.modele + .modele[b-nhuhlywuqo] {
    border-top: 1px solid var(--filet);
}

.modele-texte[b-nhuhlywuqo] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.modele-nom[b-nhuhlywuqo] {
    color: var(--texte);
    font-weight: 700;
}

.modele-extrait[b-nhuhlywuqo] {
    overflow: hidden;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Les échanges qui parlent de ce devis (ECH-007, DEV-011) --- */

.suggestions[b-nhuhlywuqo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 12px;
}

.suggestion[b-nhuhlywuqo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.suggestion-texte[b-nhuhlywuqo] {
    color: var(--texte);
    font-style: italic;
    overflow-wrap: anywhere;
}

.suggestion-situation[b-nhuhlywuqo] {
    font-size: var(--taille-aide);
}

/* --- L'aperçu du PDF (DEV-018) --- */

.apercu-pdf[b-nhuhlywuqo] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(70vh / var(--zoom));
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-encart);
    background-color: var(--surface-douce);
}

@container ecran (max-width: 900px) {
    .document-champs[b-nhuhlywuqo] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Settings.razor.rz.scp.css */
/*
 * Identité et banque — la première page des paramètres (charte v2 §3.6,
 * maquette « Paramètres »).
 */

/* Ce que la carte imprime, à droite de son titre : une précision, pas un bouton. */
.carte-precision[b-dm531e4ux3] {
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
}

/*
 * L'annuaire en bande pointillée, au-dessus des champs qu'il remplit (PAR-004) :
 * une loupe, la recherche, et « Remplir depuis l'annuaire ».
 */
.annuaire-bande[b-dm531e4ux3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 7px 7px 14px;
    border: 1px dashed var(--pointille);
    border-radius: var(--rayon-encart);
    background-color: var(--surface-douce);
    color: var(--texte-libelle);
}

.annuaire-bande-saisie[b-dm531e4ux3] {
    flex-grow: 1;
    min-width: 0;
    height: var(--hauteur-bouton-compact);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--texte);
    font: inherit;
    font-size: var(--taille);
}

.annuaire-bande-saisie:focus-visible[b-dm531e4ux3] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/*
 * Trois colonnes (PAR-005). « ::deep » parce que la classe se pose sur la racine
 * du composant Field, que ce fichier n'a pas écrite.
 */
.grille-reglages[b-dm531e4ux3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: start;
}

.grille-reglages[b-dm531e4ux3]  .double {
    grid-column: span 2;
}

/* La banque, et le logo avec la couleur, côte à côte. */
.reglages-rangee[b-dm531e4ux3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-blocs);
    align-items: start;
}

/* Le BIC tient en onze caractères : pas besoin de toute la largeur. */
.reglages-rangee[b-dm531e4ux3]  .champ-bic {
    width: 60%;
}

/* « Voir l'aperçu du document » : un lien à droite du titre de la carte. */
.lien-carte[b-dm531e4ux3] {
    color: var(--accent);
    font-size: var(--taille-libelle);
    font-weight: 700;
    text-decoration: none;
}

.lien-carte:hover[b-dm531e4ux3] {
    color: var(--accent-survol);
    text-decoration: underline;
}

.lien-carte:focus-visible[b-dm531e4ux3] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@container ecran (max-width: 1100px) {
    .grille-reglages[b-dm531e4ux3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reglages-rangee[b-dm531e4ux3] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container ecran (max-width: 700px) {
    .grille-reglages[b-dm531e4ux3] {
        grid-template-columns: minmax(0, 1fr);
    }

    .grille-reglages[b-dm531e4ux3]  .double {
        grid-column: auto;
    }
}
/* /Pages/Showcase.razor.rz.scp.css */
.intro[b-hywx6l2jrw] {
    max-width: 70ch;
    color: var(--texte-attenue);
    margin: 0 0 var(--espace-blocs) 0;
}

.sections[b-hywx6l2jrw] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
}

.note[b-hywx6l2jrw] {
    margin: 0 0 12px 0;
    max-width: 70ch;
    color: var(--texte-attenue);
    font-size: var(--taille-secondaire);
}

.rangee[b-hywx6l2jrw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.colonne-champs[b-hywx6l2jrw] {
    display: flex;
    flex-direction: column;
    gap: var(--espace-blocs);
    max-width: 420px;
}

.filtre[b-hywx6l2jrw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--taille);
    color: var(--texte);
    cursor: pointer;
}

/* La galerie d'icônes : une grille qui se remplit toute seule, parce qu'un
   jeu d'icônes grandit et qu'une largeur fixe finirait par mentir. Le nom
   sous le dessin est ce qui rend la page utile — sans lui on admire, avec lui
   on choisit. */
.galerie-icones[b-hywx6l2jrw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--espace-blocs);
}

.galerie-icone[b-hywx6l2jrw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-champ);
    color: var(--texte-attenue);
}

/* Au survol, l'icône prend l'accent : c'est la démonstration de currentColor,
   et donc la raison pour laquelle aucun tracé ne fixe sa couleur. */
.galerie-icone:hover[b-hywx6l2jrw] {
    border-color: var(--accent);
    color: var(--accent);
}

.galerie-nom[b-hywx6l2jrw] {
    font-size: var(--taille-secondaire);
    text-align: center;
    word-break: break-word;
}
/* /Pages/TodoList.razor.rz.scp.css */
/*
 * L'écran des tâches au gabarit « kanban » de la charte v2 (§3.5, SOC-076).
 * Le tableau et la fiche ont leurs feuilles à eux (TaskBoard, TodoSheet) ; ne
 * s'habille ici que ce que l'écran écrit lui-même.
 */

/* Les onglets des tableaux, puis « Nouveau tableau » au bout (KAN-001). */
.taches-onglets[b-uaoug8y167] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    border-bottom: 1px solid var(--bordure);
}

.taches-onglets[b-uaoug8y167]  .onglets {
    min-width: 0;
}

/* Le sélecteur de tous les tableaux, en tête de la rangée (SOC-078). */
.selecteur-tableaux[b-uaoug8y167] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: var(--hauteur-bouton-compact);
    margin-bottom: 4px;
    padding: 0 12px;
    border: 1px solid var(--bouton-bordure);
    border-radius: var(--rayon-champ);
    background-color: var(--surface);
    color: var(--texte-bouton);
    font: inherit;
    font-size: var(--taille-libelle);
    font-weight: 600;
    cursor: pointer;
}

.selecteur-tableaux:hover[b-uaoug8y167] {
    border-color: var(--bouton-bordure-survol);
    background-color: var(--surface-douce);
}

.taches-onglets .bouton-pointille[b-uaoug8y167] {
    flex-shrink: 0;
    margin-bottom: 4px;
}

/* « Sur les cartes » : deux cases qui règlent l'affichage, groupées sous
   leur mot pour ne pas se lire comme des filtres (KAN-005). */
.sur-les-cartes[b-uaoug8y167] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--filet-fort);
}

.sur-les-cartes-titre[b-uaoug8y167] {
    color: var(--texte-libelle);
    font-size: var(--taille-libelle);
    font-weight: 600;
}

/* Le décompte, à l'extrémité droite de la barre (charte §2.8). */
.decompte-filtre[b-uaoug8y167] {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    gap: 12px;
    color: var(--texte-libelle);
    font-size: var(--taille-libelle);
    white-space: nowrap;
}

.decompte-filtre strong[b-uaoug8y167] {
    color: var(--texte);
}

/* --- La vue liste en tableau (KAN-009) ---
 * Les cellules sont écrites ici, donc habillées ici. Le tableau lui-même —
 * en-tête, lignes de 62 px, survol, pied — vient de DataTable (charte v2 §2.9).
 */

.tache-cellule[b-uaoug8y167] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px 0;
}

.tache-entete[b-uaoug8y167] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.tache-titre[b-uaoug8y167] {
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--texte);
    font: inherit;
    font-weight: 700;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.tache-titre:hover[b-uaoug8y167] {
    color: var(--accent);
}

.tache-faite .tache-titre[b-uaoug8y167] {
    color: var(--texte-attenue);
    text-decoration: line-through;
}

/* Une ligne au plus sous le libellé, coupée (charte v2 §6.2). */
.tache-detail[b-uaoug8y167] {
    overflow: hidden;
    color: var(--texte-attenue);
    font-size: var(--taille-aide);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tache-qui[b-uaoug8y167] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tache-qui[b-uaoug8y167]  .avatar + .avatar {
    margin-left: -10px;
}

.tache-qui-noms[b-uaoug8y167] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tache-echeance[b-uaoug8y167],
.tache-tableau[b-uaoug8y167] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: var(--hauteur-etiquette);
    padding: 0 9px;
    box-sizing: border-box;
    border-radius: var(--rayon-pastille);
    background-color: var(--pastille-gris-fond);
    color: var(--pastille-gris-texte);
    font-size: var(--taille-etiquette);
    font-weight: 700;
    white-space: nowrap;
}

.tache-tableau[b-uaoug8y167] {
    border-radius: var(--rayon-etiquette);
}

.tache-tableau span[b-uaoug8y167] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.echeance-retard[b-uaoug8y167] {
    background-color: var(--pastille-rouge-fond);
    color: var(--pastille-rouge-texte);
}

.tache-compte[b-uaoug8y167] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.tache-commandes[b-uaoug8y167] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* La corbeille ne rougit qu'au survol (charte v2 §2.1). */
.corbeille[b-uaoug8y167]  .bouton:hover,
.corbeille[b-uaoug8y167]  .bouton:focus-visible {
    color: var(--rouge);
}

.colonnes-choix[b-uaoug8y167] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}