/* ============================================================================
   Armony Cloud — systeme de cartes des pages de liste  (classes .v2-*)
   ----------------------------------------------------------------------------
   Extrait de CustomerInvoiceListV2.razor pour etre partage entre les pages de
   liste refondues (factures clients, jobs, ...). Charge globalement depuis
   App.razor : ne pas le recopier dans un bloc <style> de page.

   Attention en le modifiant : les regles d alignement et de contraste sont
   documentees en tete de chaque section. Le bandeau d en-tetes et les lignes
   sont deux grilles CSS distinctes qui doivent partager le meme gabarit, le
   meme ecart de colonnes, le meme padding horizontal et la meme epaisseur de
   bordure. Toucher a l un sans l autre desaligne le tableau.

   Mode sombre : aucune couleur en dur. Les teintes viennent de la palette
   MudBlazor (--v2-tint-1 / --v2-tint-2), qui bascule seule.
   ============================================================================ */

/* --- Bandeau d indicateurs --------------------------------------------
   Regle appliquee : la valeur et le libelle portent des couleurs de TEXTE,
   jamais la couleur de l indicateur. C est l icone qui porte la couleur.
   Chiffres en figures proportionnelles : tabular-nums est reserve aux
   colonnes de nombres qui doivent s aligner verticalement. */
.v2-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    height: 100%;
}

.v2-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex: 0 0 auto;
}

.v2-kpi-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
}

.v2-kpi-label {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

/* ======================================================================
   Tableau (lecture, pas saisie)
   ----------------------------------------------------------------------
   Le bandeau d en-tetes reste en haut, et les colonnes des lignes tombent
   exactement sous leur titre. Jusqu au 16/09/2026 chaque ligne etait une
   carte blanche flottante (box-shadow + marge) et chaque cellule une
   petite carte grise a l interieur : empiler ces "cartes de valeur" faisait
   lire un formulaire desactive plutot que des donnees (retour de Lucas,
   "les cellules ressemblent a des inputs desactives a cause de leur fond
   gris individuel"). Un tableau de donnees en lecture seule n a pas besoin
   qu on encadre chaque valeur : le fond est desormais UNIQUE (celui du
   tableau, partage par le bandeau et chaque ligne), et seul un filet fin
   separe les lignes.

   Regle tenue dans tout ce bloc.

   ALIGNEMENT. Le bandeau et chaque ligne sont deux grilles CSS distinctes ;
   pour qu elles calculent les memes colonnes elles partagent le meme
   gabarit --v2-cols (uniquement des fr et une largeur fixe : aucun
   dimensionnement au contenu, sinon deux grilles de meme largeur peuvent
   aboutir a des colonnes differentes), le meme column-gap, le meme padding
   horizontal et la meme epaisseur de bordure — transparente de part et
   d autre, pour que le filet de separation (borne a .v2-tr) ne decale rien
   d un pixel. Un niveau plus bas, .v2-group-inner est identique dans le
   bandeau et dans les lignes, et .v2-th-group porte le meme padding
   horizontal que .v2-td-group.

   Les badges de statut (.v2-status/.v2-pill) et les boutons d action ne
   sont pas concernes par cette section : ce sont deja des elements
   visuellement distincts (couleur, forme en pilule), pas des valeurs de
   texte brutes, et ils gardent leur traitement plus bas dans ce fichier.
   ====================================================================== */
/* Echelle de teintes, declaree au niveau du document et non sur .v2-tbl : les
   fiches (.v2-panel, .v2-field) en ont besoin aussi. Une variable declaree sur
   le tableau serait indefinie ailleurs, et les regles qui s en servent
   tomberaient en silence — une declaration dont la valeur est invalide est
   simplement ignoree, sans erreur ni avertissement.

   Aucune valeur en dur : tout vient de la palette MudBlazor, qui bascule seule
   en mode sombre. En clair les overlays sont du noir translucide, en sombre du
   blanc translucide, donc les niveaux se lisent dans les deux sens.
     --v2-tint-1  overlay faible  (action-default-hover, 6 %)
     --v2-tint-2  overlay double  (divider, 12 %)
   Le fallback couvre le cas ou une variable de palette ne serait pas emise. */
:root {
    --v2-tint-1: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .06));
    --v2-tint-2: var(--mud-palette-divider, rgba(0, 0, 0, .12));
}

.v2-tbl {
    /* Gabarit par defaut : chaque page ayant un tableau redefinit --v2-cols
       dans son propre <style>. */
    --v2-cols: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1.55fr) minmax(0, 2.3fr) minmax(0, .85fr) minmax(0, 2.4fr) 158px;
    --v2-pad-x: 14px;
    --v2-gap: 12px;
    --v2-cell-pad-x: 10px;
    --v2-group-pad: 5px;
    --v2-group-gap: 6px;


    padding: 12px;
    border-radius: 14px;
    /* Meme fond que le panneau qui le contient (.v2-panel = surface) : le
       tableau ne doit pas se lire comme une deuxieme carte grise imbriquee
       dans la premiere. Bandeau et lignes partagent ce meme fond plus bas
       (aucun des deux ne redefinit background-color) : "fond uniforme pour
       la ligne/tableau". */
    background-color: var(--mud-palette-surface);
    /* Filet fin sur tout le pourtour : certaines pages posent le tableau
       directement dans le flux de la page, sans .v2-panel autour (les
       listes Utilisateurs). Sans ce filet, un tableau au fond identique a
       la page ne se distinguait plus du tout comme tableau (retour de
       Lucas du 16/09/2026). Meme teinte que les separations de lignes
       plus bas : un seul filet coherent, dedans comme dehors. */
    box-shadow: 0 0 0 1px var(--v2-tint-2);
    /* Un tableau trop large pour l ecran defile horizontalement au lieu
       d ecraser ses colonnes : a ~1000px de large, les pistes en
       minmax(0, fr) descendaient jusqu a zero et le contenu devenait
       illisible (dates tronquees, montant par-dessus les dates, en-tetes
       colles, pastilles coupees lettre par lettre — revue UX du 30/09/2026).
       Les pages a beaucoup de colonnes donnent donc un minimum en px a
       chaque piste dans leur --v2-cols ; les autres gardent minmax(0, fr)
       et ne changent pas de comportement. */
    overflow-x: auto;
}

