/* =============================================================================
   Portail client ORBISEO — feuille de style unique, sans dependance externe.
   Refonte du systeme le 01/09/2026.

   Comment lire ce fichier :
     1. JETONS          toutes les valeurs de design, et elles seules
     2. SOCLE           reset, typographie de base, focus, mouvement
     3. STRUCTURE       barre laterale, en-tete, pied
     4. GRILLES         un seul endroit ou se decide le nombre de colonnes
     5. CARTES          la hierarchie visuelle (majeure / normale / discrete)
     6. INDICATEURS     chiffres, deltas, tonalites semantiques
     7. ETATS           chargement, donnee absente, partielle, source en panne
     8. GRAPHIQUES
     9. TABLEAUX
    10. COMPOSANTS      puces, encarts, replis, raccourcis, panneau de periode
    11. RESPONSIVE      un bloc par palier, dans l ordre, jamais contradictoire
    12. IMPRESSION

   REGLE DE COULEUR, a respecter dans les gabarits :
     l accent (vert d eau) est la couleur de la MARQUE et de l INTERACTION.
     Il ne veut jamais dire « c est bon ». Le sens se dit avec les jetons
     semantiques (--bon, --attention, --probleme, --info) ET avec un signe
     ecrit (fleche, mot, pictogramme), jamais avec la couleur seule.
   ========================================================================== */

/* ==========================================================================
   1. JETONS
   ========================================================================== */
:root{
  /* --- surfaces, du plus profond au plus haut ---------------------------- */
  --fond:#0A0F0E;          /* fond de page                                  */
  --fond-2:#0E1514;        /* barre laterale, champs de saisie              */
  --surface:#121A18;       /* carte standard                                */
  --surface-2:#16201E;     /* carte mise en avant, element actif            */
  --surface-3:#1B2724;     /* survol, en-tete de tableau                    */
  --bord:#22302C;
  --bord-fort:#31443F;

  /* --- texte (contrastes verifies, voir plus bas) ------------------------ */
  --txt:#E9F1EE;           /* 15,4:1 sur --surface                          */
  --txt-2:#A9BAB5;         /*  8,7:1 sur --surface                          */
  --txt-3:#8B9D97;         /*  6,2:1 sur --surface — jamais en dessous      */

  /* --- accent : marque et interaction UNIQUEMENT ------------------------- */
  --accent:#3FD0A8;        /* 9,1:1 sur --surface                           */
  --accent-fort:#2BB48F;
  --accent-sourd:rgba(63,208,168,.13);
  --sur-accent:#06130F;    /* texte pose SUR l accent — 9,7:1               */

  /* --- semantique : porte le SENS d une valeur --------------------------- */
  --bon:#5FD98F;             --bon-fond:rgba(95,217,143,.13);
  --attention:#F2B75E;       --attention-fond:rgba(242,183,94,.13);
  --probleme:#F08585;        --probleme-fond:rgba(240,133,133,.13);
  --info:#6FB4E8;            --info-fond:rgba(111,180,232,.13);
  --neutre:#A9BAB5;          --neutre-fond:rgba(169,186,181,.10);

  /* --- series de donnees : ordre d emploi dans un graphique -------------- */
  --serie-1:#4EA8DE; --serie-2:#F4B860; --serie-3:#9B8CFF;
  --serie-4:#3FD0A8; --serie-5:#E86A6A; --serie-6:#8B9D97;

  /* --- typographie : echelle fixe, pas de taille improvisee -------------- */
  --police:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --t-micro:10.5px;   /* sur-titres, etiquettes capitales                   */
  --t-mini:11.6px;    /* mentions, notes de bas de bloc                     */
  --t-petit:12.6px;   /* aides, legendes, tableaux                          */
  --t-base:13.6px;    /* texte courant                                      */
  --t-moyen:15px;     /* titre de carte marquant                            */
  --t-grand:19px;     /* titre de page sur mobile                           */
  --t-titre:22px;     /* titre de page                                      */
  --t-chiffre:clamp(1.35rem, 5.4vw, 1.85rem);        /* indicateur normal   */
  --t-chiffre-grand:clamp(1.7rem, 7vw, 2.5rem);      /* indicateur majeur   */
  --gras-normal:500; --gras-moyen:600; --gras-fort:680;

  /* --- espacement : multiples de 4, six valeurs, pas une de plus --------- */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:22px; --e-6:32px; --e-7:48px;

  /* --- rayons ------------------------------------------------------------ */
  --r-s:9px; --r:14px; --r-l:18px; --r-plein:999px;

  /* --- ombres : trois niveaux, pas de valeur en dur ---------------------- */
  --ombre-1:0 1px 2px rgba(0,0,0,.4);
  --ombre-2:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --ombre-3:0 18px 48px -18px rgba(0,0,0,.85);

  /* --- mouvement : deux durees, une courbe ------------------------------- */
  --duree-courte:.12s; --duree:.2s; --courbe:cubic-bezier(.2,.6,.3,1);

  /* --- focus clavier ----------------------------------------------------- */
  --focus:#8FE8D0;         /* 12,3:1 sur --surface                          */
  --focus-epaisseur:2px; --focus-decalage:2px;

  /* --- compatibilite : anciens noms encore employes dans les gabarits ---- */
  --fond2:var(--fond-2); --carte:var(--surface); --carte2:var(--surface-2);
  --txt2:var(--txt-2); --txt3:var(--txt-3);
  --vert:var(--accent); --vert-s:var(--accent-fort);
  --bleu:var(--info); --ambre:var(--attention); --rouge:var(--probleme);
  --violet:var(--serie-3);
  --ombre:var(--ombre-2);
}

