:root{
  --fond:#f6f7f9; --surface:#ffffff; --bord:#d9dde3; --bord-fort:#9aa3ad;
  --texte:#1c2530; --doux:#5d6875; --accent:#1f5fa8; --accent-clair:#eaf2fb;
  --pos:#0f7a3d; --neg:#b3261e; --cumul:#e4e9ef;
  --obj:#eaf2fb; --soins:#f3f0fa; --freq:#f7f9f4; --z38:#f2f4f6; --banque:#fdf8ef;
  --n1:#f1f3f5; --synth:#eef5f1; --fdc:#f6f4ef; --cheque:#f0f4f7;
  /* Les deux fenêtres de la synthèse : le mois et l'exercice. */
  --mois:#1f5fa8; --mois-clair:#eaf2fb;
  --exercice:#6b4a97; --exercice-clair:#f3effa;
  /* Les deux vignettes du bas. Le rythme prend un bleu-vert, distinct du bleu
     du mois. La tenue de caisse reste sur une ardoise neutre : elle est deja
     pleine de voyants verts, ambre et rouges, et un filet de couleur vive leur
     disputerait le regard. */
  --rythme:#0f6f7a; --caisse:#4a5a6b;
  /* Trois scénarios annuels, trois couleurs tenues de la carte au tableau.
     Elles se distinguent aussi en noir et blanc, à l'impression. */
  --sc1:#1f5fa8; --sc1-clair:#eaf2fb;
  --sc2:#0f7a5a; --sc2-clair:#e7f4ef;
  --sc3:#a3620e; --sc3-clair:#fbf1e3;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--fond);color:var(--texte);font-size:13px;
     font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* ------------------------------------------------ pages d'entree */
.centre{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.carte{background:var(--surface);border:1px solid var(--bord);border-radius:10px;
       padding:16px 18px;box-shadow:0 1px 3px rgba(20,30,45,.06)}
.centre .carte{width:100%;max-width:380px;display:flex;flex-direction:column;gap:4px;
               padding:22px 24px;font-size:14px}
h1{font-size:19px;margin:0}
h2{font-size:15px;margin:0 0 2px}
h3{margin:0}
.sous{color:var(--doux);font-size:12px;margin:0}
.aide{color:var(--doux);font-size:12px;margin:8px 0 0;line-height:1.45}
/* Un repère gris dans une case vide se prend pour une valeur : on l'écrit en
   italique, et la ligne au-dessous dit ce qu'il en est. */
input::placeholder{font-style:italic;opacity:.75}
.fait-le{font-size:11.5px;color:var(--pos);white-space:nowrap;align-self:center}
.repere-classeur{margin:6px 0 0;font-size:12px;color:var(--doux);line-height:1.45}
.repere-classeur b{color:var(--texte);font-weight:600}
button.lien{font:inherit;font-size:12px;padding:0;border:0;background:none;
  color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  cursor:pointer}
button.lien:hover{color:var(--texte)}
.centre label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;
              color:var(--doux);margin-top:10px}
input,select{font:inherit;padding:5px 9px;border:1px solid var(--bord);border-radius:6px;
             background:var(--surface);color:inherit}
.centre input{padding:8px 10px;width:100%}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button{font:inherit;padding:5px 12px;border:1px solid var(--bord);border-radius:6px;
       background:var(--surface);color:inherit;cursor:pointer}
button:hover{border-color:var(--bord-fort)}
button.primaire{background:var(--accent);border-color:var(--accent);color:#fff;
                font-weight:600}
button.primaire:hover{background:#1a5091}
button[disabled],input[disabled]{opacity:.55;cursor:default}
.centre button.primaire{margin-top:16px;padding:8px 14px}
.message{min-height:15px;font-size:12px;margin:6px 0 0;color:var(--neg)}
.message.ok{color:var(--pos)}

/* ------------------------------------------------ cadre de l'espace */
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
       padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--bord)}
.marque{font-weight:700;letter-spacing:.02em;font-size:15px}
/* Le statut du compte connecté. Il n'est pas décoratif : ce que l'écran montre
   en dépend — les effectifs du comparatif et les méthodes de calcul ne
   paraissent qu'à l'administrateur. */
.statut{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;
  vertical-align:1px;white-space:nowrap}
.statut.client{background:var(--cumul);color:var(--doux)}
.statut.cabinet{background:var(--accent);color:#fff}
header nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
header select{min-width:160px;max-width:100%}
.onglets{padding:8px 16px 0;background:var(--surface);
         border-bottom:1px solid var(--bord)}
.etat{margin-left:auto;font-size:12px;color:var(--pos);padding-bottom:8px}
.etat.erreur{color:var(--neg)}
main{padding:14px 16px 24px;display:flex;flex-direction:column;gap:14px}

/* ------------------------------------------------ bandeau objectif */
.objectif .entete{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
                  align-items:flex-start}
.reglage{display:flex;flex-direction:column;gap:6px}
.reglage .modes{display:flex;gap:14px;font-size:12px;color:var(--doux)}
.reglage .modes label{display:flex;gap:5px;align-items:center;cursor:pointer}
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
        gap:10px;margin-top:14px}