/* Barre d outils du tableau : l action principale se place dans le coin haut
   droit du bloc, au-dessus de la colonne Actions. Meme padding horizontal que
   le bandeau et les lignes, donc son bord droit tombe exactement sur le leur. */
.v2-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 var(--v2-pad-x) 10px;
}

.v2-thead,
.v2-tr {
    display: grid;
    grid-template-columns: var(--v2-cols);
    column-gap: var(--v2-gap);
    padding-left: var(--v2-pad-x);
    padding-right: var(--v2-pad-x);
    border: 1px solid transparent;
    border-radius: 12px;
    /* Avec des minimums en px dans --v2-cols, la ligne doit pouvoir etre plus
       large que le tableau (qui defile alors) : sans ceci elle resterait a la
       largeur du conteneur et ses pistes deborderaient hors de son fond. */
    min-width: min-content;
}

/* --- Bandeau d en-tetes -------------------------------------------------
   Sans fond ni bordure marquee, le bandeau n etait qu une ligne de texte
   au-dessus des lignes, avec le meme fond qu elles - facile a confondre
   avec une premiere ligne de donnees plutot qu un en-tete (retour de Lucas
   du 16/09/2026, repete deux fois : "les titres ne sont pas assez mis en
   avant"). Trois leviers, tous deja utilises ailleurs dans ce fichier donc
   coherents avec le reste :
     - fond teinte a --v2-tint-2 (la plus forte des deux teintes)
     - filet bas double epaisseur, meme couleur que celui des lignes
     - un cran de taille de police en plus (.63rem -> .68rem)
   Une seule teinte de fond ne suffisait pas sur fond sombre : le contraste
   entre "un peu plus fonce" et "beaucoup plus fonce" s ecrase vite en
   sombre, d ou le filet renforce en plus. */
.v2-thead {
    align-items: end;
    padding-top: 8px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom-width: 2px;
    border-bottom-color: var(--v2-tint-2);
    /* Rectangle net, pas de coin arrondi : le bandeau est encadre par le
       padding du tableau (.v2-tbl), il ne touche aucun bord exterieur -
       lui donner son propre arrondi le faisait flotter comme une forme a
       part, sans rapport avec les lignes bien rectangulaires en dessous
       (retour de Lucas du 16/09/2026, "la forme est bizarre"). */
    border-radius: 0;
    background-color: var(--v2-tint-2);
}

.v2-thead .v2-th {
    font-size: .68rem;
}

.v2-th {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    /* Bordure transparente de meme epaisseur que celle des cartes :
       sans elle le titre serait decale d 1px vers la gauche. */
    border: 1px solid transparent;
    padding: 0 var(--v2-cell-pad-x);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.2;
    /* Un titre plus large que sa colonne revient a la ligne entre deux mots
       au lieu de deborder sur la colonne voisine ("N° DE COMMANDE" collé a
       "RECEPTION", revue UX du 30/09/2026). Le bandeau est aligne en bas
       (align-items:end sur .v2-thead) : un titre sur deux lignes reste donc
       pose sur la meme ligne de base que les autres. */
    white-space: normal;
    overflow-wrap: normal;
    color: var(--mud-palette-text-secondary);
}

.v2-th-sortable {
    cursor: pointer;
    user-select: none;
}

.v2-th-sortable:hover {
    color: var(--mud-palette-primary);
}

.v2-th-right {
    justify-content: flex-end;
}

/* Utilisee par plusieurs pages (AnalyseDematV2, AnalyseDematDetailsV2,
   InvoicingBillingAssistantV2/DetailsV2) pour les colonnes numeriques
   etroites, mais jamais definie : sans elle, l en-tete restait en
   .v2-th nu (aligne a gauche, white-space:nowrap) et un libelle long
   ("NOMBRE DE FACTURES", "FICHIERS ALTERNATIFS"...) debordait sur la
   colonne voisine des que la colonne faisait 70-100px (retour de Lucas
   du 16/09/2026, en-tetes qui se chevauchent sur Analyse Demat). Meme
   traitement que .v2-group-inner-4/5 .v2-th plus haut : centre et
   autorise a revenir a la ligne. */
.v2-th-center {
    justify-content: center;
    text-align: center;
    white-space: normal;
}

.v2-arrow {
    color: var(--mud-palette-primary);
    font-size: .7rem;
    line-height: 1;
}

.v2-th-group {
    min-width: 0;
    border: 1px solid transparent;
    padding: 0 var(--v2-group-pad);
}

/* Neutre, et non plus orange : l orange servait au titre de groupe, au lien
   de traitement et aux boutons. Trois sens pour une seule couleur, l oeil ne
   savait plus ou aller. Il ne reste que la fleche de tri et les actions. */