/* ==========================================================================
   2. SOCLE
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--fond);color:var(--txt);font-family:var(--police);
  font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
  text-size-adjust:100%;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.015em;color:var(--txt)}
button,input,select,textarea{font:inherit;color:inherit}
img,svg,canvas{max-width:100%}

/* Focus clavier visible PARTOUT. Une seule regle, aucune exception :
   un element interactif que l on ne voit pas au clavier est inutilisable. */
:focus-visible{outline:var(--focus-epaisseur) solid var(--focus);
  outline-offset:var(--focus-decalage);border-radius:var(--r-s)}
/* Le contour par defaut du navigateur reste en secours si :focus-visible
   n est pas gere ; on ne le supprime jamais sans le remplacer. */

/* Lien d evitement : premier element focusable de la page. */
.saut{position:absolute;left:var(--e-3);top:-60px;z-index:99;
  background:var(--accent);color:var(--sur-accent);font-weight:var(--gras-fort);
  padding:10px 16px;border-radius:var(--r-s);transition:top var(--duree) var(--courbe)}
.saut:focus{top:var(--e-3)}

/* Masque a l ecran, lu par les lecteurs d ecran. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Respect du reglage systeme « reduire les animations ». */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  a.carte.lien:hover{transform:none}
}

/* ==========================================================================
   3. STRUCTURE
   ========================================================================== */
.appli{display:grid;grid-template-columns:246px 1fr;min-height:100vh}
/* Les enfants d une grille valent min-width:auto : sans cette ligne, un
   tableau large elargit la page entiere au lieu de defiler dans sa carte. */
.appli > *,.principal,.carte,.grille > *,.kpi,.flanc{min-width:0}

.flanc{background:var(--fond-2);border-right:1px solid var(--bord);
  padding:var(--e-5) var(--e-3);display:flex;flex-direction:column;gap:var(--e-5);
  position:sticky;top:0;height:100vh;overflow-y:auto}
.marque{display:flex;align-items:center;gap:9px;padding:0 var(--e-2)}
.marque img.pastille{width:32px;height:32px;border-radius:var(--r-s);background:none;
  object-fit:contain;display:block;flex:0 0 auto}
.marque b{font-size:15.5px;letter-spacing:-.02em}
.marque span{display:block;font-size:var(--t-micro);color:var(--txt-3);
  letter-spacing:.09em;text-transform:uppercase;font-weight:var(--gras-fort)}

.nav{display:flex;flex-direction:column;gap:2px}
.nav .titre{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.12em;
  color:var(--txt-3);padding:var(--e-3) var(--e-3) var(--e-1);font-weight:700}
.nav a{display:flex;align-items:center;gap:var(--e-3);padding:9px 11px;
  border-radius:var(--r-s);color:var(--txt-2);font-size:var(--t-base);
  font-weight:var(--gras-normal);min-height:40px;
  transition:background var(--duree-courte),color var(--duree-courte)}
.nav a:hover{background:var(--surface);color:var(--txt)}
/* Ou suis-je : fond plus clair, texte pleine intensite, filet vertical
   d accent, et le libelle passe en demi-gras. Trois signaux, pas un seul. */
.nav a.actif,.nav a[aria-current=page]{background:var(--surface-2);color:var(--txt);
  font-weight:var(--gras-moyen);box-shadow:inset 3px 0 0 var(--accent)}
.nav a .ic{width:16px;text-align:center;opacity:.85;flex:none}
.nav a.desactive{opacity:.34;cursor:not-allowed}

.flanc-bas{margin-top:auto;border-top:1px solid var(--bord);padding-top:var(--e-3);
  font-size:12.2px;color:var(--txt-3)}
.flanc-bas b{color:var(--txt-2);display:block;font-size:13px}
.fb-sortie a{display:inline-block;margin-top:var(--e-2);color:var(--txt-2);
  border:1px solid var(--bord-fort);border-radius:var(--r-s);padding:7px 11px;
  font-size:var(--t-petit)}
.fb-sortie a:hover{border-color:var(--accent);color:var(--txt)}

.principal{padding:var(--e-5) var(--e-6) var(--e-7);max-width:1500px;width:100%}
.entete{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e-4);flex-wrap:wrap;margin-bottom:var(--e-4)}
.entete h1{font-size:var(--t-titre)}
.entete .sous{color:var(--txt-2);font-size:13px;margin-top:3px}
/* Fil d Ariane : dit en toutes lettres ou l on se trouve. */
.fil{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--e-2);
  font-size:var(--t-mini);color:var(--txt-3);text-transform:uppercase;
  letter-spacing:.09em;font-weight:700;margin:0 0 var(--e-1)}
.fil .sep{opacity:.6}
.fil .ici{color:var(--accent)}
.outils{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap;position:relative}

.pied{margin-top:var(--e-6);padding-top:var(--e-4);border-top:1px solid var(--bord);
  color:var(--txt-3);font-size:var(--t-mini);display:flex;justify-content:space-between;
  gap:var(--e-3);flex-wrap:wrap}
