/* SOLVEO — feuille de style — revision du 27/08/2026, entete en position:fixed */
/* =====================================================================
   Solveo — feuille de style
   ---------------------------------------------------------------------
   Charte JANSSENS Law Firm, palette « pétrole ». L'ancienne feuille
   reprenait le bleu Microsoft (#0F6CBD) et la grammaire Fluent : une
   interface d'éditeur de logiciel, pas celle d'un cabinet.

   Parti pris : l'application est un DOSSIER. Tout ce qu'elle affiche se
   rattache à un seul sinistre. D'où :
     - le rappel du dossier en permanence dans la barre d'application ;
     - des chiffres alignés en colonnes, en chasse fixe, comme un livre
       de comptes — les montants sont ce que l'on vient lire ;
     - des filets pétrole d'un pixel plutôt que des ombres portées ;
     - aucune couleur décorative : le pétrole signale, il n'habille pas.

   Les noms de classes existants sont CONSERVÉS : les écrans n'ont pas
   besoin d'être réécrits pour bénéficier de cette feuille.
   ===================================================================== */

:root{
  /* --- Palette de la maison --------------------------------------- */
  --petrole:#147599;          /* couleur principale                    */
  --petrole-fonce:#0E5B77;    /* survol, texte sur fond pâle           */
  --petrole-nuit:#0A3F53;     /* barre d'application                   */
  --pale:#EAF1F3;             /* fonds, surlignages                    */
  --filet:#B9D0D8;            /* bordures et filets                    */
  --encre:#17282D;            /* texte et titres                       */
  --gris:#7D8A90;             /* mentions secondaires                  */

  /* --- Dérivés de travail ----------------------------------------- */
  --fond:#F4F7F8;             /* fond de page                          */
  --papier:#FFFFFF;           /* fond des fiches                       */
  --papier2:#FAFCFC;          /* alternance, en-têtes de tableau       */
  --trait:#DCE6EA;            /* filet neutre, plus discret que --filet*/
  --encre2:#4A5B61;           /* texte secondaire                      */
  --encre3:#8A979C;           /* texte tertiaire                       */

  /* --- États ------------------------------------------------------- */
  --ok:#1B6B4C;   --ok-f:#EDF6F1;  --ok-b:#A8CFBC;
  --att:#8A5A00;  --att-f:#FDF6EA; --att-b:#E8CE9A;
  --ko:#9E2A2B;   --ko-f:#FBEFEF;  --ko-b:#E3AFAF;

  /* --- Formes ------------------------------------------------------ */
  --r-s:3px; --r-m:6px; --r-l:10px;
  --sh1:0 1px 2px rgba(23,40,45,.05);
  --sh2:0 1px 3px rgba(23,40,45,.07), 0 1px 2px rgba(23,40,45,.05);
  --sh4:0 4px 12px rgba(23,40,45,.09);
  --sh8:0 10px 30px rgba(23,40,45,.13);

  /* --- Typographie ------------------------------------------------- */
  --police:"Avenir Next","Avenir Next LT Pro","Jost","Segoe UI Variable Text",
           "Segoe UI",system-ui,-apple-system,sans-serif;

  /* --- Rythme vertical --------------------------------------------- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;

  --barre:52px;               /* hauteur de la barre d'application     */
}

*{box-sizing:border-box}
/* min-height, JAMAIS height.

   Avec height:100%, body mesure exactement la hauteur de la fenetre et le
   contenu deborde. Or position:sticky est confine par son bloc conteneur :
   l'entete petrole, enfant de body, ne pouvait donc coller que sur les
   100 premiers vh, puis disparaissait. La barre d'actions, elle, vit dans
   .zone qui a la hauteur du contenu — elle continuait de coller, et se
   retrouvait a flotter seule sous un vide.

   min-height laisse body grandir avec le contenu : les deux barres
   restent en haut, quelle que soit la longueur de la page. */
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:var(--police);
  font-size:14.5px;line-height:1.5;
  color:var(--encre);background:var(--fond);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
[hidden]{display:none !important}

/* Anneau de mise au point visible partout : l'écran de saisie s'utilise
   beaucoup au clavier, en enchaînant les frais. */
:focus-visible{
  outline:2px solid var(--petrole);outline-offset:2px;border-radius:var(--r-s);
}

a{color:var(--petrole);text-underline-offset:2px}
a:hover{color:var(--petrole-fonce)}

/* =====================================================================
   1. Barre d'application — marque et bouton de menu
   ===================================================================== */

/* POSITION FIXED, et non sticky.

   Un element sticky est confine par son bloc conteneur : il ne colle que
   tant qu'il reste dans la boite de son parent, puis il s'en va avec elle.
   L'entete etait ainsi tributaire de la hauteur de body — et la moindre
   regle de mise en page ailleurs pouvait la faire repartir.

   Fixed la sort du flux et l'ancre au viewport : elle ne bouge plus, quoi
   qu'il arrive au-dessus d'elle. En contrepartie elle ne pousse plus rien,
   d'ou le padding-top pose sur .corps — sans lui, le contenu commencerait
   dessous. */
.entete{
  position:fixed;top:0;left:0;right:0;
  height:var(--barre);
  background:var(--petrole-nuit);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--e4);
  z-index:40;
}