/* Titre de groupe en accolade : centre au-dessus de ses sous-colonnes et
   souligne sur toute leur largeur. Le trait dit, avant meme de lire, ou le
   groupe commence et ou il finit ; le cadre des lignes (.v2-td-group) reprend
   la meme couleur juste en dessous. */
.v2-th-group-title {
    margin: 0 2px 6px;
    padding: 0 var(--v2-cell-pad-x) 4px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
    border-bottom: 2px solid color-mix(in srgb, var(--mud-palette-text-primary) 35%, transparent);
}

/* Grille interne d un groupe : identique en en-tete et en ligne. */
.v2-group-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--v2-group-gap);
}

/* Filet entre les sous-valeurs d un groupe (ex. Reception / Echeance dans le
   bac "Date") : sans lui, deux valeurs posees cote a cote sur le meme fond
   tinte ne se distinguent que par l espacement, ce qui se lit mal des que les
   valeurs se ressemblent (deux dates, deux montants) — retour de Lucas du
   29/09/2026, "aucune separation donc on ne sait pas quoi est quoi". Le
   melange avec la couleur de texte plutot qu avec --v2-tint-2 est volontaire :
   un filet dans la meme teinte que le fond du bac serait invisible dessus. */
.v2-group-inner > *:not(:last-child) {
    border-right: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent);
}

.v2-group-inner-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.v2-group-inner-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v2-group-inner-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Un groupe de cinq sous-colonnes ne laisse pas la place a des titres sur une
   seule ligne : ils se centrent et peuvent revenir a la ligne. Les cellules se
   centrent aussi, donc les textes restent alignes verticalement. */
.v2-group-inner-4 .v2-th,
.v2-group-inner-5 .v2-th {
    justify-content: center;
    text-align: center;
    white-space: normal;
    font-size: .56rem;
    letter-spacing: .01em;
    padding: 0 2px;
    gap: 2px;
}

.v2-td-center {
    align-items: center;
    text-align: center;
}

/* --- Ligne : pas de carte, juste un filet fin en pied de ligne --------
   Le fond n est pas redefini ici : la ligne reste sur le fond du tableau
   (.v2-tbl), qui est lui-meme celui du panneau (.v2-panel). Seule une
   bordure basse tres legere separe les lignes, et le survol teinte toute
   la ligne d un coup — plus de carte qui flotte (box-shadow + translateY),
   plus de fond individuel derriere chaque valeur.

   --v2-tint-2 plutot que la variable MudBlazor dediee aux tableaux
   (--mud-palette-table-lines) : cette derniere s'est reveleee trop pale
   dans ce theme (retour de Lucas du 16/09/2026, "on ne comprend pas que
   c'est un tableau") - a peine visible, le filet ne separait plus rien.
   --v2-tint-2 est le meme filet que celui du bandeau d en-tetes juste
   au-dessus (border-bottom-color) : lignes et bandeau se separent donc
   de la meme facon, de haut en bas du tableau. */
.v2-tr {
    align-items: stretch;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--v2-tint-2);
    transition: background-color .12s ease-in-out;
}

.v2-tr:last-child {
    border-bottom: none;
}

/* Alternance tres discrete, seulement pour aider l oeil a suivre une ligne
   sur un tableau dense (8 colonnes et plus) — desactivable en retirant
   cette regle seule si une page s en passe mieux. Volontairement plus
   faible que le survol ci-dessous, sinon une ligne alternee et une ligne
   survolee se confondraient. */
.v2-tr:nth-child(even) {
    background-color: var(--v2-tint-1);
    --v2-row-bg: var(--v2-tint-1);
}

.v2-tr:hover {
    background-color: var(--v2-tint-2);
    --v2-row-bg: var(--v2-tint-2);
}

/* Colonne Actions collante a droite : quand un tableau large defile (entre
   1200px, ou il passe en cartes, et la largeur ou toutes ses colonnes
   tiennent), les boutons d une ligne restent visibles sans faire defiler.
   La cellule doit etre opaque pour masquer ce qui passe dessous : fond du
   tableau + teinte de la ligne (paire / survol) via --v2-row-bg, pour garder
   exactement la meme couleur que le reste de la ligne. Sans effet visible
   quand le tableau ne defile pas. */
@media (min-width: 1201px) {
    .v2-tr > .v2-td-actions,
    .v2-thead > .v2-th:last-child {
        position: sticky;
        /* Un element colle s arrete au bord du contenu de son conteneur de
           defilement, padding exclu : sans ce decalage, une bande de 12px
           (le padding de .v2-tbl) laissait voir le texte qui defile dessous. */
        right: -12px;
        z-index: 1;
        background-color: var(--mud-palette-surface);
        background-image: linear-gradient(var(--v2-row-bg, transparent), var(--v2-row-bg, transparent));
    }

    .v2-thead > .v2-th:last-child {
        --v2-row-bg: var(--v2-tint-2);
    }

    /* Barre d outils (bouton "+") et pagination font la largeur du tableau :
       sans ceci ils defilaient avec les colonnes et le "+" se retrouvait au
       milieu de l ecran. */
    .v2-tbl > .v2-toolbar,
    .v2-tbl > .v2-pager {
        position: sticky;
        left: 0;
    }
}

/* --- Cellule : la valeur elle-meme, plus de carte ---------------------
   Avant, chaque cellule portait son propre fond gris (--v2-tint-1) et un
   rayon de bordure : empile sur 8 colonnes x 50 lignes, ca lit un
   formulaire desactive, pas une donnee (retour de Lucas du 16/09/2026).
   Une cellule de tableau en lecture seule n a besoin que d un padding pour
   respirer ; le fond et la separation viennent de .v2-tr ci-dessus. */