.cadence{display:block;font-size:11.2px;color:var(--txt-3);margin-top:3px}
.fraicheur{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--txt-3)}
.fraicheur .point{width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ==========================================================================
   4. GRILLES
   Le nombre de colonnes ne se decide QUE dans ce chapitre et dans le
   chapitre 11. Aucune media query ailleurs ne touche a .g*.
   ========================================================================== */
.grille{display:grid;gap:var(--e-3)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}   /* rangee de cinq indicateurs   */
.g6{grid-template-columns:repeat(6,1fr)}
.g23{grid-template-columns:2fr 1fr}        /* bloc large + colonne etroite */
/* Grille sans nombre fixe : les cartes se rangent d elles-memes. A employer
   quand le nombre d indicateurs peut varier d une periode a l autre. */
.g-auto{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.g-large{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* Un element qui doit occuper toute la largeur de sa grille. */
.pleine{grid-column:1 / -1}

/* ==========================================================================
   5. CARTES — la hierarchie visuelle
   Trois niveaux seulement. Si tout est mis en avant, rien ne l est.
   ========================================================================== */
.carte{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
  padding:var(--e-4) 17px;box-shadow:var(--ombre-1);overflow-x:auto}
/* Niveau 1 — LE chiffre de la page. Un seul par ecran, deux au maximum. */
.carte.majeure{background:var(--surface-2);border-color:var(--bord-fort);
  padding:var(--e-5) var(--e-5);box-shadow:var(--ombre-2)}
/* Niveau 3 — contexte, precisions, ce que l on lit apres. */
.carte.discrete{background:transparent;box-shadow:none;border-style:dashed}
.carte h2{font-size:var(--t-base);font-weight:620;display:flex;align-items:center;
  justify-content:space-between;gap:var(--e-3);margin-bottom:3px}
.carte.majeure h2{font-size:var(--t-moyen)}
.carte h2 .puce{font-weight:var(--gras-moyen)}
/* `.aide` et `.cmp` existent aussi hors carte (page d administration) :
   la couleur est donc posee sans condition, la mise en page seulement
   dans une carte. */
.aide,.cmp{color:var(--txt-2)}
.carte .aide{font-size:var(--t-petit);color:var(--txt-2);margin:0 0 var(--e-3)}
/* Note de bas de carte : d ou vient le chiffre, sur quoi il porte. */
.carte .note{font-size:var(--t-mini);color:var(--txt-3);margin:var(--e-3) 0 0;
  padding-top:var(--e-2);border-top:1px solid var(--bord);line-height:1.5}

a.carte.lien{display:block;transition:border-color var(--duree),transform var(--duree)}
a.carte.lien:hover{border-color:var(--bord-fort);transform:translateY(-2px)}
a.carte.lien .cmp{color:var(--accent)}

.section-titre{font-size:11px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--txt-3);font-weight:700;margin:var(--e-6) 0 var(--e-3);
  display:flex;align-items:center;gap:var(--e-3)}
.section-titre::after{content:"";flex:1;height:1px;background:var(--bord)}
p.intro{color:var(--txt-2);font-size:13.4px;max-width:76ch;margin:-4px 0 var(--e-4);line-height:1.6}

/* ==========================================================================
   6. INDICATEURS
   ========================================================================== */
.kpi .lab{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--txt-3);font-weight:700}
.kpi .val{font-size:var(--t-chiffre);font-weight:720;letter-spacing:-.03em;
  margin:5px 0 2px;line-height:1.05;overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums}
.kpi .cmp{font-size:12px;color:var(--txt-2);overflow-wrap:anywhere}
.kpi .lab{overflow-wrap:anywhere}
.val{font-variant-numeric:tabular-nums}
/* L unite se lit, elle ne crie pas. */
.kpi .val .unite{font-size:.55em;font-weight:var(--gras-moyen);color:var(--txt-2);
  letter-spacing:0;margin-left:2px}
/* Indicateur majeur : le chiffre porteur de la page. */
.kpi.majeur .val{font-size:var(--t-chiffre-grand)}

/* Tonalites : le chiffre prend la couleur de ce qu il signifie et la carte
   porte un filet a gauche. La couleur ne suffit jamais : le gabarit ajoute
   un mot ou une fleche dans .cmp. */
.kpi.ton-bon .val{color:var(--bon)}
.kpi.ton-attention .val{color:var(--attention)}
.kpi.ton-probleme .val{color:var(--probleme)}
.kpi.ton-info .val{color:var(--info)}
.kpi.ton-neutre .val{color:var(--txt)}
.carte.kpi.ton-bon{border-left:3px solid var(--bon)}
.carte.kpi.ton-attention{border-left:3px solid var(--attention)}
.carte.kpi.ton-probleme{border-left:3px solid var(--probleme)}
.carte.kpi.ton-info{border-left:3px solid var(--info)}
/* Conserve : marque le chiffre identitaire de la page (chiffre d affaires,
   position moyenne). C est de l accent, donc cela ne dit PAS « c est bon ». */
.kpi.accent .val{color:var(--accent)}

/* Variation par rapport a la periode precedente. La fleche est ecrite par le
   CSS pour que le sens survive a un affichage en noir et blanc. */
.delta{font-size:11.5px;font-weight:650;padding:2px 7px;border-radius:var(--r-plein);
  margin-left:6px;vertical-align:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.delta.hausse{background:var(--bon-fond);color:var(--bon)}
.delta.hausse::before{content:"\2191 "}
.delta.baisse{background:var(--probleme-fond);color:var(--probleme)}
.delta.baisse::before{content:"\2193 "}
.delta.stable{background:var(--neutre-fond);color:var(--txt-2)}
.delta.stable::before{content:"\2192 "}
/* Une baisse n est pas toujours une mauvaise nouvelle (taux de rebond,
   temps de chargement). Inverse la lecture sans changer la fleche. */
.delta.inverse.hausse{background:var(--probleme-fond);color:var(--probleme)}
.delta.inverse.baisse{background:var(--bon-fond);color:var(--bon)}

/* ==========================================================================
   7. ETATS — le portail doit savoir dire « je ne sais pas »
   .etat.vide        aucune donnee sur la periode, et c est normal
   .etat.partiel     donnee incomplete : on affiche ET on prévient
   .etat.erreur      la source n a pas repondu : le chiffre est absent
   .etat.chargement  releve en cours
   ========================================================================== */
.vide,.etat{color:var(--txt-2);font-size:var(--t-petit);padding:var(--e-5) var(--e-4);
  text-align:center;border:1px dashed var(--bord-fort);border-radius:var(--r-s);
  line-height:1.6}
.etat b,.vide b{display:block;color:var(--txt);font-weight:var(--gras-moyen);
  margin-bottom:var(--e-1);font-size:var(--t-base)}
.etat .quoi-faire{display:block;margin-top:var(--e-2);color:var(--txt-3);font-size:var(--t-mini)}
.etat::before{display:block;font-size:17px;margin-bottom:var(--e-2);line-height:1}
.etat.vide::before{content:"\2014";color:var(--txt-3)}
.etat.partiel{border-style:solid;border-color:var(--attention);background:var(--attention-fond);
  text-align:left}
.etat.partiel::before{content:"\26A0";color:var(--attention)}
.etat.erreur{border-style:solid;border-color:var(--probleme);background:var(--probleme-fond);
  text-align:left}
.etat.erreur::before{content:"\2715";color:var(--probleme)}
.etat.chargement{border-style:solid;border-color:var(--bord)}
.etat.chargement::before{content:"\2026";color:var(--txt-3)}

/* Valeur absente au milieu d une phrase ou d un tableau. */
.na{color:var(--txt-3);font-variant-numeric:tabular-nums;cursor:help;
  border-bottom:1px dotted var(--bord-fort)}

/* Etiquette d etat d une source, a poser dans le h2 d une carte. */
.source{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-mini);
  font-weight:var(--gras-moyen);padding:2px 8px;border-radius:var(--r-plein);
  background:var(--neutre-fond);color:var(--txt-2);white-space:nowrap}
.source::before{content:"\25CF";font-size:8px;line-height:1}
.source.ok{background:var(--bon-fond);color:var(--bon)}
.source.partielle{background:var(--attention-fond);color:var(--attention)}
.source.ko{background:var(--probleme-fond);color:var(--probleme)}

/* Squelette de chargement : meme gabarit que le contenu final, donc aucun
   saut de mise en page a l arrivee des chiffres. */
.squelette{display:block;border-radius:var(--r-s);
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:280% 100%;animation:balayage 1.5s linear infinite;color:transparent!important}
.squelette.ligne{height:13px;margin:6px 0}
.squelette.chiffre{height:32px;width:62%;margin:6px 0}
.squelette.bloc{height:150px}
@keyframes balayage{from{background-position:180% 0}to{background-position:-80% 0}}
@media (prefers-reduced-motion:reduce){.squelette{animation:none;background:var(--surface-2)}}

/* ==========================================================================
   8. GRAPHIQUES
   ========================================================================== */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grille{stroke:rgba(232,240,237,.085);stroke-width:1}
line.grille{stroke:rgba(232,240,237,.085);stroke-width:1;stroke-dasharray:2 4}
.chart .axe,text.axe{fill:var(--txt-2);font-size:10.5px;font-family:var(--police);
  font-variant-numeric:tabular-nums}
.chart .axe2{fill:var(--attention);opacity:.9}
/* Le repere de survol doit aussi apparaitre au clavier : sans :focus-within,
   les valeurs jour par jour sont hors d atteinte sans souris. */
.chart .pt .viseur{stroke:var(--txt-3);stroke-width:1;stroke-dasharray:3 3;opacity:0;
  transition:opacity var(--duree-courte) ease}
.chart .pt .ptc{opacity:0;transition:opacity var(--duree-courte) ease}
.chart .pt:hover .viseur,.chart .pt:hover .ptc,
.chart .pt:focus .viseur,.chart .pt:focus .ptc,
.chart .pt:focus-within .viseur,.chart .pt:focus-within .ptc{opacity:.95}
.chart .pt{cursor:crosshair}
.chart .pt:focus{outline:none}
.chart .pt:focus-visible .ptc{opacity:1}
/* Segment de la journee en cours : jamais trace comme une journee complete. */
.chart .encours{stroke-dasharray:4 3;opacity:.55}

/* Titre d axe, pose au-dessus de l axe, dans la couleur de sa courbe. */
.axe-titre{font-size:var(--t-mini);font-weight:var(--gras-moyen);
  letter-spacing:.04em;fill:var(--txt-2)}
/* Legende de graphique, au-dessus du trace. */
.legende-graphe{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4);
  font-size:var(--t-petit);color:var(--txt-2);margin:0 0 var(--e-2)}