/* La marque. Un clic ramene a l'accueil, rechargement compris. */
.marque{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;color:#fff;cursor:pointer;
  padding:6px 4px;border-radius:var(--r-m);
}
.marque:hover{color:#fff;background:rgba(255,255,255,.07)}
.sceau{
  width:26px;height:26px;flex:0 0 26px;border-radius:7px;
  background:var(--petrole);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;line-height:1;
}
.mot{font-size:14.5px;font-weight:600;letter-spacing:.15em;white-space:nowrap}
/* Le xi remplace le E, exactement comme dans le logotype du cabinet. */
.xi{font-weight:500}

.burger{
  all:unset;box-sizing:border-box;cursor:pointer;
  width:40px;height:40px;border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.burger:hover{background:rgba(255,255,255,.12)}
.burger .ic{width:22px;height:22px;flex:0 0 22px}

/* =====================================================================
   2. Ossature et tiroir de navigation
   ===================================================================== */

/* padding-top : la place que l'entete fixe n'occupe plus dans le flux.
   box-sizing global a border-box, min-height:100vh tient donc compte du
   padding — la page fait bien un ecran au minimum, pas un de plus. */
.corps{display:flex;min-height:100vh;padding-top:var(--barre)}
.zone{flex:1;min-width:0;display:flex;flex-direction:column}

/* Voile : ferme le tiroir au moindre clic a cote. */
.voile{
  position:fixed;inset:0;z-index:55;
  background:rgba(10,63,83,.42);
}

.tiroir{
  position:fixed;top:0;right:0;bottom:0;z-index:60;
  width:min(86vw,320px);
  background:var(--papier);border-left:1px solid var(--trait);
  box-shadow:var(--sh8);
  padding:var(--e4) 0 var(--e5);
  overflow-y:auto;
  display:flex;flex-direction:column;
  animation:tiroir-entre .16s ease-out;
}
@keyframes tiroir-entre{from{transform:translateX(100%)}to{transform:translateX(0)}}

.tiroir .grp{
  font-size:10.5px;font-weight:700;color:var(--gris);
  text-transform:uppercase;letter-spacing:.11em;
  padding:var(--e4) var(--e4) var(--e1);
}
.tiroir .grp:first-child{padding-top:var(--e2)}

.tiroir .entree{
  all:unset;box-sizing:border-box;cursor:pointer;
  display:flex;align-items:center;gap:11px;width:100%;
  padding:12px var(--e4);font-family:inherit;font-size:14.5px;
  color:var(--encre);text-decoration:none;line-height:1.3;
  border-left:3px solid transparent;
}
.tiroir .entree:hover{background:var(--papier2);color:var(--petrole-fonce)}
.tiroir .entree .ic{color:var(--gris);flex:0 0 18px;width:18px;height:18px}
.tiroir .entree:hover .ic{color:var(--petrole)}
.tiroir .entree.actif{
  background:var(--pale);color:var(--petrole-fonce);font-weight:600;
  border-left-color:var(--petrole);
}
.tiroir .entree.actif .ic{color:var(--petrole)}

.tiroir .fermeture{
  margin-top:auto;color:var(--encre2);
  border-top:1px solid var(--trait);padding-top:14px;padding-bottom:14px;
}

/* =====================================================================
   3. Titre de page et barre de commandes
   ===================================================================== */

.titre{padding:var(--e5) var(--e6) var(--e4);background:var(--fond)}
.titre h1{
  font-size:23px;font-weight:600;margin:0;
  letter-spacing:-.015em;line-height:1.2;color:var(--encre);
}
.titre p,.titre .chapeau{
  margin:5px 0 0;color:var(--encre2);font-size:13.5px;max-width:70ch;
}

/* La barre d'actions se colle SOUS l'entete petrole et n'en decroche pas.

   Elle decrochait pour deux raisons cumulees :

     • une marge de 16 px la separait du titre ; une fois collee, cette
       marge disparaissait du flux mais le fond de page continuait de se
       voir a travers, entre l'entete et elle ;
     • top valait exactement la hauteur de l'entete. Sur un ecran a
       densite fractionnaire — Windows a 125 % ou 150 % — l'arrondi
       sub-pixel laisse passer un demi-pixel, par lequel on voit defiler
       le contenu. C'est ce liseré scintillant qui donne l'impression que
       les deux bandeaux se detachent.

   Le remede tient en deux traits : plus de marge, et un chevauchement
   d'un pixel qui absorbe l'arrondi. Le titre reprend l'espacement en
   padding, pour que rien ne bouge en haut de page. */
.commandes{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  padding:var(--e3) var(--e6);margin-top:0;
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
  background:var(--papier);
  position:sticky;top:calc(var(--barre) - 1px);z-index:20;
}
.cmd{
  all:unset;box-sizing:border-box;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:var(--r-m);
  font-family:inherit;font-size:13.5px;font-weight:500;color:var(--encre);
  text-decoration:none;white-space:nowrap;
}
.cmd:hover{background:var(--pale);color:var(--petrole-fonce)}
.cmd .ic{color:var(--petrole)}
.cmd.sep{width:1px;height:20px;background:var(--trait);padding:0;margin:0 var(--e2);pointer-events:none}
.cmd[disabled]{color:var(--encre3);cursor:not-allowed;background:none}
.cmd[disabled] .ic{color:var(--encre3)}

.contenu{
  padding:var(--e5) var(--e6) 56px;
  display:flex;flex-direction:column;gap:var(--e5);
  max-width:1320px;
}
/* L'accueil n'a ni titre ni barre de commandes : sans ce rattrapage, les
   tuiles viendraient se coller sous la barre d'application. */
.contenu-accueil{padding-top:var(--e6)}

/* Titre lu par les lecteurs d'écran et visé par FocusOnNavigate, sans
   occuper un pixel à l'écran. */
.hors-ecran{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* =====================================================================
   4. Fiches
   ===================================================================== */

.fiche{
  background:var(--papier);
  border:1px solid var(--trait);border-radius:var(--r-l);
  box-shadow:var(--sh1);overflow:hidden;
}
.fiche>header{
  padding:var(--e3) var(--e4);
  border-bottom:1px solid var(--trait);background:var(--papier2);
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.fiche>header .sec{font-weight:400;color:var(--encre2);font-size:12.5px}
.fiche .in{padding:var(--e4)}
.fiche .in.plat{padding:0}

/* Encart de règle métier — écran « frais suivant ». */
.encart{
  border:1px solid var(--filet);border-radius:var(--r-m);
  background:var(--pale);overflow:hidden;
}
.encart .tete{
  padding:9px var(--e3);border-bottom:1px solid var(--filet);
  font-size:12px;font-weight:700;color:var(--petrole-fonce);
  text-transform:uppercase;letter-spacing:.06em;
}
.encart .dedans{padding:var(--e3);background:var(--papier)}

/* =====================================================================
   5. Tuiles chiffrées du tableau de bord
   ===================================================================== */

.tuiles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e3)}
.tuile{
  background:var(--papier);
  /* Le filet pétrole en tête est porté par la BORDURE de la carte, et non
     par un pseudo-élément posé par-dessus : seule une vraie bordure épouse
     le rayon des angles. Un rectangle superposé coupait la courbe. */
  border:1px solid var(--trait);
  border-top:3px solid var(--petrole);
  border-radius:var(--r-l);padding:var(--e4) var(--e4) var(--e3);
  display:flex;flex-direction:column;gap:var(--e1);min-width:0;
  box-shadow:var(--sh1);
}
.tuile .k{
  font-size:11px;font-weight:700;color:var(--gris);
  text-transform:uppercase;letter-spacing:.08em;line-height:1.35;
}
.tuile .v{
  font-size:29px;font-weight:300;color:var(--encre);line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:2px;
}
.tuile .n{font-size:12px;color:var(--encre3);line-height:1.35}
.tuile.att{border-color:var(--att-b);border-top-color:var(--att);background:var(--att-f)}
.tuile.att .v{color:var(--att);font-weight:400}
.tuile.retard{border-color:var(--ko-b);border-top-color:var(--ko);background:var(--ko-f)}
.tuile.retard .k{color:var(--ko)}
.tuile.retard .v{color:var(--ko);font-weight:400}
.tuile.retard .n{color:var(--ko)}

/* Les actions, toujours les memes, toujours au meme endroit : en tete de
   l'accueil. Deux en temps normal, trois quand des demandes attendent leur
   imputation. */
/* QUATRE COLONNES FIXES. Deux tuiles seulement, ou trois, ou quatre : la
   grille ne bouge pas, chaque tuile occupe une colonne et garde sa place.
   Une tuile qui s'elargit parce que sa voisine a disparu deplace le pouce
   d'un ecran a l'autre — c'est exactement ce qu'il ne faut pas. */
.boutons-tuile{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3)}
.bt-tuile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--e2);min-height:96px;padding:var(--e4) var(--e3);
  text-align:center;text-decoration:none;
  background:var(--papier);border:1px solid var(--filet);
  border-radius:var(--r-l);color:var(--encre);box-shadow:var(--sh1);
}
.bt-tuile:hover{border-color:var(--petrole);background:var(--pale);color:var(--petrole-fonce)}
.bt-tuile .ic{width:24px;height:24px;flex:0 0 24px;color:var(--petrole)}
.bt-tuile span{font-size:13.5px;font-weight:600;line-height:1.3}

