/* =====================================================================
   THEME HIFLEET
   Un seul fichier, charge par toutes les pages, avant leur style local.

   Ce qu il contient :
     1. Les jetons  : couleurs, rayons, espacements, ombres, police
     2. Le squelette: barre laterale, zone principale, entete collante
     3. L entete    : le motif dominant, satellites, mesure, bande
     4. Les briques : recherche, filtres, boutons, etats vides

   Ce qu il ne contient pas : rien de propre a une seule page. Si une
   regle ne sert qu a un endroit, elle reste dans sa page.

   Ordre de chargement obligatoire :
     theme.css, puis mf-shell.css, puis mobile-shell.css, puis le style
     de la page. Ce qui vient apres gagne, c est voulu : une page peut
     encore se demarquer sans toucher au theme.
   ===================================================================== */

:root{
  /* --- Fonds et surfaces --- */
  --bg:#132a41;              /* fond de page */
  --surface:#1c3c5f;         /* cartes, tableaux, panneaux */
  --surface2:#2b3348;        /* gris ardoise, valeur de 27 pages */
  --relief:#21466e;          /* bleu de relief : bande et blocs de mesure */
  --surface3:#17253c;        /* creux : lignes de liste, champs */
  --border:rgba(255,255,255,0.07);   /* valeur de 15 pages sur 17 */
  --border-fort:rgba(255,255,255,0.16);

  /* --- Textes. Aucun gris atténué : tous tiennent au-dessus de 5 de
         contraste sur --surface. --- */
  --text:#f1f5f9;                    /* 13,9 de contraste sur --surface */
  --text2:rgba(255,255,255,0.80);    /* secondaire, valeur prevue par la regle */
  --text3:rgba(255,255,255,0.60);    /* attenue, idem */
  --text-clair:#e8eef7;              /* 12,9, quand il faut de l opaque */
  --text-doux:#bcd0e4;               /*  9,5 */
  --text-gris:#a8bdd4;               /*  7,6 */

  /* --- Couleurs de sens --- */
  --green:#2e8b57;
  --green-clair:#5cc78c;
  --green-fonce:#256f46;
  --green-sombre:#1e5c39;    /* survol des boutons verts, 7,9 avec du blanc */
  /* --- Papier et encre ---
     Un fond clair pose sur une page sombre n est pas du texte, et un
     texte sombre pose sur un fond clair n est pas une surface. Ces
     jetons-la etaient empruntes aux jetons de texte et de surface, ce
     qui marchait tant que la palette ne bougeait pas. Au mode clair,
     inverser --text aurait retourne soixante-treize fonds. --- */
  --papier:#f1f5f9;          /* fond clair sur page sombre */
  --papier-doux:#e8eef7;
  --papier-gris:#bcd0e4;
  --papier-cendre:#a8bdd4;
  --encre:#132a41;           /* texte sombre sur fond clair */
  --encre-doux:#1c3c5f;
  --encre-sombre:#17253c;
  /* --- Blocs d information ---
     Ils etaient des aplats satures avec du texte blanc. Sur le rouge, le
     blanc tombait a 3,76 de contraste : l element le plus important du
     tableau de bord etait le moins lisible. Et sur un fond clair, un
     aplat sature agresse.

     Ils deviennent un fond sourd, un filet de couleur a gauche, et du
     texte dans la couleur. Meme information, meme forme dans les deux
     modes, et le contraste passe a 10,3. --- */
  --bloc-rouge-f:#3a1f24;  --bloc-rouge-t:#ffc9c9;  --bloc-rouge-b:#ef4444;
  --bloc-vert-f:#1b3a30;   --bloc-vert-t:#a7f3d0;   --bloc-vert-b:#5cc78c;
  --bloc-bleu-f:#1d3352;   --bloc-bleu-t:#c7dcf3;   --bloc-bleu-b:#6fa8e0;
  --bloc-amber-f:#3a2f1a;  --bloc-amber-t:#f5dfa0;  --bloc-amber-b:#fbbf24;
  --bloc-orange-f:#3a2a1c; --bloc-orange-t:#fdd7b5; --bloc-orange-b:#f97316;


  /* --- Couleurs d information promues en jetons ---
     Elles etaient ecrites en dur dans les pages, jusqu a quarante fois
     pour la premiere. Ce sont les variantes de vos blocs d alerte et de
     vos etiquettes : ni des accidents ni des doublons, de vraies
     couleurs. Nommees ici, elles suivront le jour ou la palette
     changera, mode clair compris.
     Vingt-deux jetons couvrent 61 pour cent des couleurs encore en dur ;
     les 107 valeurs restantes ne servent qu a un ou deux endroits. --- */
  --rouge-clair             :#f87171;
  --rouge-fonce             :#991b1b;
  --rouge-pale              :#fca5a5;
  --rouge-sombre            :#5c2126;
  --rouge-vif               :#dc2626;
  --orange-brique           :#9a3412;
  --orange-clair            :#fb923c;
  --orange-pale             :#fdba74;
  --orange-vif              :#e0a03a;
  --orange-vif-degrade      :#ea580c;
  --orange-vif-texte        :#f59e0b;
  --vert-clair              :#8fd8b0;
  --vert-pale               :#86efac;
  --vert-pale-texte         :#a7f3d0;
  --vert-sombre             :#166534;
  --vert-vif                :#22c55e;
  --cyan-pale               :#7dd3fc;
  --bleu-clair              :#60a5fa;
  --bleu-fonce              :#334155;
  --bleu-fonce-fond         :#003399;
  --bleu-pale               :#93c5fd;
  --neutre-sombre           :#111111;
  --red:#ef4444;
  --red-clair:#ff8f8f;
  --red-fonce:#7f1d1d;
  --orange:#f97316;          /* accent, valeur de 25 pages. Jamais en fond
                                sous du texte blanc : 2,9 de contraste. */
  --orange-fond:#c2410c;     /* fond d un bloc, blanc lisible a 6,2 */
  --orange-fonce:#7c2a0e;
  --amber:#fbbf24;
  --amber-fonce:#96590a;
  --blue:#6fa8e0;            /* accent, valeur de 23 pages */

  /* --- Origine web ---
     Cette couleur ne decore pas, elle informe : elle signale ce qui vient
     du site du loueur plutot que du comptoir. Reservation prise par le
     widget, vehicule publie en ligne, contrat issu d une demande web,
     proces-verbal lu par la machine. C est le seul module vendu a part,
     il se voit. Ne pas l employer pour autre chose. --- */
  --web:#a78bfa;             /* texte et icone, 5,5 sur --surface */
  --web-clair:#c4b5fd;       /* texte accentue, 8,2 */
  --web-fond:#7c3aed;        /* fond, blanc lisible a 5,7 */
  --web-sombre:#6d28d9;      /* fond profond, blanc a 7,1 */
  /* Les memes teintes en composantes, pour les voiles : on ecrit
     rgba(var(--web-rgb), .15) et l opacite reste au point d emploi. */
  --web-rgb:167,139,250;
  --web-clair-rgb:196,181,253;
  --web-fond-rgb:124,58,237;
  --web-sombre-rgb:109,40,217;
  --blue-fond:#41618a;       /* fond d un bloc */
  --blue-fonce:#1e40af;

  /* --- Degrades des blocs d entete. Definis ici une fois : changer le
         rouge dominant change les cinq pages d un coup. --- */
  --grad-alerte:linear-gradient(140deg,#7f1d1d,#ef4444);
  --grad-calme:linear-gradient(140deg,#14532d,#1e7a48);
  --grad-bleu:linear-gradient(135deg,#1e40af,#41618a);
  --grad-vert:linear-gradient(135deg,#14532d,#1e7a48);
  --grad-orange:linear-gradient(135deg,#7c2a0e,#c2410c);
  --grad-amber:linear-gradient(135deg,#6b4a08,#96590a);
  --grad-rouge:linear-gradient(135deg,#7f1d1d,#cf2020);

  /* --- Formes --- */
  --r-s:9px; --r-m:12px; --r-l:14px; --r-xl:18px; --r-rond:100px;
  --pad:20px;
  --ombre:0 1px 3px rgba(0,0,0,0.24);
  --ombre-relief:0 6px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
  --ombre-pastille:0 3px 10px rgba(0,0,0,0.28);

  /* --- Une seule police --- */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* --- Cible tactile minimale. Apple demande 44, Google 48. --- */
  --touche:44px;
}

/* =====================================================================
   2. SQUELETTE
   Present a l identique sur toutes les pages de gestion.
   ===================================================================== */
.hf *{margin:0;padding:0;box-sizing:border-box;}
.hf body,body.hf{background:var(--bg);color:var(--text);font-family:var(--font);}

/* Le focus doit rester visible. Soixante-douze regles du site le
   supprimaient sans rien mettre a la place : au clavier on ne savait
   plus ou l on etait. */
.hf :focus-visible,
:focus-visible{outline:2px solid var(--green-clair);outline-offset:2px;border-radius:4px;}

/* =====================================================================
   3. L ENTETE DES PAGES DE LISTE
   Un chiffre qui commande la page, des satellites, un bloc de mesure,
   puis la bande d un seul tenant. Ecrit une fois, utilise par les
   procès-verbaux, les sinistres, les conducteurs, et a terme la flotte
   et les contrats.
   ===================================================================== */
.hf-roi{display:grid;grid-template-columns:minmax(290px,1.15fr) 2fr;gap:14px;
  margin-bottom:13px;}
.hf-cote{display:grid;grid-template-rows:auto auto;gap:11px;min-width:0;}
.hf-sats{display:grid;gap:11px;}
.hf-sats.deux{grid-template-columns:repeat(2,1fr);}
.hf-sats.trois{grid-template-columns:repeat(3,1fr);}
.hf-sats.quatre{grid-template-columns:repeat(4,1fr);}

/* --- Le bloc dominant --- */
.hf-main{border-radius:var(--r-xl);padding:22px 24px;position:relative;overflow:hidden;
  cursor:pointer;background:var(--bloc-rouge-f);color:var(--bloc-rouge-t);
  box-shadow:inset 5px 0 0 var(--bloc-rouge-b);}
.hf-main.calme{background:var(--bloc-vert-f);color:var(--bloc-vert-t);
  box-shadow:inset 5px 0 0 var(--bloc-vert-b);}
.hf-lb{font-size:0.72rem;font-weight:900;text-transform:uppercase;letter-spacing:0.13em;
  color:inherit;opacity:.9;}
.hf-n{font-size:5.2rem;font-weight:900;letter-spacing:-0.06em;line-height:0.88;
  margin:6px 0 0;color:inherit;font-variant-numeric:tabular-nums;}
.hf-n sup{font-size:1.3rem;font-weight:700;vertical-align:super;margin-left:5px;color:inherit;opacity:.72;}
.hf-s{font-size:0.92rem;font-weight:800;color:inherit;opacity:.92;margin-top:6px;}
.hf-fil{position:absolute;right:-18px;bottom:-28px;font-size:132px;opacity:0.13;
  transform:rotate(-8deg);pointer-events:none;}

/* --- Le message du bloc dominant, trois tons --- */
.hf-msg{display:flex;align-items:center;gap:9px;font-size:0.86rem;font-weight:900;
  color:inherit;opacity:.88;margin-top:12px;background:rgba(0,0,0,0.32);border-radius:var(--r-m);
  padding:9px 15px;width:fit-content;max-width:100%;
  border:1px solid rgba(255,255,255,0.22);}
.hf-msg i{font-size:1.15rem;flex-shrink:0;}
.hf-msg.chaud{background:rgba(0,0,0,0.34);border-color:rgba(253,186,116,0.55);}
.hf-msg.chaud i{color:var(--orange-pale);}
.hf-msg.brulant{background:var(--red-fonce);border-color:var(--rouge-pale);
  animation:hfPulse 1.5s ease-in-out infinite;}
.hf-msg.brulant i{color:var(--orange-pale);animation:hfFlamme 0.9s ease-in-out infinite;}
@keyframes hfPulse{0%,100%{box-shadow:0 0 0 0 rgba(252,165,165,0.5);}
  50%{box-shadow:0 0 0 8px rgba(252,165,165,0);}}
@keyframes hfFlamme{0%,100%{transform:scale(1) rotate(-4deg);}
  50%{transform:scale(1.18) rotate(4deg);}}

/* --- Les satellites --- */
.hf-sat{border-radius:var(--r-l);padding:14px 16px;position:relative;overflow:hidden;
  cursor:pointer;}
.hf-sat.bleu{background:var(--bloc-bleu-f);color:var(--bloc-bleu-t);
  box-shadow:inset 4px 0 0 var(--bloc-bleu-b);}
.hf-sat.vert{background:var(--bloc-vert-f);color:var(--bloc-vert-t);
  box-shadow:inset 4px 0 0 var(--bloc-vert-b);}
.hf-sat.orange{background:var(--bloc-orange-f);color:var(--bloc-orange-t);
  box-shadow:inset 4px 0 0 var(--bloc-orange-b);}
.hf-sat.amber{background:var(--bloc-amber-f);color:var(--bloc-amber-t);
  box-shadow:inset 4px 0 0 var(--bloc-amber-b);}
.hf-sat.rouge{background:var(--bloc-rouge-f);color:var(--bloc-rouge-t);
  box-shadow:inset 4px 0 0 var(--bloc-rouge-b);}
.hf-sat-lb{font-size:0.66rem;font-weight:900;text-transform:uppercase;
  letter-spacing:0.11em;color:inherit;opacity:.9;margin-bottom:3px;}
.hf-sat-n{font-size:2.5rem;font-weight:900;letter-spacing:-0.04em;line-height:1;
  color:inherit;font-variant-numeric:tabular-nums;}
.hf-sats.quatre .hf-sat-n{font-size:2.2rem;}
.hf-sat-s{font-size:0.74rem;font-weight:800;color:#fff;margin-top:2px;}
.hf-sat-fil{position:absolute;right:-8px;bottom:-14px;font-size:66px;opacity:0.14;
  transform:rotate(-8deg);pointer-events:none;}

/* --- Le bloc de mesure : une barre a deux parts --- */
.hf-mes{background:var(--relief);border-radius:var(--r-l);padding:13px 17px;
  display:flex;align-items:center;gap:16px;border:1px solid rgba(255,255,255,0.10);
  box-shadow:var(--ombre-relief);}
.hf-mes-t{flex:1;min-width:0;}
.hf-mes-b{flex:2;min-width:0;}
.hf-mes-lb{font-size:0.66rem;font-weight:900;text-transform:uppercase;
  letter-spacing:0.11em;color:#fff;margin-bottom:5px;}
.hf-mes-n{font-size:1.85rem;font-weight:900;letter-spacing:-0.03em;color:var(--amber);
  line-height:1;font-variant-numeric:tabular-nums;}
.hf-bar{height:9px;border-radius:var(--r-rond);background:rgba(255,255,255,0.1);
  overflow:hidden;display:flex;}
.hf-bar i{display:block;height:100%;transition:width 0.6s ease;}
.hf-bar i.bon{background:linear-gradient(90deg,#14532d,#1e7a48);}
.hf-bar i.mauvais{background:linear-gradient(90deg,var(--red-fonce),var(--red));}
.hf-bar i.neutre{background:linear-gradient(90deg,var(--blue-fonce),var(--blue-fond));}
.hf-lg{display:flex;justify-content:space-between;font-size:0.66rem;font-weight:800;
  color:var(--text-doux);margin-top:6px;}
.hf-mes-msg{display:flex;align-items:center;gap:7px;font-size:0.72rem;font-weight:800;
  margin-top:7px;line-height:1.25;}
.hf-mes-msg i{font-size:0.9rem;flex-shrink:0;}
.hf-mes-msg.calme{color:var(--text-doux);}
.hf-mes-msg.tendu{color:var(--red-clair);}

/* --- La bande d un seul tenant --- */
.hf-bande{display:grid;grid-template-columns:repeat(4,1fr);background:var(--relief);
  border-radius:var(--r-l);overflow:hidden;margin-bottom:0.5rem;
  border:1px solid rgba(255,255,255,0.10);box-shadow:var(--ombre-relief);}
.hf-b{padding:14px 17px;position:relative;min-width:0;}
.hf-b + .hf-b::before{content:"";position:absolute;left:0;top:14px;bottom:14px;
  width:1px;background:var(--border-fort);}
.hf-bande.cinq{grid-template-columns:repeat(5,1fr);}
.hf-b-lb{font-size:0.63rem;font-weight:900;text-transform:uppercase;letter-spacing:0.1em;
  color:#fff;margin-bottom:7px;}
.hf-b-n{font-size:1.55rem;font-weight:850;letter-spacing:-0.02em;line-height:1;
  color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;}
.hf-b-n.vert{color:var(--green-clair);}
.hf-b-n.rouge{color:var(--red-clair);}
.hf-b-f{font-size:0.7rem;font-weight:800;margin-top:5px;color:var(--text-doux);
  display:flex;align-items:center;justify-content:space-between;gap:8px;}

/* --- Selection du filtre en cours --- */
.hf-main.active,.hf-sat.active{outline:2px solid #fff;outline-offset:-2px;}

@media(max-width:1200px){
  .hf-roi{grid-template-columns:1fr;gap:10px;}
  .hf-sats.quatre{grid-template-columns:repeat(2,1fr);}
  .hf-bande{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
  .hf-sats.trois{grid-template-columns:1fr;}
}

/* --- L entete repliee au defilement ---
   Ecrite une fois. Chaque page n a plus qu a donner l ordre de ses
   pastilles, plus les cinquante lignes de forçage qu elle recopiait. */
@media(min-width:769px){
  .desktop-sticky-zone.compact .hf-roi,
  .desktop-sticky-zone.compact .hf-cote,
  .desktop-sticky-zone.compact .hf-sats{display:contents !important;}
  .desktop-sticky-zone.compact .hf-mes,
  .desktop-sticky-zone.compact .hf-bande{display:none !important;}
  .desktop-sticky-zone.compact .hf-main,
  .desktop-sticky-zone.compact .hf-sat{
    display:inline-flex !important;flex-direction:row !important;
    align-items:center !important;gap:9px !important;height:38px !important;
    min-height:38px !important;padding:0 16px !important;
    border-radius:var(--r-rond) !important;box-shadow:var(--ombre-pastille) !important;}
  .desktop-sticky-zone.compact .hf-lb,
  .desktop-sticky-zone.compact .hf-sat-lb{
    font-size:0.7rem !important;font-weight:800 !important;letter-spacing:0.04em !important;
    margin:0 !important;line-height:1 !important;white-space:nowrap !important;
    text-transform:uppercase !important;}
  .desktop-sticky-zone.compact .hf-n,
  .desktop-sticky-zone.compact .hf-sat-n{
    font-size:1.15rem !important;font-weight:900 !important;margin:0 !important;
    line-height:1 !important;}
  .desktop-sticky-zone.compact .hf-n sup,
  .desktop-sticky-zone.compact .hf-s,
  .desktop-sticky-zone.compact .hf-sat-s,
  .desktop-sticky-zone.compact .hf-msg,
  .desktop-sticky-zone.compact .hf-fil,
  .desktop-sticky-zone.compact .hf-sat-fil{display:none !important;}
}

/* =====================================================================
   4. BRIQUES COMMUNES
   ===================================================================== */
.hf-vide{padding:40px 20px;text-align:center;color:var(--text-doux);font-size:0.86rem;
  font-weight:700;}
.hf-vide i{display:block;font-size:2rem;margin-bottom:12px;opacity:0.5;}

/* Squelette de chargement, a la place du mot Chargement. */
.hf-chargement{display:flex;flex-direction:column;gap:10px;padding:18px 4px;}
.hf-chargement .hf-skel{height:13px;}
.hf-skel{background:linear-gradient(90deg,rgba(255,255,255,0.05) 25%,
  rgba(255,255,255,0.10) 37%,rgba(255,255,255,0.05) 63%);
  background-size:400% 100%;border-radius:8px;height:14px;
  animation:hfSkel 1.4s ease infinite;}
@keyframes hfSkel{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =====================================================================
   5. MOUVEMENT
   Le site compte cent onze animations en boucle. Pour qui souffre de
   migraines ou de mal des transports, une page qui pulse en permanence
   est inutilisable. Un seul reglage les coupe toutes.
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;}
}

/* =====================================================================
   6. SOCLE COMMUN
   Ce que toutes les pages qui se servent de ces classes declaraient
   deja, mot pour mot, chacune de son cote. Hisse ici, retire de la.
   Aucune valeur n a ete choisie : ce sont celles du site.
   ===================================================================== */
.main{flex:1}   /* 29 pages */
.sidebar{background:var(--surface);border-right:1px solid var(--border);height:100vh;overflow-y:auto;position:fixed;scrollbar-width:none}   /* 28 pages */
.logo-my{color:#fff}   /* 20 pages */
.topbar{display:flex}   /* 20 pages */
.menu-item{align-items:center;border-radius:7px;color:#fff;display:flex;font-size:.8rem;font-weight:600;gap:10px;letter-spacing:.05em;margin-bottom:.15rem;padding:.6rem 1rem;text-decoration:none;text-transform:uppercase;transition:all .15s}   /* 8 pages */
.card{background:var(--surface)}   /* 7 pages */
.topbar-right{align-items:center;display:flex;gap:8px}   /* 7 pages */
.card-title{align-items:center;display:flex;font-weight:700}   /* 5 pages */
.main-sticky{border-bottom:1px solid rgba(255,255,255,0.04);padding:0 0 0.5rem}   /* 5 pages */
.counter-spark{flex-shrink:0;height:14px;max-width:60px}   /* 5 pages */
.toolbar{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:0}   /* 5 pages */
.search-box{flex:1;min-width:200px;position:relative}   /* 5 pages */
.search-icon{left:1rem;position:absolute;top:50%;transform:translateY(-50%)}   /* 5 pages */
.filter-btn-mat{border:none;cursor:pointer;font-family:var(--font);font-size:0.78rem;font-weight:700;height:44px;padding:0 18px;text-transform:uppercase;transition:all 0.2s}   /* 5 pages */
.btn{align-items:center;cursor:pointer;display:inline-flex}   /* 4 pages */
.counter-delta-text{display:none}   /* 4 pages */
.btn-add{align-items:center;border:none;cursor:pointer;display:inline-flex;font-family:var(--font);font-size:0.78rem;font-weight:700;height:44px;text-transform:uppercase}   /* 4 pages */
.section-label{align-items:center;color:#fff;display:flex;font-size:16px;font-weight:800;gap:8px;letter-spacing:0.08em;margin-bottom:12px;text-transform:uppercase}   /* 4 pages */
.sticky-head{background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 4px 12px rgba(0,0,0,0.3);padding:1.5rem 3.5rem 1rem;position:sticky;top:0;z-index:10}   /* 4 pages */
.sh-row{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-bottom:0.875rem}   /* 4 pages */
.sh-title{font-size:2rem;font-weight:800;line-height:1.1;margin-bottom:0.25rem}   /* 4 pages */
.sh-sub{color:#fff;font-size:1rem;font-weight:500;margin:0}   /* 4 pages */
.sh-actions{align-items:center;display:flex;gap:8px}   /* 4 pages */
.btn-save{border:none;color:#fff;cursor:pointer;font-family:var(--font);font-weight:700}   /* 4 pages */
.kpis{display:grid;gap:14px}   /* 3 pages */
.barre{align-items:center;display:flex;margin-bottom:18px}   /* 3 pages */
.btn-back{text-decoration:none}   /* 3 pages */
.fg{display:grid;grid-template-columns:1fr 1fr}   /* 3 pages */
.mf-mobile-banner{display:none}   /* 3 pages */
.table-wrap{background:var(--surface);overflow:hidden}   /* 3 pages */
.kv-l{color:var(--text3);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}   /* 3 pages */
.kv-v{color:#fff;font-size:13px;font-weight:600}   /* 3 pages */
.content-grid{align-items:start;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr}   /* 3 pages */
.btn-main{align-items:center;border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-family:var(--font);font-size:0.9rem;font-weight:700;gap:8px;justify-content:center;padding:14px;transition:all 0.2s;width:100%}   /* 3 pages */
.btn-secondary{background:transparent;border:1px solid var(--border);border-radius:12px;color:var(--text2);cursor:pointer;font-family:var(--font);font-size:0.85rem;font-weight:600;margin-top:8px;padding:12px;transition:all 0.2s;width:100%}   /* 3 pages */
.spinner{animation:spin 0.8s linear infinite;border-radius:50%;height:40px;margin:0 auto 1rem;width:40px}   /* 3 pages */
.progress-fill{height:100%}   /* 3 pages */
.file-item{align-items:center;background:var(--surface2);border-radius:10px;display:flex;justify-content:space-between;margin-bottom:8px;padding:12px 16px}   /* 3 pages */
.file-name-txt{align-items:center;color:var(--text);display:flex;font-size:13px;font-weight:600;gap:8px}   /* 3 pages */
.dl-btn{border-radius:8px;font-size:12px;font-weight:700;padding:6px 14px;text-decoration:none;transition:all 0.15s}   /* 3 pages */
.panel-overlay{display:none;inset:0;position:fixed}   /* 3 pages */
.panel{height:100vh;overflow-y:auto;position:fixed;top:0}   /* 3 pages */
.panel-header{align-items:center;display:flex}   /* 3 pages */
.panel-close{align-items:center;border-radius:8px;cursor:pointer;display:flex;justify-content:center}   /* 3 pages */
.hf-skel-tr td{padding:14px 16px;}
.hf-skel-tr .hf-skel{display:block;height:12px;}
.hf-skel-tr:nth-child(2n) .hf-skel{width:78%;}
.hf-skel-tr:nth-child(3n) .hf-skel{width:62%;}

/* =====================================================================
   8. RETOUR VERS LA LISTE
   Les quatre pages de detail avaient chacune leur bouton : un lien gris
   sans fond, une pastille de 36 pixels sans libelle, une pilule rouge,
   un bouton gris. Aucune ne faisait la hauteur tactile minimale.
   Un seul composant, et le libelle nomme toujours la destination.
   ===================================================================== */
.hf-retour{display:inline-flex;align-items:center;gap:9px;min-height:var(--touche);
  padding:0 18px;border-radius:var(--r-rond);background:var(--surface);
  border:1px solid var(--border-fort);color:var(--text);font-family:var(--font);
  font-size:0.8rem;font-weight:800;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:background .2s,border-color .2s;}
.hf-retour:hover{background:var(--surface2);border-color:var(--green-clair);
  color:var(--text);}
.hf-retour i{font-size:0.8rem;}
@media(max-width:768px){
  .hf-retour{padding:0 14px;font-size:0.76rem;}
}

/* =====================================================================
   9. BASCULE TUILES OU TABLEAU
   Trois pages la proposaient, avec trois balisages et trois noms.
   Contrats n affichait que des icones et confiait le sens a l attribut
   title, invisible au doigt et au lecteur d ecran. Les trois portent
   maintenant leur libelle.
   ===================================================================== */
.hf-vues{display:inline-flex;gap:4px;background:var(--surface);
  border:1px solid var(--border-fort);border-radius:var(--r-rond);padding:3px;}
.hf-vue{display:inline-flex;align-items:center;gap:7px;min-height:38px;
  padding:0 14px;border:none;border-radius:var(--r-rond);background:none;
  color:var(--text3);font-family:var(--font);font-size:0.78rem;font-weight:800;
  cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;}
.hf-vue:hover{color:var(--text);}
.hf-vue.active{background:var(--green-fonce);color:#fff;}
.hf-vue i{font-size:0.82rem;}
@media(max-width:768px){
  .hf-vues{display:none;}
}


/* =====================================================================
   10. MENU LATERAL
   Un seul endroit pour toutes les pages. Le style etait redeclare dans
   chacune, avec jusqu a trois variantes pour la meme classe.

   Un trait blanc traverse la barre de flanc a flanc pour separer les
   groupes : il ressort la marge interieure par une marge negative de
   meme valeur. Le vert est reserve a ce qui compte, les icones et
   l endroit ou l on se trouve.

   Chaque icone vit dans une tuile. Au survol la tuile s allume en vert
   sombre, sur l entree active elle reste allumee : le vert dit  ici,
   maintenant , il ne le dirait plus s il etait partout pareil.
   ===================================================================== */

/* --- L entete de la barre : logo et gabarit ---
   Le logo etait declare dans 26 pages a l identique, et dashboard.css en
   avait sa propre copie. Quand j ai retire celle du tableau de bord, il
   s est retrouve sans regle du tout : logo minuscule, cale a gauche,
   pendant que les autres pages gardaient le grand logo centre. Deux
   pages, deux dispositions.

   Le selecteur vise .sidebar .logo et non .logo : les pages publiques
   ont elles aussi une classe .logo, dans leur entete, qui n a rien a
   voir et ne doit pas bouger. --- */
.sidebar{width:260px;padding:2rem 1.25rem;}
.sidebar .logo{font-size:2rem;font-weight:700;letter-spacing:-1px;
  margin-bottom:1.75rem;text-align:center;border-bottom:1px solid var(--border);
  padding-bottom:1.25rem;}
.sidebar .logo-my,
.sidebar .logo-fleet{color:#fff;}

.sidebar nav{display:block;}

.nav-raccourci{display:block;margin:0 0 20px;}
.nav-rc{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:44px;padding:0 14px;border:none;border-radius:10px;
  background:var(--green-fonce);color:#fff;font-family:var(--font);
  font-size:0.82rem;font-weight:800;text-decoration:none;cursor:pointer;
  transition:background .18s;}
.nav-rc:hover{background:var(--green-sombre);color:#fff;}
.nav-rc i{font-size:0.92rem;}

/* de flanc a flanc : la marge negative annule la marge interieure de la barre */
.menu-section{padding:15px 1.25rem 13px;margin-left:-1.25rem;margin-right:-1.25rem;
  border-top:2px solid var(--border-fort);}
.menu-section:first-of-type{border-top:none;padding-top:0;}
.menu-title{font-size:0.78rem;font-weight:900;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text2);margin-bottom:10px;padding-left:4px;}

.menu-item{display:flex;align-items:center;gap:12px;padding:7px 10px;
  border-radius:9px;color:var(--text);font-size:0.79rem;font-weight:650;
  text-decoration:none;letter-spacing:0;text-transform:none;
  margin-bottom:2px;transition:background .15s;}
.menu-item i{width:32px;height:32px;flex:0 0 32px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:9px;
  background:var(--surface3);color:var(--green-clair);font-size:0.94rem;
  transition:background .16s,color .16s,transform .16s;}
.menu-item:hover{background:var(--relief);color:var(--text);}
.menu-item:hover i{background:var(--green-sombre);color:#fff;transform:scale(1.06);}
.menu-item.active{background:var(--surface2);color:var(--green-clair);
  box-shadow:inset 3px 0 0 var(--green-clair);border-left:none;border-radius:9px;}
.menu-item.active i{background:var(--green-fonce);color:#fff;}

@media (prefers-reduced-motion: reduce){
  .menu-item i{transition:none;}
  .menu-item:hover i{transform:none;}
}


/* =====================================================================
   11. MODE CLAIR  ---  EN VEILLE, NON BRANCHE
   Les scripts mf-mode.js et mf-mode-tot.js ne sont charges par aucune
   page : le bouton n existe donc pas et ces regles ne s appliquent
   jamais. Elles restent la, pretes.
   Ce qui manque est note en tete de mf-mode-tot.js : un defaut de
   bascule retour, et les ecrans de detail qui ne suivent pas encore.
   Un second jeu de valeurs pour les MEMES jetons. Aucune forme ne
   change : c est la regle. Une classe sur le corps suffit a tout
   basculer, sur les 28 pages, parce que tout passe par les jetons.

   La barre laterale ne bascule pas. Le repere de navigation ne doit pas
   bouger, et le contraste entre la colonne sombre et le cadran clair
   separe  ou je vais  de  ce que je regarde .

   Le fond n est pas blanc. Le blanc pur a une luminance de 1,00 : sur un
   plein ecran il eblouit au bout d une heure. Celui-ci est a 0,75.
   ===================================================================== */
html.clair-tot body,
body.clair{
  --bg:#d8e2ee;
  --surface:#e8eff7;
  --surface2:#dfe7f1;
  --surface3:#eef3f9;
  --relief:#dfe7f1;
  --border:#c8d4e3;
  --border-fort:#b6c5d8;

  --text:#1b2f4e;
  --text2:#3d4f63;
  --text3:#50606f;
  --text-clair:#1b2f4e;
  --text-doux:#3d4f63;
  --text-gris:#50606f;

  /* papier et encre s echangent : ce qui etait un fond clair pose sur du
     sombre devient un fond sombre pose sur du clair, et inversement. */
  --papier:#1b2f4e;
  --papier-doux:#243a58;
  --papier-gris:#3d4f63;
  --papier-cendre:#50606f;
  --encre:#e8eff7;
  --encre-doux:#dfe7f1;
  --encre-sombre:#d8e2ee;

  /* les blocs gardent leur forme, seules les valeurs changent */
  --bloc-rouge-f:#f7dede;  --bloc-rouge-t:#8a1f1f;  --bloc-rouge-b:#c53030;
  --bloc-vert-f:#dcece3;   --bloc-vert-t:#1e5c39;   --bloc-vert-b:#256f46;
  --bloc-bleu-f:#dde6f2;   --bloc-bleu-t:#1b3a5b;   --bloc-bleu-b:#41618a;
  --bloc-amber-f:#f4ecdb;  --bloc-amber-t:#7a5409;  --bloc-amber-b:#96590a;
  --bloc-orange-f:#f7e5d6; --bloc-orange-t:#8a3a0f; --bloc-orange-b:#c2410c;
}
/* La barre laterale garde les valeurs sombres, quel que soit le mode. */
html.clair-tot body .sidebar,
body.clair .sidebar{
  --surface:#1c3c5f; --surface2:#2b3348; --surface3:#17253c; --relief:#21466e;
  --text:#f1f5f9; --text2:rgba(255,255,255,.80); --text3:rgba(255,255,255,.60);
  --border:rgba(255,255,255,0.07); --border-fort:rgba(255,255,255,0.16);
  background:#1c3c5f;
}

/* Le basculeur, a gauche du rond de profil. */
.bascule-mode{width:38px;height:38px;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:0.95rem;
  background:var(--relief);border:1px solid var(--border-fort);color:var(--text);
  transition:background .18s;}
.bascule-mode:hover{background:var(--surface2);}
.bascule-mode .lune{display:none;}
html.clair-tot body .bascule-mode .lune,
body.clair .bascule-mode .lune{display:inline;}
html.clair-tot body .bascule-mode .soleil,
body.clair .bascule-mode .soleil{display:none;}


/* =====================================================================
   12. CHAMPS DE SAISIE SUR TELEPHONE
   iOS zoome automatiquement des qu on touche un champ dont la police
   fait moins de 16 pixels, et il ne dezoome pas apres : la page reste
   agrandie, le loueur doit pincer pour revenir. C est le defaut mobile
   le plus penible, et 107 selecteurs le declenchaient sur 30 pages.

   Le !important est ici legitime et non un contournement : les regles
   de page sont plus specifiques que celles du theme et chargees apres,
   elles gagneraient sans lui. La seule alternative serait de modifier
   107 regles une par une, dans 30 fichiers.

   La regle ne s applique qu au telephone : sur ordinateur les tailles
   d origine sont conservees.
   ===================================================================== */
@media (max-width: 768px){
  html body input,
  html body select,
  html body textarea,
  html body input[type],
  html body .co-section .co-f input,
  html body .co-section .co-f select,
  html body .co-section .co-f textarea{
    font-size: 16px !important;
  }
}


/* =====================================================================
   13. DEBORDEMENT HORIZONTAL SUR TELEPHONE
   Un seul element trop large et toute la page defile de cote : le
   loueur voit une bande vide a droite, et le contenu se decale a chaque
   glissement. Vingt-trois pages sur vingt-huit n avaient aucun garde.

   On emploie clip et non hidden. Les deux coupent le debordement, mais
   hidden fait du corps un conteneur de defilement, et tout
   position:sticky a l interieur cesse alors de coller. Il y a 34
   entetes collants sur 21 pages : hidden les aurait tous casses.
   clip ne cree pas de conteneur, les entetes continuent de coller.

   Ce n est qu un filet. Les causes se corrigent une par une, et les
   tableaux figes a 600 pixels le sont dans le point suivant.

   Les navigateurs anterieurs a Safari 16 ignorent clip : ils se
   retrouvent dans l etat actuel, sans garde. Aucune regression.
   ===================================================================== */
@media (max-width: 768px){
  html, body{
    overflow-x: clip;
    max-width: 100%;
  }
}