.v2-td {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Sans cela, une pastille remplirait toute la largeur de la cellule :
       en colonne, align-items commande la largeur des enfants. */
    align-items: flex-start;
    min-width: 0;
    padding: 7px var(--v2-cell-pad-x);
    font-size: .8rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Une date ou un numero est une valeur compacte de format fixe : la casser
   au milieu ("25/08/2" puis "026" sur la ligne suivante) est illisible et
   n arrive que parce que .v2-td porte overflow-wrap:anywhere (necessaire
   pour les valeurs longues et imprevisibles comme un SIRET ou un email).
   Ici on revient a un comportement normal — ne jamais couper, tronquer par
   points de suspension si vraiment trop etroit — retour de Lucas du
   28/09/2026, dates qui se coupent en deux lignes dans les cartes de
   date/numero. */
.v2-td-num {
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    overflow-wrap: normal;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-td-right {
    align-items: flex-end;
    text-align: right;
}

/* Un enfant direct de .v2-td (MudChip, MudStack, MudText...) ne recoit pas
   min-width:0 par heritage : sans lui, son contenu impose sa largeur
   naturelle et deborde visuellement sur la carte voisine des qu une colonne
   est un peu juste (Nature / Mode de configuration de DematProviderV2,
   retour de Lucas du 16/09/2026 - icone et texte qui "se collent"/debordent).
   .v2-td est deja en display:flex, donc ceci ne change rien la ou tout
   rentrait deja. */
.v2-td > * {
    min-width: 0;
}

/* MudChip ne tronque proprement que si on l autorise a retrecir sous sa
   largeur naturelle (meme raison que ci-dessus, pour le cas ou le chip
   n est pas un enfant direct de .v2-td, ex. dans une MudStack). */
.v2-td .mud-chip {
    min-width: 0;
    max-width: 100%;
}

.v2-td .mud-chip-content {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Les actions n ont pas besoin de carte : ce sont deja des boutons. */
/* Meme padding horizontal que .v2-th/.v2-td (--v2-cell-pad-x) : avant, un
   padding plus etroit ici que sur l en-tete "ACTIONS" (droite) decalait le
   bouton de quelques pixels par rapport au libelle qu il doit suivre - les
   actions n etaient "pas en face" de leur colonne (retour de Lucas du
   16/09/2026). */
/* .v2-td est en display:flex column avec align-items:flex-start : sans
   l ecraser ici, .v2-row-actions (son enfant direct) ne prend que la
   largeur de son propre contenu (les boutons) et reste colle a gauche de
   la cellule - son "justify-content:flex-end" interne n a alors aucun
   espace a repousser, et les boutons restaient loin sous "ACTIONS" au lieu
   d etre en face (retour de Lucas du 16/09/2026). "stretch" laisse
   .v2-row-actions occuper toute la largeur de la cellule, la ou son
   flex-end pousse enfin les boutons contre le meme bord droit que le
   libelle d en-tete. */
.v2-td-plain {
    background-color: transparent;
    padding: 6px var(--v2-cell-pad-x);
    align-items: stretch;
}

/* --- Bac de groupe : plus soutenu, sous-cartes blanches --------------- */
/* Le groupe se lit par son CADRE, plus par un fond gris (retour de Lucas du
   30/09/2026) : un bac teinte salissait les pastilles de statut posees
   dessus, et sans bac on ne voyait plus que Plateforme / Administratif ou
   Depot / Facture / Echeance allaient ensemble. Un contour net, arrondi,
   de la meme couleur que l accolade du titre de groupe dans le bandeau
   (.v2-th-group-title) : le titre coiffe le groupe, le cadre le prolonge
   ligne apres ligne. Meme traitement pour les dates et les statuts. */
.v2-td-group {
    --v2-group-line: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--v2-group-pad);
    border-radius: 9px;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--v2-group-line);
}

.v2-td-group .v2-group-inner {
    flex: 1 1 auto;
}

/* Conserve pour les pages qui la posent : tous les groupes sont desormais
   sans fond. */
.v2-td-group.v2-td-group-plain {
    background-color: transparent;
}

.v2-td-group .v2-td {
    /* Meme principe qu au-dessus : une sous-valeur du groupe reste du
       texte, pas une sous-carte blanche. Le bac (.v2-td-group ci-dessous)
       porte deja la teinte qui dit "ceci est un groupe". */
    height: 100%;
    padding: 6px 8px;
}

/* La couleur du statut se limite a une pastille qui fait la taille de son
   contenu (jamais toute la cellule : ca faisait de gros pavés pastel qui
   pesaient plus que la donnee elle-meme).
   La pastille elle-meme, en revanche, est un vrai badge colore : fond teinte
   + liseré + texte, tous derives de la variable --pill-c (posee en inline par
   ArmonyStatusPill a partir de StatusColor). Une pastille sans fond passait
   pour "pas finie" (retour utilisateur du 15/09/2026). color-mix() est
   supporte par tous les navigateurs cibles (Chromium/Edge/Firefox/Safari
   2023+) ; --pill-c retombe sur currentColor si jamais absente. */
.v2-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    /* .v2-td porte overflow-wrap:anywhere (utile pour un SIRET ou un email) ;
       herite ici, il coupait les libelles lettre par lettre ("Ret/our/erre/ur")
       des que la colonne etait etroite. Un libelle de statut ne revient a la
       ligne qu entre deux mots. */
    overflow-wrap: normal;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 600;
    line-height: 1.35;
    /* Le texte en couleur pure de l etat (ex. un vert ou un bleu clair) manquait
       de contraste sur son propre fond, teinte de la meme couleur : illisible
       pour un oeil humain des que l etat est une couleur claire (retour de
       Lucas du 29/09/2026, capture "Reçu"/"Reçu" en vert et bleu pastel). On
       rapproche donc le texte de la couleur de texte du theme (sombre en
       clair, claire en sombre), qui contraste toujours avec le fond clair/
       sombre de l application — tout en gardant assez de la teinte d origine
       pour que le code couleur reste lisible au premier coup d oeil. 35% de
       teinte / 65% de couleur de texte : verifie au-dessus du seuil WCAG AA
       (4.5:1) sur les teintes les plus claires (vert #69F0AE, bleu #80D8FF)
       sur fond clair — un dosage plus faible de teinte (ex. 55%) retombait
       sous 3.1:1, toujours insuffisant. */
    color: color-mix(in srgb, var(--pill-c, var(--mud-palette-text-primary)) 35%, var(--mud-palette-text-primary) 65%);
    background-color: color-mix(in srgb, var(--pill-c, currentColor) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pill-c, currentColor) 34%, transparent);
}