.bt-tuile.p{background:var(--petrole);border-color:var(--petrole);color:#fff}
.bt-tuile.p:hover{background:var(--petrole-fonce);border-color:var(--petrole-fonce);color:#fff}
.bt-tuile.p .ic{color:#fff}

/* =====================================================================
   6. Fil des étapes
   ===================================================================== */

.etapes{display:flex;align-items:stretch;flex-wrap:wrap;gap:0}
.etape{
  display:flex;align-items:center;gap:9px;
  padding:10px var(--e4) 10px var(--e3);
  background:var(--papier);border:1px solid var(--trait);
  font-size:13px;color:var(--encre2);min-width:0;
}
.etape:first-child{border-radius:var(--r-m) 0 0 var(--r-m)}
.etape:last-child{border-radius:0 var(--r-m) var(--r-m) 0}
.etape+.etape{border-left:0}
.etape .n{
  width:21px;height:21px;flex:0 0 21px;border-radius:50%;
  background:var(--trait);color:var(--encre2);
  font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.etape.act{
  background:var(--pale);border-color:var(--filet);
  color:var(--petrole-fonce);font-weight:600;
}
.etape.act .n{background:var(--petrole);color:#fff}
.etape.fait .n{background:var(--ok);color:#fff}
.etape.fait .n .ic{width:12px;height:12px;flex:0 0 12px;vertical-align:middle}

/* =====================================================================
   7. Tableaux — le livre de comptes
   ===================================================================== */

table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  text-align:left;font-size:11px;font-weight:700;color:var(--gris);
  text-transform:uppercase;letter-spacing:.07em;
  padding:10px var(--e3);white-space:nowrap;
  background:var(--papier2);border-bottom:1px solid var(--filet);
}
tbody td{
  padding:10px var(--e3);border-bottom:1px solid var(--trait);
  vertical-align:middle;
}
/* Sur un ecran tactile, :hover RESTE apres le toucher : la ligne touchee
   gardait sa teinte jusqu'au tap suivant. On ne le pose donc que la ou un
   vrai survol existe. */
@media (hover:hover){
  tbody tr:hover td{background:var(--pale)}
}
tbody tr:last-child td{border-bottom:0}

.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  letter-spacing:.01em;white-space:nowrap;color:var(--encre2);
}
.sous{font-size:12px;color:var(--gris)}

.tot td{
  border-top:2px solid var(--filet);border-bottom:0;
  font-weight:600;background:var(--papier2);
}

/* Ligne en retard : teinte a peine posee, la pastille porte le message. */
tbody tr.ret td{background:var(--ko-f)}
tbody tr.ret:hover td{background:#F7E3E3}

.lien{color:var(--petrole);cursor:pointer;font-weight:500}
.lien:hover{text-decoration:underline}

/* =====================================================================
   8. Pastilles d'état
   ===================================================================== */

.past{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;
  padding:2px 9px;border-radius:11px;white-space:nowrap;
  border:1px solid var(--trait);background:var(--papier2);color:var(--encre2);
}
.past::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--encre3)}
.past.p0{background:var(--ok-f);border-color:var(--ok-b);color:var(--ok)}
.past.p0::before{background:var(--ok)}
.past.p1{background:var(--att-f);border-color:var(--att-b);color:var(--att)}
.past.p1::before{background:var(--att)}
.past.p2{background:var(--ko-f);border-color:var(--ko-b);color:var(--ko)}
.past.p2::before{background:var(--ko)}
.past.info{background:var(--pale);border-color:var(--filet);color:var(--petrole-fonce)}
.past.info::before{background:var(--petrole)}

/* =====================================================================
   9. Boutons
   ===================================================================== */

.bt{
  all:unset;box-sizing:border-box;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:13.5px;font-weight:500;
  padding:7px 14px;border-radius:var(--r-m);
  border:1px solid var(--filet);background:var(--papier);color:var(--encre);
  white-space:nowrap;text-decoration:none;text-align:center;
}
.bt:hover{background:var(--pale);border-color:var(--petrole);color:var(--petrole-fonce)}
.bt.p{background:var(--petrole);border-color:var(--petrole);color:#fff;font-weight:600}
.bt.p:hover{background:var(--petrole-fonce);border-color:var(--petrole-fonce);color:#fff}
.bt.s{font-size:12.5px;padding:4px 10px}
.bt[disabled]{
  color:var(--encre3);background:var(--papier2);
  border-color:var(--trait);cursor:not-allowed;
}
.bt[disabled]:hover{background:var(--papier2);border-color:var(--trait);color:var(--encre3)}

.rangee{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center}
.rangee.fin{justify-content:flex-end}

/* Bouton ne portant qu'une icône : la cible reste carrée et assez large
   pour le pouce, l'intitulé passe par title et aria-label. */
.bt.ico{padding:6px 9px;gap:0}
.bt.ico .ic{width:15px;height:15px;flex:0 0 15px;vertical-align:middle}
.bt.danger{color:var(--ko);border-color:var(--ko-b)}
.bt.danger:hover{background:var(--ko-f);border-color:var(--ko);color:var(--ko)}

/* Les actions d'un écran de saisie : pleine largeur, sous le formulaire,
   là où le geste s'arrête. */
.actions{display:flex;gap:var(--e2);flex-wrap:wrap}
.actions .bt{flex:1 1 220px;padding:11px 16px;font-size:14.5px}

/* =====================================================================
   10. Champs
   ===================================================================== */

.champs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--e4);
}
label.c{display:block;min-width:0}
.c>span{
  display:block;font-size:11.5px;font-weight:700;color:var(--gris);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;
}

input:not([type=file],[type=checkbox],[type=radio],[type=button],
           [type=submit],[type=reset],[type=range],[type=color],[type=image]),
select,textarea{
  width:100%;font-family:inherit;font-size:14px;line-height:1.4;
  padding:8px 10px;color:var(--encre);background:var(--papier);
  border:1px solid var(--filet);border-radius:var(--r-m);
  transition:border-color .12s,box-shadow .12s;
}
input:hover,select:hover,textarea:hover{border-color:var(--gris)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--petrole);
  box-shadow:0 0 0 3px rgba(20,117,153,.15);
}
input[readonly]{
  background:var(--papier2);color:var(--encre2);border-color:var(--trait);
  cursor:default;
}
input[readonly]:hover{border-color:var(--trait)}
select{cursor:pointer}

input.err,.champ-invalide{border-color:var(--ko)}
input.err:focus,.champ-invalide:focus{box-shadow:0 0 0 3px rgba(158,42,43,.15)}

.msg{display:flex;align-items:center;gap:5px;font-size:12px;margin-top:5px;color:var(--encre2)}
.msg .ic{flex:0 0 13px;color:currentColor}
.msg.ko{color:var(--ko)}

/* Le retour de la communication structuree se cale sous le champ, a droite,
   la ou finit la saisie. */
.msg.droite{justify-content:flex-end;text-align:right}
.message-validation{color:var(--ko);font-size:12px;margin-top:5px;display:block}
.msg.go{color:var(--ok)}

/* =====================================================================
   11. Bandeaux d'information
   ===================================================================== */

.bandeau{
  display:flex;gap:10px;align-items:flex-start;
  padding:11px var(--e3);border-radius:var(--r-m);
  font-size:13.5px;line-height:1.5;
  border:1px solid var(--filet);border-left:3px solid var(--petrole);
  background:var(--pale);color:var(--encre);
}
.bandeau .ic{flex:0 0 16px;margin-top:2px;color:var(--petrole)}
.bandeau b{font-weight:600}
.bandeau.w{background:var(--att-f);border-color:var(--att-b);border-left-color:var(--att)}
.bandeau.w .ic{color:var(--att)}
.bandeau.d{background:var(--ko-f);border-color:var(--ko-b);border-left-color:var(--ko)}
.bandeau.d .ic{color:var(--ko)}
.bandeau.g{background:var(--ok-f);border-color:var(--ok-b);border-left-color:var(--ok)}
.bandeau.g .ic{color:var(--ok)}

.rem{font-size:12.5px;color:var(--encre2);margin:0;line-height:1.55}

/* --- Pastille de notification -------------------------------------------
   Elle s'affiche au ras du bouton qui vient d'agir, puis s'efface seule.
   L'effacement est une animation CSS : aucun minuteur cote serveur, donc
   aucun aller-retour Blazor pour masquer un texte.
   Une ERREUR ne s'efface pas — elle reste jusqu'au geste suivant. */
.pastille{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:500;line-height:1.3;
  border:1px solid var(--ok-b);background:var(--ok-f);color:var(--ok);
  white-space:nowrap;
  animation:pastille-entre .18s cubic-bezier(.2,.8,.3,1) both,
            pastille-sort  .3s  ease 3.2s both;
}
.pastille .ic{flex:0 0 15px;color:currentColor}

.pastille.info{
  border-color:var(--filet);background:var(--pale);color:var(--petrole-fonce);
}

.pastille.err{
  border-color:var(--ko-b);background:var(--ko-f);color:var(--ko);
  white-space:normal;
  animation:pastille-entre .18s cubic-bezier(.2,.8,.3,1) both;
}

@keyframes pastille-entre{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes pastille-sort{to{opacity:0;visibility:hidden}}

/* Un message qui glisse est un message qu'on ne lit pas quand on a demande
   moins d'animation. Il apparait alors sans deplacement, et disparait
   toujours — l'effacement n'est pas un effet, c'est le comportement. */
@media (prefers-reduced-motion:reduce){
  .pastille{animation:none;opacity:1}
  .pastille:not(.err){animation:pastille-sort .01s ease 3.2s both}
}

/* Dans une barre d'actions, la pastille se pose apres les boutons sans
   s'etirer comme eux. */
.actions{align-items:center}
.actions .pastille,.commandes .pastille{flex:0 0 auto;margin-left:4px}

/* =====================================================================
   12. Feuilles de preuve — aperçu
   ===================================================================== */

.feuilles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--e3);
}
.a4{
  border:1px solid var(--filet);border-radius:var(--r-m);
  background:var(--papier);overflow:hidden;box-shadow:var(--sh1);
}
.a4 .hd{
  padding:7px 11px;background:var(--papier2);border-bottom:1px solid var(--trait);
  font-size:11px;font-weight:700;color:var(--gris);
  text-transform:uppercase;letter-spacing:.05em;
  display:flex;justify-content:space-between;gap:var(--e2);
}
.a4.forf{border-color:var(--petrole)}
.a4.forf .hd{background:var(--pale);color:var(--petrole-fonce)}
.a4 .zn{padding:10px 11px;font-size:12.5px;min-height:46px}
.a4 .zn+.zn{border-top:1px dashed var(--filet)}
.a4 .zn .t{font-weight:600;line-height:1.35}
.a4 .zn .d{color:var(--encre2);font-size:12px;margin-top:2px;font-variant-numeric:tabular-nums}
/* .vide sert aussi d'écran vide pleine largeur : à l'intérieur d'une
   zone de feuille, ce n'est qu'une mention en italique. */
.a4 .zn .vide{
  color:var(--encre3);font-style:italic;font-size:12.5px;
  padding:0;text-align:left;display:inline;
}

/* =====================================================================
   13. Dépôt de fichiers
   ===================================================================== */

.depot{
  border:1.5px dashed var(--filet);border-radius:var(--r-m);
  padding:var(--e5);text-align:center;background:var(--papier2);
}
.depot:hover{border-color:var(--petrole);background:var(--pale)}
.depot .g{font-size:14.5px;font-weight:600;color:var(--encre)}
.depot .p{font-size:12.5px;color:var(--encre2);margin-top:3px}
.depot input[type=file]{margin-top:var(--e3);font-size:13px}

.fich{
  display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  padding:11px var(--e3);margin-top:var(--e3);
  background:var(--pale);border:1px solid var(--filet);
  border-left:3px solid var(--petrole);border-radius:var(--r-m);
}
.fich .n{flex:1;min-width:170px;font-size:13.5px;font-weight:600}
.fich .m{font-size:11.5px;color:var(--encre2);font-weight:400;margin-top:2px}

.sorties{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e2);
}
.sortie{
  display:block;border:1px solid var(--trait);border-radius:var(--r-m);
  padding:11px var(--e3);background:var(--papier);
  color:var(--encre);text-decoration:none;
}
/* La même tuile sert de simple encadré et de lien de téléchargement. */
a.sortie:hover{border-color:var(--petrole);background:var(--pale);color:var(--encre)}
a.sortie:hover .f{color:var(--petrole-fonce)}
.sortie .q{
  font-size:10.5px;color:var(--gris);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
}
.sortie .f{font-size:13.5px;margin-top:4px;word-break:break-all}
.sortie .m{font-size:11.5px;color:var(--encre3);margin-top:2px}
.sortie.mis{background:var(--pale);border-color:var(--petrole)}