.legende-graphe span{display:inline-flex;align-items:center;gap:6px}
.legende-graphe i{width:14px;height:3px;border-radius:2px;flex:none}

.barres{display:flex;flex-direction:column;gap:var(--e-2)}
.barre{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;align-items:center;
  gap:var(--e-3);font-size:var(--t-petit)}
/* Le libelle d une barre passe a la ligne plutot que de se couper en plein
   mot. L ancienne regle (nowrap + points de suspension) tranchait a la
   largeur disponible, sans egard pour les mots : « Acces direct (adresse
   tapee ou... ». Deux lignes au plus, puis les points de suspension du
   navigateur ; l intitule complet reste dans l infobulle posee par viz.py. */
.barre .bl{color:var(--txt-2);overflow:hidden;white-space:normal;
  overflow-wrap:break-word;line-height:1.35;display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}

.barre .bt{background:var(--fond-2);height:8px;border-radius:5px;overflow:hidden}
.barre .bf{display:block;height:100%;border-radius:5px}
.barre .bv{color:var(--txt);font-weight:640;font-variant-numeric:tabular-nums;
  min-width:44px;text-align:right}
.barre .bp{color:var(--txt-3);font-size:var(--t-mini);font-variant-numeric:tabular-nums}
/* Pied de classement : total et lignes non affichees. */
.barres-pied{margin-top:var(--e-3);padding-top:var(--e-2);border-top:1px solid var(--bord);
  display:flex;justify-content:space-between;gap:var(--e-3);
  font-size:var(--t-mini);color:var(--txt-3)}
.barres-pied b{color:var(--txt-2);font-variant-numeric:tabular-nums}