/* --- Contenu des cellules --------------------------------------------
   Le nom reste en couleur de texte : MudLink le passerait en orange, et
   l orange sert deja aux liens de traitement et aux actions. Il ne
   s allume qu au survol. Deux lignes maximum, sinon les hauteurs de
   ligne partent dans tous les sens. */
.v2-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    font-size: .81rem;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
}

.v2-tr a:hover .v2-name {
    color: var(--mud-palette-primary);
}

.v2-sub {
    font-size: .62rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    margin-top: 2px;
}

/* Client et traitement sur une seule ligne : deux valeurs longues faisaient
   varier la hauteur des lignes de 56 a 88px et cassaient le rythme vertical.
   Le repli mobile les laisse revenir a la ligne, l espace y est vertical. */
/* Le lien de traitement passe en couleur de texte : cinquante libelles
   orange en colonne, c etait la colonne la plus criarde de la page. Il
   s allume au survol, comme le nom. */
.v2-td a.v2-clip {
    color: var(--mud-palette-text-primary);
}

.v2-td a.v2-clip:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.v2-clip {
    align-self: stretch;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Un MudTooltip pose autour d un .v2-clip (email complet au survol) s elargit
   a la taille de son contenu : le max-width:100% du .v2-clip se calculait
   alors sur lui, pas sur la cellule, et le texte debordait sur la colonne
   voisine au lieu d etre tronque (liste Utilisateurs, revue UX du 30/09/2026). */
.v2-td > .mud-tooltip-root {
    max-width: 100%;
}

.v2-amount {
    font-weight: 600;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* MudButton impose min-width: 64px : deux boutons depassaient donc la
   colonne et repassaient a la ligne. On les ramene a un carre de 30px et
   on interdit le retour a la ligne. */
.v2-row-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 3px;
}

.v2-row-actions > a {
    display: inline-flex;
}

.v2-row-actions .mud-button-root {
    min-width: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    box-shadow: none;
}

/* Le carre 34x34 ci-dessus suppose une icone seule. Un ToolTipIconButton
   avec Text (ex. "DETAILS" sur WebhookLogsV2/LogsListV2, "Gerer" sur
   DematProviderPriceListV2) y voit son libelle tronque a une ou deux
   lettres ("DETAILS" -> "DETA", retour de Lucas du 16/09/2026). Ce bouton
   porte la classe v2-btn-labeled (ToolTipIconButton.razor) et retrouve une
   largeur au contenu. */
.v2-row-actions .mud-button-root.v2-btn-labeled {
    width: auto;
    min-width: 34px;
    padding: 0 12px;
    white-space: nowrap;
}

.v2-row-actions .mud-button-root:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.v2-row-actions .mud-button-root .mud-icon-root {
    font-size: 1.15rem;
}

/* Le menu contextuel reste neutre : c est le seul bouton present sur
   toutes les lignes, il ne doit pas peser. */
.v2-row-actions .mud-menu .mud-button-root {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.v2-pager {
    padding: 14px 4px 2px;
}

/* Libelle repete dans la cellule : masque tant que le bandeau d en-tetes
   est visible, affiche des qu on passe en colonnes repliees. */
.v2-td-label {
    display: none;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 3px;
}

/* --- Repli : sous 1200px le bandeau disparait et les cellules portent
   leur propre libelle. Plus de defilement horizontal. ------------------ */
@media (max-width: 1200px) {
    .v2-thead {
        display: none;
    }

    .v2-tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 8px;
        padding: 12px;
    }

    .v2-td-group,
    .v2-td-actions {
        grid-column: 1 / -1;
    }

    .v2-td-label {
        display: block;
    }

    .v2-row-actions {
        justify-content: flex-start;
    }

    .v2-td-right {
        align-items: flex-start;
        text-align: left;
    }

    .v2-name {
        -webkit-line-clamp: 3;
    }

    .v2-clip {
        white-space: normal;
        overflow: visible;
    }
}

@media (max-width: 620px) {
    .v2-tr {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-group-inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--v2-group-gap);
    }
}

/* ============================================================================
   Pages de fiche  (.v2-panel / .v2-field)
   ----------------------------------------------------------------------------
   Meme langage que les listes, applique a une fiche : le panneau est la carte
   blanche, et chaque champ une petite carte teintee portant son libelle. On
   reutilise --v2-tint-1 : un champ de fiche et une cellule de liste ont donc
   exactement le meme fond, ce qui fait tenir les deux ecrans ensemble.
   ============================================================================ */