/* Fichier pas encore produit : la tuile reste visible — elle annonce ce qui
   viendra — mais elle est inerte. Mieux vaut une case en attente qu'un lien
   qui mène à une erreur. */
.sortie.abs{
  background:var(--papier2);border-style:dashed;
  cursor:not-allowed;pointer-events:none;
}
.sortie.abs .q,.sortie.abs .f,.sortie.abs .m{color:var(--encre3)}

/* =====================================================================
   14. Ventilation d'un paiement
   ===================================================================== */

.nav1{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);flex-wrap:wrap;
  padding:10px var(--e4);font-size:13.5px;
  background:var(--papier);border:1px solid var(--trait);border-radius:var(--r-m);
}
.chiff{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--e3);margin-top:var(--e4);
}
.chiff .b{border:1px solid var(--trait);border-radius:var(--r-m);padding:11px var(--e3)}
.chiff .b .k{
  font-size:10.5px;color:var(--gris);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
}
.chiff .b .v{
  font-size:22px;font-weight:300;font-variant-numeric:tabular-nums;
  margin-top:3px;letter-spacing:-.01em;
}
.chiff .b.acc{background:var(--pale);border-color:var(--filet)}
.chiff .b.acc .v{color:var(--petrole-fonce)}
.chiff .b.sol{background:var(--att-f);border-color:var(--att-b)}
.chiff .b.sol .v{color:var(--att)}

