/* /Components/CustomComponent/ApercuMessage.razor.rz.scp.css */
/* Cadre de hauteur FIXE : des aperçus côte à côte ont le même haut, le même bas et leurs pieds sur
   la même ligne, quelle que soit la longueur du texte - le texte long défile dans le cadre. Pas de
   colonne flex étirée : un MudSelect voisin y grandit (flex-grow) et décale l'aperçu vers le bas. */
.apercu-colonne[b-a9nw0c2bs9] {
    margin-top: 8px;
}

.apercu-cadre[b-a9nw0c2bs9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 250px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.apercu-objet[b-a9nw0c2bs9] {
    font-weight: 600;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    overflow-wrap: anywhere;
}

.apercu-texte[b-a9nw0c2bs9] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.apercu-pied[b-a9nw0c2bs9] {
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.apercu-absent[b-a9nw0c2bs9] {
    color: var(--mud-palette-warning);
}
/* /Components/CustomComponent/AvatarUtilisateur.razor.rz.scp.css */
/* Avatar d'une personne ou d'un fil. Feuille PROPRE au composant : une feuille isolee n'appose
 * son attribut de portee que sur les elements rendus par son composant, ce qui fait de celle-ci
 * le seul endroit d'ou ce rond peut etre habille - une page qui l'utilise ne peut pas le
 * restyler, et c'est voulu : l'avatar doit etre identique partout.
 *
 * Aucune couleur en dur : tout passe par les variables du theme, donc le mode sombre suit.
 * Une seule exception, voulue : le fond blanc du rond qui porte une photo (voir plus bas). */

.avatar-utilisateur[b-3r4vigsugt] {
    flex: 0 0 auto;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #fff;
    overflow: hidden;
    user-select: none;
}

/* La photo est montree EN ENTIER. C'est un portrait de badge cadre serre : cover n'en gardait
 * que le carre central, sans cheveux ni menton - un visage trop pres. contain seul laisserait
 * deux croissants de chaque cote : ils sont BLANCS dans les deux modes, et non une teinte,
 * reservee aux initiales. Blanc en dur, seule exception a la regle des variables de theme :
 * une photo de badge a un decor blanc, et c'est a ELLE que le rond doit se raccorder, pas au
 * theme - un fond sombre laissait un rectangle blanc au milieu d'un disque noir. Le masque
 * fond le bord de la photo dans ce blanc quand son decor n'est pas tout a fait blanc. */
.avatar-utilisateur.avec-photo[b-3r4vigsugt] {
    background-color: #fff;
}

.avatar-utilisateur img[b-3r4vigsugt] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    -webkit-mask-image: linear-gradient(to right, transparent 12%, #000 18%, #000 82%, transparent 88%);
    mask-image: linear-gradient(to right, transparent 12%, #000 18%, #000 82%, transparent 88%);
}

/* L'icone d'un groupe reprend la couleur du texte du rond, pas celle du theme. */
.avatar-utilisateur[b-3r4vigsugt]  .mud-icon-root {
    color: #fff;
}

.teinte-1[b-3r4vigsugt] { background-color: var(--mud-palette-primary); }
.teinte-2[b-3r4vigsugt] { background-color: var(--mud-palette-secondary); }
.teinte-3[b-3r4vigsugt] { background-color: var(--mud-palette-tertiary); }
.teinte-4[b-3r4vigsugt] { background-color: var(--mud-palette-info); }
.teinte-5[b-3r4vigsugt] { background-color: var(--mud-palette-success); }
.teinte-6[b-3r4vigsugt] { background-color: var(--mud-palette-warning); }
/* /Components/CustomComponent/CarteCourtoisieField.razor.rz.scp.css */
/* Le numéro complet - « 9322 9442 3148 6028 · 50 % » - est plus large que la case qui l'accueille,
   dans le bandeau de scan comme dans la ligne « Frais & remise ».

   Sans ces règles il DÉBORDE : le texte passait par-dessus la croix de retrait et mordait sur le
   bouton voisin. On borne donc la valeur au lieu de compter sur la largeur du parent - une case
   peut toujours rétrécir (écran étroit, cellule flex qui cède), et un débordement ne se voit qu'une
   fois la carte posée, c'est-à-dire trop tard.

   La coupure fonctionne sans ::deep : MudBlazor 9.9 pose
       div.mud-input-slot.mud-input-root { display:block; width:100%; min-width:0 }
   sur la case qui reçoit ce contenu. Un enfant de type bloc y suit donc la largeur disponible. */
.carte-valeur[b-mecagk6jmu] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* /Components/CustomComponent/ImageUploadField.razor.rz.scp.css */
.image-upload-field[b-591emk7uqd] {
    display: flex;
    flex-direction: column;
    position: relative;
}

[b-591emk7uqd] .mud-file-upload {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
}

/* Placeholder styling */
.image-placeholder[b-591emk7uqd] {
    width: 100%;
    height: 100%;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    background-color: var(--mud-palette-background-gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 24px 16px;
    text-align: center;
    box-sizing: border-box;
}

.image-placeholder:hover[b-591emk7uqd] {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.image-placeholder-icon[b-591emk7uqd] {
    font-size: 40px !important;
    color: var(--mud-palette-primary);
    margin-bottom: 12px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.image-placeholder:hover .image-placeholder-icon[b-591emk7uqd] {
    transform: scale(1.15) translateY(-2px);
}

/* Image preview container */
.image-preview-container[b-591emk7uqd] {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
    box-sizing: border-box;
    padding: 8px;
}

.image-preview-container:hover[b-591emk7uqd] {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* Actions Bar positioned inside the container but not absolute */
.image-actions-bar[b-591emk7uqd] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-light);
    margin-bottom: 8px;
    z-index: 10;
}

.image-preview-img-wrapper[b-591emk7uqd] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    overflow: hidden;
    width: 100%;
}

.image-preview-img[b-591emk7uqd] {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

/* Pas de règle « object-fit: cover » pour le cas recadré : la vignette n'a pas le rapport du
   cadre d'impression, donc remplir la vignette reviendrait à rogner la photo à l'écran alors
   qu'elle est déjà correctement recadrée en base. L'aperçu doit montrer CE QUI EST ENREGISTRÉ,
   en entier et à son vrai rapport - c'est ce que fait la règle .image-preview-img ci-dessus. */

/* Lecture du fichier choisi, avant l'ouverture du recadrage. Voile par-dessus le champ :
   le MudFileUpload doit rester monté pendant la lecture du flux (voir le commentaire du
   composant), il est donc masqué et non remplacé. */
.image-preparation[b-591emk7uqd] {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: var(--mud-palette-background-gray);
}

[b-591emk7uqd] .action-btn-item {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[b-591emk7uqd] .action-btn-item:hover {
    background-color: var(--mud-palette-background-gray) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}
/* /Components/CustomComponent/MudButtonLoading.razor.rz.scp.css */
/* /Components/CustomComponent/ReglementDossierPanel.razor.rz.scp.css */
/* Onglet Règlements d'un dossier (ReglementDossierPanel).

   Trois bandes : le solde et le geste qui le règle, puis le journal de caisse. Feuille ISOLÉE
   plutôt qu'app.css : ces classes ne servent qu'ici, et app.css est partagé par tout l'écran.
   Les composants MudBlazor enfants ne portent pas l'attribut d'isolation : tout ce qui les
   vise passe par ::deep. Les couleurs sont celles du thème (variables --mud-palette-*), donc
   le mode sombre suit sans règle à part. */

.rd-panel[b-gv51jxiwyb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- Bande du solde ---------- */

.rd-solde[b-gv51jxiwyb] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Un voile de la couleur d'état : rouge on doit, vert soldé, bleu on rend. */
.rd-solde.rd-due[b-gv51jxiwyb]    { background: color-mix(in srgb, var(--mud-palette-error) 7%, transparent); }
.rd-solde.rd-ok[b-gv51jxiwyb]     { background: color-mix(in srgb, var(--mud-palette-success) 7%, transparent); }
.rd-solde.rd-refund[b-gv51jxiwyb] { background: color-mix(in srgb, var(--mud-palette-info) 7%, transparent); }

/* Le chiffre héros est centré sur la hauteur du relevé, et le trait qui les sépare ne
   court pas sur toute la hauteur : il fait la taille du héros. */
.rd-solde-row[b-gv51jxiwyb] {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.rd-hero[b-gv51jxiwyb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
}

.rd-lbl[b-gv51jxiwyb] {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.rd-hero .rd-val[b-gv51jxiwyb] {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rd-due    .rd-hero .rd-val[b-gv51jxiwyb] { color: var(--mud-palette-error); }
.rd-ok     .rd-hero .rd-val[b-gv51jxiwyb] { color: var(--mud-palette-success); }
.rd-refund .rd-hero .rd-val[b-gv51jxiwyb] { color: var(--mud-palette-info); }

.rd-vsep[b-gv51jxiwyb] {
    width: 1px;
    height: 56px;
    align-self: center;
    background: var(--mud-palette-lines-default);
}

/* Dossier sans organisme : deux ou trois chiffres, chacun sous son étiquette. */
.rd-secs[b-gv51jxiwyb] {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.rd-secval[b-gv51jxiwyb] {
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rd-secval small[b-gv51jxiwyb] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-left: 4px;
}

.rd-neg[b-gv51jxiwyb] { color: var(--mud-palette-error); }

.rd-cap[b-gv51jxiwyb] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Saisie : deux champs à étiquette et le bouton. Un champ Outlined Dense à étiquette porte
   margin-top:8px et mesure 40px ; le bouton reçoit les mêmes cotes, sans centrage flex
   (voir la mémoire d'alignement champ/bouton). */
.rd-form[b-gv51jxiwyb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.rd-form[b-gv51jxiwyb]  .rd-montant { width: 230px; }
.rd-form[b-gv51jxiwyb]  .rd-moyen   { width: 200px; }
.rd-form[b-gv51jxiwyb]  .rd-form-btn { margin-top: 8px; }

/* Les champs Outlined sont transparents par défaut : sur la bande teintée, le voile d'état
   passait au travers. Un fond de surface les rend opaques, en clair comme en sombre. */
.rd-form[b-gv51jxiwyb]  .mud-input-outlined {
    background: var(--mud-palette-surface);
}

/* ---------- Journal ---------- */

.rd-jhead[b-gv51jxiwyb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.rd-jactions[b-gv51jxiwyb] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rd-jscroll[b-gv51jxiwyb] {
    max-height: 300px;
    overflow: auto;
}

/* Hôte à hauteur fixe (paramètre Remplir) : le panneau prend toute la hauteur de son conteneur
   et le journal s'étire jusqu'en bas. Le pourcentage se résout sur le MudPaper de l'hôte : le
   MudTabPanel entre les deux n'a pas de boîte. Plancher de 120 px : quand la saisie d'un règlement
   occupe la bande du solde, le journal reste lisible et c'est le panneau de l'hôte qui défile. */
.rd-panel.rd-remplir[b-gv51jxiwyb] {
    height: 100%;
}

.rd-remplir .rd-journal[b-gv51jxiwyb] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rd-remplir .rd-jscroll[b-gv51jxiwyb] {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
}

.rd-vide[b-gv51jxiwyb] { color: var(--mud-palette-text-secondary); }

/* Colonnes de montants alignées à droite, chiffres tabulaires ; le pied de table porte les
   totaux en gras sous un trait, sans zébrure. */
.rd-jscroll[b-gv51jxiwyb]  .rd-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rd-jscroll[b-gv51jxiwyb]  tr.rd-jtotal td {
    font-weight: 700;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: transparent;
}
/* /Components/Dialog/DocumentResultatRattacherDialog.razor.rz.scp.css */
/* Le corps du dialogue a une hauteur FIXE (en vh : le poste comme la tablette) : titre ~64, bande 46,
   actions ~58, soit 100vh - 240 pour rester sous le plafond de MudBlazor (100vh - 64). Quand on enchaîne
   la file, les boutons ne bougent donc jamais sous la souris ; le chargement se dessine DANS le cadre. */
.corps[b-bhqf82lzpg] {
    position: relative;
    display: flex;
    height: calc(100vh - 240px);
    min-height: 480px;
}

/* ::deep : la barre est rendue par MudProgressLinear, l'attribut de portée n'est pas sur son élément. */
.corps[b-bhqf82lzpg]  .progression {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

/* Le PDF prend tout ce que le panneau ne prend pas : une page A4 se lit en hauteur, pas en largeur. */
.pdf[b-bhqf82lzpg] {
    flex: 1 1 auto;
    min-width: 0;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* Largeur proportionnelle au dialogue (plein écran, MaxWidth.ExtraLarge) : 520 px au moins pour que
   le tableau de comparaison tienne sans barre horizontale, 700 px au plus pour laisser la page A4
   lisible à 1440 comme à 1920. */
.panneau[b-bhqf82lzpg] {
    flex: 0 0 clamp(520px, 36%, 700px);
    width: clamp(520px, 36%, 700px);
    gap: 16px;
    overflow-y: auto;
}

/* Tableau de comparaison : la colonne des libellés et celle du verdict sont étroites et fixes. */
.etiquette[b-bhqf82lzpg] {
    width: 60px;
}

.verdict[b-bhqf82lzpg] {
    width: 28px;
    text-align: center;
}

.code[b-bhqf82lzpg] {
    font-family: Consolas, ui-monospace, monospace;
    white-space: nowrap;
}

/* Les analyses du dossier prennent la place que le bouton « Chercher un autre dossier » laisse (base 0,
   jamais moins que rien), sur deux lignes au plus ; l'infobulle native rend la liste entière. */
.analyses[b-bhqf82lzpg] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.analyses[b-bhqf82lzpg]  .mud-typography {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dossiers à choisir : deux bandes (même structure que EtiquettePartiesDialog). À gauche le texte sur
   lignes alternées, à droite la colonne « Choisir » derrière un filet, pour qu'elle se lise comme une
   colonne et non comme des boutons posés au hasard. */
.candidats[b-bhqf82lzpg] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.ligne[b-bhqf82lzpg] {
    display: flex;
    align-items: stretch;
    min-height: 44px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

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

.ligne:nth-child(odd)[b-bhqf82lzpg] {
    background-color: var(--mud-palette-background-gray);
}

.bande[b-bhqf82lzpg] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 6px 10px;
}

.texte[b-bhqf82lzpg] {
    min-width: 0;
    line-height: 1.4;
}

.action[b-bhqf82lzpg] {
    flex: 0 0 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* Le tube lu sur le document, et une date de naissance identique à celle lue : ce qui fait choisir. */
.lu[b-bhqf82lzpg],
.concorde[b-bhqf82lzpg] {
    color: var(--mud-palette-success);
    font-weight: 700;
}
/* /Components/Dialog/EtiquettePartiesDialog.razor.rz.scp.css */
/* Deux bandes : à gauche les cases et libellés, à droite la colonne d'action.
   Lignes alternées pour suivre une ligne de l'œil, filet vertical pour que la colonne des
   boutons se lise comme une colonne et non comme six boutons posés au hasard. */
.parties[b-0dudmrfl56] {
    display: flex;
    flex-direction: column;
}

.ligne[b-0dudmrfl56] {
    display: flex;
    align-items: stretch;
    min-height: 40px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ligne:nth-child(even)[b-0dudmrfl56] {
    background-color: var(--mud-palette-background-gray);
}

.bande[b-0dudmrfl56] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    padding-right: 8px;
}

/* Grille et non flex pour la ligne d'un tube : les colonnes doivent tomber les unes sous les
   autres. En flex, une destination longue rognait la largeur du consommable et renvoyait le
   texte à la ligne - deux tubes au même consommable ne s'affichaient alors pas pareil. */
.tube .bande[b-0dudmrfl56] {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding-left: 28px;
}

/* Une colonne de tube tient sur une seule ligne : au-delà elle coupe, et l'infobulle rend le
   texte entier. Les hauteurs de lignes restent ainsi toutes identiques. */
.tube .bande[b-0dudmrfl56]  .colonne {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bande[b-0dudmrfl56]  .code {
    font-family: monospace;
    white-space: nowrap;
}
/* /Components/Dialog/ImageCropDialog.razor.rz.scp.css */
/* Cadre de recadrage : sa taille exacte est posée en style inline par le composant, car
   c'est elle que le script mesure pour dimensionner le canevas. */
.crop-cadre[b-cnaq1jhbdi] {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-gray);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.crop-hote[b-cnaq1jhbdi] {
    width: 100%;
    height: 100%;
}

.crop-attente[b-cnaq1jhbdi] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mud-palette-background-gray);
}

/* ::deep : le canevas est créé par /js/imagecrop.js et ne porte donc pas l'attribut de
   portée ajouté à la compilation. Il reste descendant du conteneur, qui le porte. */
[b-cnaq1jhbdi] .crop-canvas {
    display: block;
    touch-action: none;
    cursor: grab;
    user-select: none;
}

[b-cnaq1jhbdi] .crop-canvas--glisse {
    cursor: grabbing;
}
/* /Components/Pages/Ajout.razor.rz.scp.css */
/* ===== Remise & frais annexes fields =====
   Flex row of fixed-width fields so Frais annexes / Remise % / Remise DA all match the payment
   fields' width (118px), with a wider Motif. ::deep because MudBlazor components' Class lands
   on their inner MudInputControl which doesn't carry this page's scope attribute. */
.aab-remise-fields[b-b3lw4phjyc] { display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; }
/* Each field sits in a .aab-remise-cell div I own, so plain (non-::deep) flex rules control
   its width reliably; the MudBlazor field fills its cell. Frais annexes/Remise%/Remise DA are
   fixed 118px; Motif grows to fill the remaining width so there's no trailing gap. */
.aab-remise-cell[b-b3lw4phjyc] { flex: 0 0 118px; }
/* Remise DA : plus large que les autres cellules, elle partage sa largeur avec le bouton
   d'accord administrateur et affiche des montants à 5-6 chiffres. */
.aab-remise-cell--mt[b-b3lw4phjyc] { flex: 0 0 172px; }
.aab-remise-cell--motif[b-b3lw4phjyc] { flex: 1 1 200px; min-width: 200px; }
.aab-remise-cell[b-b3lw4phjyc] >  .mud-input-control { width: 100%; }

/* Remise band on narrow screens: let the fixed-width cells grow so 2–3 fit per row
   instead of overflowing; below phone width each field takes a full row. */
@media (max-width: 959.98px) {
    .aab-remise-cell[b-b3lw4phjyc] { flex: 1 1 140px; }
    .aab-remise-cell--motif[b-b3lw4phjyc] { flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 599.98px) {
    .aab-remise-fields[b-b3lw4phjyc] { gap: 8px; }
    .aab-remise-cell[b-b3lw4phjyc] { flex: 1 1 100%; }
}

/* ===== Sticky dossier command bar (.aab) =====
   Structural colors use MudBlazor theme vars (re-theme in dark mode); only the payment
   accent dots + reste-chip tints are hardcoded (no theme token exists for them). */

.aab[b-b3lw4phjyc] {
    position: sticky;
    bottom: 44px; /* clear the fixed .footer (position:fixed; bottom:0; ~36px) */
    z-index: 30;
    margin: 28px -4px 0;
    display: flex;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 -10px 34px -14px rgba(15, 23, 42, .16);
    overflow: hidden;
}

/* left state accent */
.aab-accent[b-b3lw4phjyc] {
    flex: 0 0 5px;
    align-self: stretch;
    background: var(--mud-palette-success);
}
.aab--blocked .aab-accent[b-b3lw4phjyc] { background: var(--mud-palette-error); }

/* body stacks the action row and the (full-width) validation panel vertically,
   so opening the panel drops it BELOW the row instead of being laid out as a
   flex sibling of .aab-inner (which shoved the whole bar around). */
.aab-body[b-b3lw4phjyc] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.aab-inner[b-b3lw4phjyc] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 20px 12px 22px;
}

.aab-spacer[b-b3lw4phjyc] { flex: 1 1 auto; }

/* --- 1. patient summary --- */
.aab-patient[b-b3lw4phjyc] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aab-badge[b-b3lw4phjyc] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .3px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}
.aab-badge--known[b-b3lw4phjyc] {
    color: #fff;
    background: var(--mud-palette-success);
    border-color: transparent;
}
.aab-patient-text[b-b3lw4phjyc] { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.aab-patient-name[b-b3lw4phjyc] {
    font-size: 1rem;              /* ~ MudText Typo.body1, consistent with the page */
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aab-patient-meta[b-b3lw4phjyc] {
    font-size: 0.875rem;          /* ~ MudText Typo.body2 */
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* --- dividers --- */
.aab-divider[b-b3lw4phjyc] {
    flex: 0 0 auto;
    width: 1px;
    height: 40px;
    background: var(--mud-palette-lines-default);
}

/* --- 3. payment: three plain MudNumericFields + caption --- */
.aab-pay[b-b3lw4phjyc] { display: flex; flex-direction: column; gap: 4px; }
/* row-reverse: DOM order stays Espèces→PEC→TPE (keeps Espèces' tab priority),
   but renders right→left so Espèces is rightmost, then TPE, then PEC. */
.aab-pay-fields[b-b3lw4phjyc] { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; flex-wrap: wrap; }
/* MudNumericField's Class lands on its inner MudBlazor MudInputControl, which does NOT carry
   this component's scope attribute - so a bare `.aab-numfield` selector never matches. Anchor
   ::deep off .aab-pay-fields (a page-owned div that carries the scope attr) to size the field. */
.aab-pay-fields[b-b3lw4phjyc]  .aab-numfield { width: 118px; flex: 0 0 118px; }

.aab-pay-caption[b-b3lw4phjyc] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    flex-wrap: wrap;
}
.aab-cap-sep[b-b3lw4phjyc] { color: var(--mud-palette-text-disabled); }
/* Lien « accord admin » : violet du thème (tertiary), la couleur de l'accord administrateur partout. */
.aab-cap-link[b-b3lw4phjyc] { color: var(--mud-palette-tertiary); font-weight: 600; cursor: pointer; }
.aab-cap-link:hover[b-b3lw4phjyc] { text-decoration: underline; }
.aab-cap-ok[b-b3lw4phjyc] { display: inline-flex; align-items: center; gap: 3px; color: var(--mud-palette-success); }
.aab-cap-warn[b-b3lw4phjyc] { display: inline-flex; align-items: center; gap: 3px; color: var(--mud-palette-warning); }
.aab-pay-caption[b-b3lw4phjyc]  .mud-icon-root { font-size: 1rem; }

/* --- 5. totals + reste chip ---
   Fixed width + label/value columns so changing digit counts never resize this block
   (which was shoving the payment fields around). Values are right-aligned and tabular. */
.aab-totals[b-b3lw4phjyc] {
    flex: 0 0 230px;
    width: 230px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Total line and reste chip share the same horizontal padding so their label and value
   columns line up (amounts aligned on the same right edge). */
/* Le TOTAL est LE chiffre de la barre : c'est celui que l'opérateur annonce au patient.
   Il est donc nettement plus grand que la puce Reste/Soldé en dessous (qui ne fait que
   suivre l'encaissement) et cadré, pour qu'un nouvel utilisateur le trouve sans chercher. */
.aab-total-line[b-b3lw4phjyc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    padding: 2px 12px 3px;
    border-radius: 10px;
    /* Neutre exprès : le vert/rouge est réservé à la puce d'état en dessous (Soldé / Reste),
       et le bouton Enregistrer est déjà vert. Un Total vert se lirait comme « déjà payé ». */
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
.aab-total-label[b-b3lw4phjyc] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
.aab-total-value[b-b3lw4phjyc] {
    font-size: 1.6rem;
    line-height: 1.05;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    text-align: right;
    white-space: nowrap;
}
.aab-reste-chip[b-b3lw4phjyc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 12px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.aab-reste-label[b-b3lw4phjyc] { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.aab-reste-value[b-b3lw4phjyc] { font-size: 1rem; font-weight: 800; text-align: right; white-space: nowrap; }
/* Theme-aware: translucent palette-derived backgrounds + palette text so the chip reads in
   both light and dark mode (the old hardcoded near-white fills washed out in dark mode). */
.aab-reste--due[b-b3lw4phjyc] { background: rgba(var(--mud-palette-error-rgb), 0.14); color: var(--mud-palette-error); }
.aab-reste--change[b-b3lw4phjyc] { background: rgba(var(--mud-palette-info-rgb), 0.14); color: var(--mud-palette-info); }
.aab-reste--settled[b-b3lw4phjyc] { background: rgba(var(--mud-palette-success-rgb), 0.14); color: var(--mud-palette-success); }

/* --- 7. actions --- */
.aab-actions[b-b3lw4phjyc] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --- 8. consigne de jeune (empilee sous la ligne, dans .aab-body) --- */
.aab-jeune[b-b3lw4phjyc] { padding: 0 16px 10px 22px; }
.aab-jeune-saisi[b-b3lw4phjyc] {
    margin-left: 10px;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(var(--mud-palette-success-rgb), 0.14);
    color: var(--mud-palette-success);
}

/* --- groupes du bloc Options (Etat / Impression / Information) ---
   Le titre sur la premiere ligne, les boutons dessous (.ajout-groupe-boutons), les groupes cote
   a cote. Gris, pas la couleur des liens : c'est une etiquette de rangement, pas un element
   cliquable. */
.ajout-groupe[b-b3lw4phjyc] { display: flex; flex-direction: column; }
.ajout-groupe-titre[b-b3lw4phjyc] {
    padding-left: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Case « Etiquette Ord » + nombre d'etiquettes : UN cadre pour la case et le nombre accroche a
   sa droite (le nombre n'apparait que case cochee). */
.ajout-ord[b-b3lw4phjyc] {
    display: inline-flex;
    align-items: stretch;
    /* Memes cotes que les puces voisines (.mud-chip-outlined, taille medium) : contour gris,
       32 px de haut, 14 px - le selecteur doit se lire comme l'une d'elles. */
    height: 32px;
    margin: 4px;
    font-size: 14px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}
/* Les infobulles enveloppent la case et le nombre : leur racine s'etire sur la hauteur du cadre,
   pour que toute la hauteur soit cliquable et que le filet du nombre aille de haut en bas. */
.ajout-ord[b-b3lw4phjyc]  .mud-tooltip-root { display: flex; align-items: stretch; }
.ajout-ord-libelle[b-b3lw4phjyc] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 8px;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    user-select: none;
}
.ajout-ord-libelle:hover[b-b3lw4phjyc] { background-color: var(--mud-palette-action-default-hover); }
/* Cochee : contour et texte a la couleur du theme, comme une puce voisine retenue. */
.ajout-ord.ajout-ord-coche[b-b3lw4phjyc] { border-color: var(--mud-palette-primary); }
.ajout-ord.ajout-ord-coche .ajout-ord-libelle[b-b3lw4phjyc] { color: var(--mud-palette-primary); }

/* Nombre d'etiquettes : derniere case du cadre, sans libelle ni soulignement, jamais sous 1. */
.ajout-ord-nombre[b-b3lw4phjyc] {
    display: flex;
    align-items: center;
    width: 64px;
    border-left: 1px solid var(--mud-palette-lines-inputs);
}
.ajout-ord.ajout-ord-coche .ajout-ord-nombre[b-b3lw4phjyc] { border-left-color: var(--mud-palette-primary); }
.ajout-ord-nombre[b-b3lw4phjyc]  .mud-input-control { margin: 0; }
.ajout-ord-nombre[b-b3lw4phjyc]  .mud-input { margin: 0; font-size: 14px; }
.ajout-ord-nombre[b-b3lw4phjyc]  input.mud-input-slot { padding: 0 0 0 10px !important; height: 30px; }

/* Deux etages par groupe : le titre, puis SES boutons. Un vrai second conteneur et non un titre
   force a 100 % : ce dernier gonflait la largeur naturelle du groupe et ecartait les voisins. */
.ajout-groupe-boutons[b-b3lw4phjyc] { display: flex; flex-wrap: wrap; align-items: center; }

/* --- 9. validation panel (stacked below the row inside .aab-body) --- */
.aab-validation[b-b3lw4phjyc] { padding: 0 16px 10px 22px; }
.aab-issues[b-b3lw4phjyc] { margin: 0; padding-left: 1.1rem; }
.aab-issues li[b-b3lw4phjyc] { margin: 2px 0; }

/* --- responsive: wrap below ~1400px, drop the spacer --- */
@media (max-width: 1399.98px) {
    .aab-spacer[b-b3lw4phjyc] { display: none; }
    .aab-divider[b-b3lw4phjyc] { display: none; }
    .aab-totals[b-b3lw4phjyc] { align-items: flex-start; }
    .aab-actions[b-b3lw4phjyc] { width: 100%; justify-content: flex-end; }
}

/* --- tablet (≤960px): TWO rows -
   Row 1: patient + payment (PEC·TPE·Espèces).  Row 2: totals + actions.
   Spacer/dividers are dropped; each of the 4 regions is ~half-width so exactly two
   land per line, giving the 2-row stack in DOM order (patient, pay, totals, actions). --- */
@media (max-width: 959.98px) {
    .aab-inner[b-b3lw4phjyc] { gap: 12px 16px; padding: 12px 16px; align-items: stretch; }
    .aab-spacer[b-b3lw4phjyc], .aab-divider[b-b3lw4phjyc] { display: none; }
    .aab-patient[b-b3lw4phjyc] { flex: 1 1 45%; min-width: 0; }
    .aab-pay[b-b3lw4phjyc] { flex: 1 1 45%; min-width: 0; }
    .aab-pay-fields[b-b3lw4phjyc] { flex-wrap: nowrap; }
    .aab-pay-fields[b-b3lw4phjyc]  .aab-numfield { flex: 1 1 33%; width: auto; min-width: 0; }
    .aab-totals[b-b3lw4phjyc] { flex: 1 1 45%; width: auto; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
    .aab-total-line[b-b3lw4phjyc] { flex: 0 0 auto; min-width: 150px; }
    .aab-actions[b-b3lw4phjyc] { flex: 1 1 45%; justify-content: flex-end; }
}

/* --- phone (≤600px): FOUR rows, one region each, in DOM order -
   1: patient (Nouveau patient) · 2: PEC·TPE·Espèces · 3: Total/Soldé/Prêt · 4: Devis/Effacer/Enregistrer.
   The bar also stops being sticky and flows with the page so it doesn't cover fields. --- */
@media (max-width: 599.98px) {
    .aab[b-b3lw4phjyc] {
        position: static;
        bottom: auto;
        margin: 20px 0 0;
        box-shadow: 0 2px 12px -6px rgba(15, 23, 42, .18);
    }
    .aab-inner[b-b3lw4phjyc] { flex-direction: column; align-items: stretch; gap: 12px; }
    .aab-patient[b-b3lw4phjyc], .aab-pay[b-b3lw4phjyc], .aab-totals[b-b3lw4phjyc], .aab-actions[b-b3lw4phjyc] { flex: 1 1 auto; width: 100%; }
    .aab-pay-fields[b-b3lw4phjyc] { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
    .aab-pay-fields[b-b3lw4phjyc]  .aab-numfield { flex: 1 1 33%; min-width: 0; }
    /* Row 3: Total, Soldé/Reste chip, and readiness (Prêt/Problèmes) share one line. */
    .aab-totals[b-b3lw4phjyc] { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
    /* Row 4: Devis · Effacer · Enregistrer spread across the width. */
    .aab-actions[b-b3lw4phjyc] { flex-wrap: nowrap; gap: 8px; justify-content: space-between; }
    .aab-jeune[b-b3lw4phjyc] { padding: 0 14px 12px; }
    .aab-validation[b-b3lw4phjyc] { padding: 0 14px 12px; }
}

/* ===== Barre de recherche rapide (au-dessus des onglets d'analyses) =====
   Elle partage la ligne du titre « Liste d'Analyses » : pas de hauteur volée à la zone des
   onglets, dimensionnee a 570px par la grille. Le decalage de 9px aligne la ligne de base du
   champ sur le texte du titre, comme les rangees champ + bouton du reste de l'application. */
/* Entête commun aux deux colonnes (Liste d'Analyses / Sélectionnés) : même hauteur des deux
   côtés, donc les deux cadres démarrent sur la même ligne, que la barre de recherche soit là
   ou non. Réglée au plus juste sur la hauteur du champ dense - le titre seul ne gagne que
   quelques pixels. */
.ajout-col-header[b-b3lw4phjyc] { display: flex; align-items: center; width: 100%; }
/* Hauteur imposée uniquement quand la barre est là : sans elle, les deux titres gardent leur
   hauteur naturelle et l'écran est exactement celui d'avant. */
.ajout-col-header--barre[b-b3lw4phjyc] { min-height: 36px; }
.ajout-col-header-titre[b-b3lw4phjyc] { flex: 0 0 auto; white-space: nowrap; }
/* La barre prend tout ce qui reste jusqu'au bord du cadre des onglets. min-width:0 sans quoi
   l'input, qui a une largeur intrinsèque, empêcherait le flex de rétrécir sur petit écran. */
.ajout-quick-add[b-b3lw4phjyc] { flex: 1 1 auto; min-width: 0; }
/* Sélecteurs en descendance (pas « > ») : le champ est un petit-fils du div, MudBlazor
   intercale son propre .mud-select. Et .mud-input est en inline-flex chez MudBlazor, donc
   large comme son contenu : sans width:100% la barre garde sa largeur intrinsèque quelle que
   soit la place disponible. */
.ajout-quick-add[b-b3lw4phjyc]  .mud-select,
.ajout-quick-add[b-b3lw4phjyc]  .mud-input-control,
.ajout-quick-add[b-b3lw4phjyc]  .mud-input-control-input-container,
.ajout-quick-add[b-b3lw4phjyc]  .mud-input { width: 100%; }
/* Champ compact : pas de marge propre, l'entête donne déjà sa hauteur. */
.ajout-quick-add[b-b3lw4phjyc]  .mud-input-control { margin: 0; }

/* Ticket pré-dossier dans l'entête « Sélectionnés » : le champ (même gabarit que la barre de
   recherche) prend toute la place après le titre, le bouton d'impression reste calé au bord droit.
   Champ et bouton dans UN conteneur qui ne passe pas à la ligne : sur écran étroit ils descendent
   ensemble sous le titre. */
.ajout-lecture-entete[b-b3lw4phjyc] { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; }

/* Ligne de suggestion : désignation à gauche (tronquée si besoin), abréviation en gris quand
   elle diffère, périmètre international, prix calé à droite. Tout tient sur UNE ligne - un
   libellé qui passe à la ligne ferait sauter la hauteur des lignes et l'oeil perdrait la
   colonne des prix. Ces classes ne peuvent pas passer par ::deep : le menu est rendu dans le
   fournisseur de popovers, hors du champ, mais les éléments restent les nôtres (donc scopés). */
.ajout-quick-add-item[b-b3lw4phjyc] { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.ajout-quick-add-designation[b-b3lw4phjyc] { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ajout-quick-add-abv[b-b3lw4phjyc] { flex: 0 1 auto; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85em; color: var(--mud-palette-text-secondary); }
/* Pastille INT en pur CSS plutôt qu'un MudChip : un chip impose sa hauteur et gonflerait la ligne. */
.ajout-quick-add-int[b-b3lw4phjyc] { flex: 0 0 auto; font-size: .7rem; line-height: 1.5; padding: 0 5px; border-radius: 4px; color: var(--mud-palette-info); border: 1px solid var(--mud-palette-info); }
.ajout-quick-add-prix[b-b3lw4phjyc] { flex: 0 0 auto; white-space: nowrap; color: var(--mud-palette-text-secondary); }

/* Colonne étroite : le titre passe au-dessus et la barre prend la ligne entière. */
@media (max-width: 959.98px) {
    .ajout-col-header[b-b3lw4phjyc] { flex-wrap: wrap; }
    .ajout-quick-add[b-b3lw4phjyc] { flex: 1 1 100%; }
    .ajout-quick-add.ml-4[b-b3lw4phjyc] { margin-left: 0 !important; }
    .ajout-lecture-entete[b-b3lw4phjyc] { flex: 1 1 100%; }
    .ajout-lecture-entete.ml-4[b-b3lw4phjyc] { margin-left: 0 !important; }
}




/* /Components/Pages/Messagerie.razor.rz.scp.css */
/* Messagerie interne - structure de l'ecran, bulles du fil, fiche du fil.
 *
 * PORTEE : une feuille .razor.css n'appose son attribut [b-xxxx] que sur les elements rendus par
 * CE composant. Une classe posee sur un composant enfant (<MudPaper>, <MudToolBar>) ne
 * correspond a RIEN, sans erreur ni avertissement - c'est ce qui avait empeche la hauteur fixe
 * de s'appliquer, laissant le fil grandir au lieu de defiler. Toute la structure est donc portee
 * par des <div> a nous.
 *
 * AUCUNE COULEUR NOUVELLE : tout passe par les variables du theme (--mud-palette-*), donc le
 * mode sombre suit sans une seule regle en double. */

/* Hauteur FIXE, pas un flux. Les colonnes defilent chacune de leur cote et la page elle-meme ne
 * defile jamais : sans cela la zone de saisie descendrait hors de l'ecran a mesure que la
 * conversation s'allonge, et il faudrait faire defiler la page pour repondre.
 *
 * 250px = le decor de MainLayout au-dessus et au-dessous : padding haut du contenu (111),
 * fil d'Ariane, pb-16 et pied de page fixe. Mesure, pas devine - a 205px le cadre depassait.
 * C'est LE seul nombre a corriger si le cadre tombe trop haut ou trop bas. */
.messagerie-cadre[b-46gshv6om1] {
    height: calc(100vh - 250px);
    min-height: 380px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* Le bleu des mentions et des renvois, defini UNE fois pour les deux : ils portent la meme
     * apparence, ils doivent donc partager la meme definition et non la repeter.
     *
     * --mud-palette-info seul ne convient pas comme couleur de TEXTE. Le theme le fixe a
     * Cyan.Darken1 (#00ACC1), une couleur d'icone : sur un fond clair elle plafonne vers 2,3:1 et
     * les puces se lisaient delavees, ce qui etait exactement le reproche fait a l'ecran. On
     * l'assombrit donc a la lecture plutot que d'ecrire un bleu en dur - si le theme change de
     * teinte, les puces suivent. */
    --messagerie-lien-texte: color-mix(in srgb, var(--mud-palette-info) 70%, #000);
    --messagerie-lien-fond: rgba(var(--mud-palette-info-rgb), 0.12);
    --messagerie-lien-bord: rgba(var(--mud-palette-info-rgb), 0.32);
    --messagerie-lien-fond-survol: rgba(var(--mud-palette-info-rgb), 0.22);
}

/* En mode sombre le probleme s'inverse : le theme passe deja Info a Cyan.Lighten1, qui se detache
 * du fond fonce - l'assombrir le rendrait illisible. La couleur du theme est donc reprise telle
 * quelle. `html[data-theme="dark"]` est la convention deja utilisee par app.css pour ce genre de
 * bascule, et elle traverse le CSS isole : seul le dernier element d'un selecteur recoit le
 * marqueur [b-xxxx], pas ses ancetres. */
html[data-theme="dark"] .messagerie-cadre[b-46gshv6om1] {
    --messagerie-lien-texte: var(--mud-palette-info);
}

.messagerie-corps[b-46gshv6om1] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.messagerie-liste[b-46gshv6om1] {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.messagerie-fil[b-46gshv6om1] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* La fiche est une colonne fixe et non un tiroir flottant : elle se consulte EN LISANT le fil
 * (« qui est ce Karim ? »), donc elle ne doit rien recouvrir. */
.messagerie-fiche[b-46gshv6om1] {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* Sous md, les colonnes s'empilent et la fiche disparait : a cette largeur, lui donner une
 * colonne reviendrait a supprimer le fil. */
/* Bouton de retour a la liste : invisible tant que les deux colonnes cohabitent. */
.messagerie-retour[b-46gshv6om1] {
    display: none;
}

/* SUR ECRAN ETROIT, UNE SEULE COLONNE A LA FOIS.
 *
 * Les deux etaient empilees, la liste prenant 40% de la hauteur : le fil - ce pour quoi on vient -
 * se lisait alors par une fente de quelques lignes, et la zone de saisie mangeait ce qui restait.
 * Montrer la liste OU le fil, avec une fleche pour revenir, est ce que fait toute messagerie sur
 * telephone, et cela ne coute ni tiroir, ni animation, ni JavaScript : la classe posee sur le
 * corps dit laquelle des deux s'affiche.
 *
 * La fiche du fil reste masquee : une troisieme colonne n'a aucune chance ici, et ses informations
 * (membres, presence) sont deja resumees dans l'en-tete. */
@media (max-width: 959px) {
    .messagerie-liste[b-46gshv6om1] {
        flex: 1 1 auto;
        border-right: none;
    }

    .messagerie-corps.liste-visible .messagerie-fil[b-46gshv6om1] {
        display: none;
    }

    .messagerie-corps.fil-visible .messagerie-liste[b-46gshv6om1] {
        display: none;
    }

    .messagerie-retour[b-46gshv6om1] {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
    }

    .messagerie-fiche[b-46gshv6om1] {
        display: none;
    }
}

/* ── En-tete de la liste ─────────────────────────────────────────────────── */

.messagerie-entete-liste[b-46gshv6om1] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
}

.messagerie-boutons[b-46gshv6om1] {
    display: flex;
    gap: 8px;
}

.messagerie-boutons > *[b-46gshv6om1] {
    flex: 1 1 0;
    min-width: 0;
}

/* Intertitre des sections (Epingle / Recent / Membres). Meme graisse que les overline de l'app :
 * il classe, il n'attire pas l'oeil a lui. */
.messagerie-section[b-46gshv6om1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
}

.messagerie-section > span:first-child[b-46gshv6om1] {
    flex: 1 1 auto;
}

/* Hauteur RESERVEE, occupee ou non : le filet d'attente ne doit pas faire descendre la liste de
 * quatre pixels a chaque recherche puis la faire remonter. */
.messagerie-filet[b-46gshv6om1] {
    height: 4px;
    margin-top: -6px;
}

/* Boite de taille FIXE pour le bouton de rechargement : l'icone (30px) et le sablier (20px) s'y
 * relaient sans faire monter ou descendre la ligne du titre. */
.messagerie-recharge[b-46gshv6om1] {
    flex: 0 0 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Nombre de resultats, a droite du titre de section. */
.messagerie-compte[b-46gshv6om1] {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

/* ── Resultats de la recherche dans les messages ─────────────────────────── */

/* Volontairement PLUS SOBRE qu'une ligne de conversation : pas de pastille, pas de gras. Ces
 * lignes vivent sous la liste et ne doivent pas se disputer le regard avec elle - on les lit quand
 * on cherche quelque chose de precis, pas en parcourant. */
.messagerie-resultat[b-46gshv6om1] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.messagerie-resultat:hover[b-46gshv6om1],
.messagerie-resultat:focus-visible[b-46gshv6om1] {
    background-color: var(--mud-palette-action-default-hover);
    border-left-color: var(--mud-palette-info);
}

.messagerie-resultat-haut[b-46gshv6om1] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.messagerie-resultat-fil[b-46gshv6om1] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
}

.messagerie-resultat-date[b-46gshv6om1] {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

/* DEUX lignes et non une : un extrait d'une seule ligne coupe presque toujours avant le mot
 * cherche, et la ligne ne dit alors pas pourquoi elle est la. */
.messagerie-resultat-texte[b-46gshv6om1] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

/* Remplace MudSpacer : lui non plus ne recevrait pas notre attribut de portee. */
.messagerie-pousse[b-46gshv6om1] {
    flex: 1 1 auto;
}

/* ── Pastilles d'identite ────────────────────────────────────────────────── */

/* Un rond d'initiales plutot qu'une icone identique pour tout le monde : dans une liste, c'est la
 * couleur et les lettres qu'on reconnait de loin, pas le libelle. La teinte est DERIVEE de
 * l'identifiant (voir IndexPastille) : la meme personne garde la meme couleur d'un ecran a
 * l'autre et d'un jour a l'autre. */
.messagerie-pastille[b-46gshv6om1] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    user-select: none;
}

.messagerie-pastille.pastille-petite[b-46gshv6om1] {
    width: 30px;
    height: 30px;
    font-size: 0.68rem;
}

.messagerie-pastille.pastille-grande[b-46gshv6om1] {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
}

/* Cale de la largeur d'une pastille : garde les bulles d'une meme suite alignees sans repeter le
 * rond a chaque message. */
.messagerie-cale[b-46gshv6om1] {
    flex: 0 0 auto;
    width: 30px;
}

.pastille-1[b-46gshv6om1] { background-color: var(--mud-palette-primary); }
.pastille-2[b-46gshv6om1] { background-color: var(--mud-palette-secondary); }
.pastille-3[b-46gshv6om1] { background-color: var(--mud-palette-tertiary); }
.pastille-4[b-46gshv6om1] { background-color: var(--mud-palette-info); }
.pastille-5[b-46gshv6om1] { background-color: var(--mud-palette-success); }
.pastille-6[b-46gshv6om1] { background-color: var(--mud-palette-warning); }

/* Le « +2 » de la pile : un compte, pas une personne - donc gris, pour ne pas se faire passer
 * pour un membre de plus. */
.pastille-reste[b-46gshv6om1] {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Pile d'avatars : les ronds se chevauchent, le premier devant. */
.messagerie-pile[b-46gshv6om1] {
    display: flex;
    flex: 0 0 auto;
    padding-right: 6px;
}

.messagerie-pile > *[b-46gshv6om1] {
    margin-right: -10px;
    border: 2px solid var(--mud-palette-surface);
    box-sizing: content-box;
}

/* ── Liste des conversations ─────────────────────────────────────────────── */

.messagerie-conversations[b-46gshv6om1] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 8px;
}

.messagerie-conversation[b-46gshv6om1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background-color 120ms;
}

.messagerie-conversation:hover[b-46gshv6om1] {
    background-color: var(--mud-palette-table-hover);
}

/* La ligne selectionnee est marquee par un LISERE plus une teinte : la teinte seule disparait
 * pour qui distingue mal les contrastes, et l'ecran ne dirait plus ce qu'on est en train de lire. */
.messagerie-conversation.selectionnee[b-46gshv6om1] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

.messagerie-conversation-texte[b-46gshv6om1] {
    min-width: 0;
    flex: 1 1 auto;
}

.messagerie-ligne[b-46gshv6om1] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.messagerie-titre[b-46gshv6om1] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messagerie-heure[b-46gshv6om1],
.messagerie-apercu[b-46gshv6om1] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.messagerie-heure[b-46gshv6om1] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.messagerie-apercu[b-46gshv6om1] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Un fil non lu se lit en gras : c'est ce que l'oeil parcourt en premier. */
.messagerie-conversation.non-lue .messagerie-titre[b-46gshv6om1],
.messagerie-conversation.non-lue .messagerie-apercu[b-46gshv6om1] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* La pastille de non-lus reprend la teinte PRIMAIRE et non le rouge d'erreur : des messages en
 * attente ne sont pas une panne. Le rouge est reserve a ce qui a echoue. */
.messagerie-compteur[b-46gshv6om1] {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── En-tete du fil ──────────────────────────────────────────────────────── */

.messagerie-entete-fil[b-46gshv6om1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 16px;
    min-height: 60px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.messagerie-entete-texte[b-46gshv6om1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.messagerie-entete-titre[b-46gshv6om1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messagerie-entete-sous[b-46gshv6om1] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Etiquette de nature du fil (Groupe / Diffusion / Admin) : un mot, pas un composant. */
.messagerie-etiquette[b-46gshv6om1] {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 10px;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.messagerie-etiquette.diffusion[b-46gshv6om1] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-tertiary);
}

/* ── Fil de messages ─────────────────────────────────────────────────────── */

/* column-reverse : le navigateur reste colle au message le plus recent sans une ligne de
 * JavaScript, et garde sa position quand des messages plus anciens s'ajoutent en remontant le
 * fil. Le code rend donc les lignes du plus recent au plus ancien (voir LignesFil). */
.messagerie-messages[b-46gshv6om1] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
    padding: 8px 24px 16px;
}

/* Le fil est BORNE en largeur et centre. Sur un ecran de 1900px, des bulles collees aux deux
 * bords obligeraient a balayer l'ecran des yeux d'un bout a l'autre pour suivre un echange de
 * trois mots. La mesure de lecture confortable ne depend pas de la taille du moniteur. */
.messagerie-groupe[b-46gshv6om1] {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.messagerie-groupe.debut[b-46gshv6om1] {
    margin-top: 14px;
}

/* Signature AU-DESSUS de la bulle : la bulle ne porte plus que le message, et une suite de
 * reponses courtes ne devient pas une colonne d'etiquettes. Indentee de la largeur de la
 * pastille pour tomber a l'aplomb de la bulle. */
.messagerie-signature[b-46gshv6om1] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 3px 38px;
}

.messagerie-groupe.moi .messagerie-signature[b-46gshv6om1] {
    justify-content: flex-end;
    margin-left: 0;
    margin-right: 2px;
}

.messagerie-nom[b-46gshv6om1] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.messagerie-signature .messagerie-heure[b-46gshv6om1] {
    font-size: 0.7rem;
}

.messagerie-rangee[b-46gshv6om1] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.messagerie-groupe.moi .messagerie-rangee[b-46gshv6om1] {
    justify-content: flex-end;
}

.messagerie-bulle[b-46gshv6om1] {
    position: relative;
    max-width: 70%;
    min-width: 0;
    padding: 9px 13px;
    border-radius: 10px;
    background-color: var(--mud-palette-background-gray);
    margin-top: 3px;
}

/* Ses propres messages sur un vert PALE, texte ordinaire - et non sur la teinte primaire pleine.
 * Le fond sature obligeait tout ce qui vit dans la bulle (mention, renvoi, heure) a se repeindre
 * en blanc pour rester lisible, et deux verts finissaient toujours par se marcher dessus. Sur un
 * fond pale, chaque element garde sa couleur normale et le « qui parle » reste porte par la
 * teinte, l'alignement a droite et la signature « Vous ». */
.messagerie-bulle.moi[b-46gshv6om1] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.22);
}

/* Le message atteint depuis un resultat de recherche. Un LISERE bleu et non un fond colore : la
 * bulle garde la couleur qui dit qui parle, et le repere se lit par-dessus sans la contredire.
 * Bleu, comme tout ce qui designe quelque chose dans cet ecran (mentions, renvois).
 *
 * Il ne s'efface pas tout seul : on l'a demande, il reste tant qu'on n'ouvre pas autre chose.
 * Une disparition apres quelques secondes ferait rater le repere a qui a detourne les yeux
 * pendant que le fil se chargeait. */
.messagerie-bulle.cible[b-46gshv6om1] {
    outline: 2px solid var(--messagerie-lien-texte);
    outline-offset: 2px;
}

.messagerie-bulle.retire[b-46gshv6om1] {
    background-color: transparent;
    border: 1px dashed var(--mud-palette-lines-default);
}

.messagerie-bulle.retire .messagerie-texte[b-46gshv6om1] {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

/* pre-wrap : un message ecrit sur trois lignes doit s'afficher sur trois lignes. break-word :
 * un code echantillon colle sans espace ne doit pas elargir la bulle hors de la colonne. */
.messagerie-texte[b-46gshv6om1] {
    display: block;
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

.messagerie-modifie[b-46gshv6om1] {
    display: block;
    margin-top: 2px;
    font-size: 0.66rem;
    font-style: italic;
    opacity: 0.7;
}

/* Le menu d'actions flotte HORS de la bulle et n'apparait qu'a son survol : trois points sur
 * chaque message transformeraient le fil en colonne de boutons. */
/* Cote OPPOSE a la bulle : a gauche pour ses propres messages (alignes a droite), a droite pour
 * ceux des autres (alignes a gauche). Fixe a gauche, il tombait par-dessus l'avatar du collegue
 * des lors que le menu s'est mis a s'ouvrir sur TOUS les messages et plus seulement les siens. */
.messagerie-actions[b-46gshv6om1] {
    position: absolute;
    top: 50%;
    right: -34px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 120ms;
}

.messagerie-bulle.moi .messagerie-actions[b-46gshv6om1] {
    right: auto;
    left: -34px;
}

.messagerie-bulle:hover .messagerie-actions[b-46gshv6om1],
.messagerie-actions:focus-within[b-46gshv6om1] {
    opacity: 1;
}

/* Evenement du fil (« X a quitte le groupe ») : centre, discret, sans bulle. Il se lit comme une
 * didascalie - present dans la chronologie, mais visiblement pas une parole de quelqu'un. */
.messagerie-evenement[b-46gshv6om1] {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 980px;
    margin: 8px auto;
}

.messagerie-evenement span[b-46gshv6om1] {
    padding: 3px 12px;
    border-radius: 12px;
    background-color: var(--mud-palette-background-gray);
    font-size: 0.72rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* Separateur de jour : le libelle pose sur un trait qui traverse le fil. */
.messagerie-jour[b-46gshv6om1] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px auto 10px;
    width: 100%;
    max-width: 980px;
    position: relative;
}

.messagerie-jour[b-46gshv6om1]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.messagerie-jour span[b-46gshv6om1] {
    position: relative;
    padding: 0 14px;
    background-color: var(--mud-palette-surface);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
}

/* Accuse de lecture : discret, aligne sous MA bulle. Il confirme, il n'annonce pas. */
.messagerie-accuse[b-46gshv6om1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 3px;
    font-size: 0.68rem;
    color: var(--mud-palette-primary);
}

/* « X ecrit… » : pose au bas du fil, dans le flux, et non en surimpression - il pousse le
 * dernier message vers le haut plutot que de le recouvrir. */
.messagerie-saisie-distante[b-46gshv6om1] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 980px;
    margin: 6px auto 0;
    padding-left: 38px;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

/* Trois points qui respirent : le mouvement dit « en cours » sans un mot de plus. */
.messagerie-points[b-46gshv6om1] {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 10px;
}

.messagerie-points i[b-46gshv6om1] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--mud-palette-text-secondary);
    animation: messagerie-rebond-b-46gshv6om1 1.2s infinite ease-in-out;
}

.messagerie-points i:nth-child(2)[b-46gshv6om1] { animation-delay: 0.15s; }
.messagerie-points i:nth-child(3)[b-46gshv6om1] { animation-delay: 0.30s; }

@keyframes messagerie-rebond-b-46gshv6om1 {
    0%, 60%, 100% { transform: translateY(0);     opacity: 0.45; }
    30%           { transform: translateY(-4px);  opacity: 1; }
}

/* Respecte le reglage systeme « moins d'animations » : une animation en boucle est exactement
 * ce que ce reglage existe pour eteindre. */
@media (prefers-reduced-motion: reduce) {
    .messagerie-points i[b-46gshv6om1] {
        animation: none;
        opacity: 0.6;
    }
}

/* Pastille de presence posee sur le coin de l'avatar. */
.messagerie-presence[b-46gshv6om1] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
}

.messagerie-point[b-46gshv6om1] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--mud-palette-success);
    border: 2px solid var(--mud-palette-surface);
}

/* ── Etats vides ─────────────────────────────────────────────────────────── */

/* column-reverse renverse aussi l'etat vide : margin:auto le recentre dans les deux cas. */
.messagerie-accueil[b-46gshv6om1] {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px;
    max-width: 320px;
}

.messagerie-accueil-rond[b-46gshv6om1] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
}

.messagerie-vide[b-46gshv6om1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
}

/* ── Fiche du fil ────────────────────────────────────────────────────────── */

.messagerie-fiche-barre[b-46gshv6om1] {
    display: flex;
    align-items: center;
    padding: 8px 8px 8px 16px;
    min-height: 60px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.messagerie-fiche-titre[b-46gshv6om1] {
    font-size: 0.9rem;
    font-weight: 600;
}

.messagerie-fiche-corps[b-46gshv6om1] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 12px;
}

.messagerie-fiche-identite[b-46gshv6om1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px 16px;
    text-align: center;
}

.messagerie-fiche-nom[b-46gshv6om1] {
    font-size: 1.05rem;
    font-weight: 600;
}

.messagerie-fiche-meta[b-46gshv6om1] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.messagerie-membre[b-46gshv6om1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
}

.messagerie-membre-texte[b-46gshv6om1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}

.messagerie-membre-nom[b-46gshv6om1] {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messagerie-membre-fonction[b-46gshv6om1] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    text-transform: capitalize;
}

/* Le retrait n'apparait qu'au survol de SA ligne : un bouton rouge en permanence en face de chaque
 * collegue transforme une liste de membres en liste d'executions, et invite au clic malheureux.
 * L'espace reste RESERVE (visibility) et non repris (display) - sans quoi les noms sauteraient
 * lateralement au passage de la souris. */
.messagerie-membre-action[b-46gshv6om1] {
    flex: 0 0 auto;
    margin-left: 2px;
    visibility: hidden;
}

.messagerie-membre:hover .messagerie-membre-action[b-46gshv6om1],
.messagerie-membre-action:focus-within[b-46gshv6om1] {
    visibility: visible;
}

.messagerie-fiche-actions[b-46gshv6om1] {
    margin-top: 12px;
    padding: 8px 8px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ── Zone de saisie ──────────────────────────────────────────────────────── */

.messagerie-composeur[b-46gshv6om1] {
    padding: 10px 24px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

/* Meme mesure que le fil : la saisie tombe SOUS les bulles au lieu de s'etaler sur toute la
 * largeur de l'ecran quand celles-ci sont bornees. */
/* En COLONNE : la barre d'outils au-dessus, puis la rangee champ + bouton d'envoi. Le bouton
 * partageait auparavant la rangee de toute la colonne et s'alignait sur son sommet, donc il
 * remontait d'un cran des qu'un panneau s'ouvrait. */
.messagerie-composeur-interieur[b-46gshv6om1] {
    display: flex;
    flex-direction: column;
    max-width: 980px;
    margin: 0 auto;
}

.messagerie-ligne-saisie[b-46gshv6om1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.messagerie-champ[b-46gshv6om1] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Un div a nous plutot qu'un « > :last-child » : ce dernier viserait le composant du bouton, qui
 * ne porte pas l'attribut de portee - la regle ne s'appliquerait a rien. */
.messagerie-envoi[b-46gshv6om1] {
    flex: 0 0 auto;
    margin-top: 2px;
}

/* ── Émojis et mentions ──────────────────────────────────────────────────── */

/* Barre d'outils de la saisie : les deux boutons, puis le panneau ouvert A LEUR DROITE.
 * Le panneau ne se pose PAS au-dessus du champ : il repoussait alors la zone de saisie vers le
 * bas, et tout le composeur sautait a chaque ouverture. Sur une seule ligne, rien ne bouge. */
/* HAUTEUR RESERVEE, panneau ouvert ou non.
 *
 * Les boutons seuls font 30px, alors qu'un panneau ouvert - sa bordure et sa marge interne
 * comprises - en fait 40 : la rangee grandissait donc a l'ouverture, et comme le composeur est
 * ancre en bas du fil, toute la barre du bas sautait vers le haut puis redescendait a chaque clic
 * sur l'emoji, la mention ou le renvoi.
 *
 * La place est donc prise en permanence plutot que reprise a l'ouverture. Dix pixels toujours
 * occupes valent mieux qu'un bond a chaque clic : c'est justement la raison pour laquelle les
 * panneaux sont poses A COTE des boutons et non au-dessus, et il manquait cette derniere marche. */
.messagerie-outils[b-46gshv6om1] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    min-width: 0;
    min-height: 40px;
}

/* Panneau INLINE, rendu par la page elle-meme et non par un MudMenu : un menu MudBlazor
 * teleporte son contenu dans le fournisseur de popover, hors du sous-arbre de ce composant - le
 * CSS isole ne l'atteindrait donc JAMAIS (meme piege que le cadre pose sur un MudPaper).
 *
 * Une BANDE qui defile horizontalement plutot qu'une grille : elle occupe la place laissee libre
 * a droite des boutons, quelle que soit la largeur de la fenetre, sans jamais grandir en hauteur. */
.messagerie-panneau[b-46gshv6om1] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Hauteur FIXE et bordures comprises : la bande fait 40px quoi qu'elle contienne - emojis,
     * pastilles de collegues ou controles de saisie. C'est ce qui permet a la rangee de reserver
     * exactement la meme hauteur, et donc de ne plus bouger. */
    height: 40px;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background-color: var(--mud-palette-surface);
}

/* Barre de defilement discrete : sur une bande de 40px, celle du systeme mange la moitie. */
.messagerie-panneau[b-46gshv6om1]::-webkit-scrollbar {
    height: 4px;
}

.messagerie-panneau[b-46gshv6om1]::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: var(--mud-palette-lines-default);
}

.messagerie-panneau-vide[b-46gshv6om1] {
    padding: 4px 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

/* Meme gabarit que les deux MudIconButton Size.Small qui ouvrent les panneaux (icone 1.25rem +
 * 5px de marge interne = 30px) : la bande reste alors a la hauteur exacte de la rangee de
 * boutons, sans la faire grandir. */
.messagerie-emoji[b-46gshv6om1] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background: transparent;
    /* Une police a emojis explicite : sans elle, certains postes Windows rendent des carres. */
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.messagerie-emoji:hover[b-46gshv6om1],
.messagerie-emoji:focus-visible[b-46gshv6om1] {
    background-color: var(--mud-palette-action-default-hover);
    transform: scale(1.15);
}

/* Chaque collegue est une PASTILLE compacte : sur une bande horizontale, une ligne pleine
 * largeur par personne n'aurait aucun sens. */
/* Aucune marge VERTICALE : la pastille d'avatar fait deja 30px, soit la taille des boutons qui
 * ouvrent le panneau. En ajouter en haut et en bas ferait une bande plus haute que sa propre
 * rangee de boutons. L'avatar est donc a fleur de bord a gauche, et seul le texte est degage. */
.messagerie-mention-choix[b-46gshv6om1] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px 0 0;
    cursor: pointer;
    border: none;
    border-radius: 999px;
    background-color: var(--mud-palette-background-gray);
    white-space: nowrap;
    text-align: left;
    font: inherit;
    color: inherit;
}

.messagerie-mention-choix:hover[b-46gshv6om1],
.messagerie-mention-choix:focus-visible[b-46gshv6om1] {
    background-color: var(--mud-palette-action-default-hover);
}

.messagerie-mention-nom[b-46gshv6om1] {
    font-size: 0.82rem;
    font-weight: 600;
}

/* La fonction ne figure PAS dans cette bande : on y choisit quelqu'un qu'on connait deja, le nom
 * suffit, et l'afficher doublait la largeur de chaque pastille donc reduisait de moitie le nombre
 * de collegues visibles sans defiler. Elle reste dans la fiche du fil, ou elle repond a une autre
 * question : « qui est ce Karim ? ». */

/* Renvoi vers un dossier, un patient ou un echantillon. Une PUCE et non un lien souligne : ce
 * n'est pas du texte, c'est un objet du laboratoire cite dans la phrase.
 * inline-flex et non inline-block : la puce reste dans le flux du texte et la ligne se coupe
 * normalement autour d'elle. */
.messagerie-renvoi[b-46gshv6om1] {
    display: inline-flex;
    align-items: center;
    /* Une boite inline-flex prend pour ligne de base son BORD INFERIEUR : la puce retombait donc
     * sous le texte qui la suit. « middle » la recale sur la ligne d'ecriture. */
    vertical-align: middle;
    gap: 3px;
    padding: 1px 7px 1px 5px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
    /* BLEU et non vert. Le vert est la couleur de l'application et celle de ses propres bulles :
     * une puce verte sur un fond vert se battait avec lui quoi qu'on fasse, et il fallait une
     * regle de rattrapage par type de bulle. Le bleu ne rencontre aucun vert, se lit aussi bien
     * sur la bulle pale que sur la grise, et dit « renvoi » - la convention de tout lien. */
    background-color: var(--messagerie-lien-fond);
    color: var(--messagerie-lien-texte);
    border: 1px solid var(--messagerie-lien-bord);
    /* La puce cliquable est une ancre : sans cela elle heriterait du souligne et du bleu des
     * liens du navigateur, et cesserait de ressembler aux autres puces. */
    text-decoration: none;
}

.messagerie-renvoi[b-46gshv6om1]  .mud-icon-root {
    font-size: 0.95rem;
}

/* Seul l'echantillon mene quelque part (/suivi/{code}) : les autres puces restent informatives,
 * et ne doivent donc pas se donner l'air cliquable. */
.messagerie-renvoi.cliquable[b-46gshv6om1] {
    cursor: pointer;
}

.messagerie-renvoi.cliquable:hover[b-46gshv6om1] {
    background-color: var(--messagerie-lien-fond-survol);
}


/* Panneau de saisie d'une reference : trois controles sur une ligne, pas une grille. */
/* Le panneau de reference NE S'ETIRE PAS, contrairement a la bande d'emojis : celle-ci a d'autant
 * plus d'emojis visibles qu'on lui laisse de place, alors que celui-ci n'a que trois controles.
 * Etire, il eloignait le champ de saisie du menu qui dit ce qu'on y tape - le type a gauche, le
 * code a un demi-ecran de la - alors que les deux se lisent ensemble : « Dossier : 8002608-10003 ».
 * Il se serre donc contre les boutons qui l'ouvrent. */
.messagerie-panneau-reference[b-46gshv6om1] {
    flex: 0 0 auto;
    gap: 8px;
}

/* Largeur FIXE pour le champ : un n° de dossier, une reference patient ou un code echantillon
 * tiennent tous en une quinzaine de caracteres. Sans cela le champ prend tout ce qu'on lui laisse.
 * Enveloppe a nous : une regle isolee ne peut pas viser la racine d'un composant MudBlazor. */
.messagerie-champ-reference[b-46gshv6om1] {
    flex: 0 0 190px;
    min-width: 0;
}

/* La mention DANS une bulle : EXACTEMENT le meme habillage que les renvois. Nommer une personne,
 * citer un dossier, un patient ou un tube sont le meme geste - designer quelque chose du
 * laboratoire au milieu d'une phrase - et cela se lit donc d'une seule facon.
 *
 * UNE SEULE APPARENCE, AUCUNE EXCEPTION : ni selon la bulle (la sienne ou celle d'un autre), ni
 * selon que la personne nommee est soi. Les variantes qui vivaient ici - blanc sur bulle verte,
 * pastille pleine pour sa propre mention - ne rattrapaient qu'un fond sature qui n'existe plus, et
 * faisaient lire trois objets differents la ou il n'y en a qu'un.
 *
 * display:inline et non inline-block : la mention doit se couper avec le texte en fin de ligne,
 * sans casser le white-space:pre-wrap de la bulle. */
.messagerie-mention[b-46gshv6om1] {
    display: inline;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
    background-color: var(--messagerie-lien-fond);
    color: var(--messagerie-lien-texte);
    border: 1px solid var(--messagerie-lien-bord);
}




.messagerie-correction[b-46gshv6om1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    flex: 0 0 auto;
}

.messagerie-correction-texte[b-46gshv6om1] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Pages/ParametresLabo.razor.rz.scp.css */
/* Placeholder styling */
[b-ewjusi25jv] .image-placeholder {
    width: 100%;
    height: 200px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    background-color: var(--mud-palette-background-gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 24px 16px;
    text-align: center;
    box-sizing: border-box;
}

[b-ewjusi25jv] .image-placeholder:hover {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

[b-ewjusi25jv] .image-placeholder-icon {
    font-size: 40px !important;
    color: var(--mud-palette-primary);
    margin-bottom: 12px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[b-ewjusi25jv] .image-placeholder:hover .image-placeholder-icon {
    transform: scale(1.15) translateY(-2px);
}

/* Image preview container */
[b-ewjusi25jv] .image-preview-container {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
    box-sizing: border-box;
    padding: 8px;
}

[b-ewjusi25jv] .image-preview-container:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

[b-ewjusi25jv] .image-preview-img {
    height: 184px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

/* Actions Bar top-left positioning */
[b-ewjusi25jv] .image-actions-bar {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

[b-ewjusi25jv] .action-btn-item {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[b-ewjusi25jv] .action-btn-item:hover {
    background-color: var(--mud-palette-background-gray) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}