.v2-panel {
    background-color: var(--mud-palette-surface);
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--v2-tint-2), 0 1px 2px rgba(0, 0, 0, .06);
    padding: 16px 18px;
    height: 100%;
}

.v2-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.v2-panel-title {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Grille de champs : elle se remplit toute seule selon la largeur disponible,
   pas besoin de declarer un gabarit par fiche. */
.v2-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.v2-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: 8px 11px;
    border-radius: 7px;
    background-color: var(--v2-tint-1);
    overflow-wrap: anywhere;
}

.v2-field-wide {
    grid-column: 1 / -1;
}

.v2-field-label {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 4px;
}

.v2-field-value {
    font-size: .85rem;
    line-height: 1.35;
}

/* Le graphique en anneau de MudBlazor ecrit son texte central en fill="black",
   illisible en mode sombre : on le repasse en couleur de texte du theme. */
.v2-panel .donut-inner-text {
    fill: var(--mud-palette-text-primary);
}

/* --- Pastilles de statut ---------------------------------------------
   Fond teinte de la couleur du statut, point de la couleur pleine,
   libelle en couleur de texte : lisible meme quand la couleur du statut
   est tres claire (les statuts utilisent des Lighten2 / Accent1). */
.v2-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.v2-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Sur une carte-cellule grise, une pastille grise disparaitrait : elle
   passe en blanc avec un liseré. */
.v2-pill-neutral {
    background-color: var(--mud-palette-surface);
    box-shadow: inset 0 0 0 1px var(--v2-tint-2);
    color: var(--mud-palette-text-secondary);
    padding: 3px 9px;
}

.v2-pill-mini {
    font-size: .64rem;
    padding: 1px 7px;
}

/* ============================================================================
   Ecrans de saisie  (.v2-form / .v2-line / .v2-actions / .v2-file)
   ----------------------------------------------------------------------------
   Meme grammaire que les fiches : le panneau porte la section, et ce qui est
   secondaire (une ligne de saisie repetee, un fichier joint) vit sur une carte
   teintee --v2-tint-1. Les champs MudBlazor restent des champs MudBlazor : on
   ne redessine pas les inputs, on organise seulement ce qui les entoure. Un
   input reteinte a la main sort de la palette des le mode sombre.
   ============================================================================ */

/* Grille de saisie : elle se remplit selon la largeur disponible, comme
   .v2-fields, mais avec un pas plus large — un input a besoin de plus de place
   qu un libelle-valeur. */
.v2-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px 12px;
    align-items: start;
    /* Conteneur de requete : .v2-form-actions monte sur la ligne des derniers
       champs des que la grille a au moins trois colonnes (voir plus bas). */
    container-type: inline-size;
}

/* Un champ dense SANS libelle (filtre rapide a simple placeholder) recoit de
   MudBlazor 4px de marge haute au lieu de 8 : son cadre remontait de 4px par
   rapport a ses voisins de rangee (Jobs, Factures fournisseurs). Meme marge
   pour tous, donc tous les cadres sur la meme ligne. */
.v2-form .mud-input-control.mud-input-control-margin-dense {
    margin-top: 8px;
}

/* Petits filtres regroupes dans une seule cellule de la grille (Ignores,
   Archives, Nombre max) : trois listes « Oui / Non / Tous » ou « 50 / 100 »
   n ont pas besoin chacune d une colonne de 240px (retour de Lucas du
   30/09/2026, "diminuer grandement la taille que ca prend"). */