.anneau-wrap{display:flex;align-items:center;gap:var(--e-4);flex-wrap:wrap}
.anneau{width:132px;height:132px;flex:none}
text.anneau-c{fill:var(--txt);font-size:17px;font-weight:700;text-anchor:middle;
  font-family:var(--police)}
text.anneau-l{fill:var(--txt-3);font-size:8.5px;text-anchor:middle;font-family:var(--police)}
.legende{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:6px;font-size:12.4px;flex:1}
.legende li{display:flex;align-items:center;gap:var(--e-2);color:var(--txt-2)}
.legende i{width:9px;height:9px;border-radius:3px;flex:none}
.legende b{margin-left:auto;color:var(--txt);font-variant-numeric:tabular-nums}

.entonnoir{display:flex;flex-direction:column;gap:11px}
.et-h{display:flex;justify-content:space-between;font-size:12.9px;color:var(--txt-2)}
.et-h b{color:var(--txt);font-variant-numeric:tabular-nums}
.et-b{height:9px;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--info));
  margin:5px 0 3px}
.et-n{font-size:11.4px;color:var(--txt-2)}

/* ==========================================================================
   9. TABLEAUX
   ========================================================================== */
table.t,table.tab{width:100%;border-collapse:collapse;font-size:12.9px;min-width:480px}
table.t th,table.tab th{text-align:left;color:var(--txt-2);font-size:var(--t-micro);
  text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  padding:0 var(--e-2) var(--e-2);border-bottom:1px solid var(--bord)}
table.t td,table.tab td{padding:var(--e-2);border-bottom:1px solid rgba(34,48,44,.7);
  color:var(--txt-2)}
table.t td.n,table.tab td.n,table.tab td[align=right]{text-align:right;
  font-variant-numeric:tabular-nums;color:var(--txt);font-weight:560;white-space:nowrap}
/* En-tete d une colonne de nombres. `table.t th` aligne a gauche ; sans cette
   regle, l intitule d une colonne chiffree ne tombait pas au-dessus de ses
   valeurs. Deux gabarits ecrivaient deja `<th class="n">` sans qu aucune
   declaration ne reponde, un troisieme compensait ligne a ligne avec un
   `style="text-align:right"` en dur, ce que la regle 1 interdit. */
table.t th.n,table.tab th.n,
table.t th[align=right],table.tab th[align=right]{text-align:right}
table.t tr:hover td,table.tab tr:hover td{background:rgba(255,255,255,.022)}
table.t td b,table.tab td b{color:var(--txt);font-weight:var(--gras-moyen)}
/* Ligne de total : elle se distingue de la derniere ligne de donnees. */
table.t tr.total td,table.tab tr.total td{border-top:1px solid var(--bord-fort);
  border-bottom:0;color:var(--txt);font-weight:var(--gras-moyen);background:var(--surface-2)}
/* Cadre de defilement lateral, quand la carte ne doit pas defiler entiere. */
.defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
.defile::-webkit-scrollbar,.carte::-webkit-scrollbar{height:7px}
.defile::-webkit-scrollbar-thumb,.carte::-webkit-scrollbar-thumb{background:var(--bord-fort);
  border-radius:5px}

/* ==========================================================================
   10. COMPOSANTS
   ========================================================================== */
/* --- puces (petites etiquettes) ---------------------------------------- */
.puce{display:inline-block;padding:2px 8px;border-radius:var(--r-plein);font-size:11px;
  font-weight:640;background:var(--info-fond);color:var(--info)}
.puce.ok{background:var(--bon-fond);color:var(--bon)}
.puce.non{background:var(--neutre-fond);color:var(--txt-2)}
.puce.alerte{background:var(--attention-fond);color:var(--attention)}
.puce.grave{background:var(--probleme-fond);color:var(--probleme)}

/* --- encarts (une phrase d explication ou d avertissement) -------------- */
.encart{border:1px solid var(--bord);border-left:3px solid var(--attention);
  background:var(--attention-fond);border-radius:var(--r-s);padding:11px 13px;
  font-size:12.7px;color:var(--txt-2);margin:var(--e-3) 0;line-height:1.6}
.encart.info{border-left-color:var(--info);background:var(--info-fond)}
.encart.ok{border-left-color:var(--bon);background:var(--bon-fond)}
.encart.grave{border-left-color:var(--probleme);background:var(--probleme-fond)}
.encart.neutre{border-left-color:var(--bord-fort);background:var(--neutre-fond)}
.encart b{color:var(--txt)}

/* --- liste de constats, a l interieur d une carte ------------------------
   Une carte qui enumere des faits (ce que dit la periode, les points de
   friction, les verifications passees) n avait aucun composant : les
   gabarits retombaient sur un <ul> nu, dont la puce, le retrait et
   l interligne viennent du navigateur et ne suivent aucun jeton.
   Chaque constat porte un pictogramme ET un mot : la couleur ne porte
   jamais seule l information (regle 3, WCAG 1.4.1). */
.constats{list-style:none;margin:var(--e-3) 0 0;padding:0;display:flex;
  flex-direction:column}
.constats > li,.constat{display:grid;grid-template-columns:auto 1fr;
  gap:var(--e-1) var(--e-2);align-items:baseline;font-size:var(--t-petit);
  color:var(--txt-2);line-height:1.55;padding:var(--e-2) 0;
  border-top:1px solid var(--bord)}
.constats > li:first-child,.constats > .constat:first-child{border-top:0;padding-top:0}
.constats > li:last-child,.constats > .constat:last-child{padding-bottom:0}
.constats > li::before,.constat::before{content:"\2022";color:var(--txt-3);
  line-height:1.55;flex:none}
.constats > li b,.constat b{color:var(--txt);font-weight:var(--gras-moyen)}
/* Deuxieme ligne d un constat : la consequence, ou ce qu il faut en faire. */
.constat .suite{grid-column:2;display:block;color:var(--txt-3);
  font-size:var(--t-mini);margin-top:var(--e-1)}