/* =====================================================================
   15. Écran vide, attente
   ===================================================================== */

.vide{padding:44px var(--e5);text-align:center;color:var(--encre2);font-size:13.5px}
.vide .gros{font-size:15.5px;color:var(--encre);font-weight:600;margin-bottom:5px}

.patiente{display:inline-flex;align-items:center;gap:10px;color:var(--encre2);font-size:13.5px}
.rotor{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--filet);border-top-color:var(--petrole);
  animation:tourne .8s linear infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}

/* =====================================================================
   16. Icônes
   ===================================================================== */

.ic{width:16px;height:16px;flex:0 0 16px;display:inline-block;vertical-align:-3px}

/* =====================================================================
   17. Saisie rapide — tuiles de prestation et pavé numérique
   ---------------------------------------------------------------------
   La saisie se fait souvent debout, sur téléphone. Cibles de 44 px au
   minimum, une seule main, aucun menu déroulant.
   ===================================================================== */

.tuiles-saisie{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--e3);
}
.tuile-t{
  all:unset;box-sizing:border-box;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--e2);min-height:112px;padding:var(--e4) var(--e3);
  text-align:center;color:var(--encre);
  background:var(--papier);border:1px solid var(--filet);
  border-radius:var(--r-l);box-shadow:var(--sh1);
  transition:border-color .12s,background .12s,transform .06s;
}
.tuile-t:hover{border-color:var(--petrole);background:var(--pale)}
.tuile-t:active{transform:scale(.98)}
.tuile-t[aria-pressed="true"]{
  background:var(--petrole);border-color:var(--petrole);color:#fff;
  box-shadow:var(--sh4);
}
/* L'icône était bridée à 16 px par la règle .ic : dans une tuile de
   112 px de haut, elle disparaissait. */