.v2-form-mini {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.v2-form-mini > * {
    flex: 1 1 0;
    min-width: 0;
}

/* A ~80px de large, l icone de debut et le padding standard ne laissaient
   plus voir la valeur ("N..." au lieu de "Non"). Le libelle au-dessus du
   champ suffit a dire ce qu il filtre. */
.v2-form-mini .mud-input-adornment-start {
    display: none;
}

.v2-form-mini .mud-input.mud-input-outlined .mud-input-slot {
    padding-left: 10px;
    padding-right: 0;
}

.v2-form-mini .mud-input.mud-input-outlined {
    padding-right: 4px;
}

.v2-form-mini .mud-input-adornment-end {
    margin-left: 0;
}

/* Le champ prend toute la largeur de la grille (nom de document, note...). */
.v2-form-wide {
    grid-column: 1 / -1;
}

/* Pour un champ composite plus large qu une seule colonne (ex.
   EnumMultiSelect : un MudSelect de 300px accole a un bouton d aide) :
   sans ca, son contenu force sa propre colonne a grandir au detriment des
   colonnes voisines, qui se retrouvent comprimees ou recouvertes par son
   debordement (retour de Lucas du 16/09/2026). */
.v2-form-span2 {
    grid-column: span 2;
}

/* Texte d aide sous un titre de section ou un champ. */
.v2-hint {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.v2-hint-error {
    color: var(--mud-palette-error);
}

/* Ligne de saisie repetee (montant + taux de TVA, par exemple). La V1 mettait
   chacune sur un MudPaper Elevation=1 : une ombre portee par ligne, ce qui fait
   un escalier. Ici une seule carte teintee, plate. */
.v2-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: var(--v2-tint-1);
}

.v2-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Boutons d action a la fin d une grille .v2-form (Rechercher, Reinitialiser,
   Purger...) : sans enveloppe dediee, ils se comportent comme n importe quel
   champ de la grille auto-fill (repeat(auto-fill, minmax(240px,1fr))) et leur
   position finit par dependre du nombre de champs qui precedent - parfois
   alignes en bout de ligne, parfois orphelins seuls sur une nouvelle ligne
   (retour de Lucas du 16/09/2026 : "le bouton recherche doit toujours etre
   au meme niveau que le reste et toujours au meme endroit"). Cette classe
   les regroupe sur leur propre ligne pleine largeur, alignee a droite, quel
   que soit le nombre de champs au-dessus. */
.v2-form-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* Les boutons remontent d une ligne (retour de Lucas du 30/09/2026) : ils
   occupent les deux dernieres colonnes, donc se posent a droite des derniers
   champs s il y reste la place, et ne passent a la ligne suivante que si la
   rangee est pleine. Toujours alignes a droite, donc toujours au meme bord.
   Sous trois colonnes (ecran etroit), ils gardent leur propre ligne : -3
   designerait alors une colonne implicite hors de la grille. */
@container (min-width: 744px) {
    .v2-form-actions {
        grid-column: -3 / -1;
    }

    /* Un seul bouton (Rechercher) tient dans une colonne : il n en reserve
       plus deux. Sans ca, en Full HD, une seule case libre en bout de rangee
       ne suffisait pas et le bouton tombait seul sur la ligne d en dessous
       (retour de Lucas du 05/10/2026, Entreprises). Deux boutons
       (Reinitialiser + Appliquer, ~305px) gardent deux colonnes : une
       colonne de la grille ne depasse pas ~290px des qu il y en a cinq. */
    .v2-form-actions:not(:has(> :nth-child(2))) {
        grid-column: -2 / -1;
    }
}

/* Alignement vertical : la grille aligne ses cases en haut (un champ avec un
   texte d aide est plus haut que ses voisins). Le bouton se cale donc sur la
   ligne des champs, pas au milieu de la case : centre, il descendait sous
   les autres des qu un champ de la rangee portait une aide (retour de Lucas
   du 05/10/2026, Onboarding PA). Le cadre d un champ dense commence 8px sous
   le haut de sa case (place du libelle flottant) et mesure 40px : le bouton
   reprend ce decalage et se centre sur ces 40px, donc au milieu des cadres. */
.v2-form-actions {
    align-self: start;
    margin-top: 8px;
    min-height: 40px;
}

/* Un champ loge parmi les boutons (duree de purge des Logs) : le bloc porte
   deja le decalage de 8px, le champ ne doit pas le rajouter. */
.v2-form .v2-form-actions .mud-input-control.mud-input-control-margin-dense {
    margin-top: 0;
}

/* Pied d actions d un panneau : un seul filet, colle en bas a droite. */
.v2-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--v2-tint-2);
}

/* Fichier selectionne : icone, nom, taille a droite, action de retrait. */
.v2-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 12px;
    border-radius: 10px;
    background-color: var(--v2-tint-1);
}

.v2-file-name {
    font-size: .85rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.v2-file-size {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

/* Zone de depot : le bouton d ajout vit sur une carte en pointilles, pour que
   l endroit ou deposer soit visible avant meme de lire le libelle. */
.v2-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 12px;
    /* Le pointille doit se voir SUR la carte teintee : --v2-tint-2 (12 %) est
       trop proche de --v2-tint-1 (6 %) pour faire un bord. On prend la couleur
       des contours de champs, qui existe dans les deux themes. */
    border: 1px dashed var(--mud-palette-lines-inputs, rgba(0, 0, 0, .3));
    background-color: var(--v2-tint-1);
}

/* Panneau depliable pose a l interieur d un .v2-panel (legende de statuts,
   aide contextuelle) : il ne doit pas se lire comme une deuxieme carte, donc ni
   ombre ni fond propre, juste un filet. */
.v2-legend.mud-expansion-panels .mud-expand-panel {
    background-color: transparent;
    box-shadow: none;
    border: 1px solid var(--v2-tint-2);
    border-radius: 10px;
}

/* ============================================================================
   Modales  (.v2-dlg)
   ----------------------------------------------------------------------------
   Le cadre reste celui de MudBlazor : on ne redessine pas la boite de dialogue,
   on lui donne le meme en-tete que les ecrans refondus (pastille d icone +
   titre + sous-titre) et on separe titre et actions par un filet, pour que le
   corps se lise comme un bloc a part. Une modale V1 n avait qu une chaine de
   titre passee a ShowAsync, sans icone ni contexte.
   ============================================================================ */
.v2-dlg .mud-dialog-title {
    border-bottom: 1px solid var(--v2-tint-2);
}

.v2-dlg .mud-dialog-actions {
    border-top: 1px solid var(--v2-tint-2);
    gap: 8px;
}

.v2-dlg-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Pastille d icone : meme langage que les tuiles d indicateur (.v2-kpi-icon). */
.v2-dlg-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--mud-palette-primary-rgb), .13);
}

.v2-dlg-heading {
    min-width: 0;
}

.v2-dlg-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* ============================================================================
   Complements (14/09/2026) — ajouts seuls, aucune regle existante modifiee.
   ============================================================================ */

/* Largeur de lecture des ecrans de fiche et de saisie. Sans elle, sur un ecran
   large, cinq champs s etalent sur 1900px et la carte devient un grand vide. */
/* Toutes les pages s etirent desormais sur toute la largeur, sans exception
   (retour de Lucas du 30/09/2026, "comme Factures fournisseurs") : les trois
   largeurs gardent leur classe pour ne pas toucher aux pages, mais n ont plus
   de plafond. */