/* Tonalites. Le pictogramme change en meme temps que la couleur : imprime en
   noir et blanc, le constat reste lisible. */
.constat.bon::before{content:"\2713";color:var(--bon)}
.constat.attention::before{content:"\26A0";color:var(--attention)}
.constat.probleme::before{content:"\2715";color:var(--probleme)}
.constat.info::before{content:"\2139";color:var(--info)}
.constat.neutre::before{content:"\2013";color:var(--txt-3)}

/* --- espacement vertical entre deux blocs -------------------------------
   Un gabarit n a pas a ecrire de marge : la regle 1 lui interdit meme
   `style="margin-top:var(--e-3)"`, pourtant repete une trentaine de fois
   dans les sept pages faute de classe pour le dire. Les valeurs sont
   celles de l echelle d espacement, aucune autre n est ouverte.
   `!important` est ici volontaire, et c est le seul endroit avec la fenetre
   de periode : un composant pose deja sa propre marge (`.carte .aide` vaut
   `margin:0 0 var(--e-3)`, et l emporte sur une classe simple). Un
   utilitaire d espacement qui perd contre le composant qu il doit espacer
   est un piege : il ne fait rien, et rien ne le dit. */
.espace-2{margin-top:var(--e-2)!important}
.espace-3{margin-top:var(--e-3)!important}
.espace-4{margin-top:var(--e-4)!important}
.espace-5{margin-top:var(--e-5)!important}
.sans-marge{margin:0!important}
.sans-marge-bas{margin-bottom:0!important}

/* --- boutons et segments ------------------------------------------------ */
.segment{display:inline-flex;background:var(--surface);border:1px solid var(--bord);
  border-radius:10px;padding:3px}
.segment a{padding:6px var(--e-3);border-radius:7px;font-size:12.8px;color:var(--txt-2);
  font-weight:550;min-height:34px;display:inline-flex;align-items:center}
.segment a.actif,.segment a[aria-current]{background:var(--surface-2);color:var(--txt);
  font-weight:var(--gras-moyen);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,var(--ombre-1)}
.segment a:hover:not(.actif){color:var(--txt)}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-s);
  padding:7px 13px;min-height:36px;font-size:12.8px;color:var(--txt-2);cursor:pointer;
  font-weight:550;transition:border-color var(--duree-courte),color var(--duree-courte)}
.bouton:hover{border-color:var(--bord-fort);color:var(--txt)}
.bouton.primaire{background:var(--accent);border-color:var(--accent);color:var(--sur-accent);
  font-weight:650}
.bouton.primaire:hover{background:var(--accent-fort);border-color:var(--accent-fort)}

select.champ,input.champ,textarea.champ{background:var(--fond-2);border:1px solid var(--bord);
  border-radius:var(--r-s);padding:var(--e-2) 11px;font-size:13.2px;width:100%;min-height:38px}
select.champ:focus,input.champ:focus,textarea.champ:focus{outline:none;
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sourd)}
select.champ:focus-visible,input.champ:focus-visible,textarea.champ:focus-visible{
  outline:var(--focus-epaisseur) solid var(--focus);outline-offset:1px}

/* --- raccourcis --------------------------------------------------------- */
.raccourci{display:flex;align-items:center;gap:var(--e-3);padding:10px var(--e-3);
  border:1px solid var(--bord);border-radius:var(--r-s);background:var(--surface-2);
  font-size:13.2px;color:var(--txt-2);min-height:44px;
  transition:border-color var(--duree),color var(--duree)}
.raccourci:hover{border-color:var(--accent);color:var(--txt)}
.raccourci b{font-weight:var(--gras-moyen);color:var(--txt)}
.raccourci .fl{margin-left:auto;color:var(--txt-3)}
.raccourci .ic{opacity:.8}

/* --- repli (details) ---------------------------------------------------- */
details.repli{border:1px solid var(--bord);border-radius:var(--r-s);padding:11px 13px;
  background:var(--surface)}
details.repli summary{cursor:pointer;font-size:13px;font-weight:var(--gras-moyen);
  list-style:none;min-height:24px;display:flex;align-items:center;gap:6px}
details.repli summary::-webkit-details-marker{display:none}
details.repli summary::before{content:"\25B8";color:var(--txt-3);flex:none}
details.repli[open] summary::before{content:"\25BE"}
details.repli summary:focus-visible{outline:var(--focus-epaisseur) solid var(--focus);
  outline-offset:var(--focus-decalage)}
details.repli summary .puce{margin-left:6px}

/* --- panneau de periode personnalisee ----------------------------------- */
/* `.perlibre{display:flex}` l emportait sur `[hidden]{display:none}` du
   navigateur : la fenetre restait ouverte en permanence. Cette regle doit
   rester AVANT toute autre declaration de display sur .perlibre. */
.perlibre[hidden]{display:none!important}
.segment [data-periode-libre]{background:none;border:0;color:var(--txt-2);font:inherit;
  font-size:12.5px;font-weight:560;padding:0 13px;min-height:34px;cursor:pointer;
  border-radius:7px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.segment [data-periode-libre]::before{content:"";width:11px;height:11px;flex:none;
  border:1.6px solid currentColor;border-radius:2.5px;
  box-shadow:inset 0 -6px 0 -5px currentColor;opacity:.85}
.segment [data-periode-libre]:hover{color:var(--txt)}
.segment [data-periode-libre].actif{background:var(--surface-2);color:var(--txt)}

.perlibre{position:absolute;right:0;top:calc(100% + var(--e-2));z-index:40;
  background:var(--surface);border:1px solid var(--bord-fort);border-radius:var(--r);
  padding:13px 14px 12px;box-shadow:var(--ombre-3);display:flex;flex-direction:column;
  gap:11px;width:352px;text-align:left}
.pl-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3)}
.pl-tete b{font-size:12.5px;font-weight:650;color:var(--txt)}
.pl-fermer{background:none;border:0;color:var(--txt-3);font-size:21px;line-height:1;
  width:44px;height:44px;margin:-10px -10px -10px 0;cursor:pointer;border-radius:var(--r-s);
  display:grid;place-items:center;flex:none}