.tuile-t .glyphe{display:flex;align-items:center;justify-content:center;color:var(--petrole)}
.tuile-t .glyphe .ic{width:26px;height:26px;flex:0 0 26px;vertical-align:middle}
.tuile-t[aria-pressed="true"] .glyphe{color:#fff}
.tuile-t .nom{font-size:14.5px;font-weight:600;line-height:1.25}
.tuile-t .regle{font-size:11.5px;color:var(--encre2);line-height:1.35}
.tuile-t[aria-pressed="true"] .regle{color:rgba(255,255,255,.82)}

.ecran-montant{
  font-size:38px;font-weight:200;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;text-align:right;
  padding:var(--e3) var(--e4);margin-bottom:var(--e3);
  color:var(--encre);background:var(--papier2);
  border:1px solid var(--filet);border-radius:var(--r-m);
  max-width:330px;
}
.pave{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2);max-width:330px}
.pave button{
  all:unset;box-sizing:border-box;cursor:pointer;
  min-height:54px;display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:20px;font-variant-numeric:tabular-nums;
  color:var(--encre);background:var(--papier);
  border:1px solid var(--filet);border-radius:var(--r-m);
}
.pave button:hover{background:var(--pale);border-color:var(--petrole)}
.pave button:active{transform:scale(.96);background:var(--pale)}
.pave button.eff{color:var(--ko);font-size:18px}
.pave button.ok{background:var(--petrole);border-color:var(--petrole);color:#fff;font-weight:600}

/* Communication structurée, groupée 3 / 4 / 5 */
/* Le bloc se borne a la largeur des trois champs, sinon il s'etire jusqu'au
   bord du formulaire et le message aligne a droite se retrouve a trente
   centimetres de la saisie qu'il commente. */
.comm-bloc{display:inline-block;max-width:100%}
.comm-struct{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.comm-struct .fixe{color:var(--gris);font-size:15px;font-weight:600}
.comm-struct .sep{color:var(--gris)}
.comm-struct input{
  text-align:center;font-size:16px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;padding:7px 4px;
}
.comm-struct .g3{width:62px}
.comm-struct .g4{width:76px}
.comm-struct .g5{width:92px}

/* =====================================================================
   18. Écran de connexion
   ===================================================================== */

.seuil{
  /* 100vh compte la barre d'URL rétractable de Safari et Chrome mobile :
     la carte se retrouvait poussée sous le bord bas de l'écran. dvh donne
     la hauteur réellement visible ; vh reste le repli. */
  min-height:100vh;
  min-height:100dvh;
  display:grid;place-items:center;
  padding:calc(var(--e5) + env(safe-area-inset-top))
          calc(var(--e4) + env(safe-area-inset-right))
          calc(var(--e5) + env(safe-area-inset-bottom))
          calc(var(--e4) + env(safe-area-inset-left));
  background:
    radial-gradient(1100px 460px at 50% -12%, var(--pale) 0%, var(--fond) 62%),
    var(--fond);
}
.seuil .carte{
  width:100%;max-width:400px;background:var(--papier);
  border:1px solid var(--trait);border-top:3px solid var(--petrole);
  border-radius:var(--r-l);box-shadow:var(--sh8);
  /* 32 px de marge intérieure de chaque côté mangeaient un cinquième de la
     largeur sur un écran de 380 px : la marge suit désormais l'écran. */
  padding:var(--e5) clamp(var(--e4),5.5vw,var(--e6)) var(--e5);
}
.seuil .marque{
  font-size:20px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--petrole);
}
.seuil .sous{font-size:12.5px;color:var(--encre2);margin:6px 0 var(--e5)}
.seuil .c+.c{margin-top:var(--e4)}
.seuil .bt{width:100%;margin-top:var(--e5);padding:10px 14px;font-size:14.5px}

/* =====================================================================
   19. Bandeau d'interruption du circuit Blazor
   ===================================================================== */

#blazor-error-ui{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:1000;
  padding:var(--e3) var(--e5);font-size:13.5px;
  background:var(--ko-f);color:var(--ko);
  border-top:2px solid var(--ko);box-shadow:0 -4px 14px rgba(23,40,45,.12);
}
#blazor-error-ui .recharger{color:var(--ko);text-decoration:underline;cursor:pointer;font-weight:600}
#blazor-error-ui .fermer{float:right;cursor:pointer;padding:0 6px}