.petite{border:1px solid var(--bord);border-radius:8px;padding:8px 11px}
.petite h3{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--doux);
           font-weight:600;margin-bottom:3px}
.petite .v{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.petite.pos .v{color:var(--pos)} .petite.neg .v{color:var(--neg)}
/* La carte du cumul porte déjà la couleur de l'exercice : on sait, sans lire
   l'intitulé, qu'elle ne parle pas du même intervalle que ses voisines. */
.petite.du-mois{border-top:2px solid var(--mois);background:var(--mois-clair)}
.petite.de-exercice{border-top:2px solid var(--exercice);background:var(--exercice-clair)}
.petite .frimousse{font-size:15px;margin-left:6px;vertical-align:1px;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
/* Largeur fixe : la colonne reste alignee, avec ou sans frimousse. */
td .frimousse{font-size:12px;margin-left:5px;display:inline-block;width:14px;
  text-align:center;vertical-align:-1px;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}

/* ------------------------------------- les deux fenêtres de la synthèse */
.fenetre{border-left:4px solid var(--bord)}
.fenetre .titre-bloc{display:flex;align-items:baseline;gap:7px}
.fenetre .titre-bloc::before{content:"";width:9px;height:9px;border-radius:50%;
  flex:0 0 auto}
.fenetre.du-mois{border-left-color:var(--mois)}
.fenetre.du-mois .titre-bloc{color:var(--mois)}
.fenetre.du-mois .titre-bloc::before{background:var(--mois)}
.fenetre.du-mois table.indicateurs thead th{background:var(--mois-clair)}
.fenetre.de-exercice{border-left-color:var(--exercice)}
.fenetre.de-exercice .titre-bloc{color:var(--exercice)}
.fenetre.de-exercice .titre-bloc::before{background:var(--exercice)}
.fenetre.de-exercice table.indicateurs thead th{background:var(--exercice-clair)}
.fenetre.du-rythme{border-left-color:var(--rythme)}
.fenetre.du-rythme .titre-bloc{color:var(--rythme)}
.fenetre.du-rythme .titre-bloc::before{background:var(--rythme)}
.fenetre.de-caisse{border-left-color:var(--caisse)}
.fenetre.de-caisse .titre-bloc{color:var(--caisse)}
.fenetre.de-caisse .titre-bloc::before{background:var(--caisse)}

/* ------------------------------------------------ scenarios annuels */
.scenarios{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
           gap:12px;margin-top:14px}
.scenario{border:1px solid var(--bord);border-radius:8px;padding:0 12px 10px;
          display:flex;flex-direction:column;gap:6px;border-top:3px solid var(--bord);
          position:relative}
/* La couleur du scénario, du filet du haut jusqu'à ses colonnes du tableau. */
.scenario.sc1{border-top-color:var(--sc1)} .scenario.sc1 .barre{background:var(--sc1)}
.scenario.sc2{border-top-color:var(--sc2)} .scenario.sc2 .barre{background:var(--sc2)}
.scenario.sc3{border-top-color:var(--sc3)} .scenario.sc3 .barre{background:var(--sc3)}
.scenario.sc1 .total b{color:var(--sc1)}
.scenario.sc2 .total b{color:var(--sc2)}
.scenario.sc3 .total b{color:var(--sc3)}
.scenario.retenu{box-shadow:inset 0 0 0 1px currentColor}
.scenario.retenu.sc1{background:var(--sc1-clair);color:var(--sc1)}
.scenario.retenu.sc2{background:var(--sc2-clair);color:var(--sc2)}
.scenario.retenu.sc3{background:var(--sc3-clair);color:var(--sc3)}
.scenario.retenu > *{color:var(--texte)}
.scenario.retenu .badge{color:inherit}

/* Le total de l'exercice se lit avant les deux montants qui le composent :
   c'est lui qu'on compare d'un scénario à l'autre. */
.scenario .total{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding-top:8px;margin-bottom:2px}
.scenario .total b{font-size:20px;font-variant-numeric:tabular-nums}
.scenario .total .evo{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.scenario .total .evo.pos{color:var(--pos)} .scenario .total .evo.neg{color:var(--neg)}
.scenario .jauges{display:flex;flex-direction:column;gap:3px;margin-bottom:4px}
.scenario .jauge{display:grid;grid-template-columns:52px 1fr auto;gap:7px;
  align-items:center;font-size:11px;color:var(--doux)}
.scenario .jauge .piste{height:8px;background:var(--cumul);border-radius:4px;
  overflow:hidden}
.scenario .jauge .barre{display:block;height:100%;border-radius:4px;background:var(--doux)}
.scenario .jauge .barre.n1{background:var(--bord-fort)}
.scenario .jauge .valeur{font-variant-numeric:tabular-nums}
.scenario .nom{display:flex;gap:6px;align-items:center;justify-content:space-between}
.scenario .nom input{font-weight:600;border-color:transparent;background:transparent;
                     width:100%}
.scenario .nom input:hover,.scenario .nom input:focus{border-color:var(--bord);
                                                      background:var(--surface)}
.scenario .badge{font-size:10px;text-transform:uppercase;letter-spacing:.05em;
                 color:var(--accent);font-weight:700;white-space:nowrap}
.scenario .ligne{display:flex;gap:6px;align-items:center;justify-content:space-between;
                 font-size:12px;color:var(--doux)}
.scenario .ligne input,.scenario .ligne select{width:120px;text-align:right}
.scenario .ligne select{text-align:left}
.scenario textarea{font:inherit;width:100%;min-height:48px;padding:5px 8px;
  border:1px solid var(--bord);border-radius:6px;background:var(--surface);
  color:inherit;resize:vertical}
.scenario .evolution{font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--texte)}
/* Celle du total mène ; celles du détail produits/soins ne servent que
   lorsque les deux métiers partent dans des sens opposés. */
.scenario .total .frimousse{font-size:14px;margin-left:4px}
.scenario .evolution .frimousse{font-size:11px;margin-left:2px}
.scenario .actions{display:flex;gap:6px;margin-top:2px}
.scenario .actions button{flex:1}
.vide{padding:18px;text-align:center;color:var(--doux)}

/* Le tableau des mois reprend, colonne par colonne, la couleur des cartes. */
#tableAnnuels .g-repere{background:var(--n1)}
#tableAnnuels .g-sc1{background:var(--sc1-clair)}
#tableAnnuels .g-sc2{background:var(--sc2-clair)}
#tableAnnuels .g-sc3{background:var(--sc3-clair)}
#tableAnnuels thead .g-sc1{color:var(--sc1)}
#tableAnnuels thead .g-sc2{color:var(--sc2)}
#tableAnnuels thead .g-sc3{color:var(--sc3)}
#tableAnnuels thead th{font-weight:600}

/* ------------------------------------------------ pense-bete et aide */
.afaire{display:flex;flex-direction:column;gap:6px;padding:10px 16px 0}
.afaire .action{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  border:1px solid var(--bord);border-left-width:4px;border-radius:8px;
  padding:7px 12px;background:var(--surface);cursor:pointer;text-align:left;
  font:inherit;color:inherit;width:100%}
.afaire .action:hover{border-color:var(--bord-fort)}
.afaire .action b{font-weight:600}
.afaire .action span{color:var(--doux);font-size:12px}
.afaire .alerte{border-left-color:var(--neg);background:#fdf0ef}
.afaire .attention{border-left-color:#c98a19;background:#fdf8ef}
.afaire .information{border-left-color:var(--accent)}
/* Signaler un manque sans dire comment le combler ne sert personne. Le survol
   suffit sur un poste ; sur tablette, il n'existe pas — d'ou le « Que faire ? ». */
.afaire .action span.quoi-faire{color:var(--accent);font-weight:600;
  text-decoration:underline;text-underline-offset:2px;margin-left:auto}
.afaire .action span.mode-emploi{flex-basis:100%;margin:4px 0 1px;
  color:var(--texte);font-size:12.5px;line-height:1.5;white-space:normal}
dialog{border:1px solid var(--bord);border-radius:10px;padding:0;
       max-width:640px;width:94vw;color:var(--texte);background:var(--surface)}
dialog::backdrop{background:#0006}
dialog h2{margin:0;padding:12px 16px;border-bottom:1px solid var(--bord);font-size:15px}
dialog .contenu{padding:4px 16px 12px;max-height:68vh;overflow:auto;line-height:1.5}
dialog .contenu h3{font-size:13px;margin:14px 0 4px;color:var(--accent)}
dialog .contenu p{margin:0 0 6px;font-size:13px}
dialog .pied{display:flex;justify-content:flex-end;padding:10px 16px;
             border-top:1px solid var(--bord)}

/* ------------------------------------------------ synthese */
.titre-bloc{font-size:13px;margin:0 0 2px}
.deux-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
               gap:14px}
/* Ces tableaux n'avaient aucune largeur : les chiffres se tassaient à gauche
   d'une carte trois fois plus large, et il fallait plisser les yeux. Ils
   occupent maintenant toute leur vignette, colonne par colonne, dans un corps
   un peu plus grand — ce sont les chiffres qu'on vient lire. */
table.indicateurs{width:100%;border-collapse:collapse;font-size:13.5px;
  table-layout:fixed}
table.indicateurs th, table.indicateurs td{padding:5px 9px;text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
table.indicateurs thead th{top:0;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;padding-top:6px;padding-bottom:6px}
table.indicateurs tbody tr + tr td{border-top:1px solid var(--bord)}
table.indicateurs tbody tr:hover td{background:var(--bord-clair, #f4f7fa)}
/* Le libellé est le seul texte de la ligne : il tient la gauche, et il a le
   droit de passer à la ligne plutôt que de pousser les chiffres dehors. */
table.indicateurs th:first-child, table.indicateurs td.libelle{text-align:left;
  white-space:normal;width:33%;padding-right:4px}
table.indicateurs th:nth-child(2), table.indicateurs td:nth-child(2){width:14%}
table.indicateurs th:nth-child(3), table.indicateurs td:nth-child(3){width:13%}
table.indicateurs th:nth-child(4), table.indicateurs td:nth-child(4){width:17%}
table.indicateurs th:nth-child(5), table.indicateurs td:nth-child(5){width:12%}
/* La derniere colonne ne porte pas de largeur : elle prend ce qui reste — onze
   pour cent une fois les autres posees. Il lui en faut autant parce qu'un
   objectif depasse s'ecrit « 103,2 % », trois chiffres la ou les autres n'en
   ont que deux, et le pourcent en plus suffisait a faire apparaitre une barre
   de defilement sur toute la vignette. */
table.indicateurs td.fort{font-weight:600}
table.indicateurs tr.souligne td{border-top:1px solid var(--bord-fort);
  font-weight:600}
/* Les vignettes d'une même rangée gardent la même hauteur : leurs lignes se
   répondent, et deux cartes qui s'arrêtent à des hauteurs différentes cassent
   la rangée. C'est le comportement par défaut d'une grille — il ne faut donc
   surtout pas poser align-items:start, ce que faisait la première version de
   cette règle, en contradiction avec son propre commentaire. */
.deux-colonnes.fenetres{align-items:stretch}
.deux-colonnes.fenetres .carte{margin:0}
.bouton{font:inherit;padding:5px 12px;border:1px solid var(--bord);border-radius:6px;
        background:var(--surface);color:inherit;text-decoration:none;display:inline-block}
.bouton:hover{border-color:var(--bord-fort)}
/* ------------------------------------------- rythme de la semaine */
/* Une semaine se lit debout : sept colonnes en donnent la forme d'un coup
   d'œil, là où sept barres couchées se ressemblaient toutes. */
.semaine{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;
  align-items:end;margin:10px 0 4px}
.semaine .jour{display:flex;flex-direction:column;align-items:center;gap:3px}
.semaine .couronne{height:16px;font-size:13px;line-height:1;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.semaine .colonne{position:relative;width:100%;height:104px;
  display:flex;align-items:flex-end;background:linear-gradient(var(--cumul),
  var(--cumul)) center/1px 100% no-repeat;border-radius:5px 5px 0 0}
/* Une seule couleur pour les sept colonnes. La part d'un jour dans le mois
   n'est ni bonne ni mauvaise : les sept font 100 %, donc si l'une monte une
   autre descend. Les peindre en vert et en rouge faisait du samedi — le
   meilleur jour du magasin — une alerte rouge. Le sens du mouvement par
   rapport a l'an dernier reste dit, mais par la petite fleche, qui n'occupe
   pas tout le regard. */
.semaine .pilier{display:block;width:100%;border-radius:5px 5px 0 0;
  background:var(--rythme);opacity:.55;transition:height .35s ease}
.semaine .jour:hover .pilier{opacity:.75}
/* Le trait de l'an dernier : une barre à franchir, posée sur la colonne. */
.semaine .n1{position:absolute;left:-2px;right:-2px;height:0;
  border-top:2px dashed var(--bord-fort)}
/* Le meilleur jour se distingue par la densite de sa couleur, pas par un
   cadre : un cadre ressemble a une selection. */
.semaine .jour.meilleur .pilier{opacity:1}
.semaine .jour.meilleur .part{color:var(--rythme)}
.semaine .jour.meilleur .nom{color:var(--rythme);font-weight:600}
.semaine .part{font-size:11.5px;font-variant-numeric:tabular-nums;
  color:var(--texte);font-weight:600}
.semaine .ecart{font-size:10px;line-height:1}
.semaine .ecart.pos{color:var(--pos)} .semaine .ecart.neg{color:var(--neg)}
.semaine .ecart.stable{color:var(--doux)}
.semaine .nom{font-size:11px;color:var(--doux);text-transform:capitalize}

.tuiles-semaine{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 2px}
.tuile-semaine{border:1px solid var(--bord);border-left-width:3px;border-radius:7px;
  padding:6px 10px;display:flex;flex-direction:column;gap:1px}
.tuile-semaine .quoi{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--doux)}
.tuile-semaine b{font-size:16px;font-variant-numeric:tabular-nums}
.tuile-semaine .quand{font-size:11px;color:var(--doux)}
.tuile-semaine.haut{border-left-color:var(--pos)}
.tuile-semaine.haut b{color:var(--pos)}
.tuile-semaine.bas{border-left-color:var(--bord-fort)}

/* ------------------------------------------- tenue de la caisse */
/* D'où vient l'argent, en une bande : quatre familles, leurs proportions. */
.ruban{display:flex;height:16px;border-radius:5px;overflow:hidden;margin:10px 0 6px;
  background:var(--cumul)}
.ruban .brin{display:block;height:100%}
/* Prefixe « f- » : `.cartes` est deja pris par la grille des vignettes du
   haut, et un segment de ruban qui en herite se retrouve en display:grid avec
   quatorze pixels de marge. Une classe de famille de reglement ne doit pas
   pouvoir croiser une classe de mise en page. */
.ruban .f-especes{background:#0f7a5a} .ruban .f-cartes{background:#1f5fa8}
.ruban .f-cheques{background:#6b4a97} .ruban .f-bons{background:#a3620e}
.legende-ruban{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--doux);
  margin-bottom:8px}
.legende-ruban .cle{display:inline-flex;align-items:center;gap:5px}
.legende-ruban b{color:var(--texte);font-variant-numeric:tabular-nums}
.pastille{width:9px;height:9px;border-radius:2px;display:inline-block;
  flex:0 0 auto;margin:0}
.pastille.f-especes{background:#0f7a5a} .pastille.f-cartes{background:#1f5fa8}
.pastille.f-cheques{background:#6b4a97} .pastille.f-bons{background:#a3620e}
/* Un voyant par ligne : on voit ce qui va sans connaître les seuils. */
.liste-reperes.voyants li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;
  align-items:center}
.voyants .voyant{width:7px;height:7px;border-radius:50%;background:var(--bord-fort)}
.voyants li.ok .voyant{background:var(--pos)}
.voyants li.attention .voyant{background:#c98a19}
.voyants li.alerte .voyant{background:var(--neg)}
.voyants li.alerte b{color:var(--neg);font-weight:600}
.voyants li.neutre{color:var(--doux)}
/* Un compteur se deplie sur les journees qu'il compte. Au clic : sur une
   tablette, le survol n'existe pas. */
.voyants li.depliable{cursor:pointer}
.voyants li.depliable:hover{background:var(--accent-clair)}
.voyants .chevron{font-style:normal;color:var(--doux);margin-left:5px;
  display:inline-block;transition:transform .15s}
.voyants li.ouvert .chevron{transform:rotate(90deg)}
.voyants .journees{grid-column:1 / -1;margin:4px 0 2px}
.voyants .journees table{width:100%;border-collapse:collapse;font-size:11.5px}
.voyants .journees th{text-align:right;font-weight:600;color:var(--doux);
  padding:2px 6px;border-bottom:1px solid var(--bord)}
.voyants .journees th:first-child{text-align:left}
.voyants .journees td{text-align:right;padding:2px 6px;
  font-variant-numeric:tabular-nums}
.voyants .journees td:first-child{text-align:left;color:var(--doux)}
.voyants .journees tr + tr td{border-top:1px solid var(--bord)}
.liste-reperes{list-style:none;margin:6px 0 0;padding:0;font-size:12px}
.liste-reperes li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;
                  border-bottom:1px solid var(--bord)}
.liste-reperes li:last-child{border-bottom:0}
.liste-reperes b{font-variant-numeric:tabular-nums}

/* L'essentiel des règles d'impression est dans ecran.css, partagée avec la
   console. Ne restent ici que celles qui ne concernent que l'espace client :
   son bandeau, ses vues supplémentaires, sa barre de tâches. */
@media print{
  /* Le bandeau de l'application et la barre de tâches ne partent pas sur le
     papier. L'en-tête de la vue, si : c'est lui qui porte le nom du magasin et
     le mois, comme dans la console. */
  header, .afaire{display:none !important}
  body{background:#fff}
  main{padding:0;gap:8px}
  .carte{border:0;box-shadow:none;padding:0 0 8px;break-inside:avoid}
  .deux-colonnes{grid-template-columns:1fr 1fr}
  /* Sur le papier, la feuille entiere : le tableau du mois et les remises, meme
     si l'un des deux onglets etait masque a l'ecran. Les trois autres vues ne
     sont pas du voyage. */
  #vueObjectifs[hidden], #vueCaisse[hidden]{display:block !important}
  #vueAnnuels, #vueSynthese, #vueComparatif{display:none !important}
  #vueCaisse{break-before:page}

  /* Sauf quand l'impression part du bouton de la synthèse : ce qu'on regarde
     est alors ce qui sort. Un bouton « Imprimer » qui imprime une autre page
     que celle qu'on a sous les yeux ne s'explique pas. */
  body.impression-synthese #vueSynthese{display:block !important}
  body.impression-synthese #vueObjectifs,
  body.impression-synthese #vueCaisse{display:none !important}
  /* Et sur A4, les deux fenêtres reprennent la pile : côte à côte, chacune
     n'aurait que quatre-vingt-dix millimètres pour six colonnes de chiffres. */
  body.impression-synthese .deux-colonnes.fenetres{grid-template-columns:1fr}
}

/* ------------------------------------------------ comparatif */
/* Les trois groupes de comparaison, en boutons plutôt qu'en menu déroulant. */
.choix-groupe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 2px}
.quoi-comparer{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--doux);font-weight:600}
.puces{display:flex;gap:6px;flex-wrap:wrap}
.puce{font:inherit;font-size:12px;cursor:pointer;padding:5px 13px;border-radius:999px;
  border:1px solid var(--bord);background:var(--surface);color:var(--doux);
  display:inline-flex;align-items:center;gap:6px}
.puce:hover:not(:disabled){border-color:var(--bord-fort);color:var(--texte)}
.puce.choisie{background:var(--accent);border-color:var(--accent);color:#fff;
  font-weight:600}
.puce small{font-variant-numeric:tabular-nums;opacity:.72;font-size:10.5px}
.puce.choisie small{opacity:.85}
.puce:disabled{opacity:.45;cursor:not-allowed}
/* Réservé au cabinet : l'écran tel qu'une dirigeante le voit. À droite des
   puces, et non parmi elles — ce n'est pas un quatrième groupe. */
.bascule{font:inherit;font-size:11.5px;cursor:pointer;padding:5px 12px;
  margin-left:auto;border-radius:999px;background:var(--surface);
  border:1px dashed var(--bord-fort);color:var(--doux)}
.bascule:hover{border-color:var(--accent);color:var(--accent)}
.bascule.active{background:var(--accent-clair);border-style:solid;
  border-color:var(--accent);color:var(--accent);font-weight:600}
.mode-cabinet.vue-magasin{background:var(--n1);border-color:var(--bord-fort);
  color:var(--texte)}

/* Sept lignes de chiffres ne disent pas si le mois a été bon : le podium le dit
   en premier, les repères expliquent ensuite pourquoi. Sa teinte suit la place
   moyenne — une seule variable, reprise par le filet, la pastille du titre et
   le fond, pour que la vignette change d'humeur d'un bloc. */
.podium{--teinte:var(--doux); --teinte-clair:var(--n1);
  margin:10px 0 12px;border-left-color:var(--teinte);background:var(--teinte-clair)}
.podium.haut{--teinte:var(--pos); --teinte-clair:#eff7f2}
.podium.milieu{--teinte:#c98a19; --teinte-clair:#fdf8ef}
.podium.bas{--teinte:var(--neg); --teinte-clair:#fdf3f2}
.podium .titre-bloc{color:var(--teinte)}
.podium .titre-bloc::before{background:var(--teinte)}
.podium .dit{display:flex;gap:13px;align-items:center;margin-top:6px}
.podium .emoji{font-size:30px;line-height:1;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.podium .phrase{margin:0;font-size:14px}
.podium .legende-frise{margin:2px 0 0;font-size:10.5px}
/* La frise : un jeton par repère, rangés du plus fort au plus faible. Le
   classement de ses propres repères est une information en soi, et aucun
   chiffre du groupe n'y paraît. */
.frise{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 3px}
.jeton{font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:1px;width:40px;padding:5px 0 3px;border:1px solid var(--bord);border-radius:8px;
  background:var(--surface)}
.jeton .m{font-size:16px;line-height:1;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.jeton .d{font-size:9.5px;color:var(--doux);font-variant-numeric:tabular-nums}
.jeton.haut{border-color:#a9d3ba} .jeton.haut .d{color:var(--pos)}
.jeton.milieu{border-color:#e5cfa2} .jeton.milieu .d{color:#8a5d0c}
.jeton.bas{border-color:#eec3bf} .jeton.bas .d{color:var(--neg)}
.jeton:hover{border-color:var(--bord-fort);transform:translateY(-1px)}

/* Un repère par brique, plutôt qu'une ligne de tableau, et deux briques par
   rangée : en pleine largeur, l'échelle s'étalait sur sept cents pixels pour y
   poser un point, et sept lignes presque vides descendaient sous l'écran. */
/* Deux, et pas « autant que ça rentre » : à trois colonnes, l'échelle tombait
   sous les trois cents pixels et sept briques se rangeaient 3-3-1.
   `align-items:start` parce qu'une brique dépliée sur six cents pixels de
   calcul étirerait sinon sa voisine d'autant de vide. Les briques gardent la
   même hauteur d'elles-mêmes : elles portent toutes les mêmes deux lignes. */
.rangs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  align-items:start}
@media (max-width:920px){.rangs{grid-template-columns:1fr}}
/* Deux lignes par brique : ce qu'on lit — le repère, sa valeur, sa médaille —
   puis ce qu'on regarde — l'échelle et la jauge du décile. */
.rang{display:grid;grid-template-columns:1fr auto auto;
  grid-template-areas:"quoi mien medaille" "echelle echelle place";
  column-gap:12px;row-gap:7px;align-items:center;padding:9px 12px;
  background:var(--surface);border:1px solid var(--bord);border-left-width:4px;
  border-radius:9px}
.rang .quoi{grid-area:quoi;min-width:0}
.rang > .mien{grid-area:mien}
.rang > .medaille{grid-area:medaille}
.rang > .echelle{grid-area:echelle;min-width:0}
.rang > .place{grid-area:place}
.rang.tr-haut{border-left-color:var(--pos)}
.rang.tr-milieu{border-left-color:#c98a19}
.rang.tr-bas{border-left-color:var(--neg)}
/* Une seule ligne : sans échelle ni jauge, la seconde rangée de la grille ne
   laisserait qu'un intervalle vide sous le libellé. */
.rang.sans{border-left-color:var(--bord);color:var(--doux);background:var(--fond);
  grid-template-areas:"quoi mien medaille"}
/* Le jeton cliqué amène ici : la brique s'éclaire le temps qu'on la trouve. */
.rang.vise{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-clair)}
.rang:has(.methode){cursor:zoom-in}
.rang.ouvert{cursor:zoom-out;border-color:var(--bord-fort)}
.rang .quoi .libelle{font-weight:600}
.rang .quoi small{display:block;font-weight:400;color:var(--doux);font-size:11px}
.rang .mien{text-align:right;font-size:17px;font-weight:600;line-height:1.15;
  font-variant-numeric:tabular-nums}
.rang .mien small{display:block;font-size:11px;font-weight:400;
  font-variant-numeric:normal}
.rang .mien small.pos{color:var(--pos)} .rang .mien small.neg{color:var(--neg)}
.rang .mien small.egal{color:var(--doux)}
.echelle{position:relative;height:22px;background:var(--cumul);border-radius:4px}
.echelle.vide{background:var(--cumul);opacity:.5}
.echelle .milieu{position:absolute;top:0;bottom:0;background:var(--surface);
                 border-left:1px solid var(--bord-fort);border-right:1px solid var(--bord-fort)}
.echelle .mediane{position:absolute;top:-2px;height:26px;width:2px;background:var(--doux)}
.echelle .moi{position:absolute;top:3px;height:16px;width:16px;margin-left:-8px;
              border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.echelle .moi.pos{background:var(--pos)} .echelle .moi.neg{background:var(--neg)}
/* Le trait entre la médiane et votre point : l'écart lui-même, dessiné. Un
   point seul sur une piste vide ne dit pas de combien on est devant. */
.echelle .ecart{position:absolute;top:9px;height:4px;border-radius:2px;opacity:.55}
.echelle .ecart.pos{background:var(--pos)} .echelle .ecart.neg{background:var(--neg)}
.rang .place{display:flex;align-items:center;gap:7px;white-space:nowrap}
.rang .place small{font-size:10.5px;color:var(--doux)}
.medaille{font-size:16px;line-height:1;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
/* « 7ᵉ décile » demandait de se représenter une échelle : la jauge EST cette
   échelle. Dix crans, les sept premiers allumés. */
.jauge{display:inline-flex;gap:2px}
.jauge .cran{width:6px;height:11px;border-radius:1.5px;background:var(--cumul)}
.jauge.haut .cran.allume{background:var(--pos)}
.jauge.milieu .cran.allume{background:#c98a19}
.jauge.bas .cran.allume{background:var(--neg)}

/* La méthode de calcul, au double-clic, pour le cabinet seulement. */
.mode-cabinet{margin:0 0 7px;font-size:11px;color:var(--doux);padding:4px 10px;
  background:var(--accent-clair);border:1px dashed var(--accent);border-radius:6px}
.methode{grid-column:1 / -1;margin-top:9px;padding-top:8px;
  border-top:1px dashed var(--bord-fort)}
.methode h4{margin:0 0 4px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--doux)}
table.calcul{width:100%;border-collapse:collapse;font-size:11.5px}
table.calcul th{text-align:left;font-weight:400;color:var(--doux);width:36%;
  padding:2px 10px 2px 0;vertical-align:top}
table.calcul td{text-align:right;padding:2px 0;font-variant-numeric:tabular-nums;
  vertical-align:top}
/* Une expression ne se lit pas alignée à droite : elle se lit de gauche à
   droite, comme on l'écrirait à la main. Les valeurs seules, elles, s'alignent. */
table.calcul td.texte{text-align:left;font-variant-numeric:normal}
table.calcul tr.section th{padding-top:8px;font-weight:600;color:var(--texte);
  border-bottom:1px solid var(--bord)}
table.calcul tr.section small{font-weight:400;color:var(--doux);display:block}
table.calcul tr.somme th,table.calcul tr.somme td{border-top:1px solid var(--bord)}
table.calcul small{color:var(--doux)}
/* Un terme tiré du chiffre journalier s'ouvre sur les journées qui le
   composent : un total de période ne se contrôle pas, il se déplie. */
table.calcul tr.ouvrable{cursor:pointer}
table.calcul tr.ouvrable:hover th,table.calcul tr.ouvrable:hover td{
  background:var(--accent-clair)}
table.calcul tr.ouvrable th{color:var(--accent)}
table.calcul tr.ouvrable .chevron{font-style:normal;margin-left:5px;
  display:inline-block;transition:transform .15s}
table.calcul tr.ouverte .chevron{transform:rotate(90deg)}
table.calcul tr.journees > td{padding:6px 0 10px}
table.journees-ca{width:100%;border-collapse:collapse;font-size:11px;
  background:var(--fond);border:1px solid var(--bord);border-radius:6px}
table.journees-ca th,table.journees-ca td{padding:2px 7px;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.journees-ca th.g,table.journees-ca td.g{text-align:left;
  font-variant-numeric:normal}
table.journees-ca thead th{font-weight:600;color:var(--doux);font-size:10px;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--bord)}
table.journees-ca tbody tr + tr td{border-top:1px solid var(--bord)}
table.journees-ca tbody td.g small{color:var(--doux);margin-left:4px}
table.journees-ca tfoot th,table.journees-ca tfoot td{
  border-top:1px solid var(--bord-fort);font-weight:600;padding-top:4px}
/* La colonne du terme cliqué : c'est elle qu'on est venu contrôler. */
table.journees-ca .vise{background:var(--accent-clair);color:var(--accent);
  font-weight:600}
/* Pour « jours avec du chiffre », ce sont les lignes qui comptent, pas une
   colonne : celles qui ne comptent pas s'effacent. */
table.journees-ca tr.hors td{color:var(--bord-fort)}
table.journees-ca tr.compte td.g{font-weight:600}
.methode .rien{margin:4px 0;font-size:11px;color:var(--doux)}

.legende{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--doux);
         margin-top:12px}
.legende span{display:inline-flex;align-items:center;gap:5px}
/* La légende montre les signes plutôt que de les décrire : « ● votre magasin »
   demandait de deviner que le rond du texte était celui de l'échelle. */
.legende i{flex:0 0 auto;display:inline-block}
.legende .ex-moi{width:12px;height:12px;border-radius:50%;background:var(--pos);
  border:2px solid var(--surface);box-shadow:0 0 0 1px var(--bord)}
.legende .ex-mediane{width:2px;height:14px;background:var(--doux)}
.legende .ex-milieu{width:22px;height:12px;border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--bord);
  background:linear-gradient(90deg,var(--cumul) 0 22%,var(--surface) 22% 78%,
    var(--cumul) 78% 100%)}
.indispo{background:#fdf0dc;border:1px solid #f0d5a8;border-radius:6px;padding:10px 12px;
         color:#7a4a00}

/* ------------------------------------------------ tableaux */
a.bouton{font:inherit;padding:5px 12px;border:1px solid var(--bord);border-radius:6px;
         background:var(--surface);color:inherit;text-decoration:none;cursor:pointer}
a.bouton:hover{border-color:var(--bord-fort)}
.alerte{background:#fdf0dc;border:1px solid #f0d5a8;border-radius:6px;
        padding:6px 10px;margin-bottom:6px;color:#7a4a00}

@media (max-width:640px){
  header,.onglets,main,.afaire{padding-left:12px;padding-right:12px}
  /* Sur un telephone, une valeur longue (« 18,24 € (obj. 22,75 €) ») se replie
     au lieu de deborder de sa carte. */
  .bloc .ligne b{white-space:normal;text-align:right}
  /* Sur un telephone, l'en-tete et les onglets se replient au lieu de deborder. */
  header{flex-direction:column;align-items:stretch;gap:8px}
  header nav{width:100%}
  header select{flex:1;min-width:0}
  .onglets{padding-bottom:0}
  .etat{margin-left:8px}
  .objectif .entete{flex-direction:column}
  .reglage .champs input{width:100%;min-width:90px}
  .rangs{grid-template-columns:1fr}
  .rang{grid-template-columns:1fr auto;row-gap:5px;
        grid-template-areas:"quoi medaille" "mien mien" "echelle echelle"
                            "place place"}
  .rang .mien{font-size:16px}
  .choix-groupe{align-items:flex-start;flex-direction:column;gap:4px}
  .podium .dit{gap:9px}
  table.calcul th{width:46%}
  .deux-colonnes{grid-template-columns:1fr}
  .semaine{gap:3px}
  .semaine .colonne{height:76px}
  .semaine .part{font-size:10px}
  .tuiles-semaine{grid-template-columns:1fr}
}