.pl-fermer:hover{color:var(--txt)}
.pl-rac{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pl-rac button{background:var(--surface-2);border:1px solid var(--bord);color:var(--txt-2);
  border-radius:var(--r-s);padding:var(--e-2) 9px;min-height:40px;font:inherit;
  font-size:12.2px;cursor:pointer;text-align:center;
  transition:border-color var(--duree-courte),color var(--duree-courte)}
.pl-rac button:hover{border-color:var(--bord-fort);color:var(--txt)}
.pl-rac button.actif{border-color:var(--accent);color:var(--txt);background:var(--accent-sourd)}
.pl-champs{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-2) 9px;align-items:end}
.perlibre label{min-width:0;display:flex;flex-direction:column;gap:var(--e-1);
  font-size:11px;color:var(--txt-2);font-weight:var(--gras-moyen);letter-spacing:.02em}
.perlibre input[type=date]{background:var(--fond-2);border:1px solid var(--bord-fort);
  color:var(--txt);border-radius:var(--r-s);padding:var(--e-2) 9px;font:inherit;
  font-size:13.2px;width:100%;min-height:44px;color-scheme:dark}
.pl-ok{grid-column:1 / -1;background:var(--accent);color:var(--sur-accent);border:0;
  border-radius:var(--r-s);padding:11px var(--e-4);min-height:44px;font:inherit;
  font-size:13.5px;font-weight:var(--gras-fort);cursor:pointer;white-space:nowrap;margin-top:2px}
.pl-ok:hover{background:var(--accent-fort)}
.perlibre-aide{margin:0;font-size:11.3px;color:var(--txt-3);line-height:1.5}
.perlibre-aide.alerte{color:var(--attention)}

/* --- page de connexion -------------------------------------------------- */
.page-connexion{min-height:100vh;display:grid;place-items:center;padding:var(--e-5);
  background:radial-gradient(1100px 520px at 50% -10%,rgba(63,208,168,.10),transparent 62%),
             var(--fond)}
.boite{width:100%;max-width:392px;background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--r-l);padding:30px 28px;box-shadow:var(--ombre-3)}
.boite h1{font-size:var(--t-grand);margin-bottom:5px}
.boite p.s{color:var(--txt-2);font-size:13px;margin:0 0 var(--e-5)}
.champ-groupe{margin-bottom:13px}
.champ-groupe label{display:block;font-size:11.6px;color:var(--txt-2);margin-bottom:5px;
  font-weight:var(--gras-moyen)}
.erreur{background:var(--probleme-fond);border:1px solid rgba(240,133,133,.3);color:#F2A6A6;
  border-radius:var(--r-s);padding:9px 12px;font-size:12.6px;margin-bottom:var(--e-3)}
.boite .bouton{width:100%;justify-content:center;padding:11px;min-height:44px}

/* ==========================================================================
   11. RESPONSIVE — de 360 px a 2560 px
   Un seul bloc par palier, du plus large au plus etroit, dans l ordre.
   Chaque palier ne fait que RESSERRER : jamais un ecran plus etroit ne
   recoit plus de colonnes qu un ecran plus large.

     >1180   g2:2  g3:3  g4:4  g5:5  g6:6  g23:2fr 1fr
     <=1180  g5:3  g6:4
     <=1100  g4:2  g6:3
     <=900   g3:2  g5:2  g6:2  g23:1
     <=820   g2:1  + bascule de la barre laterale a l horizontale
     <=560   tout a 1 colonne
     <=380   marges et polices resserrees
   ========================================================================== */
@media (min-width:1700px){
  .principal{padding-left:var(--e-7);padding-right:var(--e-7)}
}