/* =====================================================================
   21. Adaptations
   ===================================================================== */

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms;transition-duration:.01ms}
  .rotor{animation-duration:2s}
}

/* Tablette : le plan de site se resserre plutôt que de disparaître. */
@media (max-width:1100px){
  .titre,.commandes,.contenu{padding-left:var(--e5);padding-right:var(--e5)}
}

/* Téléphone : plan de site remplacé par une barre d'onglets basse,
   tableaux transformés en cartes empilées. */
@media (max-width:760px){
  .corps{flex-direction:column}

  .entete{padding:0 var(--e2) 0 var(--e3)}

  .titre{padding:var(--e4) var(--e4) 0}
  .titre h1{font-size:20px}
  /* La barre defile horizontalement plutot que de tronquer : un bouton
     invisible est un bouton perdu. Les separateurs disparaissent et les
     libelles se resserrent pour que les quatre tiennent le plus souvent
     sans qu'on ait a faire glisser. */
  .commandes{padding:var(--e2) var(--e3);gap:0;overflow-x:auto;flex-wrap:nowrap;margin-top:0}
  .commandes .sep{display:none}
  .cmd{padding:9px 7px;gap:5px;font-size:13px;white-space:nowrap;flex:0 0 auto}
  .cmd .ic{flex:0 0 17px;width:17px;height:17px}

  /* La pastille ne pousse pas les boutons hors de la barre : elle passe
     dessous, sur toute la largeur. */
  .commandes .pastille{
    flex:1 0 100%;margin:6px 0 0;white-space:normal;
  }
  .contenu{padding:var(--e4) var(--e4) var(--e5);gap:var(--e4)}

  .champs{grid-template-columns:1fr}
  .tuiles-saisie{grid-template-columns:repeat(2,1fr)}

  /* Quatre colonnes sur 380 px donneraient 80 px par tuile : au telephone,
     et la seulement, on repasse a deux colonnes. */
  .boutons-tuile{grid-template-columns:repeat(2,1fr)}
  .feuilles{grid-template-columns:1fr}
  .ecran-montant,.pave{max-width:none}

  /* Sous 16 px, iOS agrandit la page au moment de la mise au point. */
  input:not([type=file],[type=checkbox],[type=radio],[type=button],
             [type=submit],[type=reset],[type=range],[type=color],[type=image]),
  select{font-size:16px;padding:10px}
  .bt{padding:10px 14px}

  /* Neuf colonnes ne tiennent pas sur 380 px : chaque ligne devient une
     carte, chaque cellule affiche son intitulé à gauche. */
  .table-cartes thead{display:none}
  .table-cartes tbody tr{
    display:block;background:var(--papier);
    border:1px solid var(--trait);border-radius:var(--r-m);
    margin-bottom:var(--e2);padding:10px var(--e3);
  }
  .table-cartes tbody tr:hover td{background:none}
  .table-cartes tbody td{
    display:flex;justify-content:space-between;gap:var(--e3);
    border:0;padding:3px 0;text-align:right;
  }
  .table-cartes tbody td::before{
    content:attr(data-col);
    font-size:11.5px;color:var(--gris);font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;
    text-align:left;flex:0 0 auto;
  }
  /* Une cellule sans contenu ne doit RIEN dessiner : elle laissait sinon
     un rectangle du fond de la fiche au milieu d'une carte. :empty ne
     couvre que le cas strict — on neutralise aussi le fond et le ::before
     des cellules sans intitule. */
  .table-cartes tbody td:empty{display:none}
  .table-cartes tbody td{background:transparent}
  .table-cartes tbody td:not([data-col])::before{content:none}

  /* Un mot trop long — une reference, une description — poussait la carte
     au-dela de l'ecran et rendait le tableau horizontalement defilant. */
  .table-cartes tbody td{overflow-wrap:anywhere;min-width:0}
  /* --- La teinte appartient a la CARTE, pas aux cellules ------------------
     Au bureau, une ligne se colore en teintant ses cellules : il n'y a rien
     entre elles. Devenue carte, la ligne porte un fond et un rembourrage
     propres — les cellules teintees y dessinaient un rectangle de couleur
     au milieu d'un cadre blanc, avec une marge claire tout autour.

     On teinte donc la carte elle-meme, et les cellules redeviennent
     transparentes. La regle vaut pour la ligne en retard comme pour la
     ligne de total, et pour tout etat qu'on ajouterait ensuite. */
  .table-cartes tbody tr.tot{background:var(--pale);border-color:var(--filet)}
  .table-cartes tbody tr.tot td{border-top:0;background:transparent}

  .table-cartes tbody tr.ret{background:var(--ko-f);border-color:var(--ko-b)}
  .table-cartes tbody tr.ret td,
  .table-cartes tbody tr.ret:hover td{background:transparent}

  /* --- Un seul cadre, pas deux -------------------------------------------
     Chaque ligne devenue carte porte deja sa bordure arrondie. La fiche qui
     les contient en dessinait une seconde autour : deux cadres imbriques,
     l'un dans l'autre, avec deux rayons differents. Sur telephone, la fiche
     s'efface donc et laisse ses cartes seules sur le fond de page.

     Son en-tete, lui, garde son cadre : il devient une boite autonome posee
     au-dessus des cartes.

     :has() cible la fiche PAR son contenu, sans avoir a poser une classe
     dans les treize ecrans concernes. Un navigateur qui ne le connait pas
     ignore la regle et garde l'affichage actuel : rien ne casse. */
  .fiche:has(.table-cartes){
    background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;
  }
  /* L'en-tete, lui, GARDE son cadre : il devient une boite a part entiere,
     posee au-dessus des cartes. C'est ce qui distingue un intitule de
     tableau d'un simple titre de section, et la fiche a beau s'effacer, le
     bandeau reste. Meme fond, meme trait, meme graisse qu'au bureau. */
  .fiche:has(.table-cartes)>header{
    border:1px solid var(--trait);border-radius:var(--r-m);
    margin-bottom:var(--e2);
  }

  /* La derniere carte n'a plus a menager d'espace : la fiche n'a plus de
     bord contre lequel se caler. */
  .table-cartes tbody tr:last-child{margin-bottom:0}

}

@media (max-width:420px){
  .tuile .v{font-size:24px}
  .bt-tuile{min-height:86px}
}

/* Impression : ni plan de site, ni barre de commandes. */
@media print{
  .entete,.commandes,.voile,.tiroir,#blazor-error-ui{display:none}
  body{background:#fff}
  .contenu{padding:0;max-width:none}
  .fiche{border-color:#ccc;box-shadow:none;break-inside:avoid}
}