.v2-page {
    max-width: 100%;
}

.v2-page-narrow {
    max-width: 100%;
}

/* Pleine largeur : les tableaux a beaucoup de colonnes (factures, e-reporting)
   n ont pas de "largeur de lecture" a proteger comme une fiche — au contraire,
   la largeur de lecture les serrait et aggravait le manque de place entre
   colonnes (retour de Lucas du 29/09/2026, "on va mettre toute la largeur"
   pour Factures clients/fournisseurs et e-Reporting). */
.v2-page-wide {
    max-width: 100%;
}

/* .v2-panel porte height:100% pour que deux panneaux poses cote a cote dans une
   MudGrid s alignent. Un panneau seul dans le flux de la page n a pas a s etirer
   sur toute la hauteur disponible : il se remplit alors de vide. */
.v2-panel-auto {
    height: auto;
}

/* Bouton d aide loge dans un en-tete de colonne triable. Compact, pour ne pas
   changer la hauteur du bandeau de titres. */
.v2-th-help {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
}

.v2-th-help .mud-button-root {
    padding: 2px;
    min-width: 0;
}

.v2-th-help .mud-icon-root {
    font-size: 1rem;
}

/* Valeur d enumeration cliquable (pastille de statut dans une cellule ou un
   champ) : elle ouvre la fenetre qui explique toutes les valeurs possibles. Le
   pointeur et le soulignement au survol disent que c est cliquable ; sans cela
   personne ne decouvre la fenetre. */
.v2-td .mud-link,
.v2-field .mud-link {
    cursor: pointer;
}

.v2-td .mud-link:hover .v2-status,
.v2-field .mud-link:hover .v2-status {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Lisibilite des libellES (14/09/2026) ---------------------------------
   Les libelles de colonne et de champ etaient en --mud-palette-text-disabled
   (30 % d opacite en theme sombre) SUR une carte deja grise : en petit corps,
   en majuscules et espaces, le texte disparaissait. Le libelle dit QUELLE
   information on regarde — il doit se lire sans effort, meme s il reste
   subordonne a la valeur. On remonte donc d un cran : text-primary pour les
   libelles porteurs, text-secondary pour ceux qui ne servent qu au repli
   mobile. Les regles d origine ne sont pas touchees, celles-ci les surchargent
   et se retirent d un bloc. */

.v2-field-label,
.v2-th,
.v2-th-group-title {
    color: var(--mud-palette-text-primary);
}

/* Libelle repete dans la cellule : il ne s affiche qu en dessous de 1200px,
   quand le bandeau d en-tetes disparait. Un cran en dessous des vrais titres,
   pour ne pas concurrencer la valeur qu il annonce. */
.v2-td-label {
    color: var(--mud-palette-text-secondary);
}

/* Valeur d un champ de fiche : c est l information, elle passe devant son
   libelle. */
.v2-field-value {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

/* --- Icone dans une pastille de statut (15/09/2026) -----------------------
   Le point de couleur demandait de se souvenir du code couleur ; l icone de
   l enumeration se reconnait.

   La taille ne se force plus en CSS brut (width/height/font-size en
   !important) : ca se heurtait aux classes internes de MudBlazor selon
   l ordre de chargement des feuilles de style et l icone ressortait plus
   grande que la pastille, decalee, "sort du truc" (retour de Lucas,
   15/09/2026 — capture de reference : l icone nue de UsersList.razor en V1,
   sans aucune taille forcee, parfaitement alignee). La taille passe donc par
   Size="Size.Small" sur le MudIcon lui-meme (ArmonyStatusPill.razor) — le
   parametre officiel de Mud, qui pose la bonne classe sans bras de fer de
   specificite. Ici, seul l alignement dans la pastille : ne pas se
   comprimer quand le libelle est long, et ne rien laisser depasser. */
.v2-pill-icon {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

/* Meme place pour une icone-image (les drapeaux de eLanguage). */
.v2-pill-img {
    flex: 0 0 auto;
    border-radius: 2px;
}

/* Avant le badge colore (15/09/2026), la pastille etait nue et il fallait
   resserrer l ecart pres d une icone. Maintenant que .v2-status porte son
   propre fond, un ecart plus large evite que l icone touche visuellement le
   libelle ("colle" — retour de Lucas). Pas de resserrement particulier :
   meme gap/padding que la pastille a point de couleur. */

/* ============================================================================
   Complement (01/10/2026) — respiration sous la ligne de titre.
   ============================================================================ */

/* La ligne « titre + boutons d action » porte mb-1, soit 4px : la description
   venait se coller dessous, et sur les pages chargees en boutons l ensemble se
   lisait comme un seul bloc (retour de Jessy du 01/10/2026, capture de la page
   Entreprises).

   Le selecteur vise l element qui suit IMMEDIATEMENT le premier enfant du
   conteneur de page : c est exactement la description, sur les 74 pages du
   design V2, qui suivent toutes la meme structure. Une description placee
   ailleurs dans la page n est pas touchee, et aucune n a besoin d etre
   modifiee une par une.

   margin-top plutot que de retoucher le mb-1 de l en-tete : les utilitaires
   d espacement de MudBlazor portent !important, et surcharger mb-1 obligerait
   a repondre !important sur une regle de mise en page. */
.v2-page > :first-child + .mud-typography-subtitle2,
.v2-page-narrow > :first-child + .mud-typography-subtitle2,
.v2-page-wide > :first-child + .mud-typography-subtitle2 {
    margin-top: 15px;
}