@media (max-width:1180px){
  .g5{grid-template-columns:repeat(3,1fr)}
  .g6{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:1100px){
  .principal{padding:var(--e-5) var(--e-5) var(--e-7)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g6{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .g5,.g6{grid-template-columns:repeat(2,1fr)}
  .g23{grid-template-columns:1fr}
  /* Cinq cartes sur deux colonnes laissent une orpheline a demi-largeur. La
     derniere prend alors toute la largeur. Avec quatre ou six cartes, rien
     ne bouge. `.comble` applique la meme regle a n importe quelle grille. */
  .g5 > :nth-child(odd):last-child,
  .comble > :nth-child(odd):last-child{grid-column:1 / -1}
  .g-auto{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

@media (max-width:820px){
  .principal{padding:var(--e-3) 13px var(--e-6)}
  .g2{grid-template-columns:1fr}
  .grille{gap:10px}

  /* La barre laterale devient une bande. Elle passe a la ligne au lieu de
     defiler : sur neuf onglets, un menu qui defile en cache la moitie.
     La marque et la deconnexion partagent la premiere ligne : chaque ligne
     gagnee est une ligne de chiffres visible sans faire defiler. */
  .appli{grid-template-columns:1fr}
  .flanc{position:static;height:auto;display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"marque sortie" "nav nav";align-items:center;
    gap:10px;padding:10px 13px;border-right:none;
    border-bottom:1px solid var(--bord);overflow:visible}
  .flanc .marque{grid-area:marque}
  .flanc .nav{grid-area:nav;flex-direction:row;flex-wrap:wrap;gap:6px}
  .flanc-bas{grid-area:sortie}
  .flanc .nav .titre{display:none}
  .flanc .nav a{padding:9px 11px;border-radius:var(--r-s);font-size:12.6px;
    min-height:44px;display:flex;align-items:center}
  /* L onglet courant doit rester reperable dans une bande d onglets. */
  .flanc .nav a.actif,.flanc .nav a[aria-current=page]{box-shadow:none;
    border:1px solid var(--accent);background:var(--accent-sourd)}
  .marque{gap:9px}
  /* Le pied de la barre laterale etait masque sur telephone : plus de nom de
     compte, et surtout plus de bouton de deconnexion. */
  .flanc-bas{display:flex;align-items:center;gap:10px;margin:0 0 0 auto;border:0;
    padding:0;white-space:nowrap;flex:none}
  .flanc-bas .fb-nom,.flanc-bas .fb-role{display:none}

  /* En-tete : le selecteur de periode passe sous le titre, pleine largeur, et
     le bouton de recalcul reste sur la meme ligne au lieu d occuper la sienne.
     Les periodes se rangent sur deux lignes plutot que de se comprimer. */
  .entete{flex-direction:column;align-items:stretch;gap:10px}
  .entete h1{font-size:var(--t-grand)}
  .outils{display:grid;grid-template-columns:1fr auto;gap:var(--e-2);align-items:stretch}
  .outils > select.champ{grid-column:1 / -1;width:100%!important}
  .segment{display:flex;flex-wrap:wrap}
  .segment a,.segment [data-periode-libre]{flex:1 1 28%;text-align:center;min-height:44px;
    display:flex;align-items:center;justify-content:center}
  .bouton{min-height:44px}
  .perlibre{position:static;width:100%;margin-top:0;grid-column:1 / -1}
  .pl-ok{padding:13px var(--e-4)}

  .section-titre{margin-top:var(--e-4);font-size:12px}
  .carte{padding:13px}
  .carte h2{font-size:14px}
  .carte.majeure{padding:var(--e-4)}
  p.intro{font-size:12.8px;margin-bottom:var(--e-3)}
  .barre{grid-template-columns:minmax(64px,46%) 1fr auto;font-size:12px}
  .anneau{width:116px;height:116px}
  .pied{flex-direction:column;align-items:flex-start;gap:6px}

  /* Le SVG est trace dans un repere de 760 puis reduit : a 800 px un texte
     de 10 unites s affiche a 10 px, a 360 px il tomberait a 4,7 px. */
  .chart .axe,text.axe{font-size:14px}
  .chart .grille,line.grille{stroke-width:1.4}
}

@media (max-width:560px){
  /* Deux indicateurs cote a cote deviennent illisibles : les nombres se
     coupent et les libelles passent sur trois lignes. */
  .g2,.g3,.g4,.g5,.g6,.g23{grid-template-columns:1fr}
  .g-auto,.g-large{grid-template-columns:1fr}
  .chart .axe,text.axe{font-size:21px}
  .chart .grille,line.grille{stroke-width:2}
  .anneau-wrap{gap:var(--e-3)}
}

@media (max-width:380px){
  .principal{padding:var(--e-3) 10px var(--e-6)}
  .carte{padding:11px}
  .flanc .nav a{font-size:12px;padding:var(--e-2) 9px}
  .flanc .nav a .ic{display:none}
  table.t,table.tab{min-width:420px;font-size:12px}
  .segment a{font-size:11.5px;padding:0 6px}
}

/* --- confort tactile : 44 px reels des que le doigt est le pointeur ------ */
@media (pointer:coarse){
  .nav a,.segment a,.segment [data-periode-libre],.bouton,.raccourci,
  .pl-rac button,.pl-ok,.pl-fermer,.fb-sortie a,details.repli summary,
  select.champ,input.champ{min-height:44px}
  .pl-fermer{min-width:44px}
  details.repli summary{padding:var(--e-2) 0}
}
@media (hover:none){
  .nav a,.segment a,.bouton,.carte.lien{-webkit-tap-highlight-color:transparent}
  .carte{-webkit-overflow-scrolling:touch}
  /* Sans souris, le survol n existe pas : le repere du graphique doit etre
     atteignable autrement (tableau depliable sous le graphique). */
  .chart .pt{cursor:default}
}

/* ==========================================================================
   12. IMPRESSION
   Un client imprime son tableau pour son comptable ou son associe.
   ========================================================================== */
@media print{
  :root{--fond:#fff;--fond-2:#fff;--surface:#fff;--surface-2:#fff;--surface-3:#F4F6F5;
        --bord:#CBD5D1;--bord-fort:#9FB1AC;
        --txt:#101614;--txt-2:#3C4B47;--txt-3:#5C6B66;
        --accent:#0B7B78;--bon:#1B7A45;--attention:#8A5A08;--probleme:#A32626;
        --info:#1B5C88;
        --bon-fond:transparent;--attention-fond:transparent;--probleme-fond:transparent;
        --info-fond:transparent;--neutre-fond:transparent;--accent-sourd:transparent;
        --ombre-1:none;--ombre-2:none;--ombre-3:none}
  body{background:#fff;color:#101614;font-size:11.5pt}
  .flanc,.outils,.perlibre,.saut,.raccourci .fl{display:none!important}
  .appli{display:block}
  .principal{padding:0;max-width:none}
  .carte{border:1px solid #CBD5D1;box-shadow:none;overflow:visible;
    break-inside:avoid;page-break-inside:avoid}
  .section-titre{break-after:avoid;page-break-after:avoid}
  .grille{gap:8pt}
  table.t,table.tab{min-width:0;font-size:9.5pt}
  .chart .grille,line.grille{stroke:#D5DEDB}
  .chart .axe,text.axe{fill:#3C4B47;font-size:11px}
  .puce,.delta,.source{border:1px solid currentColor}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#5C6B66}
  .pied,.fraicheur{color:#5C6B66}
  .fraicheur .point{animation:none}
}