/* ===========================================================================
   7000.pro — feuille de style (reconstruite depuis les maquettes validées)
   TOKENS · FOND · SHELL · COMPOSANTS — écriture propre, zéro patch
   =========================================================================== */

/* ============================ TOKENS ============================ */
:root{
  /* ── SOCLE COMMUN, 05/09/2026 ─────────────────────────────────────────
     --mono n'etait declaree que dans le bloc de l'ecran de supervision.
     Dix declarations de la carte d'appareil l'utilisent SANS repli, et une
     declaration qui appelle une variable inconnue est REJETEE EN ENTIER par
     le navigateur — sans erreur, sans avertissement. Cela fonctionne
     aujourd'hui parce que les deux pages concernees passent par cet ecran ;
     le jour ou une troisieme page dessinera une carte, dix regles mourront
     en silence. C'est exactement ce qui est arrive cote telephone le meme
     jour, avec --font et --mono : douze declarations mortes depuis des
     semaines, decouvertes parce que Miguel a regarde une fiche client.
     REGLE DE MAISON : toute variable partagee vit ICI, a la racine. Un ecran
     peut la reecrire pour lui seul ; il ne doit jamais etre le seul a la
     porter. Et toute declaration qui l'appelle porte un repli.
     ─────────────────────────────────────────────────────────────────────── */
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --msup-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Accent signature — émeraude RAL 5021 (palette de prod) */
  --accent:#06747D; --accent-bright:#0BAE9F; --accent-deep:#044a52;
  --accent-glow:rgba(11,174,159,.45); --accent-line:rgba(11,174,159,.22);
  /* Or — identité / bouton actif (gelé 27/05) */
  --or-1:#f5d370; --or-2:#e8c76a; --or-3:#c9a247; --or-edge:#b88e35;
  /* Page claire (sable) */
  --page-1:#ffffff; --page-2:#f6f3ec; --border-light:#e6e9f0;
  /* Barre sombre (dégradé validé 27/05) */
  --bar-1:#5b6068; --bar-2:#3c4047; --bar-3:#2a2d34;
  /* Sémantique */
  --red:#ef4444; --orange:#f59f4d; --green:#22c55e; --blue:#5e8df5; --violet:#7c5cf0;
  /* Texte */
  --tx-dark:#1a1f2e; --tx-on-bar:#f0f3fa; --tx-on-bar-2:rgba(255,255,255,.6);
  /* Espacements / rayons / dims (repris du shell validé) */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:99px;
  --niv1-h:50px; --niv2-h:36px;
  /* Ombres */
  --sh-tile:0 10px 30px rgba(20,30,50,.10),0 2px 6px rgba(20,30,50,.06);
  --sh-bar:0 6px 24px rgba(0,0,0,.30);
  /* Tuile (matière sombre signature) */
  --tile-bg:radial-gradient(120% 80% at 0% 0%,rgba(11,174,159,.18) 0%,transparent 52%),linear-gradient(165deg,#3a4756 0%,#2e3946 52%,#273140 100%); /* 21/09 : ardoise, plus noir */
  --tile-border:1px solid rgba(255,255,255,.06);
  /* Typo */
  --font:'Plus Jakarta Sans','DM Sans',system-ui,-apple-system,sans-serif;
  /* Motifs bulles validés */
  --bubbles-page:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MjAiIGhlaWdodD0iMzIwIiB2aWV3Qm94PSIwIDAgNDIwIDMyMCI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJ2MCIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuODUiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjMyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0idjEiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4zMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA4Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9InYyIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC44NSIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJ2MyIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuODUiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjMyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0idjQiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4zMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA4Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9InY1IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC44NSIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJ2NiIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuODUiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjMyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0idjciIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC4zMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjA4Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9InY4IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC44NSIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJ2OSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuODUiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjMyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0idjEwIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC44NSIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJ2MTEiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwxODAsMjEwKSIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyNTUsMTgwLDIxMCkiIHN0b3Atb3BhY2l0eT0iMC4zMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwxODAsMjEwKSIgc3RvcC1vcGFjaXR5PSIwLjA4Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9InYxMiIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuODUiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjMyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0idjEzIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC44NSIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJ2MTQiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC4zMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjA4Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9InYxNSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuODUiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjMyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0idjE2IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC44NSIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJ2MTciIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwxODAsMjEwKSIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyNTUsMTgwLDIxMCkiIHN0b3Atb3BhY2l0eT0iMC4zMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwxODAsMjEwKSIgc3RvcC1vcGFjaXR5PSIwLjA4Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9InYxOCIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuODUiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjMyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0idjE5IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC44NSIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJ2MjAiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4zMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA4Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9InYyMSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuODUiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjMyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSIzMzUuNiIgY3k9IjI0NS45IiByPSI1IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjE4Ii8+PGNpcmNsZSBjeD0iMzM1IiBjeT0iMjQ1IiByPSI1LjciIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMzYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PGNpcmNsZSBjeD0iMzM1IiBjeT0iMjQ1IiByPSI1IiBmaWxsPSJ1cmwoI3YwKSIvPjxjaXJjbGUgY3g9IjMzNSIgY3k9IjI0NSIgcj0iNC42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjY1IiBzdHJva2Utd2lkdGg9IjAuNDUiLz48ZWxsaXBzZSBjeD0iMzMzLjUiIGN5PSIyNDMuMjUiIHJ4PSIxLjYiIHJ5PSIxLjExOTk5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjEwNC42IiBjeT0iMjA3LjkiIHI9IjQiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuMTgiLz48Y2lyY2xlIGN4PSIxMDQiIGN5PSIyMDciIHI9IjQuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4zNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48Y2lyY2xlIGN4PSIxMDQiIGN5PSIyMDciIHI9IjQiIGZpbGw9InVybCgjdjEpIi8+PGNpcmNsZSBjeD0iMTA0IiBjeT0iMjA3IiByPSIzLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNjUiIHN0cm9rZS13aWR0aD0iMC40NSIvPjxlbGxpcHNlIGN4PSIxMDIuOCIgY3k9IjIwNS42IiByeD0iMS4yOCIgcnk9IjAuODk1OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjMxLjYiIGN5PSIyMzYuOSIgcj0iNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC4xOCIvPjxjaXJjbGUgY3g9IjIzMSIgY3k9IjIzNiIgcj0iNS43IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxMzAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjM2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgY3g9IjIzMSIgY3k9IjIzNiIgcj0iNSIgZmlsbD0idXJsKCN2MikiLz48Y2lyY2xlIGN4PSIyMzEiIGN5PSIyMzYiIHI9IjQuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC42NSIgc3Ryb2tlLXdpZHRoPSIwLjQ1Ii8+PGVsbGlwc2UgY3g9IjIyOS41IiBjeT0iMjM0LjI1IiByeD0iMS42IiByeT0iMS4xMTk5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIxNzMuNiIgY3k9IjExMC45IiByPSI3IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjE4Ii8+PGNpcmNsZSBjeD0iMTczIiBjeT0iMTEwIiByPSI3LjciIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE4MCwxNjAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMzYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PGNpcmNsZSBjeD0iMTczIiBjeT0iMTEwIiByPSI3IiBmaWxsPSJ1cmwoI3YzKSIvPjxjaXJjbGUgY3g9IjE3MyIgY3k9IjExMCIgcj0iNi42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjY1IiBzdHJva2Utd2lkdGg9IjAuNDUiLz48ZWxsaXBzZSBjeD0iMTcwLjkiIGN5PSIxMDcuNTUiIHJ4PSIyLjI0IiByeT0iMS41NjgiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjMyOC42IiBjeT0iMjczLjkiIHI9IjYiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuMTgiLz48Y2lyY2xlIGN4PSIzMjgiIGN5PSIyNzMiIHI9IjYuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4zNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48Y2lyY2xlIGN4PSIzMjgiIGN5PSIyNzMiIHI9IjYiIGZpbGw9InVybCgjdjQpIi8+PGNpcmNsZSBjeD0iMzI4IiBjeT0iMjczIiByPSI1LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNjUiIHN0cm9rZS13aWR0aD0iMC40NSIvPjxlbGxpcHNlIGN4PSIzMjYuMiIgY3k9IjI3MC45IiByeD0iMS45MiIgcnk9IjEuMzQzOTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTcyLjYiIGN5PSIyNDguOSIgcj0iNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC4xOCIvPjxjaXJjbGUgY3g9IjE3MiIgY3k9IjI0OCIgcj0iNS43IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxODAsMTYwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjM2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgY3g9IjE3MiIgY3k9IjI0OCIgcj0iNSIgZmlsbD0idXJsKCN2NSkiLz48Y2lyY2xlIGN4PSIxNzIiIGN5PSIyNDgiIHI9IjQuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC42NSIgc3Ryb2tlLXdpZHRoPSIwLjQ1Ii8+PGVsbGlwc2UgY3g9IjE3MC41IiBjeT0iMjQ2LjI1IiByeD0iMS42IiByeT0iMS4xMTk5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyNDMuNiIgY3k9IjIzLjkiIHI9IjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuMTgiLz48Y2lyY2xlIGN4PSIyNDMiIGN5PSIyMyIgcj0iNS43IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxNjAsMjIwLDIwMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjM2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgY3g9IjI0MyIgY3k9IjIzIiByPSI1IiBmaWxsPSJ1cmwoI3Y2KSIvPjxjaXJjbGUgY3g9IjI0MyIgY3k9IjIzIiByPSI0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNjUiIHN0cm9rZS13aWR0aD0iMC40NSIvPjxlbGxpcHNlIGN4PSIyNDEuNSIgY3k9IjIxLjI1IiByeD0iMS42IiByeT0iMS4xMTk5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzODkuNiIgY3k9IjEzNC45IiByPSI0IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjE4Ii8+PGNpcmNsZSBjeD0iMzg5IiBjeT0iMTM0IiByPSI0LjciIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMzYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PGNpcmNsZSBjeD0iMzg5IiBjeT0iMTM0IiByPSI0IiBmaWxsPSJ1cmwoI3Y3KSIvPjxjaXJjbGUgY3g9IjM4OSIgY3k9IjEzNCIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjY1IiBzdHJva2Utd2lkdGg9IjAuNDUiLz48ZWxsaXBzZSBjeD0iMzg3LjgiIGN5PSIxMzIuNiIgcng9IjEuMjgiIHJ5PSIwLjg5NTk5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjI1OC42IiBjeT0iMTQ0LjkiIHI9IjYiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuMTgiLz48Y2lyY2xlIGN4PSIyNTgiIGN5PSIxNDQiIHI9IjYuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4zNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48Y2lyY2xlIGN4PSIyNTgiIGN5PSIxNDQiIHI9IjYiIGZpbGw9InVybCgjdjgpIi8+PGNpcmNsZSBjeD0iMjU4IiBjeT0iMTQ0IiByPSI1LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNjUiIHN0cm9rZS13aWR0aD0iMC40NSIvPjxlbGxpcHNlIGN4PSIyNTYuMiIgY3k9IjE0MS45IiByeD0iMS45MiIgcnk9IjEuMzQzOTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMzIzLjYiIGN5PSI1NC45IiByPSIzLjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuMTgiLz48Y2lyY2xlIGN4PSIzMjMiIGN5PSI1NCIgcj0iNC4yIiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxMzAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjM2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgY3g9IjMyMyIgY3k9IjU0IiByPSIzLjUiIGZpbGw9InVybCgjdjkpIi8+PGNpcmNsZSBjeD0iMzIzIiBjeT0iNTQiIHI9IjMuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC42NSIgc3Ryb2tlLXdpZHRoPSIwLjQ1Ii8+PGVsbGlwc2UgY3g9IjMyMS45NSIgY3k9IjUyLjc3NSIgcng9IjEuMTIiIHJ5PSIwLjc4NCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTM4LjYiIGN5PSIxMC45IiByPSI1IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjE4Ii8+PGNpcmNsZSBjeD0iMTM4IiBjeT0iMTAiIHI9IjUuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4zNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48Y2lyY2xlIGN4PSIxMzgiIGN5PSIxMCIgcj0iNSIgZmlsbD0idXJsKCN2MTApIi8+PGNpcmNsZSBjeD0iMTM4IiBjeT0iMTAiIHI9IjQuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC42NSIgc3Ryb2tlLXdpZHRoPSIwLjQ1Ii8+PGVsbGlwc2UgY3g9IjEzNi41IiBjeT0iOC4yNSIgcng9IjEuNiIgcnk9IjEuMTE5OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTA3LjYiIGN5PSI2Ny45IiByPSI0IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjE4Ii8+PGNpcmNsZSBjeD0iMTA3IiBjeT0iNjciIHI9IjQuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjU1LDE4MCwyMTApIiBzdHJva2Utb3BhY2l0eT0iMC4zNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48Y2lyY2xlIGN4PSIxMDciIGN5PSI2NyIgcj0iNCIgZmlsbD0idXJsKCN2MTEpIi8+PGNpcmNsZSBjeD0iMTA3IiBjeT0iNjciIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC42NSIgc3Ryb2tlLXdpZHRoPSIwLjQ1Ii8+PGVsbGlwc2UgY3g9IjEwNS44IiBjeT0iNjUuNiIgcng9IjEuMjgiIHJ5PSIwLjg5NTk5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjExNS42IiBjeT0iMTA0LjkiIHI9IjMuNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC4xOCIvPjxjaXJjbGUgY3g9IjExNSIgY3k9IjEwNCIgcj0iNC4yIiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyNTUsMjIwLDE2MCkiIHN0cm9rZS1vcGFjaXR5PSIwLjM2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgY3g9IjExNSIgY3k9IjEwNCIgcj0iMy41IiBmaWxsPSJ1cmwoI3YxMikiLz48Y2lyY2xlIGN4PSIxMTUiIGN5PSIxMDQiIHI9IjMuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC42NSIgc3Ryb2tlLXdpZHRoPSIwLjQ1Ii8+PGVsbGlwc2UgY3g9IjExMy45NSIgY3k9IjEwMi43NzUiIHJ4PSIxLjEyIiByeT0iMC43ODQiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjE2MS42IiBjeT0iMTgzLjkiIHI9IjQiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuMTgiLz48Y2lyY2xlIGN4PSIxNjEiIGN5PSIxODMiIHI9IjQuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4zNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48Y2lyY2xlIGN4PSIxNjEiIGN5PSIxODMiIHI9IjQiIGZpbGw9InVybCgjdjEzKSIvPjxjaXJjbGUgY3g9IjE2MSIgY3k9IjE4MyIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjY1IiBzdHJva2Utd2lkdGg9IjAuNDUiLz48ZWxsaXBzZSBjeD0iMTU5LjgiIGN5PSIxODEuNiIgcng9IjEuMjgiIHJ5PSIwLjg5NTk5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjE1My42IiBjeT0iMTc2LjkiIHI9IjQiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuMTgiLz48Y2lyY2xlIGN4PSIxNTMiIGN5PSIxNzYiIHI9IjQuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjU1LDIyMCwxNjApIiBzdHJva2Utb3BhY2l0eT0iMC4zNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48Y2lyY2xlIGN4PSIxNTMiIGN5PSIxNzYiIHI9IjQiIGZpbGw9InVybCgjdjE0KSIvPjxjaXJjbGUgY3g9IjE1MyIgY3k9IjE3NiIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjY1IiBzdHJva2Utd2lkdGg9IjAuNDUiLz48ZWxsaXBzZSBjeD0iMTUxLjgiIGN5PSIxNzQuNiIgcng9IjEuMjgiIHJ5PSIwLjg5NTk5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjE4Mi42IiBjeT0iMzMuOSIgcj0iNCIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC4xOCIvPjxjaXJjbGUgY3g9IjE4MiIgY3k9IjMzIiByPSI0LjciIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE2MCwyMjAsMjAwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMzYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PGNpcmNsZSBjeD0iMTgyIiBjeT0iMzMiIHI9IjQiIGZpbGw9InVybCgjdjE1KSIvPjxjaXJjbGUgY3g9IjE4MiIgY3k9IjMzIiByPSIzLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNjUiIHN0cm9rZS13aWR0aD0iMC40NSIvPjxlbGxpcHNlIGN4PSIxODAuOCIgY3k9IjMxLjYiIHJ4PSIxLjI4IiByeT0iMC44OTU5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSI0MDkuNiIgY3k9IjIwMC45IiByPSI0IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjE4Ii8+PGNpcmNsZSBjeD0iNDA5IiBjeT0iMjAwIiByPSI0LjciIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMzYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PGNpcmNsZSBjeD0iNDA5IiBjeT0iMjAwIiByPSI0IiBmaWxsPSJ1cmwoI3YxNikiLz48Y2lyY2xlIGN4PSI0MDkiIGN5PSIyMDAiIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC42NSIgc3Ryb2tlLXdpZHRoPSIwLjQ1Ii8+PGVsbGlwc2UgY3g9IjQwNy44IiBjeT0iMTk4LjYiIHJ4PSIxLjI4IiByeT0iMC44OTU5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzOTcuNiIgY3k9IjMwMC45IiByPSI3IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjE4Ii8+PGNpcmNsZSBjeD0iMzk3IiBjeT0iMzAwIiByPSI3LjciIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwxODAsMjEwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMzYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PGNpcmNsZSBjeD0iMzk3IiBjeT0iMzAwIiByPSI3IiBmaWxsPSJ1cmwoI3YxNykiLz48Y2lyY2xlIGN4PSIzOTciIGN5PSIzMDAiIHI9IjYuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC42NSIgc3Ryb2tlLXdpZHRoPSIwLjQ1Ii8+PGVsbGlwc2UgY3g9IjM5NC45IiBjeT0iMjk3LjU1IiByeD0iMi4yNCIgcnk9IjEuNTY4IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyMTQuNiIgY3k9Ijg1LjkiIHI9IjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuMTgiLz48Y2lyY2xlIGN4PSIyMTQiIGN5PSI4NSIgcj0iNS43IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxODAsMTYwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjM2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgY3g9IjIxNCIgY3k9Ijg1IiByPSI1IiBmaWxsPSJ1cmwoI3YxOCkiLz48Y2lyY2xlIGN4PSIyMTQiIGN5PSI4NSIgcj0iNC42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjY1IiBzdHJva2Utd2lkdGg9IjAuNDUiLz48ZWxsaXBzZSBjeD0iMjEyLjUiIGN5PSI4My4yNSIgcng9IjEuNiIgcnk9IjEuMTE5OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTg1LjYiIGN5PSIxODMuOSIgcj0iNyIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC4xOCIvPjxjaXJjbGUgY3g9IjE4NSIgY3k9IjE4MyIgcj0iNy43IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxMzAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjM2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgY3g9IjE4NSIgY3k9IjE4MyIgcj0iNyIgZmlsbD0idXJsKCN2MTkpIi8+PGNpcmNsZSBjeD0iMTg1IiBjeT0iMTgzIiByPSI2LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNjUiIHN0cm9rZS13aWR0aD0iMC40NSIvPjxlbGxpcHNlIGN4PSIxODIuOSIgY3k9IjE4MC41NSIgcng9IjIuMjQiIHJ5PSIxLjU2OCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMzA0LjYiIGN5PSIxNzAuOSIgcj0iNCIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC4xOCIvPjxjaXJjbGUgY3g9IjMwNCIgY3k9IjE3MCIgcj0iNC43IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxMzAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjM2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgY3g9IjMwNCIgY3k9IjE3MCIgcj0iNCIgZmlsbD0idXJsKCN2MjApIi8+PGNpcmNsZSBjeD0iMzA0IiBjeT0iMTcwIiByPSIzLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNjUiIHN0cm9rZS13aWR0aD0iMC40NSIvPjxlbGxpcHNlIGN4PSIzMDIuOCIgY3k9IjE2OC42IiByeD0iMS4yOCIgcnk9IjAuODk1OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMzQzLjYiIGN5PSIyNjEuOSIgcj0iMyIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC4xOCIvPjxjaXJjbGUgY3g9IjM0MyIgY3k9IjI2MSIgcj0iMy43IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyNTUsMjIwLDE2MCkiIHN0cm9rZS1vcGFjaXR5PSIwLjM2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgY3g9IjM0MyIgY3k9IjI2MSIgcj0iMyIgZmlsbD0idXJsKCN2MjEpIi8+PGNpcmNsZSBjeD0iMzQzIiBjeT0iMjYxIiByPSIyLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNjUiIHN0cm9rZS13aWR0aD0iMC40NSIvPjxlbGxpcHNlIGN4PSIzNDIuMSIgY3k9IjI1OS45NSIgcng9IjAuOTYiIHJ5PSIwLjY3MTk5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjwvc3ZnPg==");
  --bubbles-bar:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNjAiIGhlaWdodD0iMjYwIiB2aWV3Qm94PSIwIDAgMzYwIDI2MCI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiMCIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjEiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImIyIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiMyIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjQiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI1IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNiIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjciIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwxODAsMjEwKSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyNTUsMTgwLDIxMCkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwxODAsMjEwKSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI4IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiOSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjEwIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiMTEiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImIxMiIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjEzIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiMTQiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImIxNSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjE2IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiMTciIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImIxOCIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjE5IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiMjAiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwxODAsMjEwKSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyNTUsMTgwLDIxMCkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwxODAsMjEwKSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImIyMSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjIyIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiMjMiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImIyNCIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjI1IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiMjYiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImIyNyIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjI4IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiMjkiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImIzMCIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjMxIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiMzIiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImIzMyIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjM0IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiMzUiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImIzNiIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjM3IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiMzgiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImIzOSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjQwIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNDEiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI0MiIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjQzIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNDQiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI0NSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjQ2IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNDciIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI0OCIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjQ5IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMTgwLDIxMCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDE4MCwyMTApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMTgwLDIxMCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNTAiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI1MSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjUyIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNTMiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI1NCIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjU1IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNTYiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI1NyIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjU4IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNTkiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI2MCIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjYxIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNjIiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI2MyIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjY0IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNjUiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI2NiIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjY3IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNjgiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI2OSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjcwIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNzEiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDEzMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI3MiIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjczIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNzQiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigyMjAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI3NSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDIyMCwxODAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjc2IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiNzciIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI3OCIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjc5IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiODAiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI4MSIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDI1NSwyMjAsMTYwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjgyIiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiODMiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI4NCIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjg1IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDIyMCwxNjApIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjIwLDE2MCkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiODYiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxODAsMTYwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE4MCwxNjAsMjU1KSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImI4NyIgY3g9IjM1JSIgY3k9IjMwJSIgcj0iODUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMTYwLDIyMCwyMDApIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iYjg4IiBjeD0iMzUlIiBjeT0iMzAlIiByPSI4NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC42MiIvPjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdG9wLW9wYWNpdHk9IjAuMjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigxMzAsMTgwLDI1NSkiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJiODkiIGN4PSIzNSUiIGN5PSIzMCUiIHI9Ijg1JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjYyIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9InJnYigxNjAsMjIwLDIwMCkiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDE2MCwyMjAsMjAwKSIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PGNpcmNsZSBjeD0iODAuOCIgY3k9IjEwNS4xIiByPSIzLjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSI4MCIgY3k9IjEwNCIgcj0iNC4xIiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMjAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjgwIiBjeT0iMTA0IiByPSIzLjUiIGZpbGw9InVybCgjYjApIi8+PGNpcmNsZSBjeD0iODAiIGN5PSIxMDQiIHI9IjMuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iNzguOTUiIGN5PSIxMDIuNzc1IiByeD0iMS4yMjQ5OTk5OTk5OTk5OTk5IiByeT0iMC44NTc0OTk5OTk5OTk5OTk4IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzMDEuOCIgY3k9IjE4LjEiIHI9IjMuNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjMwMSIgY3k9IjE3IiByPSI0LjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE2MCwyMjAsMjAwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMzAxIiBjeT0iMTciIHI9IjMuNSIgZmlsbD0idXJsKCNiMSkiLz48Y2lyY2xlIGN4PSIzMDEiIGN5PSIxNyIgcj0iMy4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIyOTkuOTUiIGN5PSIxNS43NzUiIHJ4PSIxLjIyNDk5OTk5OTk5OTk5OTkiIHJ5PSIwLjg1NzQ5OTk5OTk5OTk5OTgiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjQ5LjgiIGN5PSIxNDUuMSIgcj0iMyIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjQ5IiBjeT0iMTQ0IiByPSIzLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iNDkiIGN5PSIxNDQiIHI9IjMiIGZpbGw9InVybCgjYjIpIi8+PGNpcmNsZSBjeD0iNDkiIGN5PSIxNDQiIHI9IjIuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iNDguMSIgY3k9IjE0Mi45NSIgcng9IjEuMDQ5OTk5OTk5OTk5OTk5OCIgcnk9IjAuNzM0OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjkxLjgiIGN5PSI2Ni4xIiByPSIyIiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMjkxIiBjeT0iNjUiIHI9IjIuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIyOTEiIGN5PSI2NSIgcj0iMiIgZmlsbD0idXJsKCNiMykiLz48Y2lyY2xlIGN4PSIyOTEiIGN5PSI2NSIgcj0iMS42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIyOTAuNCIgY3k9IjY0LjMiIHJ4PSIwLjciIHJ5PSIwLjQ4OTk5OTk5OTk5OTk5OTk0IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzMjguOCIgY3k9IjE1Ny4xIiByPSI3IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMzI4IiBjeT0iMTU2IiByPSI3LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDEzMCwxODAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMzI4IiBjeT0iMTU2IiByPSI3IiBmaWxsPSJ1cmwoI2I0KSIvPjxjaXJjbGUgY3g9IjMyOCIgY3k9IjE1NiIgcj0iNi42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIzMjUuOSIgY3k9IjE1My41NSIgcng9IjIuNDQ5OTk5OTk5OTk5OTk5NyIgcnk9IjEuNzE0OTk5OTk5OTk5OTk5NiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMzA1LjgiIGN5PSIxMDguMSIgcj0iNiIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjMwNSIgY3k9IjEwNyIgcj0iNi42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxMzAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjMwNSIgY3k9IjEwNyIgcj0iNiIgZmlsbD0idXJsKCNiNSkiLz48Y2lyY2xlIGN4PSIzMDUiIGN5PSIxMDciIHI9IjUuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMzAzLjIiIGN5PSIxMDQuOSIgcng9IjIuMDk5OTk5OTk5OTk5OTk5NiIgcnk9IjEuNDY5OTk5OTk5OTk5OTk5OCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjYuOCIgY3k9IjE0Ni4xIiByPSIzIiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMjYiIGN5PSIxNDUiIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIyNiIgY3k9IjE0NSIgcj0iMyIgZmlsbD0idXJsKCNiNikiLz48Y2lyY2xlIGN4PSIyNiIgY3k9IjE0NSIgcj0iMi42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIyNS4xIiBjeT0iMTQzLjk1IiByeD0iMS4wNDk5OTk5OTk5OTk5OTk4IiByeT0iMC43MzQ5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSI2NS44IiBjeT0iMTUyLjEiIHI9IjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSI2NSIgY3k9IjE1MSIgcj0iNS42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyNTUsMTgwLDIxMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjY1IiBjeT0iMTUxIiByPSI1IiBmaWxsPSJ1cmwoI2I3KSIvPjxjaXJjbGUgY3g9IjY1IiBjeT0iMTUxIiByPSI0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjYzLjUiIGN5PSIxNDkuMjUiIHJ4PSIxLjc1IiByeT0iMS4yMjQ5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzNTQuOCIgY3k9IjUyLjEiIHI9IjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIzNTQiIGN5PSI1MSIgcj0iNS42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxMzAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjM1NCIgY3k9IjUxIiByPSI1IiBmaWxsPSJ1cmwoI2I4KSIvPjxjaXJjbGUgY3g9IjM1NCIgY3k9IjUxIiByPSI0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjM1Mi41IiBjeT0iNDkuMjUiIHJ4PSIxLjc1IiByeT0iMS4yMjQ5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyOTguOCIgY3k9IjE3MC4xIiByPSI2IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMjk4IiBjeT0iMTY5IiByPSI2LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE4MCwxNjAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMjk4IiBjeT0iMTY5IiByPSI2IiBmaWxsPSJ1cmwoI2I5KSIvPjxjaXJjbGUgY3g9IjI5OCIgY3k9IjE2OSIgcj0iNS42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIyOTYuMiIgY3k9IjE2Ni45IiByeD0iMi4wOTk5OTk5OTk5OTk5OTk2IiByeT0iMS40Njk5OTk5OTk5OTk5OTk4IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSI1Mi44IiBjeT0iMTQ0LjEiIHI9IjMuNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjUyIiBjeT0iMTQzIiByPSI0LjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDIyMCwxODAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iNTIiIGN5PSIxNDMiIHI9IjMuNSIgZmlsbD0idXJsKCNiMTApIi8+PGNpcmNsZSBjeD0iNTIiIGN5PSIxNDMiIHI9IjMuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iNTAuOTUiIGN5PSIxNDEuNzc1IiByeD0iMS4yMjQ5OTk5OTk5OTk5OTk5IiByeT0iMC44NTc0OTk5OTk5OTk5OTk4IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyOTAuOCIgY3k9IjMzLjEiIHI9IjIiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIyOTAiIGN5PSIzMiIgcj0iMi42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxNjAsMjIwLDIwMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjI5MCIgY3k9IjMyIiByPSIyIiBmaWxsPSJ1cmwoI2IxMSkiLz48Y2lyY2xlIGN4PSIyOTAiIGN5PSIzMiIgcj0iMS42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIyODkuNCIgY3k9IjMxLjMiIHJ4PSIwLjciIHJ5PSIwLjQ4OTk5OTk5OTk5OTk5OTk0IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyNTcuOCIgY3k9IjE3OC4xIiByPSIzIiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMjU3IiBjeT0iMTc3IiByPSIzLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE2MCwyMjAsMjAwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMjU3IiBjeT0iMTc3IiByPSIzIiBmaWxsPSJ1cmwoI2IxMikiLz48Y2lyY2xlIGN4PSIyNTciIGN5PSIxNzciIHI9IjIuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMjU2LjEiIGN5PSIxNzUuOTUiIHJ4PSIxLjA0OTk5OTk5OTk5OTk5OTgiIHJ5PSIwLjczNDk5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjE2NC44IiBjeT0iMTI0LjEiIHI9IjQiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIxNjQiIGN5PSIxMjMiIHI9IjQuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTYwLDIyMCwyMDApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIxNjQiIGN5PSIxMjMiIHI9IjQiIGZpbGw9InVybCgjYjEzKSIvPjxjaXJjbGUgY3g9IjE2NCIgY3k9IjEyMyIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIxNjIuOCIgY3k9IjEyMS42IiByeD0iMS40IiByeT0iMC45Nzk5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIxODkuOCIgY3k9IjgxLjEiIHI9IjQiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIxODkiIGN5PSI4MCIgcj0iNC42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxODAsMTYwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjE4OSIgY3k9IjgwIiByPSI0IiBmaWxsPSJ1cmwoI2IxNCkiLz48Y2lyY2xlIGN4PSIxODkiIGN5PSI4MCIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIxODcuOCIgY3k9Ijc4LjYiIHJ4PSIxLjQiIHJ5PSIwLjk3OTk5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjE1OS44IiBjeT0iMTQxLjEiIHI9IjYiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIxNTkiIGN5PSIxNDAiIHI9IjYuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjU1LDIyMCwxNjApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIxNTkiIGN5PSIxNDAiIHI9IjYiIGZpbGw9InVybCgjYjE1KSIvPjxjaXJjbGUgY3g9IjE1OSIgY3k9IjE0MCIgcj0iNS42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIxNTcuMiIgY3k9IjEzNy45IiByeD0iMi4wOTk5OTk5OTk5OTk5OTk2IiByeT0iMS40Njk5OTk5OTk5OTk5OTk4IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyMzIuOCIgY3k9Ijc3LjEiIHI9IjMuNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjIzMiIgY3k9Ijc2IiByPSI0LjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE2MCwyMjAsMjAwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMjMyIiBjeT0iNzYiIHI9IjMuNSIgZmlsbD0idXJsKCNiMTYpIi8+PGNpcmNsZSBjeD0iMjMyIiBjeT0iNzYiIHI9IjMuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMjMwLjk1IiBjeT0iNzQuNzc1IiByeD0iMS4yMjQ5OTk5OTk5OTk5OTk5IiByeT0iMC44NTc0OTk5OTk5OTk5OTk4IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSI2Mi44IiBjeT0iMjE3LjEiIHI9IjIiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSI2MiIgY3k9IjIxNiIgcj0iMi42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxODAsMTYwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjYyIiBjeT0iMjE2IiByPSIyIiBmaWxsPSJ1cmwoI2IxNykiLz48Y2lyY2xlIGN4PSI2MiIgY3k9IjIxNiIgcj0iMS42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSI2MS40IiBjeT0iMjE1LjMiIHJ4PSIwLjciIHJ5PSIwLjQ4OTk5OTk5OTk5OTk5OTk0IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSI4MC44IiBjeT0iMjQyLjEiIHI9IjMuNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjgwIiBjeT0iMjQxIiByPSI0LjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iODAiIGN5PSIyNDEiIHI9IjMuNSIgZmlsbD0idXJsKCNiMTgpIi8+PGNpcmNsZSBjeD0iODAiIGN5PSIyNDEiIHI9IjMuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iNzguOTUiIGN5PSIyMzkuNzc1IiByeD0iMS4yMjQ5OTk5OTk5OTk5OTk5IiByeT0iMC44NTc0OTk5OTk5OTk5OTk4IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyNC44IiBjeT0iMjUxLjEiIHI9IjQiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIyNCIgY3k9IjI1MCIgcj0iNC42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMjAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjI0IiBjeT0iMjUwIiByPSI0IiBmaWxsPSJ1cmwoI2IxOSkiLz48Y2lyY2xlIGN4PSIyNCIgY3k9IjI1MCIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIyMi44IiBjeT0iMjQ4LjYiIHJ4PSIxLjQiIHJ5PSIwLjk3OTk5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjI4Ny44IiBjeT0iMTYzLjEiIHI9IjIiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIyODciIGN5PSIxNjIiIHI9IjIuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjU1LDE4MCwyMTApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIyODciIGN5PSIxNjIiIHI9IjIiIGZpbGw9InVybCgjYjIwKSIvPjxjaXJjbGUgY3g9IjI4NyIgY3k9IjE2MiIgcj0iMS42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIyODYuNCIgY3k9IjE2MS4zIiByeD0iMC43IiByeT0iMC40ODk5OTk5OTk5OTk5OTk5NCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTg3LjgiIGN5PSIxNjEuMSIgcj0iOCIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjE4NyIgY3k9IjE2MCIgcj0iOC42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyNTUsMjIwLDE2MCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjE4NyIgY3k9IjE2MCIgcj0iOCIgZmlsbD0idXJsKCNiMjEpIi8+PGNpcmNsZSBjeD0iMTg3IiBjeT0iMTYwIiByPSI3LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjE4NC42IiBjeT0iMTU3LjIiIHJ4PSIyLjgiIHJ5PSIxLjk1OTk5OTk5OTk5OTk5OTciIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjIzOS44IiBjeT0iMjQuMSIgcj0iNiIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjIzOSIgY3k9IjIzIiByPSI2LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDEzMCwxODAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMjM5IiBjeT0iMjMiIHI9IjYiIGZpbGw9InVybCgjYjIyKSIvPjxjaXJjbGUgY3g9IjIzOSIgY3k9IjIzIiByPSI1LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjIzNy4yIiBjeT0iMjAuOSIgcng9IjIuMDk5OTk5OTk5OTk5OTk5NiIgcnk9IjEuNDY5OTk5OTk5OTk5OTk5OCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjQ1LjgiIGN5PSIxODIuMSIgcj0iMyIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjI0NSIgY3k9IjE4MSIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMjAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjI0NSIgY3k9IjE4MSIgcj0iMyIgZmlsbD0idXJsKCNiMjMpIi8+PGNpcmNsZSBjeD0iMjQ1IiBjeT0iMTgxIiByPSIyLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjI0NC4xIiBjeT0iMTc5Ljk1IiByeD0iMS4wNDk5OTk5OTk5OTk5OTk4IiByeT0iMC43MzQ5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzMy44IiBjeT0iMTYxLjEiIHI9IjIiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIzMyIgY3k9IjE2MCIgcj0iMi42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMjAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjMzIiBjeT0iMTYwIiByPSIyIiBmaWxsPSJ1cmwoI2IyNCkiLz48Y2lyY2xlIGN4PSIzMyIgY3k9IjE2MCIgcj0iMS42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIzMi40IiBjeT0iMTU5LjMiIHJ4PSIwLjciIHJ5PSIwLjQ4OTk5OTk5OTk5OTk5OTk0IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzNTQuOCIgY3k9IjIxNy4xIiByPSI2IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMzU0IiBjeT0iMjE2IiByPSI2LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMzU0IiBjeT0iMjE2IiByPSI2IiBmaWxsPSJ1cmwoI2IyNSkiLz48Y2lyY2xlIGN4PSIzNTQiIGN5PSIyMTYiIHI9IjUuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMzUyLjIiIGN5PSIyMTMuOSIgcng9IjIuMDk5OTk5OTk5OTk5OTk5NiIgcnk9IjEuNDY5OTk5OTk5OTk5OTk5OCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjAwLjgiIGN5PSIyMzEuMSIgcj0iMyIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjIwMCIgY3k9IjIzMCIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMjAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjIwMCIgY3k9IjIzMCIgcj0iMyIgZmlsbD0idXJsKCNiMjYpIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMjMwIiByPSIyLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjE5OS4xIiBjeT0iMjI4Ljk1IiByeD0iMS4wNDk5OTk5OTk5OTk5OTk4IiByeT0iMC43MzQ5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIxNC44IiBjeT0iMjQ0LjEiIHI9IjMuNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjE0IiBjeT0iMjQzIiByPSI0LjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMTQiIGN5PSIyNDMiIHI9IjMuNSIgZmlsbD0idXJsKCNiMjcpIi8+PGNpcmNsZSBjeD0iMTQiIGN5PSIyNDMiIHI9IjMuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMTIuOTUiIGN5PSIyNDEuNzc1IiByeD0iMS4yMjQ5OTk5OTk5OTk5OTk5IiByeT0iMC44NTc0OTk5OTk5OTk5OTk4IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSI4OS44IiBjeT0iMTYwLjEiIHI9IjMuNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9Ijg5IiBjeT0iMTU5IiByPSI0LjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDEzMCwxODAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iODkiIGN5PSIxNTkiIHI9IjMuNSIgZmlsbD0idXJsKCNiMjgpIi8+PGNpcmNsZSBjeD0iODkiIGN5PSIxNTkiIHI9IjMuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iODcuOTUiIGN5PSIxNTcuNzc1IiByeD0iMS4yMjQ5OTk5OTk5OTk5OTk5IiByeT0iMC44NTc0OTk5OTk5OTk5OTk4IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSI2OS44IiBjeT0iMTkzLjEiIHI9IjMiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSI2OSIgY3k9IjE5MiIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxODAsMTYwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjY5IiBjeT0iMTkyIiByPSIzIiBmaWxsPSJ1cmwoI2IyOSkiLz48Y2lyY2xlIGN4PSI2OSIgY3k9IjE5MiIgcj0iMi42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSI2OC4xIiBjeT0iMTkwLjk1IiByeD0iMS4wNDk5OTk5OTk5OTk5OTk4IiByeT0iMC43MzQ5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyMDQuOCIgY3k9IjIzOS4xIiByPSI0IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMjA0IiBjeT0iMjM4IiByPSI0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMjA0IiBjeT0iMjM4IiByPSI0IiBmaWxsPSJ1cmwoI2IzMCkiLz48Y2lyY2xlIGN4PSIyMDQiIGN5PSIyMzgiIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMjAyLjgiIGN5PSIyMzYuNiIgcng9IjEuNCIgcnk9IjAuOTc5OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iODcuOCIgY3k9IjIzMi4xIiByPSIyIiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iODciIGN5PSIyMzEiIHI9IjIuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjU1LDIyMCwxNjApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSI4NyIgY3k9IjIzMSIgcj0iMiIgZmlsbD0idXJsKCNiMzEpIi8+PGNpcmNsZSBjeD0iODciIGN5PSIyMzEiIHI9IjEuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iODYuNCIgY3k9IjIzMC4zIiByeD0iMC43IiByeT0iMC40ODk5OTk5OTk5OTk5OTk5NCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTQ3LjgiIGN5PSIyMzIuMSIgcj0iNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjE0NyIgY3k9IjIzMSIgcj0iNS42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxODAsMTYwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjE0NyIgY3k9IjIzMSIgcj0iNSIgZmlsbD0idXJsKCNiMzIpIi8+PGNpcmNsZSBjeD0iMTQ3IiBjeT0iMjMxIiByPSI0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjE0NS41IiBjeT0iMjI5LjI1IiByeD0iMS43NSIgcnk9IjEuMjI0OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjg1LjgiIGN5PSI3Ni4xIiByPSI0IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMjg1IiBjeT0iNzUiIHI9IjQuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIyODUiIGN5PSI3NSIgcj0iNCIgZmlsbD0idXJsKCNiMzMpIi8+PGNpcmNsZSBjeD0iMjg1IiBjeT0iNzUiIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMjgzLjgiIGN5PSI3My42IiByeD0iMS40IiByeT0iMC45Nzk5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIxODcuOCIgY3k9IjE3OS4xIiByPSI0IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMTg3IiBjeT0iMTc4IiByPSI0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMTg3IiBjeT0iMTc4IiByPSI0IiBmaWxsPSJ1cmwoI2IzNCkiLz48Y2lyY2xlIGN4PSIxODciIGN5PSIxNzgiIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMTg1LjgiIGN5PSIxNzYuNiIgcng9IjEuNCIgcnk9IjAuOTc5OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iNzkuOCIgY3k9IjEyMS4xIiByPSIyLjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSI3OSIgY3k9IjEyMCIgcj0iMy4xIiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMjAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9Ijc5IiBjeT0iMTIwIiByPSIyLjUiIGZpbGw9InVybCgjYjM1KSIvPjxjaXJjbGUgY3g9Ijc5IiBjeT0iMTIwIiByPSIyLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9Ijc4LjI1IiBjeT0iMTE5LjEyNSIgcng9IjAuODc1IiByeT0iMC42MTI0OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSI5LjgiIGN5PSIxMjguMSIgcj0iMyIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjkiIGN5PSIxMjciIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTYwLDIyMCwyMDApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSI5IiBjeT0iMTI3IiByPSIzIiBmaWxsPSJ1cmwoI2IzNikiLz48Y2lyY2xlIGN4PSI5IiBjeT0iMTI3IiByPSIyLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjguMSIgY3k9IjEyNS45NSIgcng9IjEuMDQ5OTk5OTk5OTk5OTk5OCIgcnk9IjAuNzM0OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTM2LjgiIGN5PSIxNDcuMSIgcj0iMi41IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMTM2IiBjeT0iMTQ2IiByPSIzLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDEzMCwxODAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMTM2IiBjeT0iMTQ2IiByPSIyLjUiIGZpbGw9InVybCgjYjM3KSIvPjxjaXJjbGUgY3g9IjEzNiIgY3k9IjE0NiIgcj0iMi4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIxMzUuMjUiIGN5PSIxNDUuMTI1IiByeD0iMC44NzUiIHJ5PSIwLjYxMjQ5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjIxNi44IiBjeT0iMTkyLjEiIHI9IjIuNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjIxNiIgY3k9IjE5MSIgcj0iMy4xIiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxNjAsMjIwLDIwMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjIxNiIgY3k9IjE5MSIgcj0iMi41IiBmaWxsPSJ1cmwoI2IzOCkiLz48Y2lyY2xlIGN4PSIyMTYiIGN5PSIxOTEiIHI9IjIuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMjE1LjI1IiBjeT0iMTkwLjEyNSIgcng9IjAuODc1IiByeT0iMC42MTI0OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIxNjkuOCIgY3k9IjI1MC4xIiByPSI2IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMTY5IiBjeT0iMjQ5IiByPSI2LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE4MCwxNjAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMTY5IiBjeT0iMjQ5IiByPSI2IiBmaWxsPSJ1cmwoI2IzOSkiLz48Y2lyY2xlIGN4PSIxNjkiIGN5PSIyNDkiIHI9IjUuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMTY3LjIiIGN5PSIyNDYuOSIgcng9IjIuMDk5OTk5OTk5OTk5OTk5NiIgcnk9IjEuNDY5OTk5OTk5OTk5OTk5OCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjcxLjgiIGN5PSIyNTIuMSIgcj0iOCIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjI3MSIgY3k9IjI1MSIgcj0iOC42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxNjAsMjIwLDIwMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjI3MSIgY3k9IjI1MSIgcj0iOCIgZmlsbD0idXJsKCNiNDApIi8+PGNpcmNsZSBjeD0iMjcxIiBjeT0iMjUxIiByPSI3LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjI2OC42IiBjeT0iMjQ4LjIiIHJ4PSIyLjgiIHJ5PSIxLjk1OTk5OTk5OTk5OTk5OTciIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjM1My44IiBjeT0iMTk3LjEiIHI9IjciIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIzNTMiIGN5PSIxOTYiIHI9IjcuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIzNTMiIGN5PSIxOTYiIHI9IjciIGZpbGw9InVybCgjYjQxKSIvPjxjaXJjbGUgY3g9IjM1MyIgY3k9IjE5NiIgcj0iNi42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIzNTAuOSIgY3k9IjE5My41NSIgcng9IjIuNDQ5OTk5OTk5OTk5OTk5NyIgcnk9IjEuNzE0OTk5OTk5OTk5OTk5NiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMzUyLjgiIGN5PSIyMDkuMSIgcj0iNCIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjM1MiIgY3k9IjIwOCIgcj0iNC42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxNjAsMjIwLDIwMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjM1MiIgY3k9IjIwOCIgcj0iNCIgZmlsbD0idXJsKCNiNDIpIi8+PGNpcmNsZSBjeD0iMzUyIiBjeT0iMjA4IiByPSIzLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjM1MC44IiBjeT0iMjA2LjYiIHJ4PSIxLjQiIHJ5PSIwLjk3OTk5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjIwNy44IiBjeT0iMTA3LjEiIHI9IjQiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIyMDciIGN5PSIxMDYiIHI9IjQuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjU1LDIyMCwxNjApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIyMDciIGN5PSIxMDYiIHI9IjQiIGZpbGw9InVybCgjYjQzKSIvPjxjaXJjbGUgY3g9IjIwNyIgY3k9IjEwNiIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIyMDUuOCIgY3k9IjEwNC42IiByeD0iMS40IiByeT0iMC45Nzk5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyNDguOCIgY3k9IjIwOC4xIiByPSIyIiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMjQ4IiBjeT0iMjA3IiByPSIyLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDEzMCwxODAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMjQ4IiBjeT0iMjA3IiByPSIyIiBmaWxsPSJ1cmwoI2I0NCkiLz48Y2lyY2xlIGN4PSIyNDgiIGN5PSIyMDciIHI9IjEuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMjQ3LjQiIGN5PSIyMDYuMyIgcng9IjAuNyIgcnk9IjAuNDg5OTk5OTk5OTk5OTk5OTQiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjM3LjgiIGN5PSIyNTYuMSIgcj0iMyIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjM3IiBjeT0iMjU1IiByPSIzLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE4MCwxNjAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMzciIGN5PSIyNTUiIHI9IjMiIGZpbGw9InVybCgjYjQ1KSIvPjxjaXJjbGUgY3g9IjM3IiBjeT0iMjU1IiByPSIyLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjM2LjEiIGN5PSIyNTMuOTUiIHJ4PSIxLjA0OTk5OTk5OTk5OTk5OTgiIHJ5PSIwLjczNDk5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjMxMC44IiBjeT0iMTcuMSIgcj0iMy41IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMzEwIiBjeT0iMTYiIHI9IjQuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIzMTAiIGN5PSIxNiIgcj0iMy41IiBmaWxsPSJ1cmwoI2I0NikiLz48Y2lyY2xlIGN4PSIzMTAiIGN5PSIxNiIgcj0iMy4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIzMDguOTUiIGN5PSIxNC43NzUiIHJ4PSIxLjIyNDk5OTk5OTk5OTk5OTkiIHJ5PSIwLjg1NzQ5OTk5OTk5OTk5OTgiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjI5Mi44IiBjeT0iODAuMSIgcj0iMiIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjI5MiIgY3k9Ijc5IiByPSIyLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE2MCwyMjAsMjAwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMjkyIiBjeT0iNzkiIHI9IjIiIGZpbGw9InVybCgjYjQ3KSIvPjxjaXJjbGUgY3g9IjI5MiIgY3k9Ijc5IiByPSIxLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjI5MS40IiBjeT0iNzguMyIgcng9IjAuNyIgcnk9IjAuNDg5OTk5OTk5OTk5OTk5OTQiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjEwOC44IiBjeT0iMTk1LjEiIHI9IjIiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIxMDgiIGN5PSIxOTQiIHI9IjIuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIxMDgiIGN5PSIxOTQiIHI9IjIiIGZpbGw9InVybCgjYjQ4KSIvPjxjaXJjbGUgY3g9IjEwOCIgY3k9IjE5NCIgcj0iMS42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIxMDcuNCIgY3k9IjE5My4zIiByeD0iMC43IiByeT0iMC40ODk5OTk5OTk5OTk5OTk5NCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTM2LjgiIGN5PSIyNTIuMSIgcj0iNyIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjEzNiIgY3k9IjI1MSIgcj0iNy42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyNTUsMTgwLDIxMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjEzNiIgY3k9IjI1MSIgcj0iNyIgZmlsbD0idXJsKCNiNDkpIi8+PGNpcmNsZSBjeD0iMTM2IiBjeT0iMjUxIiByPSI2LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjEzMy45IiBjeT0iMjQ4LjU1IiByeD0iMi40NDk5OTk5OTk5OTk5OTk3IiByeT0iMS43MTQ5OTk5OTk5OTk5OTk2IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIxOTIuOCIgY3k9IjEyOC4xIiByPSI2IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMTkyIiBjeT0iMTI3IiByPSI2LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDEzMCwxODAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMTkyIiBjeT0iMTI3IiByPSI2IiBmaWxsPSJ1cmwoI2I1MCkiLz48Y2lyY2xlIGN4PSIxOTIiIGN5PSIxMjciIHI9IjUuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMTkwLjIiIGN5PSIxMjQuOSIgcng9IjIuMDk5OTk5OTk5OTk5OTk5NiIgcnk9IjEuNDY5OTk5OTk5OTk5OTk5OCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjUxLjgiIGN5PSIyNDEuMSIgcj0iMiIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjI1MSIgY3k9IjI0MCIgcj0iMi42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyNTUsMjIwLDE2MCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjI1MSIgY3k9IjI0MCIgcj0iMiIgZmlsbD0idXJsKCNiNTEpIi8+PGNpcmNsZSBjeD0iMjUxIiBjeT0iMjQwIiByPSIxLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjI1MC40IiBjeT0iMjM5LjMiIHJ4PSIwLjciIHJ5PSIwLjQ4OTk5OTk5OTk5OTk5OTk0IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSI1NC44IiBjeT0iMTc4LjEiIHI9IjIuNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjU0IiBjeT0iMTc3IiByPSIzLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDIyMCwxODAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iNTQiIGN5PSIxNzciIHI9IjIuNSIgZmlsbD0idXJsKCNiNTIpIi8+PGNpcmNsZSBjeD0iNTQiIGN5PSIxNzciIHI9IjIuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iNTMuMjUiIGN5PSIxNzYuMTI1IiByeD0iMC44NzUiIHJ5PSIwLjYxMjQ5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjI0OC44IiBjeT0iMjE2LjEiIHI9IjMiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIyNDgiIGN5PSIyMTUiIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIyNDgiIGN5PSIyMTUiIHI9IjMiIGZpbGw9InVybCgjYjUzKSIvPjxjaXJjbGUgY3g9IjI0OCIgY3k9IjIxNSIgcj0iMi42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIyNDcuMSIgY3k9IjIxMy45NSIgcng9IjEuMDQ5OTk5OTk5OTk5OTk5OCIgcnk9IjAuNzM0OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjY2LjgiIGN5PSIxNC4xIiByPSIyLjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIyNjYiIGN5PSIxMyIgcj0iMy4xIiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxODAsMTYwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjI2NiIgY3k9IjEzIiByPSIyLjUiIGZpbGw9InVybCgjYjU0KSIvPjxjaXJjbGUgY3g9IjI2NiIgY3k9IjEzIiByPSIyLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjI2NS4yNSIgY3k9IjEyLjEyNSIgcng9IjAuODc1IiByeT0iMC42MTI0OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyODYuOCIgY3k9IjI0My4xIiByPSI4IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMjg2IiBjeT0iMjQyIiByPSI4LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDEzMCwxODAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMjg2IiBjeT0iMjQyIiByPSI4IiBmaWxsPSJ1cmwoI2I1NSkiLz48Y2lyY2xlIGN4PSIyODYiIGN5PSIyNDIiIHI9IjcuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMjgzLjYiIGN5PSIyMzkuMiIgcng9IjIuOCIgcnk9IjEuOTU5OTk5OTk5OTk5OTk5NyIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTU3LjgiIGN5PSIyNTYuMSIgcj0iNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjE1NyIgY3k9IjI1NSIgcj0iNS42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMjAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjE1NyIgY3k9IjI1NSIgcj0iNSIgZmlsbD0idXJsKCNiNTYpIi8+PGNpcmNsZSBjeD0iMTU3IiBjeT0iMjU1IiByPSI0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjE1NS41IiBjeT0iMjUzLjI1IiByeD0iMS43NSIgcnk9IjEuMjI0OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMzU4LjgiIGN5PSIxMzYuMSIgcj0iMiIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjM1OCIgY3k9IjEzNSIgcj0iMi42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxNjAsMjIwLDIwMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjM1OCIgY3k9IjEzNSIgcj0iMiIgZmlsbD0idXJsKCNiNTcpIi8+PGNpcmNsZSBjeD0iMzU4IiBjeT0iMTM1IiByPSIxLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjM1Ny40IiBjeT0iMTM0LjMiIHJ4PSIwLjciIHJ5PSIwLjQ4OTk5OTk5OTk5OTk5OTk0IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSI4OC44IiBjeT0iOTUuMSIgcj0iMy41IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iODgiIGN5PSI5NCIgcj0iNC4xIiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxODAsMTYwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9Ijg4IiBjeT0iOTQiIHI9IjMuNSIgZmlsbD0idXJsKCNiNTgpIi8+PGNpcmNsZSBjeD0iODgiIGN5PSI5NCIgcj0iMy4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSI4Ni45NSIgY3k9IjkyLjc3NSIgcng9IjEuMjI0OTk5OTk5OTk5OTk5OSIgcnk9IjAuODU3NDk5OTk5OTk5OTk5OCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjgyLjgiIGN5PSIyMDUuMSIgcj0iNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjI4MiIgY3k9IjIwNCIgcj0iNS42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxNjAsMjIwLDIwMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjI4MiIgY3k9IjIwNCIgcj0iNSIgZmlsbD0idXJsKCNiNTkpIi8+PGNpcmNsZSBjeD0iMjgyIiBjeT0iMjA0IiByPSI0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjI4MC41IiBjeT0iMjAyLjI1IiByeD0iMS43NSIgcnk9IjEuMjI0OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMzI4LjgiIGN5PSI2MS4xIiByPSIzLjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIzMjgiIGN5PSI2MCIgcj0iNC4xIiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxNjAsMjIwLDIwMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjMyOCIgY3k9IjYwIiByPSIzLjUiIGZpbGw9InVybCgjYjYwKSIvPjxjaXJjbGUgY3g9IjMyOCIgY3k9IjYwIiByPSIzLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjMyNi45NSIgY3k9IjU4Ljc3NSIgcng9IjEuMjI0OTk5OTk5OTk5OTk5OSIgcnk9IjAuODU3NDk5OTk5OTk5OTk5OCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTI1LjgiIGN5PSIyMTMuMSIgcj0iMyIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjEyNSIgY3k9IjIxMiIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyNTUsMjIwLDE2MCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjEyNSIgY3k9IjIxMiIgcj0iMyIgZmlsbD0idXJsKCNiNjEpIi8+PGNpcmNsZSBjeD0iMTI1IiBjeT0iMjEyIiByPSIyLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjEyNC4xIiBjeT0iMjEwLjk1IiByeD0iMS4wNDk5OTk5OTk5OTk5OTk4IiByeT0iMC43MzQ5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyNTcuOCIgY3k9Ijk3LjEiIHI9IjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIyNTciIGN5PSI5NiIgcj0iNS42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMjAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjI1NyIgY3k9Ijk2IiByPSI1IiBmaWxsPSJ1cmwoI2I2MikiLz48Y2lyY2xlIGN4PSIyNTciIGN5PSI5NiIgcj0iNC42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIyNTUuNSIgY3k9Ijk0LjI1IiByeD0iMS43NSIgcnk9IjEuMjI0OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTYuOCIgY3k9IjE0Ni4xIiByPSIyIiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNDUiIHI9IjIuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjU1LDIyMCwxNjApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjE0NSIgcj0iMiIgZmlsbD0idXJsKCNiNjMpIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNDUiIHI9IjEuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMTUuNCIgY3k9IjE0NC4zIiByeD0iMC43IiByeT0iMC40ODk5OTk5OTk5OTk5OTk5NCIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTAyLjgiIGN5PSIxODEuMSIgcj0iMyIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjEwMiIgY3k9IjE4MCIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxNjAsMjIwLDIwMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjEwMiIgY3k9IjE4MCIgcj0iMyIgZmlsbD0idXJsKCNiNjQpIi8+PGNpcmNsZSBjeD0iMTAyIiBjeT0iMTgwIiByPSIyLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjEwMS4xIiBjeT0iMTc4Ljk1IiByeD0iMS4wNDk5OTk5OTk5OTk5OTk4IiByeT0iMC43MzQ5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyMzEuOCIgY3k9IjIxMC4xIiByPSIzLjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIyMzEiIGN5PSIyMDkiIHI9IjQuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIyMzEiIGN5PSIyMDkiIHI9IjMuNSIgZmlsbD0idXJsKCNiNjUpIi8+PGNpcmNsZSBjeD0iMjMxIiBjeT0iMjA5IiByPSIzLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjIyOS45NSIgY3k9IjIwNy43NzUiIHJ4PSIxLjIyNDk5OTk5OTk5OTk5OTkiIHJ5PSIwLjg1NzQ5OTk5OTk5OTk5OTgiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjU1LjgiIGN5PSI2Mi4xIiByPSIzIiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iNTUiIGN5PSI2MSIgcj0iMy42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyNTUsMjIwLDE2MCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjU1IiBjeT0iNjEiIHI9IjMiIGZpbGw9InVybCgjYjY2KSIvPjxjaXJjbGUgY3g9IjU1IiBjeT0iNjEiIHI9IjIuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iNTQuMSIgY3k9IjU5Ljk1IiByeD0iMS4wNDk5OTk5OTk5OTk5OTk4IiByeT0iMC43MzQ5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzMjMuOCIgY3k9IjI1Ny4xIiByPSI0IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMzIzIiBjeT0iMjU2IiByPSI0LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE2MCwyMjAsMjAwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMzIzIiBjeT0iMjU2IiByPSI0IiBmaWxsPSJ1cmwoI2I2NykiLz48Y2lyY2xlIGN4PSIzMjMiIGN5PSIyNTYiIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMzIxLjgiIGN5PSIyNTQuNiIgcng9IjEuNCIgcnk9IjAuOTc5OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjQ3LjgiIGN5PSIxNzkuMSIgcj0iMiIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjI0NyIgY3k9IjE3OCIgcj0iMi42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMjAsMTgwLDI1NSkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjI0NyIgY3k9IjE3OCIgcj0iMiIgZmlsbD0idXJsKCNiNjgpIi8+PGNpcmNsZSBjeD0iMjQ3IiBjeT0iMTc4IiByPSIxLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjI0Ni40IiBjeT0iMTc3LjMiIHJ4PSIwLjciIHJ5PSIwLjQ4OTk5OTk5OTk5OTk5OTk0IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzNDAuOCIgY3k9IjY0LjEiIHI9IjIiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIzNDAiIGN5PSI2MyIgcj0iMi42IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigyNTUsMjIwLDE2MCkiIHN0cm9rZS1vcGFjaXR5PSIwLjI4IiBzdHJva2Utd2lkdGg9IjAuNiIvPjxjaXJjbGUgY3g9IjM0MCIgY3k9IjYzIiByPSIyIiBmaWxsPSJ1cmwoI2I2OSkiLz48Y2lyY2xlIGN4PSIzNDAiIGN5PSI2MyIgcj0iMS42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIzMzkuNCIgY3k9IjYyLjMiIHJ4PSIwLjciIHJ5PSIwLjQ4OTk5OTk5OTk5OTk5OTk0IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIxMTAuOCIgY3k9IjEzMS4xIiByPSI4IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMTEwIiBjeT0iMTMwIiByPSI4LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE4MCwxNjAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMTEwIiBjeT0iMTMwIiByPSI4IiBmaWxsPSJ1cmwoI2I3MCkiLz48Y2lyY2xlIGN4PSIxMTAiIGN5PSIxMzAiIHI9IjcuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMTA3LjYiIGN5PSIxMjcuMiIgcng9IjIuOCIgcnk9IjEuOTU5OTk5OTk5OTk5OTk5NyIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMzI5LjgiIGN5PSI5MC4xIiByPSI0IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMzI5IiBjeT0iODkiIHI9IjQuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIzMjkiIGN5PSI4OSIgcj0iNCIgZmlsbD0idXJsKCNiNzEpIi8+PGNpcmNsZSBjeD0iMzI5IiBjeT0iODkiIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMzI3LjgiIGN5PSI4Ny42IiByeD0iMS40IiByeT0iMC45Nzk5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyMTAuOCIgY3k9IjEyNy4xIiByPSI4IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMjEwIiBjeT0iMTI2IiByPSI4LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMjEwIiBjeT0iMTI2IiByPSI4IiBmaWxsPSJ1cmwoI2I3MikiLz48Y2lyY2xlIGN4PSIyMTAiIGN5PSIxMjYiIHI9IjcuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMjA3LjYiIGN5PSIxMjMuMiIgcng9IjIuOCIgcnk9IjEuOTU5OTk5OTk5OTk5OTk5NyIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iNTEuOCIgY3k9IjE5NC4xIiByPSI4IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iNTEiIGN5PSIxOTMiIHI9IjguNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSI1MSIgY3k9IjE5MyIgcj0iOCIgZmlsbD0idXJsKCNiNzMpIi8+PGNpcmNsZSBjeD0iNTEiIGN5PSIxOTMiIHI9IjcuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iNDguNiIgY3k9IjE5MC4yIiByeD0iMi44IiByeT0iMS45NTk5OTk5OTk5OTk5OTk3IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzMDQuOCIgY3k9IjI0MS4xIiByPSIyLjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIzMDQiIGN5PSIyNDAiIHI9IjMuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjIwLDE4MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIzMDQiIGN5PSIyNDAiIHI9IjIuNSIgZmlsbD0idXJsKCNiNzQpIi8+PGNpcmNsZSBjeD0iMzA0IiBjeT0iMjQwIiByPSIyLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjMwMy4yNSIgY3k9IjIzOS4xMjUiIHJ4PSIwLjg3NSIgcnk9IjAuNjEyNDk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMzE1LjgiIGN5PSIyNDUuMSIgcj0iMi41IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMzE1IiBjeT0iMjQ0IiByPSIzLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDIyMCwxODAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMzE1IiBjeT0iMjQ0IiByPSIyLjUiIGZpbGw9InVybCgjYjc1KSIvPjxjaXJjbGUgY3g9IjMxNSIgY3k9IjI0NCIgcj0iMi4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIzMTQuMjUiIGN5PSIyNDMuMTI1IiByeD0iMC44NzUiIHJ5PSIwLjYxMjQ5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjgyLjgiIGN5PSIxNDQuMSIgcj0iMy41IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iODIiIGN5PSIxNDMiIHI9IjQuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTYwLDIyMCwyMDApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSI4MiIgY3k9IjE0MyIgcj0iMy41IiBmaWxsPSJ1cmwoI2I3NikiLz48Y2lyY2xlIGN4PSI4MiIgY3k9IjE0MyIgcj0iMy4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSI4MC45NSIgY3k9IjE0MS43NzUiIHJ4PSIxLjIyNDk5OTk5OTk5OTk5OTkiIHJ5PSIwLjg1NzQ5OTk5OTk5OTk5OTgiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjM0MC44IiBjeT0iMzUuMSIgcj0iOCIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjM0MCIgY3k9IjM0IiByPSI4LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE2MCwyMjAsMjAwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMzQwIiBjeT0iMzQiIHI9IjgiIGZpbGw9InVybCgjYjc3KSIvPjxjaXJjbGUgY3g9IjM0MCIgY3k9IjM0IiByPSI3LjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjMzNy42IiBjeT0iMzEuMiIgcng9IjIuOCIgcnk9IjEuOTU5OTk5OTk5OTk5OTk5NyIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iNzkuOCIgY3k9IjEyMC4xIiByPSI4IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iNzkiIGN5PSIxMTkiIHI9IjguNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSI3OSIgY3k9IjExOSIgcj0iOCIgZmlsbD0idXJsKCNiNzgpIi8+PGNpcmNsZSBjeD0iNzkiIGN5PSIxMTkiIHI9IjcuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iNzYuNiIgY3k9IjExNi4yIiByeD0iMi44IiByeT0iMS45NTk5OTk5OTk5OTk5OTk3IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIxNy44IiBjeT0iNjguMSIgcj0iMyIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjE3IiBjeT0iNjciIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTgwLDE2MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIxNyIgY3k9IjY3IiByPSIzIiBmaWxsPSJ1cmwoI2I3OSkiLz48Y2lyY2xlIGN4PSIxNyIgY3k9IjY3IiByPSIyLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjE2LjEiIGN5PSI2NS45NSIgcng9IjEuMDQ5OTk5OTk5OTk5OTk5OCIgcnk9IjAuNzM0OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjU5LjgiIGN5PSI2NS4xIiByPSIzIiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMjU5IiBjeT0iNjQiIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTYwLDIyMCwyMDApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIyNTkiIGN5PSI2NCIgcj0iMyIgZmlsbD0idXJsKCNiODApIi8+PGNpcmNsZSBjeD0iMjU5IiBjeT0iNjQiIHI9IjIuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMjU4LjEiIGN5PSI2Mi45NSIgcng9IjEuMDQ5OTk5OTk5OTk5OTk5OCIgcnk9IjAuNzM0OTk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMTM1LjgiIGN5PSIxNDMuMSIgcj0iMy41IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMTM1IiBjeT0iMTQyIiByPSI0LjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMTM1IiBjeT0iMTQyIiByPSIzLjUiIGZpbGw9InVybCgjYjgxKSIvPjxjaXJjbGUgY3g9IjEzNSIgY3k9IjE0MiIgcj0iMy4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIxMzMuOTUiIGN5PSIxNDAuNzc1IiByeD0iMS4yMjQ5OTk5OTk5OTk5OTk5IiByeT0iMC44NTc0OTk5OTk5OTk5OTk4IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzMy44IiBjeT0iMTg0LjEiIHI9IjIuNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjMzIiBjeT0iMTgzIiByPSIzLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMzMiIGN5PSIxODMiIHI9IjIuNSIgZmlsbD0idXJsKCNiODIpIi8+PGNpcmNsZSBjeD0iMzMiIGN5PSIxODMiIHI9IjIuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMzIuMjUiIGN5PSIxODIuMTI1IiByeD0iMC44NzUiIHJ5PSIwLjYxMjQ5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjMwNS44IiBjeT0iMjE2LjEiIHI9IjciIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIzMDUiIGN5PSIyMTUiIHI9IjcuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTYwLDIyMCwyMDApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIzMDUiIGN5PSIyMTUiIHI9IjciIGZpbGw9InVybCgjYjgzKSIvPjxjaXJjbGUgY3g9IjMwNSIgY3k9IjIxNSIgcj0iNi42IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSIzMDIuOSIgY3k9IjIxMi41NSIgcng9IjIuNDQ5OTk5OTk5OTk5OTk5NyIgcnk9IjEuNzE0OTk5OTk5OTk5OTk5NiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iMjYwLjgiIGN5PSIzOC4xIiByPSI0IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iMjYwIiBjeT0iMzciIHI9IjQuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTYwLDIyMCwyMDApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIyNjAiIGN5PSIzNyIgcj0iNCIgZmlsbD0idXJsKCNiODQpIi8+PGNpcmNsZSBjeD0iMjYwIiBjeT0iMzciIHI9IjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMjU4LjgiIGN5PSIzNS42IiByeD0iMS40IiByeT0iMC45Nzk5OTk5OTk5OTk5OTk5IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIyNzAuOCIgY3k9IjEyLjEiIHI9IjIuNSIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iMC40MiIvPjxjaXJjbGUgY3g9IjI3MCIgY3k9IjExIiByPSIzLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDI1NSwyMjAsMTYwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMjcwIiBjeT0iMTEiIHI9IjIuNSIgZmlsbD0idXJsKCNiODUpIi8+PGNpcmNsZSBjeD0iMjcwIiBjeT0iMTEiIHI9IjIuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iMjY5LjI1IiBjeT0iMTAuMTI1IiByeD0iMC44NzUiIHJ5PSIwLjYxMjQ5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjMxMy44IiBjeT0iNS4xIiByPSIyLjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIzMTMiIGN5PSI0IiByPSIzLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDE4MCwxNjAsMjU1KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjgiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGNpcmNsZSBjeD0iMzEzIiBjeT0iNCIgcj0iMi41IiBmaWxsPSJ1cmwoI2I4NikiLz48Y2lyY2xlIGN4PSIzMTMiIGN5PSI0IiByPSIyLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjMxMi4yNSIgY3k9IjMuMTI1IiByeD0iMC44NzUiIHJ5PSIwLjYxMjQ5OTk5OTk5OTk5OTkiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9Ijc0LjgiIGN5PSIyNDUuMSIgcj0iMi41IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iNzQiIGN5PSIyNDQiIHI9IjMuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTYwLDIyMCwyMDApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSI3NCIgY3k9IjI0NCIgcj0iMi41IiBmaWxsPSJ1cmwoI2I4NykiLz48Y2lyY2xlIGN4PSI3NCIgY3k9IjI0NCIgcj0iMi4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1IiBzdHJva2Utd2lkdGg9IjAuNSIvPjxlbGxpcHNlIGN4PSI3My4yNSIgY3k9IjI0My4xMjUiIHJ4PSIwLjg3NSIgcnk9IjAuNjEyNDk5OTk5OTk5OTk5OSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+PGNpcmNsZSBjeD0iNjkuOCIgY3k9IjE1MS4xIiByPSI4IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjQyIi8+PGNpcmNsZSBjeD0iNjkiIGN5PSIxNTAiIHI9IjguNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTMwLDE4MCwyNTUpIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSI2OSIgY3k9IjE1MCIgcj0iOCIgZmlsbD0idXJsKCNiODgpIi8+PGNpcmNsZSBjeD0iNjkiIGN5PSIxNTAiIHI9IjcuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48ZWxsaXBzZSBjeD0iNjYuNiIgY3k9IjE0Ny4yIiByeD0iMi44IiByeT0iMS45NTk5OTk5OTk5OTk5OTk3IiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz48Y2lyY2xlIGN4PSIzNTIuOCIgY3k9IjEzNi4xIiByPSIzLjUiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNDIiLz48Y2lyY2xlIGN4PSIzNTIiIGN5PSIxMzUiIHI9IjQuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTYwLDIyMCwyMDApIiBzdHJva2Utb3BhY2l0eT0iMC4yOCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48Y2lyY2xlIGN4PSIzNTIiIGN5PSIxMzUiIHI9IjMuNSIgZmlsbD0idXJsKCNiODkpIi8+PGNpcmNsZSBjeD0iMzUyIiBjeT0iMTM1IiByPSIzLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuNTUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGVsbGlwc2UgY3g9IjM1MC45NSIgY3k9IjEzMy43NzUiIHJ4PSIxLjIyNDk5OTk5OTk5OTk5OTkiIHJ5PSIwLjg1NzQ5OTk5OTk5OTk5OTgiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjwvc3ZnPg==");
}

/* ============================ FOND ============================ */
*{box-sizing:border-box;margin:0;padding:0}
/* 28/09/2026 (Miguel : « quand on clique sur un, les boutons se deplacent ; c'est moche »).
   Ils ne se deplacaient pas : la page changeait de hauteur, l'ascenseur apparaissait ou
   disparaissait, et les 10 px qu'il occupe etaient repris ou rendus a toute la largeur.
   Tout ce qui est aligne a droite sautait — une barre d'outils, un total de tableau, un
   bouton. On reserve sa place une fois pour toutes : elle ne se voit pas quand il n'y a
   rien a faire defiler, et plus rien ne saute quand il y a quelque chose. */
html{scrollbar-gutter:stable}
html,body{min-height:100%}
body{font-family:var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark,#1a1f2e);-webkit-font-smoothing:antialiased;
  background:var(--bubbles-page),linear-gradient(90deg,var(--page-2) 0%,var(--page-1) 100%);
  background-size:420px 320px,auto;background-repeat:repeat,no-repeat;background-attachment:fixed,fixed}

/* ============================ SHELL — une barre, deux niveaux, un seul bloc ============================ */
/* ===== SHELL 7000.pro — début (bloc borné, remplacement net) ===== */
.shell{position:sticky;top:0;z-index:50;color:var(--tx-on-bar,#f0f3fa);box-shadow:var(--sh-bar);
  background:
    radial-gradient(150% 130% at 50% -40%,rgba(255,255,255,.10) 0%,transparent 70%),
    var(--bubbles-bar),
    linear-gradient(180deg,var(--bar-1) 0%,var(--bar-2) 52%,var(--bar-3) 100%);
  background-size:auto,360px 260px,auto;background-repeat:no-repeat,repeat-x,no-repeat;
  background-blend-mode:soft-light,normal,normal}

.niv1{display:flex;align-items:center;gap:10px;height:var(--niv1-h);padding:0 16px 0 172px}
.logo{position:absolute;left:14px;top:5px;height:calc(var(--niv1-h) + var(--niv2-h) / 2);display:flex;align-items:center;text-decoration:none;z-index:6}
.logo img{height:calc(var(--niv1-h) + var(--niv2-h) / 2);width:auto;display:block;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
.logo .ph{font:800 18px var(--font,system-ui,-apple-system,sans-serif);color:#fff;letter-spacing:-.4px}.logo .ph b{color:var(--or-2)}

.nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow:visible}
.nav>a,.nav>.nav-item>a{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:10px;
  text-decoration:none;color:#fff;font:600 13px var(--font,system-ui,-apple-system,sans-serif);white-space:nowrap;flex-shrink:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,240,214,.08),rgba(255,255,255,.02));
  border:1px solid rgba(232,199,106,.14);backdrop-filter:blur(7px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:all .2s var(--font,system-ui,-apple-system,sans-serif)}
.nav>a:hover,.nav>.nav-item>a:hover{background:linear-gradient(180deg,rgba(255,240,214,.14),rgba(255,255,255,.04));border-color:rgba(232,199,106,.26)}
.nav>a.active,.nav>.nav-item>a.active{background:linear-gradient(180deg,var(--or-1) 0%,var(--or-2) 50%,var(--or-3) 100%);
  color:#2a2110;border-color:var(--or-edge);font-weight:700;
  box-shadow:0 4px 12px rgba(184,142,53,.35),inset 0 1px 0 rgba(255,255,255,.55)}
/* 30/09/2026 (Miguël, capture : « pas de chiffre ») — UNE PASTILLE À ZÉRO NE S'AFFICHE PAS.
   Le bandeau écrit la pastille avec l'attribut `hidden`, et attend qu'un compte la rallume.
   Mais `display:inline-flex` ci-dessous bat la règle [hidden] du navigateur : le HTML croyait
   cacher, le CSS montrait — et le menu CM portait un « 0 » permanent.
   C'est mot pour mot le défaut du 07/09 sur « Machine en trop ». Deuxième fois : dès qu'une
   classe porte un `display:`, il lui faut sa ligne [hidden]. */
.nav .b[hidden]{display:none}
.nav .b{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;
  border-radius:9px;font:800 11px var(--font,system-ui,-apple-system,sans-serif);line-height:1;color:#fff;background:var(--red,#ef4444)}
.nav .b.warn{background:var(--orange,#f59f4d)}

.niv1-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.shell-search{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--r-pill);
  background:#262c34;border:1px solid rgba(255,255,255,.10);color:var(--tx-on-bar-2);font:600 12px var(--font,system-ui,-apple-system,sans-serif);cursor:pointer}
.shell-search kbd{background:rgba(255,255,255,.12);border-radius:5px;padding:1px 6px;font:700 11px ui-monospace,monospace}
.icon-btn{position:relative;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#fff;cursor:pointer}
.icon-btn .dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--accent-bright)}
.user{display:flex;align-items:center;gap:7px;font:600 13px var(--font,system-ui,-apple-system,sans-serif)}
/* 22/09 (Miguël : « on dirait un lien FrontPage ») — le nom est une pastille de la barre, pas un lien bleu souligné */
.user>a:first-child{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 4px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:var(--or-1,#f5d370);text-decoration:none;font:700 13px var(--font,system-ui,-apple-system,sans-serif);letter-spacing:.01em}
.user>a:first-child::before{content:attr(data-initiales);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent-bright,#0BAE9F),var(--accent,#06747D));color:#04322e;font:800 11px var(--font,system-ui,-apple-system,sans-serif);letter-spacing:0}
.user>a:first-child:hover{background:rgba(255,255,255,.12);border-color:var(--or-1,#f5d370);color:var(--or-1,#f5d370)}

/* — Niveau 2 : contextuel, masqué si la section n'a rien de contextuel — */
/* 21/09 (contrôle visuel) : la colonne des onglets prend au moins la place de ses onglets (sept onglets sur Réglages
   passaient sous le titre) ; le titre se centre dans ce qui reste. */
.niv2{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(0,1fr);align-items:center;gap:10px;height:var(--niv2-h);padding:0 16px 0 172px;background:transparent}
.niv2.hidden{display:none}
.niv2-left{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;justify-self:start}
.niv2-center{justify-self:center;min-width:0;overflow:hidden;text-align:center}
.niv2-right{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;justify-self:end}
.tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 13px;border-radius:10px;
  text-decoration:none;color:#fff;font:600 13px var(--font,system-ui,-apple-system,sans-serif);white-space:nowrap;overflow:hidden;flex-shrink:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,240,214,.08),rgba(255,255,255,.02));
  border:1px solid rgba(232,199,106,.14);backdrop-filter:blur(7px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:all .2s var(--font,system-ui,-apple-system,sans-serif)}
.tab:hover{background:linear-gradient(180deg,rgba(255,240,214,.14),rgba(255,255,255,.04));border-color:rgba(232,199,106,.26);color:#fff}
.tab.active{background:linear-gradient(180deg,var(--or-1) 0%,var(--or-2) 50%,var(--or-3) 100%);
  color:#2a2110;border-color:var(--or-edge);font-weight:700;
  box-shadow:0 4px 12px rgba(184,142,53,.35),inset 0 1px 0 rgba(255,255,255,.55)}
.tab-ic{flex:none;font-size:14px;line-height:1}
.tab-lb{overflow:hidden;text-overflow:ellipsis}
.sep{width:1px;height:18px;background:rgba(255,255,255,.12);margin:0 4px}
.title-gold{font:800 26px var(--font,system-ui,-apple-system,sans-serif);letter-spacing:.2px;
  background:linear-gradient(90deg,var(--or-3),var(--or-1),#fff7e0,var(--or-1),var(--or-3));
  background-size:320% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldShine 8s linear infinite}
@keyframes goldShine{0%{background-position:160% 0}100%{background-position:-160% 0}}
/* =========================================================================
   ANIMATIONS GLOBALES 7000.pro — source unique des keyframes partagées.
   Reprises au caractère près du design system validé (tokens.css, 30/05).
   ========================================================================= */
@keyframes blink-text-ko {
  0%, 100% { color: #ff9d9d; }
  50%      { color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,.50); }
}
@keyframes blink-text-warn {
  0%, 100% { color: #ffcb84; }
  50%      { color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,.50); }
}
@keyframes blink-text-em {
  0%, 100% { color: #1FD4BB; }
  50%      { color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,.50); }
}
@keyframes blink-glow-ko {
  0%, 100% { opacity: 1;   box-shadow: 0 0 18px rgba(239,68,68,.75), inset 0 1px 0 rgba(255,255,255,.30); }
  50%      { opacity: .55; box-shadow: 0 0 6px  rgba(239,68,68,.25); }
}
.pill{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 9px;border-radius:var(--r-sm);
  font:700 11px var(--font,system-ui,-apple-system,sans-serif);color:#fff;border:1px solid transparent}
.pill .n{font-variant-numeric:tabular-nums;opacity:.95}
.pill.all{background:#e8e8ee;color:#1a1a28;border-color:#cfcfd9}
.pill.err{background:var(--red,#ef4444)}.pill.warn{background:var(--orange,#f59f4d)}.pill.info{background:var(--blue,#5e8df5)}
.pill.ok{background:var(--green,#22c55e)}.pill.empty{background:#cbd5e1;color:#1a1f2e}
.niv2 input.search{height:26px;background:#262c34;color:#fff;border:1px solid rgba(255,255,255,.10);
  border-radius:7px;padding:0 10px;width:160px;font:500 12px var(--font,system-ui,-apple-system,sans-serif);outline:none}
/* ===== SHELL 7000.pro — fin ===== */

/* ============================ COMPOSANTS ============================ */
/* ===== COMPOSANTS 7000.pro — cartes, KPI & états visuels (bloc borné, remplacement net) ===== */
/* Vocabulaire : .card-kpi = indicateur (verre dépoli). .blk = bloc liste (en-tête verre + corps clair = repos).
   État "attention/catégorie" : ajouter .is-glass sur .blk (corps passe en verre sombre). La couleur
   d'accent se pilote par la variable --c posée sur l'élément (rouge critique, ambre attention,
   violet nouveau, émeraude ok...). Aucun style inline : tout par classes + --c. */

/* --- tokens couleurs d'état (réutilisables) --- */
:root{
  --st-crit:#e0483a; --st-warn:#d6902a; --st-new:#7c3aed; --st-ok:#0e9b6c;
  --st-blue:#3b82f6; --st-amber:#e8a13a; --st-grey:#8a94a0;
  /* texte sur verre sombre : clair franc, jamais gris sur gris */
  --on-glass-1:#ffffff; --on-glass-2:#cdd8e6; --on-glass-3:#aab4c0;
  /* texte sur corps clair */
  --on-light-1:#0d1620; --on-light-2:#2f3a47; --on-light-3:#4c5663;
}

/* ============ BLOC liste (en-tête verre + corps clair = état REPOS) ============ */
.blk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.blk{position:relative;overflow:hidden;border-radius:18px;display:flex;flex-direction:column;min-height:240px;
  background:linear-gradient(160deg,#eef2f7,#dde4ed);border:1.5px solid rgba(40,55,75,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 10px -6px rgba(20,30,45,.3),0 26px 40px -18px rgba(20,30,45,.45),0 40px 60px -30px rgba(20,30,45,.35)}
.blk-h{display:flex;align-items:center;gap:11px;padding:14px 18px;position:relative;overflow:hidden;
  background:linear-gradient(158deg,rgba(60,70,86,.94),rgba(28,33,42,.97));border-bottom:1.5px solid rgba(255,255,255,.1)}
.blk-h::before{content:"";position:absolute;top:-30px;left:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--c,var(--accent)),transparent 70%);opacity:.32}
.blk-h::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c,var(--accent));box-shadow:0 0 14px 2px var(--c,var(--accent))}
.blk-h .blk-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;z-index:2;
  background:linear-gradient(135deg,var(--c,var(--accent)),color-mix(in srgb,var(--c,var(--accent)) 50%,#000));box-shadow:0 4px 10px -5px rgba(0,0,0,.5)}
.blk-h .blk-ic svg{width:17px;height:17px;display:block}
.blk-h h3{font-size:15px;font-weight:800;flex:1;color:#fff;position:relative;z-index:2;margin:0}
.blk-h .blk-cnt{position:relative;z-index:2;font-size:11px;font-weight:800;color:#fff;background:var(--c,var(--accent));padding:3px 9px;border-radius:999px}
.blk-b{padding:6px 10px;flex:1}

/* sous-titre de section dans un bloc */
.blk-sub{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:9px 8px 4px;color:var(--on-light-3)}

/* ligne de liste (corps clair, texte foncé lisible) */
.blk-it{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:9px}
.blk-it + .blk-it{border-top:1px solid rgba(40,55,75,.1)}
.blk-it:hover{background:rgba(255,255,255,.6)}
.blk-it .it-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--st-grey)}
.blk-it .it-dot.is-crit{background:var(--st-crit);box-shadow:0 0 0 3px rgba(224,72,58,.18)}
.blk-it .it-dot.is-warn{background:var(--st-warn);box-shadow:0 0 0 3px rgba(214,144,42,.18)}
.blk-it .it-dot.is-new{background:var(--st-new);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
.blk-it .it-dot.is-cours{background:var(--st-blue);box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.blk-it .it-tx{flex:1;min-width:0}
.blk-it .it-t1{font-size:13px;font-weight:700;color:var(--on-light-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk-it .it-t2{font-size:11.5px;color:var(--on-light-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk-it .it-t2.is-muted{color:var(--st-grey);font-style:italic}
.blk-it .it-badge{font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;flex:0 0 auto;color:#fff;background:var(--st-grey)}
.blk-it .it-badge.is-new{background:var(--st-new)}
.blk-it .it-badge.is-cours{background:var(--st-blue)}
.blk-it .it-badge.is-crit{background:var(--st-crit)}
.blk-it .it-badge.is-warn{background:var(--st-warn)}
.blk-it .it-badge.is-haute{background:var(--st-amber)}

/* état vide / module à brancher */
.blk-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;padding:24px;text-align:center;color:var(--on-light-3)}
.blk-empty svg{width:30px;height:30px;opacity:.45;display:block}
.blk-empty .e1{font-size:13px;font-weight:700;color:var(--on-light-2)}
.blk-empty .e2{font-size:11.5px;color:var(--on-light-3)}

/* ===== ÉTAT "ATTENTION/CATÉGORIE" : .blk.is-glass = corps passe en verre sombre =====
   (inactif par défaut ; le contrôleur ajoute .is-glass selon la donnée. Texte clair franc.) */
.blk.is-glass{background:linear-gradient(158deg,rgba(60,70,86,.58),rgba(30,36,46,.7));backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  border:1.5px solid rgba(185,200,220,.3);border-top:1.5px solid rgba(215,228,244,.42)}
.blk.is-glass .blk-sub{color:var(--on-glass-2)}
.blk.is-glass .blk-it + .blk-it{border-top:1px solid rgba(255,255,255,.09)}
.blk.is-glass .blk-it:hover{background:rgba(255,255,255,.05)}
.blk.is-glass .blk-it .it-t1{color:var(--on-glass-1)}
.blk.is-glass .blk-it .it-t2{color:var(--on-glass-2)}
.blk.is-glass .blk-it .it-t2.is-muted{color:var(--on-glass-3)}
.blk.is-glass .blk-empty{color:var(--on-glass-2)}
.blk.is-glass .blk-empty .e1{color:var(--on-glass-1)}
.blk.is-glass .blk-empty .e2{color:var(--on-glass-3)}

@media(max-width:980px){.card-kpi-grid{grid-template-columns:repeat(2,1fr)}.blk-grid{grid-template-columns:1fr}}
/* ===== COMPOSANTS 7000.pro — fin ===== */

.page{padding:var(--sp-5) var(--sp-5) 56px}   /* pleine largeur, gouttière latérale réduite (~20px) */

.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:var(--sp-4)}  /* dense : se remplit sur toute la largeur */
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--sp-3)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:flex-start}

/* Bandeau d'accueil (carte claire) */

/* Tuile signature — liserés haut+gauche (L) + chip + séparateur dégradé */
.tile{position:relative;background:var(--tile-bg);border:var(--tile-border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-tile);color:var(--tx-on-bar,#f0f3fa);padding:var(--sp-5);transition:transform .25s,box-shadow .25s}
.tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--accent-bright),var(--accent),var(--accent-deep));box-shadow:0 0 12px var(--accent-glow)}
.tile::after{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;z-index:2;
  background:linear-gradient(180deg,var(--accent-bright),var(--accent),var(--accent-deep));box-shadow:0 0 12px var(--accent-glow)}
.tile:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.28)}
.tile.cat-warn::before,.tile.cat-warn::after{background:linear-gradient(90deg,#f7c873,var(--orange,#f59f4d),#b56327);box-shadow:0 0 12px rgba(245,159,77,.5)}
.tile.cat-ko::before,.tile.cat-ko::after{background:linear-gradient(90deg,#ff8a8a,var(--red,#ef4444),#8a1f1f);box-shadow:0 0 12px rgba(239,68,68,.5)}
.tile .head-bn{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:12px;position:relative}
.tile .head-bn::after{content:"";position:absolute;left:0;bottom:0;width:60%;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 6px var(--accent-glow)}
.tile.cat-warn .head-bn::after{background:linear-gradient(90deg,var(--orange,#f59f4d),transparent)}
.tile.cat-ko .head-bn::after{background:linear-gradient(90deg,var(--red,#ef4444),transparent)}
.tile .ic{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;font-weight:800;color:#fff;flex-shrink:0;
  background:linear-gradient(160deg,var(--accent-bright),var(--accent-deep))}
.tile.cat-warn .ic{background:linear-gradient(160deg,#f7c873,#b56327)}
.tile.cat-ko .ic{background:linear-gradient(160deg,#ff8a8a,#8a1f1f)}
.tile h3{font:700 13px var(--font,system-ui,-apple-system,sans-serif);text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.78)}
.tile .val{font:800 34px var(--font,system-ui,-apple-system,sans-serif);letter-spacing:-1px;color:#fff}
.tile .sub{font:500 13px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.5)}

/* KPI clair */
.kpi{background:#fff;border:1px solid var(--border-light);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--sh-tile);border-top:3px solid var(--accent)}
.kpi.warn{border-top-color:var(--orange,#f59f4d)}.kpi.gold{border-top-color:var(--or-2)}
.kpi .lbl{font:700 11px var(--font,system-ui,-apple-system,sans-serif);text-transform:uppercase;letter-spacing:.5px;color:var(--tx-dark-2,#3d4352)}
.kpi .v{font:800 30px var(--font,system-ui,-apple-system,sans-serif);letter-spacing:-1px;color:var(--accent-deep);margin:3px 0}
.kpi .t.up{color:var(--green,#22c55e);font:600 12px var(--font,system-ui,-apple-system,sans-serif)}.kpi .t.down{color:var(--red,#ef4444);font:600 12px var(--font,system-ui,-apple-system,sans-serif)}

/* Liste sombre */
.list-tile{background:linear-gradient(160deg,#1d232c,#14181f);border-radius:var(--r-lg);padding:var(--sp-5);color:var(--tx-on-bar,#f0f3fa);box-shadow:var(--sh-tile)}

.lrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.lrow:last-child{border-bottom:0}
.lrow .av{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font:700 11px var(--font,system-ui,-apple-system,sans-serif);color:#fff}
.lrow .av.ok{background:var(--green,#22c55e)}.lrow .av.warn{background:var(--orange,#f59f4d)}.lrow .av.ko{background:var(--red,#ef4444)}
.lrow .nm{flex:1;font:600 13px var(--font,system-ui,-apple-system,sans-serif)}.lrow .nm span{display:block;font:500 11px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.5)}

/* Badges */
.bdg{display:inline-block;font:700 11px var(--font,system-ui,-apple-system,sans-serif);padding:3px 10px;border-radius:var(--r-pill)}
.bdg.ok{background:rgba(34,197,94,.14);color:#1a7a44}.bdg.warn{background:rgba(245,159,77,.16);color:#b56327}
.bdg.ko{background:rgba(239,68,68,.14);color:#b91c1c}.bdg.info{background:rgba(94,141,245,.14);color:#3b5bb5}

/* Barre de progression */

/* Toast sombre — liseré gauche coloré */
.toast{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(160deg,#1d232c,#14181f);color:#fff;
  border-radius:var(--r);padding:13px 15px;box-shadow:0 14px 36px rgba(0,0,0,.28);max-width:380px;position:relative;overflow:hidden}
.toast::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%}
.toast.ok::before{background:linear-gradient(180deg,var(--accent-bright),var(--accent-deep))}
.toast.warn::before{background:linear-gradient(180deg,#f7c873,#b56327)}.toast.ko::before{background:linear-gradient(180deg,#ff8a8a,#8a1f1f)}
.toast .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-weight:800;flex-shrink:0;color:#052824}
.toast.ok .ic{background:linear-gradient(160deg,var(--accent-bright),var(--accent-deep))}
.toast.warn .ic{background:linear-gradient(160deg,#f7c873,#b56327)}.toast.ko .ic{background:linear-gradient(160deg,#ff8a8a,#8a1f1f);color:#3a0808}
.toast .ttl{font:700 13px var(--font,system-ui,-apple-system,sans-serif)}.toast .sub{font:500 12px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.6)}
.toast .x{margin-left:auto;color:rgba(255,255,255,.45);background:none;border:0;cursor:pointer}

/* Modale sombre — liseré haut */
.modal{background:linear-gradient(160deg,#1d232c,#14181f);color:#fff;border-radius:var(--r-lg);padding:var(--sp-6);
  box-shadow:0 24px 60px rgba(0,0,0,.4);max-width:420px;border-top:4px solid var(--accent)}
.modal.danger{border-top-color:var(--red,#ef4444)}
.modal h4{font:700 17px var(--font,system-ui,-apple-system,sans-serif)}.modal p{font:500 13px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.6);margin:8px 0 16px}

/* Recherche prédictive claire */
.search{background:#fff;border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--sh-tile);max-width:460px}
.search input{width:100%;height:40px;border:1px solid var(--border-light);border-radius:var(--r);padding:0 14px;font:500 14px var(--font,system-ui,-apple-system,sans-serif);outline:none}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-line)}
.search .res a{display:block;padding:9px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--tx-dark,#1a1f2e);font:500 13px var(--font,system-ui,-apple-system,sans-serif)}
.search .res a:hover{background:var(--page-2)}

/* État vide */
.empty{text-align:center;padding:var(--sp-8);background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-tile);border:1px dashed #c9d0dc}
.empty .ic{width:48px;height:48px;border-radius:12px;margin:0 auto var(--sp-3);display:grid;place-items:center;background:var(--page-2);color:var(--accent);font-size:22px}
.empty h4{font:700 15px var(--font,system-ui,-apple-system,sans-serif)}.empty p{font:500 13px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);margin:4px 0 14px}

/* Boutons */
.btn{height:40px;padding:0 18px;border-radius:var(--r-pill);border:0;cursor:pointer;font:700 13px var(--font,system-ui,-apple-system,sans-serif);transition:.15s}
/* 21/09 (contrôle visuel) : un lien habillé en bouton ne se souligne jamais — les mêmes familles que verre.css */
a.btn, a.zone-btn, a.zone-btn-sec, a.zone-carte, a.cf-hbtn, a.cf-pbtn, a.nv-btn-p, a.nv-btn-ghost, a.tw-btn, a.icon-btn, a.gd-btn,
a.rp-btn, a.ct-btn, a.fj-btn, a.cl-disp-btn, a.cs-btn-conseiller, a.ch-btn-petit, a.ch-janv-btn, a.dp-btn-etendre, a.et-missbtn,
a.mx-btn, a.m-btn, a.m-btn-ghost, a.m-btn-warn, a.m-nav-btn, a.cf-act, a.gddm-go, a.gddm-send, a.etm-send, a.etm-save, a.cf-go,
a.cf-pill, a.m-pill, a.pill, a.ch-an, a.cl-nouveau, a.cl-al-prev, a.jr-geste, a.tp-retour, a.uc-step{text-decoration:none}
a.btn{display:inline-flex;align-items:center;justify-content:center}
.btn.primary{background:linear-gradient(160deg,var(--accent-bright),var(--accent));color:#fff;box-shadow:0 6px 16px var(--accent-glow)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.secondary{background:#fff;color:var(--tx-dark,#1a1f2e);box-shadow:inset 0 0 0 1px var(--border-light)}.btn.danger{background:var(--red,#ef4444);color:#fff}
.btn.sm{height:32px;padding:0 14px;font-size:12px}

/* Login (hors shell) — fond PLEIN, pas de bulles derrière la saisie */
.login{background:linear-gradient(160deg,#222a32,#14181d);border-radius:var(--r-lg);
  display:grid;place-items:center;padding:var(--sp-8);box-shadow:var(--sh-tile);min-height:100vh}
.login .bdg.ko{display:block;text-align:center;margin-bottom:12px}
.login-card{width:300px;background:#1b212a;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:var(--sp-6)}
.login-card .t{font:800 20px var(--font,system-ui,-apple-system,sans-serif);color:#fff;text-align:center}
.login-card .s{font:500 12px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.5);text-align:center;margin-bottom:var(--sp-5)}
.login-card label{font:600 11px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.7);display:block;margin:10px 0 4px}
.login-card input{width:100%;height:44px;border-radius:var(--r);border:1px solid rgba(255,255,255,.12);
  background:#11151b;color:#fff;padding:0 12px;outline:none;font:500 16px var(--font,system-ui,-apple-system,sans-serif)}
.login-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-line)}
.login-card .btn{width:100%;margin-top:var(--sp-5)}
/* 07/09/2026 — L'OEIL SUR LE MOT DE PASSE (demande de Miguel : « il faut
   arreter d'interdire le ctrl V dans le mot de passe de login »). Rien ne
   l'interdisait ; le mot colle arrivait avec un espace invisible et etait
   refuse. Voir AuthController pour la correction, ici seulement le bouton
   qui permet de VERIFIER ce qui a ete colle.
   La reserve de 76 px a droite du champ evite le defaut classique de ce
   motif : le mot de passe affiche passant sous le bouton. */
.pw-l{position:relative;display:block}
/* 08/09 — 44 px et non 76. Le bouton occupait presque un tiers du champ, et
   un clic dans cette zone atterrissait sur lui : le champ n'obtenait jamais le
   focus, donc Ctrl+V n'allait nulle part. Un remede qui recouvre un tiers de la
   cible qu'il devait rendre visible. */
.pw-l input{padding-right:46px}
.pw-oeil{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:36px;height:34px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font:400 15px var(--font,system-ui,-apple-system,sans-serif);line-height:1}
.pw-oeil:hover{background:rgba(255,255,255,.12);color:#fff}
.pw-oeil:focus-visible{outline:2px solid var(--accent-bright);outline-offset:1px}

/* Libellé de section (titres internes de page) */

/* ============================ DROPDOWN "Plus" — composant ajoute (01/06/2026) ============================ */
.nav-item{position:relative;display:inline-flex}
.nav-item.has-dropdown{position:relative}
.shell-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;min-width:240px;z-index:200;
  background:linear-gradient(180deg,#1d232c 0%,#14181f 100%);
  border:1px solid rgba(255,255,255,.10);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 0 1px rgba(11,174,159,.10);
  padding:6px;display:none
}
.shell-dropdown.is-open{display:block}
.dd-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:8px;
  color:rgba(255,255,255,.85);text-decoration:none;
  font:500 13px var(--font,system-ui,-apple-system,sans-serif);white-space:nowrap;
  transition:background .15s,color .15s
}
.dd-item:hover{background:rgba(11,174,159,.14);color:#fff}
.dd-item.active{
  background:linear-gradient(180deg,var(--or-1) 0%,var(--or-2) 50%,var(--or-3) 100%);
  color:#2a2110;font-weight:700;
  box-shadow:0 4px 10px rgba(184,142,53,.30),inset 0 1px 0 rgba(255,255,255,.45)
}
.dd-ic{display:inline-block;width:20px;text-align:center;font-size:14px}

/* ════════════════════════════════════════════════════════════════
   PILOTAGE — Synthèse (composants ajoutés ; aucun doublon du socle)
   ════════════════════════════════════════════════════════════════ */
.muted{color:var(--tx-dark-2,#3d4352)}
.text-center{text-align:center}
.text-right{text-align:right}

.lbl-sec{position:relative;padding-left:14px;margin:28px 0 13px;font:800 11px var(--font,system-ui,-apple-system,sans-serif);text-transform:uppercase;letter-spacing:1.5px;color:var(--accent-deep)}
.lbl-sec::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:15px;border-radius:2px;background:linear-gradient(180deg,var(--accent-bright),var(--accent-deep))}

/* cartes synthèse (fond sombre du socle .tile ; N+1 = fond plus clair + accent or) */
/* 22/09 (Miguël : « aligner les choses le plus souvent possible ») — la carte est une colonne, sa bande
   « Différence » est collée en bas : les trois cartes s'alignent, quelle que soit leur nombre de lignes. */
.pcard{padding:14px 18px 16px;display:flex;flex-direction:column}
/* 22/09 — la carte N+1 quand une simulation de tarifs la nourrit */
.pcard--sim{box-shadow:0 0 0 1.5px var(--or-3,#c9a247) inset}
/* 24/09/2026 (Miguël : « ou switchable avec ou sans, avec un toggle ») — les deux lectures du
   graphique pluriannuel : le plancher des contrats, ou l'atterrissage avec le hors contrat. */
.chart-bascule{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 2px 8px}
.chart-bascule .cb-b{border:1.5px solid #cfd8e3;background:#fff;color:var(--tx-dark-2,#5a6377);
  border-radius:999px;padding:6px 14px;font:700 12px var(--font,system-ui,sans-serif);cursor:pointer}
.chart-bascule .cb-b:hover{border-color:var(--accent-bright,#0BAE9F);color:var(--accent,#06747D)}
.chart-bascule .cb-b.actif{border-color:var(--accent-bright,#0BAE9F);background:#f2fafa;
  color:var(--accent,#06747D);box-shadow:inset 0 0 0 1px var(--accent-bright,#0BAE9F)}
.chart-bascule .cb-d{font:500 11.5px/1.45 var(--font,system-ui,sans-serif);color:var(--tx-dark-2,#5a6377);flex:1 1 260px}
.hist-vue[hidden]{display:none}

/* 24/09/2026 (Miguël : « il faut que tout cela interagisse avec le graphique de la Synthèse ») —
   la deuxième lecture de N+1 : l'atterrissage probable, à côté du plancher des contrats. */
.pc-hors{grid-column:1 / -1;margin:10px 2px 0;padding:12px 16px;border-radius:12px;
  border:1.5px solid #cfd8e3;background:#fbfcfe}
.pc-hors .ph-t{font:800 15px var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e)}
.pc-hors .ph-t b{font-variant-numeric:tabular-nums}
.pc-hors .ph-d{margin-top:5px;font:500 12.5px/1.6 var(--font,system-ui,sans-serif);color:var(--tx-dark-2,#5a6377)}
.pc-hors .ph-d b{color:var(--tx-dark,#1a1f2e);font-weight:700}
.pc-hors .ph-a{margin-top:9px;padding-top:9px;border-top:1px dashed #cfd8e3;
  font:600 13.5px/1.55 var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e)}
.pc-hors .ph-a b{font-variant-numeric:tabular-nums}
.pc-hors .ph-a small{display:block;margin-top:3px;font:500 12px/1.55 var(--font,system-ui,sans-serif);
  color:var(--tx-dark-2,#5a6377)}
.pc-hors.est-pos{border-color:#bfe6cc;background:#f2fbf5}
.pc-hors.est-pos .ph-t b{color:#15803d}
.pc-hors.est-neg{border-color:#e8c4ba;background:#fdf4f2}
.pc-hors.est-neg .ph-t b{color:#b91c1c}
.pc-sim{grid-column:3;margin:6px 2px 0;font:700 11.5px var(--font,system-ui,sans-serif);text-align:right}
.pc-sim a{color:var(--or-1,#f5d370);text-decoration:none;border-bottom:1px dotted var(--or-3,#c9a247)}
.pcard--n1{background:radial-gradient(120% 80% at 100% 0%,rgba(232,199,106,.16) 0%,transparent 55%),linear-gradient(165deg,#323b46 0%,#28303a 52%,#232a32 100%);border-top:2px solid var(--or-2)}
.pc-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.pc-title{font:800 15px var(--font,system-ui,-apple-system,sans-serif);color:#fff;letter-spacing:.2px}
.pc-year{font:800 15px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.72);letter-spacing:1px}
.pc-chart{margin-bottom:8px}
.pc-figs{display:flex;flex-direction:column;gap:0;flex:1 1 auto}
.pc-figs .pf-diff{margin-top:auto}
.pf-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.pf-l{font:500 12.5px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.6)}
.pf-v{font:700 14px var(--font,system-ui,-apple-system,sans-serif);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.pf-diff{display:flex;justify-content:space-between;align-items:center;margin-top:11px;padding:11px 14px;border-radius:12px}
.pf-diff.neg{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.22)}
.pf-diff.pos{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.22)}
.pf-dl{font:700 11px var(--font,system-ui,-apple-system,sans-serif);text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.6)}
.pf-dv{font:800 20px var(--font,system-ui,-apple-system,sans-serif);font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.pf-diff.neg .pf-dv{color:#ff9b8f}
.pf-diff.pos .pf-dv{color:#67e0a3}

/* tableau projets (zone claire = données) */
.dtable{width:100%;background:linear-gradient(160deg,#f6f3ec,#ebe4d6);border-radius:var(--r-lg);box-shadow:0 6px 24px -6px rgba(20,30,45,.18),0 2px 6px rgba(20,30,45,.07);border:1px solid rgba(20,30,45,.08);overflow:hidden;border-collapse:separate;border-spacing:0;border-top:3px solid var(--accent)}
.dtable thead th{background:linear-gradient(180deg,#252d36,#191e25);color:rgba(255,255,255,.78);font:800 10px var(--font,system-ui,-apple-system,sans-serif);text-transform:uppercase;letter-spacing:.9px;text-align:left;padding:13px 16px;white-space:nowrap}
.dtable thead th.num{text-align:right}
.dtable tbody td{padding:13px 16px;font:500 13px var(--font,system-ui,-apple-system,sans-serif);color:#3a4254;border-bottom:1px solid #f1f4f8;white-space:nowrap}
.dtable tbody tr:nth-child(even) td{background:rgba(20,30,45,.035)}
.dtable tbody td.dt{color:#9aa3b2;font:600 12px var(--font,system-ui,-apple-system,sans-serif);font-variant-numeric:tabular-nums}
.dtable tbody td.cli{font-weight:700;color:#1f2733}
.dtable tbody td.num{text-align:right;font-variant-numeric:tabular-nums;color:#5a6377;font-weight:600}
.dtable tbody td.num.dim{color:#b0b8c4;font-weight:500}
.dtable tbody td.num.yr{color:#9aa3b2;font-weight:500}
.dtable tbody td.tot{text-align:right;font-weight:800;color:var(--accent-deep)}
.dtable tbody tr:hover td{background:rgba(6,116,125,.08)}
.dtable .sep td{font:800 10px var(--font,system-ui,-apple-system,sans-serif);text-transform:uppercase;box-shadow:inset 4px 0 0 var(--accent);}
.rowlink{font:700 12px var(--font,system-ui,-apple-system,sans-serif);color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.rowlink:hover{border-bottom-color:var(--accent)}

/* variantes de badge manquantes au socle */
.bdg.muted{background:#eef0f4;color:#5a6377}
.bdg.gold{background:rgba(232,199,106,.20);color:#9a7b22}

/* totaux projets */
.totals{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-4)}
.total-card{background:linear-gradient(160deg,#f6f3ec,#ebe4d6);border-radius:var(--r-lg);box-shadow:0 6px 24px -6px rgba(20,30,45,.18),0 2px 6px rgba(20,30,45,.07);border:1px solid rgba(20,30,45,.08);padding:18px 24px;display:flex;align-items:center;justify-content:space-between;border-left:4px solid var(--accent)}
.total-card.gold{border-left-color:var(--or-2)}
.total-card .tl{font:700 11px var(--font,system-ui,-apple-system,sans-serif);text-transform:uppercase;letter-spacing:.6px;color:#8a93a3}
.total-card .tv{font:800 28px var(--font,system-ui,-apple-system,sans-serif);color:var(--accent-deep);font-variant-numeric:tabular-nums;letter-spacing:-.6px}
.total-card.gold .tv{color:#b89438}

/* grand graphe historique */
.chart-card{background:linear-gradient(160deg,#f6f3ec,#ebe4d6);border-radius:var(--r-lg);box-shadow:0 6px 24px -6px rgba(20,30,45,.18),0 2px 6px rgba(20,30,45,.07);border:1px solid rgba(20,30,45,.08);padding:22px 26px 24px;border-top:3px solid var(--accent)}
.chart-card .ch-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.chart-card .ch-head h3{font:800 15px var(--font,system-ui,-apple-system,sans-serif);color:#1f2733;letter-spacing:.2px}
.chart-card .ch-head .sub{font:500 12px var(--font,system-ui,-apple-system,sans-serif);color:#aab2c0}
.chart-legend{display:flex;gap:22px;justify-content:center;margin-top:14px;font:700 11.5px var(--font,system-ui,-apple-system,sans-serif);color:#5a6478;flex-wrap:wrap}
.chart-legend span{display:inline-flex;align-items:center;gap:7px}
.chart-legend i{width:13px;height:11px;border-radius:3px;display:inline-block}
.chart-legend i.ln{height:0;width:17px;border-top:2.5px solid #5b6b86;border-radius:0}

/* styles déplacés depuis la page (zéro inline) */
.pc-chart svg text,.chart-card svg text{font-family:var(--font,system-ui,-apple-system,sans-serif)}
.dtable td.dt-empty{padding:16px;text-align:center;color:var(--tx-dark-2,#3d4352);font-style:italic}
.chart-empty{padding:18px;color:var(--tx-dark-2,#3d4352)}
.chart-legend i.cl-ca{background:#9aa6bc}
.chart-legend i.cl-obj{background:#e8c76a}
.chart-legend i.cl-mg{background:#13c2b0}
.chart-legend i.cl-or{background:#f5a23d}
/* ═══ fin PILOTAGE ═══ */
/* =========================================================================
   MODULE CLIENTS — FICHE (réécriture 2026-06-04, rév. dense)
   Bandeau identité verre dépoli + onglets pills sticky compactants
   KPI verre · coordonnées en grille · alertes verre rouge néon
   Préfixe cf- exclusif. Zéro inline.
   ========================================================================= */
.cl-fiche{
  --cf-glass:rgba(22,30,32,.86);
  --cf-glass-line:rgba(255,255,255,.10);
  --cf-line:#BFC8C4;
  --cf-ink:#1C2426;--cf-ink2:#3A4548;--cf-ink3:#5C6B6E;
  --cf-amber:#D98E04;--cf-amber-b:#F2B33D;
  --cf-danger:#C0392B;--cf-danger-b:#E74C3C;
  --cf-violet:#7C5CBF;--cf-violet-b:#9D7FE0;
  width:100%;padding:0 32px 48px;
}

/* ----- Zone sticky compactante : bandeau identité + onglets ----- */
.cf-sticky{
  position:sticky;top:calc((var(--niv1-h,50px) + var(--niv2-h,36px)) / var(--zoom-page,1));z-index:40;
  /* 21/09 (Miguël : « marges, largeurs… ») — d'un bord à l'autre de la page et collé au bloc de tête, comme la barre
     de la supervision ; le contenu reste aligné (la gouttière --sp-5 est rendue en marge, reprise en retrait). */
  margin:calc(-1 * var(--sp-5,20px)) calc(-32px - var(--sp-5,20px)) 0;padding:20px calc(32px + var(--sp-5,20px)) 0;
  background-color:var(--sable,#F2EDE3);
  transition:padding .22s, box-shadow .22s;
}
.cf-sticky.is-compact{padding-top:8px;box-shadow:0 8px 20px rgba(28,36,38,.14);}

/* ----- Bandeau identité verre dépoli ----- */
.cf-band{
  position:relative;overflow:hidden;
  background:var(--cf-glass);backdrop-filter:blur(6px);
  border:1.5px solid var(--cf-glass-line);border-radius:16px;
  box-shadow:0 12px 28px rgba(15,22,24,.28);
  padding:18px 24px;
  display:flex;align-items:center;gap:20px;
  transition:padding .22s, gap .22s, border-radius .22s;
}
.cf-band::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:3px;border-radius:3px;
  background:var(--accent-bright,#0BAE9F);box-shadow:0 0 14px var(--accent-bright,#0BAE9F);}
.cf-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 100% at 8% 50%, rgba(11,174,159,.20) 0%, transparent 55%);}
.cf-back{
  position:relative;z-index:1;flex:none;
  display:inline-flex;align-items:center;gap:7px;
  color:#fff;text-decoration:none;font-size:13px;font-weight:800;
  background:linear-gradient(180deg,#0BAE9F,#06747D);
  border:1.5px solid var(--accent-bright,#0BAE9F);border-radius:999px;padding:8px 16px;
  box-shadow:0 0 12px rgba(11,174,159,.45);
  transition:all .18s;
}
.cf-back:hover{box-shadow:0 0 20px rgba(11,174,159,.7);transform:translateX(-2px);}
.cf-back-ic{display:inline-flex;width:15px;height:15px;}
.cf-back-ic svg{width:100%;height:100%;}
.cf-avatar{
  position:relative;z-index:1;flex:none;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:800;color:#fff;letter-spacing:.5px;
  background:linear-gradient(180deg,var(--accent-bright,#0BAE9F),var(--accent-deep,#044a52));
  animation:cf-breath 3.2s ease-in-out infinite;
  transition:width .22s,height .22s,font-size .22s;
}
@keyframes cf-breath{
  0%,100%{box-shadow:0 0 0 3px rgba(11,174,159,.25),0 0 18px rgba(11,174,159,.35);}
  50%{box-shadow:0 0 0 3px rgba(11,174,159,.35),0 0 30px rgba(11,174,159,.6);}
}
.cf-idtx{position:relative;z-index:1;flex:1;min-width:0;}
.cf-name{font-size:23px;font-weight:800;color:#fff;letter-spacing:.3px;margin:0;line-height:1.15;transition:font-size .22s;}
.cf-idsub{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap;transition:margin .22s;}
.cf-loc{display:inline-flex;align-items:center;gap:6px;color:#AEBABD;font-size:13px;font-weight:600;}
.cf-loc-ic{display:inline-flex;width:14px;height:14px;}
.cf-loc-ic svg{width:100%;height:100%;}
.cf-rep{color:#7E8B8E;font-size:12px;font-weight:600;}
.cf-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 13px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.5px;border:1.5px solid;}
.cf-chip--on{background:linear-gradient(180deg,#0BAE9F,#06747D);border-color:var(--accent-bright,#0BAE9F);color:#fff;box-shadow:0 0 10px rgba(11,174,159,.4);}
.cf-chip--pr{background:rgba(124,92,191,.18);border-color:var(--cf-violet-b);color:#D9CCF5;}
.cf-chip--hc{background:transparent;border-color:rgba(255,255,255,.25);color:#AEBABD;}
.cf-hbtns{position:relative;z-index:1;display:flex;gap:10px;flex:none;}
.cf-hbtn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:13px;font-weight:700;border-radius:999px;padding:9px 17px;
  border:1.5px solid var(--cf-glass-line);background:transparent;color:#D8E2E4;
  font-family:inherit;transition:all .18s;
}
.cf-hbtn:hover{border-color:var(--accent-bright,#0BAE9F);color:#fff;}
.cf-hbtn[disabled]{opacity:.55;cursor:default;}
.cf-hbtn--conseil{background:linear-gradient(180deg,#FBE3B4,#F2C16B);border-color:var(--cf-amber);color:#5C3B00;box-shadow:0 0 12px rgba(242,179,61,.35);}
.cf-hbtn--conseil:hover{color:#5C3B00;border-color:var(--cf-amber);}
/* 18/09 — l'installeur de l'agent, en turquoise (le thème « faire ») : on le voit du premier coup d'œil. */
.cf-hbtn--agent{background:linear-gradient(180deg,var(--tk-faire-f,#c9e9e4),#a8dcd5);border-color:var(--tk-faire-b,#0BAE9F);color:var(--tk-faire,#055a52);box-shadow:0 0 12px rgba(11,174,159,.35);}
.cf-hbtn--agent:hover{color:var(--tk-faire,#055a52);border-color:var(--tk-faire,#055a52);background:linear-gradient(180deg,#d9f1ed,var(--tk-faire-f,#c9e9e4));}
.cf-hbtn-ic{display:inline-flex;width:15px;height:15px;}
.cf-hbtn-ic svg{width:100%;height:100%;}

/* ----- Onglets pills ----- */
.cf-tabs{display:flex;gap:10px;padding:14px 0;flex-wrap:wrap;transition:padding .22s;}
.cf-tab{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;border-radius:999px;padding:9px 19px;
  border:1.5px solid var(--cf-line);background:#fff;color:var(--cf-ink2);
  text-decoration:none;transition:all .18s;
}
.cf-tab:hover{border-color:var(--accent,#06747D);}
.cf-tab.on{
  background:linear-gradient(180deg,#0BAE9F,#06747D);
  border-color:var(--accent-bright,#0BAE9F);color:#fff;
  box-shadow:0 0 14px rgba(11,174,159,.4);
}
.cf-tab-ic{display:inline-flex;width:15px;height:15px;}
.cf-tab-ic svg{width:100%;height:100%;}
.cf-tab-n{
  min-width:20px;height:20px;border-radius:999px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;background:rgba(0,0,0,.10);
}
.cf-tab.on .cf-tab-n{background:rgba(255,255,255,.22);}
.cf-tab--al .cf-tab-n{background:linear-gradient(180deg,#F6B0A5,#E74C3C);color:#fff;animation:blink-text-ko 2.4s ease-in-out infinite;}

/* ----- État compact ----- */
.is-compact .cf-band{padding:8px 18px;border-radius:12px;gap:13px;}
.is-compact .cf-avatar{width:32px;height:32px;font-size:13px;animation:none;box-shadow:0 0 0 2px rgba(11,174,159,.3);}
.is-compact .cf-name{font-size:16px;}
.is-compact .cf-idsub{margin-top:0;}
.is-compact .cf-loc,.is-compact .cf-rep{display:none;}
.is-compact .cf-back{padding:5px 12px;font-size:12px;}
.is-compact .cf-hbtn{padding:5px 13px;font-size:12px;}
.is-compact .cf-tabs{padding:8px 0;}
.is-compact .cf-tab{padding:6px 15px;font-size:12.5px;}

/* ----- Corps ----- */
.cf-body{padding-top:18px;}

/* ----- KPI verre ----- */
.cf-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
.cf-kpi{
  position:relative;overflow:hidden;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;gap:14px;
  background:var(--cf-glass);backdrop-filter:blur(6px);
  border:1.5px solid var(--cf-glass-line);border-radius:12px;padding:10px 16px 10px 19px;
  box-shadow:0 12px 28px rgba(15,22,24,.28);
  transition:transform .18s;
}
.cf-kpi:hover{transform:translateY(-2px);}
.cf-kpi::before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:3px;border-radius:3px;
  background:var(--cf-k);box-shadow:0 0 12px var(--cf-k);}
.cf-kpi::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 12% 50%, var(--cf-kh) 0%, transparent 55%);}
.cf-kpi-ic{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);color:#fff;
  box-shadow:0 0 14px var(--cf-kh), inset 0 0 0 1.5px rgba(255,255,255,.10);position:relative;z-index:1;}
.cf-kpi-ic svg{width:16px;height:16px;}
.cf-kpi-tx{position:relative;z-index:1;display:flex;align-items:baseline;gap:9px;}
.cf-kpi-n{font-size:21px;font-weight:800;color:#fff;line-height:1;}
.cf-kpi-l{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#AEBABD;}
.cf-kpi--em{--cf-k:var(--accent-bright,#0BAE9F);--cf-kh:rgba(11,174,159,.22);}
.cf-kpi--vi{--cf-k:var(--cf-violet-b);--cf-kh:rgba(157,127,224,.20);}
.cf-kpi--rd{--cf-k:var(--cf-danger-b);--cf-kh:rgba(231,76,60,.22);}

/* ----- Grille dense Synthèse ----- */
.cf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px;
  grid-template-areas:"coord loc prod" "indisp conges prod" "tickets superv remarq";}
.cf-card--coord{grid-area:coord;}
.cf-card--loc{grid-area:loc;}
.cf-card--prod{grid-area:prod;}
.cf-card--indisp{grid-area:indisp;}
.cf-card--conges{grid-area:conges;}
.cf-card--tickets{grid-area:tickets;}
.cf-card--superv{grid-area:superv;}
.cf-card--remarq{grid-area:remarq;}
.cf-card{background:#FFFFFF;overflow:hidden;display:flex;flex-direction:column;}
.cf-card-h{display:flex;align-items:center;gap:9px;
  padding:8px 14px;}
.cf-card-h svg{width:14px;height:14px;flex:none;}
.cf-card-b{flex:1;display:flex;flex-direction:column;}

/* Coordonnées : lignes uniformes 52px (icône + valeur + actions) */
.cf-crow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #E8ECEA;}
.cf-crow:last-child{border-bottom:none;}
.cf-ci{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;}
.cf-ci svg{width:18px;height:18px;}
.cf-ci--tel{background:linear-gradient(135deg,#0BAE9F,#06747D);}
.cf-ci--mail{background:linear-gradient(135deg,#3b82f6,#1e40af);}
.cf-ci--adr{background:linear-gradient(135deg,#c9a247,#9a7209);}
.cf-cv{flex:1;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:2px;}
.cf-cd{font-size:13.5px;font-weight:700;color:var(--cf-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.cf-cd small{font-weight:600;color:var(--cf-ink3);font-size:12px;}
.cf-cd--off{color:#A8B0A9;}
/* 21/09 (contrôle visuel) : l'adresse s'écrit en entier, sur deux lignes s'il le faut */
.cf-cd--adresse{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;}
.cf-cl{font-size:9.5px;font-weight:800;color:var(--cf-ink3);text-transform:uppercase;letter-spacing:.5px;}
.cf-cbtns{display:flex;gap:6px;flex:none;width:198px;justify-content:flex-end;}
.cf-act{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:700;
  border-radius:999px;width:96px;height:30px;flex:none;border:1.5px solid;text-decoration:none;transition:all .18s;}
.cf-act svg{width:13px;height:13px;}
.cf-act--full{background:linear-gradient(180deg,#0BAE9F,#06747D);border-color:var(--accent-bright,#0BAE9F);color:#fff;box-shadow:0 0 10px rgba(11,174,159,.35);}
.cf-act--full:hover{box-shadow:0 0 16px rgba(11,174,159,.55);}
.cf-act--ghost{background:#FFFFFF;border-color:var(--accent,#06747D);color:var(--accent-deep,#044a52);cursor:pointer;}
.cf-act--ghost:hover{border-color:var(--accent-bright,#0BAE9F);box-shadow:0 0 10px rgba(11,174,159,.3);}
.cf-act--line{background:#fff;border-color:var(--accent,#06747D);color:var(--accent-deep,#044a52);}
.cf-act--line:hover{background:#E6F4F2;}

/* Minicarte */
.cf-map{flex:1;min-height:300px;border:none;width:100%;}
.cf-map-f{padding:8px 12px;border-top:1px solid #E8ECEA;display:flex;justify-content:flex-start;align-items:center;gap:8px;flex-wrap:wrap;}
#cf-leaflet{height:340px;min-height:340px;border-radius:10px;overflow:hidden;z-index:0;}
.leaflet-container{font:inherit;background:#e9eef0;}
.cf-map-info{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--accent-deep,#044a52);font-family:ui-monospace,monospace;}

/* Produits / listes plafonnées */
.cf-pscroll{max-height:184px;overflow-y:auto;scrollbar-width:thin;}
.cf-pfoot{padding:7px 14px;font-size:11px;font-weight:700;color:var(--cf-ink3);border-top:1px solid #E8ECEA;margin-top:auto;}
.cf-plist{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:11px;display:flex;flex-direction:column;gap:9px;}
.cf-prow{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:12px;background:#fff;
  box-shadow:0 2px 6px rgba(20,40,60,.06);border:1.5px solid #E2E7EE;position:relative;overflow:hidden;}
.cf-prow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pc);}
.cf-pti{flex:none;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,var(--pc),var(--pc2));box-shadow:0 4px 10px -3px var(--pc);}
.cf-pti svg{width:20px;height:20px;}
.cf-pmn{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cf-pn{font-size:14px;font-weight:800;color:var(--cf-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cf-pf{font-size:9.5px;font-weight:800;color:var(--cf-ink3);text-transform:uppercase;letter-spacing:.5px;}
.cf-pqt{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:34px;}
.cf-pqt b{font-size:18px;font-weight:800;color:var(--cf-ink);line-height:1;}
.cf-pqt span{font-size:8px;font-weight:800;color:var(--cf-ink3);text-transform:uppercase;letter-spacing:.08em;}
.cf-prow--av  {--pc:#E74C3C;--pc2:#a8332b;}
.cf-prow--cm  {--pc:#0BAE9F;--pc2:#06747D;}
.cf-prow--mib {--pc:#9D7FE0;--pc2:#6a4fb0;}
.cf-prow--m365{--pc:#3b82f6;--pc2:#1e40af;}
.cf-prow--save{--pc:#2bae66;--pc2:#1c7d49;}
.cf-prow--def {--pc:#64748b;--pc2:#475569;}

/* Indisponibilités */
.cf-itbl{width:100%;border-collapse:collapse;}
.cf-itbl th,.cf-itbl td{padding:5px 12px;font-size:12px;border-bottom:1px solid #E8ECEA;text-align:center;}
.cf-itbl th{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--cf-ink3);}
.cf-itbl td:first-child,.cf-itbl th:first-child{text-align:left;font-weight:700;color:var(--cf-ink2);}
.cf-itbl tr:last-child td{border-bottom:none;}
.cf-iok{color:#A8B0A9;font-weight:600;}
.cf-ino{display:inline-flex;width:18px;height:18px;border-radius:5px;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#F6B0A5,#E74C3C);color:#fff;font-size:11px;font-weight:800;
  box-shadow:0 0 7px rgba(231,76,60,.4);}
.cf-legend{padding:7px 14px;font-size:11px;color:var(--cf-ink3);border-top:1px solid #E8ECEA;margin-top:auto;}

/* Congés / vides / remarques */
.cf-gempty{flex:1;min-height:108px;margin:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 16px;border-radius:13px;background:linear-gradient(160deg,#fbfdfc,#eef3f1);border:1.5px dashed #cdd9d5;color:#7c8a91;font-size:12.5px;font-weight:700;text-align:center;}
.cf-gempty svg{width:28px;height:28px;color:#9fb6ad;}
/* Ce que le client nous a dit lui-meme de ses fermetures (29/09/2026).
   Un bandeau en haut de la carte : les dates qui suivent viennent de LUI, pas de nous. Vert
   quand il a confirme ce qu'on avait, ambre quand il a corrige — parce que "corrige" veut dire
   que notre base etait fausse, et c'est la seule ligne a lire. */
.cf-dr{margin:11px 11px 4px;padding:10px 13px;border-radius:11px;border:2px solid;font-size:12.5px;line-height:1.55;}
.cf-dr--confirme{background:#dcf2e4;border-color:#15803d;color:#173a25;}
.cf-dr--corrige{background:#fbe9d2;border-color:#a85a12;color:#4a2c08;}
.cf-dr-t{margin:0;}
.cf-dr-t b{display:block;font-weight:800;}
.cf-dr--confirme .cf-dr-t b{color:#13652f;}
.cf-dr--corrige .cf-dr-t b{color:#8a4a0f;}
.cf-dr-m{margin:8px 0 0;padding:8px 11px;border-radius:9px;background:#ffffff;border:1px solid #d7ded9;font-style:italic;color:#2f3c33;}
.cf-grow{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #E8ECEA;font-size:13px;}
.cf-grow:last-child{border-bottom:none;}
.cf-grow b{color:var(--cf-ink);}
.cf-gd{color:var(--cf-ink3);font-size:12px;margin-left:auto;white-space:nowrap;}
.cf-rem{padding:12px 14px;font-size:13px;color:var(--cf-ink);line-height:1.5;}
/* 14/09 (Miguël) — les remarques s'écrivent sur la fiche : une zone, un bouton. */
.cf-rem-f{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.cf-rem-z{width:100%;box-sizing:border-box;min-height:110px;padding:10px 12px;border:1.5px solid var(--cf-line,#dfe7ec);
  border-radius:10px;background:#fff;font:500 13px/1.55 var(--font,system-ui,sans-serif);color:var(--cf-ink);resize:vertical}
.cf-rem-z:focus{outline:2px solid var(--accent-bright,#0BAE9F);outline-offset:1px;border-color:var(--accent-deep,#06747D)}
.cf-rem-b{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cf-rem-n{font:600 11px var(--font,system-ui,sans-serif);color:#4a6068}

/* ----- Section + alertes verre rouge ----- */
.cf-sect{font-size:13px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--cf-ink2);
  margin:0 0 12px 4px;display:flex;align-items:center;gap:10px;}
.cf-cnt{min-width:22px;height:22px;border-radius:999px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;background:linear-gradient(180deg,#F6B0A5,#E74C3C);
  animation:blink-glow-ko 2.4s ease-in-out infinite;}
.cf-alert{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(43,22,20,.92),rgba(30,16,15,.92));backdrop-filter:blur(6px);
  border:1.5px solid rgba(231,76,60,.35);border-radius:14px;
  box-shadow:0 12px 28px rgba(15,22,24,.30);
  padding:15px 20px 15px 24px;
  display:flex;align-items:flex-start;gap:16px;margin-bottom:14px;
}
.cf-alert::before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:3px;border-radius:3px;
  background:var(--cf-danger-b);box-shadow:0 0 14px var(--cf-danger-b);}
.cf-alert::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 100% at 8% 50%, rgba(231,76,60,.20) 0%, transparent 55%);}
.cf-aic{width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  color:#FFB3A8;background:rgba(255,255,255,.06);
  box-shadow:0 0 14px rgba(231,76,60,.4), inset 0 0 0 1.5px rgba(255,255,255,.10);position:relative;z-index:1;}
.cf-aic svg{width:18px;height:18px;}
.cf-atx{position:relative;z-index:1;flex:1;display:block;}
.cf-akey{display:block;font-size:14px;font-weight:800;color:#FFB3A8;letter-spacing:.5px;}
.cf-amsg{display:block;font-size:13px;color:#E8DCD9;margin-top:5px;line-height:1.5;}
.cf-alert .cf-hbtn{position:relative;z-index:1;flex:none;align-self:center;}
.cf-okempty{
  display:flex;align-items:center;gap:10px;
  background:#FFFFFF;border:1.5px solid var(--cf-line);border-radius:14px;
  box-shadow:0 8px 22px rgba(28,36,38,.16);
  padding:16px 20px;font-size:14px;font-weight:700;color:var(--accent-deep,#044a52);
}
.cf-okempty svg{width:18px;height:18px;color:var(--accent-bright,#0BAE9F);}

@media (max-width:1100px){
  .cf-kpis,.cf-grid{grid-template-columns:1fr;}
  .cf-grid{grid-template-areas:none;}
  /* 02/10/2026 — ET LES CARTES CESSENT DE RECLAMER UNE ZONE QUI N'EXISTE PLUS. Sans cette
     ligne, chacune gardait `grid-area: coord`, `loc`, `prod`… alors que les zones venaient
     d'etre effacees : le navigateur les empilait TOUTES dans la meme case, et une carte en
     recouvrait sept. Aucune erreur, aucun avertissement — seulement une fiche illisible entre
     380 et 1100 px, c'est-a-dire sur la moitie des ecrans. */
  .cf-grid > .cf-card{grid-area:auto;}
  .cf-band{flex-wrap:wrap;}
}

/* --- Interlocuteurs (carte Coordonnées) --- */
.cf-isep{display:flex;align-items:center;gap:7px;padding:13px 14px 8px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--cf-ink3);border-top:1px solid #E8ECEA;}
.cf-isep svg{width:13px;height:13px;}
.cf-irow{display:flex;align-items:center;gap:11px;padding:9px 11px;margin:0 14px 8px;border-radius:12px;background:linear-gradient(160deg,#f6faf9,#eef3f1);border:1.5px solid #E1EAE7;box-shadow:0 2px 7px rgba(20,40,60,.05);}
.cf-iav{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent-bright,#0BAE9F),var(--accent-deep,#044a52));box-shadow:0 4px 10px -4px var(--accent,#06747D);}
.cf-iv{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cf-in{font-size:13.5px;font-weight:800;color:var(--cf-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cf-il{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--cf-ink3);}
.cf-ic{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10.5px;font-weight:600;color:var(--cf-ink2,#5f6b78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.cf-ibtns{display:flex;gap:6px;flex:none;}
.cf-ib{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--accent-bright,#0BAE9F),var(--accent-deep,#044a52));box-shadow:0 4px 10px -4px var(--accent,#06747D);transition:filter .15s,transform .15s;}
.cf-ib:hover{filter:brightness(1.08);transform:translateY(-1px);}
.cf-ib svg{width:15px;height:15px;}
/* --- Pied de carte Coordonnées --- */
.cf-cfoot{margin-top:auto;display:flex;flex-wrap:wrap;gap:5px;padding:9px 14px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:10.5px;font-weight:700;color:var(--cf-ink3);background:var(--page-2,#f6f3ec);border-top:1px solid #E8ECEA;}
/* --- Tuile Tickets en cours --- */
.cf-tklist{flex:1;min-height:0;max-height:240px;overflow-y:auto;scrollbar-width:thin;padding:11px;display:flex;flex-direction:column;gap:8px;}
.cf-tk{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;background:#fff;border:1.5px solid #E2E7EE;box-shadow:0 2px 6px rgba(20,40,60,.05);text-decoration:none;position:relative;overflow:hidden;}
.cf-tk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tkc,#64748b);}
.cf-tkst{flex:none;font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#fff;background:var(--tkc,#64748b);padding:3px 8px;border-radius:999px;}
.cf-tkt{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--cf-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cf-tk--nouveau{--tkc:var(--violet,#7c5cf0);}.cf-tk--planifie{--tkc:var(--accent-deep,#044a52);}.cf-tk--en_cours{--tkc:var(--accent-bright,#0BAE9F);}
.cf-tk--resolu{--tkc:var(--green,#22c55e);}.cf-tk--a_facturer{--tkc:var(--orange,#f59f4d);}.cf-tk--facture{--tkc:#5b6068;}
/* --- Tuile Supervision : réutilise le composant .sup-page/.cbody/.dev (couleurs réelles du bundle). Layout seulement. --- */
.cf-card--superv .cf-card-b{padding:0;}
.cf-card--superv .sup-page{display:block;}
.cf-card--superv .sup-page .cbody{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));max-height:248px;}

/* =========================================================================
   FIN MODULE CLIENTS — FICHE
   ========================================================================= */
/* ============================================================ */
/* MODULE CLIENTS — LISTE PC (réécriture 2026-06-04, rév. 16:30) */
/* Verre dépoli sombre (KPI) · bloc clair repos (table)          */
/* Reset display table défensif · thead non sticky · zéro inline */
/* ============================================================ */
.cl-wrap{
  --cl-glass:rgba(22,30,32,.86);
  --cl-glass-line:rgba(255,255,255,.10);
  --cl-line:#C9CFCB;
  --cl-ink:#1C2426;
  --cl-ink2:#3A4548;
  --cl-ink3:#5C6B6E;
  --cl-amber:#D98E04;
  --cl-amber-b:#F2B33D;
  --cl-danger:#C0392B;
  --cl-danger-b:#E74C3C;
  --cl-violet:#7C5CBF;
  --cl-violet-b:#9D7FE0;
  --cl-blue:#3FA7E0;
  width:100%;
  padding:0 32px 48px;
}

/* ----- Zone sticky compactante ----- */
.cl-sticky{
  position:sticky;
  top:calc((var(--niv1-h,50px) + var(--niv2-h,36px)) / var(--zoom-page,1));
  z-index:40;
  /* 21/09 — bord à bord et collé au bloc de tête, comme .cf-sticky (la gouttière --sp-5 rendue, reprise en retrait) */
  margin:calc(-1 * var(--sp-5,20px)) calc(-32px - var(--sp-5,20px)) 0;
  padding:24px calc(32px + var(--sp-5,20px)) 14px;
  background-color:var(--sable,#F2EDE3);
  transition:padding .22s, box-shadow .22s;
}
.cl-sticky.is-compact{padding-top:10px;padding-bottom:10px;box-shadow:0 8px 20px rgba(28,36,38,.12);}

/* ----- KPI verre dépoli sombre ----- */
.cl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:18px;transition:gap .22s,margin .22s;}
.cl-kpi{
  position:relative;overflow:hidden;cursor:pointer;
  display:flex;align-items:center;gap:16px;text-align:left;
  background:var(--cl-glass);backdrop-filter:blur(6px);
  border:1.5px solid var(--cl-glass-line);border-radius:14px;
  padding:18px 20px 16px 24px;
  box-shadow:0 12px 28px rgba(15,22,24,.28);
  font-family:inherit;
  transition:transform .18s, box-shadow .18s, padding .22s, border-radius .22s, gap .22s;
}
.cl-kpi:hover{transform:translateY(-2px);}
.cl-kpi::before{
  content:"";position:absolute;left:0;top:10%;bottom:10%;width:3px;border-radius:3px;
  background:var(--cl-k);box-shadow:0 0 12px var(--cl-k);
}
.cl-kpi::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(120% 90% at 12% 50%, var(--cl-kh) 0%, transparent 55%);
}
.cl-kpi-ic{
  width:46px;height:46px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:21px;
  background:rgba(255,255,255,.06);
  box-shadow:0 0 16px var(--cl-kh), inset 0 0 0 1.5px rgba(255,255,255,.10);
  position:relative;z-index:1;
  transition:width .22s,height .22s,font-size .22s,border-radius .22s;
}
.cl-kpi-tx{position:relative;z-index:1;display:block;}
.cl-kpi-n{display:block;font-size:30px;font-weight:800;color:#FFFFFF;line-height:1;letter-spacing:.5px;transition:font-size .22s;}
.cl-kpi-l{display:block;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#AEBABD;margin-top:5px;transition:font-size .22s,margin .22s;}
.cl-kpi.k-em{--cl-k:var(--accent-bright,#0BAE9F);--cl-kh:rgba(11,174,159,.22);}
.cl-kpi.k-bl{--cl-k:var(--cl-blue);--cl-kh:rgba(63,167,224,.20);}
.cl-kpi.k-am{--cl-k:var(--cl-amber-b);--cl-kh:rgba(242,179,61,.20);}
.cl-kpi.k-vi{--cl-k:var(--cl-violet-b);--cl-kh:rgba(157,127,224,.20);}

/* État compact : mêmes cartes, barre fine */
.is-compact .cl-kpis{gap:14px;margin-bottom:12px;}
.is-compact .cl-kpi{padding:7px 14px 7px 18px;border-radius:10px;gap:10px;}
.is-compact .cl-kpi-ic{width:28px;height:28px;font-size:13px;border-radius:8px;}
.is-compact .cl-kpi-tx{display:flex;align-items:baseline;gap:8px;}
.is-compact .cl-kpi-n{font-size:17px;}
.is-compact .cl-kpi-l{margin-top:0;font-size:9.5px;letter-spacing:1px;}

/* ----- Toolbar ----- */
.cl-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.cl-search{
  flex:1;min-width:280px;display:flex;align-items:center;gap:10px;
  background:#FFFFFF;border:1.5px solid var(--cl-line);border-radius:999px;
  padding:10px 18px;box-shadow:0 3px 10px rgba(28,36,38,.08);
  transition:padding .22s;
}
.cl-search input{border:none;outline:none;flex:1;font-size:14px;background:transparent;color:var(--cl-ink);font-family:inherit;}
.cl-search input::placeholder{color:var(--cl-ink3);}
.cl-sel{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:#FFFFFF;border:1.5px solid var(--cl-line);border-radius:999px;
  padding:10px 16px;box-shadow:0 3px 10px rgba(28,36,38,.08);
  transition:padding .22s;
}
.cl-sel select{
  border:none;outline:none;background:transparent;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--cl-ink2);font-family:inherit;
}
.cl-chipf{
  border-radius:999px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;
  border:1.5px solid;background:#fff;display:flex;align-items:center;gap:7px;
  font-family:inherit;transition:all .18s, padding .22s;
}
.cl-chipf.f-am{border-color:var(--cl-amber);color:#8A5A02;}
.cl-chipf.f-am.on{background:linear-gradient(180deg,#FBE3B4,#F2C16B);color:#5C3B00;box-shadow:0 0 12px rgba(242,179,61,.4);}
.cl-chipf.f-em{border-color:var(--accent,#06747D);color:var(--accent-deep,#044a52);}
.cl-chipf.f-em.on{background:linear-gradient(180deg,#9FE3DB,#3FC2B4);color:#053A38;box-shadow:0 0 12px rgba(11,174,159,.4);}
.is-compact .cl-search,.is-compact .cl-sel,.is-compact .cl-chipf{padding-top:7px;padding-bottom:7px;}

/* ----- Table : bloc clair = repos, entête verre sombre ----- */
/* Reset défensif : neutralise toute règle globale display:block sur les tables */
.cl-card{
  background:#FFFFFF;
  border:1.5px solid var(--cl-line);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(28,36,38,.14);
  /* 14/09 — `clip` et non `hidden` : hidden fait de la carte le cadre de
     reference des position:sticky, et l'en-tete ne collerait jamais. */
  overflow:clip;
  margin-top:18px;
}
.cl-tbl{display:table;width:100%;border-collapse:collapse;table-layout:fixed;overflow:visible;max-height:none;}
.cl-tbl thead{display:table-header-group;}
.cl-tbl tbody{display:table-row-group;overflow:visible;max-height:none;}
.cl-tbl tr{display:table-row;}
.cl-tbl th,.cl-tbl td{display:table-cell;}
.cl-tbl colgroup{display:table-column-group;}
.cl-tbl col{display:table-column;}
.cl-tbl col.c-client{width:24%;}
.cl-tbl col.c-ville{width:18%;}
.cl-tbl col.c-parc{width:11%;}
.cl-tbl col.c-tickets{width:11%;}
.cl-tbl col.c-alertes{width:11%;}
.cl-tbl col.c-contrat{width:14%;}
.cl-tbl col.c-statut{width:11%;}

/* 14/09 (Miguël) — « cette zone de titres en sticky ». L'en-tête se colle sous
   la bande des compteurs (dont la hauteur, mesurée par le script, vit dans
   --cl-sticky-h). Fond plein : les lignes passent dessous, on ne doit pas les
   lire à travers. */
.cl-tbl thead th{
  position:sticky;top:calc((var(--niv1-h,50px) + var(--niv2-h,36px)) / var(--zoom-page,1) + var(--cl-sticky-h,0px));z-index:5;
  background:#1a2224;background:linear-gradient(180deg,#232c2f,#171e20);
  color:#D8E2E4;font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  text-align:left;padding:13px 16px;
  border-bottom:1.5px solid var(--accent-bright,#0BAE9F);
  cursor:pointer;user-select:none;white-space:nowrap;
}
.cl-tbl thead th.num{text-align:center;}
.cl-tbl thead th .cl-ar{color:var(--accent-bright,#0BAE9F);font-size:10px;margin-left:6px;}
.cl-tbl thead th.is-sorted{color:#FFFFFF;}

.cl-tbl tbody td{
  padding:10px 16px;font-size:13.5px;color:var(--cl-ink);
  border-bottom:1px solid #E8ECEA;vertical-align:middle;
}
.cl-tbl tbody td.num{text-align:center;}
.cl-row{height:46px;cursor:pointer;transition:background .15s;}
.cl-row:nth-child(even){background:#F4F6F5;}
.cl-row:hover{background:#E6F4F2;}
.cl-row td:first-child{border-left:3px solid transparent;}
.cl-row.r-al td:first-child{border-left-color:var(--cl-danger-b);}
.cl-row.r-al{background:#FBEFEC;}
.cl-row.r-al:nth-child(even){background:#F8E8E4;}
.cl-row.r-al:hover{background:#F6DFD9;}
.cl-row.is-hidden{display:none;}

.cl-nm{display:block;font-weight:700;color:var(--cl-ink);font-size:14px;text-decoration:none;}
.cl-nm:hover{color:var(--accent-deep,#06747D);text-decoration:underline;}
.cl-als{font-size:11.5px;color:var(--cl-ink3);margin-top:1px;}
/* 14/09 (Miguël) — la pastille « remarque » à côté du nom, ambre : quelque chose à lire sur la fiche. */
.cl-remq{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;
  border-radius:999px;background:#fff2e3;border:1px solid #e9bf94;color:#9a3412;font-size:11px;vertical-align:1px;cursor:help}
.cl-vl{font-weight:600;color:var(--cl-ink2);}
.cl-cp{font-size:11.5px;color:var(--cl-ink3);}
.cl-zero{color:#A8B0A9;font-weight:600;font-size:13px;}
.cl-empty{text-align:center;color:var(--cl-ink3);padding:32px 0;font-weight:600;}

.cl-b{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:24px;padding:0 9px;border-radius:999px;
  font-size:12.5px;font-weight:800;
}
.cl-b.b-parc{background:#E4EDEC;color:var(--accent-deep,#044a52);border:1.5px solid #B9D2CF;}
.cl-b.b-tick{background:linear-gradient(180deg,#C9EFE9,#8FD8CD);color:#053A38;box-shadow:0 0 8px rgba(11,174,159,.25);}
.cl-b.b-al{background:linear-gradient(180deg,#F6B0A5,#E74C3C);color:#fff;box-shadow:0 0 10px rgba(231,76,60,.45);animation:blink-text-ko 2.4s ease-in-out infinite;}
.cl-b.b-warn{background:linear-gradient(180deg,#F8D9A0,#E39A2B);color:#4a2c00;box-shadow:0 0 8px rgba(227,154,43,.35);}

.cl-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.5px;
  border:1.5px solid;
}
.cl-chip.ch-on{background:linear-gradient(180deg,#0BAE9F,#06747D);border-color:var(--accent-bright,#0BAE9F);color:#fff;box-shadow:0 0 8px rgba(11,174,159,.35);}
.cl-chip.ch-pr{background:#F1ECFA;border-color:var(--cl-violet);color:#4A3578;}
.cl-chip.ch-hc{background:#fff;border-color:#B7BFC1;color:var(--cl-ink3);}

.cl-dot{width:11px;height:11px;border-radius:50%;display:inline-block;}
.cl-dot.d-ok{background:var(--accent-bright,#0BAE9F);box-shadow:0 0 8px rgba(11,174,159,.6);}
.cl-dot.d-crit{background:var(--cl-danger-b);animation:blink-glow-ko 2.4s ease-in-out infinite;}
.cl-dot.d-new{background:var(--cl-violet-b);box-shadow:0 0 8px rgba(157,127,224,.6);}
.cl-dot.d-off{background:#C4CCC6;}
/* etape 1 supervision (19/08/2026) : etat « alerte » du moteur unique */
.cl-dot.d-warn{background:#E39A2B;box-shadow:0 0 8px rgba(227,154,43,.55);}

.cl-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;background:var(--cl-glass);color:#AEBABD;font-size:12.5px;font-weight:600;
  border-top:1.5px solid var(--cl-glass-line);
}
.cl-foot b{color:#fff;}

@media (max-width:1100px){
  .cl-kpis{grid-template-columns:repeat(2,1fr);}
}
/* ============================================================ */
/* FIN MODULE CLIENTS — LISTE PC                                 */
/* ============================================================ */
/* =========================================================================
   MODULE CLIENTS — PARC & SUPERVISION (réécriture 2026-06-04, charte verre)
   Corps de carte BLANC FRANC (repos) + en-tête verre sombre + liseré néon
   gravité. Jauges rendues par parc_helpers.php (classes cl-ind / cl-c-*).
   Zéro inline. Préfixe cl-.
   ========================================================================= */

/* couleurs d'état (valeurs texte des jauges + chips) — consommées par helpers */
.cl-c-ok{color:#0e9b6c}
.cl-c-warn{color:#d6902a}
.cl-c-crit{color:#c0392b}
.cl-c-na{color:#8a94a0}
.cl-c-info{color:#1d4ed8}

.cl-parc-hd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
/* 11/09 — l'installeur de l'agent, en tête du parc, à droite. Même forme que le
   bouton Rapport de la supervision : émeraude, un lien qui télécharge. */
.cl-parc-agent{margin-left:auto;background:rgba(11,174,159,.12);border:1px solid rgba(11,174,159,.32);
  color:#0BAE9F;border-radius:7px;padding:4px 11px;font-size:12px;font-weight:700;white-space:nowrap;text-decoration:none}
.cl-parc-agent:hover{background:rgba(11,174,159,.2);color:#0BAE9F}
.cl-parc-auto{font-size:11px;font-weight:700;color:#044a52;background:rgba(11,174,159,.14);border:1px solid rgba(6,116,125,.4);border-radius:999px;padding:4px 12px;display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.cl-parc-auto svg{width:13px;height:13px}

/* en-tête de groupe (Serveurs & NAS / Postes) */
.cl-psec::before{content:"";width:4px;height:15px;border-radius:3px;background:#0BAE9F;
  box-shadow:0 0 8px rgba(11,174,159,.55)}
.cl-psec .cl-psec-n{border:1.5px solid rgba(6,116,125,.35);background:rgba(11,174,159,.12);
  border-radius:999px;padding:1px 9px;color:#044a52}
.cl-psec{display:flex;align-items:center;gap:8px;margin:16px 0 10px 4px;
  font-size:12.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#3A4548}
.cl-psec-n{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:none;color:#5C6B6E}
.cl-psec:first-of-type{margin-top:4px}

.cl-parc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ----- carte machine : corps blanc, en-tête verre, liseré néon gravité ----- */
.cl-pc{position:relative;overflow:hidden;border-radius:13px;border:1.5px solid #BFC8C4;
  background:#FFFFFF;display:flex;flex-direction:column;
  box-shadow:0 10px 26px rgba(28,36,38,.16)}
.cl-pc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;z-index:2;
  background:var(--pc-mk,#0BAE9F);box-shadow:0 0 14px var(--pc-mk,#0BAE9F),0 0 4px var(--pc-mk,#0BAE9F)}
.cl-pc.lv-green{--pc-mk:#0BAE9F}
.cl-pc.lv-blue{--pc-mk:#2563eb}
.cl-pc.lv-orange{--pc-mk:#F2B33D}
.cl-pc.lv-red{--pc-mk:#E74C3C}
.cl-pc.lv-red::before{animation:blink-glow-ko 2.4s ease-in-out infinite}
.cl-pc.lv-grey{--pc-mk:#9AA5A7}

.cl-pch{display:flex;align-items:center;gap:9px;padding:7px 12px 7px 15px;
  background:rgba(22,30,32,.88);border-bottom:1.5px solid var(--pc-mk,#0BAE9F)}
.cl-picon{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;
  background:rgba(255,255,255,.06);box-shadow:0 0 12px var(--pc-mk,#0BAE9F),inset 0 0 0 1.5px rgba(255,255,255,.10)}
.cl-picon svg{width:14px;height:14px}
.cl-picon--srv svg{color:#9D7FE0}
.cl-picon--nas svg{color:#4FC3F7}
.cl-pt{flex:1;min-width:0}
.cl-pnm{display:flex;align-items:center;gap:6px}
.cl-pnm b{font-size:13px;font-weight:800;color:#FFFFFF;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-ed{width:17px;height:17px;border-radius:5px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#C9D2D4;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.cl-ed:hover{border-color:#0BAE9F;color:#fff}
.cl-ed svg{width:9px;height:9px}
.cl-usr{display:inline-flex;align-items:center;gap:4px}
/* libelle personnalise (postes_labels) : dore = nom donne par l'humain (meme registre que le nom client) */
.cl-pnm b.cl-usr-custom{color:#E8C254} /* selecteur renforce : doit battre .cl-pnm b (specificite) */
/* 01/09/2026 — CRAYON AMBRE : « il manque un nom ici ».
   Un serveur ou un NAS n'a jamais de session ouverte : sans petit nom, sa carte
   n'affiche qu'un code qui ne designe rien au telephone. 58 des 64 serveurs et
   NAS du parc sont dans ce cas. L'ambre #f0b46b est celui de .tprov.t-machine —
   dans ce produit il dit « il y a quelque chose a faire ici », jamais « c'est
   casse ». Aucun rouge, aucun blocage : les noms se posent au fil de l'eau. */
.cl-ed.cl-ed-manque{border-color:#f0b46b;color:#f0b46b;background:rgba(240,180,107,.12)}
.cl-ed.cl-ed-manque:hover{border-color:#f0b46b;color:#fff;background:rgba(240,180,107,.30)}
.cl-host{font-family:ui-monospace,monospace;font-size:9.5px;color:#AEBABD;display:flex;align-items:center;gap:4px;margin-top:1px}
.cl-host svg{width:10px;height:10px}
.cl-st{font-size:9.5px;font-weight:800;border-radius:999px;padding:3px 9px;display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;color:#fff;border:1.5px solid transparent}
.cl-st svg{width:11px;height:11px}
.cl-st--ok{background:linear-gradient(135deg,#0BAE9F,#06747D);border-color:rgba(11,174,159,.7);box-shadow:0 0 8px rgba(11,174,159,.4)}
.cl-st--offline{background:linear-gradient(135deg,#E74C3C,#C0392B);border-color:rgba(231,76,60,.7);animation:blink-glow-ko 2.4s ease-in-out infinite}
/* 18/09 — les deux états intermédiaires de la supervision, mêmes mots, mêmes seuils : éteint (gris), muet (orange). */
.cl-st--eteint{background:linear-gradient(135deg,#6b7280,#4b5563);border-color:rgba(107,114,128,.7)}
.cl-st--muet{background:linear-gradient(135deg,var(--tk-prevoir-b,#ea7f1b),var(--tk-prevoir,#9a3f06));border-color:rgba(234,127,27,.7)}

/* panneau télémétrie : 4 cadrans + séparateurs froids, sur corps blanc */
/* 16/09 (Miguël) — LA SEMAINE EN CHIFFRES, sous les jauges : CPU et RAM, part des
   relevés au-dessus du seuil sur 7 jours. Sobre ; « charge chronique » en orange. */
.cl-semaine{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:-3px 10px 8px;
  font:600 11px var(--font,system-ui,sans-serif);color:#4a6068}
.cl-sem-t{font:800 9.5px var(--font,system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#5A6B7A}
.cl-sem-m b{font-weight:800;color:#1A2430}
.cl-sem-m.chronique{color:#8a4308}
.cl-sem-m.chronique b{color:#8a4308}
.cl-sem-m.chronique-info{color:#1e4fa8}
.cl-sem-m.chronique-info b{color:#1e4fa8}
.cl-tel{display:flex;background:#F7F9F8;border:1px solid #E8ECEA;border-radius:10px;margin:9px 10px 8px;overflow:hidden}
.cl-ind{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 0;position:relative}
.cl-ind+.cl-ind::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:#E8ECEA}
.cl-ind-g{width:100%;min-height:30px;display:flex;align-items:center;justify-content:center}
.cl-ind-svg{display:block}
.cl-ind-wide{width:100%;max-width:74px;height:auto}
.cl-ind-tall{width:auto;height:32px}
.cl-ind-v{font-size:11.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cl-ind-l{font-size:7.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#5C6B6E;line-height:1}

/* ligne d'état */
/* teinte de la pilule selon la nature portee par le texte (maquette validee 04/06) */

/* matrice 2x3 : 6 badges identiques, sans intitule (regle de couleur systematique 05/06) */
.cl-mx{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 8px;padding:8px 12px 11px;margin-top:auto;border-top:1px solid #E8ECEA}
.cl-cv{display:flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:999px;min-width:0;
  font-size:10px;font-weight:800;border:1.5px solid #CCD4D0;background:#F2F5F4;color:#1C2426}
.cl-cv span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-cv svg{width:12px;height:12px;flex:0 0 auto;color:#5C6B6E}
.cl-cv.v-ok{border-color:#B9D2CF;background:#E0F2F0;color:#044a52}
.cl-cv.v-ok svg{color:#044a52}
.cl-cv.v-warn{border-color:#D98E04;background:#FBE9C8;color:#7A4E02}
.cl-cv.v-warn svg{color:#8A5A02}
/* 16/09 (Miguël) — le triangle jaune : processeur non compatible Windows 11. */
.cl-cv .cl-tri{font-style:normal;font-size:11px;line-height:1;color:#D98E04;margin-left:2px;
  text-shadow:0 0 1px #7A4E02}
.cl-cv.cl-w11non{border-color:#D98E04;background:#FFF3CF}
.cl-cv.v-crit{border-color:#C0392B;background:#F8DCD6;color:#8E2418}
.cl-cv.v-crit svg{color:#C0392B}
.cl-cv.v-info{border-color:#93B4F5;background:#E3ECFB;color:#1d4ed8}
.cl-cv.v-info svg{color:#1d4ed8}
.cl-cv.v-na{border-color:#D5DAD7;background:#F4F6F5;color:#8C958F}
.cl-cv.v-na svg{color:#8C958F}
@media (max-width:680px){ .cl-mx{grid-template-columns:1fr 1fr} }

/* adaptation mobile (<=520px) : tuiles empilees, jauges compactees, memes instruments */
@media (max-width:520px){
  .cl-parc-grid{grid-template-columns:1fr;gap:10px}
  .cl-mx{grid-template-columns:1fr 1fr;gap:5px 7px;padding:7px 10px 10px}
  .cl-mg{padding:8px 8px 6px;gap:2px}
  .cl-mg svg{max-width:64px;height:auto}
  .cl-thermo{height:34px}
  .cl-gv{font-size:11.5px}
  .cl-pnm{font-size:13px}
}

@media (max-width:1500px){ .cl-parc-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1100px){ .cl-parc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .cl-parc-grid{grid-template-columns:1fr} }

/* ===== GED — module Documents (squelette POSE-37, maquette v9 validée) =====
   Préfixe gd- (aucune collision). Codes : bandeau KPI+outils STICKY sous le
   shell ; arbre clients/familles en verre sombre néon ; corps de liste verre
   sombre ; tuiles documents claires à liseré néon par catégorie. */
.gd-stick{position:sticky;top:100px;z-index:40;margin:0 0 14px;padding:14px 0 4px;
  background:linear-gradient(180deg,var(--sand, #F4EFE4) 78%,rgba(244,239,228,0))}
.gd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.gd-kpi{position:relative;border-radius:13px;padding:10px 14px;overflow:hidden;display:flex;align-items:center;gap:12px;
  background:linear-gradient(160deg,rgba(34,42,50,.92),rgba(20,24,29,.96));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 3px 0 0 var(--c),0 12px 28px -14px rgba(4,74,82,.5)}
.gd-kpi::before{content:"";position:absolute;left:-26px;top:-26px;width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,var(--c),transparent 70%);opacity:.2;filter:blur(8px)}
.gd-kpi .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--c);flex:none;
  background:rgba(255,255,255,.06);box-shadow:0 0 14px -5px var(--c)}
.gd-kpi .ic svg{width:15px;height:15px}
.gd-kpi .v{font:800 20px/1 var(--font,system-ui,-apple-system,sans-serif);color:#fff;letter-spacing:-.4px}
.gd-kpi .l{font:600 11px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.55);margin-top:3px}
.gd-kpi .pulse{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--c);animation:gd-ping 1.8s infinite}
@keyframes gd-ping{0%{box-shadow:0 0 0 0 rgba(232,194,84,.5)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.gd-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gd-search{flex:1;min-width:260px;display:flex;align-items:center;gap:10px;height:44px;padding:0 15px;border-radius:13px;
  background:rgba(255,255,255,.94);border:1px solid rgba(11,174,159,.45);
  box-shadow:0 0 14px -6px var(--accent-bright,#0BAE9F),0 6px 18px -10px rgba(4,74,82,.3)}
.gd-search:focus-within{border-color:var(--accent-bright,#0BAE9F);
  box-shadow:0 0 0 3px rgba(11,174,159,.25),0 0 20px -5px var(--accent-bright,#0BAE9F)}
.gd-search svg{width:17px;height:17px;color:#8a94a0;flex:none}
.gd-search input{border:0;outline:0;flex:1;font:500 14px var(--font,system-ui,-apple-system,sans-serif);background:transparent;color:#1b2228}
.gd-chip{border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.85);color:#3a464f;font:700 12.5px var(--font,system-ui,-apple-system,sans-serif);
  padding:9px 15px;border-radius:22px;cursor:pointer;text-decoration:none}
.gd-chip.is-on{background:linear-gradient(180deg,#06747D,#044a52);color:#fff;border-color:transparent;
  box-shadow:0 6px 16px -6px #0BAE9F}
.gd-dep{border:0;border-radius:13px;font:700 13.5px var(--font,system-ui,-apple-system,sans-serif);padding:0 18px;height:44px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#06747D,#044a52);color:#fff;
  box-shadow:0 8px 22px -8px #0BAE9F}
.gd-dep:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.gd-dep svg{width:16px;height:16px}
.gd-explorer{display:grid;grid-template-columns:272px minmax(0,1fr);gap:18px;align-items:start}
.gd-pane{border-radius:18px;overflow:hidden;position:relative;
  background:linear-gradient(170deg,rgba(34,42,50,.94),rgba(20,24,29,.97));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 3px 0 0 #0BAE9F,0 22px 50px -22px rgba(4,74,82,.6)}
.gd-pane-h{padding:15px 17px 12px;font:800 11px var(--font,system-ui,-apple-system,sans-serif);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px}
.gd-pane-h .led{width:7px;height:7px;border-radius:50%;background:#0BAE9F;box-shadow:0 0 8px #0BAE9F}
.gd-tree{padding:10px 9px 12px}
.gd-tree-empty{padding:14px 12px;font:600 12.5px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.4)}
.gd-cli{display:flex;align-items:center;gap:10px;padding:11px;border-radius:11px;text-decoration:none;
  font:700 14px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.78)}
.gd-cli:hover{background:rgba(255,255,255,.05);color:#fff}
.gd-cli.is-on{background:linear-gradient(90deg,rgba(11,174,159,.18),rgba(11,174,159,.04));color:#E8C254;
  box-shadow:inset 3px 0 0 #0BAE9F,0 0 22px -8px #0BAE9F}
.gd-cli svg{width:19px;height:19px;color:#E8C254;flex:none}
.gd-cli .n{margin-left:auto;font:700 11px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.35)}
.gd-cats{margin:4px 4px 10px 19px;padding-left:13px;border-left:1px solid rgba(11,174,159,.25)}
.gd-grp{font:800 9px var(--font,system-ui,-apple-system,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.32);
  padding:9px 10px 4px;display:flex;align-items:center;gap:7px}
.gd-grp::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.08)}
.gd-cat{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;text-decoration:none;
  color:rgba(255,255,255,.62);font:600 12.5px var(--font,system-ui,-apple-system,sans-serif)}
.gd-cat:hover{background:rgba(255,255,255,.06);color:#fff}
.gd-cat.is-on{color:#fff;background:rgba(6,116,125,.35);box-shadow:0 0 14px -6px #0BAE9F}
.gd-cat .d{width:9px;height:9px;border-radius:3px;flex:none;background:var(--cc);box-shadow:0 0 7px var(--cc)}
.gd-cat .n{margin-left:auto;font:700 10.5px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.35)}
/* Lignes de dossier (page /documents globale uniquement) : colonnes alignées icône / numéro / nom.
   Classes enfants ADDITIONNELLES de .gd-cat. La fiche client utilise les mêmes .gd-cat mais SANS
   ces enfants -> elle reste strictement inchangée. Largeurs fixes => tout s'aligne verticalement. */
.gd-cat .gd-ic{flex:none;width:20px;text-align:center;font-size:14px;line-height:1}
.gd-cat .gd-num{flex:none;width:20px;text-align:right;font:700 11.5px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.gd-cat .gd-rn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-cat.is-on .gd-num{color:#f0d9a8}
.gd-list{border-radius:18px;overflow:hidden;
  background:linear-gradient(170deg,rgba(34,42,50,.93),rgba(20,24,29,.96));
  border:1px solid rgba(255,255,255,.07);box-shadow:0 22px 50px -24px rgba(4,74,82,.6)}
.gd-list-h{display:flex;align-items:baseline;gap:10px;padding:14px 18px;
  background:linear-gradient(180deg,#fff,#f6f2e9);border-bottom:1px solid rgba(0,0,0,.1)}
.gd-list-h .t{font:800 14.5px var(--font,system-ui,-apple-system,sans-serif);color:#1b2228}
.gd-list-h .t b{color:#044a52}
.gd-list-h .cnt{margin-left:auto;font:600 12px var(--font,system-ui,-apple-system,sans-serif);color:#8a94a0}
.gd-list-b{padding:14px 14px 6px}
.gd-doc{position:relative;display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:10px;
  border-radius:14px;text-decoration:none;background:#fff;border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 3px 0 0 var(--c),0 0 22px -12px var(--c),0 12px 26px -14px rgba(0,0,0,.55);transition:.18s}
.gd-doc:hover{transform:translateX(4px);
  box-shadow:inset 3px 0 0 var(--c),0 0 0 1.5px var(--c),0 0 34px -8px var(--c),0 16px 34px -14px rgba(0,0,0,.6)}
.gd-doc .fic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  font:800 10.5px var(--font,system-ui,-apple-system,sans-serif);letter-spacing:.04em;color:var(--c);background:rgba(0,0,0,.04);
  box-shadow:inset 0 0 0 1.5px var(--c),0 0 14px -6px var(--c)}
.gd-doc .fmeta{flex:1;min-width:0;display:block}
.gd-doc .fnm{display:block;font:700 14px var(--font,system-ui,-apple-system,sans-serif);color:#1b2228;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-doc .fsub{display:flex;align-items:center;gap:7px;font:600 12px var(--font,system-ui,-apple-system,sans-serif);color:#8a94a0;margin-top:3px}
.gd-doc .f7k{font-style:normal;color:#044a52;background:rgba(6,116,125,.08);padding:1px 7px;border-radius:6px;
  font-size:11px;font-weight:700}
.gd-doc .fbadge{font:800 10.5px var(--font,system-ui,-apple-system,sans-serif);letter-spacing:.04em;padding:5px 11px;border-radius:20px;
  white-space:nowrap;color:var(--c);background:rgba(0,0,0,.035);box-shadow:inset 0 0 0 1px var(--c)}
.gd-empty{padding:46px 20px;text-align:center;color:rgba(255,255,255,.55)}
.gd-empty svg{width:42px;height:42px;color:rgba(255,255,255,.25);margin-bottom:12px}
.gd-empty .e1{font:800 15px var(--font,system-ui,-apple-system,sans-serif);color:rgba(255,255,255,.8)}
.gd-empty .e2{font:600 12.5px var(--font,system-ui,-apple-system,sans-serif);max-width:420px;margin:6px auto 0;line-height:1.6}
@media(max-width:1100px){.gd-explorer{grid-template-columns:1fr}.gd-kpis{grid-template-columns:repeat(2,1fr)}}

/* ===== ETATS SYSTEME (partagé PC + mobile) — pages d'erreur, vides, espacements =====
   Bloc partagé : doit rester OCTET-IDENTIQUE dans 7000pro.css et 7000pro-mobile.css
   (vérifié par l'audit-socle, famille D). Absorbe les derniers styles inline (POSE-36). */
.empty{max-width:560px;margin:60px auto}
.mc-empty{display:none} /* état initial ; mobile-clients.js le révèle quand 0 résultat */
.blk-grid + .blk-grid{margin-top:16px} /* espacement entre rangées de blocs (Accueil) */

/* === GED — Onglet Documents fiche client (PC) : mise en page 3 colonnes (app-shell) ===
   Zone de hauteur fixe sous les en-têtes : Catégories (gauche) et Aperçu (droite) restent
   IMMOBILES ; SEULE la liste du milieu défile (à l'intérieur de sa carte). Aucun position:sticky.
   La hauteur exacte de la zone est mesurée par le script du partiel (position du bloc dans le
   document, puis 100vh moins cette hauteur). Le repli CSS ci-dessous est volontairement un peu
   court (jamais trop haut) pour ne rien rogner si le script ne tourne pas. Sur cet onglet, la
   PAGE ne défile pas (l'explorer est autonome) : on neutralise le défilement parasite causé par
   l'espace résiduel sous <main>. Sous 1100px : une colonne + aperçu en surimpression au clic.
   Remplace l'ancien bloc — doctrine ZÉRO PATCH (bloc entier, borné par commentaires). */
.gd-explorer--fiche{
  grid-template-columns:272px minmax(0,1fr) minmax(420px,1.15fr);
  align-items:stretch;
  height:calc(100vh - 320px);   /* repli prudent ; valeur exacte posée par le script du partiel */
  min-height:420px;
}

/* Onglet Documents : la page ne défile pas (zone autonome avec défilement interne de la liste).
   Ciblé uniquement quand l'explorer fiche est présent → n'affecte aucune autre page. >1100px only. */
@media(min-width:1101px){
  html:has(.gd-explorer--fiche),
  body:has(.gd-explorer--fiche){overflow:hidden}
}

/* Col 1 — Catégories : la LISTE d'abord, les formulaires ensuite, et c'est la COLONNE qui défile.
   01/10/2026 (Miguël : « la zone de filtre des documents est maintenant masquée »).
   Mesuré : la colonne fait 100vh − 320 px ; l'installeur antivirus (posé le 25/09) et le dépôt
   de document occupent à eux deux près de sept cents pixels. L'arbre des catégories était le
   SEUL élément capable de rétrécir — flex:1 avec overflow:auto, donc un plancher de zéro — et
   il est tombé à ZÉRO. Le titre « Catégories » restait affiché au-dessus du vide : aucun
   message, aucun trait, rien à cliquer. Un filtre invisible se lit comme un filtre supprimé.
   Désormais l'arbre prend sa taille naturelle et ne rétrécit plus ; ce qui déborde se rejoint
   en faisant défiler la colonne. Plus rien ne peut être écrasé, quelle que soit la hauteur de
   l'écran — ce qui était le vrai défaut : la mise en page tenait sur une hypothèse de taille. */
.gd-explorer--fiche .gd-pane{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.gd-explorer--fiche .gd-pane-h{flex:none}
.gd-explorer--fiche .gd-tree{flex:0 0 auto;overflow:visible}
.gd-explorer--fiche .gd-tree::-webkit-scrollbar{width:8px}
.gd-explorer--fiche .gd-tree::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px}

/* Col 2 — Liste : SEULE colonne qui défile (en-tête figé en haut de la carte, corps défilant) */
.gd-explorer--fiche .gd-list{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.gd-explorer--fiche .gd-list-h{flex:none}
.gd-explorer--fiche .gd-list-b{flex:1;overflow-y:auto;scrollbar-width:thin}
.gd-explorer--fiche .gd-list-b::-webkit-scrollbar{width:9px}
.gd-explorer--fiche .gd-list-b::-webkit-scrollbar-thumb{background:rgba(11,174,159,.45);border-radius:9px;border:2px solid transparent;background-clip:padding-box}

/* Document sélectionné (lié à l'aperçu de droite) */
.gd-explorer--fiche .gd-doc.is-sel{box-shadow:inset 3px 0 0 var(--c),0 0 0 2px var(--c),0 0 30px -8px var(--c),0 14px 30px -14px rgba(0,0,0,.6)}

/* Col 3 — Aperçu : pleine hauteur ; seul l'intérieur (la feuille) défile si le document est long */
.gd-explorer--fiche .gd-preview{display:flex;flex-direction:column;min-height:0;border-radius:18px;overflow:hidden;
  background:#fbf8f1;border:1px solid #dcd2bf;box-shadow:0 8px 22px rgba(8,30,33,.14)}
.gd-prev-tb{flex:none;display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:linear-gradient(180deg,#fff,#faf5ea);border-bottom:1px solid #dcd2bf}
.gd-prev-ti{min-width:0;flex:1}
.gd-prev-ti h3{margin:0;font:800 14px var(--font,system-ui,-apple-system,sans-serif);color:#12282c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-prev-sub{font:600 11.5px var(--font,system-ui,-apple-system,sans-serif);color:#3c5559;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-prev-acts{display:flex;gap:8px;flex:none}
.gd-btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:10px;
  padding:9px 14px;font:700 12.5px var(--font,system-ui,-apple-system,sans-serif);cursor:pointer;text-decoration:none}
.gd-btn svg{width:15px;height:15px}
.gd-btn-dl{background:linear-gradient(180deg,#06747D,#044a52);color:#fff;box-shadow:0 6px 16px -6px #0BAE9F}
/* 14/09 — Envoyer est actif : turquoise quand un document est affiché, éteint sinon. */
.gd-envoi{display:flex;align-items:center;gap:6px}
.gd-envoi-a{max-width:210px;padding:6px 8px;border:1.5px solid #cfdbe1;border-radius:8px;font:600 11.5px var(--font,system-ui,sans-serif);color:#12262b;background:#fff}
.gd-btn-send{background:var(--accent-deep,#06747D);color:#fff;cursor:pointer;border:0}
.gd-btn-send.is-disabled,.gd-btn-send:disabled{background:#ece3d2;color:#9b8a63;cursor:not-allowed}
.gd-btn-send .soon{font:800 9px var(--font,system-ui,-apple-system,sans-serif);background:rgba(201,162,75,.25);color:#7a6a45;border-radius:6px;padding:1px 6px;margin-left:3px}
.gd-btn-open{background:#fff;color:#044a52;border:1px solid #dcd2bf;padding:9px 11px}
.gd-btn-close{display:none;background:#fff;color:#3c5559;border:1px solid #dcd2bf;padding:9px 11px}
.gd-btn.is-disabled{opacity:.4;pointer-events:none}
.gd-prev-area{flex:1;min-height:0;position:relative;overflow:auto;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.012),rgba(0,0,0,.012) 14px,transparent 14px,transparent 28px)}
/* IMPORTANT : ce masquage doit l'emporter sur les display:flex/block ci-dessous,
   sinon l'attribut hidden est ignoré et les blocs se superposent. */
.gd-prev-area [hidden]{display:none}
.gd-prev-frame{width:100%;height:100%;border:0;display:block;background:#fff}
.gd-prev-empty,.gd-prev-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px;color:#3c5559}
.gd-prev-empty svg,.gd-prev-fallback svg{width:46px;height:46px;color:#9aa6a4}
.gd-prev-empty .e1,.gd-prev-fallback .e1{font:800 14px var(--font,system-ui,-apple-system,sans-serif);color:#12282c}
.gd-prev-empty .e2,.gd-prev-fallback .e2{font:500 12.5px var(--font,system-ui,-apple-system,sans-serif);max-width:280px;line-height:1.5}

/* ≤1100px : pile (Catégories + Liste, défilement de page normal), aperçu en surimpression au clic */
@media(max-width:1100px){
  .gd-explorer--fiche{grid-template-columns:1fr;height:auto;min-height:0}
  .gd-explorer--fiche .gd-tree{overflow:visible}
  .gd-explorer--fiche .gd-list{overflow:visible}
  .gd-explorer--fiche .gd-list-b{overflow:visible}
  .gd-explorer--fiche .gd-preview{position:fixed;inset:0;z-index:80;border-radius:0;
    transform:translateY(100%);transition:transform .25s ease;visibility:hidden}
  .gd-explorer--fiche .gd-preview.is-open{transform:none;visibility:visible}
  .gd-btn-close{display:inline-flex}
}
/* === fin bloc Documents 3 colonnes === */

/* >>> SUPERVISION (page /supervision) — habillage transposé de la maquette validée 2026-06-09, isolé sous .sup-page. Bloc borné : remplacement net. <<< */
.sup-page{--accent:#06747D; --accent-bright:#0BAE9F; --accent-deep:#044a52;
  --or-1:#f5d370; --or-2:#e8c76a; --or-3:#c9a247; --or-edge:#b88e35;
  --page-1:#ffffff; --page-2:#f6f3ec;
  --bar-1:#5b6068; --bar-2:#3c4047; --bar-3:#2a2d34;
  --red:#ef4444; --orange:#f59f4d; --green:#22c55e; --blue:#5e8df5; --violet:#7c5cf0;
  --tx-dark:#1a1f2e; --tx-on-bar:#f0f3fa; --tx-on-bar-2:rgba(255,255,255,.62);
  --r-lg:14px; --r-pill:99px; --niv1-h:50px; --niv2-h:36px;
  --font:'Plus Jakarta Sans','DM Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;}
.sup-page .niv1-right{display:flex;align-items:center;gap:10px;margin-left:auto}
/* 21/09 (Miguël : « la barre ne touche même pas les bords », puis « contrôlées sur l'ensemble du site ») — la barre
   contextuelle (supervision, facturation, interventions) va d'un bord à l'autre de la page, touche le bloc de tête au
   repos, s'enroule sur deux lignes quand la place manque au lieu de couper. Hauteur libre : la règle générale .niv2
   la figeait à 36 px. */
.sup-page .niv2{position:sticky;top:calc((var(--niv1-h,50px) + var(--niv2-h,36px)) / var(--zoom-page,1));z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:10px;row-gap:6px;
  height:auto;min-height:var(--niv2-h);margin:calc(-1 * var(--sp-5,20px)) calc(-1 * var(--sp-5,20px)) 0;padding:6px calc(var(--sp-5,20px) + 14px) 7px;
  background:linear-gradient(180deg,#3c4047 0%,#2a2d34 100%);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.sup-page .sup-label{font:600 10px var(--mono,ui-monospace,SFMono-Regular,monospace);color:var(--or-2);letter-spacing:.12em;text-transform:uppercase}
.sup-page .sup-search{display:flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:7px;width:240px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
.sup-page .sup-search input{background:none;border:none;color:#fff;font:500 12px var(--mono,ui-monospace,SFMono-Regular,monospace);outline:none;width:100%}
.sup-page .sup-search input::placeholder{color:#c2cad6}
.sup-page .sup-pills{grid-template-columns:repeat(6,1fr);}
.sup-page #pills{justify-content:flex-start}
.sup-page #pills .pill{margin:0;float:none}
.sup-page .ctx{font:700 11px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-on-bar-2);white-space:nowrap}
.sup-page .pill{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);font:700 11px var(--font,system-ui,-apple-system,sans-serif);color:#fff;border:1px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap}
.sup-page .pill .n{font-variant-numeric:tabular-nums;opacity:.92;font-family:var(--mono,ui-monospace,SFMono-Regular,monospace)}
.sup-page .pill:hover{filter:brightness(1.08)}
.sup-page .pill.is-off{background:rgba(255,255,255,.06);color:var(--tx-on-bar-2);border-color:rgba(255,255,255,.10)}
.sup-page .pill.all{background:#e8e8ee;color:#1a1a28}
.sup-page .pill.err{background:var(--red,#ef4444)}
.sup-page .pill.warn{background:var(--orange,#f59f4d)}
.sup-page .pill.info{background:var(--blue,#5e8df5)}
.sup-page .pill.ok{background:var(--green,#22c55e)}
.sup-page .pill.empty{background:#cbd5e1;color:#1a1f2e}

.sup-page .pill.obsolete{background:#ea580c}
.sup-page .pill.active{box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 10px rgba(255,255,255,.15);font-weight:800}
.sup-page .niv2-right{display:flex;align-items:center;gap:12px;margin-left:auto}

.sup-page .sc{display:flex;flex-direction:column;align-items:flex-start;padding:0 11px;border-left:1px solid rgba(255,255,255,.12)}
.sup-page .sc:first-child{border-left:none}
.sup-page .sc .v{font:800 15px var(--font,system-ui,-apple-system,sans-serif);line-height:1;letter-spacing:-.02em}
.sup-page .sc .l{font:600 8px var(--mono,ui-monospace,SFMono-Regular,monospace);color:var(--tx-on-bar-2);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.sup-page .live{display:flex;align-items:center;gap:6px;font:600 10px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#bcd2cf}
.sup-page .live .d{width:7px;height:7px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 8px var(--accent-bright);animation:liveblink 2s infinite}
@keyframes liveblink{
50%{opacity:.3}
}
.sup-page .maj{font:500 10px var(--mono,ui-monospace,SFMono-Regular,monospace);color:rgba(255,255,255,.45)}
/* 27/08/2026 — CADRAN DE FRAÎCHEUR. Même famille que .live et .maj (var(--mono,ui-monospace,SFMono-Regular,monospace),
   10px, même gris) : il appartient à la même phrase, pas à la barre de filtres.
   Sans couleur d'alarme — le motif est écrit dans la vue.
   DEUX FORMES, mesurées au banc : sous 1500 px la zone de droite manquait de
   58 px, le cadran était rogné de 59 px — « MAJ » y valait déjà 27 px AVANT le cadran (témoin mesuré). C'est donc le
   cadran qui cède, et la gouttière avec lui. Jamais ses voisins. */
.sup-page .frais{font:500 10px var(--mono,ui-monospace,SFMono-Regular,monospace);color:rgba(255,255,255,.45);white-space:nowrap;flex:0 0 auto}
.sup-page .frais b{font-weight:800;color:rgba(255,255,255,.82)}
.sup-page .frais.vide{color:rgba(255,255,255,.34);font-style:italic}
.sup-page .frais .sm{display:none}
@media (max-width:1560px){
  .sup-page .niv2-right{gap:8px}
  .sup-page .frais .lg{display:none}
  .sup-page .frais .sm{display:inline}
  .sup-page .frais.vide{font-style:normal}
}
.sup-page .seg{display:flex;background:rgba(255,255,255,.07);border-radius:7px;padding:2px}
.sup-page .seg button{background:none;border:0;color:var(--tx-on-bar-2);font:700 11px var(--font,system-ui,-apple-system,sans-serif);border-radius:5px;cursor:pointer}
.sup-page .seg button.on{background:var(--accent-bright);color:#053a36}
.sup-page .wrap{position:relative;z-index:1;padding:12px 14px 70px}
.sup-page .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:10px}
/* 25/08/2026 — `min(340px,100%)` et non `340px` seul. DEFAUT PREEXISTANT, revele
   par un banc de rendu monte sur LE VRAI BALISAGE : a 320 px la carte client etait
   forcee a 340 px et faisait deborder la page de 34 px — eliminatoire selon la
   regle EQUILIBRE DE PAGE. Un minimum de grille en DUR est un plancher que la
   fenetre ne peut pas negocier ; `min(...,100%)` lui rend le droit de ceder.
   ⚠ Quatre autres minmax en dur subsistent dans ce fichier (l. 247, 248, 785,
   1231, dont un a 420px) : hors perimetre de ce chantier, SIGNALES et non touches. */
.sup-page .ctile{background:var(--page-1);border:1px solid #d6dde8;border-radius:var(--r-lg);overflow:hidden;height:244px;display:flex;flex-direction:column;box-shadow:0 10px 28px rgba(20,30,50,.08),0 2px 6px rgba(20,30,50,.05)}
.sup-page .ctile.has-err{border-color:var(--red,#ef4444);box-shadow:0 0 0 2px rgba(239,68,68,.22),0 10px 26px rgba(239,68,68,.16)}
.sup-page .ctile.has-warn{border-color:var(--orange,#f59f4d);box-shadow:0 0 0 2px rgba(245,159,77,.22),0 8px 18px rgba(245,159,77,.13)}
.sup-page .ctile.has-info{border-color:var(--blue,#5e8df5);box-shadow:0 0 0 2px rgba(94,141,245,.22),0 8px 18px rgba(94,141,245,.13)}
.sup-page .ctile.has-ok{border-color:var(--green,#22c55e);box-shadow:0 0 0 2px rgba(34,197,94,.20),0 8px 18px rgba(34,197,94,.12)}
.sup-page .ctile.has-hors{border-color:#9aa6b6;box-shadow:0 0 0 2px rgba(154,166,182,.18),0 8px 18px rgba(20,30,50,.10)}
.sup-page .cheader{position:relative;display:flex;align-items:center;gap:9px;padding:8px 11px 8px 14px;flex-shrink:0;color:var(--tx-on-bar,#f0f3fa);
  background:radial-gradient(140% 130% at 50% -45%,rgba(255,255,255,.09),transparent 70%),linear-gradient(180deg,var(--bar-1) 0%,var(--bar-2) 55%,var(--bar-3) 100%);
  border-bottom:1px solid rgba(0,0,0,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  /* 07/09/2026 — hauteur plancher : 28 px d'ecusson + 2 x 8 px de marge.
     `min-height` et non `height` : si quelqu'un grossit les caracteres de
     son systeme, l'en-tete doit pouvoir s'etirer plutot que couper le nom. */
  min-height:44px;box-sizing:border-box}
.sup-page .cheader::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.sup-page .ctile.has-err  .cheader::before{background:var(--red,#ef4444)}
.sup-page .ctile.has-warn .cheader::before{background:var(--orange,#f59f4d)}
.sup-page .ctile.has-info .cheader::before{background:var(--blue,#5e8df5)}
.sup-page .ctile.has-ok   .cheader::before{background:var(--green,#22c55e)}
.sup-page .ctile.has-hors .cheader::before{background:#9aa6b6}
.sup-page .cavatar{width:28px;height:28px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;font:800 9px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#fff}
/* 21/09 (contrôle visuel) : le nom du client en entier, deux lignes au plus */
.sup-page .cname{font:800 13px/1.15 var(--font,system-ui,-apple-system,sans-serif);color:#ffffff;letter-spacing:-.02em;max-width:230px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 07/09/2026 — UNE SEULE LIGNE, COMME LE NOM (demande de Miguel : « je veux
   que tous restent a la meme hauteur »). Sans contrainte, « 10 appareils ·
   1 en trop · FOUGERES » passait a deux lignes et l'en-tete grandissait ;
   la carte ayant une hauteur fixe, la grille des appareils perdait d'autant
   et deux cartes voisines ne s'alignaient plus. */
.sup-page .cmeta{font:600 9px var(--mono,ui-monospace,SFMono-Regular,monospace);color:rgba(255,255,255,.6);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.sup-page .cbadges{display:flex;gap:4px;margin-left:auto;flex-shrink:0}
.sup-page .cbadge{display:inline-flex;align-items:center;gap:4px;font:800 9px var(--mono,ui-monospace,SFMono-Regular,monospace);padding:2px 7px;border-radius:5px}
.sup-page .cbadge.err{background:rgba(239,68,68,.24);color:#fca5a5}
.sup-page .cbadge.warn{background:rgba(245,159,77,.24);color:#fbcf8e}
.sup-page .cbadge.info{background:rgba(94,141,245,.24);color:#a9c2fb}
.sup-page .cbadge.ok{background:rgba(34,197,94,.22);color:#86efac}
.sup-page .cbadge.hors{background:rgba(154,166,182,.22);color:#cbd5e1}
.sup-page .cbody{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:76px;align-content:start;gap:5px;padding:6px;
  flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),transparent 24%),
    radial-gradient(95% 75% at 10% -5%,rgba(11,174,159,.22),transparent 60%),
    radial-gradient(85% 90% at 105% 110%,rgba(124,92,240,.12),transparent 60%),
    linear-gradient(155deg,#404853 0%,#2e353f 60%,#272d37 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.sup-page .cbody::-webkit-scrollbar{width:6px}
.sup-page .cbody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
.sup-page .cbody.ok{background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 24%),radial-gradient(95% 75% at 10% -5%,rgba(45,212,160,.40),transparent 60%),radial-gradient(85% 95% at 105% 115%,rgba(6,116,125,.50),transparent 62%),linear-gradient(155deg,#1f8462 0%,#136046 60%,#0f4d38 100%)}
.sup-page .cbody.warn{background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 24%),radial-gradient(95% 75% at 10% -5%,rgba(252,196,64,.40),transparent 60%),radial-gradient(85% 95% at 105% 115%,rgba(217,119,6,.45),transparent 62%),linear-gradient(155deg,#aa7327 0%,#7a521a 60%,#5c3d14 100%)}
.sup-page .cbody.err{background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 24%),radial-gradient(95% 75% at 10% -5%,rgba(250,120,120,.42),transparent 60%),radial-gradient(85% 95% at 105% 115%,rgba(185,28,40,.50),transparent 62%),linear-gradient(155deg,#a23a3a 0%,#732727 60%,#5a1f1f 100%)}
.sup-page .cbody.info{background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 24%),radial-gradient(95% 75% at 10% -5%,rgba(120,160,250,.40),transparent 60%),radial-gradient(85% 95% at 105% 115%,rgba(37,99,235,.46),transparent 62%),linear-gradient(155deg,#2f4f93 0%,#22386b 60%,#1b2c54 100%)}
.sup-page .cbody.hors{background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 24%),radial-gradient(90% 80% at 12% -5%,rgba(148,163,184,.28),transparent 62%),linear-gradient(155deg,#4a5360 0%,#3a424d 60%,#313842 100%)}
.sup-page .dev{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  height:76px;padding:7px 5px 8px;overflow:hidden;border-radius:10px;cursor:pointer;transition:.14s;
  border:1.5px solid #b3bdca;background:linear-gradient(180deg,#2d353f,#222932);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 7px rgba(0,0,0,.30)}
.sup-page .dev:hover{border-color:#ffffff;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 18px rgba(0,0,0,.4)}
.sup-page .dev.ok{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 8px rgba(0,0,0,.30)}
.sup-page .dev.info{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 9px rgba(0,0,0,.30)}
.sup-page .dev.warn{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 10px rgba(245,159,77,.30)}
.sup-page .dev.err{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 13px rgba(239,68,68,.40)}
/* 16/09 (Miguël) — L'URGENCE CLIGNOTE : disque système (ou volume) à 97 % et plus.
   Le halo rouge bat ; la tuile reste lisible entre deux battements. */
.sup-page .dev.urg{animation:urg-halo 1.1s ease-in-out infinite}
@keyframes urg-halo{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 13px rgba(239,68,68,.40)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 3px rgba(239,68,68,.55),0 2px 22px rgba(239,68,68,.85)}}
.sup-page .dev.hors{filter:grayscale(.6);}
.sup-page .dev .dot{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 5px currentColor}
.sup-page .dev.ok .dot{background:var(--green,#22c55e);color:var(--green,#22c55e)}
.sup-page .dev.info .dot{background:var(--blue,#5e8df5);color:var(--blue,#5e8df5)}
.sup-page .dev.warn .dot{background:var(--orange,#f59f4d);color:var(--orange,#f59f4d);animation:pdot 2.4s infinite}
.sup-page .dev.err .dot{background:var(--red,#ef4444);color:var(--red,#ef4444);animation:pdot 1.2s infinite}
.sup-page .dev.hors .dot{background:#94a3b8;color:#94a3b8}
.sup-page .dev.f-sil .dot{background:#b794f4;color:#b794f4}
@keyframes pdot{
50%{opacity:.25}
}

.sup-page .dev .dico{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
/* 01/09/2026 — SOUS-TITRE DU BADGE (modele d'un NAS au repos).
   Pose SOUS le nom, dans le flux central : il ne prend la place de rien
   puisqu'un NAS au vert n'affiche pas d'etat. Taille et couleur volontairement
   en retrait — c'est une precision, jamais une alerte. */
.sup-page .grid.compact .dev .dsub{display:none}
/* 01/09/2026 — L'ANTIVIRUS EN ALERTE DANS L'INFOBULLE.
   Meme ambre que .tprov.t-machine : dans cette page, l'ambre dit « il y a
   quelque chose a faire ici », jamais « c'est casse ». */
.sup-page .dev .tip b.t-alerte{color:#f0b46b}
.sup-page .dev .dstat.ok{color:#9fe6c4}
.sup-page .dev .dstat.info{color:#a9c2fb}
.sup-page .dev .dstat.warn{color:#fbcf8e}
.sup-page .dev .dstat.err{color:#fda4a4}
.sup-page .dev .tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#11161f;border:1px solid #2a3342;border-radius:6px;padding:6px 10px;font:500 10px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#e2e8f0;pointer-events:none;z-index:60;opacity:0;transition:opacity .15s;box-shadow:0 8px 22px rgba(0,0,0,.4);}
.sup-page .dev .tip b{color:#fff}
/* 16/09 (Miguël) — L'INFOBULLE NE S'OUVRE PLUS DANS LA VIGNETTE : celle-ci coupe
   ce qui dépasse (overflow:hidden), et l'infobulle, dessinée dedans, n'a jamais été
   visible. vignette-bulle.js en fait une copie flottante (.dev-flot.sup, ci-dessous).
   La source reste dans la vignette, cachée, pour porter le contenu. */
.sup-page .dev .tip{display:none}
.sup-page .grid.compact .cbody{grid-template-columns:repeat(5,1fr);grid-auto-rows:50px;gap:4px}
.sup-page .grid.compact .dev{height:50px;padding:4px 3px;gap:0}
.sup-page .grid.compact .dev .dico{width:20px;height:20px}
.sup-page .grid.compact .dev .dname{font-size:9px}
.sup-page .grid.compact .dev .dstat{display:none}
.sup-page .grid.compact .dev .dot{width:7px;height:7px;top:3px;right:4px}
.sup-page .cbody{scroll-behavior:smooth}
.sup-page{--accent-glow:rgba(11,174,159,.45);--border-light:#e6e9f0}
@keyframes blink-glow-ko{
50%{opacity:.45}
}
@keyframes dmin{
from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}
}
.sup-page .dmodal-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:56px 16px;background:rgba(10,16,22,.55);backdrop-filter:blur(3px)}
.sup-page .dmodal-overlay.show{display:flex}
.sup-page .dmodal{width:560px;max-width:100%;animation:dmin .18s ease;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.sup-page .dm-nav{background:rgba(255,255,255,.12);border:0;color:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer;font:800 19px var(--font,system-ui,-apple-system,sans-serif);line-height:1;flex-shrink:0}
.sup-page .dm-nav:hover{background:rgba(255,255,255,.24)}
.sup-page .dm-close{background:rgba(255,255,255,.12);border:0;color:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:14px;flex-shrink:0}
.sup-page .dm-actions{display:flex;gap:8px;padding:0 16px 16px}
.sup-page .dm-actions .btn{flex:1}
@media (prefers-reduced-motion:reduce){
*{animation:none!important}
}
/* >>> SUPERVISION fin <<< */

/* ==== 7000PRO · ICONES DE MARQUE PRODUITS — source unique assets/img/brands · PC+mobile · grep=1 ==== */
.cf-pti.brand{background:#fff;border:1.5px solid #d3ddd9;box-shadow:0 3px 9px rgba(20,30,30,.12)}
.cf-pti.brand svg{width:28px;height:28px}
.cf-pti.brand .cf-bimg{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.cf-pti.brand .cf-bimg--pad{object-fit:contain;padding:5px}
/* ==== /ICONES DE MARQUE PRODUITS ==== */

/* ===== lien badge Synthese -> carte Parc (ancre + surbrillance) ===== */
.cf-suplink{display:block;text-decoration:none;color:inherit}
.cl-pc{scroll-margin-top:100px}
.cl-pc:target{animation:parcflash 1.8s ease-out}
@keyframes parcflash{0%{box-shadow:0 0 0 3px var(--accent,#06747D),0 0 20px rgba(6,116,125,.55)}100%{box-shadow:0 0 0 0 rgba(6,116,125,0)}}
/* ===== fin lien badge Synthese ===== */
/* >>> MODE TEST — bandeau (fondation mode test) <<< */
.mode-test-banner{display:block;width:100%;box-sizing:border-box;text-align:center;
  padding:7px 12px;background:linear-gradient(180deg,#F6C453,#F2B33D);color:#5A3D05;
  font:800 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.04em;
  border-bottom:1.5px solid #D98E04;box-shadow:0 2px 6px rgba(0,0,0,.18)}
/* >>> /MODE TEST bandeau <<< */

/* >>> GED 3COL (CAI) — design CAI adapté <<< */
/* ═══════════════════════════════════════════════════════════════════════════════
   GED 3-COLONNES — Arborescence | Liste+Tri | Aperçu+Actions
   ═════════════════════════════════════════════════════════════════════════════ */

.ged-container {
    display: flex;
    height: calc(100vh - 200px);
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    overflow: hidden;
    gap: 0;
}

/* COL 1: ARBORESCENCE (20%) */
.ged-sidebar {
    width: 20%;
    background: white;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.ged-sidebar-title {
    font-size: 11px;
    font-weight: 600;
    color: #06747D;
    margin-bottom: 1rem;
    padding-left: 10px;
}

.ged-folder {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 4px;
    transition: all 0.2s ease;
}

.ged-folder:hover {
    background: rgba(6, 116, 125, 0.05);
}

.ged-folder.ged-folder-selected {
    background: rgba(11, 174, 159, 0.1);
    border-left: 2px solid #0BAE9F;
    color: #06747D;
    font-weight: 500;
}

.ged-folder-toggle {
    font-size: 12px;
    color: #999;
    min-width: 12px;
}

.ged-folder.ged-folder-selected .ged-folder-toggle {
    color: #06747D;
}

.ged-folder-icon {
    font-size: 14px;
}

.ged-folder-name {
    flex: 1;
    color: #333;
    font-weight: 500;
}

.ged-folder-count {
    font-size: 10px;
    background: #f0f0f0;
    padding: 2px 5px;
    border-radius: 3px;
    color: #666;
}

.ged-folder-items {
    padding-left: 20px;
    background: rgba(6, 116, 125, 0.02);
    margin-bottom: 4px;
}

.ged-folder-item {
    padding: 4px 0;
    font-size: 10px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s ease;
}

.ged-folder-item:hover {
    color: #06747D;
}

/* COL 2: LISTE + TRI (30%) */
.ged-list {
    width: 30%;
    background: white;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.ged-list-header {
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.ged-list-title {
    font-size: 11px;
    color: #999;
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.ged-sort-control {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ged-sort-control label {
    font-size: 10px;
    color: #999;
    font-weight: 500;
    white-space: nowrap;
}

.ged-sort-select {
    flex: 1;
    padding: 6px 8px;
    font-size: 11px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    color: #06747D;
    font-weight: 500;
}

.ged-list-items {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.ged-document-item {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ged-document-item:hover {
    background: rgba(6, 116, 125, 0.05);
}

.ged-document-item.ged-document-item-selected {
    background: rgba(11, 174, 159, 0.1);
    border-left: 3px solid #0BAE9F;
    border-bottom: 1px solid #f0f0f0;
}

.ged-document-code {
    font-size: 10px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.ged-document-title {
    font-size: 12px;
    color: #06747D;
    font-weight: 500;
    margin-bottom: 3px;
    line-height: 1.3;
}

.ged-document-meta {
    font-size: 10px;
    color: #999;
}

/* COL 3: APERÇU + ACTIONS (50%) */
.ged-preview {
    width: 50%;
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ged-preview-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem;
}

.ged-preview-label {
    font-size: 11px;
    color: #999;
    margin-bottom: 0.6rem;
}

.ged-preview-title {
    font-size: 14px;
    color: #06747D;
    margin: 0 0 0.6rem;
    font-weight: 500;
}

.ged-preview-meta {
    font-size: 11px;
    color: #999;
    margin-bottom: 1rem;
}

.ged-preview-body {
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #333;
}

.ged-preview-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.ged-preview-empty-icon {
    font-size: 48px;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.ged-preview-empty-text {
    font-size: 13px;
    color: #999;
}

/* BOUTONS D'ACTION */
.ged-preview-actions {
    padding: 1rem;
    background: white;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ged-button {
    padding: 10px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.ged-button-primary {
    background: linear-gradient(135deg, #06747D, #0BAE9F);
    color: white;
    width: 100%;
}

.ged-button-primary:hover {
    box-shadow: 0 4px 12px rgba(6, 116, 125, 0.3);
    transform: translateY(-1px);
}

.ged-button-secondary {
    background: white;
    border: 1px solid #06747D;
    color: #06747D;
    flex: 1;
}

.ged-button-secondary:hover {
    background: rgba(6, 116, 125, 0.05);
}

.ged-button-tertiary {
    background: white;
    border: 1px solid #e0e0e0;
    color: #666;
    flex: 1;
}

.ged-button-tertiary:hover {
    background: #f9f9f9;
}

.ged-button-row {
    display: flex;
    gap: 8px;
}

/* RESPONSIVE */
@media (max-width: 1399px) {
    .ged-sidebar { width: 22%; }
    .ged-list { width: 23%; }
    .ged-preview { width: 55%; }
}

@media (max-width: 768px) {
    .ged-container {
        flex-direction: column;
        height: auto;
    }

    .ged-sidebar,
    .ged-list,
    .ged-preview {
        width: 100%;
        height: 100%;
        border-right: none;
        border-bottom: none;
        display: none;
    }

    .ged-sidebar.active,
    .ged-list.active,
    .ged-preview.active {
        display: flex;
        flex-direction: column;
    }

    .ged-tabs {
        display: flex;
        gap: 0;
        background: white;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
    }

    .ged-tab {
        flex: 1;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        font-size: 12px;
        font-weight: 500;
        color: #999;
    }

    .ged-tab.active {
        border-bottom-color: #06747D;
        background: rgba(6, 116, 125, 0.05);
        color: #06747D;
    }
}
/* correctifs minimes intégration */
.ged-tabs{display:none}
.ged-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.ged-container{font-family:var(--font,system-ui)}
/* >>> /GED 3COL (CAI) <<< */

/* ═══ GED : historique des versions (dépli) — 2026-06-18 ═══════════════
   Option "mixte" : badge "N versions" DANS la carte (repère immédiat)
   + dépli rattaché à la carte (décalé + trait de liaison vertical).
   Zone CLAIRE (repos) ; teinte teal de la charte. Lecture seule = "archive".
   À insérer dans le bundle 7000pro.css (UN seul bloc borné). */

/* — Badge "N versions" collé au titre, DANS la carte — */
.gd-doc .fvbadge{
  display:inline-block; vertical-align:middle;
  font-size:10px; font-weight:700; line-height:1;
  color:#06747D; background:rgba(6,116,125,.1);
  border:1px solid rgba(6,116,125,.2);
  border-radius:999px; padding:3px 9px; margin-left:9px;
  white-space:nowrap;
}

/* — Zone historique, rattachée à la carte (décalée + trait vertical) — */
.gd-hist{
  position:relative;
  margin:-4px 0 9px 0;
  padding-left:30px;
}
.gd-hist::before{
  content:""; position:absolute;
  left:15px; top:-2px; bottom:12px; width:2px;
  background:rgba(6,116,125,.22);
  border-radius:2px;
}
.gd-hist-toggle{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:none; cursor:pointer;
  font:inherit; font-size:11px; font-weight:600;
  color:#6c8290; padding:4px 8px; border-radius:6px;
  transition:background .15s, color .15s;
}
.gd-hist-toggle:hover{ background:rgba(6,116,125,.08); color:#06747D; }
.gd-hist-toggle .chev{ width:13px; height:13px; transition:transform .18s ease; }
.gd-hist-toggle.is-open .chev{ transform:rotate(180deg); }
.gd-hist-toggle.is-open{ color:#06747D; }

.gd-hist-list{ margin:3px 0 2px 0; }
/* L'item d'historique porte AUSSI la classe .gd-doc (pour l'aperçu colonne 3
   via le même JS). On neutralise donc le look "carte" hérité de .gd-doc et on
   impose le look compact "ligne d'archive". */
.gd-doc.gd-hist-item{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px; margin:3px 0;
  border-radius:7px; text-decoration:none;
  background:#f6f9fa; border:1px solid #e7eef0; border-left:1px solid #e7eef0;
  box-shadow:none; min-height:0;
  transition:background .15s, border-color .15s;
}
.gd-doc.gd-hist-item:hover{ background:#eef5f6; border-color:#cfe3e5; }
.gd-doc.gd-hist-item.is-sel{ background:#e7f3f1; border-color:#0BAE9F; }
.gd-hist-item .hv{
  font-weight:700; font-size:11.5px; color:#044a52;
  flex-shrink:0; min-width:50px;
}
.gd-hist-item .hd{ font-size:10.5px; color:#7a8c97; flex:1; }
.gd-hist-item .hflag{
  font-size:8.5px; font-weight:700; letter-spacing:.3px;
  text-transform:uppercase; color:#9aa4af;
  background:#eceff1; border-radius:4px; padding:1px 6px; flex-shrink:0;
}
/* ═══ FIN GED historique des versions ═════════════════════════════════ */

/* ==== CSP UTILITAIRES — remplaçants des styles inline (bloc borné, 2026-07-28) ====
   La CSP stricte de dev (style-src 'self', arbitrage CAI session 007) interdit tout
   attribut style="". RÈGLE V2 : zéro style inline dans les vues.
   · Accents statiques : classes .cv-* ci-dessous (--c).
   · Accents dynamiques (valeur calculée en PHP) : data-c / data-cc + assets/js/csp-vars.js. */
.cv-accent{--c:#06747D}
.cv-bright{--c:#0BAE9F}
.cv-crit{--c:#e0483a}
.cv-grey{--c:#8a94a0}
.cv-blue{--c:#3b82f6}
.cv-violet{--c:#7c3aed}
.u-hidden{display:none!important}
.u-inline{display:inline}
.u-span-all{grid-column:1/-1}
/* 21/09 (contrôle visuel) : le « rien à montrer » d'une grille est une carte, pas une phrase nue */
.grid > p.u-span-all{margin:6px 0 0;padding:22px 26px;border-radius:16px;background:#fff;border:1.5px solid #cfd8e3;color:var(--tx-dark-2,#3d4352);font:600 15px/1.45 var(--font,system-ui,sans-serif);text-align:center;box-shadow:0 8px 24px rgba(20,30,50,.06)}
.u-row-gap6{gap:6px;margin-top:4px}
.avatar-teal{background:linear-gradient(135deg,#0e7490,#155e75)}
/* 08/09 — complétée : elle ne portait que la position, alors que le style en
   ligne qu'elle remplace portait aussi display, width, height et overflow.
   Une compensation à moitié laisse la moitié du défaut. */
.sup-ic-defs{position:absolute;display:block;width:0;height:0;overflow:hidden}
/* GED versioning : sous-listes de répertoires repliées par défaut, dépliées via .is-open (JS) */
.ged-folder-items{display:none}
.ged-folder-items.is-open{display:block}
/* ==== FIN CSP UTILITAIRES ==== */

/* ==== GD-EXPLORER — REPLI PETITE HAUTEUR (bloc borné, 2026-07-29) ====
   Posé/retiré par gd-explorer.js (classe .gd-shell-off sur <html>) quand la place
   sous le bloc 3 colonnes est < 420 px : l'app-shell figé rendrait le bas des
   colonnes inatteignable (page verrouillée). Dans ce repli, l'onglet Documents
   repasse en défilement de page NORMAL, colonnes à hauteur naturelle. */
@media(min-width:1101px){
  html.gd-shell-off:has(.gd-explorer--fiche){overflow:auto}
  html.gd-shell-off body:has(.gd-explorer--fiche){overflow:auto}
  html.gd-shell-off .gd-explorer--fiche{height:auto!important;min-height:0}
  html.gd-shell-off .gd-explorer--fiche .gd-tree{overflow:visible}
  html.gd-shell-off .gd-explorer--fiche .gd-list{overflow:visible}
  html.gd-shell-off .gd-explorer--fiche .gd-list-b{overflow:visible}
}
/* ==== FIN REPLI PETITE HAUTEUR ==== */

/* ═══════════════════════════════════════════════════════════════
   ETABLISSEMENT (et-) — page « Réglages → Mon établissement ».
   Couche issue de la maquette 7K-MAQ-INT-001 v11 (fait foi), écrite
   exclusivement avec les tokens de la charte. Préfixe du domaine : et-.
   Ajoutée le 08/08/2026 (chantier FICHE-LICENCIE, 1re page du backlog v8).
   ═══════════════════════════════════════════════════════════════ */

.et-flash{max-width:1400px;margin:0 auto 16px;font:600 12px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);
  background:#fff;border:1px dashed var(--border-light);border-left:4px solid var(--accent);border-radius:var(--r);padding:10px 14px}
.et-flash.ko{border-left-color:#dc2626}
/* remplacements des derniers styles inline (doctrine ZÉRO INLINE, 08/08 soir) */
.et-field input.et-ro,.et-field input[readonly]{border-style:dashed;background:var(--page-2);color:var(--tx-dark-2,#3d4352)}
.et-prev img{max-height:44px;max-width:88px}
.et-prev img.wm{max-width:180px}
.k.klogo{font:600 10px Consolas,monospace;color:var(--accent-deep)}
.et-logos #logoMsg{grid-column:1/-1}
.et-save .btn.lien{display:inline-flex;align-items:center;text-decoration:none}

/* — Grille de page — FLUIDE À TOUTES LES RÉSOLUTIONS (Règle 2 charte, amendée
   08/08 : jamais de largeur fixe, jamais de min-width forcé, zéro défilement
   horizontal à toutes les largeurs — vérité site entier). — */
.et-two{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;width:100%;max-width:1400px;margin:0 auto;align-items:start}
.et-two>*{min-width:0}
.et-two img{max-width:100%;height:auto}
@media(max-width:1100px){.et-two{grid-template-columns:1fr}}

/* — Rééquilibrage 08/08 (décision Miguël, amendement de maquette consigné CAI) :
   espacement VERTICAL CONSTANT 16px dans les deux colonnes, aucun vide, aucun
   chevauchement d'ombres entre blocs successifs. — */
.et-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.et-main>.blk,.et-side>.blk{margin:0}
.et-main .et-gauge{margin-bottom:0}
.et-main .et-save{margin:0;width:100%;max-width:none}
/* Règlements à droite : champs empilés sur UNE colonne */
.et-form.et-un{grid-template-columns:1fr}
.et-form.et-un .et-field.w2,.et-form.et-un .et-shield,.et-form.et-un .et-info,.et-form.et-un .et-alias{grid-column:span 1}

/* — Champs de formulaire — */
.et-form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 14px;padding:16px 18px}
.et-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.et-field.w2{grid-column:span 2}
.et-field label{font:700 11px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);text-transform:uppercase;letter-spacing:.05em}
.et-field label .req{color:#dc2626;font-size:13px;margin-left:2px}
/* 21/09 (contrôle visuel) : la clé technique ne s'affiche plus à côté du libellé (jargon) ; elle reste dans le code de la page */
.et-field label .k{display:none;font:600 10px/1 Consolas,monospace;color:var(--accent-deep);background:rgba(11,174,159,.08);
  border:1px solid var(--accent-line);border-radius:6px;padding:2px 6px;margin-left:6px;text-transform:none;letter-spacing:0}
.et-field input{height:36px;width:100%;min-width:0;box-sizing:border-box;border:1.5px solid rgba(201,162,71,.55);border-radius:var(--r);padding:0 12px;
  font:600 13.5px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark,#1a1f2e);background:#fff;box-shadow:inset 0 1px 3px rgba(122,92,30,.06)}
.et-field input:focus{outline:2px solid var(--accent-line);border-color:var(--accent)}
.et-field input::placeholder{color:#b6bcc6;font-weight:500}

/* — Saisie SIRET magique : un numéro, tout suit — */
.et-siret{grid-column:span 2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(245,211,112,.16),rgba(201,162,71,.08));
  border:1.5px solid var(--or-3);border-radius:var(--r-lg);padding:12px 14px}
.et-siret .lb{font:800 12px var(--font,system-ui,-apple-system,sans-serif);color:#7a5c1e;text-transform:uppercase;letter-spacing:.05em}
.et-siret input{flex:1 1 200px;min-width:0;height:38px;box-sizing:border-box;border:1.5px solid var(--or-3);border-radius:var(--r);
  padding:0 12px;font:700 15px var(--font,system-ui,-apple-system,sans-serif);letter-spacing:.06em;color:var(--tx-dark,#1a1f2e);background:#fff}
.et-siret input:focus{outline:2px solid var(--accent-line)}
.et-siret .hint2{flex-basis:100%;font:600 11px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352)}
@media(max-width:700px){.et-siret{grid-column:span 1}}
@media(max-width:700px){.et-form{grid-template-columns:1fr}.et-field.w2{grid-column:span 1}}

/* — Jauge de complétude — */
.et-gauge{background:#fff;border:1px solid var(--border-light);border-radius:var(--r-lg);
  box-shadow:var(--sh-tile);padding:12px 16px;margin-bottom:16px}
.et-gauge .row{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.et-gauge .pc{font:800 18px var(--font,system-ui,-apple-system,sans-serif);color:var(--accent-deep)}
.et-gauge .lb2{font:700 12.5px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark,#1a1f2e)}
.et-gauge .track{height:8px;border-radius:999px;background:var(--page-2);border:1px solid var(--border-light);overflow:hidden}
.et-gauge .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
.et-missbtn{margin-left:auto;height:26px;padding:0 12px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--or-3);background:rgba(232,199,106,.15);font:700 11.5px var(--font,system-ui,-apple-system,sans-serif);color:#7a5c1e}
.et-misslist{display:none;margin-top:8px;border:1px dashed var(--or-3);border-radius:var(--r);background:#fdf8ec;padding:6px 4px}
.et-misslist.on{display:block}
.et-misslist a{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:8px;
  font:600 12px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark,#1a1f2e);text-decoration:none;cursor:pointer}
.et-misslist a:hover{background:rgba(232,199,106,.22)}
.et-misslist a .go{margin-left:auto;font:700 11px var(--font,system-ui,-apple-system,sans-serif);color:var(--accent-deep)}
.et-freq{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.et-freq .flb{font:700 10.5px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);text-transform:uppercase;letter-spacing:.05em}
.et-freq .f{height:24px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--border-light);
  background:#fff;font:700 11px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);cursor:pointer}
.et-freq .f.on{background:linear-gradient(180deg,var(--or-1),var(--or-2) 50%,var(--or-3));color:#2a2110;border-color:var(--or-edge)}
.et-freq .fw{flex-basis:100%;font:600 10px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);line-height:1.45}

/* — JAUGE EN COLONNE STICKY (décision Miguël + CAI, 08/08 soir) : CSS PUR,
   le triple moteur JS est supprimé. Écran LARGE (>= 1440 px) : 3 colonnes
   [jauge complète sticky | formulaire | sidebar], plafond élargi à 1720 px
   (autorisé Règle 2 pour cette page : le formulaire garde sa largeur lisible).
   Écran ÉTROIT (< 1440 px) : bandeau compact sticky en haut + 2 colonnes. — */
/* ── GABARIT SOCLE « page-rail » (08/08 soir, exigence Miguël : l'écran est
   UTILISÉ, pas encadré de vide). Propriété du GABARIT, pas de la page
   (addendum doctrine « zéro personnalisation par page ») : PLEINE LARGEUR
   (main.page apporte déjà ~20 px de gouttière, le rail ajoute 8 → ~28 px
   par côté, dans la cible 24-32). L'espace va aux colonnes 2 et 3 ;
   la colonne rail reste fixe 280 px. Garde-fou lisibilité : ce sont les
   GROUPES DE CHAMPS qui sont plafonnés, jamais le conteneur. ── */
.page-rail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;
  width:100%;max-width:none;margin:0;padding:0 8px;box-sizing:border-box;align-items:start}
.page-rail>*{min-width:0}
.page-rail img{max-width:100%;height:auto}
.page-rail .et-form{max-width:940px}          /* champs lisibles, page libre */
.et-coljauge{display:none}
@media(min-width:1440px){
  .page-rail{grid-template-columns:280px minmax(0,1.55fr) minmax(0,1fr)}
  .et-coljauge{display:block;position:sticky;top:calc((var(--niv1-h) + var(--niv2-h)) / var(--zoom-page,1) + 16px)}
  .et-bandeau{display:none}
}
@media(max-width:1100px){.page-rail{grid-template-columns:1fr}}
.et-coljauge .et-gauge{margin-bottom:0}
.et-coljauge .et-missbtn.pleine{margin:8px 0 0;width:100%}

/* ── Colonne 1 : rythme vertical régulier (reprise Miguël 08/08 soir) ──
   libellé court une ligne · 3 choix EMPILÉS pleine largeur même hauteur ·
   dégagement de responsabilité SEULEMENT quand « Jamais » est choisi. */
.et-freqv{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.et-freqv .flb{font:700 10.5px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);text-transform:uppercase;letter-spacing:.05em}
.et-freqv .f{width:100%;height:34px;border-radius:var(--r);border:1.5px solid var(--border-light);
  background:#fff;font:700 12px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);cursor:pointer;text-align:left;padding:0 12px}
.et-freqv .f.on{background:linear-gradient(180deg,var(--or-1),var(--or-2) 50%,var(--or-3));
  color:#2a2110;border-color:var(--or-edge);font-weight:800}
/* Dégagement de responsabilité : LISIBLE (micro-correctif Miguël 08/08 nuit) —
   corps de lecture 13.5 px italique, contraste plein, interligne confortable,
   une phrase par ligne. Socle du gabarit : vaut pour le rail ET le dépliant. */
.et-legal{display:none;font:italic 600 13.5px/1.6 var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark,#1a1f2e);margin-top:10px;
  border-left:3px solid var(--or-3);padding:2px 0 2px 10px}
.et-legal.on{display:block}
.et-legal span{display:block}
.et-legal span+span{margin-top:5px}

/* — Bandeau compact sticky (écran étroit) : sous le shell (lui-même collant),
   fréquence + dégagement de responsabilité dans le dépliant « Rappel ». — */
.et-bandeau{position:sticky;top:calc((var(--niv1-h) + var(--niv2-h)) / var(--zoom-page,1));z-index:30;
  width:auto;max-width:none;margin:0 8px 12px;background:#fff;
  border:1px solid var(--border-light);border-radius:var(--r);
  box-shadow:0 6px 18px rgba(0,0,0,.10);padding:7px 14px}
.et-bandeau .ligne{display:flex;align-items:center;gap:10px}
.et-bandeau .pc{font:800 14px var(--font,system-ui,-apple-system,sans-serif);color:var(--accent-deep);white-space:nowrap}
.et-bandeau .pc.ko{color:#dc2626}
.et-bandeau .track{flex:1;height:5px;border-radius:999px;background:var(--page-2);
  border:1px solid var(--border-light);overflow:hidden}
.et-bandeau .fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
.et-bandeau .fill.ko{background:linear-gradient(90deg,#dc2626,#f59e0b)}
.et-bandeau .et-missbtn{margin-left:0;flex:0 0 auto}
.et-band-detail{flex:0 0 auto;position:relative}
.et-band-detail summary{list-style:none;cursor:pointer;font:700 11.5px var(--font,system-ui,-apple-system,sans-serif);color:#7a5c1e;
  height:26px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-pill);
  border:1px solid var(--or-3);background:rgba(232,199,106,.15)}
.et-band-detail summary::-webkit-details-marker{display:none}
.et-band-detail .corps{position:absolute;right:0;top:calc(100% + 8px);z-index:31;width:min(420px,80vw);
  background:#fff;border:1px solid var(--border-light);border-radius:var(--r);
  box-shadow:0 12px 32px rgba(0,0,0,.18);padding:10px 12px}

/* — Indicateurs de contrôle & champ surveillé — */
.et-ok{font:700 10.5px var(--font,system-ui,-apple-system,sans-serif);color:#fff;background:var(--green,#22c55e);border-radius:999px;padding:2px 8px}
.et-auto{font:700 10px var(--font,system-ui,-apple-system,sans-serif);color:var(--accent-deep);background:rgba(11,174,159,.08);
  border:1px solid var(--accent-line);border-radius:999px;padding:2px 8px;text-transform:none;letter-spacing:0}
.et-shield{grid-column:span 2;font:600 11px var(--font,system-ui,-apple-system,sans-serif);color:#7a5c1e;background:rgba(232,199,106,.14);
  border:1px dashed var(--or-3);border-radius:var(--r);padding:7px 10px;line-height:1.5}
@media(max-width:700px){.et-shield{grid-column:span 1}}

/* — Aperçu concret (pied de facture + signature) — */
.et-prev-doc{margin:10px 14px 14px;background:#fff;border:1px solid var(--border-light);border-radius:var(--r);padding:10px 12px}
.et-prev-doc .cap2{font:700 10px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.et-prev-doc .doc{border-top:2px solid var(--border-light);padding-top:7px;font:500 10.5px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);line-height:1.55;text-align:center;overflow-wrap:anywhere}
.et-prev-doc .doc b{color:var(--tx-dark,#1a1f2e)}
.et-prev-doc .sig{font:500 11.5px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark,#1a1f2e);line-height:1.5;border-left:3px solid var(--accent);padding-left:10px}
.et-prev-doc .sig b{color:var(--accent-deep)}
.et-prev-doc .hole{color:#dc2626;font-weight:700}

/* — Demande d'alias DNS — */
.et-alias{grid-column:span 2;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.et-alias .et-field{flex:1;min-width:220px}
.et-alias .btn{height:36px;padding:0 16px;font:700 12.5px var(--font,system-ui,-apple-system,sans-serif)}
.et-alias .hint3{flex-basis:100%;font:600 11px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352)}
@media(max-width:700px){.et-alias{grid-column:span 1}}

/* — Bandeau info réglementaire — */
.et-info{grid-column:span 2;display:flex;gap:10px;align-items:flex-start;
  background:linear-gradient(180deg,rgba(11,174,159,.10),rgba(6,116,125,.05));
  border:1.5px solid var(--accent-line);border-left:4px solid var(--accent);
  border-radius:var(--r-lg);padding:10px 14px;font:600 12px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark,#1a1f2e);line-height:1.5}
.et-info .ic{font-size:16px}
.et-info b{color:var(--accent-deep)}
@media(max-width:700px){.et-info{grid-column:span 1}}

/* — Zone logos — */
.et-logos{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px 18px}
@media(max-width:700px){.et-logos{grid-template-columns:1fr}}
.et-drop{border:2px dashed var(--or-3);border-radius:var(--r-lg);background:#fdf8ec;padding:14px;text-align:center}
.et-drop.empty{border-color:var(--border-light);background:var(--page-2)}
.et-drop h4{font:800 12.5px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark,#1a1f2e);margin-bottom:8px}
.et-prev{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;min-height:74px}
.et-prev .on-dark,.et-prev .on-light{border-radius:8px;padding:10px 14px;display:grid;place-items:center;min-width:96px;min-height:58px}
.et-prev .on-dark{background:linear-gradient(180deg,var(--bar-1,#5b6068),var(--bar-3,#2a2d34))}
.et-prev .on-light{background:#fff;border:1px solid var(--border-light)}
.et-prev .cap{font:600 9.5px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);display:block;margin-top:4px}
.et-empty-ic{font-size:26px;opacity:.45}
.et-empty-tx{font:600 12px var(--font,system-ui,-apple-system,sans-serif);color:#8a8f98;margin-top:4px}
.et-rules{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-bottom:8px}
.et-rule{font:700 10px var(--font,system-ui,-apple-system,sans-serif);color:#7a5c1e;background:rgba(232,199,106,.18);
  border:1px solid rgba(201,162,71,.4);border-radius:999px;padding:3px 8px}
.et-drop.empty .et-rule{color:var(--tx-dark-2,#3d4352);background:var(--page-2);border-color:var(--border-light)}
.et-decl{font:600 10.5px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352)}
.et-decl b{color:var(--accent-deep)}
.et-drop .btn{height:30px;padding:0 14px;font:700 12px var(--font,system-ui,-apple-system,sans-serif);margin-top:8px}
.btn.gold{background:linear-gradient(180deg,var(--or-1),var(--or-2) 50%,var(--or-3));color:#2a2110;border:1px solid var(--or-edge)}
.btn.ghost{background:#fff;border:1px solid var(--border-light);color:var(--tx-dark,#1a1f2e);box-shadow:none}

/* — Barre d'enregistrement — */
.et-save{width:100%;max-width:1400px;box-sizing:border-box;margin:14px auto 0;background:#fff;border:1px solid var(--border-light);
  border-radius:var(--r-lg);box-shadow:var(--sh-tile);padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.et-save .hint{font:600 12px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark-2,#3d4352);flex:1;min-width:240px}
.et-save .hint b{color:var(--accent-deep)}

/* — Colonne droite : correspondances — */
.et-side{display:flex;flex-direction:column;gap:16px}
.et-map{padding:6px 14px 12px}
.et-map .blk-it .it-t1{color:var(--on-glass-1,#e8ecf4)}
.et-map .blk-it .it-t2{color:rgba(255,255,255,.5)}
.et-keys{padding:12px 16px;font:600 12px var(--font,system-ui,-apple-system,sans-serif);color:var(--tx-dark,#1a1f2e);line-height:1.6}
.et-keys code{font:600 11px Consolas,monospace;color:var(--accent-deep);background:rgba(11,174,159,.08);
  border:1px solid var(--accent-line);border-radius:6px;padding:1px 6px}
.et-keys p+p{margin-top:8px}

/* ═══════════════════════════════════════════════════════════════
   FLUIDITÉ SITE ENTIER — Règle 2 de la charte, amendée le 08/08/2026
   (décision Miguël : « vérité sur tout le site, toutes résolutions »).
   Zéro défilement horizontal de PAGE à toutes les largeurs ; le contenu
   large défile DANS son conteneur. Coupables mesurés dans la bande
   1100-1240 px : nav du shell (+34 px sur toutes les pages), .dtable de
   Pilotage (+110 px), halo décoratif KPI (+4 px).
   ═══════════════════════════════════════════════════════════════ */
/* 1. La barre de navigation ne pousse plus la page : elle défile en interne.
   ⚠ Effet de bord assumé et corrigé : overflow-x:auto force overflow-y en
   auto (spec CSS) → la nav CLIPPE ses enfants absolus. Le menu déroulant
   ouvert passe donc en position:FIXED (variables posées par shell.js) et
   échappe au clipping — les deux exigences tiennent ensemble. */
.niv1 .nav{min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.niv1 .nav::-webkit-scrollbar{display:none}
.shell-dropdown.is-open{position:fixed;top:var(--dd-top,64px);left:var(--dd-left,8px);right:auto}
/* 2. Les tableaux larges défilent dans leur cadre, la page ne bouge pas. */
.dtable{display:block;overflow-x:auto;max-width:100%}
/* 3. Décors débordants rognés À LA SOURCE (le halo KPI dépassait de 4 px).
   ⚠ Le garde-fou global overflow-x:clip sur main.page a été RETIRÉ le 08/08
   soir : il faisait de main.page le conteneur de référence des
   position:sticky descendants (en-têtes collants, colonne jauge…) — le clip
   vit désormais UNIQUEMENT sur les conteneurs fautifs (nav, .dtable, cartes
   KPI), le critère « zéro défilement horizontal » restant vérifié aux 5
   largeurs après chaque pose. */

/* — Checklist premier démarrage (fiche presque vide) — */
.et-steps{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.et-step{display:flex;gap:10px;align-items:center}
.et-step .n{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font:800 12px var(--font,system-ui,-apple-system,sans-serif);color:#2a2110;background:linear-gradient(180deg,var(--or-1),var(--or-3))}
.et-step .t{font:600 13px var(--font,system-ui,-apple-system,sans-serif);color:var(--on-glass-1,#e8ecf4)}
.et-step.done .n{background:var(--accent);color:#fff}
.et-step.done .t{opacity:.55;text-decoration:line-through}

/* etape 2 supervision (19/08/2026) : le client, en tete de la popup appareil */
.dm-client{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0BAE9F;margin-bottom:2px;}

/* ─────────────────────────────────────────────────────────────────────────
   RÈGLE DE FRAÎCHEUR (19/08/2026) — aucune donnée ne s'affiche comme fraîche
   si elle ne l'est pas. Au-delà du seuil de silence, les mesures sont GELÉES :
   elles restent lisibles (elles ont une valeur d'historique) mais elles ne
   prétendent plus décrire l'instant. La fraîcheur, elle, ne s'estompe jamais.
   ───────────────────────────────────────────────────────────────────────── */
.cl-perime{
  display:flex;align-items:center;gap:8px;
  margin:8px 0 6px;padding:8px 11px;border-radius:9px;
  background:rgba(120,140,160,.14);border:1px solid rgba(120,140,160,.32);
  color:#8FA3B4;font-size:12px;line-height:1.35;
}
.cl-perime b{color:#B7C6D2;}
.cl-perime svg{flex:none;width:15px;height:15px;opacity:.85;}
.est-gele{opacity:.45;filter:grayscale(.75);}
.est-gele .pas-gele{opacity:1;filter:none;}
.crapport{
  margin-left:auto;margin-right:6px;
  background:rgba(11,174,159,.12);border:1px solid rgba(11,174,159,.32);
  color:#0BAE9F;border-radius:7px;padding:3px 9px;font-size:11.5px;font-weight:700;
  white-space:nowrap;cursor:pointer;
}
.crapport:disabled{opacity:.42;cursor:not-allowed;}

/* ───── LOT 1 NAS (19/08/2026) : identité + accès DSM, gabarit dédié ───── */
.cl-nas{display:flex;flex-wrap:wrap;gap:6px;margin:8px 10px 2px;}
.cl-nasid{
  display:inline-flex;align-items:baseline;gap:5px;
  background:rgba(120,140,160,.14);border:1px solid rgba(90,107,122,.34);
  border-radius:7px;padding:3px 9px;font-size:12px;color:#1A2430;
}
.cl-nasid b{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#5A6B7A;font-weight:800;}
.cl-nasid.v-ok{border-color:rgba(11,122,110,.45);color:#0B7A6E;}
.cl-nasid.v-warn{border-color:rgba(169,106,16,.45);color:#A96A10;}
.cl-nasid.v-na{opacity:1;color:#5A6B7A;}
.cl-nasqc{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(10,124,136,.12);border:1px solid rgba(10,124,136,.45);
  border-radius:7px;padding:3px 10px;font-size:12px;font-weight:700;
  color:#0A7C88;text-decoration:none;
}
.cl-nasqc:hover{background:rgba(0,212,230,.2);text-decoration:underline;}
/* 16/09 (Miguël : « le pop-up ne dit rien ») — LA LISTE DES ALERTES ACTIVES.
   Une ligne par alerte : la date en chiffres, le mot de travail en gras, le
   message du boîtier ou de l'agent ensuite. Un liseré à gauche dit la gravité —
   même grammaire que les pastilles (rouge critique, orange alerte, gris mineur).
   Le fond reste blanc : dix lignes sur un fond teinté se lisent moins bien. */
.cl-alertes{list-style:none;margin:6px 10px 2px;padding:0;display:flex;flex-direction:column;gap:4px}
.cl-alertes li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:5px 9px;
  border:1px solid rgba(90,107,122,.34);border-left-width:4px;border-radius:7px;background:#fff;
  font:500 12px/1.35 var(--font,system-ui,sans-serif);color:#1A2430}
.cl-alertes li.sev-critical{border-left-color:#c0392b}
.cl-alertes li.sev-warning {border-left-color:#e08a1e}
.cl-alertes li.sev-info    {border-left-color:#8fa3b3}
.cl-al-q{font:800 10.5px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#5A6B7A;letter-spacing:.02em;white-space:nowrap}
.cl-al-t{font-weight:800;color:#1A2430}
.cl-alertes li.sev-critical .cl-al-t{color:#9a2a1e}
.cl-alertes li.sev-warning  .cl-al-t{color:#8a5209}
.cl-al-m{flex:1 1 100%;color:#4a6068;overflow-wrap:anywhere}
.cl-al-plus{font:600 11px var(--font,system-ui,sans-serif);color:#5A6B7A;border:0;padding:0 9px;background:none}
/* « ✓ vu » : le bouton d'acquittement, discret jusqu'au survol de la ligne. */
.cl-al-ok{margin-left:auto;flex:0 0 auto;padding:1px 8px;border:1px solid rgba(11,122,110,.45);border-radius:999px;
  background:#fff;color:#0B7A6E;font:800 10.5px var(--font,system-ui,sans-serif);cursor:pointer;line-height:1.5}
.cl-al-ok:hover{background:#0B7A6E;color:#fff}
.cl-al-ok[disabled]{opacity:.5;cursor:wait}
.cl-alertes li.ok-fait{opacity:0;max-height:0;padding:0;margin:0;border:0;overflow:hidden;transition:opacity .25s,max-height .3s}

/* 19/08/2026 : pastille « Sans nouvelles » — les muets ne sont plus confondus
   avec les postes depourvus d agent. */
.sup-page .pill.sil{background:#5b21b6;border-color:#7c3aed;color:#fff;}
.sup-page .pill.sil.active{box-shadow:0 0 8px rgba(168,85,247,.5);}

/* ═════ 26/08/2026 — PASTILLE « EN ATTENTE » (regle canonique 7K-REF-INT-007 v3)
   Une case payee dont la machine n'est pas encore posee : une TACHE, pas un etat.
   Teinte : le meme ardoise que « Sans agent » (.pill.empty), assombri d'un cran —
   les deux disent « il manque une machine », mais l'une est un CONSTAT de
   supervision et l'autre un RESTE A FAIRE. Palette existante, aucune teinte neuve. */
.pill.attente{background:#94a3b8;color:#0f172a;border-color:#7c8ea3}
.sup-page .pill.attente{background:#94a3b8;color:#0f172a;border-color:#7c8ea3}
.sup-page .pill.attente.active{box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 10px rgba(148,163,184,.45)}

/* ═════ 20/08/2026 — NAVIGATION ATTEIGNABLE À TOUTE LARGEUR (socle) ═════
   Charte ÉQUILIBRE DE PAGE portée à CINQ largeurs : 2560 / 1440 / 1280 / 768 /
   mobile, la tablette devenant éliminatoire comme les autres.

   CE QUI A ÉTÉ MESURÉ, ET CE QUI ÉTAIT FAUX DANS MON PREMIER CONSTAT.
   J'avais annoncé la nav « non défilable » : je mesurais `.niv1`, la barre
   extérieure, alors que la piste est `.nav`. La piste DÉFILE bien
   (overflow-x:auto, ligne 2206). Les entrées n'étaient donc pas inatteignables.

   LE VRAI DÉFAUT, à 768 : la piste est étranglée à 274px sur 753 — une réserve
   de logo de 172px et un bloc droit de 281px lui laissent 36% de la barre pour
   8 entrées — et surtout « Plus », qui CONTIENT TOUT LE RESTE, est le DERNIER
   élément de la piste : il fallait défiler jusqu'au bout pour trouver l'issue
   de secours. Une issue de secours qu'il faut chercher n'en est pas une.

   DEUX GESTES, AUCUN CHANGEMENT DE BALISAGE :
   1. « Plus » est ÉPINGLÉ à droite de la piste — toujours visible, toujours
      cliquable, à toutes les largeurs.
   2. Aux largeurs étroites, on rend de la place à la piste : logo réduit,
      raccourci clavier et nom d'utilisateur masqués (l'icône reste).
   Le menu déroulant lui-même n'est pas affecté : shell.js le pose déjà en
   position:fixed via --dd-top/--dd-left, il ne peut donc pas être rogné. */

.niv1 .nav .nav-item.has-dropdown{position:sticky;right:0;z-index:3;border-radius:8px}

/* Le voile n'apparaît QUE lorsque la piste peut déborder : au-delà, il serait
   un ornement inutile sur un fond déjà sombre. */
/* 11/09 — neuf entrées (l'€ est arrivé) : sous 1440 px les boutons se
   resserrent un peu et tout tient à 1366 px sans défiler. */
@media (max-width:1440px){
  .niv1 .nav>a,.niv1 .nav>.nav-item>a{padding:0 10px}
}
@media (max-width:1420px){
  .niv1 .nav .nav-item.has-dropdown > a{
    background:rgba(10,18,26,.78);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    box-shadow:-14px 0 14px -8px rgba(10,18,26,.92);
  }
}

@media (max-width:1100px){
  .niv1{padding-left:104px}
  .logo{height:38px}
  .logo img{height:38px}
  .niv1-right{gap:6px}
  .niv1-right .shell-search{padding-left:8px;padding-right:8px}
  .niv1-right .shell-search kbd{display:none}
  .niv1-right .user span{display:none}
}
/* 18/09 (Miguël, « Nouveau ticket » ouvert depuis le téléphone : « titre bien posé ») — LE BANDEAU
   AU TÉLÉPHONE. Le logo se fait petit, le titre doré tient sur une ligne, les deux côtés du second
   niveau ne prennent que leur place. */
@media (max-width:640px){
  .niv1{padding-left:58px;gap:6px}
  .logo{left:8px;top:8px;height:32px}
  .logo img{height:32px}
  /* 23/09 (Miguël, page Résultat au téléphone : « +4 60… » au lieu de « +4 607 € ») — LA BARRE DES
     ONGLETS NE TIRE PLUS LA PAGE. Sa colonne pouvait grandir sans limite : six onglets faisaient
     663 px de page sur un écran de 390, et tout le contenu était coupé à droite. Ici elle rétrécit
     et ses onglets glissent du doigt ; le titre doré s'efface, la page le redit dans sa première carte. */
  .niv2{grid-template-columns:minmax(0,1fr) auto auto;padding:0 12px}
  .niv2-center{display:none}
  /* justify-self:start (plus haut) fait prendre à la barre la largeur de ses onglets, même si sa
     colonne est plus étroite : elle déborde alors de la page. Ici elle remplit sa colonne, pas plus. */
  .niv2-left{justify-self:stretch;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
  .niv2-left::-webkit-scrollbar{width:0;height:0}
  .niv2 .title-gold{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
}

/* 20/08/2026 — cf. shell.js : le titre du shell s'efface tant que la carte
   d'en-tête de la page affiche le même nom. Transition douce pour que la
   réapparition au défilement ne soit pas un clignotement. */
.niv2 .title-gold{transition:opacity .16s ease, visibility .16s ease}
.niv2 .title-gold.est-double{opacity:0;visibility:hidden}

/* =====================================================================
   SUPERVISION — barre de filtres et badges (25/08/2026, constat Miguël)
   Ajouté EN FIN DE FICHIER : rien n'est réécrit, tout se surcharge par la
   cascade. Retour arrière = retirer ce bloc.
   ===================================================================== */

/* --- LA BARRE ---------------------------------------------------------
   Cause du rang orphelin, mesurée : .sup-pills était une GRILLE DE SIX
   COLONNES contenant SEPT boutons. Le septième n'avait pas d'autre choix
   que de descendre. On passe donc en ligne souple, sans retour, avec des
   groupes séparés — et le défilement, s'il devient nécessaire, se fait
   DANS le conteneur, jamais sur la page (règle 2 de la charte).            */
.sup-page .sup-pills{
  display:flex; flex-wrap:nowrap; gap:4px; align-items:center;
  max-width:none; overflow-x:auto; overflow-y:hidden;
  /* min-width:0 est INDISPENSABLE : sans lui un element flexible ne peut pas
     retrecir sous la taille de son contenu, et le conteneur DEBORDE malgre son
     overflow-x. Mesure du 25/08 : 332 px de contenu pour 320 px de page. */
  flex:1 1 auto; min-width:0;
  scrollbar-width:none; padding-bottom:1px;
}
.sup-page .sup-pills::-webkit-scrollbar{height:0}

/* Moins de rembourrage : le texte et le compte suffisent à faire la forme. */
.sup-page .sup-pills .pill{padding:0 7px; gap:4px; flex:0 0 auto}

/* Le compte occupe une largeur RÉSERVÉE, en chiffres à chasse fixe : sans
   cela « 7 » et « 346 » ne peuvent pas s'aligner, quelle que soit la
   largeur qu'on donne aux pastilles.                                        */
.sup-page .sup-pills .pill .n{min-width:2.6ch; text-align:right}

/* Séparateur de groupe : gravités | absences | nature.                      */
.sup-page .pill-sep{
  flex:0 0 auto; width:1px; height:13px; margin:0 5px;
  background:rgba(255,255,255,.20);
}

/* Le sélecteur de NATURE croise les autres filtres : il ne peut donc pas
   porter les couleurs de gravité, sous peine de faire croire qu'il s'exclut
   avec elles. Il est neutre au repos, émeraude quand il est actif.          */
.sup-page .pill.kind{
  background:rgba(255,255,255,.07); color:var(--tx-on-bar,#f0f3fa);
  border-color:rgba(255,255,255,.16);
}
.sup-page .pill.kind:hover{background:rgba(255,255,255,.13)}
.sup-page .pill.kind.on{
  background:var(--accent); border-color:var(--accent-bright); color:#fff;
  box-shadow:0 0 0 1px rgba(11,174,159,.45);
}

/* --- LES BADGES -------------------------------------------------------
   Les deux ajouts sont posés EN COIN, en position absolue : la composition
   centrale (icône, état, nom) ne bouge pas d'un pixel et la hauteur de 76 px
   est préservée.                                                            */

/* Génération d'agent. Le parc en porte désormais deux, et la décision « 5.x »
   demande de les distinguer D'UN REGARD — une popup n'est pas un regard.     */
.sup-page .dev .dgen{ opacity:.75;
}
.sup-page .dev .dgen.g5{ opacity:1;}
.sup-page .dev .dgen.gwh{ opacity:.9}

/* Âge du dernier contact. « Sans nouvelles » sans durée est inexploitable :
   deux heures ou trois mois ? C'est ce qui permet de trier 94 machines
   muettes au lieu de les subir.                                             */
.sup-page .dev.err .dage,
.sup-page .dev.hors .dage{}

/* Le nom : troncature AU MILIEU, pas à la fin. « PIERR0-NFI1-… » ne désigne
   rien, car la partie qui DISTINGUE les machines est justement celle qui
   était coupée. Le milieu cède, les deux bouts restent.                      */
.sup-page .dev .dname{
  display:block;
}
.sup-page .dev .dname .mid{display:none}

/* --- LE SURVOL --------------------------------------------------------
   L'infobulle existait déjà mais ne portait que le nom et l'état. Elle
   devient une petite fiche. Elle reste un RACCOURCI : le même contenu
   s'obtient au toucher par la pop-up, car au téléphone le survol n'existe
   pas (règle 5 de la charte).                                               */
.sup-page .dev .tip{
  min-width:190px; max-width:260px; text-align:left; line-height:1.45;
  white-space:normal;
}
.sup-page .dev .tip .tl{
  display:flex; justify-content:space-between; gap:10px;
  font:600 10px var(--font,system-ui,-apple-system,sans-serif); color:var(--tx-on-bar-2);
}
.sup-page .dev .tip .tl b{color:var(--tx-on-bar,#f0f3fa); font-weight:700}
.sup-page .dev .tip .thd{
  font:800 12px var(--font,system-ui,-apple-system,sans-serif); color:#fff; margin-bottom:3px;
  word-break:break-all;
}
.sup-page .dev .tip .tsep{
  height:1px; background:rgba(255,255,255,.14); margin:5px 0;
}

/* 25/08/2026 — LA COUPE EST L'AFFAIRE DU CSS, PAS DU PHP.
   Le PHP choisit l'unite de sens (le dernier segment qui designe) ; lui seul
   sait ce qu'un nom VEUT DIRE. Le CSS choisit ou couper ; lui seul connait la
   largeur reelle a la fonte reelle. Sans cette ligne, un nom trop large etait
   tranche NET au pixel — on ne voyait meme pas qu'il manquait quelque chose. */

/* 25/08/2026 — EN DESSOUS DE 900 px, LA BARRE PREND SA PROPRE LIGNE.
   Mesure a 375 px : la barre etait reduite a 63 PIXELS — un seul bouton
   visible a la fois. La cause n'etait pas la barre mais sa voisine : le champ
   de recherche est fige a 240 px (flex:0 0 auto) et REFUSE de retrecir ; il
   mangeait 240 des 375 disponibles, la barre heritait des miettes.
   Faire retrecir la recherche aurait rendu les deux inutilisables. On ne
   partage donc plus : chacune prend sa ligne. C'est la regle 5 de la charte
   — le mobile n'est pas un bureau etroit, c'est une autre disposition. */
/* 27/08/2026 — LE SEUIL DE REPLI MONTE DE 900 A 1300 px (arbitrage CAI).
   Temoin rendu depuis le filet et mesure : la bande 901-1400 px etait DEJA
   en surcharge AVANT le cadran de fraicheur — a 1280 px « MAJ » etait rogne
   de 3 px, a 901 px « 66 clients », « Live » et « MAJ » l etaient de 15, 62
   et 101 px. Un bandeau qui coupe l heure de mise a jour a 101 px n affiche
   rien. Ce n est pas une place faite au cadran : c est la reparation d un
   defaut plus vieux que lui, que le cadran a eu le merite de reveler.
   Meme mecanisme qu au 25/08, meme raisonnement, seule la largeur change :
   quand on ne tient plus, on ne comprime pas — chacun prend sa ligne. */
@media (max-width: 1400px){
  .sup-page .niv2{
    flex-wrap:wrap; row-gap:8px;
    /* 25/08, defaut vu AU CLICHE et non a la mesure : la barre CHEVAUCHAIT les
       tuiles. Cause : .niv2 porte height:36px ET min-height:36px — la hauteur
       d'UNE rangee — avec overflow:visible. Des qu'on l'autorise a passer a la
       ligne, son contenu demande 98 px : les deux rangees du bas se posaient
       PAR-DESSUS les badges, sans rien deborder horizontalement.
       Mes mesures ne regardaient que l'axe horizontal ; elles ont dit « rien a
       signaler » sur une page cassee. Une hauteur figee et un retour a la ligne
       ne peuvent pas coexister : on libere la hauteur, le minimum garde l'aspect
       d'origine quand une seule rangee suffit. */
    height:auto; min-height:36px; padding-block:4px; align-items:center;
  }
  .sup-page .niv2 .sup-search{ flex:1 1 100%; min-width:0; }
  .sup-page .niv2 .sup-pills{ flex:1 1 100%; min-width:0; order:2; }
  .sup-page .niv2 .niv2-right{ order:3; margin-left:auto; }
}

/* 27/08/2026 — ENTRE 901 ET 1300 px : DEUX RANGEES, PAS TROIS.
   Le repli du 25/08 a ete ecrit pour le telephone : il etale la recherche sur
   toute la largeur (flex:1 1 100%). A 1280 px cela donne un champ de 1237 px
   pour un besoin de 240, et une barre de 101 px de haut la ou 36 suffisaient —
   soixante-cinq pixels perdus en haut de CHAQUE page, sur la largeur de portable
   la plus repandue. Un repli doit avoir l'air choisi, pas subi.
   On garde donc la recherche a sa taille et on la fait cohabiter avec le bloc de
   droite sur la premiere rangee ; seules les pastilles prennent leur ligne.
     mesure a 1280 : recherche 240 + droite 322 + ecarts ~20 = 582 / 1237
                     pastilles 759 / 1237
   En dessous de 901 px rien ne change : c'est un telephone, et la regle du
   25/08 y reste souveraine — chacun sa ligne, la recherche comprise. */
@media (min-width: 901px) and (max-width: 1400px){
  .sup-page .niv2 .sup-search{ flex:0 0 240px; min-width:240px; order:1; }
  .sup-page .niv2 .niv2-right{ order:2; margin-left:auto; }
  .sup-page .niv2 .sup-pills{  flex:1 1 100%; min-width:0; order:3; }
  /* Les pastilles ont leur ligne, mais elles ont AUSSI besoin du serrage du
     25/08 : mesure a 901 px, elles demandent 899 px pour 858 disponibles —
     41 px, soit la derniere pastille hors champ. On reprend les valeurs
     eprouvees ce jour-la, ecart 2 px et rembourrage 6 px : un pixel d'ecart
     ne se voit pas, une pastille absente se remarque. */
  .sup-page .niv2 .sup-pills{ gap:2px; }
  .sup-page .niv2 .sup-pills .pill{ padding-inline:6px; }
}

/* 25/08/2026 — ENTRE 901 ET 1400 px, C'EST LA RECHERCHE QUI CEDE.
   Mesure a 1280 px (une des quatre largeurs de la charte) : la barre demandait
   788 px et n'en avait que 719. Soixante-neuf manquants — soit exactement la
   derniere pastille, « NAS ». Or NAS est justement le selecteur qu'on vient
   d'ajouter : un filtre qu'on ne voit pas est un filtre qu'on n'utilisera pas.
   Deux candidats pour ces 69 px : rogner le rembourrage des dix boutons, ou
   faire ceder la recherche. On a choisi la recherche, parce qu'elle a DU MOU
   (un champ de saisie reste utilisable a 160 px) alors que la barre n'en a pas :
   ses boutons sont deja a 11 px et 7 px de rembourrage — les serrer davantage
   les rendrait durs a viser, et la regle 5 vaut aussi a la souris. */
/* 27/08/2026 — LE PLAFOND DE LA COMPRESSION MONTE DE 1400 A 1600 px.
   1440 px ne tombait dans AUCUNE bande : le repli s arrete a 1300, la
   compression s arretait a 1400. Temoin rendu depuis le filet et mesure :
   a 1440 px, 39 px de pastilles etaient DEJA caches avant tout ce chantier.
   Le plafond de 1400 avait ete pose en supposant qu au-dela « ca tient » ;
   la mesure dit non. On ne choisit pas 1450 mais 1600, parce qu on ne
   rejoue pas au pixel pres et parce que le serrage ne se voit pas quand il
   n est pas necessaire — alors qu une pastille hors champ, si. */
@media (min-width: 1401px) and (max-width: 1560px){
  .sup-page .niv2 .sup-search{ flex:0 0 160px; min-width:160px; }
  /* Les 80 px liberes ne sont pas tous alles a la barre : le bloc de droite
     et les ecarts en ont pris leur part. Mesure : 777 pour 788 necessaires,
     ONZE px manquants. On les prend sur l'ecart entre boutons — 13 ecarts
     a 1 px de moins font 13 px, et un pixel d'ecart en moins ne se voit pas
     alors qu'une pastille hors champ se remarque. */
  .sup-page .niv2 .sup-pills{ gap:2px; }
  /* A 3 px d'ecart il restait DEUX pixels de trop (776 pour 774). On ne
     rejoue pas au pixel pres : la fonte peut se rendre legerement
     differemment d'un poste a l'autre, et une marge de deux pixels n'est
     pas une marge. On descend donc l'ecart a 2 px ET le rembourrage de 7
     a 6 px — ce qui laisse une trentaine de pixels de jeu. Un pixel de
     rembourrage en moins ne change rien a la visee ; c'est la HAUTEUR du
     bouton qui fait la cible, et elle ne bouge pas. */
  .sup-page .niv2 .sup-pills .pill{ padding-inline:6px; }

}

/* 25/08/2026 — SUR MOBILE, DIRE QU'IL Y A UNE SUITE.
   Mesure a 375 et 320 px : les dix pastilles demandent 759 px, le cadre en
   offre 347 et 292. Aucun arrangement ne fera tenir dix boutons dans 292 px —
   la barre defile donc dans SON PROPRE cadre (la page, elle, ne deborde
   jamais : zero pixel aux deux largeurs).
   Mais un defilement dont on ignore l'existence n'existe pas : la derniere
   pastille — « NAS », justement celle qu'on vient d'ajouter — tombe hors champ
   sans que rien ne le signale. Le degrade de bord est le seul aveu possible :
   il dit « ca continue » sans prendre un pixel de hauteur, denree rare sur un
   telephone. C'est aussi pour cela qu'on ne fait pas RETOURNER les pastilles a
   la ligne : quatre rangees mangeraient un tiers de l'ecran avant meme qu'on
   ait vu une seule machine. */
@media (max-width: 900px){
  .sup-page .niv2 .sup-pills{
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    scroll-snap-type: x proximity;
  }
  .sup-page .niv2 .sup-pills .pill{ scroll-snap-align:start; }
}

/* 25/08/2026 — TROIS PROVENANCES DE NOM, TROIS TRAITEMENTS (demande Miguël).
   Un poste peut s'appeler de trois façons, et elles ne valent PAS la même chose :

     · le LIBELLÉ saisi sur la fiche client — le seul choisi par un humain pour
       désigner ce poste-là. Stable. C'est celui qu'on veut voir.
     · la SESSION remontée par l'agent — vraie, mais volatile : elle change au
       prochain utilisateur qui ouvre une session.
     · le nom de MACHINE (NetBIOS) — un repli. Il ne désigne personne.

   Jusqu'ici les deux derniers partageaient la même couleur : rien ne distinguait
   « ce poste est nommé » de « personne ne l'a nommé ». Or c'est une information
   de travail — un poste encore désigné par son nom NetBIOS est un poste à nommer
   sur la fiche client. On l'éteint donc au lieu de le déguiser en nom d'utilisateur.

   Le libellé, lui, passe en pleine lumière : c'est la demande. */
.sup-page .dev .dname.n-manuel{ letter-spacing:.01em;
}

/* Dans l'infobulle, la provenance se lit d'un mot et prend la même couleur que
   le nom du badge : les deux se répondent, on n'a pas à faire le lien de tête. */
.sup-page .dev .tip .tprov{ font-weight:700; }
.sup-page .dev .tip .tprov.t-manuel { color:#ffffff; }
.sup-page .dev .tip .tprov.t-auto   { color:#8ee9c9; }
.sup-page .dev .tip .tprov.t-machine{ color:#f0b46b; }  /* ambre : c'est une invitation à agir */

/* 25/08/2026 — LE GROUPE DE NATURE DEVIENT UN BLOC SEGMENTÉ
   (décision Miguël, conseil CAI).

   DEUX GRAMMAIRES VISUELLES POUR DEUX MÉCANIQUES. Les gravités sont des états
   MULTIPLES et indépendants — chacune garde sa gélule ronde, détachée, qu'on
   allume ou qu'on éteint pour elle-même. La nature est un sélecteur EXCLUSIF :
   une seule valeur à la fois, toujours une. Un bloc segmenté dit exactement
   cela — des segments jointifs dans un même cadre, dont un seul est plein.
   La forme n'est plus décorative : elle ANNONCE le comportement avant le clic.

   Conséquence de méthode : le séparateur qui précédait le groupe est RETIRÉ.
   Le bloc se sépare tout seul — un trait de plus n'aurait fait que répéter ce
   que le cadre dit déjà, en coûtant cinq pixels qu'on n'a pas (cf. le verrou
   des 29 px de jeu à 1280).

   Aucune couleur en dur : on réutilise --accent et --accent-bright du produit. */
.sup-page .niv2 .sup-pills .segkind{
  display:inline-flex; align-items:stretch; flex:0 0 auto;
  border-radius:5px;                     /* coins carrés, pas capsule */
  overflow:hidden;                       /* les segments épousent le cadre */
  background:rgba(255,255,255,.05);
  /* Le cadre est posé en ombre INTÉRIEURE : une bordure réelle aurait ajouté
     2 px de largeur, et la largeur est comptée ici. */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}

.sup-page .niv2 .sup-pills .segkind .pill.kind{
  border:0; border-radius:0; background:transparent; margin:0;
  /* Le filet de séparation est lui aussi INTÉRIEUR : il ne coûte pas un pixel. */
  box-shadow:inset 1px 0 0 rgba(255,255,255,.12);
}
.sup-page .niv2 .sup-pills .segkind .pill.kind:first-child{ box-shadow:none; }

.sup-page .niv2 .sup-pills .segkind .pill.kind:hover{
  background:rgba(255,255,255,.10);
}

.sup-page .niv2 .sup-pills .segkind .pill.kind.on{
  background:var(--accent); color:#fff;
  /* PAS de halo extérieur ici : sur une gélule isolée il souligne le contour,
     dans un bloc jointif il déborderait sur les segments voisins et casserait
     le cadre. Le fond plein suffit — c'est le principe du bloc segmenté. */
  box-shadow:inset 0 0 0 1px var(--accent-bright);
}
.sup-page .niv2 .sup-pills .segkind .pill.kind.on:hover{ background:var(--accent); }

/* 25/08/2026 — LA NATURE EST ÉCARTÉE DU GROUPE DES GRAVITÉS (décision Miguël).

   « On choisit d'abord QUOI, ensuite QUEL NIVEAU. » Le sélecteur de nature
   RÉDUIT la population ; les gravités filtrent DEDANS. Ce ne sont pas deux
   étapes du même choix, c'est un choix PUIS un autre — et l'écart le dit.

   L'écart se prend en MARGE, pas avec un trait : la barre porte déjà deux
   séparateurs entre les groupes de gravité, un troisième ne distinguerait plus
   rien. Le bloc segmenté a son propre cadre — il n'a pas besoin qu'on le borde
   une seconde fois. Coût mesuré : 8 px (10 au lieu des 2 px d'écart courant),
   pris sur les 17 px que le passage en bloc segmenté vient de rendre. */
.sup-page .niv2 .sup-pills .segkind{ margin-right:10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   04/09/2026 — LES CARTES D'APPAREIL REPRENNENT LA FORME DE LA V1
   Demande de Miguel : « des badges identiques a V1, dans les tuiles actuelles
   de srv1, en gardant les couleurs dynamiques des bords de tuiles ».

   CE QUI CHANGE : la carte d'un appareil se remplit d'une couleur pastel
   (vert, ambre, rouge, bleu) et son texte passe en fonce, comme sur la V1.
   Jusqu'ici srv1 laissait un fond sombre avec un simple lisere de couleur :
   lisible de pres, illisible d'un coup d'oeil.

   CE QUI NE CHANGE PAS : les tuiles de CLIENT, leurs bords dynamiques, la
   grille, les tailles, le pop-up. On habille la carte, on ne refond rien.

   D'OU CA VIENT : le BAC A SABLE avait deja fait ce travail cote ordinateur.
   Ces regles en sont le PORTAGE FIDELE, releve ligne a ligne — pas une
   reinvention. Cote mobile personne ne l'avait fait : voir le bloc jumeau
   dans 7000pro-mobile.css.

   CONTRASTE (§9) : texte fonce sur pastel clair, toutes les paires au-dessus
   de 7:1. #1e293b sur #bbf7d0 = 11:1 · #0f172a sur #fecaca = 13:1.

   POURQUOI EN FIN DE FICHIER : meme specificite que les regles d'origine, il
   l'emporte par l'ordre de la cascade. AUCUN !important (§8).
   RETOUR ARRIERE : supprimer ce bloc, rien d'autre.
   ═══════════════════════════════════════════════════════════════════════════ */

.sup-page .dev.ok{background:#bbf7d0;border-color:#34d399}
.sup-page .dev.info{background:#bfdbfe;border-color:#60a5fa}
.sup-page .dev.warn{background:#fde68a;border-color:#fbbf24}
.sup-page .dev.err{background:#fecaca;border-color:#f87171}
.sup-page .dev.hors{background:#e2e8f0;opacity:.55;border-style:dashed;border-color:#475569}

.sup-page .dev .dico{width:26px;height:26px;line-height:0}
/* 07/09/2026 — UNE TUILE-LIEN A BESOIN QU'ON LUI DONNE SON ENCRE.
   Les tuiles de tickets sont des liens (on clique pour ouvrir le ticket).
   Sans `color`, un lien prend le bleu du navigateur — et les dessins, traces
   en `currentColor`, sortaient tous en rgb(0,0,238), quelle que soit la
   couleur de la tuile. Constat de Miguel : « il faut ameliorer les petits
   dessins » ; ils n'etaient pas trop petits, ils etaient bleu vif. */
a.dev, .sup-page a.dev{color:#0f172a;text-decoration:none}
a.dev:hover, .sup-page a.dev:hover{text-decoration:none}
/* 07/09/2026 — UNE COULEUR PAR SUJET (demande de Miguel : « modifier leurs
   couleurs et moins grossiers »). Le FOND de la tuile dit le retard ; le
   DESSIN dit de quoi il s'agit. Deux informations sur deux canaux, sans se
   marcher dessus : l'oeil trie par sujet sans avoir a lire.
   Teintes au niveau 700 et non aux tons vifs de V1 : nos tuiles sont pastel,
   un ton vif dessus crie et se lit mal.
   Trait a 1,5 dans une grille de 24 : a 21 px, 2,2 faisait une masse. */
.sup-page a.dev .dico{width:21px;height:21px;color:#475569;opacity:1}
.sup-page a.dev .dico svg{width:100%;height:100%;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sup-page a.dev .dico.t-wrench{color:#b45309}
.sup-page a.dev .dico.t-wifi{color:#4338ca}
.sup-page a.dev .dico.t-mail{color:#be185d}
.sup-page a.dev .dico.t-printer{color:#c2410c}
.sup-page a.dev .dico.t-server{color:#6d28d9}
.sup-page a.dev .dico.t-laptop{color:#1d4ed8}
.sup-page a.dev .dico.t-monitor{color:#1d4ed8}
.sup-page a.dev .dico.t-hard-drive{color:#0f766e}
.sup-page a.dev .dico.t-package{color:#4f46e5}
.sup-page a.dev .dico.t-shield-check{color:#b91c1c}
.sup-page a.dev .dico.t-receipt{color:#a16207}
.sup-page a.dev .dico.t-graduation-cap{color:#7e22ce}
.sup-page a.dev .dico.t-database{color:#0369a1}
.sup-page a.dev .dico.t-user{color:#0f766e}
.sup-page a.dev .dico.t-phone{color:#0e7490}
.sup-page a.dev .dico.t-lightbulb{color:#a16207}
.sup-page a.dev .dico.t-calendar{color:#4338ca}
.sup-page a.dev .dico.t-refresh-cw{color:#15803d}
.sup-page a.dev .dico.t-ticket{color:#475569}

.sup-page .dev .dname{font:500 11.5px var(--font,system-ui,-apple-system,sans-serif);color:#0f172a;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.15}
.sup-page .dev .dname.named{color:#0f172a;font-weight:600}
/* 07/09/2026 — 700 et non 800 (constat Miguël : « gras moche »). Un nom
   saisi a la main portait `.named` (700) ET `.n-manuel` (800) : la graisse
   la plus lourde de la page, sur le texte le plus frequent. L'echelle
   voulue tient sans crier — machine 500, auto 600, humain 700 — et
   l'interlettrage etirait le mot sans rien ajouter. */
/* 07/09/2026, seconde passe — « encore du gras » (Miguel). La distinction
   entre les trois origines d'un nom est portee par la COULEUR, pas par la
   graisse : noir = nomme par un humain, vert = session Windows, gris = nom
   de machine. La graisse redescend donc a 600 pour ce qu'un humain a ecrit
   et 500 pour le reste. La hierarchie change de support, elle ne disparait pas. */
.sup-page .dev .dname.n-manuel{color:#5c4105;font-weight:700}   /* 02/10 : OR = quelqu'un l'a nomme. Assez fonce pour tenir sur les six fonds clairs,
      le pire etant le bleu #93c5fd a 5,26. L'or clair de la maison y ferait 1,2. */
.sup-page .dev .dname.n-auto{color:#3d4352;font-weight:500}   /* 02/10 : la session Windows est une deduction, elle perd le vert */
.sup-page .dev .dname.n-machine{color:#4b5768;font-weight:500;font-style:normal;letter-spacing:.02em}

.sup-page .dev .dstat{font:400 9.5px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.15}
.sup-page .dev .dstat.ok,
.sup-page .dev .dstat.info,
.sup-page .dev .dstat.warn,
.sup-page .dev .dstat.err{color:#1e293b}
.sup-page .dev .dstat.hors{color:#475569}

.sup-page .dev .dsub{font:600 9px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#4b5768;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.sup-page .dev .dgen{position:absolute;right:4px;bottom:3px;font:700 9px var(--mono,ui-monospace,SFMono-Regular,monospace);letter-spacing:.02em;color:#fff;background:#b45309;padding:0 3px;border-radius:3px;pointer-events:none}
.sup-page .dev .dgen.g5{color:#065f46;background:rgba(5,150,105,.16)}
.sup-page .dev .dgen.gwh{color:#1e40af;background:rgba(29,78,216,.14)}

.sup-page .dev .dage{position:absolute;left:5px;bottom:3px;font:600 9px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#475569;opacity:.85;pointer-events:none}
.sup-page .dev.err .dage,
.sup-page .dev.hors .dage{opacity:.95}

/* ── LE BLEU NUIT — 04/09/2026, idée de Miguël ───────────────────────────────
   Une carte dont le silence s'est produit hors des heures de travail prend un
   fond bleu nuit. Le matin, un écran plein de bleu nuit se lit d'un coup :
   ces machines-là ont dormi normalement. Ce qui n'est PAS bleu nuit s'est tu
   PENDANT le travail — et c'est cela qu'il faut regarder.

   Fond sombre, donc texte clair : c'est la seule carte du parc dans ce sens,
   et c'est voulu — c'est ce qui la fait reconnaître sans lire.
   Contraste (§9) : #e0e7ff sur #1e3a8a = 11:1 · #c7d2fe = 9:1 · #a5b4fc = 6,5:1.
   ─────────────────────────────────────────────────────────────────────────── */
.msup .dev.info.nuit, .sup-page .dev.info.nuit{background:#1e3a8a;border-color:#3b5bdb}
.msup .dev.info.nuit .dname, .sup-page .dev.info.nuit .dname,
.msup .dev.info.nuit .dname.named, .sup-page .dev.info.nuit .dname.named,
/* 02/10/2026 — L'OR ET LE BLANC VALENT AUSSI SUR LE BLEU NUIT (Miguel : « blanc pour nommage
   automatique depuis l'agent, dore quand c'est renomme manuellement »). Ces deux lignes
   portaient #e0e7ff et #bfdbfe : deux bleus pales, indiscernables a l'oeil, et elles battaient
   la regle generale `.dev.nuit` parce qu'elles sont PLUS PRECISES. Toutes les tuiles bleu nuit
   etant des tuiles `info`, la distinction n'apparaissait nulle part. Corrige ICI, a l'endroit
   qui gagne, et non par un `!important` qui aurait laisse le conflit en place. */
.msup .dev.info.nuit .dname.n-manuel, .sup-page .dev.info.nuit .dname.n-manuel{color:#f5d370}
.msup .dev.info.nuit .dname.n-auto, .sup-page .dev.info.nuit .dname.n-auto{color:#ffffff}
/* 02/10 — LE NOM CHOISI RESTE VERT SUR LE BLEU NUIT, mais un vert CLAIR : le vert fonce
   de la Supervision, pose pour un fond clair, disparait sur une tuile sombre. Une
   couleur se choisit pour tous les fonds ou elle apparait, jamais pour un seul. */
.msup .dev.nuit .dname.n-manuel, .sup-page .dev.nuit .dname.n-manuel{color:#f5d370}
/* 02/10 — ET L'AUTOMATIQUE PASSE AU BLANC sur le bleu nuit : c'est le nom que l'agent
   remonte, il n'a ete choisi par personne. Il s'efface, le nom choisi ressort. */
.msup .dev.nuit .dname.n-auto, .sup-page .dev.nuit .dname.n-auto{color:#ffffff}
.msup .dev.info.nuit .dname.n-machine, .sup-page .dev.info.nuit .dname.n-machine{color:#a5b4fc}
.msup .dev.info.nuit .dstat, .sup-page .dev.info.nuit .dstat,
.msup .dev.info.nuit .dstat.info, .sup-page .dev.info.nuit .dstat.info,
.msup .dev.info.nuit .dstat.warn, .sup-page .dev.info.nuit .dstat.warn{color:#c7d2fe}
.msup .dev.info.nuit .dage, .sup-page .dev.info.nuit .dage{color:#a5b4fc;opacity:1}

.msup .dev.info.nuit .dgen.g5, .sup-page .dev.info.nuit .dgen.g5{color:#a7f3d0;background:rgba(167,243,208,.14)}
.msup .dev.info.nuit .dgen.gwh, .sup-page .dev.info.nuit .dgen.gwh{color:#bfdbfe;background:rgba(191,219,254,.14)}

/* ── FILTRES PLUS COMPACTS (ordinateur) — 05/09/2026, demande de Miguël ──────
   Même geste que sur le mobile, à l'échelle de l'écran : les boutons faisaient
   déjà 22 px, on descend à 20 et on resserre les marges. L'écran d'ordinateur
   est moins à l'étroit, la réduction y est donc plus discrète.
   ─────────────────────────────────────────────────────────────────────────── */
.sup-page .pill{height:20px;padding:0 8px;font-size:10.5px;gap:4px}

/* ── LA CARTE REDESSINÉE — 05/09/2026, mise au point avec Miguël ─────────────
   Trois gestes, mesurés avant d'être posés :

   1) L'ICÔNE PASSE EN HAUT À GAUCHE et rétrécit à 18 px. Elle occupait 22 px
      au centre — plus d'un quart de la hauteur — pour dire une chose qu'on
      filtre déjà avec le rail « NAS / Serveurs / Postes ». Elle reste, mais
      elle ne mange plus la place du texte.

   2) LE NOM PASSE EN GRAS. 7 caractères en moyenne, il tient presque toujours
      (8 % seulement sont coupés) : c'est le repère, il doit se lire d'un coup.

   3) LE MOTIF PEUT TENIR SUR DEUX LIGNES. C'est LUI qui se coupait : 13
      caractères en moyenne, jusqu'à 21 — « Antivirus ancien +2 », « Sans
      nouvelles 12 j ». Or c'est la seule information qui dit QUOI FAIRE.
      Deux lignes au maximum, puis coupure : au-delà, la carte déborderait.

   Retour arrière : supprimer ce bloc.
   ─────────────────────────────────────────────────────────────────────────── */

.msup .dev .dico, .sup-page .dev .dico{position:absolute;
  width:18px;height:18px;order:0}
.msup .dev .dname, .sup-page .dev .dname{font-weight:700;font-size:10.5px;line-height:1.1;}
.msup .dev .dstat, .sup-page .dev .dstat{white-space:normal;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.15;max-height:2.3em}

/* ── LE NOM DE MACHINE, SOUS LE NOM DE LA PERSONNE — 05/09/2026 ──────────────
   « Pierre Marc » dit qui, « QUART0-FBE2 » dit laquelle. Le second est un
   complément : plus petit, plus fin, plus discret — il ne doit jamais voler la
   lecture au premier. Placé entre le nom et le motif (order:1).
   Contraste : #4b5768 sur les fonds pastel = 7:1 · #a5b4fc sur bleu nuit = 6,5:1.
   ─────────────────────────────────────────────────────────────────────────── */
.msup .dev .dsub, .sup-page .dev .dsub{order:1;font:400 8px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#4b5768;
  line-height:1;letter-spacing:.02em;opacity:.9;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.msup .dev.info.nuit .dsub, .sup-page .dev.info.nuit .dsub{color:#a5b4fc}

/* ── LES RAILS PLUS FINS — 05/09/2026, demande de Miguël ─────────────────────
   Les deux rails de tri passent de 22 à 19 px de haut, marges resserrées :
   le bandeau de filtres perd environ 12 px au total, gagnés par les tuiles.

   On s'arrête à 19 px : en dessous, la cible devient difficile à toucher au
   doigt. La largeur du bouton reste franche, c'est elle qui rattrape.
   ─────────────────────────────────────────────────────────────────────────── */
.msup .m-pills .segkind{padding:1px}
.msup .m-pills .segkind .pill.kind{height:19px;padding:0 8px;font-size:10px}
.msup .m-pills .segkind .segslide{top:1px;height:calc(100% - 2px)}
.sup-page .seg button{height:19px;padding:0 8px;font-size:10px}

/* ── LE NOM TOUCHAIT L'ICÔNE — 05/09/2026 10 h 15, vu par Miguël ─────────────
   L'icône est posée en haut à gauche, hors du flux : elle occupe de 5 à 23 px
   sous le bord. Le texte, lui, commençait à 18 px — les hauts de lettres
   venaient buter dessous.

   J'avais compensé par une marge sur le nom. C'était un bricolage : la marge
   se bagarre avec le centrage vertical de la carte, et le résultat dépend de
   la longueur du texte. On RÉSERVE la place à la source — la carte s'ouvre à
   26 px du haut — et le nom n'a plus besoin de marge du tout.

   Budget vérifié sur 86 px : 26 réservés en haut, 4 en bas, 56 pour le texte.
   Nom 12 + machine 8 + motif 20 sur deux lignes + espaces = 44. Il reste 12 px.
   ─────────────────────────────────────────────────────────────────────────── */
/* 07/09/2026 — LE CONTENU ETAIT CENTRE 11 PX TROP BAS. La tuile centre
   verticalement, mais dans ce que la marge lui laisse : 26 px en haut
   contre 4 en bas. Les 26 px existent pour l'icone posee en absolu dans
   le coin ; 22 lui suffisent. Le desequilibre passe de 22 px a 14. */
.msup .dev, .sup-page .dev{padding:22px 5px 8px}
.msup .dev .dname, .sup-page .dev .dname{margin-top:0}
.msup .dev .dico, .sup-page .dev .dico{top:4px;left:4px}

/* ── LE BLEU DES MINEURES — 05/09/2026, demande de Miguël ────────────────────
   « Que les alertes mineures donnent des badges bleus, un peu plus clairs que
     le bleu des postes éteints la nuit. »

   Elles étaient en #bfdbfe — un bleu si pâle qu'à côté des jaunes il se lit
   presque comme du blanc. On descend d'un cran vers #93c5fd : franchement
   bleu, reconnaissable d'un coup d'œil, et toujours très loin du bleu nuit.

   Les trois bleus de l'écran, du plus clair au plus sombre :
     #93c5fd  mineure — quelque chose à savoir, rien à faire tout de suite
     #1e3a8a  éteint la nuit ou le week-end — normal, ne rien faire
   Le liseré suit d'un cran : #3b82f6.

   Contraste (§9) : #1e293b sur #93c5fd = 7,5:1 · #0f172a sur #93c5fd = 9:1.
   ─────────────────────────────────────────────────────────────────────────── */
.msup .dev.info, .sup-page .dev.info{background:#93c5fd;border-color:#3b82f6}

/* ── 05/09/2026 — LA PASTILLE DU REVEIL ──────────────────────────────────
   Une machine eteinte est en pause : sa tuile passe en bleu nuit meme si elle
   a un defaut. Le point du coin garde la couleur de ce defaut et PULSE, pour
   qu'un ecran calme ne devienne pas un ecran muet.
   Les selecteurs portent .dot en plus : (0,4,0) contre (0,3,0) pour la regle
   de base du point, sinon la couleur du point l'emporterait sur la nôtre.
   L'animation se coupe pour qui a demande moins de mouvement a son systeme :
   un clignotement permanent est penible, et pour certaines personnes nocif. */
.msup .dev .dot.wake, .sup-page .dev .dot.wake{animation:sup-reveil 1.5s ease-in-out infinite}
.msup .dev .dot.wake-err, .sup-page .dev .dot.wake-err{background:#ef4444;color:#ef4444}
.msup .dev .dot.wake-warn, .sup-page .dev .dot.wake-warn{background:#f97316;color:#f97316}
@keyframes sup-reveil{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.22;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){
  .msup .dev .dot.wake, .sup-page .dev .dot.wake{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   06/09/2026 — LA MACHINE EN TROP (decision Miguel). Une machine supervisee
   sans case facturee : tuile BLANCHE (elle garde son point et son motif),
   pastille blanche, et un lien vers la fiche pour trancher : archiver,
   facturer, remplacer. Memes valeurs que la feuille du telephone.
   ══════════════════════════════════════════════════════════════════════════ */
.sup-page .dev.trop{background:#ffffff;border-color:#94a3b8;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.sup-page .dev.trop .dname{color:#0f172a}
.sup-page .dev.trop .dname.named{color:#0f172a}
.sup-page .dev.trop .dstat{color:#1e293b}
.sup-page .dev.trop .dsub{color:#475569}
/* 07/09/2026 — `hidden` doit gagner. Une classe avec display: bat la regle
   [hidden] du navigateur ; sans ces lignes, le JS croit cacher et le CSS
   rallume. Constate par Miguel : le bandeau « Machine en trop » s'affichait
   sur toutes les machines. */
.sup-page .dm-trop[hidden]{display:none}
.sup-page .dm-trop{display:block;margin:0 16px 10px;padding:9px 12px;border-radius:9px;background:#ffffff;color:#0f172a;border:1.5px solid #94a3b8;font:700 12px var(--font,system-ui,-apple-system,sans-serif);line-height:1.3;text-decoration:none}
.pill.trop{background:#ffffff;color:#0f172a;border-color:#cbd5e1}
.sup-page .pill.trop{background:#ffffff;color:#0f172a;border-color:#cbd5e1}
.sup-page .pill.trop.active{box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 10px rgba(148,163,184,.45)}

/* ══════════════════════════════════════════════════════════════════════════
   06/09/2026 — DEUX DEFAUTS VUS PAR MIGUEL SUR SON ECRAN (1440 px environ).

   1. Le bouton « Tous · Allumes · Eteints » : ses nombres passaient a la ligne
      et se faisaient couper. Le groupe de droite se COMPRIMAIT au lieu de
      passer a la ligne : le retour a la ligne n'etait permis qu'en dessous de
      1400 px, et rien n'interdisait a un bouton de se plier. Deux regles :
      un bouton ne se plie jamais ; et la barre prend sa seconde ligne des
      1560 px — la largeur ou le cadran se raccourcit deja (regle 5 de la
      charte : quand on ne tient plus, on ne comprime pas).

   2. En bas des tuiles, l'age (« 43 h »), le nom de machine (« T477T6AM ») et
      la version (« 5.0 ») se chevauchaient : trois textes pour une ligne de
      95 px. Quand le nom de machine est affiche, l'age disparait — le motif le
      dit deja (« Eteint 43 h ») — et le nom se range a gauche, en laissant sa
      place a la version, a droite. Meme choix qu'au telephone, ou l'age et la
      version sont deja masques faute de place.
   ══════════════════════════════════════════════════════════════════════════ */
.sup-page .seg button{white-space:nowrap}
.sup-page .seg{flex:0 0 auto}
@media (max-width:1560px){
  .sup-page .niv2{flex-wrap:wrap;row-gap:8px;height:auto;min-height:36px;padding-block:4px;align-items:center}
}
.sup-page .dev:has(.dsub) .dage{display:none}
.sup-page .dev:has(.dsub) .dsub{align-self:flex-start;text-align:left;padding-left:3px;max-width:calc(100% - 34px)}

/* ==========================================================================
   PAGES TICKETS / INTERVENTIONS / FACTURATION — 07/09/2026
   --------------------------------------------------------------------------
   Ces regles vivaient dans des blocs <style> ecrits DANS les pages. Elles n'y
   peignaient rien : l'en-tete du site porte `style-src 'self'`, qui bloque
   tout style ecrit dans une page — sans erreur cote serveur, sans trace
   ailleurs que dans la console du navigateur. Trois pages s'affichaient nues.
   La regle de la maison — jamais de style en ligne — n'est donc pas une
   preference : c'est une contrainte du serveur.
   ========================================================================== */
/* --- lien sans soulignement dans une carte de facturation --- */
.fa2-lien{color:inherit;text-decoration:none}
.fa2-sous{margin:14px -12px 0;border-top:1.5px solid var(--border-light);border-bottom:0}
.fa2-tarifs{margin:8px 0 0;font:600 12px var(--font,system-ui,sans-serif);color:#4a6068}
.mdp-form{padding:16px}
.pill.kind, a.pill{text-decoration:none}

/* ---- FACTURATION ---- */
.fa2{max-width:1600px;margin:0 auto;padding:2px 0 40px}
  .fa2-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start}
  @media (max-width:1200px){ .fa2-cols{grid-template-columns:1fr} }
  .fa2-col{border:1.5px solid var(--border-light);border-radius:var(--r);background:#fff;overflow:hidden}
  .fa2-col > h3{margin:0;padding:11px 14px;border-bottom:1.5px solid var(--border-light);
                font:800 12px var(--font);letter-spacing:.1em;text-transform:uppercase;color:#4a6068;
                display:flex;align-items:center;gap:9px}
  .fa2-col > h3 b{margin-left:auto;font:800 13px var(--font);color:#12262b}
  .fa2-dedans{padding:10px 12px}

  .fa2-cli{border:1.5px solid var(--border-light);border-radius:var(--r);margin:0 0 9px;overflow:hidden}
  .fa2-cli.pre{border-color:#fbbf24;box-shadow:0 0 0 2px rgba(251,191,36,.16)}
  .fa2-cli-h{display:flex;align-items:center;gap:9px;padding:8px 11px;background:#f6f8f9;
             border-bottom:1px solid var(--border-light)}
  .fa2-av{width:26px;height:26px;border-radius:7px;flex:0 0 26px;display:grid;place-items:center;
          background:var(--accent);color:#fff;font:800 9px var(--font)}
  .fa2-nom{font:700 13px var(--font);color:#12262b;line-height:1.2}
  .fa2-nom span{display:block;font:500 11px var(--font);color:#7a8f96}
  .fa2-etat{margin-left:auto;display:inline-block;padding:3px 9px;border-radius:999px;
            font:800 10.5px var(--font);white-space:nowrap}
  .fa2-etat.warn{background:#ffedd5;color:#9a3412}
  .fa2-etat.info{background:#dbeafe;color:#1e40af}
  .fa2-etat.hors{background:#e2e8f0;color:#334155}
  .fa2-corps{padding:8px 11px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .fa2-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
            background:#eef2f3;font:700 11px var(--font);color:#12262b;white-space:nowrap}
  .fa2-chip.gros{background:#dcfce7;color:#166534}
  .fa2-chip.ecart{background:#fee2e2;color:#991b1b}
  .fa2-tk{display:block;padding:5px 11px 5px 11px;border-top:1px dashed #e3e9ea;
          font:500 12px var(--font);color:#12262b;text-decoration:none}
  .fa2-tk:hover{background:#f6f8f9}
  /* Le pli d'une carte de clients clos. La barre se clique en entier — une
     cible de quarante pixels vaut mieux qu'un triangle de huit. */
  .cpli{border-top:1px solid var(--border-light,#e6e9f0)}
  .cpli-t{list-style:none;cursor:pointer;padding:9px 12px;
          font:700 12px var(--font,system-ui,sans-serif);color:var(--accent,#06747D)}
  .cpli-t::-webkit-details-marker{display:none}
  .cpli-t::before{content:'\25B8';margin-right:8px;display:inline-block;transition:transform .12s}
  .cpli[open] > .cpli-t::before{transform:rotate(90deg)}
  .cpli-t:hover{background:#f2fbfa}
  /* Le titre d'une etape. Il se saisit d'une main, sur une ligne : plus grand
     que le descriptif parce qu'il compte davantage, et c'est lui qu'on relira
     dans la frise. */
  .tw-titre{width:100%;margin:0 0 10px;padding:9px 12px;border:1.5px solid var(--border-light,#e6e9f0);
            border-radius:8px;background:#fff;color:var(--tx-dark,#1a1f2e);
            font:700 14px/1.4 var(--font,system-ui,sans-serif)}
  .tw-titre::placeholder{font-weight:400;color:var(--tx-dark-2,#5a6377)}
  .tw-titre:focus{outline:2px solid var(--accent-bright,#0BAE9F);outline-offset:1px;border-color:transparent}
  /* La fiche PDF d'un ticket. Elle porte l'habit d'un badge parce qu'elle vit
     parmi eux, mais l'accent de la maison : ce n'est pas un etat qu'on
     constate, c'est un geste qu'on fait. */
  .tk-fiche{text-decoration:none;color:var(--accent,#06747D);
            background:#f2fbfa;border-color:rgba(11,174,159,.35)}
  .tk-fiche:hover{background:#e3f5f3}
  .tk-fiche::before{content:'\2193';margin-right:5px;font-weight:400}
  /* Le releve du trimestre. Il se pose comme les tickets, en bas de la carte,
     mais il porte l'accent de la maison : ce n'est pas un lien de plus vers
     autre chose, c'est le document que la carte resume. */
  .fa2-pdf{display:block;padding:6px 11px;border-top:1px dashed #e3e9ea;
           font-size:12px;font-weight:700;text-decoration:none;
           color:var(--accent,#06747D);background:#f2fbfa}
  .fa2-pdf:hover{background:#e3f5f3}
  .fa2-pdf::before{content:'\2193';margin-right:6px;font-weight:400}
  .fa2-tk b{font-weight:700}
  .fa2-tk span{color:#7a8f96}

  .fa2-rech{width:100%;height:34px;padding:0 11px;margin:0 0 10px;border:1.5px solid var(--border-light);
            border-radius:var(--r);font:500 13px var(--font);color:#12262b;background:#fff}
  .fa2-l{display:flex;align-items:baseline;gap:8px;padding:6px 2px;border-bottom:1px solid #eef2f3;
         font:500 12.5px var(--font);color:#12262b;text-decoration:none}
  .fa2-l:last-child{border-bottom:0}
  .fa2-l:hover{background:#f6f8f9}
  .fa2-l .ref{font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#0a8f84;flex:0 0 auto}
  .fa2-l .cli{font-weight:700;flex:0 1 auto;min-width:0}
  .fa2-l .ti{color:#4a6068;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
  .fa2-l .qd{color:#7a8f96;font-size:11.5px;flex:0 0 auto}
  .fa2-vide{margin:6px 0;font:500 13px var(--font);color:#7a8f96}
  .fa2-note{margin:14px 0 0;padding:11px 14px;border-radius:var(--r);border-left:4px solid var(--accent);
            background:#f6f8f9;font:600 12.5px/1.55 var(--font);color:#12262b}

/* ---- DETAIL ---- */
/* 07/09/2026 — L'ECRAN DE TRAVAIL D'UN TICKET (structure demandee par Miguel le
   06/09 : le fil avec la demande initiale en pied, l'etape en cours, la
   prochaine etape). Les largeurs disent l'usage : on LIT le fil, on FAIT
   l'etape en cours, on PREVOIT la suivante. */
/* 17/09 (Miguël : « toujours ces marges énormes entre la zone de travail et le bord de l'écran ») —
   plus de plafond à 1 600 px : la fiche prend toute la largeur, la gouttière de la page (20 px) suffit. */
.tk{max-width:none;margin:0;padding:2px 0 40px}
/* 08/09/2026 (Miguël : « trop d'espace perdu dans le titre pour commencer ») —
   L'EN-TÊTE SE RESSERRE. Mesuré sur la page : 116 px de haut sur 1960 px de large,
   quatre lignes empilées à gauche, trois badges empilés à droite, et un millier de
   pixels de vide entre les deux. Le numéro prenait une ligne entière pour huit
   caractères — alors qu'il est déjà écrit en doré juste au-dessus, dans le bandeau
   du site : troisième lecture du même numéro sur le même écran.
   Le numéro remonte sur la ligne du titre, les badges se rangent sur une seule
   ligne, les interlignes se resserrent. Environ 76 px au lieu de 116 — les 40 px
   gagnés sont rendus au fil, qui est ce qu'on vient lire. */
/* 08/09 — UNE SEULE CARTE EN TETE. Le résumé « ce qui a été fait » formait une
   seconde bande pleine largeur avec sa propre bordure : deux objets à l'écran pour
   un seul ticket, 140 px à eux deux pour deux lignes de texte. Il devient la
   troisième ligne de la carte, séparée d'un simple trait. */
.tk-tete{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 16px;
         margin:0 0 7px;}
.tk-tete-g{grid-column:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 10px}
/* Le résumé prend toute la largeur de la carte, sous le titre et les badges. */
.tk-tete > .tk-resume{grid-column:1 / -1;border:0;
  border-radius:0;}
.tk-tete .num{flex:0 0 auto;font:800 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em}
.tk-tete h2{flex:1 1 auto;min-width:0;margin:0;font:800 18px var(--font,system-ui,sans-serif);
            color:#12262b;line-height:1.3}
/* La ligne d'état passe à la ligne entière : elle suit le titre, elle ne le
   pousse pas. */
.tk-tete .meta{flex:1 0 100%;font:600 12.5px var(--font,system-ui,sans-serif);line-height:1.45}
/* 14/09 (Miguël) — CORRIGER LE TITRE. Un crayon discret au bout du titre ; ouvert,
   la fiche prend toute la ligne sous lui. details/summary : sans script, la
   politique de sécurité du serveur l'exige. */
.tk-renommer{flex:0 0 auto;position:relative}
.tk-renommer>summary{list-style:none;cursor:pointer;width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;border-radius:7px;border:1.5px solid #cfdbe1;background:#f7fafb;color:#4a6068;
  font:700 13px var(--font,system-ui,sans-serif)}
.tk-renommer>summary::-webkit-details-marker{display:none}
.tk-renommer>summary:hover,.tk-renommer[open]>summary{border-color:#0a8f84;color:#0a6f67;background:#eef7f6}
.tk-renommer-f{position:absolute;z-index:60;top:calc(100% + 6px);right:0;width:min(560px,calc(100vw - 48px));
  display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:10px 12px;border-radius:10px;
  border:1.5px solid #0a8f84;background:#fff;box-shadow:0 12px 30px rgba(20,40,50,.18)}
.tk-renommer-f label{flex:1 0 100%;font:700 10px var(--font,system-ui,sans-serif);letter-spacing:.08em;
  text-transform:uppercase;color:#0a6f67}
.tk-renommer-f input[type="text"]{flex:1 1 300px;min-width:0;padding:7px 9px;border:1.5px solid #cfdbe1;border-radius:8px;
  font:600 13.5px var(--font,system-ui,sans-serif);color:#12262b;background:#fff}
.tk-renommer-f input[type="text"]:focus{outline:2px solid var(--accent-bright);outline-offset:1px;border-color:#0a8f84}
.tk-lien{color:#0a8f84;text-decoration:none}
.tk-lien:hover{text-decoration:underline}
/* En ligne, pas en pile : trois badges empilés faisaient à eux seuls la hauteur
   de l'en-tête. Ils se replient sur deux lignes si la fenêtre est étroite. */
.tk-etats{grid-column:2;display:flex;flex-direction:row;flex-wrap:wrap;
          align-items:center;justify-content:flex-end;gap:6px;flex:0 1 auto;max-width:55%}
.tk-bdg{display:inline-block;padding:4px 10px;border-radius:999px;font:800 11.5px var(--font,system-ui,sans-serif);white-space:nowrap}
.tk-bdg.err{background:#fee2e2;color:#991b1b}
.tk-bdg.warn{background:#ffedd5;color:#9a3412}
.tk-bdg.info{background:#dbeafe;color:#1e40af}
.tk-bdg.ok{background:#dcfce7;color:#166534}
.tk-bdg.hors{background:#e2e8f0;color:#334155}
.tk-bdg.neutre{background:#eef2f3;color:#4a6068}

/* Le fil est le plus large : c'est ce qu'on lit. */
/* 08/09 — LE FIL S'ÉLARGIT. Mesuré : il cachait 614 px de conversation pendant
   que les deux autres colonnes tenaient entières. La colonne du milieu garde de
   quoi poser ses boutons de durée, celle de droite tient toujours. */
.tk-cols{display:grid;grid-template-columns:1.6fr 1.15fr .85fr;gap:13px;align-items:start}
@media (max-width:1200px){ .tk-cols{grid-template-columns:1fr} }
/* 07/09 — `clip` et non `hidden` : les deux rognent pareil, mais `hidden`
   fait de la colonne un conteneur de defilement, et la demande de depart
   collee en bas n'aurait alors plus rien a quoi se coller. */
.tk-col{border:1.5px solid var(--border-light);border-radius:var(--r);background:#fff;overflow:clip}
.tk-col-travail{box-shadow:0 0 0 2px rgba(10,143,132,.10)}
.tk-col > h3{margin:0;padding:10px 14px;border-bottom:1.5px solid var(--border-light);
             font:800 11.5px var(--font,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;
             color:#4a6068;display:flex;align-items:center;gap:8px}
.tk-cnt{margin-left:auto;font:800 11px var(--font,system-ui,sans-serif);color:#12262b;
        background:#eef2f3;border-radius:999px;padding:2px 8px}
.tk-col .dedans{padding:11px 14px}
.tk-h4{margin:16px 0 8px;padding:8px 0 0;border-top:1.5px solid var(--border-light);
       font:800 11px var(--font,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;
       color:#4a6068;display:flex;align-items:center;gap:8px}

/* ═══ 08/09/2026 (Miguël) — LE FIL EN CONVERSATION ══════════════════════════
   « Le fil, je le verrais bien en version WhatsApp. »

   Ce qui fait qu'une conversation SE LIT comme une conversation, ce n'est pas la
   couleur : c'est l'ALIGNEMENT. L'œil suit deux colonnes invisibles — à gauche
   ce qu'on reçoit, à droite ce qu'on écrit — et il n'a plus besoin de lire le
   nom pour savoir qui parle.

   Trois formes, trois rôles : bulle reçue à gauche (blanche), bulle à soi à
   droite (turquoise pâle), et pastille centrée pour les 204 messages « système »,
   qui ne sont pas des paroles mais des faits — planification, résolution.

   La teinte de « moi » vient de la maison (#0a8f84 très éclairci), pas du vert de
   WhatsApp : on emprunte la grammaire, pas la marque.
   Contrastes calculés, et deux couleurs corrigées AVANT d'être écrites : le
   turquoise de la maison (#0a8f84) ne fait que 3,98:1 sur blanc — il passe à
   #076a62 ; l'heure était à 4,45:1 sur la bulle turquoise — elle passe à
   #4d6169. Le plus faible du lot est désormais au-dessus de 5:1. */
/* Le nom de qui parle : plus foncé que le turquoise de marque, trop clair pour
   du texte sur blanc. */
.tk-col-fil .tk-msg-h .qui{color:#076a62}
.tk-col-fil .dedans{display:flex;flex-direction:column;gap:7px}
.tk-msg{max-width:88%;padding:7px 11px 5px;border-bottom:0;border-radius:12px;
  align-self:flex-start;box-shadow:0 1px 2px rgba(20,40,50,.10)}
.tk-msg.lui{background:#fff;border:1px solid #dfe7ec;border-bottom-left-radius:3px}
.tk-msg.moi{align-self:flex-end;background:#dbf4f0;border:1px solid #b9e5de;
  border-bottom-right-radius:3px}
/* Un fait, pas une parole : ni bulle, ni côté, ni ombre. */
.tk-msg.evt{align-self:center;max-width:92%;padding:3px 11px;border:0;border-radius:999px;
  background:#e8eef0;box-shadow:none;text-align:center}
.tk-msg.evt .tk-txt{margin:0;font-size:11.5px;line-height:1.4;color:#4a6068}
.tk-msg.evt .tk-pied-msg{display:none}
/* Le nom ne s'écrit que sur les bulles des autres : sur les siennes, on le sait. */
.tk-msg .tk-msg-h{margin-bottom:1px}
.tk-msg .tk-txt{margin:0}
/* L'heure et la durée, en petit, au pied de la bulle et poussées à droite —
   comme sur un téléphone. Le jour, lui, est écrit une seule fois au-dessus du
   premier message de la journée. */
.tk-pied-msg{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:2px}
.tk-pied-msg .hh{font:600 10.5px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#4d6169}
.tk-pied-msg .min{padding:1px 7px;border-radius:999px;background:rgba(10,143,132,.12);
  font:800 10.5px var(--font,system-ui,sans-serif);color:#0a6f67}
/* Le séparateur de jour : sans lui on ne sait pas si deux messages sont à cinq
   minutes ou à trois semaines l'un de l'autre. */
.tk-jour{align-self:center;margin:5px 0 1px}
.tk-jour span{display:inline-block;padding:2px 11px;border-radius:999px;background:#e8eef0;
  font:800 10.5px var(--font,system-ui,sans-serif);letter-spacing:.04em;color:#4a6068}
/* La demande de départ reste épinglée en bas, sur toute la largeur : elle n'est
   pas un message du fil, c'est ce à quoi le fil répond. */
.tk-col-fil .dedans > .tk-depart{align-self:stretch}
.tk-msg-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tk-msg-h .qui{font:800 12.5px var(--font,system-ui,sans-serif);}
.tk-msg-h .qd{font:600 11.5px var(--font,system-ui,sans-serif);color:#7a8f96}
.tk-msg-h .min{margin-left:auto;padding:2px 8px;border-radius:999px;
               font:700 11px var(--font,system-ui,sans-serif);}
.tk-txt{margin:5px 0 0;font:400 13.5px/1.65 var(--font,system-ui,sans-serif);color:#12262b;
        white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.tk-plus{margin:6px 0 0;padding:3px 10px;border:1.5px solid var(--border-light);border-radius:999px;
         background:#f6f8f9;font:700 11.5px var(--font,system-ui,sans-serif);color:#0a8f84;cursor:pointer}
.tk-plus:hover{background:#eef2f3}

/* La demande de depart ferme le fil : le commencement de l'histoire. */
/* 07/09 (demande de Miguel) — LA DEMANDE DE DEPART COLLE EN BAS DU FIL.
   On lit le fil en se demandant sans arret ce qui etait demande au depart ;
   la faire suivre le regard evite l'aller-retour. Bornee a 34 % de la
   hauteur visible : elle accompagne le fil, elle ne le couvre pas. */
.tk-depart{position:sticky;bottom:0;z-index:2;margin:14px -14px -11px;padding:10px 14px;border-top:1.5px solid var(--border-light);
           box-shadow:0 -6px 14px rgba(18,38,43,.06)}
/* 07/09, demande de Miguel : « prevoir plus de place pour la demande de
   depart ». 34 % etait trop prudent — ces demandes viennent de courriels et
   font souvent quinze lignes. Et surtout : la boite se redimensionne a la
   souris, parce qu'aucun chiffre choisi ici ne conviendra a tous les
   tickets. Une demande de trois lignes et une demande de trois pages n'ont
   pas le meme besoin. */
.tk-depart .tk-txt,.tk-depart .tk-repli{max-height:50vh;min-height:52px;overflow:auto;
  resize:vertical}
/* Sur un ecran etroit les colonnes s'empilent : coller n'a plus de sens,
   la demande reprend sa place au fil du texte. */
@media (max-width:1200px){ .tk-depart{position:static}
  /* Sur un ecran etroit la page defile deja : ni borne ni poignee. */
  .tk-depart .tk-txt,.tk-depart .tk-repli{max-height:none;resize:none} }
.tk-depart h4{margin:0 0 4px;font:800 11px var(--font,system-ui,sans-serif);letter-spacing:.1em;
              text-transform:uppercase;}

.tk-encours{border:1.5px solid #cfe3df;border-radius:var(--r);padding:11px 13px}
.tk-encours > b{display:block;font:800 14px var(--font,system-ui,sans-serif);margin:0 0 5px;line-height:1.3}
.tk-tache{padding:9px 0;border-bottom:1px solid #eef2f3}
.tk-tache:last-child{border-bottom:0}
.tk-tache > b{display:block;font:700 13px var(--font,system-ui,sans-serif);color:#12262b;margin:0 0 3px}
.tk-col .d{font:600 12px var(--font,system-ui,sans-serif);color:#4a6068;line-height:1.65}
.tk-pt{display:inline-block;padding:2px 8px;border-radius:999px;font:800 10.5px var(--font,system-ui,sans-serif)}
.tk-pt.att{background:#ffedd5;color:#9a3412}

/* Les trois durees se lisent d'un coup, cote a cote. */
.tk-durees{display:flex;gap:7px;margin:8px 0 0;flex-wrap:wrap}
.tk-durees span{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:8px;
                background:#eef2f3;font:700 11.5px var(--font,system-ui,sans-serif);color:#12262b}
.tk-durees i{font-style:normal;font-weight:600;color:#7a8f96;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.tk-durees.grosses span{padding:6px 11px;background:#fff;border:1.5px solid #cfe3df;flex-direction:column;gap:1px}
.tk-durees.grosses b{font:800 15px var(--font,system-ui,sans-serif);color:#12262b}

.tk-vide{margin:0;font:500 13px var(--font,system-ui,sans-serif);color:#7a8f96}
.tk-alerte{margin:9px 0 0;padding:9px 11px;border-radius:var(--r);border-left:4px solid #f59f4d;
           background:#fff7ed;font:600 12.5px/1.5 var(--font,system-ui,sans-serif);color:#7c2d12}
/* ═══ 08/09/2026 (Miguël) — LA CHENILLE DES ÉTAPES ══════════════════════════
   « Une bande horizontale en haut avec les étapes principales en bulles
   rectangles avec petit résumé, une sorte de chronologie de gauche à droite » —
   « une sorte de chenille, comme NetworkView, qui progresse au fur et à mesure
   qu'on ajoute des étapes ».

   Quatre sortes de maillons, quatre états qu'on lit sans lire : la demande
   (ardoise), les étapes faites (vert), celle en cours (turquoise, avec un halo),
   et ce qui est prévu (pointillé). Les traits qui les relient sont pleins
   jusqu'à l'étape en cours et pointillés ensuite : la chenille montre où elle en
   est.

   LA PISTE NE DÉFILE PAS, ELLE PASSE À LA LIGNE. Une piste qui défile rogne les
   info-bulles qui en dépassent, sans un mot d'erreur — c'est le piège de
   l'overflow, qui a déjà coûté une journée sur ce projet.

   L'INFO-BULLE est en CSS pur, ouverte au survol ET au clavier : la politique de
   sécurité du serveur bloque tout script écrit dans une page, en silence. */
.tk-chenille{flex:0 0 auto;margin:0 0 7px;}
.ch-piste{display:flex;flex-wrap:wrap;align-items:stretch;gap:4px 2px;overflow:visible}
/* 09/09 (Miguel) — « avec des fleches entre chaque pour montrer le sens ».
   Un trait dit que deux cases se suivent ; il ne dit pas dans quel sens.
   Une chronologie sans sens n'est plus une chronologie, c'est une rangee.
   La pointe est dessinee en bordures, pas tapee en caractere : un « > » ecrit
   dans la page ne suit pas la couleur du trait et se fait lire a voix haute
   par les lecteurs d'ecran, ce qu'une decoration ne doit pas faire. */
.ch-trait{position:relative;align-self:center;width:16px;height:2px;flex:0 0 auto;border-radius:2px}
.ch-trait::after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:0;height:0;
  border-left:5px solid #b9c8ce;border-top:4px solid transparent;border-bottom:4px solid transparent}
/* Ce qui reste a faire se dit en pointille — la pointe suit, plus pale. */
.ch-trait.a-venir{background:transparent;background-size:5px 2px}
/* 08/09 (Miguël : « on a beaucoup de place perdue ») — RECUPERER LA PLACE PERDUE.
   Mesure : la piste fait 1 574 px, les cinq cases en occupaient 686 — 888 px de
   vide, 56 % de la rangée. Les cases se partagent maintenant la piste : les titres
   cessent d'être coupés et la bande cesse d'avoir l'air vide.
   Elles gardent une largeur minimale : au-delà d'une dizaine d'étapes, elles
   repassent à la ligne comme avant. */
/* 08/09 (Miguel : « reduire aussi les bulles du haut et toutes memes tailles ») —
   300 px de large et 43 de haut, c etait trop : une case se lit d un coup d oeil,
   elle n a pas besoin de la place d une carte. Largeurs EGALES — c est ce qui fait
   lire la chenille comme une suite reguliere — mais bornees a 210 px. La chaine
   s arrete donc avant le bord droit : une chronologie a une fin, elle n a pas a
   remplir la ligne pour le plaisir. */
/* 09/09 (Miguel) — MOINS LARGE : « leur contenu apparait de toutes facons en
   infobulle ». Une case n'a pas a porter ce qui est a un survol de distance ;
   elle doit etre reconnaissable, pas complete. Cinq cases passent de 1050 px a
   690 px, et la place rendue va aux deux colonnes du dessous. Elles restent
   TOUTES EGALES (flex:1 1 0) — regle du 08/09.
   15/09 — la case reste le point d'ancrage de sa bulle : c'est ce qui permet
   d'aller de l'une à l'autre à la souris, et de défiler dans la bulle. */
.ch-case{position:relative;flex:1 1 0;min-width:110px;max-width:138px;
  display:flex;flex-direction:column;gap:0;cursor:default;
  border:1.5px solid #cfdbe1;}
/* La case survolée se signale. */
.ch-case:hover,.ch-case:focus-within{box-shadow:0 0 0 2px rgba(10,143,132,.28)}
.ch-case:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
/* 08/09 (Miguël) — TROIS COULEURS, UNE RÈGLE : « vert quand c'est fait, bleu à
   faire, orange la date de ce qui est à faire est passée ». C'est la grammaire
   de la liste des tickets, reprise telle quelle : vert ce qui est en ordre, bleu
   ce qui attend, orange ce qui déborde. La demande de départ garde l'ardoise —
   elle n'est ni faite ni à faire, c'est le point d'où l'on part.
   La couleur est calculée par la page, pas ici : un style ne sait pas si une
   date est passée, et s'il doit le deviner, il ment le lendemain. */
.ch-case.t-depart{background:#eef2f3;}
.ch-case.t-vert  {background:#f2faf9;}
.ch-case.t-bleu  {background:#eaf1fe;}
/* L'étape en cours garde son halo par-dessus sa couleur : c'est celle qu'on est
   en train d'écrire au milieu de l'écran. */
/* Ce qui n'est pas encore arrivé se dit aussi par le trait : en pointillé. */
.ch-case.prevu{border-style:dashed}
.ch-case.t-bleu .ch-q    {color:#41556b}
.ch-case.t-orange .ch-min{color:#9a3412}
.ch-case.t-orange .ch-q  {color:#5a4a35}
/* CONCENTRÉ : la date et le temps sur une ligne, le titre sur l'autre. Une case
   se lit d'un coup d'œil ; le détail est dans l'info-bulle. */
/* 09/09 — LA PREMIERE LIGNE NE SE CASSE PAS. Mesure sur fenetre de 642 px :
   78 px utiles pour 81 px demandes — « 15 min » passait a la ligne et la case
   devenait plus haute que ses voisines. Trois pixels suffisaient a faire
   boiter la frise. La duree ne se coupe plus, la gouttiere passe a 5 px. */
.ch-l1{display:flex;align-items:baseline;justify-content:space-between;gap:5px}
.ch-case .ch-min{margin-top:0}
/* L'INFO-BULLE PREND LA COULEUR DE SA CASE — on ne perd pas de vue ce qu'on
   survole. Son fond reste blanc : un compte rendu de dix lignes sur un fond
   teinté se lit moins bien. C'est la bordure, le liseré du haut et les
   étiquettes qui portent la couleur. */
.ch-bulle{border-top-width:4px}
.ch-case.t-depart .ch-bulle{border-color:#cfdbe1}
.ch-case.t-vert   .ch-bulle{border-color:#7cc7bb}
.ch-case.t-bleu   .ch-bulle{border-color:#93b4f5}
.ch-case.t-orange .ch-bulle{border-color:#f0a95a}
.ch-case.t-bleu   .ch-b-l b,.ch-case.t-bleu   .ch-b-c b{color:#1e4fa8}
.ch-case.t-orange .ch-b-l b,.ch-case.t-orange .ch-b-c b{color:#9a3412}
.ch-case.t-depart .ch-b-l b,.ch-case.t-depart .ch-b-c b{color:#41556b}
.ch-q{font:800 9px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#4a6068;letter-spacing:.02em;white-space:nowrap}
.ch-t{font:800 11.5px var(--font,system-ui,sans-serif);color:#12262b;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-r{font:500 10.5px var(--font,system-ui,sans-serif);color:#4a6068;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-min{margin-top:1px;font:800 10px var(--font,system-ui,sans-serif);color:#0a6f67;white-space:nowrap}
/* L'info-bulle : date, qui, quoi, temps, comment — dans l'ordre où l'on se pose
   les questions. Elle ne s'ouvre qu'au survol ou au clavier, et passe au-dessus
   de tout le reste. */
/* 15/09 (Miguël : « les infobulles continuent de sortir de l'écran, c'est
   désagréable » — puis : « je préfère quand je peux scroller dans l'infobulle ;
   là, impossible, elle se ferme dès que je quitte la bulle ») — LA BULLE RESTE
   SOUS SA CASE, ET UN SCRIPT LA DÉCALE DU STRICT NÉCESSAIRE.
   Deux tentatives ont appris deux choses. La règle du 14/09 (« les dernières
   cases ouvrent vers la gauche ») ne voyait que la fin de la dernière rangée :
   sur vingt étapes, chaque fin de rangée débordait encore. Puis une bulle centrée
   sous la frise entière ne débordait plus — mais n'était plus atteignable : le
   survol se perd en chemin, et on ne peut plus y défiler.
   La seule solution qui tient les deux : la bulle reste collée à sa case (le
   chemin droit vers le bas marche, et la bulle est un enfant de la case, donc le
   survol tient tant qu'on est dedans), et `chenille.js` mesure le bord de
   l'écran — ce qu'une feuille de style ne sait pas faire — et pose le décalage
   dans --ch-dx. Sans script, la bulle s'affiche quand même, à sa place de base. */
.ch-bulle{position:absolute;top:calc(100% + 6px);left:0;z-index:70;width:min(460px,72vw);
  transform:translateX(var(--ch-dx,0px));
  display:none;padding:10px 12px;border:1.5px solid #cfdbe1;border-radius:10px;background:#fff;
  box-shadow:0 12px 30px rgba(20,40,50,.18);text-align:left;white-space:normal}
.ch-case:hover .ch-bulle,.ch-case:focus-within .ch-bulle,.ch-case:focus .ch-bulle{display:block}
.ch-b-l{display:flex;gap:8px;margin-bottom:3px;font:500 12px var(--font,system-ui,sans-serif);color:#4a6068}
.ch-b-l b,.ch-b-c b{flex:0 0 62px;font:800 10px var(--font,system-ui,sans-serif);letter-spacing:.08em;
  text-transform:uppercase;color:#0a6f67;padding-top:2px}
/* 08/09 (Miguël) — LES QUATRE TEMPS : passé, estimé, cumulé, total depuis le
   début. Quatre valeurs à la suite dans une phrase ne se lisent pas : elles sont
   posées en petit tableau, étiquette au-dessus du chiffre. L'œil compare des
   chiffres alignés ; il ne compare pas des chiffres noyés dans du texte. */
.ch-tps{display:flex;flex-wrap:wrap;gap:4px 16px}
.ch-tps > span{display:flex;flex-direction:column;line-height:1.25;
  font:800 12px var(--font,system-ui,sans-serif);color:#12262b}
.ch-tps i{font:600 9.5px var(--font,system-ui,sans-serif);font-style:normal;
  letter-spacing:.04em;color:#4a6068;text-transform:uppercase}
.ch-b-l:has(.ch-tps){align-items:flex-start}
.ch-b-c{display:flex;gap:8px;margin-top:6px;padding-top:6px;border-top:1px solid #eef2f3}
.ch-b-c p{margin:0;font:400 12.5px/1.5 var(--font,system-ui,sans-serif);color:#12262b;
  max-height:220px;overflow:auto;white-space:pre-wrap}
/* 15/09 (Miguël) — LA DERNIÈRE BULLE SE LIT EN PLEIN. « Que le texte descriptif
   de la dernière bulle — la prochaine tâche planifiée ou la résolution —
   apparaisse en plein sans passer le curseur dessus. » C'est la case qu'on vient
   lire ; au doigt, il n'y a pas de survol. Le bloc prend la couleur de sa case,
   comme l'info-bulle : liseré à gauche, étiquette teintée, fond blanc pour le
   texte. Les sauts de ligne du compte rendu restent. Au-delà de 260 px, le texte
   défile dans son cadre plutôt que de pousser les deux colonnes du dessous. */
.ch-derniere{margin-top:7px;border:1.5px solid #cfdbe1;
  border-left-width:5px;}
/* Ce qui n'est pas encore arrivé garde son pointillé — le liseré, lui, reste plein. */
.ch-derniere.prevu{border-style:dashed;border-left-style:solid}
.ch-d-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:2px}
.ch-d-etat{font:800 10px var(--font,system-ui,sans-serif);letter-spacing:.08em;
  text-transform:uppercase;color:#0a6f67}
.ch-derniere.t-orange .ch-d-etat{color:#9a3412}
.ch-derniere.t-depart .ch-d-etat{color:#41556b}
.ch-d-quand,.ch-d-qui{font:600 11px var(--font,system-ui,sans-serif);color:#4a6068}
.ch-d-titre{display:block;font:800 12.5px/1.3 var(--font,system-ui,sans-serif);color:#12262b}
.ch-d-texte{margin:3px 0 0;font:400 12.5px/1.5 var(--font,system-ui,sans-serif);color:#12262b;
  max-height:260px;overflow:auto;white-space:pre-wrap}
/* Le cumul ferme la chaîne : c'est lui qui part en facturation. */
.ch-cumul{display:flex;flex-wrap:wrap;gap:14px;margin-top:7px;padding-top:6px;
  border-top:1px solid #e2e9ec;font:600 11.5px var(--font,system-ui,sans-serif);color:#4a6068}
.ch-cumul b{font-weight:800;color:#12262b}
.ch-cumul .or,.ch-cumul .or b{color:var(--tk-argent,#7a4b06)}
.ch-cumul .ec{color:#9a3412}
/* La conversation, dans un pli sous la chenille : elle n'occupe plus une colonne
   entière en permanence, mais rien n'a été supprimé. */
.tk-convo{flex:0 0 auto;margin:0 0 7px;overflow:hidden}
.tk-convo > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font:800 11px var(--font,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;}
.tk-convo > summary::-webkit-details-marker{display:none}
/* 08/09 (Miguël : « il faut la flèche de développement plus grande ») — elle
   faisait 11 px à l'extrême droite d'un bandeau de 1 600 px : rien ne disait
   qu'on pouvait cliquer, et un pli qui ne se voit pas est un pli que personne
   n'ouvre. 15 px dans une pastille ronde bordée. La cible cliquable ne change
   pas : c'est toute la ligne — on ne fait pas viser un carré de 15 px. */
.tk-convo > summary::after{content:'\25BE';margin-left:auto;flex:0 0 auto;
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;color:#0a6f67;border:1.5px solid #b9dcd7;border-radius:999px;
  background:#f2faf9;transition:transform .15s ease,background .15s ease}
.tk-convo > summary:hover::after{background:#dff3ef}
.tk-convo[open] > summary::after{transform:rotate(180deg)}
.tk-convo > summary:hover{background:#f7fafb}
.tk-convo-d{display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow-y:auto;
  padding:10px 14px;border-top:1.5px solid var(--border-light);}
.tk-convo-d > .tk-depart{align-self:stretch}
/* Deux colonnes au lieu de trois : la chenille a remplacé le fil. */
@media (min-width:1201px){
  /* 08/09 (Miguël : « équilibrer les deux colonnes identiques en largeur ») —
     1,15 et 1 étaient un reste de l'époque où elles étaient trois : celle du
     milieu portait le compte rendu, la troisième n'avait que des champs courts.
     Depuis que la chenille a remplacé le fil, les deux qui restent font le même
     métier — l'une raconte ce qui vient d'être fait, l'autre prépare ce qui suit.
     Rien ne justifie que l'une soit plus large que l'autre. */
  .tk-col-travail{flex:1 1 0}
  .tk-col-suite{flex:1 1 0}
}
/* ═══ 08/09/2026 (Miguël) — « QUELQUE CHOSE DE SUPER BEAU ET PRO » ══════════
   La colonne « ce que je viens de faire », reprise point par point. */

/* 1 · Le titre de l'étape n'est plus bleu vif : c'était la couleur d'un lien,
   posée sur quelque chose qui ne se clique pas. */
.tw-rappel > .tw-rappel-h b,.tw-rappel b{color:#12262b}
.tw-rappel-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* 09/09 — LE DETAIL DU RAPPEL TIENT SUR LA LIGNE DU TITRE. Qui, quand, combien :
   trois choses qu on lit d un coup d oeil, et qui n avaient pas besoin d une
   rangee a elles. Plus petites que le titre, plus pales : elles accompagnent,
   elles n annoncent pas. */
.tw-rappel-m{margin-left:auto;font:600 11px var(--font,system-ui,sans-serif);
  color:#4a6068;white-space:nowrap}
/* 2 · Une date passée se dit — même orange que dans la chenille. */
.tw-rappel.tard{border-color:#f0a95a;background:#fffaf4}
.tw-tard{flex:0 0 auto;padding:2px 9px;border-radius:999px;background:#fff2e3;border:1px solid #f0a95a;
  font:800 10.5px var(--font,system-ui,sans-serif);color:#9a3412;white-space:nowrap}
/* 3 · La consigne est une citation, pas un champ. Encadrée comme elle l'était,
   on la prenait pour une zone de saisie vide qu'on aurait pu remplir. */
/* 08/09 (Miguël : « la zone de texte libre doit être logique et pas cachée ») —
   LA ZONE D’ÉCRITURE PREND LA PLACE QUI RESTE.
   Mesure : le rappel faisait 87 px, la zone d'écriture 167, et 58 px restaient
   vides sous elle. La pièce principale de l'écran — celle où l'on écrit — était
   la plus petite des trois.
   Elle grandit maintenant jusqu'au bas de la colonne, et davantage encore quand
   la fenêtre s'agrandit. Ce qui la précède est borné ; ce qui la suit vit dans le
   pied, qui ne défile jamais. Elle ne peut donc plus être coupée. */
.tk-col-travail .dedans{display:flex;flex-direction:column;gap:0}
.tk-col-travail .dedans > .tw-rappel{flex:0 0 auto}
.tk-col-travail .dedans > .tw-bloc{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;margin-bottom:0}
.tk-col-travail .dedans > .tw-bloc > textarea{flex:1 1 auto;min-height:110px;height:auto;resize:none}
/* LE PIED REND SA PLACE A L'ECRITURE. Mesure : colonne 509 px = titre 42 + zone
   d'écriture 232 + pied 231. Le pied pesait autant que la zone où l'on écrit, et
   84 de ses 231 px étaient deux boutons empilés, chacun sur toute la largeur.
   Côte à côte : 42 px rendus. Ils gardent leurs deux poids — « Enregistrer »
   plein et large, « Résoudre » étroit et en retrait : l'un est le geste de tous
   les jours, l'autre la fin du ticket. */
.tk-col-travail .tw-pied{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 14px 9px}
.tk-col-travail .tw-pied > .tw-dur,
.tk-col-travail .tw-pied > .tw-chips,
.tk-col-travail .tw-pied > .tw-cases{flex:1 1 100%;margin-bottom:0}
/* 08/09 (Miguël : « les boutons enregistrer prennent énormément de place ») —
   42 px de haut chacun, sur toute la largeur : le poids d'un titre pour un geste
   d'une seconde. 34 px suffisent. Ils gardent leurs deux poids — plein d'un côté,
   en retrait de l'autre : c'est la couleur qui les distingue, pas la taille. */
.tk-col-travail .tw-pied > .tw-btn{flex:2 1 60%;margin:0;min-height:0;height:34px;
  padding:0 14px;font-size:13px}
.tk-col-suite .tw-pied > .tw-btn{min-height:0;height:34px;padding:0 14px;font-size:13px}
.tk-col-suite .tw-pied .tw-aide{font-size:10.5px;line-height:1.25;margin-top:4px}
.tk-col-travail .tw-pied > .tw-btn.tw-btn-fin{flex:1 1 34%}
/* Une consigne SE LIT — elle peut défiler. Une zone où l'on ÉCRIT ne le peut
   pas : on n'écrit pas dans ce qu'on ne voit pas. La citation se borne donc à
   quatre lignes, et ne repousse plus jamais la zone d'écriture. */
blockquote.tw-consigne{max-height:76px;overflow-y:auto}
/* Et le rappel entier est borné : à lui seul, il ne doit jamais pouvoir repousser
   la zone d'écriture hors de l'écran. */
.tk-col-travail .dedans > .tw-rappel{max-height:118px;overflow-y:auto}
blockquote.tw-consigne{margin:7px 0 0;padding:2px 0 2px 11px;border:0;border-left:3px solid #b9dcd7;
  background:transparent;font:400 12.5px/1.55 var(--font,system-ui,sans-serif);color:#4a6068;
  white-space:pre-wrap}
/* 4 · « obligatoire » se murmure. */
.tw-oblig{font:600 10px var(--font,system-ui,sans-serif);font-style:normal;letter-spacing:.06em;
  text-transform:uppercase;color:#7a5518;padding:1px 6px;border-radius:999px;background:#fdf3e0}
/* 5 · Les raccourcis, plus serrés — ils ne doivent pas peser autant que la zone
   où l'on écrit. */
.tk-col-travail .tw-chips{gap:5px}
.tk-col-travail .tw-chips > *{padding:3px 9px;font-size:11px}
/* 6 · Les deux boutons ne pèsent plus pareil : l'un est le geste courant, l'autre
   la fin du ticket. */
.tk-col-travail .tw-btn.tw-btn-1{background:#0a6f67;border-color:#0a6f67;color:#fff;
  font-weight:800;box-shadow:0 2px 8px rgba(10,143,132,.28)}
.tk-col-travail .tw-btn.tw-btn-1:hover{background:#0a7f75;border-color:#0a7f75}
.tk-col-travail .tw-btn.tw-btn-fin{background:transparent;color:#7a5518;border-color:#e6cf9c;font-weight:700}
.tk-col-travail .tw-btn.tw-btn-fin:hover{background:#fdf6e7}

/* 7 · LA BULLE DE FACTURATION.
   « Obligation pour valider en bulle de dire si le temps passé à l'opération
   faite doit être ajouté au cumul facturable ou juste au temps passé. »
   Deux réponses de MÊME TAILLE et aucune pré-cochée : une réponse par défaut
   finit toujours par être la réponse de tout le monde. Le voile est posé sur la
   colonne, pas sur l'écran entier — on continue de voir ce qu'on vient
   d'écrire. */
.tk-col-travail{position:relative}
.tw-fact{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:14px;background:rgba(18,38,43,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  border-radius:var(--r)}
.tw-fact[hidden]{display:none}
.tw-fact-c{width:min(420px,100%);max-height:100%;overflow:auto;padding:16px 18px 14px;
  border-radius:14px;background:#fff;box-shadow:0 18px 46px rgba(10,30,40,.32)}
.tw-fact-c h4{margin:0 0 4px;font:800 15px var(--font,system-ui,sans-serif);color:#12262b}
.tw-fact-q{margin:0 0 13px;font:500 12.5px/1.5 var(--font,system-ui,sans-serif);color:#4a6068}
.tw-fact-q b{font-weight:800;color:#12262b}
.tw-fact-b{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* 08/09 (Miguël) — TROIS ISSUES, de même taille et de même poids. Aucune n'est
   pré-choisie et aucune n'est plus grosse que les autres : une réponse mise en
   avant devient la réponse de tout le monde.
   La couleur dit ce qu'elle fait — turquoise ce qui part en facturation, ambre
   le partiel, ardoise ce qui n'y va pas. */
.tw-fact-b3{grid-template-columns:1fr 1fr 1fr;gap:7px}
.tw-fact-b3 > button b{font-size:13px}
.tw-fact-b3 > button span{font-size:10px}
.tw-fact-part{background:#f2b33d;border-color:#f2b33d;color:#3a2a05}
.tw-fact-part:hover{background:#e9a92f;border-color:#e9a92f}
/* Le montant : les gestes de la maison — moins-quinze, plus-quinze, raccourcis,
   frappe libre — dans un cadre plus petit, puisqu'il ne sert qu'à un cas sur
   trois. */
.tw-fact-p{margin-top:12px;padding-top:12px;border-top:1px solid #eef2f3;
  display:flex;flex-direction:column;gap:7px}
.tw-fact-p[hidden]{display:none}
.tw-fact-p label{font:800 11px var(--font,system-ui,sans-serif);color:#12262b}
.tw-fact-dur{display:flex;align-items:center;gap:6px}
.tw-fact-dur input{flex:1 1 auto;min-width:0;height:34px;padding:0 10px;text-align:center;
  border-radius:9px;border:1.5px solid #cfdbe1;background:#fff;
  font:800 15px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#12262b}
.tw-fact-dur input:focus{outline:2px solid var(--accent-bright);outline-offset:1px}
.tw-fact-pas{flex:0 0 auto;width:42px;height:34px;cursor:pointer;border-radius:9px;
  border:1.5px solid #cfdbe1;background:#f7fafb;
  font:800 12px var(--font,system-ui,sans-serif);color:#12262b}
.tw-fact-pas:hover{background:#e9eff2}
.tw-fact-chips{display:flex;flex-wrap:wrap;gap:5px}
.tw-fact-chip{padding:3px 9px;cursor:pointer;border-radius:999px;border:1.5px solid #cfdbe1;
  background:#f7fafb;font:600 11px var(--font,system-ui,sans-serif);color:#4a6068}
.tw-fact-chip:hover{background:#e9eff2;color:#12262b}
.tw-fact-b > button{display:flex;flex-direction:column;gap:2px;padding:11px 10px;cursor:pointer;
  border-radius:11px;border:1.5px solid transparent;text-align:center;transition:.15s}
.tw-fact-b > button b{font:800 14px var(--font,system-ui,sans-serif)}
.tw-fact-b > button span{font:500 10.5px/1.3 var(--font,system-ui,sans-serif)}
.tw-fact-oui{background:#0a6f67;border-color:#0a6f67;color:#fff}
.tw-fact-oui:hover{background:#0a7f75;border-color:#0a7f75}
.tw-fact-non{background:#f1f5f7;border-color:#cfdbe1;color:#12262b}
.tw-fact-non:hover{background:#e6edf1}
/* Le motif n'est pas une politesse : c'est ce qui permet, trois mois plus tard,
   de savoir pourquoi une heure de travail n'a jamais été facturée. */
.tw-fact-m{margin-top:12px;padding-top:12px;border-top:1px solid #eef2f3;display:flex;flex-direction:column;gap:7px}
.tw-fact-m[hidden]{display:none}
.tw-fact-m label{font:800 11px var(--font,system-ui,sans-serif);color:#12262b}
.tw-fact-m select,.tw-fact-m input{width:100%;height:32px;padding:0 10px;border-radius:9px;
  border:1.5px solid #cfdbe1;background:#fff;font:500 12.5px var(--font,system-ui,sans-serif);color:#12262b}
.tw-fact-m select:focus,.tw-fact-m input:focus{outline:2px solid var(--accent-bright);outline-offset:1px}
.tw-fact-err{margin:0;font:600 11.5px var(--font,system-ui,sans-serif);color:#9a3412}
.tw-fact-err[hidden]{display:none}
.tw-fact-ok{margin-top:2px;padding:9px 12px;cursor:pointer;border-radius:10px;border:1.5px solid #0a6f67;
  background:#0a6f67;color:#fff;font:800 12.5px var(--font,system-ui,sans-serif)}
.tw-fact-ok:hover{background:#0a7f75;border-color:#0a7f75}
.tw-fact-x{display:block;margin:11px auto 0;padding:4px 10px;cursor:pointer;border:0;background:transparent;
  font:600 11.5px var(--font,system-ui,sans-serif);color:#4a6068;text-decoration:underline}
.tw-fact-x:hover{color:#12262b}
/* Une phrase de six mots n'a pas besoin de 40 px de haut, et la note du banc
   d'essai se lit une fois puis ne sert plus qu'à rappeler où l'on est. */
.tk .tw-ok,.tk .tw-err{margin:0 0 7px;padding:7px 12px;font-size:12.5px;line-height:1.35}
.tk /* ═══ 08/09/2026 (Miguël) — L'HARMONIE DES DEUX ZONES DE TRAVAIL ════════════
   « C'est mieux mais il faut optimiser, améliorer. Propose-moi quelque chose de
   beau, aligné, harmonieux. »

   Les deux colonnes suivaient déjà le même plan ; il leur manquait la même
   GRAMMAIRE. Les étiquettes n'avaient pas le même poids, les champs pas la même
   hauteur, les écarts pas la même valeur : on voyait deux formulaires qui se
   ressemblent, pas deux moitiés d'un même écran.

   QUATRE MESURES, LES MÊMES DES DEUX CÔTÉS :
     étiquettes   11 px, graisse 800, majuscules espacées — elles nomment, elles
                  ne parlent pas, donc même voix partout
     champs       34 px de haut, coins à 9 px, même bordure — un champ de saisie
                  a une seule taille dans cette maison
     raccourcis   26 px, coins ronds — ils se cliquent, ils ne se lisent pas
     écarts       8 px entre deux blocs, 4 px entre une étiquette et son champ

   Un écran calme repose sur peu de valeurs, répétées. Sept écarts différents
   donnent l'impression que rien n'est aligné, même quand tout l'est. */
@media (min-width:1201px){
  /* ── LES ÉTIQUETTES ── même voix des deux côtés, teintée de la couleur de sa
     colonne : turquoise pour ce qui est fait, ambre pour ce qui est à venir. */
  .tk-col-travail .tw-bloc > label,.tk-col-travail .tw-dur > label,
  .tk-col-suite  .tw-bloc > label,.tk-col-suite  .tw-dur > label,
  .tk-col-suite  .tw-duo .tw-bloc > label{
    display:block;margin:0 0 4px;font:800 11px var(--font,system-ui,sans-serif);
    letter-spacing:.08em;text-transform:uppercase}
  .tk-col-travail .tw-bloc > label,.tk-col-travail .tw-dur > label{color:#3f5a60}
  .tk-col-suite .tw-bloc > label,.tk-col-suite .tw-dur > label,
  .tk-col-suite .tw-duo .tw-bloc > label{color:#5c4a2a}

  /* ── LES CHAMPS ── une seule hauteur, un seul rayon, une seule bordure. */
  .tk-col-travail .tw-pied .tw-inp,.tk-col-suite .tw-pied .tw-inp,
  .tk-col-suite .tw-duo input,.tk-col-suite .tw-duo select{
    height:34px;border-radius:9px;border:1.5px solid var(--border-light);
    background:#fff;color:#12262b;font-size:14px;padding:0 10px}
  .tk-col-travail .tw-pied .tw-inp,.tk-col-suite .tw-pied .tw-inp{
    text-align:center;font:800 15px var(--mono,ui-monospace,SFMono-Regular,monospace)}
  .tk-col-travail .tw-pas,.tk-col-suite .tw-pas{height:34px;min-width:44px;border-radius:9px}

  /* ── LES RACCOURCIS ── ils se cliquent, ils ne se lisent pas. */
  .tk-col-travail .tw-chip,.tk-col-suite .tw-chip{
    height:26px;padding:0 10px;border-radius:999px;
    font:600 11px var(--font,system-ui,sans-serif);
    display:inline-flex;align-items:center}
  .tk-col-travail .tw-case,.tk-col-suite .tw-case{
    height:30px;padding:0 11px;border-radius:9px;
    display:inline-flex;align-items:center;gap:7px;
    font:600 12px var(--font,system-ui,sans-serif)}

  /* ── LE RYTHME ── deux valeurs d'écart, pas sept. */
  .tk-col-travail .tw-pied,.tk-col-suite .tw-pied{gap:8px 10px;padding:10px 14px 11px}
  .tk-col-suite .tw-pied > .tw-dur{gap:4px 10px}
  .tk-col-suite .tw-pied > .tw-duo{gap:10px}
  .tk-col-travail .dedans,.tk-col-suite .dedans{padding:10px 14px;gap:8px}
  .tk-col-travail .dedans > .tw-bloc,.tk-col-suite .dedans > .tw-bloc{margin-bottom:0}

  /* ── LA ZONE OÙ L'ON ÉCRIT ── même cadre des deux côtés ; c'est la pièce
     principale, elle porte donc le seul contour un peu marqué. */
  .tk-col-travail .dedans textarea,.tk-col-suite .dedans textarea{
    border-radius:10px;border:1.5px solid var(--border-light);
    font:400 13.5px/1.55 var(--font,system-ui,sans-serif);padding:9px 11px}
  .tk-col-travail .dedans textarea:focus,.tk-col-suite .dedans textarea:focus{
    border-color:var(--accent-bright)}
}
/* 08/09 (Miguel) — « ne pas brider a des durees predefinies trop restrictives ».
   Un raccourci est un raccourci, pas une liste de choix. Cette ligne le dit,
   discretement : elle doit se voir sans concurrencer les boutons. */
.tw-libre{margin:3px 0 0;font:500 11px var(--font,system-ui,sans-serif);color:#4a6068}
.tw-libre b{font:800 11px var(--mono,ui-monospace,SFMono-Regular,monospace);color:#12262b}
/* 09/09 (Miguel) — LE BADGE DU CUMUL TRIMESTRIEL sur la vignette. Une pastille
   turquoise, courte et dense, posee avant le titre. Elle dit une chose : ce
   ticket n'est pas du travail a faire, c'est un cumul. Blanc sur #0a6f67 :
   6,03:1. */
.dev .dct{position:absolute;top:6px;right:7px;z-index:2;
  padding:1px 6px;border-radius:999px;background:#0a6f67;color:#fff;
  font:800 9.5px var(--font,system-ui,sans-serif);letter-spacing:.04em}
/* 28/09 — LE POINT DE CELUI QUI S'OCCUPE DU TICKET. Même coin que le badge du cumul,
   qu'il ne croise jamais : une vignette est soit un travail confié à quelqu'un, soit un
   cumul. L'anneau blanc le détache aussi bien d'une vignette rose pâle que d'une sombre.
   La couleur est posée par assets/js/couleurs.js — jamais écrite dans la page. */
.dev .dqui{position:absolute; top:6px; right:7px; z-index:2; width:9px; height:9px;
  border-radius:50%; background:var(--qui,#8fa3ab); box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
.dev{position:relative}
/* 15/09 (Miguël) — L'INFOBULLE D'UNE VIGNETTE FLOTTE HORS DE LA CARTE.
   « Uniquement le sujet et son résumé + la prochaine tâche à faire, en gras. »
   La carte coupe ce qui dépasse (overflow:hidden) : une bulle posée dans la
   vignette serait invisible, sans un mot d'erreur — le piège connu. La bulle
   est donc écrite cachée dans la vignette, et `vignette-bulle.js` en fait une
   copie flottante, fixée à l'écran, placée sous la vignette et retenue dans les
   bords. Elle prend la couleur de l'état de sa vignette par le liseré gauche. */
.dev .dev-bulle{display:none}
.dev-flot{position:fixed;left:0;top:0;z-index:80;width:min(420px,72vw);display:none;
  padding:9px 12px 10px;border:1.5px solid #cfdbe1;border-left-width:5px;border-radius:10px;
  background:#fff;box-shadow:0 12px 30px rgba(20,40,50,.18);text-align:left;white-space:normal;
  pointer-events:none}
.dev-flot.ouverte{display:block}
/* L'habit sombre de la supervision, repris de .sup-page .dev .tip (16/09). */
.dev-flot.sup{background:#11161f;border:1px solid #2a3342;border-left-width:1px;border-radius:6px;padding:6px 10px;
  width:auto;min-width:190px;color:#e2e8f0;line-height:1.45;
  font:500 10px var(--mono,ui-monospace,SFMono-Regular,monospace)}
.dev-flot.sup .thd{font:800 12px var(--font,system-ui,-apple-system,sans-serif);color:#fff;margin-bottom:3px;}
.dev-flot.sup .tl{display:flex;justify-content:space-between;gap:10px;font:600 10px var(--font,system-ui,-apple-system,sans-serif);color:#b8c2cf}
.dev-flot.sup .tl b{color:#f0f3fa;font-weight:700;text-align:right}
.dev-flot.sup .tl b.t-alerte{color:#f0b46b}
.dev-flot.sup .tl b.t-info{color:#93c5fd}

.dev-flot.sup .tsep{height:1px;background:rgba(255,255,255,.14);margin:5px 0}
.dev-flot.sup .tprov{font-weight:700}
.dev-flot.sup .tprov.t-manuel{color:#fff}
.dev-flot.sup .tprov.t-auto{color:#8ee9c9}
.dev-flot.sup .tprov.t-machine{color:#f0b46b}
/* 16/09, 13 h (Miguël : « mettre en avant ce qui alerte ») — LE CADRE « POURQUOI ».
   En tête, en couleur, une ligne par motif ; les informations passent dessous,
   plus petites et plus grises. L'état est une pastille à côté du nom. */
.dev-flot.sup{max-width:320px}
.dev-flot.sup .thd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;word-break:normal}
.dev-flot.sup .tetat{font:800 9px var(--font,system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid currentColor}
.dev-flot.sup .tetat.t-err{color:#fda4a4}
.dev-flot.sup .tetat.t-warn{color:#fcd34d}
.dev-flot.sup .tetat.t-info{color:#93c5fd}
.dev-flot.sup .tetat.t-ok{color:#86efac}
.dev-flot.sup .tetat.t-hors{color:#cbd5e1}
.dev-flot.sup .tpq{margin:5px 0 4px;padding:6px 9px;border-radius:7px;border:1px solid;border-left-width:4px;background:rgba(255,255,255,.06)}
.dev-flot.sup .tpq.t-err {border-color:#f87171;background:rgba(239,68,68,.14)}
.dev-flot.sup .tpq.t-warn{border-color:#f0b46b;background:rgba(240,180,107,.14)}
.dev-flot.sup .tpq.t-info{border-color:#93c5fd;background:rgba(147,197,253,.12)}
.dev-flot.sup .tpq.t-ok  {border-color:#86efac;background:rgba(134,239,172,.12)}
.dev-flot.sup .tpq-t{font:800 9px var(--font,system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#e2e8f0;margin-bottom:2px}
.dev-flot.sup .tpq.t-ok .tpq-t{color:#86efac;margin:0}
.dev-flot.sup .tpq ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.dev-flot.sup .tpq li{font:700 11px/1.35 var(--font,system-ui,sans-serif);color:#fff;white-space:normal}
.dev-flot.sup .tpq li.t-err {color:#fecaca}
.dev-flot.sup .tpq li.t-warn{color:#fde68a}
.dev-flot.sup .tpq li.t-info{color:#bfdbfe;font-weight:600}
.dev-flot.sup .tprev{margin-top:2px}
.dev-flot.sup .tprev b{color:#8ee9c9}
.dev-flot.sup .tinfos .tl{font-size:9.5px;color:#9aa6b6}
.dev-flot.sup .tinfos .tl b{color:#cbd5e1;font-weight:600}
.dev-flot.t-ok  {border-color:#7cc7bb}
.dev-flot.t-info{border-color:#93b4f5}
.dev-flot.t-warn{border-color:#f0a95a}
.dev-flot.t-err {border-color:#f4a3a3}
.db-sujet{display:block;font:600 12.5px/1.3 var(--font,system-ui,sans-serif);color:#12262b}
.db-resume{display:block;margin-top:4px;font:400 12px/1.45 var(--font,system-ui,sans-serif);color:#4a6068;
  white-space:pre-wrap}
/* La tâche à faire : en gras, et séparée — c'est elle qu'on est venu lire. */
.db-suite{display:block;margin-top:6px;padding-top:6px;border-top:1px solid #eef2f3;
  font:800 12.5px/1.35 var(--font,system-ui,sans-serif);color:#0a6f67}
.dev-flot.t-warn .db-suite{color:#9a3412}
.dev-flot.t-err  .db-suite{color:#9a3412}
.dev-flot.t-info .db-suite{color:#1e4fa8}
.tk-note{margin-top:7px;font-size:11px;line-height:1.35}
.tk-note{margin:14px 0 0;padding:11px 14px;border-radius:var(--r);border-left:4px solid var(--accent);
         background:#f6f8f9;font:600 12.5px/1.55 var(--font,system-ui,sans-serif);color:#12262b}
/* ---- MONCOMPTE ---- */
.mdp-wrap{max-width:560px;margin:0 auto;padding:4px 0 40px}
  .mdp-qui{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:11px 14px;
           border:1.5px solid var(--border-light);border-radius:var(--r);background:var(--bg-soft,#f6f8f9)}
  .mdp-qui .rond{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;
                 display:flex;align-items:center;justify-content:center;font:800 13px var(--font);flex:0 0 34px}
  .mdp-qui b{display:block;font:700 13.5px var(--font);color:var(--tx-dark,#1a1f2e)}
  .mdp-qui span{display:block;font:500 12px var(--font);color:var(--tx-mid,#4a6068)}
  .mdp-flash{margin:0 0 14px;padding:11px 14px;border-radius:var(--r);
             border-left:4px solid var(--accent);background:var(--bg-soft,#f6f8f9);
             font:600 13px var(--font);color:var(--tx-dark,#1a1f2e);line-height:1.45}
  .mdp-flash.ko{border-left-color:#dc2626}
  .mdp-champ{margin:0 0 13px}
  .mdp-champ label{display:block;font:700 12.5px var(--font);color:var(--tx-dark,#1a1f2e);margin:0 0 5px}
  .mdp-champ input{width:100%;height:38px;padding:0 12px;border:1.5px solid var(--border-light);
                   border-radius:var(--r);font:500 13.5px var(--font);color:var(--tx-dark,#1a1f2e);background:#fff}
  .mdp-champ input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
  .mdp-aide{font:500 12px var(--font);color:var(--tx-mid,#4a6068);margin:5px 0 0;line-height:1.45}
  .mdp-pied{display:flex;justify-content:flex-end;gap:9px;margin:20px 0 0}

/* ---- TRAVAIL ---- */
/* 07/09/2026 — L'ECRAN DE TRAVAIL D'UN TICKET (« inspire-toi de V1 et
   ameliore »). Le champ de duree remplace la molette de V1 : on ecrit la duree,
   ou l'on clique un raccourci, ou l'on ajuste de quinze en quinze. */

.tw-ok,.tw-err{margin:0 0 12px;padding:10px 14px;border-radius:var(--r);
  font:600 13px/1.5 var(--font,system-ui,sans-serif)}
.tw-ok{background:#e8f7f1;border-left:4px solid #0a8f84;color:#0b4f49}
.tw-err{background:#fdecec;border-left:4px solid #c0392b;color:#7f1d1d}

.tw-form{display:block}
.tk-col .tw-dur[hidden],.tk-col .tw-motif[hidden],.tk-col .tw-km[hidden],
.tk-col .tw-avert[hidden]{display:none}

/* Le rappel de ce qui etait prevu : gris, discret, non modifiable. */
.tw-rappel{margin:0 0 13px;padding:9px 12px;border-radius:var(--r);
  border-left:4px solid #cfd8dc}
.tw-rappel > b{display:block;font:800 13.5px var(--font,system-ui,sans-serif);line-height:1.35}
.tw-rappel > span{display:block;margin-top:2px;font:600 11.5px var(--font,system-ui,sans-serif);color:#4a6068}
.tw-rappel.vide{font:500 12.5px var(--font,system-ui,sans-serif);color:#4a6068;border-left-color:#e6e9f0}
.tw-consigne{margin:6px 0 0;padding:7px 10px;border-radius:8px;background:#fff;
  font:500 12.5px/1.55 var(--font,system-ui,sans-serif);color:#12262b;white-space:pre-wrap;
  max-height:9em;overflow:auto}

.tw-bloc{margin:0 0 13px}
.tw-bloc label,.tw-dur label,.tw-motif label{display:block;margin:0 0 4px;
  font:800 11px var(--font,system-ui,sans-serif);letter-spacing:.09em;text-transform:uppercase;color:#4a6068}
.tw-bloc label i{font-style:normal;color:#b45309;letter-spacing:.03em}
.tw-aide{margin:0 0 6px;font:500 11.5px/1.5 var(--font,system-ui,sans-serif);color:#4a6068}

.tw-bloc textarea,.tw-bloc select,.tw-bloc input[type=date],.tw-bloc input[type=time],
.tw-motif select,.tw-motif input[type=text]{width:100%;box-sizing:border-box;
  border:1.5px solid var(--border-light);border-radius:var(--r);background:#fff;color:#12262b;
  padding:9px 11px;font:500 13.5px/1.55 var(--font,system-ui,sans-serif)}
.tw-bloc textarea{resize:vertical;min-height:78px}
.tw-bloc textarea:focus,.tw-bloc select:focus,.tw-bloc input:focus,
.tw-motif select:focus,.tw-motif input:focus,.tw-inp:focus{outline:none;
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(6,116,125,.14)}

/* LE CHAMP DE DUREE. */
.tw-dur{margin:0 0 13px}
.tw-dur-l{display:flex;align-items:stretch;gap:6px}
.tw-inp{flex:1 1 auto;min-width:0;box-sizing:border-box;text-align:center;
  border:1.5px solid var(--border-light);border-radius:var(--r);background:#fff;color:#12262b;
  padding:8px 10px;font:800 16px var(--mono,ui-monospace,monospace);letter-spacing:.02em}
.tw-pas{flex:0 0 auto;width:46px;border:1.5px solid var(--border-light);border-radius:var(--r);
  background:#f6f8f9;color:#12262b;cursor:pointer;
  font:800 12.5px var(--font,system-ui,sans-serif)}
.tw-pas:hover{background:#eef2f3;border-color:#cfd8dc}
.tw-chips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0}
.tw-chip{padding:4px 9px;border:1.5px solid var(--border-light);border-radius:999px;color:#4a6068;cursor:pointer;
  font:700 11.5px var(--font,system-ui,sans-serif)}
.tw-chip:hover{color:#12262b}
.tw-chip.on{background:#e6f4f3;border-color:#9fd0cb;color:#0b4f49}
/* Le retour parle : il dit ce qui vient d'etre corrige, et pourquoi. */
.tw-fb{margin:5px 0 0;min-height:1px;font:600 11.5px/1.5 var(--font,system-ui,sans-serif);color:#4a6068}
.tw-fb.alerte{color:#9a3412}
.tw-fb:empty{margin:0}

.tw-motif{margin:0 0 13px;padding:10px 12px;border-radius:var(--r);
  background:#fff7ed;border-left:4px solid #f59f4d}
.tw-motif select{margin-bottom:6px}

.tw-cases{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 13px}
.tw-case{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  border:1.5px solid var(--border-light);border-radius:999px;background:#fff;cursor:pointer;
  font:700 12px var(--font,system-ui,sans-serif);color:#4a6068}
.tw-case input{margin:0;accent-color:var(--accent)}
.tw-case:hover{background:#f6f8f9}
.tw-km{display:inline-flex;align-items:center;gap:6px;
  font:700 11.5px var(--font,system-ui,sans-serif);color:#4a6068}
.tw-km input{width:74px;box-sizing:border-box;border:1.5px solid var(--border-light);
  border-radius:var(--r);padding:6px 8px;background:#fff;color:#12262b;
  font:700 13px var(--mono,ui-monospace,monospace)}

.tw-duo{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tw-avert{margin:0 0 13px;padding:8px 11px;border-radius:var(--r);
  background:#fff7ed;border-left:4px solid #f59f4d;
  font:600 11.5px/1.5 var(--font,system-ui,sans-serif);color:#7c2d12}

.tw-actions{margin:4px 0 0}
/* 07/09/2026 — LE PIED DU CADRE (« des chats peuvent scroller mais les menus
   doivent rester visibles », Miguel). Le bouton qui ecrit est SORTI de la
   zone qui defile : ce n'est pas un element colle qui reviendrait a sa place
   en bas de course, c'est un troisieme etage de la colonne, qui n'a jamais
   bouge. Titre fixe · corps qui defile · pied fixe. */
.tw-pied{flex:0 0 auto;padding:9px 14px 11px;border-top:1.5px solid var(--border-light);
  background:#fff;box-shadow:0 -6px 14px rgba(18,38,43,.05)}
.tk-col-travail .tw-pied{background:var(--tk-faire-f,#c9e9e4);border-top-color:var(--tk-faire-b,#0BAE9F)}
.tk-col-suite .tw-pied{background:var(--tk-prevoir-f,#fde1c4);border-top-color:var(--tk-prevoir-b,#ea7f1b)}
.tw-pied .tw-aide{margin:5px 0 0;text-align:center}

/* 07/09/2026 — LE PIED CHARGE (« ça mérite d'être sticky visible », Miguël).
   Les deux durées côte à côte, une seule rangée de raccourcis, les deux cases,
   puis le bouton. Tout est resserré : ce pied ne doit pas manger la place du
   compte rendu, qui reste la raison d'être de la colonne. */
/* 08/09 — la paire disparait avec le champ « facture » ; le champ restant se
   borne, il n'a pas a occuper toute la colonne pour recevoir « 2h ». */
.tw-duo-dur{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tw-pied .tw-dur-l{max-width:210px}
.tw-pied .tw-dur{margin:0;min-width:0}
.tw-pied .tw-dur > label{margin-bottom:3px}
.tw-pied .tw-inp{padding:6px 4px;font-size:15px}
.tw-pied .tw-pas{width:34px;font-size:11.5px}
.tw-pied .tw-chips{margin:7px 0 0}
.tw-pied .tw-chip{padding:3px 8px;font-size:11px}
.tw-pied .tw-motif{margin:8px 0 0;padding:8px 10px}
.tw-pied .tw-motif label{margin-bottom:3px}
.tw-pied .tw-motif select,.tw-pied .tw-motif input{padding:6px 9px;font-size:12.5px}
.tw-pied .tw-cases{margin:8px 0 6px}
.tw-pied .tw-case{padding:5px 9px;font-size:11.5px}
.tw-pied .tw-fb{font-size:11px}
.tw-pied .tw-btn{margin-top:2px}

/* 07/09/2026 — LE RESUME DE CE QUI A ETE FAIT (« un resume en plus de ce qui a
   ete fait, on developpe si on veut des details » ; puis : « en une lecture on
   lit les resumes des actions effectuees par le technicien »).
   Une balise <details> : aucun JavaScript, le navigateur deplie tout seul. */
.tk-resume{flex:0 0 auto;margin:0 0 12px;border:1.5px solid var(--tk-fait-b,#2e8b57);
  border-radius:var(--r);background:var(--tk-fait-f,#d6eedd);overflow:clip}
.tk-resume > summary{list-style:none;cursor:pointer;padding:9px 14px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tk-resume > summary::-webkit-details-marker{display:none}
/* Le chevron est dessine par la regle, pas par une image : il tourne a l'ouverture. */
.tk-resume > summary::after{content:'';margin-left:auto;width:8px;height:8px;align-self:center;
  border-right:2px solid var(--tk-fait,#166534);border-bottom:2px solid var(--tk-fait,#166534);
  transform:rotate(45deg);transition:transform .15s ease}
.tk-resume[open] > summary::after{transform:rotate(-135deg)}
.tk-resume > summary:hover{background:rgba(22,101,52,.05)}
.tk-resume-t{font:800 11px var(--font,system-ui,sans-serif);letter-spacing:.1em;
  text-transform:uppercase;flex:0 0 auto}
.tk-resume-l{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font:600 12.5px var(--font,system-ui,sans-serif);}
.tk-resume-l b{font-weight:800;color:#12262b}
.tk-resume-l .or b,.tk-resume-l .or{color:var(--tk-argent,#7a4b06)}
.tk-resume-l .ec{color:#9a3412}
.tk-resume-l .ok{color:var(--tk-fait,#166534)}
.tk-resume-l .att{color:#9a3412;font-weight:800}
.tk-resume-l .rien{font-weight:500}

/* Le detail : un recit, du plus ancien au plus recent. Borne a 34 % de la
   hauteur pour ne jamais chasser les colonnes de l'ecran. */
.tk-resume-d{max-height:34vh;overflow:auto;padding:2px 14px 12px;background:#fff;
  border-top:1.5px solid var(--tk-fait-b,#2e8b57)}
.tk-fait{padding:10px 0;border-bottom:1px solid #e9f0ea}
.tk-fait:last-child{border-bottom:0}
.tk-fait-q{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font:600 12px var(--font,system-ui,sans-serif);color:#4a6068}
.tk-fait-q > b{font:800 12.5px var(--font,system-ui,sans-serif);color:var(--tk-fait,#166534)}
.tk-fait-d{font:700 11.5px var(--mono,ui-monospace,monospace);color:#12262b}
.tk-fait-d i{font-style:normal;color:var(--tk-argent,#7a4b06)}
.tk-fait-p{font-size:12px}
.tk-fait-m{padding:1px 8px;border-radius:999px;background:var(--tk-prevoir-f,#fde1c4);
  color:var(--tk-argent,#7a4b06);font:700 11px var(--font,system-ui,sans-serif)}
/* LE TEXTE DU TECHNICIEN EST LA RAISON D'ETRE DE CE BLOC : il se lit entier,
   sans pli et sans clic. C'est la demande — « en une lecture ». */
.tk-fait-t{margin:4px 0 0;font:400 13.5px/1.6 var(--font,system-ui,sans-serif);
  color:#12262b;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.tk-fait-t.vide{color:#4a6068;font-style:italic}
.tw-btn{width:100%;box-sizing:border-box;padding:11px 14px;border-radius:var(--r);cursor:pointer;
  font:800 13.5px var(--font,system-ui,sans-serif)}
.tw-btn:focus-visible,.tw-chip:focus-visible,.tw-pas:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.tw-actions .tw-aide{margin:5px 0 0;text-align:center}

/* 07/09/2026, demande de Miguel — CHAQUE COLONNE DEFILE POUR ELLE-MEME.
   « On gagne en lisibilite » : les trois colonnes n'ont pas la meme longueur.
   Le fil d'un vieux ticket fait trois ecrans, le formulaire en fait un ; avec
   un defilement commun, descendre dans le fil emporte le formulaire hors de
   vue. Chacune chez soi, on lit et on ecrit en meme temps.
   --tk-haut = hauteur de l'en-tete colle (86 px, mesuree) plus une respiration.
   La colonne devient une boite en colonne : le titre reste fixe, seul le
   contenu bouge. min-height:0 est indispensable — sans lui, un enfant de
   flexbox refuse de retrecir sous la taille de son contenu, et rien ne defile. */
/* ---- TRAVAIL : LES COULEURS ---- */
/* 07/09/2026, demande de Miguel : « un peu plus de couleurs dans les blocs ? »
   Une couleur par colonne, choisie sur CE QU'ON Y FAIT :
     le fil = bleu (on lit) · l'etape = turquoise (on fait) · la suite = ambre
     (on prevoit).
   Toutes les teintes vivent ici, en variables : une couleur repetee a douze
   endroits est une couleur qu'on ne peut plus changer. */
/* 17/09/2026 (Miguël : « coloriser franchement » le matin, « une couleur par thème » l'après-midi,
   « le CSS à améliorer pour une harmonie partout » le soir) — LA PALETTE DE LA MAISON, UNE FOIS.
   Chaque thème a trois valeurs : la couleur foncée (texte, liseré, choix retenu), la bordure pleine
   (-b) et la teinte de fond (-f, ≈ 15–20 %). Huit thèmes, un sens chacun :
     faire  = turquoise, la maison, le terrain      fait   = vert, ce qui est fait
     temps  = violet, chronologie et durées         argent = or, ce qui se facture
     prevoir = orange, ce qu'on prévoit             lire   = bleu, ce qu'on lit et dit
     qui    = rose, les personnes                    cadre  = sable, le cadre neutre des écrans
   Aucune page ne réécrit ces teintes : elle nomme son thème. Le texte secondaire est sombre
   (règle du jour : jamais gris clair sur fond clair). */
:root{
  --tk-faire:#055a52;   --tk-faire-f:#c9e9e4;   --tk-faire-b:#0BAE9F;
  --tk-fait:#166534;    --tk-fait-f:#d6eedd;    --tk-fait-b:#2e8b57;
  --tk-temps:#4c1d95;   --tk-temps-f:#e9e0fb;   --tk-temps-b:#7c3aed;
  --tk-argent:#7a4b06;  --tk-argent-f:#fbeec4;  --tk-argent-b:#d4a72c;
  --tk-prevoir:#9a3f06; --tk-prevoir-f:#fde1c4; --tk-prevoir-b:#ea7f1b;
  --tk-lire:#1e40af;    --tk-lire-f:#d9e5fb;    --tk-lire-b:#2f6fd6;
  --tk-qui:#9d174d;     --tk-qui-f:#fbe0ec;     --tk-qui-b:#db2777;
  --tk-cadre:#6b5a3c;   --tk-cadre-f:#f7f2e8;   --tk-cadre-b:#c8b48c;
  --tx-dark-2:#3d4352;
}

/* LE COMPOSANT « ZONE » — un bloc coloré par thème, dessiné une fois. Une page écrit
   <section class="zone zone-fait"> … <label class="zone-lab">, <input class="zone-champ">,
   <label class="zone-case">, <button class="zone-chip">, <button class="zone-carte">,
   <button class="zone-btn"> — et ne choisit jamais une couleur elle-même. */
.zone{--z:var(--tk-faire,#055a52);--z-b:var(--tk-faire-b,#0BAE9F);--z-f:var(--tk-faire-f,#c9e9e4);background:var(--z-f,#c9e9e4);border:2px solid var(--z-b,#0BAE9F);border-left:8px solid var(--z,#055a52);border-radius:16px;padding:14px 18px 16px;box-shadow:0 4px 14px rgba(20,30,50,.08);color:var(--tx-dark,#1a1f2e)}
.zone-faire{--z:var(--tk-faire,#055a52);--z-b:var(--tk-faire-b,#0BAE9F);--z-f:var(--tk-faire-f,#c9e9e4)}
.zone-fait{--z:var(--tk-fait,#166534);--z-b:var(--tk-fait-b,#2e8b57);--z-f:var(--tk-fait-f,#d6eedd)}
.zone-temps{--z:var(--tk-temps,#4c1d95);--z-b:var(--tk-temps-b,#7c3aed);--z-f:var(--tk-temps-f,#e9e0fb)}
.zone-argent{--z:var(--tk-argent,#7a4b06);--z-b:var(--tk-argent-b,#d4a72c);--z-f:var(--tk-argent-f,#fbeec4)}
.zone-prevoir{--z:var(--tk-prevoir,#9a3f06);--z-b:var(--tk-prevoir-b,#ea7f1b);--z-f:var(--tk-prevoir-f,#fde1c4)}
.zone-lire{--z:var(--tk-lire,#1e40af);--z-b:var(--tk-lire-b,#2f6fd6);--z-f:var(--tk-lire-f,#d9e5fb)}
.zone-qui{--z:var(--tk-qui,#9d174d);--z-b:var(--tk-qui-b,#db2777);--z-f:var(--tk-qui-f,#fbe0ec)}
.zone-cadre{--z:var(--tk-cadre,#6b5a3c);--z-b:var(--tk-cadre-b,#c8b48c);--z-f:var(--tk-cadre-f,#f7f2e8)}
.zone-lab{display:block;font:700 12.5px var(--font,system-ui,sans-serif);letter-spacing:.09em;text-transform:uppercase;color:var(--z,#055a52);margin:0 0 10px}
.zone-lab em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;color:var(--tx-dark,#1a1f2e)}
.zone-champ{width:100%;box-sizing:border-box;border:2px solid var(--z-b,#0BAE9F);border-radius:12px;background:#fff;color:var(--tx-dark,#1a1f2e);font:600 16px/1.3 var(--font,system-ui,sans-serif);padding:10px 14px;outline:none}
.zone-champ:focus{border-color:var(--z,#055a52);box-shadow:0 0 0 3px rgba(11,174,159,.18)}
.zone-chips{display:flex;flex-wrap:wrap;gap:8px}
.zone-chip{border:2px solid var(--z-b,#0BAE9F);background:#fff;color:var(--tx-dark,#1a1f2e);border-radius:999px;padding:9px 16px;font:700 15px var(--font,system-ui,sans-serif);cursor:pointer}
.zone-chip.on,.zone-chip[aria-pressed="true"]{background:var(--z,#055a52);border-color:var(--z,#055a52);color:#fff}
.zone-case{display:inline-flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--z-b,#0BAE9F);border-radius:12px;padding:8px 12px;font:700 14px var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e);cursor:pointer}
.zone-case input{width:20px;height:20px;accent-color:var(--z,#055a52);margin:0}
.zone-case:has(input:checked){background:var(--z,#055a52);color:#fff}
.zone-case i,.zone-case em{font-style:normal;font-weight:500;color:var(--tx-dark-2,#3d4352)}
.zone-case:has(input:checked) i,.zone-case:has(input:checked) em{color:#fff}
.zone-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.zone-carte{border:2px solid var(--z-b,#0BAE9F);background:#fff;border-radius:16px;padding:12px 14px;cursor:pointer;text-align:left;color:var(--tx-dark,#1a1f2e);font:inherit}
.zone-carte b{display:block;font:800 16px/1.2 var(--font,system-ui,sans-serif)}
.zone-carte i{display:block;font:500 13px/1.4 var(--font,system-ui,sans-serif);font-style:normal;margin-top:4px}
.zone-carte.on{background:var(--z,#055a52);border-color:var(--z,#055a52);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.zone-carte.on b,.zone-carte.on i{color:#fff}
.zone-btn{border:0;border-radius:14px;padding:14px 24px;font:800 17px var(--font,system-ui,sans-serif);cursor:pointer;color:#0b1f22;background:linear-gradient(100deg,var(--or-1,#f5d370),var(--or-2,#e8c76a) 35%,var(--accent-bright,#0BAE9F));box-shadow:0 6px 18px rgba(11,174,159,.25)}
.zone-btn-sec{border:2px solid var(--tx-dark-2,#3d4352);background:#fff;color:var(--tx-dark,#1a1f2e);border-radius:14px;padding:11px 18px;font:700 15px var(--font,system-ui,sans-serif);cursor:pointer}
.zone-aide{margin:8px 0 0;font:500 13px/1.5 var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e)}
.zone-tete{background:linear-gradient(180deg,var(--tk-faire-f,#c9e9e4),#e4f3f2 70%);border:2px solid var(--tk-faire-b,#0BAE9F);border-left:8px solid var(--tk-faire,#055a52);border-radius:16px;padding:12px 18px;box-shadow:0 4px 14px rgba(20,30,50,.08)}
.zone-ecran{background:linear-gradient(180deg,#efe6d3,var(--tk-cadre-f,#f7f2e8) 22%);border:2px solid var(--tk-cadre-b,#c8b48c);border-left:8px solid var(--tk-cadre,#6b5a3c);border-radius:16px;padding:16px 20px 20px;box-shadow:0 4px 14px rgba(20,30,50,.08)}

/* Le bandeau de titre porte la couleur, et un liseré la rappelle sur toute la
   hauteur de la colonne — visible meme quand le titre est sorti de l'ecran. */
.tk-col > h3{border-bottom-width:2px}
.tk-col-fil{border-top:3px solid var(--tk-lire-b,#2f6fd6)}
.tk-col-fil > h3{background:var(--tk-lire-f,#d9e5fb);color:var(--tk-lire,#1e40af);border-bottom-color:var(--tk-lire-b,#2f6fd6)}
.tk-col-fil .tk-cnt{background:#fff;color:var(--tk-lire,#1e40af)}

.tk-col-travail{border-top:3px solid var(--tk-faire-b,#0BAE9F);border-color:var(--tk-faire-b,#0BAE9F)}
.tk-col-travail > h3{background:var(--tk-faire-f,#c9e9e4);color:var(--tk-faire,#055a52);border-bottom-color:var(--tk-faire-b,#0BAE9F)}
.tk-col-travail .tk-cnt{background:#fff;color:var(--tk-faire,#055a52)}

.tk-col-suite{border-top:3px solid var(--tk-prevoir-b,#ea7f1b)}
.tk-col-suite > h3{background:var(--tk-prevoir-f,#fde1c4);color:var(--tk-prevoir,#9a3f06);border-bottom-color:var(--tk-prevoir-b,#ea7f1b)}
.tk-col-suite .tk-cnt{background:#fff;color:var(--tk-prevoir,#9a3f06)}

/* Les intitules suivent la couleur de leur colonne : on sait ou l'on ecrit. */
.tk-col-travail .tw-bloc > label,.tk-col-travail .tw-dur > label{color:var(--tk-faire,#055a52)}
.tk-col-suite .tw-bloc > label,.tk-col-suite .tw-dur > label{color:var(--tk-prevoir,#9a3f06)}
.tk-col-travail .tw-bloc textarea:focus,.tk-col-travail .tw-inp:focus{border-color:var(--tk-faire,#055a52);box-shadow:0 0 0 3px rgba(6,95,102,.14)}
.tk-col-suite .tw-bloc textarea:focus,.tk-col-suite .tw-bloc select:focus,
.tk-col-suite .tw-bloc input:focus,.tk-col-suite .tw-inp:focus{border-color:#c98a2a;box-shadow:0 0 0 3px rgba(201,138,42,.16)}

/* LE TEMPS FACTURE PASSE EN OR. Il ne constate pas, il engage le client : il ne
   doit pas ressembler trait pour trait au temps reel juste au-dessus. */
.tw-dur[data-champ="facture"] > label{color:var(--tk-argent,#7a4b06)}
.tw-dur[data-champ="facture"] .tw-inp{border-color:var(--tk-argent-b,#d4a72c);background:var(--tk-argent-f,#fbeec4)}
.tw-dur[data-champ="facture"] .tw-chip.on{background:var(--tk-prevoir-f,#fde1c4);border-color:var(--tk-prevoir-b,#ea7f1b);color:var(--tk-argent,#7a4b06)}
.tw-dur[data-champ="facture"] .tw-fb{color:var(--tk-argent,#7a4b06)}
.tw-dur[data-champ="facture"] .tw-fb.alerte{color:#9a3412}

/* Le rappel de ce qui etait prevu appartient au passe proche : bleu, comme le fil. */
.tw-rappel{background:var(--tk-lire-f,#d9e5fb);border-left-color:var(--tk-lire-b,#2f6fd6)}
.tw-rappel > b{color:var(--tk-lire,#1e40af)}
.tw-consigne{border:1px solid var(--tk-lire-b,#2f6fd6)}

/* Ce qui est FAIT verdit, ce qui est PREVU reste ambre. Le mot est ecrit a
   cote : la couleur repete l'etat, elle ne le remplace pas. */
.tk-col-travail .tk-h4{color:var(--tk-fait,#166534);border-top-color:var(--tk-fait-b,#2e8b57)}
.tk-col-travail .tk-h4 .tk-cnt{background:var(--tk-fait-f,#d6eedd);color:var(--tk-fait,#166534)}
.tk-tache.fini{opacity:1;border-left:3px solid var(--tk-fait-b,#2e8b57);padding-left:9px;background:#fbfefc}
.tk-tache.fini > b{color:var(--tk-fait,#166534)}
.tk-col-suite .tk-h4{color:var(--tk-prevoir,#9a3f06);border-top-color:var(--tk-prevoir-b,#ea7f1b)}
.tk-col-suite .tk-h4 .tk-cnt{background:var(--tk-prevoir-f,#fde1c4);color:var(--tk-prevoir,#9a3f06)}
.tk-col-suite .tk-tache{border-left:3px solid var(--tk-prevoir-b,#ea7f1b);padding-left:9px;background:#fffdf8}
.tk-col-suite .tk-tache > b{color:var(--tk-prevoir,#9a3f06)}
.tk-pt.ok{background:var(--tk-fait-f,#d6eedd);color:var(--tk-fait,#166534)}

/* L'etape en cours est la seule chose vivante de l'ecran : elle garde le
   turquoise plein. */
.tk-encours{border-color:var(--tk-faire-b,#0BAE9F);background:var(--tk-faire-f,#c9e9e4)}
.tk-encours > b{color:var(--tk-faire,#055a52)}

/* Les deux boutons qui ECRIVENT restent turquoise tous les deux, quelle que
   soit la couleur de leur colonne : c'est le geste qui compte, pas l'endroit. */
.tw-btn{background:#fff;color:var(--tk-faire,#055a52);border:1.5px solid var(--tk-faire-b,#0BAE9F)}
.tw-btn:hover{background:var(--tk-faire-f,#c9e9e4)}
/* 07/09 — LA REGLE COMPLETE, REMISE APRES CELLE QUI L'AVAIT RECOUVERTE.
   `.tw-btn` et `.tw-btn-1` ont le meme poids ; ma regle de couleur, ecrite
   plus bas, avait efface le fond plein et les deux boutons etaient devenus
   identiques. On resout le conflit a sa source, jamais avec !important. */
.tw-btn-1{background:var(--tk-faire,#055a52);color:#fff;border-color:transparent}
.tw-btn-1:hover{background:var(--accent-deep,#044a52);color:#fff;border-color:transparent}
:root{--tk-haut:100px}

/* ---- TRAVAIL : REPLIER UNE COLONNE ---- */
/* 07/09/2026 (« reduire la surface de cette colonne », Miguel).
   La grille a largeurs fixes devient une RANGEE SOUPLE : avec une grille, il
   faudrait une regle par combinaison de replis — huit pour trois colonnes. En
   rangee souple, une colonne repliee ne prend plus sa part et les huit cas se
   resolvent seuls. Les proportions d'origine sont conservees telles quelles. */
@media (min-width:1201px){
  .tk-cols{display:flex;gap:13px;align-items:stretch}
  .tk-col{min-width:0}
  /* 08/09 (Miguël : « super perte de place ») — LE FIL S'ÉLARGIT. Mesuré : il
     cachait 614 px de conversation pendant que les deux autres colonnes tenaient
     entières. C'est ICI que se décident les largeurs au-delà de 1200 px, pas dans
     le `grid-template-columns` plus haut : cette rangée est souple, pas une
     grille. J'avais d'abord écrit là-haut, et rien n'avait bougé. */
  .tk-col-fil{flex:1.9 1 0}
  /* 08/09 (Miguël : « équilibrer les deux colonnes identiques en largeur ») —
     1,05 et 0,8 étaient un reste de l'époque à trois colonnes. Depuis que la
     chenille a remplacé le fil, les deux qui restent font le même métier : l'une
     raconte ce qui vient d'être fait, l'autre prépare ce qui suit.
     C'est ICI que la largeur se décide — j'avais d'abord écrit la même chose plus
     haut dans le fichier, et rien n'avait bougé : à poids égal, c'est la dernière
     règle écrite qui gagne. */
  .tk-col-travail{flex:1 1 0}
  .tk-col-suite{flex:1 1 0}
  /* Repliee : une bande etroite, titre a la verticale, corps et pied caches. */
  .tk-col.plie{flex:0 0 44px}
  .tk-col.plie .dedans,.tk-col.plie .tw-pied{display:none}
  .tk-col.plie > h3{writing-mode:vertical-rl;transform:rotate(180deg);
    height:100%;justify-content:flex-end;border-bottom:0;padding:12px 0;white-space:nowrap}
  .tk-col.plie .tk-cnt{margin:0}
}
.tk-plier{margin-left:6px;width:20px;height:20px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1.5px solid currentColor;border-radius:6px;background:transparent;color:inherit;
  opacity:.55;display:inline-flex;align-items:center;justify-content:center}
.tk-plier:hover{opacity:1;background:rgba(255,255,255,.6)}
.tk-plier:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;opacity:1}
/* Le chevron est dessine par la regle : pas de police, pas d'image, et il
   change de sens selon l'etat. */
.tk-plier::after{content:'';width:5px;height:5px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-left:2px}
.tk-col.plie .tk-plier::after{transform:rotate(-135deg);margin:0 2px 0 0}

/* Sous 1200 px les colonnes s'empilent : replier n'a plus d'objet, chacune
   occupe deja toute la largeur. Le bouton disparait plutot que de ne rien faire.
   CETTE REGLE VIENT APRES CELLE QUI DESSINE LE BOUTON. Ma premiere version la
   placait avant : a poids egal, c'est la derniere ecrite qui gagne, donc le
   `display:inline-flex` du dessin annulait le `display:none`, et le bouton
   restait visible sur telephone sans rien faire. */
@media (max-width:1200px){ .tk-plier{display:none} }
@media (min-width:1201px){
  /* 08/09 (Miguel) — LES DEUX COLONNES SE TERMINENT AU MEME PIED. Mesure : 504 px
     a gauche, 462 a droite, 42 px d'ecart entre les deux bas. La cause n'etait pas
     la zone de texte mais cet `align-items:start`, herite de l'epoque a trois
     colonnes ou la troisieme etait plus courte. Etirees, elles finissent ensemble. */
  .tk-cols{align-items:stretch}
  /* 07/09, seconde passe — `position:sticky` retiree : une colonne fait
     exactement la hauteur de sa rangee, donc elle n'a aucune course pour
     glisser. La propriete ne faisait rien, en silence. C'est desormais la
     page qui ne defile plus (voir le bloc LA FENETRE ci-dessous). */
  .tk-col{display:flex;flex-direction:column;min-height:0;max-height:100%}
  .tk-col > h3{flex:0 0 auto}
  .tk-col .dedans{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
                  scrollbar-width:thin}
}
@media (max-width:1200px){ .tw-duo{grid-template-columns:1fr} }

/* ---- TRAVAIL : LA FENETRE ---- */
/* 07/09/2026, demande de Miguel : « zones de titres de colonnes sticky ».
   La mesure a montre que les titres tenaient deja DANS leur colonne — c'est la
   PAGE qui debordait de 322 px et emportait tout. Un ecran de travail n'a
   aucune raison de defiler en entier : on lit a gauche et on ecrit au milieu en
   meme temps. Il tient donc dans la fenetre, et seules les colonnes defilent.
   --tk-tete-haut = distance mesuree entre le haut de la fenetre et le haut de
   l'ecran de travail (bandeau d'essai 29 + en-tete colle 86 + respiration). */
/* --tk-tete-haut : ce qu'il y a AU-DESSUS de l'ecran de travail (bandeau
   d'essai 29 + en-tete colle 86 + respiration).
   --tk-bas : la marge basse de la coquille du site (`.page`), mesuree a
   56 px. Deux valeurs separees parce qu'elles ont deux origines : l'une
   vient de cet ecran, l'autre du site. Les additionner en un seul nombre
   rendrait les deux introuvables le jour ou l'une bouge. */
/* 08/09/2026 — MESURE REPRISE SUR LA PAGE, le bandeau d'essai n'existe plus.
   135 px se décomposaient en 29 (bandeau « mode test ») + 86 (en-tête collé) + 20
   de respiration. Le bandeau a été retiré ce matin, et le calcul continuait de lui
   réserver sa place : une valeur écrite en dur survit toujours à ce qu'elle
   mesurait. Mesuré à nouveau : l'écran de travail commence à 106 px du haut.
   --tk-bas reste à 56 : essayé à 20, mesuré aussitôt, l'écran est descendu 36 px
   trop bas et la PAGE s'est mise à défiler. Ces 56 px ne sont pas une respiration
   décorative mais la marge basse réelle de la coquille du site : la retirer du
   calcul ne la supprime pas, elle s'ajoute simplement en dessous.
   Gain net : 29 px rendus aux colonnes, sans barre de défilement sur la page. */
:root{--tk-tete-haut:106px;--tk-bas:56px}

@media (min-width:1201px){
  /* 08/09, tard (Miguël : « c'est perfectible », copie d'écran à l'appui) —
     MIEUX VAUT UNE PAGE QUI DEFILE QU'UN CHAMP INVISIBLE.
     Ma règle disait « l'écran tient toujours dans la fenêtre ». Je l'avais vérifiée
     sur une seule hauteur — 1000 px. Sur une fenêtre de 820, la zone où l'on écrit
     le compte rendu passait ENTIÈREMENT hors champ. Une règle vérifiée sur un seul
     cas n'est pas une règle vérifiée.
     `height` devient `min-height` : tant que la fenêtre le permet, rien ne change ;
     en dessous, l'écran grandit et la page défile. Une page qui défile est un
     désagrément ; un champ invisible est une faute. */
  .tk{display:flex;flex-direction:column;
      min-height:calc(100vh - var(--tk-tete-haut,106px) - var(--tk-bas,56px))}
  /* Le plancher du bloc de travail : en dessous, on ne rogne plus, on défile. */
  /* 09/09 (Miguel : « reduire la marge vide de bas des deux colonnes ») — LE
     PLANCHER DESCEND DE CE QUE LES PIEDS ONT PERDU.
     470 px avaient ete mesures quand chaque pied portait encore une rangee de
     pastilles (~28 px) ET une rangee de cases a cocher (~30 px). Les pastilles ont
     ete retirees ce matin, les cases sont remontees dans la rangee des compteurs :
     58 px de moins par colonne, et le plancher continuait de les reserver.
     Une valeur ecrite en dur survit toujours a ce qu elle mesurait — c est la
     troisieme fois aujourd hui (le bandeau d essai, puis le plafond de 250 px).
     470 - 58 = 412, arrondi a 400. C est un CALCUL, pas une mesure a l ecran :
     s il reste du vide, ce nombre se corrige en une ligne. */
  .tk-cols{min-height:400px}
  .tk-tete,.tk-note,.tw-ok,.tw-err{flex:0 0 auto}
  /* Le formulaire enveloppe les trois colonnes : sans cette ligne il ne
     transmet pas la hauteur, et la rangee retombe a sa taille naturelle. */
  .tw-form{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .tk-cols{flex:1 1 auto;min-height:0}
  .tk-note{margin-top:10px;padding:8px 12px;font-size:11.5px;line-height:1.45}
}

/* Sous 1200 px les colonnes s'empilent : la page redevient le seul defilement,
   et la, `sticky` a de la course. Le titre de la colonne qu'on lit se colle
   sous l'en-tete du site. */
@media (max-width:1200px){
  .tk-col{overflow:visible}
  .tk-col > h3{position:sticky;top:var(--tk-haut,100px);z-index:4}
}

/* Les sous-titres sont des titres aussi : « Etapes deja faites » et « Deja
   prevu » se collent en haut de leur colonne quand on descend dans la liste.
   Le fond opaque et le debordement lateral evitent que le texte defile en
   transparence derriere eux. */
.tk-col .dedans .tk-h4{position:sticky;top:-11px;z-index:2;background:#fff;
  margin:16px -14px 8px;padding:9px 14px 6px}

/* ---- TRAVAIL : MOINS FADE ---- */
/* 07/09/2026, demande de Miguel : « legerement plus de couleurs pour une page
   moins fade ». La premiere passe n'avait colore que les BANDEAUX de titre :
   trois bandes fines au sommet d'une page restee blanche en dessous. On etend
   ici la couleur qui a deja un sens, sans en inventer une seule. */

/* Le corps de chaque colonne prend la teinte tres pale de sa couleur. Trois
   fois du blanc pur cote a cote, c'est une page sans relief. */
/* 08/09/2026 — LE PLI « DÉJÀ PRÉVU ». La balise <details> sait déplier toute
   seule, au clavier comme à la souris ; il lui manque seulement de RESSEMBLER à
   un pli. Sans triangle, personne ne devine qu'on peut cliquer. Le marqueur
   d'origine du navigateur est retiré : il se place à gauche, avant le titre, et
   décalerait cette ligne par rapport aux autres titres de la colonne. */
.tk-deja{margin:0}
.tk-deja > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.tk-deja > summary::-webkit-details-marker{display:none}
.tk-deja > summary::after{content:'\25BE';margin-left:auto;font-size:11px;color:#4a6068;
  transition:transform .15s ease}
.tk-deja[open] > summary::after{transform:rotate(180deg)}
.tk-deja > summary:hover{color:#12262b}
.tk-col-fil .dedans{background:#fbfcff}
.tk-col-travail .dedans{background:#fafefd}
/* 08/09/2026 — LA COLONNE DE DROITE TIENT ENTIERE (Miguël : « trop de choses à
   faire défiler »). Règle posée : ce qu'on ÉCRIT ne défile jamais, seule la
   CONVERSATION défile. Un formulaire qu'il faut faire défiler pour trouver son
   bouton, c'est là qu'on oublie un champ.
   648 px de contenu pour 496 visibles. Relevé poste par poste : 52 px
   d'explication des instructions, 68 px d'avertissement, 52 px de marges entre
   blocs, 26 px de marges intérieures aux paires (en plus de leur écart), 21 px
   de zone de saisie vide, 19 px sur les boutons de durée. Aucun n'est du
   contenu : ce sont des espaces et des explications.
   On ne rogne pas sur ce qui se lit — #4a6068 à 11 px reste très au-dessus du
   seuil de contraste — on rogne sur ce qui sépare. La colonne du milieu, où l'on
   écrit le compte rendu, n'est pas touchée : elle tient déjà. */
.tk-col.tk-col-suite .dedans{padding:8px 12px}
/* Les paires portaient une marge intérieure EN PLUS de l'écart de la grille :
   deux espacements pour un seul espace. */
.tk-col.tk-col-suite .tw-duo > .tw-bloc{margin-bottom:0}
.tk-col.tk-col-suite .tw-aide{font:500 11px var(--font,system-ui,sans-serif);line-height:1.3;margin-bottom:5px}
.tk-col.tk-col-suite .tw-avert{font-size:11px;}
.tk-col.tk-col-suite textarea{height:62px;min-height:0}
.tk-col.tk-col-suite .tw-chips > *{font-size:11px}
/* LES 51 DERNIERS PIXELS. Tous dans des textes d'explication et des marges,
   aucun dans une saisie : 40 px pour le paragraphe sous le grand bouton, 13 px
   de marge sur un pli refermé, 8 px de zone de saisie plus haute que ses trois
   lignes. Le paragraphe ne disparaît pas — ce qu'il dit compte, le bouton fait
   deux choses — il passe en une ligne serrée au lieu de trois. */
.tk-col.tk-col-suite .tw-pied{padding-top:8px;padding-bottom:8px}
.tk-col.tk-col-suite .tw-pied .tw-aide{font:500 10.5px var(--font,system-ui,sans-serif);
  line-height:1.25;margin:5px 0 0}
.tk-col.tk-col-suite .tw-dur-l{margin-bottom:0}
/* LES 24 DERNIERS PIXELS — ceux du pli « Déjà prévu » qui dépassait en bas. Pris
   sur des marges, jamais sur du texte. À la fin de ce compte la colonne ne
   défile plus du tout : le bouton d'enregistrement est toujours à l'écran, et le
   pli aussi. */
.tk-col.tk-col-suite .dedans{padding-bottom:4px}
/* ═══ 08/09 (Miguël : « quid de l'optimisation des deux zones de tâches ») ═══
   LES DEUX ZONES SE SERVENT DE LEUR LARGEUR.
   Mesuré : les colonnes font 794 px, et tout y était empilé sur des rangées
   pleine largeur — « Qui s'en charge » prenait 757 px pour deux champs de 375,
   et « Le jour » recommençait juste en dessous. Empiler des champs courts sur
   des rangées larges, c'est perdre de la hauteur sans rien gagner en lisibilité.
   Sous 1200 px, tout se rempile comme avant : ces règles ne valent qu'au-delà. */
@media (min-width:1201px){
  /* À DROITE — « qui » et « quand » se lisent ensemble : c'est la même question
     posée deux fois. Elles partagent donc une rangée. */
  /* `stretch` et non `flex-start` : la place rendue par l'etirement se repartit
     entre les rangees au lieu de faire un blanc en bas de colonne. */
  /* 09/09 (Miguel, capture a l appui) — LE PLI « DEJA PREVU » CESSAIT DE S ETIRER.
     `align-content:stretch` etire les LIGNES d un conteneur qui enveloppe pour
     remplir sa hauteur. Le pli, ferme, ne fait qu une ligne : il recevait tout
     l espace restant, et c est le vide qu il a barre en rouge.
     `flex-start` : les lignes se posent en haut et gardent leur hauteur. */
  .tk-col-suite .dedans{display:flex;flex-wrap:wrap;align-content:flex-start;gap:0 12px}
  /* Et la zone d'instructions grandit : c'est la seule qui puisse le faire, donc
     c'est a elle que revient la place. */
  .tk-col-suite .dedans > .tw-bloc:first-child{display:flex;flex-direction:column;min-height:0}
  .tk-col-suite .dedans > .tw-bloc:first-child > textarea{flex:1 1 auto;height:auto;min-height:56px;resize:none}
  .tk-col-suite .dedans > *{flex:1 1 100%;min-width:0}
  .tk-col-suite .dedans > .tw-duo{flex:1 1 calc(50% - 6px)}
  /* La durée à prévoir tient en deux tiers de la largeur ; les cases à cocher
     n'ont pas besoin d'une rangée pour elles seules. */
  /* La durée à prévoir REPREND TOUTE SA LARGEUR : à 62 % elle débordait
     horizontalement — ses neuf raccourcis n'y rentraient pas, et un débordement
     en largeur ne se voit pas tant qu'on ne l'a pas mesuré. */
  .tk-col-suite .dedans > .tw-dur{flex:1 1 100%}
  .tk-col-suite .dedans > .tw-cases{flex:1 1 100%}
  /* À GAUCHE — le temps passé et ses raccourcis vont ensemble : on choisit une
     durée, on l'ajuste. Deux rangées pour un seul geste, c'en était une de trop. */
  /* 250 et non 300 : mesure sur la page, 300 + 460 px de raccourcis font 760 pour
     une rangee qui n'en offre que 735 — le navigateur passait a la ligne, et la
     regle etait posee sans etre atteinte. Le champ porte trois elements courts :
     moins-quinze, la valeur, plus-quinze. */
  .tk-col-travail .tw-pied > .tw-dur{flex:0 0 250px}
  .tk-col-travail .tw-pied > .tw-chips{flex:1 1 auto;align-self:flex-end;padding-bottom:6px}
  /* ── LE BAS DES DEUX ZONES (Miguël : « quitte à changer des choses surtout en
     bas des zones ») ──
     Ce qui se RÈGLE — des cases, des raccourcis — vit sur la même ligne que ce
     qui VALIDE. Ce qui s'ÉCRIT garde la hauteur. Une rangée gagnée en bas est
     une rangée donnée à la zone d'écriture.
     À gauche : les deux cases occupaient une rangée entière pour deux mots ;
     elles rejoignent les boutons — cases à gauche, boutons à droite. */
  .tk-col-travail .tw-pied > .tw-cases{flex:0 1 auto;margin:0;align-self:center}
  /* `width:auto` est indispensable : la regle de base des boutons porte
     `width:100%`, et une base flexible « auto » part de la largeur declaree — le
     flex ne pouvait donc rien, les boutons restaient pleine largeur. */
  .tk-col-travail .tw-pied > .tw-btn{flex:0 1 auto;width:auto;min-width:190px}
  .tk-col-travail .tw-pied > .tw-btn.tw-btn-1{margin-left:auto;flex:0 1 auto;width:auto}
  .tk-col-travail .tw-pied > .tw-btn.tw-btn-fin{flex:0 1 auto;width:auto;min-width:150px}
  /* À droite : la phrase d'explication passe à côté du bouton. Elle explique,
     elle ne commande pas — elle n'a pas besoin d'une rangée à elle. */
  /* LES DEUX PIEDS COMMENCENT A LA MEME HAUTEUR (Miguel : « les deux zones de
     temps passe et a prevoir alignees en hauteur »). Les deux colonnes suivent le
     meme plan, mais le pied de droite porte en plus « qui s en charge » et « le
     jour » : sans regle, il est plus haut et son bloc de temps commence plus bas.
     Meme hauteur minimale pour les deux, boutons colles au bas de chacun, bloc de
     temps au haut : les deux se retrouvent sur la meme ligne.
     --tk-pied-h est MESURE sur la page, pas devine ; si le contenu du pied change,
     il est a remesurer (cicatrice C-65). */
  /* 09/09 — REMESURE. Le contenu du pied a change TROIS fois aujourd'hui :
     pastilles retirees, cases a cocher remontees dans la rangee des compteurs,
     champ de duree redessine. La valeur, elle, n'avait pas bouge — le pied
     continuait de reserver la place de ce qui n'existe plus, et Miguel a barre en
     rouge les deux bandeaux vides sur sa capture.
     Deux mesures concordantes :
       sur sa capture, les bandeaux vides font ~55 px   -> 252 - 55 = 197
       poste par poste, pastilles (~28) + cases (~30)   ->       - 58 = 194
     Trois pixels d'ecart entre les deux : on retient 197.
     La hauteur COMMUNE reste, elle : les deux pieds doivent commencer a la meme
     hauteur (08/09 au soir), et celui de droite porte en plus « qui s'en charge »
     et « le jour ». */
  .tk-cols{--tk-pied-h:197px}
  .tk-col-travail .tw-pied,
  .tk-col-suite .tw-pied{display:flex;flex-wrap:wrap;align-items:flex-start;
    align-content:flex-start;gap:4px 12px;min-height:var(--tk-pied-h)}
  .tk-col-travail .tw-pied > .tw-cases,
  .tk-col-travail .tw-pied > .tw-btn,
  .tk-col-suite .tw-pied > .tw-btn,
  .tk-col-suite .tw-pied > .tw-aide{align-self:flex-end}
  .tk-col-travail .tw-pied > .tw-cases{margin-top:auto}
  .tk-col-travail .tw-pied > .tw-btn.tw-btn-1{margin-top:auto}
  .tk-col-suite .tw-pied > .tw-btn{margin-top:auto}
  /* Les reglages de droite prennent la largeur qu'il leur faut, et rien de plus. */
  /* LE MIROIR L UN DE L AUTRE : meme largeur qu'a gauche pour le champ de temps,
     et les raccourcis a cote plutot que dessous. Meme mecanique, meme dessin —
     sinon l'oeil ne fait pas le rapprochement, et la place a droite du champ reste
     vide. Les raccourcis vivent DANS le bloc de duree a droite (ils sont poses par
     le meme gabarit) : on les sort de leur colonne pour les mettre en rangee. */
  .tk-col-suite .tw-pied > .tw-dur{flex:1 1 100%;margin-bottom:2px;
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px 10px}
  .tk-col-suite .tw-pied > .tw-dur > label{flex:1 1 100%;margin-bottom:2px}
  .tk-col-suite .tw-pied > .tw-dur > .tw-dur-l{flex:0 0 250px}
  .tk-col-suite .tw-pied > .tw-dur > .tw-chips{flex:1 1 auto;padding-bottom:4px}
  .tk-col-suite .tw-pied > .tw-dur > .tw-fb{flex:1 1 100%}
  .tk-col-suite .tw-pied > .tw-cases{flex:1 1 100%;margin-bottom:2px}
  .tk-col-suite .tw-pied > .tw-duo{flex:1 1 calc(50% - 6px);min-width:0}
  .tk-col-suite .tw-pied > .tw-avert{flex:1 1 100%;margin:2px 0}
  .tk-col-suite .tw-pied > .tw-btn{flex:1 1 260px;width:auto;min-width:260px;margin:0}
  .tk-col-suite .tw-pied > .tw-aide{flex:1 1 180px;margin:0;text-align:left}
}
/* 08/09, dernière passe — LA COLONNE DE DROITE TIENT A NOUVEAU. La chenille a
   pris 90 px aux deux colonnes ; la gauche a été rendue par son pied, la droite
   cachait encore 61 px — dont le bouton d'enregistrement quand le pli « déjà
   prévu » est ouvert. Relevé poste par poste : instructions 92, durée 86, cases
   30, qui 58, jour 62, avertissement 24, pli 36, plus 36 px de marges. Aucun de
   ces postes n'est du texte à lire : ce sont des champs et des espaces. On
   reprend donc sur les espaces et sur deux hauteurs de champ, jamais sur ce qui
   se lit. */
.tk-col.tk-col-suite .dedans > .tw-bloc:first-child textarea{}
.tk-col.tk-col-suite .tw-duo{gap:6px}
.tk-col.tk-col-suite .tw-duo .tw-bloc > label{margin-bottom:2px}
.tk-col.tk-col-suite .tw-duo input,
.tk-col.tk-col-suite .tw-duo select{height:29px}
.tk-col.tk-col-suite .tw-chips > *{padding-top:2px;padding-bottom:2px}
.tk-col.tk-col-suite .tw-cases{margin-top:0}
.tk-col.tk-col-suite .tk-deja > summary{padding-top:2px;padding-bottom:2px}
/* LE DERNIER DEBORDEMENT EN LARGEUR. Mesure : le pli « Déjà prévu » réclamait
   781 px pour 767 disponibles. Quatorze pixels — invisibles à l'œil, mais ils
   font naître une barre de défilement horizontale sur toute la colonne. Un
   débordement en largeur ne se voit pas : rien n'est coupé, rien n'est signalé,
   une barre grise apparaît en bas et on la prend pour une décoration. C'est pour
   cela qu'on le mesure au lieu de le regarder. */
.tk-col.tk-col-suite .tk-deja{min-width:0;max-width:100%}
/* DES MARGES NEGATIVES OUBLIEES. Le titre du pli portait `margin: 16px -14px 8px`
   — des marges NEGATIVES a gauche et a droite, venues du temps ou il devait
   deborder du rembourrage de sa colonne pour occuper toute la largeur. La colonne
   a change de rembourrage ; les marges sont restees. Mesure : 795 px dans un
   parent de 767, et une barre de defilement horizontale sur toute la colonne.
   Meme famille que C-65 : une valeur ecrite pour un contexte survit au contexte,
   et plus rien ne le dit. */
.tk-col.tk-col-suite .tk-deja > summary{margin:8px 0 6px;padding:2px 0}
.tk-col.tk-col-suite .tk-deja > summary{gap:6px}
.tk-col.tk-col-suite .tk-tache{min-width:0;overflow-wrap:anywhere}
.tk-col.tk-col-suite .tk-tache b{overflow-wrap:anywhere}
.tk-col.tk-col-suite .tw-pied .tw-aide{margin-top:3px}
.tk-col.tk-col-suite .dedans > .tw-bloc,
.tk-col.tk-col-suite .dedans > .tw-dur,
.tk-col.tk-col-suite .dedans > .tw-cases,
.tk-col.tk-col-suite .dedans > .tw-avert{margin-bottom:6px}
.tk-col.tk-col-suite .tw-avert{padding:5px 9px;line-height:1.25}
.tk-col.tk-col-suite .tw-chips{gap:4px}
.tk-col.tk-col-suite .dedans > .tw-bloc:first-child textarea{height:50px}
.tk-col.tk-col-suite .dedans > :last-child{margin-bottom:0}
.tk-col-suite .dedans{background:#fffdfa}
/* Les sous-titres colles reprennent le fond de LEUR colonne, sinon ils
   laisseraient passer le texte en transparence derriere eux. */
.tk-col-fil .dedans .tk-h4{background:#fbfcff}
.tk-col-travail .dedans .tk-h4{background:#fafefd}
.tk-col-suite .dedans .tk-h4{background:#fffdfa}

/* L'en-tete du ticket porte la marque de la maison au lieu d'un rectangle blanc. */
.tk-tete .num{}

/* La demande de depart appartient au fil : elle en prend le bleu. */
.tk-depart{background:var(--tk-lire-f,#d9e5fb);border-top-color:var(--tk-lire-b,#2f6fd6)}
.tk-depart h4{color:var(--tk-lire,#1e40af)}

/* Dans le fil : qui parle en bleu, et le temps passe en or — le meme or que le
   temps facture, parce que c'est la meme chose. */
.tk-msg-h .qui{color:var(--tk-lire,#1e40af)}
.tk-msg-h .min{background:var(--tk-prevoir-f,#fde1c4);color:var(--tk-argent,#7a4b06)}
.tk-msg{border-bottom-color:#e7eef8}

/* Les raccourcis de duree au repos : une teinte plutot que du blanc. */
.tw-chip{background:#f7f9fb}
.tw-chip:hover{background:#edf2f6}

/* LES CASES QUI CHANGENT LA FACTURE S'ALLUMENT. Une case cochee se lit mal de
   loin ; ces deux-la decident d'un deplacement et d'un acces distant. */
.tw-case:has(input:checked){background:var(--tk-faire-f,#c9e9e4);border-color:var(--tk-faire-b,#0BAE9F);color:var(--tk-faire,#055a52)}
.tk-col-suite .tw-case:has(input:checked){background:var(--tk-prevoir-f,#fde1c4);border-color:var(--tk-prevoir-b,#ea7f1b);color:var(--tk-prevoir,#9a3f06)}

/* ---- TICKETS : LES SIX VUES ---- */
/* 08/09/2026 (demande de Miguel). Ce ne sont plus des boutons mais des LIENS :
   chaque vue est une adresse, donc elle se partage et se met en favori.
   La couleur au repos est translucide sur la barre sombre ; la vue ACTIVE
   passe en couleur pleine — le seul contraste fort de la rangee, donc on voit
   ou l'on est sans lire. Meme grammaire qu'au telephone. */
.pill.vue{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 12px;
  border-radius:999px;text-decoration:none;white-space:nowrap;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);
  color:#dfe6ef;font:700 11.5px var(--font,system-ui,sans-serif)}
.pill.vue b{font:700 11px var(--mono,ui-monospace,monospace);opacity:.82}
.pill.vue:hover{background:rgba(255,255,255,.15);color:#fff}
.pill.vue.p-err {background:rgba(231,76,60,.20); border-color:rgba(231,76,60,.55); color:#ffb3aa}
.pill.vue.p-warn{background:rgba(242,179,61,.20);border-color:rgba(242,179,61,.55);color:#ffd79a}
.pill.vue.p-ok  {background:rgba(11,174,159,.20);border-color:rgba(11,174,159,.55);color:#7fe3d8}
.pill.vue.p-new {background:rgba(94,141,245,.22);border-color:rgba(94,141,245,.58);color:#b7cdfb}
.pill.vue.p-grey{background:rgba(200,208,218,.14);border-color:rgba(200,208,218,.38);color:#ccd5e0}
.pill.vue.on{background:#fff;border-color:#fff;color:#19222e}
.pill.vue.on b{opacity:.7}
.pill.vue.p-err.on {background:#E74C3C;border-color:#E74C3C;color:#fff}
.pill.vue.p-warn.on{background:#F2B33D;border-color:#F2B33D;color:#3a2a05}
.pill.vue.p-ok.on  {background:#0BAE9F;border-color:#0BAE9F;color:#04322e}
.pill.vue.p-new.on {background:#5e8df5;border-color:#5e8df5;color:#0b1f45}
.pill.vue.p-grey.on{background:#e8e8ee;border-color:#e8e8ee;color:#1a1a28}

/* La recherche part au serveur : elle a donc la forme d'un formulaire, avec la
   touche Entree pour l'envoyer. Sur 2 310 clos, cacher ce qui est deja affiche
   ne sert a rien. */
.tk-cherche{display:inline-flex;align-items:center;gap:6px}
.tk-cherche input{height:27px;width:220px;padding:0 11px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  color:#fff;font:500 11.5px var(--font,system-ui,sans-serif);outline:none}
.tk-cherche input::placeholder{color:#aeb9c7}
.tk-cherche input:focus{border-color:var(--accent-bright);background:rgba(255,255,255,.16)}
.tk-cherche-x{text-decoration:none;color:#ccd5e0;font:700 13px var(--font,system-ui,sans-serif);padding:0 4px}
.tk-cherche-x:hover{color:#fff}

/* Une liste bornee ne doit jamais passer pour un inventaire complet. */
.tk-borne{grid-column:1/-1;margin:0 0 12px;padding:9px 14px;border-radius:var(--r);
  background:#fff7ed;border-left:4px solid #f59f4d;
  font:600 12.5px/1.5 var(--font,system-ui,sans-serif);color:#7c2d12}

/* Les vues datees : les tuiles a plat, sans carte client — le groupe casserait
   l'ordre des dates, qui est ce qu'on vient voir. */
/* 08/09 (Miguel : « pourquoi PLANIFIES ne sont pas en grille de tuiles ? ») —
   une tuile .dev n'a pas de largeur a elle : dans une carte client, c'est la
   grille du corps qui la lui donne. Posee dans une simple rangee souple, elle
   se retractait sur son contenu — une file, pas une grille.
   Deux differences voulues avec la carte : `auto-fill` (la vue a plat occupe
   toute la page, le nombre de colonnes doit suivre l'ecran) et 150 px minimum
   au lieu de 88 (ces tuiles portent EN PLUS le nom du client, puisqu'il n'y a
   plus de carte autour pour le dire). */
.tk-plat{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  grid-auto-rows:76px;gap:7px;align-content:start;padding:8px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%),
             linear-gradient(155deg,#3c4047,#2a2d34);
  border:1.5px solid rgba(255,255,255,.10);box-shadow:var(--sh-tile)}

/* ---- RESOLUTION ---- */
/* 08/09/2026 — la fenetre qui clot un ticket. <dialog> natif : le navigateur
   gere l'ouverture, la fermeture, le piege clavier et la touche Echap.
   Le cumul est MONTRE, jamais ressaisi : c'est le fait sur lequel on decide. */
/* 08/09 — `margin:auto` explicite : un <dialog> ouvert par showModal() se
   centre de lui-meme, sauf si une regle du site pose une marge sur les
   elements de bloc. On retablit le comportement natif plutot que de
   recalculer une position. */
.rs{width:min(520px,92vw);margin:auto;padding:0;border:0;border-radius:14px;background:#fff;
  color:#12262b;box-shadow:0 24px 60px rgba(10,20,30,.35)}
.rs::backdrop{background:rgba(10,18,26,.55)}
.rs form{padding:18px 20px 16px}
.rs h3{margin:0 0 12px;font:800 16px var(--font,system-ui,sans-serif);color:#12262b}
.rs label{display:block;margin:14px 0 3px;font:800 10.5px var(--font,system-ui,sans-serif);
  letter-spacing:.09em;text-transform:uppercase;color:#4a6068}
.rs label i{font-style:normal;color:#b45309;letter-spacing:.02em}
.rs-aide{margin:0 0 6px;font:500 11.5px/1.5 var(--font,system-ui,sans-serif);color:#4a6068}
.rs textarea,.rs select,.rs input[type=text]{width:100%;box-sizing:border-box;
  border:1.5px solid #cfd8e2;border-radius:10px;background:#fff;color:#12262b;
  padding:9px 11px;font:500 13.5px/1.5 var(--font,system-ui,sans-serif)}
.rs textarea{resize:vertical;min-height:76px}
.rs textarea:focus,.rs select:focus,.rs input:focus{outline:none;border-color:#0BAE9F;
  box-shadow:0 0 0 3px rgba(11,174,159,.16)}

/* Le cumul : un fait, pas un champ. */
.rs-cumul{display:flex;flex-wrap:wrap;gap:12px;padding:10px 12px;border-radius:10px;
  background:#eef3fd;border-left:4px solid #c7d9f8;
  font:600 12px var(--font,system-ui,sans-serif);color:#1d4ed8}
.rs-cumul b{font:800 15px var(--font,system-ui,sans-serif);color:#12262b}
.rs-avert{margin:8px 0 0;padding:8px 11px;border-radius:10px;background:#fff7ed;
  border-left:4px solid #f59f4d;font:600 11.5px/1.5 var(--font,system-ui,sans-serif);color:#7c2d12}

.rs-fac-l{display:flex;gap:6px;align-items:stretch;max-width:300px}
.rs-fac-l input{text-align:center;font:800 15px var(--mono,ui-monospace,monospace)}
.rs-pas,.rs-tout{flex:0 0 auto;padding:0 11px;border:1.5px solid #cfd8e2;border-radius:10px;
  background:#f4f6f9;color:#12262b;cursor:pointer;font:800 12px var(--font,system-ui,sans-serif)}
.rs-pas:hover,.rs-tout:hover{background:#e6eaf0}
.rs-fb{margin:5px 0 0;min-height:1px;font:600 11.5px/1.5 var(--font,system-ui,sans-serif);color:#4a6068}
.rs-fb.alerte{color:#9a3412}
.rs-fb:empty{margin:0}
.rs-motif{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fff7ed;
  border-left:4px solid #f59f4d}
.rs-motif[hidden]{display:none}
.rs-motif select{margin-bottom:6px}

/* Les choix : des cartes, pas des points. On clique sur la phrase entiere. */
.rs-choix{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rs-c{display:flex;align-items:flex-start;gap:8px;margin:0;padding:9px 11px;cursor:pointer;
  border:1.5px solid #cfd8e2;border-radius:10px;background:#fff;text-transform:none;letter-spacing:0}
.rs-c input{margin:2px 0 0;accent-color:#06747D}
.rs-c span{display:block;min-width:0}
.rs-c b{display:block;font:800 12.5px var(--font,system-ui,sans-serif);color:#12262b}
.rs-c i{display:block;margin-top:1px;font:500 11px/1.4 var(--font,system-ui,sans-serif);
  font-style:normal;color:#4a6068}
.rs-c:has(input:checked){border-color:#9fd0cb;background:#e6f4f3}

.rs-pied{display:flex;gap:9px;justify-content:flex-end;margin-top:16px;
  padding-top:13px;border-top:1.5px solid #e6e9f0}
.rs-annuler,.rs-ok{padding:10px 16px;border-radius:10px;cursor:pointer;
  font:800 13px var(--font,system-ui,sans-serif)}
.rs-annuler{border:1.5px solid #cfd8e2;background:#fff;color:#4a6068}
.rs-ok{border:0;background:#065f66;color:#fff}
.rs-ok:hover{background:#044a52}
@media (max-width:600px){
  .rs-choix{grid-template-columns:1fr}
  .rs-annuler,.rs-ok{flex:1;min-height:46px}
  .rs textarea,.rs select,.rs input[type=text]{font-size:16px}
}
.tw-btn-fin{margin-top:7px;background:#fff;color:#8a5209;border-color:#ecd0a0}
.tw-btn-fin:hover{background:#fdf3e3}

/* 08/09/2026 (Miguel) — LES TICKETS CLOS. Gris quand c'est fini, GRIS-VERT
   quand la facture existe. Le vert franc est reserve a ce qui est vivant et a
   l'heure ; sur un ecran ou tout est termine, il ne distinguait plus rien.
   Le gris-vert est MARQUE, pas discret (correction du 08/09 : « le vert peut
   etre un peu plus prononce »). J'avais raisonne a l'envers — une teinte rare
   doit etre PLUS visible, pas moins : c'est parce qu'elle est rare qu'elle
   doit s'attraper d'un coup d'oeil sur une grille de soixante tuiles. */
.sup-page .dev.gris{background:#dfe4ea;border-color:#a7b2c0}
.sup-page .dev.gris-vert{background:#bfe0cd;border-color:#62a382}
.sup-page .dev.gris .dstat,.sup-page .dev.gris-vert .dstat{color:#2f3a47}
.sup-page .dev.gris .dname,.sup-page .dev.gris-vert .dname{color:#1a2430}
.sup-page .dev.gris .dsub,.sup-page .dev.gris .dage,
.sup-page .dev.gris-vert .dsub,.sup-page .dev.gris-vert .dage{color:#4c5663}
.sup-page .dev.gris .dico{color:#5a6472}
.sup-page .dev.gris-vert .dico{color:#2f6b49}

/* 08/09/2026 — LES LIGNES DE FACTURATION. 51 des 77 tickets ouverts sont des
   « [FACTURE] … » ou des resumes trimestriels : ils restent visibles sur la
   carte de leur client, mais ils n'attendent pas un technicien. Ni vert (pas
   de rendez-vous a tenir), ni bleu (personne ne va les prendre en main) : le
   sable dit l'argent en attente, sans crier. */
.sup-page .dev.sable{background:#f6e9d2;border-color:#d8b673}
.sup-page .dev.sable .dstat{color:#4a3410}
.sup-page .dev.sable .dname{color:#2a1d08}
.sup-page .dev.sable .dsub,.sup-page .dev.sable .dage{color:#5c4620}
.sup-page .dev.sable .dico{color:#7a5518}

/* 08/09/2026 (Miguel) — LES CARTES DE LA PAGE TICKETS TIENNENT SUR DEUX RANGEES.
   « Contrairement aux supervisions qui ont souvent beaucoup de postes pour un
   meme client, les tickets sont souvent moins nombreux par client. » Mesure du
   jour : 20 cartes pour 26 tickets sur la vue TOUS — chaque carte reservait la
   place de huit tuiles pour en porter une ou deux.
   45 (en-tete) + 2x76 (rangees) + 5 (ecart) + 12 (marge) = 214 px.
   La regle ne vaut QUE sous `.tk-liste` : `.ctile` est partagee avec la
   Supervision, et lui imposer deux rangees la rendrait illisible. */
/* 08/09, plus tard — MESURE PRISE SUR LA PAGE : carte de 214 px portant une
   vignette de 90 px, soit 124 px de vide, les trois cinquièmes. Je réservais deux
   rangées à TOUTES les cartes pour que celles qui en ont deux ne soient pas
   serrées : c'est faire payer à toutes ce dont une seule a besoin.
   Hauteur automatique, plancher à une rangée. La grille aligne déjà les cartes
   d'une même ligne sur la plus haute — les lignes restent régulières, mais une
   ligne de cartes à une rangée fait 138 px au lieu de 214. */
/* 09/09 (Miguel : « scroll dans les cartes ») — UNE CARTE NE DEVORE PLUS L ECRAN.
   Vu sur la page : dans « A facturer », TEST-Miguel porte 24 vignettes de cumul ;
   sa carte fait a elle seule la hauteur de trois autres et pousse les clients
   suivants hors de l ecran. La regle d hier — la carte prend la hauteur de son
   contenu — etait juste pour une ou deux vignettes ; a vingt-quatre elle produit
   l inverse de ce qu elle cherchait.
   Une carte grandit donc JUSQU A QUATRE RANGEES. Au-dela, c est la zone des
   vignettes qui defile — quatre rangees, parce que c est ce qu on embrasse d un
   regard : au-dela on ne compare plus, on parcourt, et parcourir se fait aussi
   bien dans un cadre qui defile que sur une carte de deux metres.
   4 x 76 px de rangee + 3 x 5 px d ecart + 12 px de marge = 331. */
.sup-page.tk-liste .ctile{height:auto;min-height:138px;max-height:376px}
/* 21/09 (contrôle visuel) : la vignette de ticket est plus large et dit son sujet en entier (deux lignes) */
.sup-page.tk-liste .cbody{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:auto}
.sup-page.tk-liste .dev{height:auto;min-height:76px;padding:8px 8px 7px}
.sup-page.tk-liste .dev .dname{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;font-size:12px;line-height:1.2}
/* 09/09 — LES INTERVENTIONS : LA CARTE PREND LA HAUTEUR DE SON CONTENU.
   Mesure page ouverte : 244 px de carte pour 82 px de contenu, soit 115 px de
   vide sous les vignettes, sur 19 cartes. La hauteur fixe a un sens sur la
   Supervision — toutes les cartes y disent la meme chose et s'y comparent d'un
   coup d'oeil. Ici non : un client d'une seule intervention n'a pas a occuper
   la place d'un client qui en a dix.
   La carte pousse jusqu'a quatre rangees de vignettes, puis son corps defile :
   une carte qui grandit sans fin repousse les clients suivants hors de l'ecran. */
.sup-page.iv-liste .ctile{height:auto;min-height:138px;max-height:376px}
.sup-page.iv-liste .cbody{max-height:331px;overflow-y:auto;overscroll-behavior:contain}
/* Les cartes d'une meme rangee ne s'etirent plus sur la plus haute : chacune
   s'arrete ou son contenu s'arrete. */
.sup-page.iv-liste .grid{align-items:start}
/* 21/09 (contrôle visuel) : la vignette d'intervention est plus large et dit son sujet en entier (deux lignes) ;
   la ligne du client ne se coupe plus. */
.sup-page.iv-liste .cbody{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:auto}
.sup-page.iv-liste .dev{height:auto;min-height:76px;padding:8px 8px 7px}
.sup-page.iv-liste .dev .dname{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;font-size:12px;line-height:1.2}
.sup-page.iv-liste .cmeta{white-space:normal;overflow:visible;text-overflow:clip;max-width:none;line-height:1.3}

/* 09/09 (Miguël : « lister les interventions dedans ») — LE DÉTAIL D'UN TICKET
   DE CUMUL. Il n'apparaît que sur un cumul ; ailleurs le bloc n'existe pas.
   Même grammaire que la page Interventions et que les courriels : entête
   turquoise sur fond pâle, une ligne sur deux grisée, et le mode en pastille
   colorée. Un écran qui invente sa propre grammaire oblige à la réapprendre. */
.tk-cumul{flex:0 0 auto;margin:0 0 9px;overflow:hidden}
.tk-cumul-t{display:flex;align-items:center;gap:9px;padding:9px 13px;
  background:#f2faf9;border-bottom:1px solid #cfe6e2;
  font:800 11.5px var(--font,system-ui,sans-serif);letter-spacing:.05em;
  text-transform:uppercase;}
.tk-cumul-d{margin-left:auto;font:600 11px var(--font,system-ui,sans-serif);
  text-transform:none;letter-spacing:0;color:#4a6068}
/* Au-delà d'une dizaine de lignes le tableau défile dans son cadre : une carte
   qui grandit sans fin repousse le reste de l'écran hors de vue. */
.tk-cumul-s{max-height:268px;overflow-y:auto;overscroll-behavior:contain}
.tk-cumul-tab{width:100%;border-collapse:collapse;
  font:500 12.5px var(--font,system-ui,sans-serif);color:#12262b}
.tk-cumul-tab th{position:sticky;top:0;z-index:1;text-align:left;padding:7px 11px;
  background:#f2faf9;border-bottom:2px solid #0a6f67;
  font:800 9.5px var(--font,system-ui,sans-serif);letter-spacing:.06em;
  text-transform:uppercase;color:#0a6f67}
.tk-cumul-tab td{padding:7px 11px;border-bottom:1px solid #e6ecef}
.tk-cumul-tab tbody tr:nth-child(even) td{background:#f8fafb}
.tk-cumul-tab td.d{white-space:nowrap}
.tk-cumul-tab td.d .h{color:#4a6068;font-size:11px}
.tk-cumul-tab th.n,.tk-cumul-tab td.n{text-align:right;white-space:nowrap;
  font-family:var(--mono,ui-monospace,monospace)}
.tk-cumul-tab td.n.ec{color:#9a3412;font-weight:800}
.tk-cumul-tab tfoot td{padding:10px 11px;
  border-top:2px solid #0a6f67;border-bottom:none;font-weight:800;color:#0a6f67}
.tk-cumul-tab tfoot td.tot{font-size:13.5px}
/* Les pastilles de mode : exactement les couleurs de la page Interventions et
   des courriels — chacune mesurée au-dessus de 4,5:1 sur son fond. */
.tkc{display:inline-block;margin-left:5px;padding:0 6px;border-radius:99px;
  border:1px solid;font:800 9.5px var(--font,system-ui,sans-serif);white-space:nowrap}
.tkc-deplacement{background:#fff2e3;border-color:#e9bf94;color:#9a3412}
.tkc-distance   {background:#eaf1fe;border-color:#adc4ef;color:#1e4fa8}
.tkc-telephone  {background:#eaf7ef;border-color:#a2d3b8;color:#14663f}
.tkc-b          {background:#ede9fe;border-color:#c3b3ec;color:#5b21b6}
.tkc-u          {background:#fee2e2;border-color:#eeaaaa;color:#991b1b}

/* 09/09 (Miguël) — LA VIGNETTE D'UN CUMUL SE RECONNAIT AVANT D'ETRE LUE.
   « On va mettre les vignettes de cumuls d'une autre couleur et/ou badge icône
   différente. » La couleur de fond garde l'ETAT (vert en cours, orange proche de
   la clôture, rouge en retard) : c'est l'information la plus utile, et un cumul
   en retard de cinq mois ne se lit pas comme un cumul qui court encore.
   La NATURE se dit par une barre turquoise à gauche — la couleur de la maison
   pour tout ce qui est cumul, déjà celle du badge CT et des courriels. */
/* 09/09, second essai (Miguël : « c'est toujours vert pour moi dans la fenêtre ») —
   LE FOND DIT LA NATURE, LA BARRE DIT L'ETAT.
   Ma première réponse ajoutait une barre et une icône turquoise mais laissait le
   FOND dans les couleurs des tickets : quinze cumuls verts au milieu de tickets
   roses et bleus. Le vert restait le vert, et il dit « à l'heure », pas « cumul ».
   Une barre de 4 px ne change pas ce qu'une vignette PARAÎT : c'est le fond qu'on
   lit en premier.
   Désormais : fond turquoise pâle pour TOUT cumul — aucune vignette de ticket ne
   l'est — et la barre porte l'état. Trois signaux, rien de perdu. */
.sup-page .dev.cum-bar,
.sup-page .dev.cum-bar.ok,
.sup-page .dev.cum-bar.warn,
.sup-page .dev.cum-bar.err{
  background:#e4f3f0;border-color:#a8d8d1;color:#12262b;
  border-left:4px solid #0a6f67;padding-left:9px}
/* La barre, elle, change avec l'échéance du trimestre. */
.sup-page .dev.cum-bar.warn{border-left-color:#b45309}
.sup-page .dev.cum-bar.err {border-left-color:#b91c1c}
/* Et la ligne d'état garde sa couleur d'alerte : un cumul en retard de cinq mois
   doit se voir au premier coup d'œil. */
.sup-page .dev.cum-bar .dstat{color:#0a6f67}
.sup-page .dev.cum-bar.warn .dstat{color:#8a4308}
.sup-page .dev.cum-bar.err  .dstat{color:#991b1b}
/* L'icône des couches empilées prend elle aussi le turquoise : sur une carte où
   les deux espèces se côtoient, deux signaux valent mieux qu'un. */
.sup-page .dev.cum-bar .dico{color:#0a6f67}
/* 16/09 (Miguël) — LE JEU DE CARTES DU CUMUL. « Comme un jeu de cartes vu du
   dessus qu'on aurait fait glisser » : la vignette est la carte du dessus ; les
   cartes de dessous dépassent à DROITE, en escalier, une par intervention au-delà
   de la première — douze pixels chacune (Miguël, 16/09 : sept, puis dix, puis
   « encore un tout petit peu plus »), six au plus, jamais au-delà de la marge.
   Horizontal seulement : rien ne descend dans la rangée du dessous. Elles sont
   derrière la vignette (z-index négatif dans son contexte), même teinte, de
   plus en plus pâle vers l'arrière. La vignette cesse de couper ce qui dépasse
   pour cette seule classe : ses textes ont déjà leurs points de suspension. */
.sup-page .dev.cum-bar.pile{overflow:visible;z-index:0}
/* 18/09 (Miguël) — toutes les cartes ont la hauteur de la carte du dessus, bordures comprises. */
.sup-page .dev.cum-bar .dcarte{position:absolute;inset:-1.5px -1.5px -1.5px -4px;border-radius:10px;
  border:1.5px solid #a8d8d1;background:#d6ece8;box-shadow:1px 0 3px rgba(10,111,103,.12);pointer-events:none;
  /* 28/09 — LE FILET. Une carte de dessous sans regle a elle n'avait aucun rang, donc se
     peignait PAR-DESSUS le texte de la vignette et le recouvrait. Le rang par defaut la
     range derriere, quoi qu'il arrive. */
  transform:translateX(12px);z-index:-7}
.sup-page .dev.cum-bar .dcarte.c1{transform:translateX(12px);z-index:-1}
.sup-page .dev.cum-bar .dcarte.c2{transform:translateX(24px);z-index:-2}
.sup-page .dev.cum-bar .dcarte.c3{transform:translateX(36px);z-index:-3}
.sup-page .dev.cum-bar .dcarte.c4{transform:translateX(48px);z-index:-4}
.sup-page .dev.cum-bar .dcarte.c5{transform:translateX(60px);z-index:-5}
.sup-page .dev.cum-bar .dcarte.c6{transform:translateX(72px);z-index:-6}

/* La barre turquoise reste sur la vignette seule : les cartes de dessous n'ont pas de tranche. */
.sup-page .dev.cum-bar .dct{background:#0a6f67;border-color:#075f58;color:#fff}
/* 09/09 (Miguel) — LE DELAI D UN TICKET JAMAIS PRIS EN MAIN. Il ne parle pas
   d un rendez-vous manque mais d un courrier jamais ouvert : le pointille le dit
   sans crier, et l infobulle l ecrit en toutes lettres. */
.cdelai.arrivee{border-style:dashed}
/* 09/09 (Miguel) — LE TEMPS SE SAISIT EN DEUX CASES : HEURES, MINUTES.
   « Numerique obligatoire » : type=number, et les fleches du navigateur sont
   retirees — elles font trois pixels de large et personne ne les vise. On tape.
   Les deux cases restent COLLEES a leur unite : « 3 h » se lit comme un tout,
   « 3 » puis « h » a huit pixels de la se lit comme deux choses. */
.tw-hm{display:inline-flex;align-items:center;gap:3px}
.tw-nb{width:52px;padding:6px 6px;text-align:center;border:1px solid var(--border-light,#cfdbe1);
  border-radius:8px;background:#fff;color:#12262b;
  font:800 14px var(--mono,ui-monospace,SFMono-Regular,monospace)}
.tw-nb::-webkit-outer-spin-button,.tw-nb::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tw-nb[type=number]{-moz-appearance:textfield;appearance:textfield}
.tw-nb::placeholder{color:#8fa0a8;font-weight:600}
.tw-nb:focus{outline:2px solid var(--accent-bright,#0a6f67);outline-offset:1px;border-color:#0a6f67}
.tw-u{font:700 12px var(--font,system-ui,sans-serif);color:#4a6068;margin-right:5px}
/* Les deux cases a cocher viennent a la suite, sur la meme rangee : c'est la
   demande du 09/09, et elle vaut pour les DEUX colonnes. */
.tw-dur-l .tw-cases{display:inline-flex;align-items:center;gap:11px;margin-left:12px;flex-wrap:wrap}
.tw-dur-l{flex-wrap:wrap;row-gap:7px}
/* 09/09 — LE PLAFOND DE 210 px NE VAUT PAS POUR UNE RANGEE QUI PORTE LES CASES.
   `.tw-pied .tw-dur-l{max-width:210px}` a ete ecrit quand la rangee tenait un
   champ texte et deux boutons. Avec deux cases numeriques, leurs unites, les deux
   boutons de pas ET les deux cases a cocher, il faut le double : tout se mettait
   en pile et la largeur non utilisee devenait un grand vide.
   On ne supprime pas la regle — elle sert encore aux rangees sans cases. On la
   leve pour celles qui en portent, et elles seules. */
.tw-pied .tw-dur-l.avec-cases{max-width:none}
/* Les cases a cocher passent a la ligne ENSEMBLE, pas une par une : elles forment
   un bloc, et un bloc ne se coupe pas au milieu. */
/* 09/09 (Miguel) — « placer deplacement et acces distant a DROITE des timers, on
   gagne une hauteur et on reequilibre avec col 1 ».
   Le groupe des compteurs est insecable : boutons, cases numeriques et unites
   forment un objet. Les cases a cocher prennent ce qui reste, a droite ; si la
   colonne est etroite, ce sont ELLES qui se replient l une sous l autre.
   On coupe toujours au meme endroit, et c est celui qui coute le moins. */
.tw-tm{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap}
.tw-dur-l.avec-cases{flex-wrap:wrap;align-items:center}
.tw-dur-l.avec-cases .tw-cases{flex:1 1 auto;margin:0 0 0 12px;min-width:0;
  justify-content:flex-start}
/* Les pastilles ayant disparu, la rangee porte tout : on resserre les cases a
   cocher pour qu elles tiennent a cote des compteurs le plus longtemps possible. */
.tw-pied .tw-dur-l.avec-cases .tw-case{padding:4px 8px;font-size:11px;gap:5px}

/* 09/09 (Miguël) — LE NUMERO DE FACTURE MEG. « On saisit le num de facture dans
   le ticket concerné et on le clos. » Une seule ligne : c'est un geste unique,
   pas un formulaire de trois étages. Il se pose sous le bandeau du ticket, là où
   l'œil arrive en revenant de MEG avec un numéro à la main. */
.tk-meg{flex:0 0 auto;margin:0 0 7px;padding:8px 13px;border-radius:var(--r);
  border:1px solid #e2c78c;border-left:4px solid #d9a441;background:#fffaf0}
/* Une fois la facture posée, le bandeau passe au vert : l'affaire est close. */
.tk-meg.faite{border-color:#a2d3b8;border-left-color:#14663f;background:#f4fbf7}
/* 15/09 — clos sans facture : gris-bleu, ni l'or de l'attente ni le vert du payé. */
.tk-meg.nonfact{border-color:#c5cfdb;border-left-color:#5a6377;background:#f5f7fa}
.tk-meg.nonfact .tk-meg-l{color:#4b5768}
.tk-meg-nf{color:#3d4756;font-family:var(--font,system-ui,sans-serif);font-weight:700}
.tk-meg-nff{margin-top:6px;padding-top:6px;border-top:1px dashed #d9c9a0}
.tk-meg.nonfact .tk-meg-nff{border-top-color:#c5cfdb}
.tk-meg-s{font-family:var(--font,system-ui,sans-serif);font-weight:600;max-width:210px}
.tk-meg-bnf{background:#5a6377}
.tk-meg-f{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0}
.tk-meg-l{font:800 10.5px var(--font,system-ui,sans-serif);letter-spacing:.06em;
  text-transform:uppercase;color:#8a5a10;white-space:nowrap}
.tk-meg.faite .tk-meg-l{color:#14663f}
.tk-meg-n{font:800 14px var(--mono,ui-monospace,monospace);color:#14663f}
.tk-meg-d{font:600 11.5px var(--font,system-ui,sans-serif);color:#4a6068}
.tk-meg-i{flex:1 1 190px;min-width:150px;max-width:280px;padding:6px 10px;
  border:1px solid #cfdbe1;border-radius:8px;background:#fff;color:#12262b;
  font:700 13px var(--mono,ui-monospace,monospace)}
.tk-meg-i::placeholder{color:#7c8b93;font-weight:500;
  font-family:var(--font,system-ui,sans-serif);font-size:12.5px}
.tk-meg-i:focus{outline:2px solid var(--accent-bright,#0a6f67);outline-offset:1px;border-color:#0a6f67}
.tk-meg-b{padding:7px 15px;border:1px solid #0a6f67;border-radius:8px;
  background:#0a6f67;color:#fff;cursor:pointer;
  font:800 12.5px var(--font,system-ui,sans-serif);white-space:nowrap}
.tk-meg-b:hover{background:#08564f;border-color:#08564f}
.tk-meg-a{font:500 11.5px var(--font,system-ui,sans-serif);color:#4a6068}
.tk-meg.faite .tk-meg-a{display:none}

.sup-page.tk-liste .cbody{max-height:331px;overflow-y:auto;overscroll-behavior:contain}

/* 08/09/2026 (Miguel) — LE DELAI DANS LA BARRE DE TITRE D'UNE CARTE.
   « + 2 jours » en rouge pour du retard, « − 5 jours » en vert pour un
   rendez-vous a venir. La couleur de la carte dit qu'il y a du retard ; ce
   chiffre dit combien, et permet de choisir par quoi commencer. */
/* 08/09 — collée au bord droit : `margin-left:auto` pousse l'étiquette au bout
   de l'en-tête, quel que soit le nom du client. */
.sup-page .cdelai{flex:0 0 62px;box-sizing:border-box;text-align:center;
  padding:2px 4px;border-radius:5px;font:800 10.5px/1.5 var(--font,system-ui,sans-serif);
  letter-spacing:.02em;white-space:nowrap}
/* La reserve garde la colonne quand la carte n'a aucun rendez-vous. */
.sup-page .cdelai.vide{visibility:hidden}
.sup-page .cdelai.tard{background:#fde2e2;color:#8f1d1d}
.sup-page .cdelai.venir{background:#d8f0e0;color:#1d5c33}

/* 08/09/2026 (Miguel : « pas beau ») — L'ARCHIVAGE DES CLIENTS.
   Le bandeau reprend la forme de `.tk-borne`, son voisin : meme largeur pleine,
   meme retrait, meme trait a gauche. Deux bandeaux qui ne se ressemblent pas
   donnent l'impression que l'un des deux est un accident.
   Il occupait une CASE de la grille faute de `grid-column` — d'ou les cartes
   poussees a droite. */
.sup-page .tk-archives{grid-column:1/-1;margin:0 0 12px;padding:9px 14px;
  border-radius:var(--r);background:#eef2f7;border-left:4px solid #94a3b8;
  font:600 12.5px/1.5 var(--font,system-ui,sans-serif);color:#334155}
.sup-page .tk-archives a{color:#1d4ed8;font-weight:800;text-decoration:none;margin-left:4px}
.sup-page .tk-archives a:hover{text-decoration:underline}

/* Le bouton d'archivage : discret. Un geste rare ne reclame pas une couleur
   permanente — il doit se trouver quand on le cherche, pas s'imposer quand on ne
   le cherche pas. C'est aussi ce qui evite de cliquer dessus par megarde. */
.sup-page .carch{margin:0 0 0 6px;flex:0 0 auto;line-height:0}
.sup-page .carch-b{width:24px;height:24px;padding:0;border-radius:6px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--tx-on-bar,#cbd5e1);
  font-size:12px;line-height:1;opacity:.55;transition:opacity .15s,background .15s,border-color .15s}
.sup-page .ctile:hover .carch-b{opacity:1}
.sup-page .carch-b:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.sup-page .carch-b:focus-visible{outline:2px solid #60a5fa;outline-offset:1px;opacity:1}

/* ═══ 08/09/2026 (Miguël) — LES FILTRES DANS LE BANDEAU PRINCIPAL ═══════════
   « Le bandeau où il y a les filtres ne touche pas les bords gauche et droite de
   la page et il est décalé vers le bas du bandeau des menus. Il faut plutôt
   l'inclure dans le bandeau principal, ce sera plus beau » — « incluant les
   bulles ».

   La barre passe alors d'une grille à trois colonnes (onglets / titre doré /
   actions) à une seule rangée. Elle garde le fond du bandeau : elle en touche
   donc les deux bords, et elle suit la page au défilement puisque .shell est
   déjà collant. Seules les barres qu'une page a meublées sont concernées.

   ── UNE RANGÉE QUI GLISSE, JAMAIS QUI RETOMBE ──
   Premier essai : flex-wrap:wrap. À 1401 px tout tenait, à 900 px la recherche
   partait seule sur une deuxième ligne et le bandeau doublait de hauteur. Une
   seule largeur mesurée, un seul cas vérifié. Ces écrans s'ouvrent en vue
   compacte sur un grand écran : ils doivent tenir de 380 à 1400 px.
   Les bulles défilent donc horizontalement, sans ascenseur visible — même
   grammaire que la rangée des menus juste au-dessus. */
/* Chaque bloc dit sa COLONNE **et** sa RANGÉE. Sans la rangée, la grille en
   invente une : dans le HTML le titre vient avant les filtres, il prenait donc la
   colonne 2 de la rangée 1, et les filtres — qui demandent la colonne 1 — ne
   pouvaient plus remonter. Le placement automatique avance, il ne revient jamais
   en arrière. Résultat vu à l'écran : le titre seul sur une ligne, les filtres sur
   une seconde.
   Trois colonnes, comme la barre d'origine : filtres | titre | recherche. Le titre
   est au centre de la BARRE, pas au centre de ce qu'il reste — c'est la colonne du
   milieu qui le tient là. Les filtres gardent une colonne souple : s'ils manquent
   de place ils glissent, ils ne poussent pas le titre. */
/* 21/09 : la colonne des filtres prend au moins la place de ses filtres (« Archivés » passait sous le titre) */
.niv2.has-ctx{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(0,1fr);
  align-items:center;gap:10px;height:auto;min-height:var(--niv2-h);
  padding:0 16px 0 172px}
.niv2.has-ctx .niv2-center{grid-column:2;grid-row:1;justify-self:center;display:flex;
  align-items:center;justify-content:center;overflow:visible;text-align:center}
.niv2.has-ctx .niv2-ctx{grid-column:1;grid-row:1;justify-self:start;max-width:100%;
  display:flex;align-items:center;flex-wrap:nowrap;gap:8px;
  min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none}
.niv2.has-ctx .niv2-ctx::-webkit-scrollbar{display:none}
.niv2.has-ctx .niv2-ctx > *{flex:0 0 auto}
.niv2.has-ctx .niv2-right{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;
  gap:6px;overflow:visible}
/* ── LE RYTHME DES MENUS, PAS UNE AUTRE GRAMMAIRE ──
   « Peut-on ajouter la barre des filtres à cette barre des menus ? Collée comme
   si elle en faisait partie ? » Elles sont déjà collées — même <header>, fonds
   transparents sur le même dégradé, aucune bordure entre les deux. Ce qui les
   faisait lire comme deux barres, c'était la taille : un bouton de menu fait
   34 px, coins à 10 px, texte 13 px ; une bulle faisait 27 px, ovale, 11,5 px.
   Deux grammaires l'une sous l'autre se lisent comme deux objets.
   Même taille, mêmes coins, même graisse : une seule barre à deux rangées. La
   couleur ne bouge pas — c'est elle qui dit ce que fait chaque bulle. */
/* 08/09, encore plus tard (Miguël) : « les pills de filtres sont beaucoup trop
   grosses ». J'avais posé 34 px et des coins carrés-arrondis pour répondre à
   « collée comme si elle en faisait partie » — même rythme que les menus. La
   réponse est non : à taille égale, la seconde rangée pèse autant que la
   première alors qu'elle lui est subordonnée. Un filtre n'est pas un menu.
   Retour à la taille d'origine : la rangée reprend 36 px au lieu de 44, et le
   bandeau entier redescend de 94 à 86 px. */
/* 08/09, dernière passe (Miguël : « il faudrait diminuer la taille des pills de
   filtres ») — 23 px au lieu de 27, texte 10,5 px au lieu de 11,5. La rangée
   revient ainsi à 36 px pile, sa hauteur d'origine, et le bandeau entier à 86 px.
   Le titre doré ne bouge pas : c'est lui qui domine la rangée, les filtres la
   servent. Lisibilité conservée : ces textes contrastent à plus de 5,5:1 sur leurs
   fonds opaques, et 10,5 px en graisse 700 reste au-dessus du seuil où un chiffre
   devient pénible à lire. */
.niv2.has-ctx .pill.vue{height:23px;padding:0 9px;border-radius:999px;gap:5px;
  font:700 10.5px var(--font,system-ui,-apple-system,sans-serif)}
.niv2.has-ctx .pill.vue b{font:700 10px var(--mono,ui-monospace,SFMono-Regular,monospace)}
.niv2.has-ctx .tk-cherche input{height:23px;border-radius:999px;font-size:11px}
/* ── LES BOUTONS SONT OPAQUES, LE FOND DU BANDEAU NE LES TRAVERSE PLUS ──
   « Les bulles passent dans les boutons de filtres. » Elles ne passaient pas
   devant : elles se voyaient à travers. Chaque bouton posait 8 à 22 % de couleur
   sur le bandeau, et le dessin de fond restait visible dessous — un rond pâle au
   milieu d'un bouton.
   Sur un fond uni, une teinte à 20 % est un effet. Sur un fond dessiné, c'est une
   fenêtre. Chaque couleur ci-dessous est la teinte EXACTE que donnait la
   transparence une fois posée sur le gris du bandeau à cet endroit (#33373e) :
   rien ne change à l'œil, sauf que le fond ne traverse plus. */
.niv2.has-ctx .pill.vue          {background:#43474d;border-color:#5c5f65}
.niv2.has-ctx .pill.vue:hover    {background:#4f545b}
.niv2.has-ctx .pill.vue.p-err    {background:#573b3e;border-color:#96423d}
.niv2.has-ctx .pill.vue.p-warn   {background:#59503e;border-color:#9c7b3d}
.niv2.has-ctx .pill.vue.p-ok     {background:#2b4f51;border-color:#1d7873}
.niv2.has-ctx .pill.vue.p-new    {background:#3c4a66;border-color:#4c69a8}
.niv2.has-ctx .pill.vue.p-grey   {background:#484c54;border-color:#6c7179}
/* Les boutons ACTIFS ont leur couleur pleine, et il faut la leur RENDRE ici :
   `.niv2.has-ctx .pill.vue` pèse autant que `.pill.vue.on` — trois classes
   chacune — et à poids égal la dernière écrite gagne. La mienne étant en fin de
   fichier, elle repeignait l'état actif en gris : on ne voyait plus où l'on
   était. Quatre classes, donc, et placées APRÈS le survol qui pèse pareil.
   Vu sur la page, pas dans le code — une règle posée n'est pas une règle
   atteinte. */
.niv2.has-ctx .pill.vue.on       {background:#fff;border-color:#fff;color:#19222e}
/* Rouge assombri d'un cran : sur #E74C3C, le blanc ne fait que 3,82:1 — sous le
   seuil de lisibilité. Sur #C0392B il fait 5,44:1. Même rouge à l'œil, lisible
   pour de bon. (La règle générale plus haut dans ce fichier porte encore le
   défaut : elle ne sert que cette barre, mais elle reste à corriger.) */
.niv2.has-ctx .pill.vue.p-err.on {background:#C0392B;border-color:#C0392B;color:#fff}
.niv2.has-ctx .pill.vue.p-warn.on{background:#F2B33D;border-color:#F2B33D;color:#3a2a05}
.niv2.has-ctx .pill.vue.p-ok.on  {background:#0BAE9F;border-color:#0BAE9F;color:#04322e}
.niv2.has-ctx .pill.vue.p-new.on {background:#5e8df5;border-color:#5e8df5;color:#0b1f45}
.niv2.has-ctx .pill.vue.p-grey.on{background:#e8e8ee;border-color:#e8e8ee;color:#1a1a28}
.niv2.has-ctx .pill.vue.on:hover {filter:brightness(1.06)}
.niv2.has-ctx .tk-cherche input{background:#3a3e45;border-color:#5c5f65;color:#e2e8f0}
.niv2.has-ctx .tk-cherche input:focus{background:#434850}
/* 3e passe (Miguël : « c'était mieux au début. plus grand, centré avec effet
   lumineux ») — J'AI FAIT FAUSSE ROUTE DEUX FOIS. Il avait dit que le titre était
   MAL PLACÉ — posé seul à gauche d'une rangée. J'ai compris « trop voyant » et je
   l'ai d'abord supprimé, puis rapetissé en étiquette grise. La réponse n'était pas
   de le réduire, mais de le RECENTRER.
   Aucune surcharge ici : le titre reprend son style d'origine — doré 26 px avec le
   reflet qui balaye — et c'est la grille plus haut qui le remet au milieu. */
/* Couleur pleine, pas un blanc translucide : sur ce fond, un texte posé à 45 %
   d'opacité tombe sous le seuil de lisibilité. */
.niv2.has-ctx .maj{font:500 10px var(--mono,ui-monospace,SFMono-Regular,monospace);
  color:#b9c2ce;white-space:nowrap}
/* Le logo mord moins sur la barre quand la fenêtre rétrécit — même bascule que
   celle déjà prévue pour le premier niveau. La recherche se resserre plutôt que
   de tomber à la ligne. */
@media (max-width:1100px){
  .niv2.has-ctx{padding-left:104px}
  .niv2.has-ctx .tk-cherche input{width:150px}
}
/* Sur un écran étroit, l'heure de mise à jour s'efface : c'est le seul élément
   de la rangée dont l'absence ne coûte rien. */
@media (max-width:820px){
  .niv2.has-ctx{padding-left:16px;gap:8px}
  .niv2.has-ctx .maj{display:none}
  .niv2.has-ctx .tk-cherche input{width:120px}
}
/* 09/09 (Miguël) — « placer déplacement et accès distant à droite des timers »
   puis « idem col 1 ».
   CE QUI LES RETENAIT EN BAS, et ce n'était pas une règle d'aujourd'hui :
       .tk-col-travail .tw-pied > .tw-dur{flex:0 0 250px}
       .tk-col-suite   .tw-pied > .tw-dur > .tw-dur-l{flex:0 0 250px}
   Le bloc de durée était figé à 250 px, donc les cases n'ont jamais eu la place
   de se mettre à côté — et la moitié droite du pied restait vide.
   LA RAISON DE CE PLAFOND A DISPARU CE MATIN. Son propre commentaire le dit :
   « 300 + 460 px de raccourcis font 760 pour une rangée qui n'en offre que 735 ».
   Les 460 px, c'étaient les pastilles. Elles n'existent plus.
   On ne supprime pas les règles — elles servent aux blocs sans cases. On les lève
   pour ceux qui en portent, dans la MÊME requête d'écran : une règle posée
   dehors ne serait jamais atteinte. */
@media (min-width:1201px){
  .tk-col-travail .tw-pied > .tw-dur.a-cases{flex:1 1 100%}
  .tk-col-suite   .tw-pied > .tw-dur.a-cases > .tw-dur-l{flex:1 1 auto}
  /* Les compteurs gardent leur largeur juste ; les cases prennent le reste. */
  .tk-col-travail .tw-pied > .tw-dur.a-cases > .tw-dur-l,
  .tk-col-suite   .tw-pied > .tw-dur.a-cases > .tw-dur-l{flex-wrap:nowrap;max-width:none}
  .tw-dur.a-cases .tw-cases{flex:1 1 auto;flex-wrap:wrap}
}

/* 09/09 (Miguël) — « on peut rendre ces deux zones les plus jumelles possible ? »
   Oui, et il y avait une règle qui ne s'appliquait JAMAIS.

   La colonne 1 est une colonne verticale : son bloc d'écriture prend la hauteur
   restante, sa zone de texte la remplit. La colonne 2, elle, était une RANGÉE qui
   enveloppe — une rangée ne donne aucune hauteur à ses éléments — et sa règle de
   croissance visait `.tw-bloc:first-child`. Or le premier enfant de cette colonne
   est le pli « Déjà prévu », pas le bloc d'écriture : la règle ne désignait rien.
   D'où une zone de 56 px et tout l'espace perdu en dessous.

   La colonne 2 reçoit donc le traitement exact de la colonne 1. On vise
   `.tw-bloc` sans `:first-child` : il n'y en a qu'un ici, et lui existe.
   On neutralise aussi les hauteurs en dur (42, 50, 54 px selon la largeur) : une
   hauteur fixe et un `flex:1 1 auto` se contredisent, la première gagne et le
   second ne sert à rien. */
@media (min-width:1201px){
  .tk-col-suite .dedans{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0}
  .tk-col-suite .dedans > *{flex:0 0 auto;min-width:0}
  .tk-col-suite .dedans > .tw-bloc{flex:1 1 auto;display:flex;flex-direction:column;
    min-height:0;margin-bottom:0}
  .tk-col-suite .dedans > .tw-bloc > textarea{flex:1 1 auto;height:auto;
    min-height:110px;resize:none}
  /* Le pli garde sa hauteur propre : il ne grandit pas, il ne rétrécit pas. */
  .tk-col-suite .dedans > details{flex:0 0 auto}
}

/* ===========================================================================
   NOUVEAU — la pilule d'action, et l'écran « chez qui, quoi »
   10/09/2026 (Miguël) : « Ajouter un bouton NOUVEAU en début de bandeau
   (tous, ouverts, résolus, etc...) et choix de nouveau ticket ou inter ».

   POURQUOI CETTE PILULE N'EST PAS HABILLÉE COMME LES SIX AUTRES
   Les filtres répondent à « qu'est-ce que je veux VOIR ». Celui-ci répond à
   « qu'est-ce que je veux FAIRE ». Un habit de filtre lui ferait promettre de
   cacher des lignes ; il ouvre un écran. Il est donc plein, turquoise, et il
   est le seul de la barre à l'être — c'est ce qui le désigne du premier coup
   d'œil sans avoir à le lire.

   LE CONTENANT EST UNE RANGÉE SOUPLE, PAS UNE GRILLE
   `.niv2-ctx` aligne ses enfants en `flex:0 0 auto` et défile si besoin. Une
   septième pilule y tient. (`.sup-pills`, elle, est figée à six colonnes : si
   un jour la barre passait par là, cette pilule écraserait les autres. C'est
   vérifié aujourd'hui, ce n'est pas garanti pour toujours.)
   =========================================================================== */

.sup-page .pill.neuf,
.pill.neuf{
  display:inline-flex; align-items:center; gap:6px;
  height:27px; padding:0 13px 0 10px; border-radius:var(--r-pill,99px);
  background:var(--accent-bright,#0BAE9F); border:1px solid #0BAE9F;
  color:#04231f; font:800 11.5px var(--font,system-ui,-apple-system,sans-serif);
  letter-spacing:.02em; text-decoration:none; white-space:nowrap;
  box-shadow:0 2px 8px rgba(11,174,159,.34);
}
/* Le « + » est un signe, pas un chiffre : il ne prend ni la fonte à chasse
   fixe ni l'opacité réduite du compteur des filtres, qui le feraient passer
   pour une valeur. */
.sup-page .pill.neuf b,
.pill.neuf b{font:800 15px var(--font,system-ui,-apple-system,sans-serif);line-height:1;opacity:1}
.sup-page .pill.neuf:hover,
.pill.neuf:hover{background:#0dc7b5; border-color:#0dc7b5; color:#04231f; filter:none}
.sup-page .pill.neuf:focus-visible,
.pill.neuf:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* ── L'ÉCRAN ────────────────────────────────────────────────────────────────
   Trois temps, de haut en bas : chez qui · ce qu'il a déjà · ce qu'on ouvre.
   La colonne de lecture est bornée : au-delà, l'œil perd la ligne suivante.
   ------------------------------------------------------------------------- */
.nv{max-width:1120px; margin:0 auto; padding:18px 16px 40px; display:flex; flex-direction:column; gap:16px}

.nv-bloc{
  padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px;
}
/* Un liseré de couleur par nature de bloc : chez qui (turquoise), ce qui
   existe déjà (gris), le ticket (bleu), l'intervention (or). La couleur porte
   l'information ; elle n'est pas là pour égayer. */
.nv-bloc.b-qui   {border-top:3px solid var(--accent,#06747D)}
.nv-bloc.b-deja  {border-top:3px solid #b9c4d2}
.nv-bloc.b-ticket{border-top:3px solid var(--blue,#5e8df5)}
.nv-bloc.b-inter {border-top:3px solid var(--or-3,#c9a247)}

.nv-lbl{
  font:800 11px var(--font,system-ui,-apple-system,sans-serif);
  letter-spacing:.10em; text-transform:uppercase; color:var(--accent,#06747D);
}

.nv-sous{
  display:block; margin-top:4px;
  font:700 12px var(--font,system-ui,-apple-system,sans-serif);
}
.nv-fac{font-weight:600; color:#6b7688; text-transform:none; letter-spacing:0}

/* L'aide se lit ou s'ignore : elle explique le POURQUOI, jamais le comment.
   #5a6377 sur blanc = 6,3:1 — au-dessus du seuil, y compris à 12 px. */
.nv-aide{margin:0; font:400 12px/1.5 var(--font,system-ui,-apple-system,sans-serif); color:var(--tx-dark-2,#5a6377); max-width:62ch}
/* 22/09 (Miguël : gagner la hauteur en tête de page) — dans la tête d'un bloc, l'aide tient sur une ligne et se déplie
   au survol ou au clavier ; rien n'est retiré, tout se lit encore. */
.nv .tf-tete .nv-aide{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;max-width:none;cursor:help}
.nv .tf-tete:hover .nv-aide,.nv .tf-tete:focus-within .nv-aide{-webkit-line-clamp:unset;overflow:visible}
.nv-aide.vide{color:#4b5768}
.nv-aide b{color:var(--tx-dark,#1a1f2e); font-weight:700}

/* ── Les champs ─────────────────────────────────────────────────────────── */
.nv-champ{
  width:100%; min-height:38px; padding:8px 11px;
  background:#fff; border:1px solid #cbd5e1; border-radius:var(--r-sm,6px);
  font:500 13.5px var(--font,system-ui,-apple-system,sans-serif); color:var(--tx-dark,#1a1f2e);
  outline:none;
}
.nv-champ::placeholder{color:#7a8598}
.nv-champ:focus{border-color:var(--accent-bright,#0BAE9F); box-shadow:0 0 0 3px rgba(11,174,159,.18)}
.nv-zone{min-height:104px; line-height:1.55; resize:vertical; font-family:var(--font,system-ui,-apple-system,sans-serif)}

.nv-duo{display:flex; gap:10px; align-items:stretch}
.nv-duo .nv-champ{flex:1 1 auto}
.nv-btn-ghost{
  flex:0 0 auto; padding:0 18px;
  font:700 13px var(--font,system-ui,-apple-system,sans-serif); cursor:pointer;
}
.nv-btn-ghost:hover{ border-color:#08858f}

/* Deux colonnes tant qu'elles tiennent, une seule ensuite. La bascule est
   posée sur le contenu (2 × 300 px + l'écart), pas sur une taille d'appareil :
   c'est le texte qui décide quand il est à l'étroit, pas le téléphone. */
.nv-g2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; align-items:start}
.nv-g2 > div{display:flex; flex-direction:column; gap:6px}

/* ── Les deux portes, côte à côte ───────────────────────────────────────── */
.nv-portes{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:900px){ .nv-portes{grid-template-columns:1fr} }

.nv-valider{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:6px; min-height:44px; padding:0 20px; border-radius:9px;
  background:var(--accent,#06747D); border:1px solid var(--accent,#06747D); color:#fff;
  font:800 14px var(--font,system-ui,-apple-system,sans-serif); letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
}
.nv-valider:hover{background:#08858f; border-color:#08858f; color:#fff}
/* La porte de l'intervention porte l'or de la maison : deux gestes différents
   ne doivent pas avoir le même bouton, sinon on clique au hasard. */
.nv-valider.nv-or{background:var(--or-1,#f5d370); border-color:var(--or-edge,#b88e35); color:#3a2a05}
.nv-valider.nv-or:hover{background:var(--or-2,#e8c76a); color:#3a2a05}

/* ── Ce qu'il a déjà : les vignettes ────────────────────────────────────── */
.nv-lot{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; align-items:stretch}
/* 74 px : c'est la hauteur mesurée pour un sujet de deux lignes sans rognage,
   pas un chiffre rond choisi à l'œil. Les hauteurs de ligne sont écrites en
   clair — la valeur héritée (1,55) donnait 63 px pour 50 disponibles, et la
   troisième ligne disparaissait sans rien signaler. */
.nv-v{
  min-height:74px; padding:8px 10px; border-radius:9px; text-decoration:none;
  display:flex; flex-direction:column; justify-content:space-between; gap:3px;
  background:#eef2f7; border:1px solid #c9d4e2; color:var(--tx-dark,#1a1f2e);
  overflow:hidden;
}
.nv-v:hover{background:#e3ebf5; border-color:#9db3cc}
.nv-v .q{font:700 10px/1.2 var(--mono,ui-monospace,monospace); color:#4b5768; letter-spacing:.04em; text-transform:uppercase}
.nv-v .n{
  font:700 12.5px/1.28 var(--font,system-ui,-apple-system,sans-serif); color:var(--tx-dark,#1a1f2e);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:break-word; hyphens:none;
}
.nv-v .m{font:600 10px/1.2 var(--mono,ui-monospace,monospace); color:#5a6377}
/* Le relevé du trimestre n'est pas un ticket comme les autres : il porte l'or.
   Le retard porte le rouge. Un ticket ordinaire ne porte rien — l'absence de
   couleur est elle-même une information. */
.nv-v.cumul {background:#fbf3dc; border-color:#d8bb6a}
.nv-v.cumul .q, .nv-v.cumul .m{color:#6b5312}
.nv-v.retard{background:#fdecea; border-color:#e9a49c}
.nv-v.retard .q, .nv-v.retard .m{color:#8c2f24}

/* ── Le relevé du trimestre, annoncé avant de cliquer ───────────────────── */
.nv-cumul{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; border-radius:9px;
  background:#f1f4f8; border:1px solid #cfd9e6;
}
.nv-cumul.la{background:#fbf3dc; border-color:#d8bb6a}
.nv-cumul-i{flex:0 0 auto; font-size:15px; line-height:1.2; color:#6b5312}
.nv-cumul div{display:flex; flex-direction:column; gap:2px}
.nv-cumul b{font:700 12.5px/1.35 var(--font,system-ui,-apple-system,sans-serif); color:var(--tx-dark,#1a1f2e)}
.nv-cumul span{font:400 12px/1.45 var(--font,system-ui,-apple-system,sans-serif); color:var(--tx-dark-2,#5a6377)}

/* ── Le refus ───────────────────────────────────────────────────────────── */
.nv-flash{
  display:flex; gap:11px; align-items:flex-start;
  padding:12px 14px; border-radius:var(--r,10px);
  background:#fdecea; border:1px solid #e9a49c;
}
.nv-flash-i{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#c0392b; color:#fff; font:800 14px var(--font,system-ui,-apple-system,sans-serif);
}
.nv-flash div{display:flex; flex-direction:column; gap:2px}
.nv-flash b{font:800 13px var(--font,system-ui,-apple-system,sans-serif); color:#7d2018}
.nv-flash span{font:400 12.5px/1.5 var(--font,system-ui,-apple-system,sans-serif); color:#8c2f24}

/* ===========================================================================
   NOUVEAU — la recherche par les premières lettres
   10/09/2026 (Miguël) : « je préférerais une recherche client en tapant les
   premières lettres ».
   =========================================================================== */

/* Le client trouvé : on le nomme en grand, et on laisse une porte de sortie.
   Redemander de taper alors que la réponse est connue ferait douter d'avoir
   bien choisi. */
.nv-choisi{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.nv-choisi-n{
  font:800 19px/1.25 var(--font,system-ui,-apple-system,sans-serif);
  color:var(--tx-dark,#1a1f2e); overflow-wrap:break-word;
}
/* « Changer de client » n'est pas le geste principal de l'écran : il en a
   l'utilité, pas le poids. Il garde donc la forme d'un bouton et perd sa
   couleur pleine. #46586d sur #eef2f7 = 6,1:1. */
.nv-btn-ghost.nv-clair{
  background:#eef2f7; border-color:#c9d4e2; color:#46586d;
  font-weight:700; height:34px; display:inline-flex; align-items:center;
}
.nv-btn-ghost.nv-clair:hover{background:#e3ebf5; border-color:#9db3cc; color:#33465c}

/* Le champ de recherche : la loupe native de `type=search` sur les navigateurs
   qui la dessinent, et rien de plus. */
.nv-duo input[type=search]{min-width:0}

/* Plusieurs clients répondent : on les montre tous plutôt que d'en choisir un
   à sa place. Ils tiennent sur une ligne chacun, nom au-dessus, ville en
   dessous — c'est la ville qui départage « Mairie de » de « Mairie de ». */
.nv-cands{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px}
.nv-cand{
  display:flex; flex-direction:column; gap:2px;
  min-height:46px; padding:7px 11px; border-radius:8px; text-decoration:none;
  background:#eef2f7; border:1px solid #c9d4e2;
  overflow-wrap:break-word; hyphens:none;
}
.nv-cand:hover{background:#e3ebf5; border-color:var(--accent-bright,#0BAE9F)}
.nv-cand .n{font:700 13px/1.3 var(--font,system-ui,-apple-system,sans-serif); color:var(--tx-dark,#1a1f2e)}
.nv-cand .v{font:600 10.5px/1.2 var(--mono,ui-monospace,monospace); color:#4b5768; letter-spacing:.04em; text-transform:uppercase}

/* ===========================================================================
   LA JAUGE D'ÉTAPES DU TICKET
   10/09/2026 (Miguël, après comparaison de six dessins) : « K3 est bien oui ».

   Quatre segments collés au bas de la vignette : planifié · en cours ·
   à facturer · facturé. Ils se remplissent à mesure.

   POURQUOI QUATRE. Avec trois segments s'arrêtant à « résolu », la jauge était
   pleine sur 88,7 % des 106 tickets affichés — quatre pixels pour ne rien
   distinguer. Un ticket n'est pas fini quand le travail est fait : il l'est
   quand il est payé.

   OÙ ELLE SE POSE. La vignette a 8 px de marge en bas ; la jauge en occupe 3,5
   et reste rentrée de 4 px sur les côtés. Elle ne touche donc aucun texte, et
   n'a pas besoin que la vignette découpe ses coins arrondis.

   ELLE NE PORTE PAS DE COULEUR D'ÉTAT. L'urgence est déjà dite par la couleur
   de la vignette entière ; la jauge dit autre chose — le chemin parcouru. Deux
   informations différentes ne partagent pas un signe, sinon aucune des deux ne
   se lit.
   =========================================================================== */

.sup-page .dev .djauge{
  position:absolute; left:4px; right:4px; bottom:3px; height:3.5px;
  display:flex; gap:1.5px; pointer-events:none;
}
.sup-page .dev .djauge i{
  flex:1; border-radius:2px;
}

/* Sur les vignettes sombres, le même contraste se prend à l'envers : un creux
   noir y serait invisible, et un plein noir aussi. */
.sup-page .dev.err .djauge i.on,
.sup-page .dev.hors .djauge i.on,
.sup-page .dev.info.nuit .djauge i.on{ }

/* En vue compacte, la vignette tombe à 50 px et son sous-titre disparaît :
   la jauge n'a plus de marge où se loger. Elle se retire plutôt que de se
   poser sur le texte. */
.sup-page .grid.compact .dev .djauge{ display:none; }

/* ---------------------------------------------------------------------------
   LA JAUGE — CORRECTION DU CREUX, 10/09/2026, MEME JOUR.
   Vue a l'ecran a fort grossissement : sur un ticket qui n'a franchi aucune
   etape, les quatre creux a 16 % de noir ne se distinguaient pas du fond de la
   vignette. On ne pouvait donc pas separer « jauge vide » de « pas de jauge » —
   or c'est justement le ticket a zero etape qu'il faut voir, puisque c'est
   celui dont personne ne s'est encore occupe.
   Le creux passe a 30 %, le plein a 70 %. L'ecart entre les deux reste large
   (plus du double), et le creux devient une trace franche.
   --------------------------------------------------------------------------- */
.sup-page .dev .djauge i{ background:rgba(15,23,42,.30); }
.sup-page .dev .djauge i.on{ background:rgba(15,23,42,.70); }
.sup-page .dev.err .djauge i,
.sup-page .dev.hors .djauge i,
.sup-page .dev.info.nuit .djauge i{ background:rgba(255,255,255,.34); }
.sup-page .dev.err .djauge i.on,
.sup-page .dev.hors .djauge i.on,
.sup-page .dev.info.nuit .djauge i.on{ background:rgba(255,255,255,.90); }

/* ---------------------------------------------------------------------------
   LE BADGE « EN ATTENTE DE FACTURE » — 10/09/2026 (Miguël)
   « Les badges montrés par les flèches, je verrais bien les jours depuis mis
   en facturation. »

   Il ne porte plus le rouge du retard : un ticket qui attend sa facture n'est
   pas en souffrance chez le client, il est en souffrance chez nous. C'est de
   l'argent qui dort, pas une promesse rompue — deux choses différentes ne
   partagent pas une couleur, sinon aucune des deux ne se lit.

   L'or de la maison, donc, celui du relevé de trimestre et de la facturation.
   #6b5312 sur #f8ecd2 tient 8,4 pour 1 : largement au-dessus du seuil, y
   compris à 11 px.

   Il vient APRÈS `.tard` dans le fichier et porte la même spécificité : c'est
   l'ordre qui décide, et l'ordre est ici volontaire.
   --------------------------------------------------------------------------- */
.sup-page .cdelai.facture{background:#f8ecd2;color:#6b5312;border-color:#dcc079}

/* ---------------------------------------------------------------------------
   LA RECHERCHE AU FIL DE LA FRAPPE — 10/09/2026 (Miguël)
   « au fur et à mesure que j'ajoute des lettres, le filtre des noms de clients
   se rétrécit ».

   `hidden` DOIT L'EMPORTER SUR LA GRILLE. Un attribut `hidden` vaut
   `display:none` — mais seulement tant que rien ne redéclare l'affichage.
   `.nv-cands` pose `display:grid`, qui gagne par spécificité et rend visible ce
   que `hidden` cachait. La leçon a déjà été payée le 09/09, sur le champ des
   kilomètres qui refusait de disparaître.
   On corrige donc par la spécificité, jamais par `!important` : la règle
   ci-dessous porte deux sélecteurs de classe, elle gagne proprement.
   --------------------------------------------------------------------------- */
.nv .nv-cands[hidden],
.nv .nv-cand[hidden],
.nv .nv-aide[hidden]{display:none}

/* Le compteur se lit sous le champ : combien de clients répondent, et quoi
   faire s'il y en a trop. */
.nv-compte{margin-top:2px;font-weight:600;color:#46586d}

/* ---------------------------------------------------------------------------
   « FACTURER PLUS TARD » — 10/09/2026 (Miguël)
   « Le badge à facturer, sauf si planifié à plus tard. » — « mais c'est
   tellement exceptionnel..... »

   Le dépliant est REPLIÉ par défaut et ne coûte qu'une ligne à ceux qui n'en
   ont pas besoin. Sa ligne de titre se lit comme une question, pas comme un
   champ : on ne l'ouvre que si la réponse est oui.
   --------------------------------------------------------------------------- */
.rs-tard{margin-top:10px;border:1px dashed #cfd9e6;border-radius:8px;padding:0 12px}
.rs-tard[open]{padding-bottom:12px;background:#f8fbff;border-style:solid}
.rs-tard summary{
  padding:10px 0;cursor:pointer;list-style:none;
  font:600 12.5px var(--font,system-ui,-apple-system,sans-serif);color:#46586d;
}
.rs-tard summary::-webkit-details-marker{display:none}
/* Le chevron dit qu'on peut ouvrir : sans lui, la ligne ressemble à du texte. */
.rs-tard summary::before{content:'▸ ';color:#7a8598}
.rs-tard[open] summary::before{content:'▾ '}
.rs-tard summary:hover{color:#1a1f2e}
.rs-tard .rs-sous{display:block;margin:2px 0 5px;
  font:700 12px var(--font,system-ui,-apple-system,sans-serif);color:#1a1f2e}
.rs-tard .rs-champ{width:auto;min-height:36px;padding:7px 10px;
  background:#fff;border:1px solid #cbd5e1;border-radius:6px;
  font:500 13px var(--font,system-ui,-apple-system,sans-serif);color:#1a1f2e}
.rs-tard .rs-aide{margin:8px 0 0;max-width:60ch;
  font:400 12px/1.5 var(--font,system-ui,-apple-system,sans-serif);color:#5a6377}

/* ---------------------------------------------------------------------------
   LE BADGE D'UN TICKET DONT LA FACTURATION EST REPORTÉE.

   Ni le rouge de l'attente, ni l'or de la facture qui traîne : le report est
   une décision, pas un incident. Il porte donc le vert de ce qui est en ordre,
   avec le signe « − » qui dit que la date est devant nous.
   #1d5c33 sur #d8f0e0 tient 7,1 pour 1.

   Il vient après `.facture` dans le fichier et porte la même spécificité :
   c'est l'ordre qui décide, et cet ordre est voulu.
   --------------------------------------------------------------------------- */
.sup-page .cdelai.reporte{background:#d8f0e0;color:#1d5c33;border-color:#a5d8b8}

/* ===========================================================================
   LA RECHERCHE PRÉDICTIVE, PARTOUT OÙ IL Y AVAIT UNE LISTE DÉROULANTE
   10/09/2026 (Miguël) : « les zones de recherches prédictives, pas en listes
   déroulantes ».

   Le `<select>` reste dans la page — il porte la valeur et part avec le
   formulaire — mais il cesse d'être visible. Ce style habille ce qui le
   couvre.

   ── LA LISTE CACHÉE NE DOIT PAS DISPARAÎTRE POUR LE NAVIGATEUR ─────────────
   `display:none` sur un champ obligatoire empêche le navigateur d'afficher son
   message quand il est vide : il refuse d'envoyer le formulaire, sans dire
   pourquoi et sans rien montrer. On la sort donc de la vue SANS la retirer de
   la page — hauteur nulle, transparente, non cliquable. Le message d'erreur
   s'affiche alors à l'endroit où elle se trouve, c'est-à-dire juste sous le
   champ de recherche.

   ── 16 PIXELS, C'EST UNE RÈGLE, PAS UN GOÛT ────────────────────────────────
   En dessous, un téléphone zoome tout seul au moment où l'on tape, et l'écran
   saute. Le champ de recherche garde donc la taille des autres champs.
   =========================================================================== */

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

/* 18/09 — la cachette impose sa largeur, quelle que soit la classe du champ (au téléphone, la liste
   des clients prenait 630 px de `.tp-moyen` et faisait déborder la page). */
.rc-cachee,select.rc-cachee{
  position:absolute;left:0;width:1px;min-width:0;max-width:1px;height:0;padding:0;margin:0;border:0;
  overflow:hidden;opacity:0;pointer-events:none;
}

.rc-champ{
  width:100%;padding:12px 13px;border-radius:12px;
  font-family:inherit;font-size:16px;
  border:1px solid rgba(20,30,45,.16);background:#fff;color:var(--ink,#1a1f2e);outline:none;
}
.rc-champ:focus{border-color:var(--accent,#06747D);box-shadow:0 0 0 3px rgba(11,174,159,.15)}
.rc-champ[hidden]{display:none}
/* 21/09 (contrôle visuel) : dans la barre des filtres, le champ « ville » ne coupe plus son invite */
.cl-sel .rc-champ{min-width:250px}

/* Ce qui a été choisi : en grand, avec sa porte de sortie. */
.rc-choisi{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 13px;border-radius:12px;
  background:#fff;border:1px solid rgba(20,30,45,.16);
}
.rc-choisi[hidden]{display:none}
.rc-nom{flex:1 1 auto;min-width:0;font:800 16px/1.3 inherit;color:var(--ink,#1a1f2e);overflow-wrap:break-word}
.rc-changer{
  flex:0 0 auto;padding:8px 14px;border-radius:9px;cursor:pointer;
  background:#eef2f7;border:1px solid #c9d4e2;color:#46586d;
  font:700 13px inherit;
}
.rc-changer:hover{background:#e3ebf5;border-color:#9db3cc;color:#33465c}

.rc-compte{margin:0;font:600 12.5px/1.45 inherit;color:#5a6377}
.rc-compte[hidden]{display:none}

/* Les résultats : une colonne de lignes larges. Sur un téléphone tenu d'une
   main, une ligne pleine largeur se vise mieux qu'une grille de vignettes —
   et 46 px de haut, c'est la taille d'un doigt. */
.rc-lot{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}
.rc-lot[hidden]{display:none}
.rc-item{
  display:block;width:100%;text-align:left;
  min-height:46px;padding:11px 13px;border-radius:10px;cursor:pointer;
  background:#fff;border:1px solid rgba(20,30,45,.14);color:var(--ink,#1a1f2e);
  font:600 14.5px/1.3 inherit;
  overflow-wrap:break-word;hyphens:none;
}
.rc-item[hidden]{display:none}
.rc-item:hover{background:#eef7f6;border-color:var(--accent-bright,#0BAE9F)}
.rc-item:focus-visible{outline:2px solid var(--accent,#06747D);outline-offset:2px}

/* ══ 11/09/2026 — LA SUPERVISION DES PROSPECTS ═════════════════════════════
   Miguël : « la même page mais pour des prospects, comptabilisés à part ».
   La page est la même ; ce qui change se voit à trois endroits, et à trois
   seulement : le segment Clients | Prospects, la carte (un liseré pointillé
   ambré : à l'essai, pas sous contrat), et ses deux sorties. */

/* Le segment de population est un jeu de LIENS (il change de page) : il prend
   la forme du bloc segmenté voisin, pour que l'œil lise « un choix, puis un
   autre », et il se distingue par sa teinte ambrée quand Prospects est actif. */
.sup-page .niv2 .sup-pills .segpop{ margin-right:6px; }
.sup-page .niv2 .sup-pills .segpop .pill.kind{ text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.sup-page .niv2 .sup-pills .segpop .pill.kind .n{
  font-size:10px; font-weight:800; padding:0 5px; border-radius:8px;
  background:rgba(255,255,255,.14);
}
.sup-page .niv2 .sup-pills .segpop .pill.kind.on:last-child{ background:#b45309; box-shadow:inset 0 0 0 1px #f59e0b; }
.sup-page .niv2 .sup-pills .segpop .pill.kind.on:last-child:hover{ background:#b45309; }

/* La carte d'un prospect : le même objet, avec un liseré pointillé ambré. La
   couleur du fond reste celle de l'état de son parc — c'est ce qu'on vient
   juger. Le pointillé dit « provisoire », l'ambre dit « pas sous contrat ». */
.sup-page .ctile.prospect{ border:1px dashed #d97706; }

/* Les deux sorties, et le geste à venir. Même forme que le bouton Rapport,
   deux couleurs qui disent le sens : émeraude pour entrer, gris pour sortir. */
.sup-page .pactions{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.sup-page .pactions .crapport{ margin:0; }
.sup-page .pactions .pform{ display:inline; margin:0; }
.sup-page .pactions .pok{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.45); color:#15803d; }
.sup-page .pactions .pko{ background:rgba(100,116,139,.12); border-color:rgba(100,116,139,.35); color:#475569; }
.sup-page .pactions .pconf{ display:inline-block; position:relative; }
.sup-page .pactions .pconf > summary{ list-style:none; display:inline-block; }
.sup-page .pactions .pconf > summary::-webkit-details-marker{ display:none; }
/* La confirmation se pose SOUS le bouton, hors du flux : elle ne déplace rien.
   Elle est dans la carte, qui est en overflow:hidden — d'où un z-index et une
   marge suffisante pour rester visible dans l'en-tête. */
.sup-page .pactions .pconf[open] > .pform{
  position:absolute; right:0; top:calc(100% + 4px); z-index:5;
  background:#fff; border:1px solid #cbd5e1; border-radius:8px; padding:6px;
  box-shadow:0 8px 20px rgba(20,30,50,.18); white-space:nowrap;
}
.sup-page .pactions .pconf[open] > .pform .crapport{ background:#b91c1c; border-color:#991b1b; color:#fff; }
.sup-page .cmeta .pechu{ color:#b45309; font-weight:800; }

/* ══ 11/09/2026 — RENDRE LES TICKETS SANS CLIENT À LEUR CLIENT ═════════════
   Un écran de DÉCISION : un tableau, une coche par ligne, un bouton. Page
   claire, tuiles et badges de la maison ; les couleurs disent le chemin du
   rapprochement (adresse = sûr, titre = sûr, corps = à vérifier). */
.rp{max-width:1280px;margin:0 auto;padding:18px 20px 60px;color:#1a1f2e}
.rp-fait{margin:0 0 14px;padding:11px 16px;border-radius:12px;background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.4);color:#15803d;font-weight:700}
.rp-tete{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.rp-h1{margin:0 0 4px;font-size:22px;font-weight:800;letter-spacing:-.3px;color:#044a52}
.rp-st{margin:0;color:#5a6377;max-width:64ch;line-height:1.5}
.rp-chiffres{display:flex;gap:10px;flex-wrap:wrap}
.rp-c{min-width:120px;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid #e6e9f0;
  box-shadow:0 6px 16px rgba(20,30,50,.06)}
.rp-c b{display:block;font-size:22px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.rp-c span{display:block;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#5a6377;margin-top:3px}
.rp-c-ok{border-top:4px solid #0BAE9F}
.rp-vide{padding:16px;border-radius:12px;background:#fff;border:1px solid #e6e9f0;color:#5a6377}
.rp-legende{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.rp-note{font-size:12.5px;color:#5a6377}
.rp-ch{display:inline-block;padding:2px 10px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap}
.rp-ch b{margin-left:4px}
.rp-ch.c-adresse{background:rgba(11,174,159,.14);color:#06747D;border:1px solid rgba(11,174,159,.35)}
.rp-ch.c-titre{background:rgba(34,197,94,.14);color:#15803d;border:1px solid rgba(34,197,94,.35)}
.rp-ch.c-corps{background:rgba(245,159,77,.16);color:#c2410c;border:1px solid rgba(245,159,77,.4)}
.rp-scroll{overflow-x:auto;background:#fff;border:1px solid #e6e9f0;border-radius:12px;
  box-shadow:0 8px 20px rgba(20,30,50,.06)}
.rp-table{width:100%;border-collapse:collapse;font-size:13.5px}
.rp-table th{position:sticky;top:0;background:#f6f3ec;text-align:left;font-size:11px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:#5a6377;padding:9px 10px;border-bottom:1px solid #e6e9f0;z-index:1}
.rp-table td{padding:8px 10px;border-bottom:1px solid #eef1f5;vertical-align:top}
.rp-table tr:last-child td{border-bottom:0}
.rp-table tr.rp-doute td{background:rgba(245,159,77,.05)}
.rp-table tr:hover td{background:rgba(11,174,159,.06)}
.rp-coche{width:38px;text-align:center}
.rp-coche input{width:18px;height:18px;accent-color:#06747D;cursor:pointer}
.rp-num a{font-weight:700;color:#06747D;text-decoration:none;white-space:nowrap}
.rp-num a:hover{text-decoration:underline}
.rp-titre{max-width:38ch;overflow-wrap:anywhere}
.rp-quand{white-space:nowrap;font-variant-numeric:tabular-nums;color:#5a6377}
.rp-client span{color:#5a6377}
.rp-preuve{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:#5a6377;max-width:28ch;overflow-wrap:anywhere}
.rp-pied{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:14px}
.rp-btn{background:#06747D;color:#fff;border:0;border-radius:10px;padding:11px 18px;font-size:14px;font-weight:800;cursor:pointer;
  box-shadow:0 6px 16px rgba(6,116,125,.28)}
.rp-btn:hover{background:#0BAE9F}
/* Le lien depuis la carte « Client inconnu » de la vue Clos porte la classe du
   bouton Rapport (règle globale) ; un lien ne se souligne pas dans un bouton. */
a.crapport{text-decoration:none}

/* ══ 11/09/2026 — LA FICHE CLIENT EN ÉCRITURE (Clients/editer) ═════════════
   Elle emprunte la grammaire du « Nouveau ticket » (.nv) : mêmes blocs, mêmes
   champs, mêmes liserés. Ce qui s'ajoute : l'erreur SOUS le champ, les cases
   à cocher expliquées, et la rangée d'actions. */
.nv-fiche .nv-large{grid-column:1 / -1}
.nv-err{margin:0; font:600 12px/1.4 var(--font,system-ui,sans-serif); color:#b91c1c}
.nv-champ-ko{border-color:#ef4444}
.nv-champ-ko:focus{border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.nv-bandeau-ko{padding:10px 14px; border-radius:10px; background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.4);
  color:#b91c1c; font-weight:700}
.nv-cases-f{display:flex; flex-direction:column; gap:8px; justify-content:center}
.nv-case-f{display:flex; align-items:flex-start; gap:9px; cursor:pointer; font:600 13px/1.35 var(--font,system-ui,sans-serif); color:var(--tx-dark,#1a1f2e)}
.nv-case-f input{width:18px; height:18px; margin-top:1px; accent-color:#06747D; flex:0 0 auto}
.nv-case-f i{display:block; font-style:normal; font-weight:400; font-size:12px; color:#5a6377}
.nv-actions{display:flex; align-items:center; gap:16px}
.nv-annuler{font:600 13px var(--font,system-ui,sans-serif); color:#5a6377; text-decoration:none}
.nv-annuler:hover{color:var(--tx-dark,#1a1f2e); text-decoration:underline}

/* ── Les lignes de contrat de la fiche (11/09) ──────────────────────────── */
.nv-lignes{width:100%; border-collapse:collapse; font-size:13.5px}
.nv-lignes th{text-align:left; font:700 11px var(--font,system-ui,sans-serif); letter-spacing:.5px; text-transform:uppercase; color:#5a6377; padding:6px 8px; border-bottom:1px solid #e6e9f0}
.nv-lignes td{padding:7px 8px; border-bottom:1px solid #eef1f5; vertical-align:middle}
.nv-lignes tr:last-child td{border-bottom:0}
.nv-lignes .n{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.nv-ligne-f{display:inline-flex; align-items:center; gap:6px; margin:0}
.nv-qte{width:84px; text-align:right; min-height:34px; padding:6px 8px}
.nv-btn-p{padding:0 12px; min-height:34px; font-size:12px}
.nv-retirer{background:transparent; border:1px solid #cbd5e1; color:#5a6377; border-radius:6px; padding:6px 10px; font:600 12px var(--font,system-ui,sans-serif); cursor:pointer}
.nv-retirer:hover{border-color:#ef4444; color:#b91c1c}
.nv-ligne-add{display:flex; flex-direction:column; gap:6px; margin-top:6px; padding-top:12px; border-top:1px dashed #e6e9f0}
.nv-ligne-add .nv-duo{flex-wrap:wrap}
.nv-ligne-add select.nv-champ{flex:1 1 320px}
.cf-hbtn-note{font-size:10px;font-weight:600;opacity:.8;margin-left:2px}

.nv-bandeau-info{padding:10px 14px; border-radius:10px; background:rgba(94,141,245,.10); border:1px solid rgba(94,141,245,.4); color:#1d4ed8; font-size:13px}
.nv-btn-ghost[disabled],.nv-retirer[disabled]{opacity:.45; cursor:not-allowed}

/* ── Page « en construction » (11/09 : sortie de la vue, le style en ligne est interdit) ── */
.uc-wrap{max-width:760px;margin:48px auto 0}
.uc-card{position:relative;overflow:hidden;border-radius:18px;background:#fff;border:1px solid var(--border-light);box-shadow:var(--sh-tile);text-align:center;padding:56px 40px 48px}
.uc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,var(--or-3),var(--or-1),var(--accent-bright),var(--accent))}
.uc-ic{width:84px;height:84px;margin:0 auto 22px;border-radius:24px;display:grid;place-items:center;font-size:40px;
  background:var(--tile-bg);border:var(--tile-border);box-shadow:0 14px 34px rgba(20,30,50,.25)}
.uc-t1{font:800 30px var(--font);letter-spacing:.2px;margin-bottom:6px;
  background:linear-gradient(90deg,var(--or-3),var(--or-1),#fff7e0,var(--or-1),var(--or-3));
  background-size:320% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldShine 8s linear infinite}
.uc-t2{font:700 17px var(--font);color:var(--tx-dark,#1a1f2e);margin-bottom:10px}
.uc-tx{font:500 14px var(--font);color:var(--tx-dark-2,#3d4352);line-height:1.6;max-width:480px;margin:0 auto 26px}
.uc-steps{display:flex;justify-content:center;gap:10px;margin-bottom:30px;flex-wrap:wrap}
.uc-step{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px;border-radius:var(--r-pill);
  font:700 12px var(--font);background:var(--page-2);border:1px solid var(--border-light);color:var(--tx-dark-2,#3d4352)}
.uc-step.done{background:#eafaf7;border-color:var(--accent-line);color:var(--accent-deep)}
.uc-step.now{background:linear-gradient(180deg,var(--or-1),var(--or-2) 50%,var(--or-3));border-color:var(--or-edge);color:#2a2110}
.uc-actions{display:flex;justify-content:center;gap:10px}
/* Le retour accueil est un lien (la maquette utilisait un <button>) */
.uc-actions .btn{display:inline-flex;align-items:center;text-decoration:none}

/* ═══════════════════════════════════════════════════════════════════════
   RÈGLE DE MAISON — Miguël, 11/09/2026, à graver ici même :
   « Des couleurs, des cadres. Toujours dans les tableaux, les sommes et les
   moyennes en entête. Si besoin. » puis « encore un peu plus colorisé ».
   Pour toute page de chiffres de la V2 :
     · chaque volet a SA couleur (liseré, en-tête de tableau, bande de titre) ;
     · chaque tableau est ENCADRÉ de cette couleur ;
     · la première ligne sous l'en-tête porte les SOMMES ou les MOYENNES,
       écrites PLUS GROS que les données (15 px contre 13,5) ;
     · les valeurs qui jugent (marge, écart) sont colorées : vert / rouge ;
     · TOUTE LA PAGE (Miguël, 12/09 : « il faut utiliser TOUTE la page, les
       marges sont énormes ») : une page de chiffres n'a pas de largeur
       maximale ; la gouttière est celle de la page, 8 px de plus, c'est tout ;
     · UNE TAILLE PAR NATURE DE CHIFFRE (Miguël, 12/09) : le prix d'achat
       est le plus petit, le prix de vente au milieu, la marge plus grosse,
       les sommes et moyennes au-dessus de tout. Les tailles sont des
       variables, ci-dessous : on les règle à un seul endroit.
   ═══════════════════════════════════════════════════════════════════════ */
.nv{--t-achat:11px; --t-vente:12.5px; --t-marge:14.5px; --t-somme:15px; --t-somme-marge:17px}
.nv-tarifs, .nv-charges, .nv-contrats, .nv-nas{max-width:none; padding:12px 8px 40px}

/* ── € › Tarifs (11/09, soir) : quatre volets, une feuille de calcul qui
   respire. La grammaire tf-* (cellules, barre, sommes, volets) s'accroche à
   .nv : elle sert à toutes les pages de chiffres (Charges…). Les champs se fondent dans le tableau et n'apparaissent qu'à la
   main ; une ligne modifiée prend une marque or ; la barre du bas ne s'ouvre
   que s'il y a quelque chose à enregistrer. Contrastes ≥ 4,5:1 sur blanc. ── */
.nv .tf-volet{gap:12px; padding-top:0; overflow:hidden}
/* La bande de titre de chaque volet, dans sa couleur. */
.nv .tf-tete{ border-bottom:1px solid transparent}
.nv-tarifs .b-qui    .tf-tete{background:linear-gradient(180deg,#e3f3f3,#f2fafa); border-bottom-color:#a9d6d6}
.nv-tarifs .b-ticket .tf-tete{background:linear-gradient(180deg,#e6edfd,#f3f6fe); border-bottom-color:#b9c9f5}
.nv-tarifs .b-inter  .tf-tete{background:linear-gradient(180deg,#fbf0d2,#fff9e9); border-bottom-color:#e9d18a}
.nv-tarifs .b-deja   .tf-tete{background:linear-gradient(180deg,#e9edf3,#f4f6f9); border-bottom-color:#c9d2de}
.nv-tarifs .b-qui    .nv-lbl{color:#06747D}
.nv-tarifs .b-ticket .nv-lbl{color:#3a63c0}
.nv-tarifs .b-inter  .nv-lbl{color:#8a6a15}
.nv-tarifs .b-deja   .nv-lbl{color:#4b5768}
.nv-tarifs .nv-bloc.b-qui   {border-color:#a9d6d6; border-top-width:4px}
.nv-tarifs .nv-bloc.b-ticket{border-color:#b9c9f5; border-top-width:4px}
.nv-tarifs .nv-bloc.b-inter {border-color:#e9d18a; border-top-width:4px}
.nv-tarifs .nv-bloc.b-deja  {border-color:#c9d2de; border-top-width:4px}
.nv .tf-tete{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}
.nv .tf-tete .nv-aide{margin-top:6px}
.nv .tf-filtre{position:relative; flex:0 0 280px}
.nv .tf-filtre .nv-champ{padding-left:32px; min-height:36px}
.nv .tf-loupe{position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:16px; color:#5a6377; pointer-events:none}

/* Des cadres et des couleurs (Miguël, 11/09) : chaque tableau est encadré
   de la couleur de son volet, son en-tête est teinté, et la ligne des
   moyennes se lit comme une bande. */
.nv .tf-volet .rp-scroll{border:1px solid #d6dde8; border-radius:10px; background:#fff; overflow:hidden; overflow-x:auto}
.nv-tarifs .b-qui    .rp-scroll{border-color:#a9d6d6}
.nv-tarifs .b-ticket .rp-scroll{border-color:#b9c9f5}
.nv-tarifs .b-deja   .rp-scroll{border-color:#c9d2de}
.nv .tf-table thead th{white-space:nowrap; padding:9px 10px;}
.nv-tarifs .b-qui    .tf-table thead th{background:#06747D; color:#fff; border-bottom-color:#06747D}
.nv-tarifs .b-ticket .tf-table thead th{background:#3a63c0; color:#fff; border-bottom-color:#3a63c0}
.nv-tarifs .b-deja   .tf-table thead th{background:#4b5768; color:#fff; border-bottom-color:#4b5768}
.nv .tf-table thead .tf-total th{
  text-transform:none; letter-spacing:0; font:800 var(--t-somme) var(--font,system-ui,sans-serif);
  padding-top:8px; padding-bottom:8px; font-variant-numeric:tabular-nums;
}
.nv-tarifs .b-qui    .tf-table thead .tf-total th{background:#e7f4f4; border-bottom-color:#a9d6d6}
.nv-tarifs .b-ticket .tf-table thead .tf-total th{background:#eaeffd; border-bottom-color:#b9c9f5}
.nv-tarifs .b-deja   .tf-table thead .tf-total th{background:#eef1f5; border-bottom-color:#c9d2de}
.nv .tf-table thead .tf-total .tf-total-l{color:#4b5768}
.nv-tarifs .b-qui    .tf-table tbody .tf-row:hover td{background:#f0f9f9}
.nv-tarifs .b-ticket .tf-table tbody .tf-row:hover td{background:#f1f4fe}
.nv-tarifs .b-deja   .tf-table tbody .tf-row:hover td{background:#f3f5f8}
.nv .tf-total-l{font-weight:700; font-size:14px; color:#5a6377}
.nv .tf-total-l b{color:var(--tx-dark,#1a1f2e)}
.nv .tf-table td{padding:4px 6px}
.nv .tf-table tbody .tf-row:nth-child(even) td{background:#fafbfd}
.nv .tf-table-inactifs{border-top:1px solid #e6e9f0}
.nv .tf-c-nom{min-width:300px}
/* Le code du produit, et son nom en toutes lettres entre parenthèses. */
.nv .tf-nom{display:flex; align-items:center; gap:8px}
.nv .tf-nom .tf-cell{flex:1 1 auto}
.nv .tf-nom-code .tf-cell{flex:0 0 118px}
.nv .tf-libelle{flex:1 1 auto; white-space:nowrap; font:600 12.5px var(--font,system-ui,sans-serif); color:#06747D}
.nv .tf-table-inactifs .tf-libelle{color:#5a6377}
.nv .tf-c-etat{width:36px; text-align:right}
.nv .tf-row.tf-cachee{display:none}

.nv .tf-cell{
  width:100%; min-height:34px; padding:6px 9px; background:transparent;
  font:500 13.5px var(--font,system-ui,-apple-system,sans-serif); color:var(--tx-dark,#1a1f2e);
  outline:none; transition:border-color .15s, background .15s, box-shadow .15s;
}
.nv .tf-cell::placeholder{color:#6b7688}
.nv .tf-row:hover .tf-cell, .nv .tf-carte:hover .tf-cell{border-color:#dbe2ec; background:#fff}
.nv .tf-cell:focus{ background:#fff;}
.nv .tf-cell[readonly]{cursor:default}
.nv .tf-row:hover .tf-cell[readonly]{border-color:transparent; background:transparent}
.nv .tf-cell[disabled]{color:var(--tx-dark,#1a1f2e); opacity:1; appearance:none; -webkit-appearance:none}
.nv .tf-num{width:112px; text-align:right; font-variant-numeric:tabular-nums}
.nv .tf-num[data-role="achat"]{font-size:var(--t-achat); color:#4b5768}
.nv .tf-num[data-role="vente"]{font-size:var(--t-vente); font-weight:600}
.nv .tf-ref{width:150px}
.nv .tf-com{min-width:200px}
.nv .tf-sel{min-width:260px; background:#fff}

/* La ligne modifiée : une marque or à gauche, des champs teintés. */
.nv .tf-row.tf-mod td:first-child{box-shadow:inset 3px 0 0 var(--or-3,#c9a247)}
.nv .tf-row.tf-mod .tf-cell, .nv .tf-carte.tf-mod .tf-cell{background:#fff8e6; border-color:#e9d18a}
.nv .tf-carte.tf-mod{border-color:var(--or-edge,#b88e35); background:#fffaf0}
/* La ligne refusée. */
.nv .tf-row.tf-ko .tf-cell, .nv .tf-carte.tf-ko .tf-cell, .nv .tf-cell-ko{border-color:#ef4444; background:#fff5f5}
.nv .tf-row .nv-err{margin:4px 0 0 9px}

/* La marge : une pastille — verte quand elle est belle (≥ 30 %), rouge
   quand elle n'existe pas, ambre entre les deux. */
.nv-tarifs td.tf-marge, .nv-tarifs th.tf-marge{white-space:nowrap}
.nv .tf-marge{font-weight:700; color:#8a5a00}
.nv-tarifs td.tf-marge{padding-right:10px}
.nv .tf-marge small{display:inline-block; min-width:38px; margin-left:5px; padding:1px 6px; border-radius:999px; text-align:center;
  font-size:11px; font-weight:700; background:#fdf1cf; color:#8a5a00}
.nv thead .tf-total .tf-marge small{font-size:12.5px}
.nv .tf-marge.tf-m-ok{color:#15803d}
.nv .tf-marge.tf-m-ok small{background:#dcfce7; color:#15803d}
.nv .tf-marge.tf-m-ko{color:#b91c1c}
.nv .tf-marge.tf-m-ko small{background:#fee2e2; color:#b91c1c}
.nv .tf-usage{font-size:12.5px; color:#5a6377; white-space:nowrap; text-align:right}
.nv .tf-usage b{display:inline-block; min-width:22px; padding:1px 7px; border-radius:999px; text-align:center; background:#e7f4f4; color:#06747D}
.nv .tf-vide{color:#6b7688}
.nv .tf-vente-lue{font-weight:700; white-space:nowrap}
.nv .tf-note{color:#5a6377; font-weight:400}

/* ⏻ retirer du choix · ↺ y remettre */
.nv .tf-etat{
  width:30px; height:30px; border:1px solid #cbd5e1; border-radius:8px; background:#fff;
  font-size:14px; line-height:1; color:#5a6377; cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.nv .tf-etat:hover{border-color:#b91c1c; color:#b91c1c; background:#fff5f5}
.nv .tf-table-inactifs .tf-etat:hover{border-color:#15803d; color:#15803d; background:#f0fdf4}

/* Les familles du catalogue : une bande par zone, avec sa moyenne (Miguël, 12/09). */
.nv .tf-famille td{ padding:7px 10px; font-variant-numeric:tabular-nums; color:#1a1f2e; font-weight:600}
.nv .tf-famille .tf-fam-l{font:800 12.5px var(--font,system-ui,sans-serif); letter-spacing:.06em; text-transform:uppercase;}
.nv .tf-famille td small{font-weight:600; font-size:11px}
.nv .tf-famille.f-microsoft td, .nv .tf-famille.f-eset td, .nv .tf-famille.f-altaro td, .nv .tf-famille.f-mib td, .nv .tf-famille.f-c2 td, .nv .tf-famille.f-autres td{background:#eaeffd; border-color:#b9c9f5}
.nv .tf-famille.f-microsoft .tf-fam-l, .nv .tf-famille.f-eset .tf-fam-l, .nv .tf-famille.f-altaro .tf-fam-l, .nv .tf-famille.f-mib .tf-fam-l, .nv .tf-famille.f-c2 .tf-fam-l, .nv .tf-famille.f-autres .tf-fam-l{color:#3a63c0}
.nv .tf-famille.tf-cachee{display:none}

/* La ligne d'ajout : en pointillé, toujours là, jamais obligatoire. */
.nv .tf-new .tf-cell{border:1px dashed #b9c4d2; background:#fbfcfe}
.nv .tf-new .tf-cell::placeholder{color:var(--accent,#06747D); font-weight:600}
.nv .tf-new.tf-cachee{display:none}

/* Les désactivés, repliés sous le tableau. */
.nv .tf-inactifs summary{cursor:pointer; font:600 12.5px var(--font,system-ui,sans-serif); color:#5a6377; padding:6px 0; list-style:none; display:flex; align-items:center; gap:8px}
.nv .tf-inactifs summary::before{content:"▸"; font-size:11px; transition:transform .15s}
.nv .tf-inactifs[open] summary::before{transform:rotate(90deg)}
.nv .tf-inactifs summary::-webkit-details-marker{display:none}
.nv .tf-table-inactifs .tf-cell{color:#5a6377}

/* La barre d'enregistrement : toujours là sans script ; avec, elle ne
   s'ouvre que quand il y a quelque chose à enregistrer, et elle suit. */
.nv .tf-barre{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:10px 12px; border-radius:10px; background:#f4f6fa; border:1px solid #dbe2ec;
}
.nv .tf-compte{margin-right:auto; font:600 13px var(--font,system-ui,sans-serif); color:#5a6377}
.nv .tf-vivante .tf-barre{display:none}
.nv .tf-vivante .tf-barre.tf-ouverte{
  display:flex; position:sticky; bottom:14px; z-index:3;
  background:#1a1f2e; border-color:#1a1f2e; box-shadow:0 14px 34px rgba(20,30,50,.30);
}
.nv .tf-barre.tf-ouverte .tf-compte{color:var(--or-1,#f5d370)}
.nv .tf-barre.tf-ouverte .nv-clair{background:transparent; color:#e2e8f0; border-color:#5a6377}
.nv .tf-barre.tf-ouverte .nv-clair:hover{background:#2a3142; color:#fff}

/* Les prestations : une carte par tarif, le montant en grand. */
/* 22/09 (Miguël : « aligner les choses ») — quatre cartes par ligne, deux rangées égales pour sept prestations */
.nv .tf-cartes{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:1100px){.nv .tf-cartes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.nv .tf-cartes{grid-template-columns:1fr}}
/* un champ sans achat, ou un tarif non réglé : le repère en gris, pas un prix */
.nv .tf-num.tf-sans::placeholder{color:#8a93a3; opacity:1}
.nv .tf-carte-vide{background:#f7f8fa; border-style:dashed}
.nv .tf-carte-vide .tf-cell::placeholder{color:#8a93a3; opacity:1; font-size:15px; font-weight:600}
.nv .tf-carte{
  display:flex; flex-direction:column; gap:3px; padding:12px 14px;
  border:1px solid #e9d18a; border-radius:12px; background:#fffcf3; cursor:text;
  transition:border-color .15s, background .15s;
}
.nv .tf-carte-l{font:700 12.5px var(--font,system-ui,sans-serif); color:var(--tx-dark,#1a1f2e)}
.nv .tf-carte-v{display:flex; align-items:baseline; gap:6px}
.nv .tf-grand{width:140px; padding:2px 6px; font-size:24px; font-weight:800; color:#8a6a15}
.nv .tf-carte-e{font:700 16px var(--font,system-ui,sans-serif); color:#5a6377}
.nv .tf-carte-s{font:500 11.5px var(--font,system-ui,sans-serif); color:#5a6377}

@media (max-width:900px){
  .nv .tf-tete{flex-direction:column}
  .nv .tf-filtre{flex:1 1 auto; width:100%}
  .nv .tf-c-nom{min-width:200px}
}
/* Dans les Tarifs aussi : la marge plus grosse que les prix. */
.nv .tf-marge{font-size:var(--t-marge)}
.nv .tf-table thead .tf-total .tf-marge{font-size:var(--t-somme-marge)}
/* 12/09 — un mensuel qui a son jumeau annuel le dit à côté de son nom. */
.nv-tarifs .tf-bascule{margin-left:8px; font-size:10.5px; color:#06747D; white-space:nowrap}

/* ── € › Charges (11/09, soir) : l'année en chiffres et en barres, la grille
   mois par mois avec ses sommes et ses moyennes en tête, la projection.
   Les groupes de colonnes portent chacun leur couleur : chiffre d'affaires
   turquoise, achats or, local violet, véhicules bleu, salariés rose,
   résultat vert ou rouge. Même grammaire tf-* que les Tarifs. ── */
.nv-charges .ch-volet{gap:12px; padding-top:0; overflow:hidden}
.nv-charges .tf-tete{margin:0 -18px 2px; padding:12px 18px 10px; border-bottom:1px solid transparent}
.nv-charges .b-qui    .tf-tete{background:linear-gradient(180deg,#e3f3f3,#f2fafa); border-bottom-color:#a9d6d6}
.nv-charges .b-ticket .tf-tete{background:linear-gradient(180deg,#e6edfd,#f3f6fe); border-bottom-color:#b9c9f5}
.nv-charges .b-deja   .tf-tete{background:linear-gradient(180deg,#e9edf3,#f4f6f9); border-bottom-color:#c9d2de}
.nv-charges .b-qui    .nv-lbl{color:#06747D}
.nv-charges .b-ticket .nv-lbl{color:#3a63c0}
.nv-charges .b-deja   .nv-lbl{color:#4b5768}
.nv-charges .b-inter  .nv-lbl{color:#8a6a15}
.nv-charges .nv-bloc.b-qui   {border-color:#a9d6d6; border-top-width:4px}
.nv-charges .nv-bloc.b-ticket{border-color:#b9c9f5; border-top-width:4px}
.nv-charges .nv-bloc.b-deja  {border-color:#c9d2de; border-top-width:4px}
.nv-charges .nv-bloc.b-inter {border-color:#e9d18a; border-top-width:4px; padding-top:12px}
.nv-charges .nv-bloc.b-inter .tf-inactifs summary{padding:0}

/* Les années : des pastilles, l'année ouverte en or, la référence soulignée. */
/* 21/09 (contrôle visuel) : les mêmes pastilles d'années sur Résultat que sur Charges */
.nv-charges .ch-annees, .nv-resultat .ch-annees{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.nv-charges .ch-an, .nv-resultat .ch-an{display:inline-flex; align-items:center; height:32px; padding:0 13px; border-radius:999px; border:1px solid #cbd5e1; background:#fff;
  font:700 13px var(--font,system-ui,sans-serif); color:#1a1f2e; text-decoration:none; cursor:pointer}
.nv-charges .ch-an:hover{border-color:#06747D; color:#06747D}
.nv-charges .ch-an.on{background:linear-gradient(180deg,var(--or-1,#f5d370),var(--or-2,#e8c76a) 50%,var(--or-3,#c9a247)); border-color:var(--or-edge,#b88e35); color:#2a2110}
.nv-charges .ch-an.ref{box-shadow:inset 0 -3px 0 #06747D}
.nv-charges .ch-an-new{display:inline-flex; margin:0}
.nv-charges .ch-an-new .ch-an{border-style:dashed; color:#06747D}
.nv-charges .ch-an-factures{margin-left:10px; border-color:#06747D; background:#e7f4f4; color:#06747D}
.nv-charges .ch-an-factures:hover{background:#06747D; color:#fff}

/* Les quatre chiffres de l'année. */
.nv-charges .ch-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.nv-charges .ch-kpi{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-left-width:5px}
.nv-charges .ch-kpi-l{font:700 11px var(--font,system-ui,sans-serif); letter-spacing:.08em; text-transform:uppercase;}
.nv-charges .ch-kpi-v{font:800 24px var(--font,system-ui,sans-serif); font-variant-numeric:tabular-nums}
.nv-charges .ch-kpi-s{font:500 12px var(--font,system-ui,sans-serif); color:#5a6377; font-variant-numeric:tabular-nums}
.nv-charges .ch-kpi.k-ca{border-left-color:#06747D; background:#f0f9f9}
.nv-charges .ch-kpi.k-ca .ch-kpi-v{color:#06747D}
.nv-charges .ch-kpi.k-ch{border-left-color:#c2410c; background:#fff6f0}
.nv-charges .ch-kpi.k-ch .ch-kpi-v{color:#c2410c}
.nv-charges .ch-kpi.k-sa{border-left-color:#be185d; background:#fdf2f8}
.nv-charges .ch-kpi.k-sa .ch-kpi-v{color:#be185d}
.nv-charges .ch-kpi.k-fin{border-left-color:#4b5768; border-style:dashed}
.nv-charges .ch-kpi.k-fin.ch-pos .ch-kpi-v{color:#15803d}
.nv-charges .ch-kpi.k-fin.ch-neg .ch-kpi-v{color:#b91c1c}
.nv-charges .ch-kpi.k-re{border-left-color:#4b5768}
.nv-charges .ch-kpi.k-re.ch-pos{border-left-color:#15803d; background:#f0fdf4}
.nv-charges .ch-kpi.k-re.ch-pos .ch-kpi-v{color:#15803d}
.nv-charges .ch-kpi.k-re.ch-neg{border-left-color:#b91c1c; background:#fff5f5}
.nv-charges .ch-kpi.k-re.ch-neg .ch-kpi-v{color:#b91c1c}

/* Les douze barres : deux par mois, chiffre d'affaires et charges. */
.nv-charges .ch-graphe{position:relative; display:grid; grid-template-columns:repeat(12,1fr); gap:6px; padding:14px 12px 30px; border:1px solid #dbe2ec; border-radius:12px; background:#fff}
.nv-charges .ch-mois-g{display:flex; flex-direction:column; align-items:center; gap:6px}
.nv-charges .ch-barres{display:flex; align-items:flex-end; gap:3px; height:110px; width:100%; justify-content:center}
.nv-charges .ch-barre{width:38%; max-width:22px; height:100%; display:flex; align-items:flex-end; background:#f1f4f8; border-radius:4px 4px 0 0}
.nv-charges .ch-fill{width:100%; border-radius:4px 4px 0 0; transition:height .3s}
.nv-charges .b-ca .ch-fill{background:linear-gradient(180deg,#0BAE9F,#06747D)}
.nv-charges .b-ch .ch-fill{background:linear-gradient(180deg,#f59e0b,#c2410c)}
.nv-charges .ch-mois-l{font:700 11px var(--font,system-ui,sans-serif); color:#5a6377; text-transform:uppercase; letter-spacing:.04em}
.nv-charges .ch-legende{position:absolute; left:14px; bottom:8px; display:flex; gap:14px; font:600 11.5px var(--font,system-ui,sans-serif); color:#5a6377}
.nv-charges .ch-legende i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px}
.nv-charges .ch-legende-n{font-style:italic; font-weight:500; cursor:help}
/* 21/09 (contrôle visuel) : « FONCTIONNEMENT » se coupait au milieu du mot dans sa colonne — césure française */
.nv-charges .ch-table th.ch-g{hyphens:auto; -webkit-hyphens:auto; overflow-wrap:normal}
.nv-charges .ch-legende i.b-ca{background:#06747D}
.nv-charges .ch-legende i.b-ch{background:#c2410c}
.nv-charges .h-0{height:0} .nv-charges .h-5{height:5%} .nv-charges .h-10{height:10%} .nv-charges .h-15{height:15%} .nv-charges .h-20{height:20%}
.nv-charges .h-25{height:25%} .nv-charges .h-30{height:30%} .nv-charges .h-35{height:35%} .nv-charges .h-40{height:40%} .nv-charges .h-45{height:45%}
.nv-charges .h-50{height:50%} .nv-charges .h-55{height:55%} .nv-charges .h-60{height:60%} .nv-charges .h-65{height:65%} .nv-charges .h-70{height:70%}
.nv-charges .h-75{height:75%} .nv-charges .h-80{height:80%} .nv-charges .h-85{height:85%} .nv-charges .h-90{height:90%} .nv-charges .h-95{height:95%} .nv-charges .h-100{height:100%}

/* La grille : un groupe, une couleur — en-tête plein, colonnes teintées. */
.nv-charges .ch-scroll{border:1px solid #b9c9f5; border-radius:10px; background:#fff; overflow:hidden; overflow-x:auto}
.nv-charges .ch-table{border-collapse:separate; border-spacing:0}
.nv-charges .ch-table th, .nv-charges .ch-table td{padding:5px 6px; white-space:nowrap}
.nv-charges .ch-table thead th{ font:700 11px var(--font,system-ui,sans-serif); letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid #e6e9f0; background:#f4f6fa; color:#4b5768}
.nv-charges .ch-table thead .ch-groupes th{text-align:center; color:#fff; border-bottom:0}
.nv-charges .ch-table thead .ch-groupes th b{display:block; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums}
.nv-charges .ch-table thead .ch-groupes .ch-c-mois{background:#fff}
/* 17/09 (Miguël) — le chiffre d'affaires en plus petit et en italique : moins important que la marge dans ses calculs. */
.nv-charges .ch-table td.g-ca .ch-cell,.nv-charges .ch-table tr.tf-total th.g-ca{font-size:12px;font-style:italic;font-weight:500}
.nv-charges .ch-table .g-resultat{background:#f3f5f8}
/* La ligne des groupes : pleine couleur, blanc dessus (≥ 4,5:1 sur chacune). */
.nv-charges .ch-table thead .ch-groupes .g-fonct{}
.nv-charges .ch-table thead .ch-groupes .g-local{}
.nv-charges .ch-table thead .ch-groupes .g-vehicules{}
.nv-charges .ch-table thead .ch-groupes .g-salaires{}
.nv-charges .ch-table thead .ch-groupes .g-total{}
.nv-charges .ch-table thead .ch-groupes .g-resultat{background:#1a1f2e}
.nv-charges .ch-table thead .ch-groupes .g-cumul{background:#0b4f55}
.nv-charges .ch-table .g-cumul{background:#e7f4f4;}
.nv-charges td.g-cumul.ch-calc{font-size:14.5px; font-weight:800}
.nv-charges td.g-cumul.ch-pos{background:#dcfce7}
.nv-charges td.g-cumul.ch-neg{background:#fee2e2}
.nv-charges .ch-table thead .ch-groupes .g-com{}
/* ── 17/09 (Miguël : « et avec de l'esthétique ? ») — LA GRILLE SUR LA PALETTE DE LA MAISON ──
   Un thème par famille : marge = fait (vert), chiffre d'affaires = faire (turquoise), charges du mois =
   cadre (sable), fonctionnement = prévoir (orange), local = temps (violet), véhicules = lire (bleu),
   salariés = qui (rose), écart à l'objectif = argent (or). Les titres respirent : deux lignes si besoin,
   la somme en dessous, plus grande. Le corps garde la teinte claire de son thème. */
.nv-charges .ch-table{border-radius:14px; overflow:hidden; border:2px solid var(--tk-cadre-b,#c8b48c)}
.nv-charges .ch-table thead .ch-groupes th{ white-space:normal; line-height:1.15; vertical-align:middle; font-size:12px; letter-spacing:.05em}
.nv-charges .ch-table thead .ch-groupes th b{ margin-top:3px}
.nv-charges .ch-table thead .ch-groupes th small{ margin-top:1px}
.nv-charges .ch-table thead .ch-groupes th.ch-c-mois{background:#fff; color:var(--tx-dark,#1a1f2e); text-align:left; font-size:12px; letter-spacing:.08em}
.nv-charges .ch-table thead .ch-groupes .g-ca{background:var(--tk-faire,#055a52)}
.nv-charges .ch-table thead .ch-groupes .g-total{background:var(--tk-cadre,#6b5a3c)}
.nv-charges .ch-table thead .ch-groupes .g-fonct{background:var(--tk-prevoir,#9a3f06)}
.nv-charges .ch-table thead .ch-groupes .g-local{background:var(--tk-temps,#4c1d95)}
.nv-charges .ch-table thead .ch-groupes .g-vehicules{background:var(--tk-lire,#1e40af)}
.nv-charges .ch-table thead .ch-groupes .g-salaires{background:var(--tk-qui,#9d174d)}
.nv-charges .ch-table thead .ch-groupes .g-com{background:var(--tk-cadre-f,#f7f2e8); color:var(--tk-cadre,#6b5a3c); text-align:left}
.nv-charges .ch-table thead .ch-vehicules th{border-bottom:3px solid var(--tk-cadre-b,#c8b48c)}
.nv-charges .ch-table thead .ch-groupes th[rowspan]{border-bottom:3px solid var(--tk-cadre-b,#c8b48c)}
.nv-charges .ch-table .g-ca{background:#eaf6f4}
.nv-charges .ch-table .g-total{background:var(--tk-cadre-f,#f7f2e8)}
.nv-charges .ch-table .g-fonct{background:#fff1e3}
.nv-charges .ch-table .g-local{background:#f1ebfd}
.nv-charges .ch-table .g-vehicules{background:#e8effc}
.nv-charges .ch-table .g-salaires{background:#fdeaf2}
.nv-charges .ch-table .g-com{background:#fff}
.nv-charges .ch-table thead .tf-total th{background:#f7f9fc}
.nv-charges .ch-table thead .ch-somme th{border-top:0}
.nv-charges .ch-table tbody td.g-total.ch-calc{font-weight:800; color:var(--tk-cadre,#6b5a3c)}
.nv-charges .ch-table tbody tr.ch-mois-courant td{box-shadow:inset 0 2px 0 var(--tk-fait,#166534), inset 0 -2px 0 var(--tk-fait,#166534)}
.nv-charges .ch-table tbody tr.ch-a-venir td{color:var(--tx-dark-2,#3d4352)}
.nv-charges .ch-table tbody tr.ch-a-venir .ch-c-mois b a{font-style:italic; color:var(--tx-dark-2,#3d4352)}
.nv-charges .ch-table thead tr:nth-child(2) .g-ca{color:#06747D}
.nv-charges .ch-table thead tr:nth-child(2) .g-fonct{color:#b45309}
.nv-charges .ch-table thead tr:nth-child(2) .g-local{color:#6d28d9}
.nv-charges .ch-table thead tr:nth-child(2) .g-vehicules{color:#1d4ed8}
.nv-charges .ch-table thead tr:nth-child(2) .g-salaires{color:#be185d}
.nv-charges .ch-table thead .tf-total th{text-transform:none; letter-spacing:0; font:800 15px var(--font,system-ui,sans-serif); color:#1a1f2e; font-variant-numeric:tabular-nums; border-bottom:1px solid #e6e9f0}
.nv-charges .ch-table thead .ch-moyenne th{font-weight:700; color:#3a4453; border-bottom:2px solid #b9c9f5}
.nv-charges .ch-table thead .tf-total .tf-total-l small{font-weight:600; font-size:12px; color:#5a6377}
.nv-charges .ch-c-mois{position:sticky; left:0; z-index:2; background:#fff; min-width:96px; border-right:1px solid #e6e9f0; white-space:nowrap}
/* 22/09 (Miguël : « la colonne des mois s'en va quand on fait défiler ») — elle était bien déclarée
   collante, mais le tableau de maison porte overflow:hidden (pour ses coins arrondis) et un parent qui
   coupe annule toute colonne collante. Ici, c'est le cadre autour qui arrondit et qui coupe. */
.nv-charges .ch-scroll .ch-table{overflow:visible; border-radius:0}
.nv-charges .ch-table thead .ch-c-mois{z-index:3}
.nv-charges .ch-table tbody .ch-c-mois b{font-weight:700; color:#1a1f2e}
.nv-charges .ch-cell{width:82px; text-align:right; font-variant-numeric:tabular-nums; padding:3px 5px; min-height:26px; line-height:1.2; background:transparent}
/* Des lignes serrées (Miguël, 12/09) : la grille se lit d'un regard, douze mois sans défiler. */
.nv-charges .ch-table td{padding:2px 4px}
.nv-charges .ch-table thead th{padding:5px 6px}
.nv-charges .ch-table thead .tf-total th{padding-top:5px; padding-bottom:5px}
.nv-charges .ch-table thead .ch-groupes th{padding:4px 6px}
.nv-charges .ch-table thead .ch-groupes th b{font-size:12.5px}
.nv-charges .ch-table thead .ch-vehicules .ch-veh{padding:3px 6px}
.nv-charges .ch-com{min-height:26px; padding:3px 6px}
/* Toutes les colonnes d'un même thème ont la même largeur (Miguël, 12/09) : une colonne saisie = 96 px, point. */
.nv-charges .ch-table th.ch-col, .nv-charges .ch-table td.ch-col, .nv-charges .ch-table th.ch-g-plie, .nv-charges .ch-table td.ch-g-plie{width:96px; min-width:96px; max-width:96px; box-sizing:border-box}
.nv-charges .ch-table .g-total, .nv-charges .ch-table .g-resultat{width:88px; min-width:88px}
/* 17/09 (Miguël : « il faut retravailler cette mise en page ») — LES TITRES DE COLONNES SE LISENT EN
   ENTIER : ils passent à la ligne au lieu d'être coupés ou de se chevaucher (« Achats pour revente »,
   « du mois »), et la colonne des charges du mois a la place de son nombre. */
.nv-charges .ch-table thead tr:not(.ch-groupes):not(.tf-total) th.ch-col,
.nv-charges .ch-table thead tr:not(.ch-groupes):not(.tf-total) th.g-total{white-space:normal; line-height:1.15; vertical-align:middle; overflow-wrap:anywhere}
.nv-charges .ch-table .g-total{width:100px; min-width:100px}
.nv-charges .ch-table thead th.g-total{font-size:11px}
/* 17/09 (Miguël) — un seul étage de titres : le petit mot sous le titre du thème, les sous-colonnes des véhicules en petit. */
.nv-charges .ch-table thead .ch-groupes th small{display:block; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:none; opacity:.9}
.nv-charges .ch-table thead .ch-groupes th.g-ca{white-space:normal; line-height:1.15}
.nv-charges .ch-table thead .ch-groupes th.g-total{white-space:normal}
.nv-charges .ch-table thead .ch-vehicules th.ch-col{white-space:normal; line-height:1.15}
.nv-charges .ch-table thead .ch-vehicules th small{display:block; font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.nv-charges .ch-table thead .ch-vehicules th.g-salaires{background:#fce7f3; color:#be185d; text-align:center; font-size:11px; text-transform:none}
.nv-charges .ch-table thead .ch-vehicules th.g-salaires b{display:block; font-size:12px; letter-spacing:0}
/* 17/09 (Miguël) — les mots des titres de colonnes sont centrés dans leurs cases. */
.nv-charges .ch-table thead tr:not(.ch-groupes):not(.tf-total) th{text-align:center; vertical-align:middle}
.nv-charges .ch-table .g-cumul, .nv-charges .ch-table .g-reste{width:112px; min-width:112px}
/* Les intitulés de colonnes se plient sur deux lignes plutôt que d'élargir la grille (« utiliser toute la page », pas plus). */
.nv-charges .ch-table thead tr:nth-child(2) th{white-space:normal; line-height:1.15; max-width:104px; vertical-align:bottom}
.nv-charges .ch-table thead tr:nth-child(2) th.ch-c-mois{max-width:none}
.nv-charges .ch-row:hover .ch-cell{background:#fff; border-color:#dbe2ec}
.nv-charges .ch-cell:focus{background:#fff}
.nv-charges .ch-calc{font-weight:700; color:#1a1f2e; text-align:right; font-variant-numeric:tabular-nums}
.nv-charges .ch-pos{color:#15803d}
.nv-charges .ch-neg{color:#b91c1c}
.nv-charges td.g-resultat.ch-pos{background:#f0fdf4}
.nv-charges td.g-resultat.ch-neg{background:#fff5f5}
.nv-charges .ch-com{min-width:120px}
/* Janvier d'après les contrats : les deux cellules calculées, et la marque. */
.nv-charges .ch-cell.ch-auto{color:#06747D; font-weight:700; background:#e7f4f4; border-color:#a9d6d6}
.nv-charges .ch-janv-auto{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:#e7f4f4; color:#06747D; font:700 10.5px var(--font,system-ui,sans-serif); vertical-align:1px}
.nv-charges .ch-janv-btn{margin-left:6px; padding:1px 7px; border-radius:999px; border:1px dashed #a9d6d6; background:#fff; color:#06747D; font:700 10.5px var(--font,system-ui,sans-serif); cursor:pointer; vertical-align:1px}
.nv-charges .ch-janv-btn:hover{background:#e7f4f4}
.nv-charges .ch-row.ch-a-venir .ch-c-mois b{color:#5a6377; font-style:italic}
.nv-charges .ch-row.ch-a-venir .ch-c-mois b::after{content:" · à venir"; font-weight:500; font-size:11px}
.nv-charges .ch-row.tf-mod .ch-c-mois{box-shadow:inset 3px 0 0 var(--or-3,#c9a247)}
.nv-charges .ch-row.tf-mod .tf-cell{background:#fff8e6; border-color:#e9d18a}
.nv-charges .ch-propager{display:flex; align-items:center; gap:8px; font:600 12.5px var(--font,system-ui,sans-serif); color:#5a6377}
.nv-charges .tf-barre.tf-ouverte .ch-propager{color:#e2e8f0}
.nv-charges .ch-propager input{width:16px; height:16px; accent-color:#06747D}
.nv-charges .ch-vide{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.nv-charges .ch-inline{margin:0}

/* La marge en première colonne (visuel B) et le reste à couvrir en dernière (Miguël, 12/09). */
.nv-charges .ch-table thead .ch-groupes .g-marge{background:#05555c}
.nv-charges .ch-table .g-marge{background:#e7f4f4; border-right:2px solid #a9d6d6}
.nv-charges .ch-table thead tr:nth-child(2) .g-marge{color:#06747D}
.nv-charges .ch-pill{display:inline-flex; align-items:baseline; gap:6px; min-width:92px; padding:3px 10px; border-radius:999px; background:#d2ecec; color:#06747D; font:800 var(--t-marge) var(--font,system-ui,sans-serif); font-variant-numeric:tabular-nums; justify-content:flex-end}
.nv-charges .ch-pill em{font-style:normal; font-weight:700; font-size:11px; color:#3a4453}
.nv-charges .ch-pill.neg{background:#fee2e2; color:#b91c1c}
.nv-charges thead .tf-total .ch-pill{font-size:var(--t-somme-marge)}
.nv-charges .g-ca .ch-cell{font-size:var(--t-vente); color:#4b5768}
.nv-charges .g-ca .ch-cell[data-col="achats_revente"]{font-size:var(--t-achat)}
.nv-charges .ch-table thead .ch-groupes .g-reste{background:#7c2d12}
.nv-charges .ch-table .g-reste{background:#fff7ed; border-left:2px solid #fdba74}
.nv-charges td.g-reste.ch-calc{font-weight:800; color:#c2410c; font-size:var(--t-marge)}
.nv-charges td.g-reste.ch-calc.couvert{color:#15803d; background:#dcfce7}
.nv-charges .ch-besoin{font:700 12px var(--font,system-ui,sans-serif); color:#7c2d12; white-space:normal}
.nv-charges .ch-besoin b{display:block; font-size:var(--t-somme)}
.nv-charges .ch-table thead th.g-reste, .nv-charges .ch-table td.g-reste{white-space:normal}
.nv-charges .ch-couvert{display:inline-block; padding:2px 9px; border-radius:999px; background:#dcfce7; color:#15803d; font:700 12px var(--font,system-ui,sans-serif); text-transform:none; letter-spacing:0}
.nv-charges .ch-pas-couvert{display:inline-block; padding:2px 9px; border-radius:999px; background:#fee2e2; color:#b91c1c; font:700 12px var(--font,system-ui,sans-serif); text-transform:none; letter-spacing:0}

/* Un groupe de colonnes se replie en une seule (Miguël, 12/09) : sans script,
   tout est déplié ; avec, la classe plie-<groupe> sur la table cache les
   colonnes et montre le total. */
.nv-charges .ch-g-plie{display:none}
.nv-charges .ch-plier{margin-left:8px; width:22px; height:22px; border-radius:6px; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.15); color:#fff; font-size:12px; line-height:1; cursor:pointer; vertical-align:middle}
.nv-charges .ch-plier:hover{background:rgba(255,255,255,.3)}
.nv-charges .ch-table.plie-veh1 .v-veh1.ch-col, .nv-charges .ch-table.plie-veh1 .v-veh1.ch-g-ouvert{display:none}
.nv-charges .ch-table.plie-veh1 .v-veh1.ch-g-plie{display:table-cell}
.nv-charges .ch-table.plie-veh2 .v-veh2.ch-col, .nv-charges .ch-table.plie-veh2 .v-veh2.ch-g-ouvert{display:none}
.nv-charges .ch-table.plie-veh2 .v-veh2.ch-g-plie{display:table-cell}
.nv-charges .ch-table.plie-veh3 .v-veh3.ch-col, .nv-charges .ch-table.plie-veh3 .v-veh3.ch-g-ouvert{display:none}
.nv-charges .ch-table.plie-veh3 .v-veh3.ch-g-plie{display:table-cell}
.nv-charges .ch-table.plie-veh4 .v-veh4.ch-col, .nv-charges .ch-table.plie-veh4 .v-veh4.ch-g-ouvert{display:none}
.nv-charges .ch-table.plie-veh4 .v-veh4.ch-g-plie{display:table-cell}
/* Les séparateurs (Miguël, 12/09) : chaque grand thème ouvre par une bordure de sa couleur ;
   chaque véhicule est bordé des deux côtés ; les colonnes calculées aussi. */
/* Fines à l'intérieur d'un thème, épaisses quand on change de thème (Miguël, 12/09). */
.nv-charges .ch-table td.ch-col, .nv-charges .ch-table th.ch-col{border-left:1px solid #e6e9f0}
.nv-charges .ch-table .ch-sep{border-left:3px solid #94a3b8}
.nv-charges .ch-table .ch-sep-ca{border-left-color:#06747D}
.nv-charges .ch-table .ch-sep-fonct{border-left-color:#b45309}
.nv-charges .ch-table .ch-sep-local{border-left-color:#6d28d9}
.nv-charges .ch-table .ch-sep-vehicules{border-left-color:#1d4ed8}
.nv-charges .ch-table .ch-sep-salaires{border-left-color:#be185d}
.nv-charges .ch-table .ch-sep-veh{border-left:1px solid #93b4f0}
.nv-charges .ch-table .ch-sep-veh.ch-sep{border-left:3px solid #1d4ed8}
.nv-charges .ch-table .ch-sep-veh-fin{border-right:1px solid #93b4f0}
.nv-charges .ch-table .g-total{border-left:3px solid #4b5768}
.nv-charges .ch-table .g-resultat{border-left:2px solid #1a1f2e}
.nv-charges .ch-table .g-cumul{border-left:2px solid #0b4f55}
.nv-charges .ch-table .g-com{border-left:3px solid #c9d2de}
.nv-charges .ch-table .g-marge{border-left:3px solid #06747D}
.nv-charges .ch-table thead .ch-groupes th{border-left:3px solid #fff}
.nv-charges .ch-table thead .ch-groupes .ch-c-mois{border-left:0}

/* La ligne des véhicules : un bandeau par véhicule, sous le groupe. */
.nv-charges .ch-table thead .ch-groupes th[rowspan]{vertical-align:middle}
.nv-charges .ch-table thead .ch-vehicules .ch-veh{background:#dbe7fd; color:#1d4ed8; text-align:center; border-left:2px solid #fff; border-bottom:0}
.nv-charges .ch-table thead .ch-vehicules .ch-veh b{display:block; font-size:12.5px; letter-spacing:0; text-transform:none}
/* 17/09 (Miguël : « pas MIGUEL mais Miguël, uniquement l'initiale en majuscule ») — les prénoms des véhicules et des salariés s'écrivent tels quels. */
.nv-charges .ch-table thead .ch-vehicules .ch-veh{text-transform:none; letter-spacing:.02em; font-size:12px}
.nv-charges .ch-table thead th.g-salaires.ch-col{text-transform:none; letter-spacing:.02em; font-size:12px}
.nv-charges .ch-table thead .ch-vehicules .ch-plier{border-color:#1d4ed8; background:#fff; color:#1d4ed8}
.nv-charges .ch-table .v-veh1.ch-col:first-of-type, .nv-charges .ch-table td.v-veh2[data-col$="_2"]{border-left:0}
.nv-charges .ch-table td.ch-col.v-veh1, .nv-charges .ch-table td.ch-col.v-veh3{background:#eff6ff}
.nv-charges .ch-table td.ch-col.v-veh2, .nv-charges .ch-table td.ch-col.v-veh4{background:#e4edfd}
.nv-charges .ch-table.plie-salaires .g-salaires.ch-col, .nv-charges .ch-table.plie-salaires .g-salaires.ch-g-ouvert{display:none}
.nv-charges .ch-table.plie-salaires .g-salaires.ch-g-plie{display:table-cell}
/* 17/09 (Miguël) — la colonne « Charges du mois » se masque comme un groupe : une languette reste pour la rouvrir. */
.nv-charges .ch-table.plie-total .g-total.ch-g-ouvert{display:none}
.nv-charges .ch-table.plie-total .g-total.ch-g-plie{display:table-cell}
.nv-charges .ch-table .g-total.ch-g-plie{width:26px; min-width:26px; padding:0}
.nv-charges .ch-table thead .ch-groupes th.g-total .ch-plier{margin:4px auto 0; display:block}
/* 17/09 (Miguël) — un titre long (« Fonctionnement ») se coupe proprement au lieu de déborder sur la case voisine. */
/* 22/09 (contrôle visuel avec Miguël) : « FONCTIONNEMENT » se coupait en FONCTIONN|EMENT, sans trait —
   overflow-wrap:anywhere passait avant la césure. On laisse la césure française faire son travail. */
.nv-charges .ch-table thead .ch-groupes th{overflow-wrap:normal; word-break:normal; hyphens:auto; -webkit-hyphens:auto}
.nv-charges .ch-table thead .ch-groupes th.ch-col{max-width:none; width:auto; min-width:96px}
.nv-charges td.ch-g-plie.ch-calc{font-weight:700}

/* Les lignes de dépenses sous la grille : deux volets, un mois à la fois. */
.nv-charges .ch-mois-lien{color:inherit; text-decoration:none; border-bottom:1px dotted #a9d6d6}
.nv-charges .ch-mois-lien:hover, .nv-charges .ch-mois-lien.on{color:#06747D; border-bottom-style:solid}
.nv-charges .ch-lignes-badge{display:block; width:max-content; margin:2px 0 0 auto; padding:0 6px; border-radius:999px; background:#e7f4f4; color:#06747D; font:700 10.5px var(--font,system-ui,sans-serif); text-decoration:none; vertical-align:middle; white-space:nowrap}
.nv-charges .ch-lignes-badge.ecart{background:#fdf1cf; color:#8a5a00}
.nv-charges .ch-mois-nav{display:flex; gap:4px; flex-wrap:wrap}
.nv-charges .ch-mois-pill{display:inline-flex; align-items:center; gap:3px; height:28px; padding:0 9px; border-radius:999px; border:1px solid #cbd5e1; background:#fff; font:700 11.5px var(--font,system-ui,sans-serif); color:#4b5768; text-decoration:none; text-transform:uppercase}
.nv-charges .ch-mois-pill small{font-size:10px; padding:0 5px; border-radius:999px; background:#eef1f5; color:#4b5768}
.nv-charges .ch-mois-pill.plein{border-color:#a9d6d6; color:#06747D}
.nv-charges .ch-mois-pill.plein small{background:#e7f4f4; color:#06747D}
.nv-charges .ch-mois-pill.on{background:#1a1f2e; border-color:#1a1f2e; color:#fff}
.nv-charges .ch-mois-pill.on small{background:rgba(255,255,255,.2); color:#fff}
.nv-charges .b-inter .ch-scroll{border-color:#e9d18a}
.nv-charges .b-inter .ch-ltable thead th{background:#8a6a15; color:#fff; border-bottom-color:#8a6a15}
.nv-charges .b-inter .ch-ltable thead .tf-total th{background:#fdf1cf; color:#1a1f2e; border-bottom-color:#e9d18a}
.nv-charges .b-deja .ch-scroll{border-color:#c9d2de}
.nv-charges .b-deja .ch-ltable thead th{background:#4b5768; color:#fff; border-bottom-color:#4b5768}
.nv-charges .b-deja .ch-ltable thead .tf-total th{background:#eef1f5; color:#1a1f2e; border-bottom-color:#c9d2de}
.nv-charges .ch-ltable th, .nv-charges .ch-ltable td{white-space:normal}
.nv-charges .ch-ltable thead .tf-total th{font-size:var(--t-somme)}
.nv-charges .ch-case-etat{text-align:left}
.nv-charges .ch-case-etat .tf-total-l{font-size:12.5px}
.nv-charges .ch-case-etat form{display:inline-flex; margin-left:10px; vertical-align:middle}
.nv-charges .ch-ok{color:#15803d}
.nv-charges .ch-ecart{color:#8a5a00}
.nv-charges .ch-ligne td{padding:6px 8px; font-size:13px}
.nv-charges .ch-ligne.rec td{background:#fbfcfe}
.nv-charges .ch-rec{display:inline-block; margin-left:6px; padding:0 6px; border-radius:999px; background:#e7f4f4; color:#06747D; font:700 10.5px var(--font,system-ui,sans-serif)}
.nv-charges .ch-montant{font-weight:700; font-size:var(--t-vente)}
.nv-charges .ch-new td{background:#fbfcfe}
.nv-charges .ch-new .tf-cell{border:1px dashed #b9c4d2; background:#fff; min-height:32px}
.nv-charges .ch-new .tf-cell::placeholder{color:#06747D; font-weight:600}
.nv-charges .ch-date{width:140px}
.nv-charges .ch-new-qui{display:flex; gap:6px}
.nv-charges .ch-fourn{flex:1 1 120px}
.nv-charges .ch-client{flex:1 1 160px; min-width:0}
.nv-charges .ch-cell-montant{width:110px; text-align:right}
.nv-charges .ch-new-go{white-space:nowrap}
.nv-charges .ch-rec-lbl{display:inline-flex; align-items:center; gap:5px; margin-right:8px; font:600 12px var(--font,system-ui,sans-serif); color:#4b5768}
.nv-charges .ch-btn-petit{min-height:32px; padding:5px 12px; font-size:12.5px}

/* Le mois en cours : une bordure sous sa ligne, pour savoir où l'on en est (Miguël, 12/09). */
.nv-charges .ch-row.ch-mois-courant td{border-bottom:3px solid #06747D}
.nv-charges .ch-row.ch-mois-courant .ch-c-mois b{color:#06747D}

/* La projection. */
.nv-charges .ch-proj{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px}
.nv-charges .ch-proj-c{display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:10px; border:1px solid #dbe2ec; background:#fbfcfe}
.nv-charges .ch-proj-c span{font:600 11.5px var(--font,system-ui,sans-serif); color:#5a6377}
.nv-charges .ch-proj-c b{font:800 18px var(--font,system-ui,sans-serif); color:#1a1f2e; font-variant-numeric:tabular-nums}
.nv-charges .ch-proj-m{border-color:#a9d6d6; background:#f0f9f9}
.nv-charges .ch-proj-m b{color:#06747D}
.nv-charges .ch-proj-m small{font-weight:500}
.nv-charges .ch-proj-lien{font:600 12px var(--font,system-ui,sans-serif); color:#06747D; text-decoration:none; margin-top:2px}
.nv-charges .ch-proj-lien:hover{text-decoration:underline}
.nv-charges a.ch-janv-auto{text-decoration:none}
.nv-charges a.ch-janv-auto:hover{background:#06747D; color:#fff}

/* ── Le calcul de janvier, client par client ── */
.nv-contrats .ct-scroll{border:1px solid #a9d6d6; border-radius:10px; background:#fff; overflow:hidden; overflow-x:auto}
.nv-contrats .ct-table th, .nv-contrats .ct-table td{white-space:nowrap; padding:5px 8px}
.nv-contrats .ct-table thead th{background:#06747D; color:#fff; font:700 11px var(--font,system-ui,sans-serif); letter-spacing:.06em; text-transform:uppercase; padding:8px}
.nv-contrats .ct-table thead .tf-total th{background:#e7f4f4; color:#1a1f2e; text-transform:none; letter-spacing:0; font:800 15px var(--font,system-ui,sans-serif); font-variant-numeric:tabular-nums; padding-top:8px; padding-bottom:8px; border-bottom:2px solid #a9d6d6}
/* 12/09 — un liseré net entre deux clients (demande de Miguël) : turquoise de la maison, 3 px, et un souffle au-dessus. */
.nv-contrats .ct-client td{background:#f0f9f9; color:#06747D; border-top:3px solid #0BAE9F; padding-top:7px}
.nv-contrats tbody tr:last-child td{border-bottom:3px solid #0BAE9F}
.nv-contrats .ct-client td a{color:#06747D; text-decoration:none}
.nv-contrats .ct-client td a:hover{text-decoration:underline}
.nv-contrats .ct-client .n{color:#1a1f2e}
.nv-contrats .ct-client .ct-nb{font-weight:500; font-size:12px; color:#5a6377}
.nv-contrats .ct-ligne td{ font-variant-numeric:tabular-nums}
.nv-contrats .ct-ligne td.ct-produit{padding-left:22px}
.nv-contrats .ct-libelle{color:#5a6377; font-weight:400; margin-left:6px}
.nv-contrats .ct-inactif{color:#b45309; font-size:11px; margin-left:6px}
.nv-contrats .ct-prospect{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:#fdf1cf; color:#8a5a00; font-size:10.5px; vertical-align:1px}
.nv-contrats .ct-marge{font-weight:700; color:#15803d}
.nv-contrats .ct-filtre{flex:0 0 280px; position:relative}
.nv-contrats .ct-filtre .nv-champ{padding-left:32px; min-height:36px}
.nv-contrats .tf-cachee{display:none}
.nv-contrats .ct-barre-outils{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.nv-contrats .ct-seg{display:inline-flex; border:1px solid #a9d6d6; border-radius:999px; overflow:hidden; background:#fff}
.nv-contrats .ct-btn{border:0; background:transparent; padding:6px 13px; font:700 12.5px var(--font,system-ui,sans-serif); color:#06747D; cursor:pointer}
.nv-contrats .ct-btn + .ct-btn{border-left:1px solid #a9d6d6}
.nv-contrats .ct-btn b{margin-left:4px; padding:0 6px; border-radius:999px; background:#e7f4f4; font-weight:700}
.nv-contrats .ct-btn:hover{background:#f0f9f9}
.nv-contrats .ct-btn.on{background:#06747D; color:#fff}
.nv-contrats .ct-btn.on b{background:rgba(255,255,255,.22); color:#fff}
.nv-contrats .ct-compte{font:600 12.5px var(--font,system-ui,sans-serif); color:#5a6377}
.nv-contrats .ct-tag{display:inline-block; margin-left:8px; padding:1px 7px; border-radius:999px; font-size:10.5px; font-weight:700; vertical-align:1px}
.nv-contrats .ct-tag-cm{background:#e7f4f4; color:#06747D}
.nv-contrats .ct-tag-hc{background:#eef1f5; color:#4b5768}
.nv-charges .ch-proj-r.ch-pos{border-color:#86efac; background:#f0fdf4}
.nv-charges .ch-proj-r.ch-pos b{color:#15803d}
.nv-charges .ch-proj-r.ch-neg{border-color:#fca5a5; background:#fff5f5}
.nv-charges .ch-proj-r.ch-neg b{color:#b91c1c}

/* Les noms des colonnes. */
.nv-charges .ch-lib-form{display:flex; flex-direction:column; gap:12px; padding-top:10px}
.nv-charges .ch-lib-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.nv-charges .ch-lib-g{display:flex; flex-direction:column; gap:6px; margin:0; padding:10px 12px; border:1px solid #dbe2ec; border-radius:10px; background:#fbfcfe}
.nv-charges .ch-lib-g legend{padding:0 6px; font:700 11px var(--font,system-ui,sans-serif); letter-spacing:.08em; text-transform:uppercase}
.nv-charges .ch-lib-g.g-local legend{color:#6d28d9}
.nv-charges .ch-lib-g.g-fonct legend{color:#b45309}
.nv-charges .ch-lib-g.g-vehicules legend{color:#1d4ed8}
.nv-charges .ch-lib-g.g-salaires legend{color:#be185d}
.nv-charges .ch-lib-g .nv-champ{min-height:34px}
/* 22/09 (Miguël, la Yaris) — un véhicule : son nom, puis le nom de chacune de ses colonnes. */
.nv-charges .ch-lib-veh{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:5px; align-items:center}
.nv-charges .ch-lib-veh .ch-lib-col{font-size:12.5px; padding-left:7px; padding-right:7px}
.nv-charges .ch-lib-veh .ch-lib-nom{font-weight:700}
.nv-charges .ch-depuis{display:inline-flex; align-items:center; gap:6px; font:600 12.5px var(--font,system-ui,sans-serif); color:#1a1f2e}
.nv-charges .ch-depuis input{accent-color:#06747D}
.nv-charges .ch-n1 .tf-tete{background:linear-gradient(180deg,#e6edfd,#f3f6fe)}

@media (max-width:900px){
  .nv-charges .ch-graphe{grid-template-columns:repeat(6,1fr); padding-bottom:36px}
  .nv-charges .ch-barres{height:70px}
}
/* Le détail par client : les lignes de produits un cran plus petites que la ligne du client (Miguël, 11/09). */
.nv-contrats .ct-ligne td{font-size:12px; padding-top:3px; padding-bottom:3px; color:#3a4453}
.nv-contrats .ct-client td{font-size:13.5px}
/* La marge, plus importante que la vente et les achats (Miguël, 11/09) : colonne teintée, chiffres plus gros. */
.nv-contrats .ct-table td.ct-marge, .nv-contrats .ct-table th.ct-marge{background:#e7f4f4; border-left:2px solid #a9d6d6; border-right:2px solid #a9d6d6}
.nv-contrats .ct-table thead tr:first-child th:nth-child(5){background:#05555c; border-left:2px solid #a9d6d6; border-right:2px solid #a9d6d6; font-size:12px}
.nv-contrats .ct-client td.ct-marge{font-size:15px;}
.nv-contrats .ct-ligne td.ct-marge{font-size:var(--t-marge); font-weight:700; color:#15803d}
.nv-contrats .ct-table thead .tf-total th.ct-marge{font-size:var(--t-somme-marge); background:#d2ecec}
.nv-contrats .ct-table td:nth-child(6), .nv-contrats .ct-table td:nth-child(7){color:#5a6377}
/* Sur la ligne du client : en gras, son nom et la marge qu'il génère — rien d'autre (Miguël, 11/09). */
.nv-contrats .ct-client td{font-weight:400}
.nv-contrats .ct-client td a{font-weight:800; font-size:14px}
.nv-contrats .ct-client td:nth-child(6), .nv-contrats .ct-client td:nth-child(7){font-weight:400; color:#5a6377}
.nv-contrats .ct-client td.ct-marge{font-weight:800; color:#15803d}
/* Les factures de janvier : la case par client, le compteur, les PDF (Miguël, 12/09). */
.nv-contrats .fj-compteur{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; font:600 13px var(--font,system-ui,sans-serif); color:#1a1f2e}
.nv-contrats .fj-barre{flex:0 0 220px; height:12px; border-radius:999px; background:#e6e9f0; overflow:hidden}
.nv-contrats .fj-barre i{display:block; height:100%; background:linear-gradient(90deg,#0BAE9F,#06747D); width:0}
.nv-contrats .fj-barre .h-5{width:5%} .nv-contrats .fj-barre .h-10{width:10%} .nv-contrats .fj-barre .h-15{width:15%} .nv-contrats .fj-barre .h-20{width:20%} .nv-contrats .fj-barre .h-25{width:25%}
.nv-contrats .fj-barre .h-30{width:30%} .nv-contrats .fj-barre .h-35{width:35%} .nv-contrats .fj-barre .h-40{width:40%} .nv-contrats .fj-barre .h-45{width:45%} .nv-contrats .fj-barre .h-50{width:50%}
.nv-contrats .fj-barre .h-55{width:55%} .nv-contrats .fj-barre .h-60{width:60%} .nv-contrats .fj-barre .h-65{width:65%} .nv-contrats .fj-barre .h-70{width:70%} .nv-contrats .fj-barre .h-75{width:75%}
.nv-contrats .fj-barre .h-80{width:80%} .nv-contrats .fj-barre .h-85{width:85%} .nv-contrats .fj-barre .h-90{width:90%} .nv-contrats .fj-barre .h-95{width:95%} .nv-contrats .fj-barre .h-100{width:100%}
.nv-contrats .fj-reste{color:#b91c1c} .nv-contrats .fj-fini{color:#15803d}
.nv-contrats .fj-pdf-tout{margin-left:auto}
.nv-contrats .fj-cell{white-space:nowrap}
.nv-contrats .fj-form{display:inline-flex; align-items:center; gap:6px; margin:0}
.nv-contrats .fj-num{width:110px; min-height:30px; padding:4px 8px; font-size:12px; border:1px dashed #b9c4d2; background:#fff}
.nv-contrats .fj-btn{min-height:30px; padding:4px 12px; font-size:12.5px}
.nv-contrats .fj-ok{display:inline-block; padding:3px 10px; border-radius:999px; background:#dcfce7; color:#15803d; font:700 12px var(--font,system-ui,sans-serif)}
.nv-contrats .fj-pdf{margin-left:6px; text-decoration:none; font-size:14px}
.nv-contrats .ct-client.fj-faite td{background:#f0fdf4}
.nv-contrats .ct-client.fj-faite td a{color:#15803d}

/* Le CA moins gros que la marge, partout (Miguël, 11/09, 23 h 40) ; et une
   taille par nature : achat (4e et 7e colonnes) < vente (3e et 6e) < marge (5e). */
.nv-contrats .ct-client td:nth-child(6){font-size:var(--t-vente)}
.nv-contrats .ct-client td:nth-child(7){font-size:var(--t-achat)}
.nv-contrats .ct-ligne td:nth-child(3), .nv-contrats .ct-ligne td:nth-child(6){font-size:var(--t-vente); font-weight:600}
.nv-contrats .ct-ligne td:nth-child(4), .nv-contrats .ct-ligne td:nth-child(7){font-size:var(--t-achat); color:#4b5768}
.nv-contrats .ct-table thead .tf-total th:nth-child(6){font-size:14px; font-weight:700; color:#4b5768}
.nv-contrats .ct-table thead .tf-total th:nth-child(7){font-size:12.5px; font-weight:700; color:#4b5768}
.nv-contrats .ct-table thead tr:first-child th:nth-child(6), .nv-contrats .ct-table thead tr:first-child th:nth-child(7){opacity:.85}
.nv-contrats .ct-periode{color:#8b95a5; font-size:10px; margin-left:2px}
/* 12/09 — la carte « Produits consommés » de la fiche s'édite sur place (quantité ✓ ×, ajout). */
.cf-card--prod .cf-pform{display:flex; align-items:center; gap:4px; margin-left:auto; flex:none}
.cf-card--prod .cf-pqin{width:56px; padding:4px 6px; text-align:right; font:700 13px var(--font,system-ui,sans-serif); border:1px solid #c9d2de; border-radius:8px; background:#fff; color:#1a1f2e}
.cf-card--prod .cf-pbtn{width:28px; height:28px; border:1px solid #a9d6d6; border-radius:8px; background:#e3f3f3; color:#06747D; font-weight:800; cursor:pointer; line-height:1}
.cf-card--prod .cf-pbtn:hover{background:#06747D; color:#fff}
.cf-card--prod .cf-pbtn--x{border-color:#f1c4c4; background:#fff2f2; color:#b91c1c}
.cf-card--prod .cf-pbtn--x:hover{background:#b91c1c; color:#fff}
.cf-card--prod .cf-padd{display:flex; align-items:center; gap:6px; padding:8px 11px 10px; border-top:1px dashed #d5dde6}
.cf-card--prod .cf-psel{flex:1 1 auto; min-width:0; padding:5px 8px; font:600 12px var(--font,system-ui,sans-serif); border:1px solid #c9d2de; border-radius:8px; background:#fff; color:#1a1f2e}
.cf-card--prod .cf-perr{margin:0 11px 8px; padding:6px 10px; border-radius:8px; background:#fee2e2; color:#b91c1c; font-size:12px; font-weight:700}
/* 13/09 — le dépôt d'un document dans la GED du client, colonne de gauche de l'onglet Documents (bureau). */
.gd-explorer--fiche .gd-depot{flex:none; display:grid; gap:6px; margin:8px 9px 10px; padding:10px 11px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(0,234,255,.35)}
.gd-explorer--fiche .gd-depot-h{font:800 10.5px var(--font,system-ui,sans-serif); letter-spacing:.8px; text-transform:uppercase; color:#e2e8f0}
.gd-explorer--fiche .gd-depot-file{font-size:11.5px; color:#e2e8f0; max-width:100%}
.gd-explorer--fiche .gd-depot-sel, .gd-explorer--fiche .gd-depot-in{width:100%; padding:6px 8px; border:1px solid rgba(255,255,255,.25); border-radius:8px; background:#0a1628; color:#e2e8f0; font:600 12px var(--font,system-ui,sans-serif)}
.gd-explorer--fiche .gd-depot-go{padding:8px 10px; border:0; border-radius:9px; background:#00eaff; color:#020617; font:800 12.5px var(--font,system-ui,sans-serif); cursor:pointer}
.gd-explorer--fiche .gd-depot-aide{margin:0; font-size:10.5px; color:#94a3b8}
.gd-explorer--fiche .gd-depot-ok{padding:5px 8px; border-radius:8px; background:#dcfce7; color:#15803d; font:700 11.5px var(--font,system-ui,sans-serif)}
.gd-explorer--fiche .gd-depot-ko{padding:5px 8px; border-radius:8px; background:#fee2e2; color:#b91c1c; font:700 11.5px var(--font,system-ui,sans-serif)}

/* 25/09/2026 (Miguel : "uploader les installeurs ESET sur les espaces individuels des fiches
   clients") — l'encart de l'installeur antivirus, juste au-dessus du depot de documents. Il
   reprend la meme boite, avec un liseré ambre : ce n'est PAS un document du client, c'est un
   programme, et le dire visuellement evite qu'on cherche ensuite dans la GED. */
.gd-explorer--fiche .gd-eset{border-color:rgba(245,211,112,.45)}
.gd-explorer--fiche .gd-eset .gd-depot-h{color:#f5d370}
.gd-explorer--fiche .gd-eset-l{font:700 10.5px var(--font,system-ui,sans-serif); letter-spacing:.4px; text-transform:uppercase; color:#94a3b8; margin:2px 0 -2px}
.gd-explorer--fiche .gd-eset-f{width:100%; font-size:11.5px; color:#e2e8f0}
.gd-explorer--fiche .gd-eset-f::file-selector-button{margin-right:8px; padding:5px 9px; border:1px solid rgba(255,255,255,.25); border-radius:8px; background:#1e293b; color:#e2e8f0; font:700 11px var(--font,system-ui,sans-serif); cursor:pointer}
.gd-explorer--fiche .gd-eset-d{width:100%; padding:6px 8px; border:1px solid rgba(255,255,255,.25); border-radius:8px; background:#0a1628; color:#e2e8f0; font:600 12px var(--font,system-ui,sans-serif)}
.gd-explorer--fiche .gd-eset .gd-depot-b{padding:8px 10px; border:0; border-radius:9px; background:#f5d370; color:#020617; font:800 12.5px var(--font,system-ui,sans-serif); cursor:pointer}
.gd-explorer--fiche .gd-eset-n{margin:0; font-size:10.5px; line-height:1.45; color:#94a3b8}
/* Trois etats, trois couleurs — et jamais #64748b en texte (il echoue au contraste). */
.gd-explorer--fiche .gd-eset-etat{margin:0; padding:6px 9px; border-radius:8px; font:700 11.5px var(--font,system-ui,sans-serif); line-height:1.45}
.gd-explorer--fiche .gd-eset-etat--pret{background:rgba(34,197,94,.14); color:#86efac}
.gd-explorer--fiche .gd-eset-etat--perime{background:rgba(249,115,22,.16); color:#fcd34d}
.gd-explorer--fiche .gd-eset-etat--absent{background:rgba(239,68,68,.14); color:#fca5a5}

/* ── 13/09/2026 — Conseils (bureau) : la grammaire € (nv-bloc / tf-*) ── */
/* La priorité est la couleur (Miguël, 13/09) : information = bleu, recommandé = ambre,
   urgent = rouge, réglé = vert. Des jetons communs, pour les écrans, le PDF et le courriel. */
/* Les jetons --prio-* vivent à la racine (passe couleur du 13/09). */
.prio{display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:-1px; background:#c9d2de}
.prio--information{background:var(--prio-information)} .prio--recommande{background:var(--prio-recommande)} .prio--urgent{background:var(--prio-urgent)} .prio--regle{background:var(--prio-regle)}
.prio-pill{display:inline-block; padding:2px 8px; border-radius:999px; font:800 10.5px var(--font,system-ui,sans-serif); letter-spacing:.04em; text-transform:uppercase; background:#eef1f5; color:#4b5768}
.prio-pill.prio--information{background:var(--prio-information-fond); color:var(--prio-information)} .prio-pill.prio--recommande{background:var(--prio-recommande-fond); color:var(--prio-recommande)}
.prio-pill.prio--urgent{background:var(--prio-urgent-fond); color:var(--prio-urgent)} .prio-pill.prio--regle{background:var(--prio-regle-fond); color:var(--prio-regle)}

.nv-conseils{max-width:none; padding:12px 8px 40px}
.nv-conseils .nv-bloc.b-qui{border-color:#a9d6d6; border-top-width:4px} .nv-conseils .nv-bloc.b-ticket{border-color:#b9c9f5; border-top-width:4px} .nv-conseils .nv-bloc.b-deja{border-color:#c9d2de; border-top-width:4px}
.nv-conseils .b-qui .tf-tete{background:linear-gradient(180deg,#e3f3f3,#f2fafa)} .nv-conseils .b-ticket .tf-tete{background:linear-gradient(180deg,#e6edfd,#f3f6fe)} .nv-conseils .b-deja .tf-tete{background:linear-gradient(180deg,#e9edf3,#f4f6f9)}
.nv-conseils .cs-form{display:grid; gap:10px; padding:4px 0}
.nv-conseils .cs-grille{display:grid; grid-template-columns:2fr 2fr 1fr 1fr 1.4fr; gap:10px}
@media (max-width:1100px){.nv-conseils .cs-grille{grid-template-columns:1fr 1fr}}
/* 02/10/2026 (Miguel, capture annotee : « arreter les gaspillages de place ») — LE VIDE ENTRE
   L'ETIQUETTE ET SON CHAMP. L'ecart est regle a 4 px et il l'etait bien ; ce qui l'ouvrait, c'est
   l'etirement. Chaque champ est une grille posee dans une plus grande : la rangee prend la hauteur
   de sa plus haute colonne — celle du client, qui porte un nom ET un bouton — et les autres
   s'etirent pour l'egaler, en ecartant leurs deux lignes.
   `align-content:start` rend aux lignes leur hauteur naturelle : la place en trop tombe SOUS le
   champ, et les cinq champs se retrouvent alignes entre eux. */
.nv-conseils .cs-champ{display:grid; gap:4px; align-content:start}
.nv-conseils .cs-champ > span{font:700 11px var(--font,system-ui,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#4b5768}
.nv-conseils .cs-champ > span i{font-style:normal; text-transform:none; letter-spacing:0; font-weight:600; color:#7a8494}
/* 02/10/2026 (Miguel : « un ENORME gaspillage de place ») — PLUS DE HAUTEUR MINIMUM DE 200 px.
   Elle gagnait contre le nombre de lignes : la zone restait grande meme vide. C'est `rows`, pose
   par conseils.js a mesure qu'on ecrit, qui commande maintenant la hauteur. Le plancher qui reste
   vaut une ligne et des poussieres — de quoi voir ou l'on tape, pas un champ de neige. */
.nv-conseils .cs-zone{min-height:64px; line-height:1.5; font-size:13.5px}
.nv-conseils .cs-actions{display:flex; align-items:center; justify-content:space-between; gap:12px}
.nv-conseils .cs-table td{font-size:12.5px; padding:6px 8px}
.nv-conseils .cs-table td b{color:#06747D}
.nv-conseils .cs-table .prio{margin-right:4px}
.nv-conseils .cs-modele-fam{font-size:11px; font-weight:700; color:#7a8494}
.nv-conseils .cs-lien-reglages{font-size:12px}

/* Réglages › Conseils : la bibliothèque unique (étape A, 13/09) */
.nv-conseils-reglages .cs-compteurs{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 12px}
.nv-conseils-reglages .cs-compteur{display:grid; gap:0; min-width:96px; padding:8px 12px; border-radius:12px; background:#fff; border:1px solid #c9d2de; text-decoration:none; color:#1b2228}
.nv-conseils-reglages .cs-compteur b{font-size:20px; line-height:1.1} .nv-conseils-reglages .cs-compteur span{font-size:11px; font-weight:700; color:#4b5768}
.nv-conseils-reglages .cs-compteur--ok{border-color:#86efac; background:#f0fdf4} .nv-conseils-reglages .cs-compteur--ok b{color:var(--prio-regle)}
.nv-conseils-reglages .cs-compteur--relire{border-color:#fcd34d; background:#fffbeb} .nv-conseils-reglages .cs-compteur--relire b{color:var(--prio-recommande)}
.nv-conseils-reglages .cs-compteur--off b{color:#7a8494}
.nv-conseils-reglages .cs-general{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-left:auto; padding:8px 12px; border-radius:12px; background:#fff; border:1px solid #c9d2de; font-size:13px; font-weight:600}
.nv-conseils-reglages .cs-general input{width:64px; text-align:center}
.nv-conseils-reglages .cs-deux{display:grid; grid-template-columns:minmax(360px,5fr) minmax(0,7fr); gap:12px; align-items:start}
@media (max-width:1100px){.nv-conseils-reglages .cs-deux{grid-template-columns:1fr}}
.nv-conseils-reglages .cs-grille--edition{grid-template-columns:2fr 1fr}
.nv-conseils-reglages .cs-prios{display:flex; flex-wrap:wrap; gap:8px}
.nv-conseils-reglages .cs-prio-choix{position:relative; display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 30px; border-radius:999px; border:1.5px solid #c9d2de; background:#fff; font:800 12px var(--font,system-ui,sans-serif); cursor:pointer; color:#4b5768}
.nv-conseils-reglages .cs-prio-choix input{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; margin:0}
.nv-conseils-reglages .cs-prio-choix.prio--information{accent-color:var(--prio-information)} .nv-conseils-reglages .cs-prio-choix.prio--recommande{accent-color:var(--prio-recommande)} .nv-conseils-reglages .cs-prio-choix.prio--urgent{accent-color:var(--prio-urgent)}
.nv-conseils-reglages .cs-prio-choix.prio--information:has(input:checked){border-color:var(--prio-information); background:var(--prio-information-fond); color:var(--prio-information)}
.nv-conseils-reglages .cs-prio-choix.prio--recommande:has(input:checked){border-color:var(--prio-recommande); background:var(--prio-recommande-fond); color:var(--prio-recommande)}
.nv-conseils-reglages .cs-prio-choix.prio--urgent:has(input:checked){border-color:var(--prio-urgent); background:var(--prio-urgent-fond); color:var(--prio-urgent)}
.nv-conseils-reglages .cs-apercu{padding:10px 14px; border-radius:10px; background:#f6f8fa; border:1px dashed #c9d2de}
.nv-conseils-reglages .cs-apercu-t{font:800 10.5px var(--font,system-ui,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#7a8494; margin-bottom:6px}
.nv-conseils-reglages .cs-apercu-corps p{margin:0 0 8px; font-size:13px; line-height:1.5; color:#1b2228}
.nv-conseils-reglages .cs-actif{font-size:13px; font-weight:700; color:#1b2228; display:inline-flex; align-items:center; gap:6px}
.nv-conseils-reglages .cs-actions-d{display:flex; gap:8px; align-items:center}
.nv-conseils-reglages .cs-badge{display:inline-block; padding:1px 7px; border-radius:999px; font:800 10px var(--font,system-ui,sans-serif); letter-spacing:.04em; text-transform:uppercase; vertical-align:1px}
.nv-conseils-reglages .cs-badge--relire{background:var(--prio-recommande-fond); color:var(--prio-recommande)} .nv-conseils-reglages .cs-badge--off{background:#eef1f5; color:#4b5768}
.nv-conseils-reglages .cs-famille td{padding:8px 8px 4px; font:800 11px var(--font,system-ui,sans-serif); letter-spacing:.08em; text-transform:uppercase; color:#06747D; background:#f6f8fa; border-top:2px solid #d5e9e9}
.nv-conseils-reglages .cs-row--off td{color:#7a8494} .nv-conseils-reglages .cs-row--off td b{color:#7a8494}
.nv-conseils-reglages .cs-row--ouvert td{background:#e3f3f3}
.nv-conseils-reglages .cs-regle{display:inline-block; margin:1px 4px 1px 0; padding:1px 7px; border-radius:6px; background:#eef1f5; font-size:11px; font-weight:700; color:#4b5768}
.nv-conseils-reglages .cs-td-actions{text-align:right; white-space:nowrap}
.nv-conseils-reglages .cs-etat, .nv-conseils-reglages .cs-relier{display:inline-flex; gap:6px; align-items:center; margin:0}
.nv-conseils-reglages .cs-table--biblio td a{color:inherit; text-decoration:none} .nv-conseils-reglages .cs-table--biblio td a:hover b{text-decoration:underline}

/* Conseiller depuis l'alerte (étape B, 13/09) : sur la carte d'une machine, un lien par risque mesuré */
.cl-conseils{display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px 11px; border-top:1px solid #E8ECEA}
/* 17/09 — la dispense d'alerte sur la carte : pastilles bleues + la porte « Ne pas alerter… » */
.cl-disp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 12px 8px}
.cl-disp .cl-cv{cursor:help}
.cl-disp-btn{margin-left:auto;font:600 11.5px/1 var(--font,system-ui,sans-serif);color:var(--tx-dark-2,#5a6377);border:1px dashed #b9c3cc;border-radius:999px;padding:5px 10px;text-decoration:none;background:transparent}
.cl-disp-btn:hover{color:var(--accent,#06747D);border-color:var(--accent,#06747D)}
.cl-disp-lab{font:700 10.5px var(--font,system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-dark-2,#5a6377)}
.cl-disp-mesure{margin-left:0;border-style:solid;border-color:#e3c47f;background:#fffdf7;color:#8a5209;font-weight:700}
.cl-disp-mesure:hover{background:#fdf3e3;border-color:#c9a247;color:#6b4a00}
/* l'écran /supervision/dispense */
.dp-deux{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:900px){.dp-deux{grid-template-columns:1fr}}
.dp-mesures{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px;margin:6px 0 14px}
.dp-mesure{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1.5px solid var(--border-light,#e6e9f0);border-radius:10px;background:#fff;cursor:pointer;font:500 14px/1.35 var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e)}
.dp-mesure input{margin-top:3px}
.dp-mesure:has(input:checked){border-color:var(--tk-lire,#1d4ed8);background:var(--tk-lire-f,#eef3fd)}
.dp-portee{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.dp-portee label{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid var(--border-light,#e6e9f0);border-radius:999px;background:#fff;cursor:pointer;font:600 14px var(--font,system-ui,sans-serif)}
.dp-portee label:has(input:checked){border-color:var(--accent,#06747D);background:#e4f3f2}
.dp-ecrit{border-left:5px solid var(--or-2,#e8c76a);background:#fffdf7;border-radius:10px;padding:12px 14px;margin:0 0 14px}
.dp-ecrit p{margin:0 0 8px;font:500 13.5px/1.5 var(--font,system-ui,sans-serif);color:var(--tx-dark-2,#5a6377)}
.dp-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dp-liste li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 12px;border:1.5px solid var(--border-light,#e6e9f0);border-left:5px solid var(--tk-lire,#1d4ed8);border-radius:10px;background:#fff;font:500 13.5px/1.4 var(--font,system-ui,sans-serif)}
.dp-liste li.levee{border-left-color:#b9c3cc;color:var(--tx-dark-2,#5a6377);background:#fafbfc}
.dp-liste li b{font-weight:700}
.dp-liste li small{color:var(--tx-dark-2,#5a6377)}
.dp-liste form{margin-left:auto}
.dp-lever{border:1px solid rgba(11,122,110,.45);background:#fff;border-radius:999px;padding:4px 12px;font:600 12px var(--font,system-ui,sans-serif);color:var(--accent,#06747D);cursor:pointer}
.dp-etat{margin-bottom:18px}
.dp-ok{margin:0;font:700 15px var(--font,system-ui,sans-serif);color:#0e9b6c}
.dp-etat-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.dp-etat-l{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border-light,#e6e9f0);background:#fff;font:500 14px/1.4 var(--font,system-ui,sans-serif)}
.dp-etat-l.alerte{border-color:#ecd0a0;border-left:6px solid #d6902a;background:#fff8ee}
.dp-etat-l.fait{border-color:#c7d9f8;border-left:6px solid #1d4ed8;background:#eef3fd}
.dp-etat-l>b{font:800 15px var(--font,system-ui,sans-serif)}
.dp-etat-l small{color:var(--tx-dark-2,#5a6377);font-size:12px}
.dp-etendre{margin-top:8px}
.dp-btn-etendre{font-size:13px;padding:9px 14px}
.dp-changer{flex-basis:100%;margin-top:4px}
.dp-ecrit-l{display:inline-flex;align-items:center;gap:4px}
.dp-ecrit-l a{color:var(--accent,#06747D);font-weight:700;text-decoration:none}
.dp-ecrit-l a:hover{text-decoration:underline}
.dp-inline{display:inline;margin:0}
.dp-x{border:1px solid #b9c3cc;background:#fff;border-radius:999px;width:18px;height:18px;line-height:1;font:700 12px system-ui,sans-serif;color:#5a6377;cursor:pointer;padding:0}
.dp-x:hover{border-color:#e0483a;color:#e0483a}
.dp-changer summary{cursor:pointer;font:600 12px var(--font,system-ui,sans-serif);color:var(--accent,#06747D)}
.dp-changer-f{display:grid;gap:8px;margin-top:8px;padding:10px 12px;border:1px dashed #b9c3cc;border-radius:10px;background:#fafbfc}
.dp-changer-f label{display:grid;gap:4px;font:600 12px var(--font,system-ui,sans-serif);color:var(--tx-dark-2,#5a6377)}
.dp-flash{border-left:5px solid #0e9b6c;background:#e9f7ef;border-radius:10px;padding:10px 14px;margin:0 0 14px;font:600 14px var(--font,system-ui,sans-serif)}
.dp-erreur{border-left:5px solid #e0483a;background:#fde8e6;border-radius:10px;padding:10px 14px;margin:0 0 14px;font:600 14px var(--font,system-ui,sans-serif)}
.cl-cs{display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:4px 10px 4px 8px; border-radius:999px; border:1.5px solid #c9d2de; background:#fff; font:700 12px var(--font,system-ui,sans-serif); color:#1b2228; text-decoration:none}
.cl-cs > span:last-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cl-cs small{font-weight:600; color:#4b5768}
.cl-cs--information{border-color:#93c5fd; background:var(--prio-information-fond); color:var(--prio-information)} .cl-cs--information small{color:var(--prio-information)}
.cl-cs--recommande{border-color:#fcd34d; background:var(--prio-recommande-fond); color:var(--prio-recommande)} .cl-cs--recommande small{color:var(--prio-recommande)}
.cl-cs--urgent{border-color:#fca5a5; background:var(--prio-urgent-fond); color:var(--prio-urgent)} .cl-cs--urgent small{color:var(--prio-urgent)}
.cl-cs--fait{border-color:#86efac; background:var(--prio-regle-fond); color:var(--prio-regle); font-weight:600}
.cl-cs:hover{filter:brightness(.97); text-decoration:none}

/* La réponse du client (étape C, 13/09) : une page publique, une carte, une phrase */
body.cs-public{margin:0; min-height:100vh; display:grid; place-items:center; padding:24px 12px; box-sizing:border-box; background:#f4f6f8; font-family:var(--font,system-ui,sans-serif); color:#1b2228}
.cs-public-carte{width:100%; max-width:560px; padding:28px 30px 22px; border-radius:16px; background:#fff; border:1px solid #dbe2ec; border-top:6px solid #06747D; box-shadow:0 10px 30px rgba(6,116,125,.08)}
.cs-public-carte--info{border-top-color:var(--prio-information)} .cs-public-carte--ko{border-top-color:#7a8494}
.cs-public-marque{font:800 11px var(--font,system-ui,sans-serif); letter-spacing:.12em; text-transform:uppercase; color:#06747D; margin-bottom:10px}
.cs-public-carte h1{margin:0 0 12px; font-size:22px; line-height:1.25; color:#1b2228}
.cs-public-carte p{margin:0 0 10px; font-size:15px; line-height:1.55; color:#2b3440}
.cs-public-sujet{padding:10px 12px; border-radius:10px; background:#f6f8fa; font-size:13.5px}
.cs-public-pied{margin-top:18px; font-size:12px; color:#7a8494}

/* À conseiller (étape D, 13/09) : la file de travail, les urgents d'abord ; les filtres d'état des envois */
.nv-conseils .nv-bloc.b-conseiller{border-color:#fcd34d; border-top-width:4px} .nv-conseils .b-conseiller .tf-tete{background:linear-gradient(180deg,#fff3d6,#fffaf0)}
.nv-conseils .cs-table--ac .cs-ac-premier td{border-top:2px solid #e8dcc0}
.nv-conseils .cs-btn-conseiller{padding:4px 12px; font-weight:800}
.nv-conseils .cs-filtre{display:inline-block; margin:2px 2px 0 0; padding:1px 8px; border-radius:999px; border:1px solid #c9d2de; background:#fff; font-size:11px; font-weight:700; color:#4b5768; text-decoration:none}
.nv-conseils .cs-filtre--on{border-color:#06747D; background:#e3f3f3; color:#06747D}

/* ── Réglages › NAS (12/09) : les appareils à gauche, le guide DSM à droite,
   les réglages et les filtres dessous. Les champs à copier sont des boutons :
   un clic, « copié », et l'on colle dans DSM. Même grammaire nv/tf. ── */
.nv-nas .rn-deux{display:grid; grid-template-columns:minmax(360px,5fr) minmax(420px,7fr); gap:18px; align-items:start}
@media (max-width:1100px){.nv-nas .rn-deux{grid-template-columns:1fr}}
.nv-nas .rn-gauche, .nv-nas .rn-droite{display:flex; flex-direction:column; gap:18px; min-width:0}
.nv-nas .tf-volet{padding-top:0; overflow:hidden}
.nv-nas .tf-tete{margin:0 -18px 2px; padding:12px 18px 10px; border-bottom:1px solid transparent}
.nv-nas .b-qui   .tf-tete{background:linear-gradient(180deg,#e3f3f3,#f2fafa); border-bottom-color:#a9d6d6}
.nv-nas .b-deja  .tf-tete{background:linear-gradient(180deg,#e9edf3,#f4f6f9); border-bottom-color:#c9d2de}
.nv-nas .b-inter .tf-tete{background:linear-gradient(180deg,#fbf0d2,#fff9e9); border-bottom-color:#e9d18a}
.nv-nas .b-qui   .nv-lbl{color:#06747D}
.nv-nas .b-deja  .nv-lbl{color:#4b5768}
.nv-nas .b-inter .nv-lbl{color:#8a6a15}
.nv-nas .nv-bloc.b-qui  {border-color:#a9d6d6; border-top-width:4px}
.nv-nas .nv-bloc.b-deja {border-color:#c9d2de; border-top-width:4px}
.nv-nas .nv-bloc.b-inter{border-color:#e9d18a; border-top-width:4px}

/* Le formulaire d'un appareil et les réglages. */
.nv-nas .rn-form{display:flex; flex-direction:column; gap:12px}
.nv-nas .rn-grille{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px}
.nv-nas .rn-champ{display:flex; flex-direction:column; gap:4px; min-width:0}
.nv-nas .rn-champ > span{font:700 11px var(--font,system-ui,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#4b5768}
.nv-nas .rn-champ > span .nv-fac{display:block; letter-spacing:0; text-transform:none; font-weight:600; font-size:11.5px}
.nv-nas .rn-large{grid-column:1 / -1}
.nv-nas .rn-notes{min-height:64px}
.nv-nas .rn-champ.ko .nv-champ{border-color:#ef4444; background:#fff5f5}
.nv-nas .rn-champ .nv-err{margin:0}
.nv-nas .rn-alerte{display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #e9d18a; border-radius:10px; background:#fff8e6; font-size:13px; color:#1a1f2e}
.nv-nas .rn-alerte input{width:16px; height:16px; accent-color:#8a6a15}

/* La liste des appareils. */
.nv-nas .rn-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:640px; overflow:auto}
.nv-nas .rn-nas{display:flex; align-items:center; gap:8px; border:1px solid #dbe2ec; border-radius:10px; background:#fbfcfe; padding:0 8px 0 0}
.nv-nas .rn-nas.on{border-color:#06747D; background:#f0f9f9; box-shadow:inset 3px 0 0 #06747D}
.nv-nas .rn-nas.tf-cachee{display:none}
.nv-nas .rn-nas-lien{flex:1 1 auto; display:flex; align-items:center; gap:10px; padding:8px 10px; text-decoration:none; color:#1a1f2e; min-width:0}
.nv-nas .rn-nas-txt{flex:1 1 auto; min-width:0; font-size:13px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nv-nas .rn-nas-txt small{display:block; font-size:11.5px; color:#5a6377; font-family:ui-monospace,Consolas,monospace}
.nv-nas .rn-dot{flex:0 0 10px; width:10px; height:10px; border-radius:50%; background:#8b95a5}
.nv-nas .s-ok .rn-dot{background:#15803d}
.nv-nas .s-warn .rn-dot{background:#d97706}
.nv-nas .s-crit .rn-dot{background:#b91c1c}
.nv-nas .s-off .rn-dot{background:#8b95a5}
.nv-nas .s-pause .rn-dot{background:#fff; border:2px solid #8b95a5}
.nv-nas .s-pause .rn-nas-txt{color:#5a6377}
.nv-nas .rn-badge{flex:0 0 auto; min-width:22px; padding:1px 7px; border-radius:999px; text-align:center; font:700 11px var(--font,system-ui,sans-serif)}
.nv-nas .rn-badge.crit{background:#fee2e2; color:#b91c1c}
.nv-nas .rn-badge.warn{background:#fdf1cf; color:#8a5a00}
.nv-nas .rn-gestes{display:inline-flex; gap:4px; flex:0 0 auto}
.nv-nas .rn-gestes .tf-etat{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-size:13px}
.nv-nas .rn-gestes .rn-retirer:hover{border-color:#b91c1c; color:#b91c1c; background:#fff5f5}

/* Le guide DSM. */
.nv-nas .rn-choix{display:flex; flex-direction:column; gap:4px; flex:0 0 280px}
.nv-nas .rn-choix > span{font:700 11px var(--font,system-ui,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#8a6a15}
.nv-nas .rn-etapes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.nv-nas .rn-etapes > li{display:flex; gap:12px; padding:12px 14px; border:1px solid #e9d18a; border-radius:12px; background:#fffcf3}
.nv-nas .rn-etapes > li > div{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px}
.nv-nas .rn-etapes > li > div > b{font-size:14px; color:#1a1f2e}
.nv-nas .rn-etapes p{margin:0; font-size:13px; color:#3a4453}
.nv-nas .rn-n{flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:#8a6a15; color:#fff; font:800 13px/28px var(--font,system-ui,sans-serif); text-align:center}
.nv-nas .rn-dl{display:grid; grid-template-columns:minmax(140px,1fr) minmax(0,2fr); gap:6px 12px; margin:4px 0 0; align-items:center}
.nv-nas .rn-dl dt{font:700 11.5px var(--font,system-ui,sans-serif); letter-spacing:.04em; text-transform:uppercase; color:#4b5768}
.nv-nas .rn-dl dt .nv-fac{display:block; letter-spacing:0; text-transform:none; font-weight:600}
.nv-nas .rn-dl dd{margin:0; min-width:0}
.nv-nas .rn-copie{position:relative; display:inline-flex; align-items:center; max-width:100%; padding:6px 12px; border:1px solid #a9d6d6; border-radius:8px; background:#fff; cursor:copy; text-align:left; transition:background .15s, border-color .15s}
.nv-nas .rn-copie code{font:600 13px/1.4 ui-monospace,Consolas,monospace; color:#06747D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.nv-nas .rn-copie:hover{background:#e7f4f4; border-color:#06747D}
.nv-nas .rn-copie-ok{position:absolute; right:8px; top:50%; transform:translateY(-50%); padding:1px 8px; border-radius:999px; background:#15803d; color:#fff; font:700 11px var(--font,system-ui,sans-serif); opacity:0; transition:opacity .15s; pointer-events:none}
.nv-nas .rn-copie.ok{border-color:#15803d; background:#f0fdf4}
.nv-nas .rn-copie.ok .rn-copie-ok{opacity:1}
.nv-nas .rn-copie.rn-url code{font-size:12.5px}
.nv-nas .rn-jeton{display:flex; gap:6px; flex-wrap:wrap}
.nv-nas .rn-copie.rn-cle{border-color:#b91c1c}
.nv-nas .rn-copie.rn-cle code{color:#b91c1c}
.nv-nas .rn-copie.rn-secret{flex:1 1 200px; border-color:#b91c1c; background:#fff5f5}
.nv-nas .rn-copie.rn-secret code{color:#7f1d1d; font-size:11.5px}
.nv-nas .rn-fixe{display:inline-block; padding:5px 10px; border-radius:8px; background:#eef1f5; color:#1a1f2e; font:600 12.5px ui-monospace,Consolas,monospace}
.nv-nas .rn-root{color:#b91c1c}
/* 14/09 — le volet QNAP du guide NAS : replié, même grammaire que les étapes DSM. */
.rn-qnap{margin-top:14px;border:1.5px solid #cfdbe1;border-radius:10px;background:#f7fafb;padding:0 12px 6px}
.rn-qnap>summary{cursor:pointer;padding:10px 0;font:600 13px var(--font,system-ui,sans-serif);color:#12262b}
.rn-qnap[open]>summary{border-bottom:1px solid #e2e9ec;margin-bottom:8px}
.nv-nas .rn-script{margin:4px 0 0; padding:12px 14px; border-radius:10px; background:#1a1f2e; color:#e2e8f0; font:12px/1.5 ui-monospace,Consolas,monospace; max-height:220px; overflow:auto; white-space:pre}
.nv-nas .rn-copie-script{min-height:34px}
.nv-nas .rn-tampon{position:fixed; left:-9999px; top:0}

/* Les filtres. */
.nv-nas .rn-filtres{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.nv-nas .rn-filtre{display:inline-flex; align-items:center; gap:6px; margin:0; padding:4px 6px 4px 12px; border:1px solid #c9d2de; border-radius:999px; background:#fff; font:600 12.5px var(--font,system-ui,sans-serif); color:#1a1f2e}
.nv-nas .rn-filtre-x{border:0; background:transparent; color:#5a6377; cursor:pointer; font-size:13px; padding:0 4px; border-radius:50%}
.nv-nas .rn-filtre-x:hover{color:#b91c1c; background:#fee2e2}
.nv-nas .rn-filtre-add{display:inline-flex; gap:6px; margin:0}
.nv-nas .rn-filtre-add .nv-champ{width:220px; min-height:34px}

/* ── € › Résultat (12/09) : trois regards, le point mort, année par année, la
   rentabilité par client. Même grammaire nv/tf que Tarifs et Charges. ── */
.nv-resultat{max-width:none; padding:12px 8px 40px}
.nv-resultat .rs-volet{padding-top:0; overflow:hidden}
.nv-resultat .tf-tete{margin:0 -18px 2px; padding:12px 18px 10px; border-bottom:1px solid transparent}
.nv-resultat .b-qui    .tf-tete{background:linear-gradient(180deg,#e3f3f3,#f2fafa); border-bottom-color:#a9d6d6}
.nv-resultat .b-ticket .tf-tete{background:linear-gradient(180deg,#e6edfd,#f3f6fe); border-bottom-color:#b9c9f5}
.nv-resultat .b-inter  .tf-tete{background:linear-gradient(180deg,#fbf0d2,#fff9e9); border-bottom-color:#e9d18a}
.nv-resultat .b-deja   .tf-tete{background:linear-gradient(180deg,#e9edf3,#f4f6f9); border-bottom-color:#c9d2de}
.nv-resultat .b-qui .nv-lbl{color:#06747D} .nv-resultat .b-ticket .nv-lbl{color:#3a63c0} .nv-resultat .b-inter .nv-lbl{color:#8a6a15} .nv-resultat .b-deja .nv-lbl{color:#4b5768}
.nv-resultat .nv-bloc.b-qui{border-color:#a9d6d6; border-top-width:4px} .nv-resultat .nv-bloc.b-ticket{border-color:#b9c9f5; border-top-width:4px}
.nv-resultat .nv-bloc.b-inter{border-color:#e9d18a; border-top-width:4px} .nv-resultat .nv-bloc.b-deja{border-color:#c9d2de; border-top-width:4px}
.nv-resultat .pos{color:#15803d} .nv-resultat .neg{color:#b91c1c}

/* ① Les trois regards */
.nv-resultat .rs-regards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:1000px){.nv-resultat .rs-regards{grid-template-columns:1fr}}
.nv-resultat .rs-regard{border:1px solid #dbe2ec; border-radius:12px; padding:12px 14px; background:#fbfcfe; display:flex; flex-direction:column; gap:8px}
.nv-resultat .rs-regard.r-actuel{border-top:4px solid #06747D} .nv-resultat .rs-regard.r-fin{border-top:4px solid #c9a247} .nv-resultat .rs-regard.r-n1{border-top:4px solid #1d4ed8}
.nv-resultat .rs-regard-t{font:800 13px var(--font,system-ui,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#1a1f2e}
.nv-resultat .rs-regard-t .nv-fac{display:block; letter-spacing:0; text-transform:none; font-size:12px}
.nv-resultat .rs-regard dl{margin:0; display:grid; grid-template-columns:1fr auto; gap:4px 12px; font-size:13px}
.nv-resultat .rs-regard dt{color:#4b5768} .nv-resultat .rs-regard dt small{color:#5a6377; font-size:11px}
.nv-resultat .rs-regard dd{margin:0; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; font-size:var(--t-vente)}
.nv-resultat .rs-regard dd.rs-marge{font-size:var(--t-marge); color:#06747D}
.nv-resultat .rs-ecart{display:flex; justify-content:space-between; align-items:baseline; margin-top:2px; padding:8px 12px; border-radius:10px; background:#eef1f5; color:#4b5768}
.nv-resultat .rs-ecart span{font:700 11px var(--font,system-ui,sans-serif); letter-spacing:.08em; text-transform:uppercase}
.nv-resultat .rs-ecart b{font-size:22px; font-variant-numeric:tabular-nums}
.nv-resultat .rs-ecart.pos{background:#dcfce7; color:#15803d} .nv-resultat .rs-ecart.neg{background:#fee2e2; color:#b91c1c}
/* 24/09/2026 (Miguël : « un tableau récap mensuel ») — LE MOIS PAR MOIS. Une table de lecture :
   chiffres alignés, mois en cours marqué, mois à venir en retrait. */
.nv-resultat .rs-mens{width:100%; font-size:13.5px}
.nv-resultat .rs-mens th, .nv-resultat .rs-mens td{padding:6px 8px; white-space:nowrap}
.nv-resultat .rs-mens td.n, .nv-resultat .rs-mens th.n{text-align:right; font-variant-numeric:tabular-nums}
.nv-resultat .rs-mens tbody tr:nth-child(odd){background:#fbfcfe}
.nv-resultat .rs-mens .rs-mens-ma{font-weight:700; color:#06747D}
.nv-resultat .rs-mens .rs-mens-ici td{background:#e4f5f2; box-shadow:inset 3px 0 0 #0BAE9F}
.nv-resultat .rs-mens .rs-mens-venir td{color:#5a6377; font-style:italic}
.nv-resultat .rs-mens tfoot th{border-top:2px solid #b9c9f5; background:#f3f6fe; font-weight:800}

/* 24/09/2026 (Miguël) — LE GRAPHIQUE DU COMPTABLE. Deux barres par année, à la même échelle : ce que
   l'entreprise crée (valeur ajoutée) et ce qu'elle verse aux gens (salaires et charges). Sous l'année,
   le résultat net en milliers, vert ou rouge : le seul chiffre qui dit si l'année a payé. */
.nv-resultat .rs-compta-g{margin-top:14px}
.nv-resultat .rs-compta-t{margin:0 0 8px; font:800 13px var(--font,system-ui,sans-serif); color:#1a1f2e}
.nv-resultat .rs-cg-cadre{display:flex; gap:6px; align-items:flex-end; padding:12px 12px 8px;
  border:1px solid #dbe2ec; border-radius:12px; background:#fff; overflow-x:auto}
.nv-resultat .rs-cg-an{flex:1 1 0; min-width:38px; display:flex; flex-direction:column; align-items:center; gap:3px}
.nv-resultat .rs-cg-barres{display:flex; align-items:flex-end; gap:2px; height:96px; width:100%; justify-content:center}
/* Les hauteurs de cette page passent par une variable (--h), posée par les classes .h-N ; une barre
   qui se contente d'un « display:block » reste plate. Même mécanique que le graphique du dessus. */
.nv-resultat .rs-cg-b{width:44%; max-width:16px; height:100%; display:flex; align-items:flex-end;
  background:#f1f4f8; border-radius:3px 3px 0 0; position:relative; overflow:hidden}
.nv-resultat .rs-cg-b i{position:absolute; left:0; right:0; bottom:0; height:var(--h,0); border-radius:3px 3px 0 0}
.nv-resultat .rs-cg-b.b-va i{background:linear-gradient(180deg,#0BAE9F,#06747D)}
.nv-resultat .rs-cg-b.b-sal i{background:linear-gradient(180deg,#e8a0c8,#be185d)}
.nv-resultat .rs-cg-rn{font:800 10.5px var(--font,system-ui,sans-serif); font-variant-numeric:tabular-nums; color:#5a6377}
.nv-resultat .rs-cg-rn.pos{color:#15803d} .nv-resultat .rs-cg-rn.neg{color:#b91c1c}
.nv-resultat .rs-cg-lbl{font:600 10.5px var(--font,system-ui,sans-serif); color:#5a6377}
.nv-resultat .rs-legende i.b-va{background:#06747D} .nv-resultat .rs-legende i.b-sal{background:#be185d}
.nv-resultat .rs-cg-aide{font-style:italic}
.nv-resultat .rs-projet{display:inline-block; margin:2px 4px 2px 0; padding:2px 8px; border-radius:999px; background:#eef1f5; font-size:12px}
.nv-resultat .rs-projet small{color:#5a6377}

/* ② Le point mort */
.nv-resultat .rs-pm{display:flex; flex-direction:column; gap:10px}
.nv-resultat .rs-pm-v{font:700 16px var(--font,system-ui,sans-serif); padding:10px 14px; border-radius:10px}
.nv-resultat .rs-pm-v.ok{background:#dcfce7; color:#15803d} .nv-resultat .rs-pm-v.ko{background:#fee2e2; color:#b91c1c}
.nv-resultat .rs-pm-mois{display:grid; grid-template-columns:repeat(12,1fr); gap:6px; padding:10px 12px 6px; border:1px solid #e9d18a; border-radius:12px; background:#fff}
.nv-resultat .rs-pm-m{display:flex; flex-direction:column; align-items:center; gap:4px}
.nv-resultat .rs-pm-m i{display:block; width:70%; max-width:26px; height:90px; border-radius:4px 4px 0 0; background:#f1f4f8; position:relative; overflow:hidden}
.nv-resultat .rs-pm-m i::after{content:""; position:absolute; left:0; right:0; bottom:0; height:var(--h,0); background:linear-gradient(180deg,#e8c76a,#c9a247)}
.nv-resultat .rs-pm-m.ok i::after{background:linear-gradient(180deg,#22c55e,#15803d)}
.nv-resultat .rs-pm-m span{font:700 11px var(--font,system-ui,sans-serif); color:#5a6377; text-transform:uppercase}
.nv-resultat .h-0{--h:0} .nv-resultat .h-5{--h:5%} .nv-resultat .h-10{--h:10%} .nv-resultat .h-15{--h:15%} .nv-resultat .h-20{--h:20%} .nv-resultat .h-25{--h:25%}
.nv-resultat .h-30{--h:30%} .nv-resultat .h-35{--h:35%} .nv-resultat .h-40{--h:40%} .nv-resultat .h-45{--h:45%} .nv-resultat .h-50{--h:50%} .nv-resultat .h-55{--h:55%}
.nv-resultat .h-60{--h:60%} .nv-resultat .h-65{--h:65%} .nv-resultat .h-70{--h:70%} .nv-resultat .h-75{--h:75%} .nv-resultat .h-80{--h:80%} .nv-resultat .h-85{--h:85%}
.nv-resultat .h-90{--h:90%} .nv-resultat .h-95{--h:95%} .nv-resultat .h-100{--h:100%}

/* ③ Année par année */
.nv-resultat .rs-graphe{position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:6px; padding:12px 12px 32px; border:1px solid #dbe2ec; border-radius:12px; background:#fff}
.nv-resultat .rs-an{display:flex; flex-direction:column; align-items:center; gap:5px}
.nv-resultat .rs-an-barres{display:flex; align-items:flex-end; gap:3px; height:120px; width:100%; justify-content:center}
.nv-resultat .rs-b{width:40%; max-width:18px; height:100%; display:flex; align-items:flex-end; background:#f1f4f8; border-radius:3px 3px 0 0; position:relative; overflow:hidden}
.nv-resultat .rs-b i{position:absolute; left:0; right:0; bottom:0; height:var(--h,0); border-radius:3px 3px 0 0}
.nv-resultat .rs-b.b-marge i{background:linear-gradient(180deg,#0BAE9F,#06747D)}
.nv-resultat .rs-b.b-res i{background:linear-gradient(180deg,#22c55e,#15803d)}
.nv-resultat .rs-b.b-res.neg i{background:linear-gradient(180deg,#f87171,#b91c1c)}
.nv-resultat .rs-an.prov .rs-b i{opacity:.55}
.nv-resultat .rs-an span{font:700 11px var(--font,system-ui,sans-serif); color:#5a6377}
.nv-resultat .rs-legende{position:absolute; left:14px; bottom:8px; display:flex; gap:14px; font:600 11.5px var(--font,system-ui,sans-serif); color:#5a6377}
.nv-resultat .rs-legende i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px}
.nv-resultat .rs-legende i.b-marge{background:#06747D} .nv-resultat .rs-legende i.b-res{background:#15803d} .nv-resultat .rs-legende i.prov{background:#06747D; opacity:.45}
.nv-resultat .rs-scroll{border:1px solid #b9c9f5; border-radius:10px; background:#fff; overflow:hidden; overflow-x:auto}
.nv-resultat .b-deja .rs-scroll{border-color:#c9d2de}
.nv-resultat .rs-table thead th, .nv-resultat .rs-renta thead th{white-space:nowrap}
.nv-resultat .rs-table thead tr:first-child th{background:#3a63c0; color:#fff; border-bottom-color:#3a63c0}
.nv-resultat .rs-renta thead tr:first-child th{background:#4b5768; color:#fff; border-bottom-color:#4b5768}
.nv-resultat .rs-table thead .tf-total th{background:#eaeffd; border-bottom-color:#b9c9f5}
.nv-resultat .rs-renta thead .tf-total th{background:#eef1f5; border-bottom-color:#c9d2de}
.nv-resultat .rs-table thead .tf-total.rs-moy th, .nv-resultat .rs-renta thead .tf-total.rs-moy th{font-weight:700; color:#4b5768; font-size:14px}
.nv-resultat .rs-table td, .nv-resultat .rs-renta td{white-space:nowrap; font-variant-numeric:tabular-nums; padding:5px 8px}
.nv-resultat .rs-table td small{color:#5a6377; font-size:11px; margin-left:4px}
.nv-resultat .rs-marge-c{font-weight:700; color:#06747D; font-size:var(--t-marge)}
.nv-resultat .rs-res{font-weight:800; font-size:var(--t-marge)}
.nv-resultat .rs-compta{color:#4b5768; font-size:var(--t-vente)}
.nv-resultat .rs-compta.vide{color:#8b95a5}
.nv-resultat .rs-prov td{background:#f7f9fd; font-style:italic}
.nv-resultat .rs-courante td{background:#e7f4f4; font-style:normal}

/* ④ La rentabilité par client */
.nv-resultat .rs-cout{display:flex; align-items:flex-end; gap:8px; flex:0 0 auto}
.nv-resultat .rs-cout label{display:flex; flex-direction:column; gap:4px; font:700 11px var(--font,system-ui,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#4b5768}
.nv-resultat .rs-cout .nv-champ{width:110px; text-align:right}
.nv-resultat .rs-renta .rs-cout{font-weight:700; color:#c2410c; font-size:var(--t-vente)}
.nv-resultat .rs-petit{font-size:var(--t-achat); color:#4b5768}
.nv-resultat .rs-petit small{color:#5a6377; margin-left:4px}
.nv-resultat .rs-client.neg td{background:#fff5f5}
.nv-resultat .rs-client.tf-cachee{display:none}
.nv-resultat .ct-barre-outils{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.nv-resultat .ct-seg{display:inline-flex; border:1px solid #c9d2de; border-radius:999px; overflow:hidden; background:#fff}
.nv-resultat .ct-btn{border:0; background:transparent; padding:6px 13px; font:700 12.5px var(--font,system-ui,sans-serif); color:#4b5768; cursor:pointer}
.nv-resultat .ct-btn + .ct-btn{border-left:1px solid #c9d2de}
.nv-resultat .ct-btn b{margin-left:4px; padding:0 6px; border-radius:999px; background:#eef1f5}
.nv-resultat .ct-btn.on{background:#4b5768; color:#fff} .nv-resultat .ct-btn.on b{background:rgba(255,255,255,.22); color:#fff}
.nv-resultat .ct-prospect{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:#fdf1cf; color:#8a5a00; font-size:10.5px; vertical-align:1px}

/* ── 13/09/2026 — LA PASSE COULEUR (Miguël : « toujours aussi peu colorisé ; refaire le tour de
   tout ce qui a été fait en V2 et en déduire une amélioration du CSS global pour un site propre »).
   Ce que le tour a montré : la grammaire des pages € (Tarifs, « parfait cette page ») porte la
   couleur — en-têtes de blocs teintés, en-têtes de tableaux pleins, lignes qui s'allument — mais
   chaque page la redéclarait pour elle seule, et les pages écrites vite (Conseils, NAS, Résultat…)
   n'en avaient qu'une partie. Ici, la règle devient GÉNÉRALE : tout bloc .nv-bloc d'une nature
   (b-qui, b-ticket, b-inter, b-deja, b-conseiller) reçoit son en-tête, son tableau, ses lignes.
   Et chaque MODULE a sa couleur de famille (le corps porte data-module) : la même que les tuiles
   de l'accueil du téléphone (11/09) — terrain turquoise, clients violet, veille bleu, chiffres
   vert, € or, bureau ardoise. Elle signe le haut de la page et les blocs sans nature. ── */

/* Les couleurs de famille, et la priorité des conseils (bleu · ambre · rouge · vert) */
:root{
  --fam-terrain:#0BAE9F; --fam-terrain-tx:#066b62; --fam-terrain-fond:#d6efeb;
  --fam-client:#7c5cf0;  --fam-client-tx:#6d3fc4;  --fam-client-fond:#ece5fd;
  --fam-veille:#3b82f6;  --fam-veille-tx:#2059b8;  --fam-veille-fond:#e2edfd;
  --fam-pilot:#0e9b6c;   --fam-pilot-tx:#0a6b4a;   --fam-pilot-fond:#d9f0e5;
  --fam-or:#c9a247;      --fam-or-tx:#8a6a1c;      --fam-or-fond:#f7edd2;
  --fam-bureau:#4b6785;  --fam-bureau-tx:#33506e;  --fam-bureau-fond:#e4ebf2;
  --mod:var(--fam-terrain); --mod-tx:var(--fam-terrain-tx); --mod-fond:var(--fam-terrain-fond);
  --prio-information:#1d4ed8; --prio-information-fond:#dbeafe; --prio-recommande:#b45309; --prio-recommande-fond:#fef3c7;
  --prio-urgent:#b91c1c; --prio-urgent-fond:#fee2e2; --prio-regle:#15803d; --prio-regle-fond:#dcfce7;
}
body[data-module="accueil"],body[data-module="tickets"],body[data-module="interventions"],body[data-module="facturation"],body[data-module="cm"]{--mod:var(--fam-terrain); --mod-tx:var(--fam-terrain-tx); --mod-fond:var(--fam-terrain-fond)}
body[data-module="clients"],body[data-module="pensebete"]{--mod:var(--fam-client); --mod-tx:var(--fam-client-tx); --mod-fond:var(--fam-client-fond)}
body[data-module="supervision"],body[data-module="conseils"],body[data-module="conseil"]{--mod:var(--fam-veille); --mod-tx:var(--fam-veille-tx); --mod-fond:var(--fam-veille-fond)}
body[data-module="pilotage"]{--mod:var(--fam-pilot); --mod-tx:var(--fam-pilot-tx); --mod-fond:var(--fam-pilot-fond)}
body[data-module="euros"],body[data-module="projets"],body[data-module="kb"],body[data-module="idees"]{--mod:var(--fam-or); --mod-tx:var(--fam-or-tx); --mod-fond:var(--fam-or-fond)}
body[data-module="reglages"],body[data-module="documents"],body[data-module="emails"],body[data-module="agenda"],body[data-module="prepa"],body[data-module="qualite"],body[data-module="radar"],body[data-module="moncompte"]{--mod:var(--fam-bureau); --mod-tx:var(--fam-bureau-tx); --mod-fond:var(--fam-bureau-fond)}

/* La signature du module : l'onglet actif de la barre 2 souligné de la couleur de la famille. Le liseré de 3 px sous le
   bandeau est parti le 21/09 (Miguël : « on l'enlève partout ») — le bloc de tête et la page se touchent sans trait. */
header.shell{box-shadow:var(--sh-bar)}

/* Les blocs sans nature prennent la couleur de la famille ; les natures gardent la leur */
.nv-bloc .nv-lbl{color:var(--mod-tx,var(--accent))}
.nv-bloc.b-qui,.nv-bloc.b-deja,.nv-bloc.b-ticket,.nv-bloc.b-inter{border-top-width:4px}
.nv-bloc.b-qui   .nv-lbl{color:#06747D} .nv-bloc.b-ticket .nv-lbl{color:#3a63c0} .nv-bloc.b-inter .nv-lbl{color:#8a6a15} .nv-bloc.b-deja .nv-lbl{color:#4b5768}

/* Les en-têtes de blocs, teintés selon la nature — la règle de Tarifs pour toutes les pages */
.nv .b-qui    .tf-tete{background:linear-gradient(180deg,#e3f3f3,#f2fafa); border-bottom-color:#a9d6d6}
.nv .b-ticket .tf-tete{background:linear-gradient(180deg,#e6edfd,#f3f6fe); border-bottom-color:#b9c9f5}
.nv .b-inter  .tf-tete{background:linear-gradient(180deg,#fbf0d2,#fff9e9); border-bottom-color:#e9d18a}
.nv .b-deja   .tf-tete{background:linear-gradient(180deg,#e9edf3,#f4f6f9); border-bottom-color:#c9d2de}
.nv .nv-bloc:not(.b-qui):not(.b-ticket):not(.b-inter):not(.b-deja):not(.b-conseiller) .tf-tete{background:linear-gradient(180deg,var(--mod-fond,#e3f3f3),#fff); border-bottom-color:color-mix(in srgb,var(--mod,#06747D) 35%,#fff)}
.nv .nv-bloc.b-qui{border-color:#a9d6d6} .nv .nv-bloc.b-ticket{border-color:#b9c9f5} .nv .nv-bloc.b-inter{border-color:#e9d18a} .nv .nv-bloc.b-deja{border-color:#c9d2de}

/* Les en-têtes de tableaux : pleins, blancs sur la couleur de la nature ; les totaux en lavé ; la ligne survolée s'allume */
.nv .b-qui    .tf-table thead th{background:#06747D; color:#fff; border-bottom-color:#06747D}
.nv .b-ticket .tf-table thead th{background:#3a63c0; color:#fff; border-bottom-color:#3a63c0}
.nv .b-inter  .tf-table thead th{background:#a07d1f; color:#fff; border-bottom-color:#a07d1f}
.nv .b-deja   .tf-table thead th{background:#4b5768; color:#fff; border-bottom-color:#4b5768}
.nv .b-conseiller .tf-table thead th{background:#b45309; color:#fff; border-bottom-color:#b45309}
.nv .nv-bloc:not(.b-qui):not(.b-ticket):not(.b-inter):not(.b-deja):not(.b-conseiller) .tf-table thead th{background:var(--mod,#06747D); color:#fff; border-bottom-color:var(--mod,#06747D)}
.nv .b-qui    .tf-table thead .tf-total th{background:#e7f4f4; color:var(--tx-dark,#1a1f2e); border-bottom-color:#a9d6d6}
.nv .b-ticket .tf-table thead .tf-total th{background:#eaeffd; color:var(--tx-dark,#1a1f2e); border-bottom-color:#b9c9f5}
.nv .b-inter  .tf-table thead .tf-total th{background:#fbf3dc; color:var(--tx-dark,#1a1f2e); border-bottom-color:#e9d18a}
.nv .b-deja   .tf-table thead .tf-total th{background:#eef1f5; color:var(--tx-dark,#1a1f2e); border-bottom-color:#c9d2de}
.nv .b-qui    .tf-table tbody .tf-row:hover td{background:#f0f9f9}
.nv .b-ticket .tf-table tbody .tf-row:hover td{background:#f1f4fe}
.nv .b-inter  .tf-table tbody .tf-row:hover td{background:#fdf8ea}
.nv .b-deja   .tf-table tbody .tf-row:hover td{background:#f3f5f8}
.nv .b-conseiller .tf-table tbody .tf-row:hover td{background:#fff6e5}
/* Un en-tête plein garde ses liens et pastilles lisibles */
.nv .tf-table thead th .prio{box-shadow:0 0 0 2px rgba(255,255,255,.7)}

/* Les tuiles et blocs de l'ancienne grammaire (Pilotage, Supervision, Accueil) : la couleur par défaut est celle du module.
   :where() ne pèse rien : toute classe d'état (critique, attention…) garde le dernier mot. */
:where(.blk){--c:var(--mod,var(--accent))}

/* Les libellés de section et les rubans d'aide : la couleur de la famille, pas un gris */
.nv .nv-bandeau-info{border-color:color-mix(in srgb,var(--mod,#5e8df5) 45%,#fff); background:color-mix(in srgb,var(--mod-fond,#e2edfd) 70%,#fff); color:var(--mod-tx,#1d4ed8)}
.nv .nv-bandeau-info b{color:var(--mod-tx,#1d4ed8)}
.rp-fait{border-left:4px solid var(--prio-regle)}

/* ── 13/09/2026 — Réglages › Utilisateurs (ut-*) : sur la grammaire des Conseils (cs-*) ── */
.nv-utilisateurs .cs-compteur--ko{border-color:#fca5a5; background:#fff1f2} .nv-utilisateurs .cs-compteur--ko b{color:var(--prio-urgent)}
.nv-utilisateurs .cs-deux--bas{margin-top:0}
.nv-utilisateurs .ut-table td{vertical-align:top}
.nv-utilisateurs .ut-role--direction{background:#f7edd2; color:#8a6a1c} .nv-utilisateurs .ut-role--admin{background:#ece5fd; color:#6d3fc4}
.nv-utilisateurs .ut-role--tech{background:#d6efeb; color:#066b62} .nv-utilisateurs .ut-role--compta{background:#e2edfd; color:#2059b8} .nv-utilisateurs .ut-role--lecteur{background:#eef1f5; color:#4b5768}
.nv-utilisateurs .ut-acces-bloc{margin-top:6px; padding:12px 14px; border-radius:10px; background:#f6f8fa; border:1px dashed #c9d2de; display:grid; gap:8px}
.nv-utilisateurs .ut-acces-bloc .cs-actions-d{flex-wrap:wrap}
.nv-utilisateurs .ut-reinit{margin:0}
.nv-utilisateurs .cs-prio-choix.ut-acces:has(input:checked){border-color:#06747D; background:#e3f3f3; color:#06747D}
.nv-utilisateurs .ut-journal{max-height:420px; overflow:auto}
/* ── 28/09/2026 — LA COULEUR D'UNE PERSONNE (Miguël : « avec des couleurs par utilisateur
   de l'intranet ») ─────────────────────────────────────────────────────────────────────
   Elle la suit partout : la barre de son agenda quand un collègue l'affiche, sa pastille dans
   « Voir aussi », et demain partout où l'on montre qui fait quoi. Avant, la teinte venait du
   RANG dans une liste : ajouter quelqu'un repeignait tout le monde.
   La page pose --qui sur l'élément ; ces règles n'écrivent aucune couleur elles-mêmes. */
/* LA MARQUE D'UNE PERSONNE — tickets, interventions, partout (28/09, Miguël : « mets la
   couleur aussi sur les tickets et les interventions »). Une pastille, puis le nom.
   La couleur est posée sur l'élément par assets/js/couleurs.js, jamais écrite dans la
   page : la production refuse le style en ligne, et elle le refuse sans rien dire.
   LE NOM NE CHANGE PAS DE COULEUR — et c'est voulu. Ces marques se posent sur des fonds
   qui ne se ressemblent pas : la carte d'un client dans les interventions est SOMBRE, la
   vignette d'un ticket est d'un rose pâle qui dépend de son état, la liste des comptes est
   blanche. Une teinte de texte qui va sur l'une serait illisible sur l'autre, et le refus
   ne se verrait pas. Le nom garde donc la couleur que son écran lui donne déjà — elle a
   été éprouvée là où elle est. Seule la PASTILLE porte la couleur : c'est un dessin, pas
   un texte, et un rond plein se voit sur clair comme sur sombre.
   L'anneau blanc très pâle la détache d'un fond sombre sans la salir sur un fond clair. */
.pers{display:inline-flex; align-items:baseline; gap:5px; font-weight:600; white-space:nowrap}
.pers::before{content:""; flex:0 0 auto; align-self:center; width:9px; height:9px;
  border-radius:50%; background:var(--qui,#8fa3ab); box-shadow:0 0 0 1px rgba(255,255,255,.35)}
/* Sur une vignette, la ligne du bas est en 9 px : la pastille se met à l'échelle,
   sinon elle mange la moitié de la ligne. */
.dage .pers, .dsub .pers{gap:3px; font-weight:600}
.dage .pers::before, .dsub .pers::before{width:6px; height:6px}
.nv-utilisateurs .ut-pastille{display:inline-block; width:10px; height:10px; border-radius:3px;
  margin-right:7px; vertical-align:baseline; background:var(--qui,#8fa3ab)}
.nv-utilisateurs .ut-couleur{border-left:5px solid var(--qui,#8fa3ab)}
/* L'aperçu : exactement ce que donnera une barre d'agenda, pour qu'on choisisse en voyant.
   La première ligne est la teinte de secours, pour un navigateur qui ne saurait pas mélanger
   les couleurs : il la garde et ignore les deux suivantes. */
.nv-utilisateurs .ut-essai{padding:8px 11px; border-radius:8px; background:#eef2f5; color:#46566a;
  border-left:4px solid var(--qui,#8fa3ab); font:700 13px var(--font,system-ui,sans-serif)}
.nv-utilisateurs .ut-essai{background:color-mix(in srgb, var(--qui) 16%, #ffffff)}
.nv-utilisateurs .ut-essai{color:color-mix(in srgb, var(--qui) 55%, #1a2430)}

/* ── RÉGLAGES › AGENDAS (14/09/2026, 7K-CAH-INT-010) — hérite de la grille NAS ─────────── */
.nv-agenda .rn-table{width:100%; border-collapse:collapse; font-size:13px}
.nv-agenda .rn-table th{text-align:left; font:700 11px var(--font,system-ui,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#4b5768; padding:6px 8px; border-bottom:2px solid #a9d6d6}
.nv-agenda .rn-table td{padding:7px 8px; border-bottom:1px solid #e6ecef; vertical-align:middle}
.nv-agenda .rn-off td{color:#6b7785}
.nv-agenda .rn-ok{color:#0a6f67}
.nv-agenda .rn-ko{color:#b42318}
.nv-agenda .rn-case{flex-direction:row; align-items:center; gap:8px; padding-top:22px}
.nv-agenda .rn-case > span{font:500 13px var(--font,system-ui,sans-serif); text-transform:none; letter-spacing:0; color:inherit}
.nv-agenda .rn-inline{display:inline; margin:0}
.nv-agenda .rn-essai{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 0}
.nv-agenda .rn-journal .rn-quand{white-space:nowrap; color:#4b5768; width:1%}
.nv-agenda .rn-filtre-add .nv-champ{width:auto; min-width:260px}

/* 17/09 — la porte vers le ticket en plein écran, dans la colonne « Ce que je viens de faire » */
.tk-plein{margin:0 0 10px}
.tk-plein-lien{display:inline-block;border:0;border-radius:12px;padding:9px 16px;font:800 14px var(--font,system-ui,sans-serif);color:#0b1f22;text-decoration:none;background:linear-gradient(100deg,var(--or-1,#f5d370),var(--or-2,#e8c76a) 35%,var(--accent-bright,#0BAE9F));box-shadow:0 4px 12px rgba(11,174,159,.22)}
.tk-plein-lien:hover{filter:brightness(1.04)}

/* 17/09 — créer un client depuis la liste ; modifier les coordonnées sur la Synthèse */
.cl-nouveau{display:inline-flex;align-items:center;border-radius:12px;padding:9px 16px;font:800 14px var(--font,system-ui,sans-serif);color:#0b1f22;text-decoration:none;white-space:nowrap;background:linear-gradient(100deg,var(--or-1,#f5d370),var(--or-2,#e8c76a) 35%,var(--accent-bright,#0BAE9F));box-shadow:0 4px 12px rgba(11,174,159,.22)}
.cl-nouveau:hover{filter:brightness(1.04)}
.cf-edit{margin:0 14px 6px;border-radius:12px;}
.cf-edit summary{cursor:pointer;display:flex;align-items:center;gap:8px;font:700 13px var(--font,system-ui,sans-serif);list-style:none}
.cf-edit summary::-webkit-details-marker{display:none}
.cf-edit summary svg{width:14px;height:14px}
.cf-edit-f{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.cf-ef{display:grid;gap:4px;font:700 11px var(--font,system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;}
.cf-ef--l{grid-column:1 / -1}
.cf-ef input,.cf-ef textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--border-light,#e6e9f0);border-radius:10px;padding:9px 11px;font:500 14px var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e);text-transform:none;letter-spacing:0;}
.cf-ef input:focus,.cf-ef textarea:focus{outline:none;}
.cf-ef-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.cf-ef-plus{font:600 12.5px var(--font,system-ui,sans-serif);}
@media (max-width:600px){.cf-edit-f{grid-template-columns:1fr}}
/* 17/09 — le bouton d'enregistrement des coordonnées (le style du bandeau sombre le rendait blanc sur blanc) */
.cf-ef-go{border:0;border-radius:12px;padding:10px 18px;font:800 14px var(--font,system-ui,sans-serif);color:#0b1f22;cursor:pointer;background:linear-gradient(100deg,var(--or-1,#f5d370),var(--or-2,#e8c76a) 35%,var(--accent-bright,#0BAE9F));box-shadow:0 4px 12px rgba(11,174,159,.22)}
.cf-ef-go:hover{filter:brightness(1.04)}
/* 17/09 (Miguël : « très blanc sur fond blanc, ça manque de colorisation ») — la zone de modification
   prend la couleur « ce qui se lit et s'écrit » (tk-lire), champs teintés, libellés bleus, bouton or. */
.cf-edit{border:1.5px solid #c7d9f8;border-left:6px solid #1d4ed8;background:#eef3fd;padding:10px 14px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.cf-edit summary{color:#1d4ed8;font-size:13.5px}
.cf-edit[open] summary{margin-bottom:12px;padding-bottom:8px;border-bottom:1px dashed #c7d9f8}
.cf-ef{color:#1d4ed8}
.cf-ef input,.cf-ef textarea{background:#f8fbff;border-color:#b9cdf3}
.cf-ef input:focus,.cf-ef textarea:focus{background:#fff;border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.16)}
.cf-ef-plus{color:#1d4ed8;text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   17/09/2026 — LA FICHE DU TICKET, LA LISTE DES CUMULS ET LA FICHE CLIENT SUR LA PALETTE
   (recopié au propre le soir même : « un résultat beau et des pages bien écrites, sans patch »).
   Tout lit la palette tk-* et les variables du composant « zone » (--z, --z-b, --z-f). Une
   couleur par thème, jamais une teinte écrite ici. Ordre : la fiche du ticket (en-tête, résumé,
   chenille, suivi des échanges, cumul) · la liste des cumuls · la fiche client (synthèse, écriture).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── La fiche du ticket : l'en-tête est turquoise (la maison), le résumé vert (ce qui est fait) ─ */
.tk-tete{padding:12px 18px 0;border-radius:16px;box-shadow:0 4px 14px rgba(20,30,50,.08);
  background:linear-gradient(180deg,var(--tk-faire-f,#c9e9e4),#e4f3f2 70%);border:2px solid var(--tk-faire-b,#0BAE9F);border-left:8px solid var(--tk-faire,#055a52)}
.tk-tete h2{font-size:24px}
.tk-tete .num{font-size:13px;color:var(--tk-faire,#055a52)}
.tk-tete .meta{font-size:13.5px;color:var(--tx-dark,#1a1f2e)}
.tk-tete > .tk-resume{margin:10px -18px 0;border-top:2px solid var(--tk-fait-b,#2e8b57);background:var(--tk-fait-f,#d6eedd)}
.tk-tete > .tk-resume > summary{padding:9px 18px}
.tk-tete > .tk-resume .tk-resume-d{padding-left:18px;padding-right:18px}
.tk-resume-t{font-size:12px;color:var(--tk-fait,#166534)}
.tk-resume-l{font-size:13.5px;color:var(--tx-dark,#1a1f2e)}
.tk-resume-l .rien{color:var(--tx-dark,#1a1f2e)}
.tk-etats > *{font-weight:800}
.tk-tot-depl,.tk-tot-depl b{color:var(--tk-prevoir,#9a3f06)}   /* déplacements et km : ce qu'on prévoit */
.tk-tot-dist,.tk-tot-dist b{color:var(--tk-lire,#1e40af)}      /* prises de contrôle à distance */

/* La chenille est violette (le temps) ; ses cases sont blanches, chacune bordée de sa couleur. */
.tk-chenille{padding:12px 14px 10px;border-radius:16px;box-shadow:0 4px 14px rgba(20,30,50,.08);
  background:var(--tk-temps-f,#e9e0fb);border:2px solid var(--tk-temps-b,#7c3aed);border-left:8px solid var(--tk-temps,#4c1d95)}
.ch-case{padding:6px 10px;border-width:2px;border-radius:12px;background:#fff}
.ch-case.t-depart{border-color:#8fa3ab}
.ch-case.t-vert{border-color:var(--tk-fait-b,#2e8b57)}
.ch-case.t-bleu{border-color:var(--tk-lire-b,#2f6fd6)}
.ch-case.t-orange{background:var(--tk-prevoir-f,#fde1c4);border-color:var(--tk-prevoir-b,#ea7f1b)}
.ch-case.t-vert .ch-min{color:var(--tk-fait,#166534)}
.ch-case.t-bleu .ch-min{color:var(--tk-lire,#1e40af)}
.ch-case .ch-q{color:var(--tx-dark,#1a1f2e)}
.ch-case.encours{box-shadow:0 0 0 3px rgba(124,58,237,.35)}
.ch-trait{background:var(--tk-temps,#4c1d95)}
.ch-trait::after{border-left-color:var(--tk-temps,#4c1d95)}
.ch-trait.a-venir{background-image:linear-gradient(90deg,var(--tk-lire-b,#2f6fd6) 55%,transparent 0)}
.ch-trait.a-venir::after{border-left-color:var(--tk-lire-b,#2f6fd6)}
.ch-derniere{padding:9px 14px 10px;border-width:2px;border-radius:12px;background:#fff}
.ch-derniere.t-bleu{border-color:var(--tk-lire-b,#2f6fd6);border-left:8px solid var(--tk-lire,#1e40af)}
.ch-derniere.t-vert{border-color:var(--tk-fait-b,#2e8b57);border-left:8px solid var(--tk-fait,#166534)}
.ch-derniere.t-orange{border-color:var(--tk-prevoir-b,#ea7f1b);border-left:8px solid var(--tk-prevoir,#9a3f06)}
.ch-derniere.t-bleu .ch-d-etat{color:var(--tk-lire,#1e40af)}
.ch-d-etat{font-size:11px}
.ch-d-titre{font-size:14px}
.ch-d-quand,.ch-d-qui,.ch-d-texte{color:var(--tx-dark,#1a1f2e)}

/* Le suivi des échanges est bleu (ce qu'on lit) ; le cumul de la période est or (l'argent). */
.tk-convo{border-radius:16px;box-shadow:0 4px 14px rgba(20,30,50,.08);
  background:var(--tk-lire-f,#d9e5fb);border:2px solid var(--tk-lire-b,#2f6fd6);border-left:8px solid var(--tk-lire,#1e40af)}
.tk-convo > summary{padding:9px 16px;font-size:12px;color:var(--tk-lire,#1e40af)}
.tk-convo-d{background:#fff}
.tk-cumul{border-radius:16px;box-shadow:0 4px 14px rgba(20,30,50,.08);
  background:var(--tk-argent-f,#fbeec4);border:2px solid var(--tk-argent-b,#d4a72c);border-left:8px solid var(--tk-argent,#7a4b06)}
.tk-cumul-t{color:var(--tk-argent,#7a4b06)}
.tk-cumul-tab tfoot td{background:var(--tk-argent-f,#fbeec4)}
.tk-cumul-tab tr.sous td{padding-top:3px;padding-bottom:4px;border-bottom:1px dotted #cfd6e0;background:#faf8ff;font-size:12px;font-style:italic;color:var(--tx-dark-2,#3d4352)}
.tk-cumul-tab tr.sous td.d{padding-left:22px}

/* ── La liste des cumuls : les cartes de dessous, une couleur chacune, pour compter d'un coup d'œil ─ */
.sup-page .dev.cum-bar .dcarte.c1{background:var(--tk-faire-f,#c9e9e4);border-color:var(--tk-faire-b,#0BAE9F)}
.sup-page .dev.cum-bar .dcarte.c2{background:var(--tk-temps-f,#e9e0fb);border-color:var(--tk-temps-b,#7c3aed)}
.sup-page .dev.cum-bar .dcarte.c3{background:var(--tk-argent-f,#fbeec4);border-color:var(--tk-argent-b,#d4a72c)}
.sup-page .dev.cum-bar .dcarte.c4{background:var(--tk-fait-f,#d6eedd);border-color:var(--tk-fait-b,#2e8b57)}
.sup-page .dev.cum-bar .dcarte.c5{background:var(--tk-lire-f,#d9e5fb);border-color:var(--tk-lire-b,#2f6fd6)}
.sup-page .dev.cum-bar .dcarte.c6{background:var(--tk-qui-f,#fbe0ec);border-color:var(--tk-qui-b,#db2777)}

/* La carte du dessus reste opaque : un voile de sa couleur, peint après les cartes de dessous et sous
   ses textes (::after en z-index négatif), sinon les cartes colorées transparaissaient. Le voile a
   exactement la taille de la vignette (18/09 : même hauteur que les cartes de dessous) et redessine
   sa bordure et sa barre d'état, qu'il recouvre. */
.sup-page .dev.cum-bar.pile::after{content:"";position:absolute;inset:-1.5px -1.5px -1.5px -4px;z-index:-1;border-radius:inherit;
  background:#e4f3f0;border:1.5px solid #a8d8d1;border-left:4px solid #0a6f67;pointer-events:none}
.sup-page .dev.cum-bar.pile.warn::after{border-left-color:#b45309}
.sup-page .dev.cum-bar.pile.err::after{border-left-color:#b91c1c}
.sup-page .dev.cum-bar.pile:hover::after{border-top-color:#ffffff;border-right-color:#ffffff;border-bottom-color:#ffffff}

/* ── La fiche client, synthèse : la case « cumul chaque mois » est une case de zone, violette (le temps) ─ */
.cf-ef-case{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer;
  text-transform:none;letter-spacing:0;font:700 14px var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e);background:#fff;border:2px solid var(--tk-temps-b,#7c3aed)}
.cf-ef-case input{width:20px;height:20px;margin:0;accent-color:var(--tk-temps,#4c1d95)}
.cf-ef-case em{font-style:normal;font-weight:500;color:var(--tx-dark-2,#3d4352)}

/* ── La fiche client en écriture : chaque bloc est une zone, un thème chacun ─────────────
   qui c'est = rose · où c'est = turquoise · comment on le joint = bleu · ce qu'il faut savoir =
   orange · ce que le client paie = or. La page va jusqu'au bord ; les cases sont des pastilles. */
.nv.nv-fiche{max-width:none;margin:0;padding:14px 0 40px;gap:14px}
.nv.nv-fiche .nv-bloc{--z:var(--tk-faire,#055a52);--z-b:var(--tk-faire-b,#0BAE9F);--z-f:var(--tk-faire-f,#c9e9e4);
  padding:14px 18px 18px;border-radius:16px;box-shadow:0 4px 14px rgba(20,30,50,.08);
  background:var(--z-f,#c9e9e4);border:2px solid var(--z-b,#0BAE9F);border-left:8px solid var(--z,#055a52)}
.nv.nv-fiche .nv-bloc.b-qui{--z:var(--tk-qui,#9d174d);--z-b:var(--tk-qui-b,#db2777);--z-f:var(--tk-qui-f,#fbe0ec)}
.nv.nv-fiche .nv-bloc.b-ticket{--z:var(--tk-faire,#055a52);--z-b:var(--tk-faire-b,#0BAE9F);--z-f:var(--tk-faire-f,#c9e9e4)}
.nv.nv-fiche .nv-bloc.b-inter{--z:var(--tk-lire,#1e40af);--z-b:var(--tk-lire-b,#2f6fd6);--z-f:var(--tk-lire-f,#d9e5fb)}
.nv.nv-fiche .nv-bloc.b-deja{--z:var(--tk-prevoir,#9a3f06);--z-b:var(--tk-prevoir-b,#ea7f1b);--z-f:var(--tk-prevoir-f,#fde1c4)}
.nv.nv-fiche .nv-bloc.b-deja ~ .nv-bloc.b-inter{--z:var(--tk-argent,#7a4b06);--z-b:var(--tk-argent-b,#d4a72c);--z-f:var(--tk-argent-f,#fbeec4)}
.nv.nv-fiche .nv-bloc .nv-lbl{font-size:13px;color:var(--z,#055a52)}
.nv.nv-fiche .nv-sous{font-weight:700;color:var(--tx-dark,#1a1f2e)}
.nv.nv-fiche .nv-fac,.nv.nv-fiche .nv-aide,.nv.nv-fiche .nv-case-f i{color:var(--tx-dark-2,#3d4352)}
.nv.nv-fiche .nv-champ{min-height:42px;border:2px solid var(--z-b,#0BAE9F);border-radius:10px;font-size:14.5px}
.nv.nv-fiche .nv-champ:focus{border-color:var(--z,#055a52);box-shadow:0 0 0 3px rgba(11,174,159,.18)}
.nv.nv-fiche .nv-cases-f{flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:6px}
.nv.nv-fiche .nv-case-f{align-items:center;padding:8px 12px;border-radius:12px;background:#fff;border:2px solid var(--z-b,#0BAE9F);font-size:13.5px}
.nv.nv-fiche .nv-case-f input{width:20px;height:20px;margin:0;accent-color:var(--z,#055a52)}
.nv.nv-fiche .nv-case-f:has(input:checked){background:var(--z,#055a52);color:#fff}
.nv.nv-fiche .nv-case-f:has(input:checked) i{color:#fff}
.nv.nv-fiche .nv-valider{min-height:48px;border:0;border-radius:14px;font-size:16px;color:#0b1f22;
  background:linear-gradient(100deg,var(--or-1,#f5d370),var(--or-2,#e8c76a) 35%,var(--accent-bright,#0BAE9F));box-shadow:0 6px 18px rgba(11,174,159,.25)}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   L'HARMONIE — LES COMPOSANTS PARTAGÉS SUR LA PALETTE (17/09/2026, Miguël : « trop fade… et pareil
   PARTOUT ; que ce soit dans le CSS et qu'on n'en parle plus »). Cette couche est la dernière de la
   feuille : elle donne aux briques communes de toutes les pages — blocs, libellés, champs, boutons,
   têtes de page, tableaux, cartes de fiche, tuiles de chiffres — les couleurs de la maison. Une page
   n'a rien à faire pour en profiter ; elle nomme au plus son thème (b-qui, f-services, k-re…).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Les blocs de saisie et de lecture (.nv-bloc) : une zone, un thème ──────────────────── */
.nv-bloc{--z:var(--tk-faire,#055a52);--z-b:var(--tk-faire-b,#0BAE9F);--z-f:var(--tk-faire-f,#c9e9e4);
  background:var(--z-f,#c9e9e4);border:2px solid var(--z-b,#0BAE9F);border-top:2px solid var(--z-b,#0BAE9F);border-left:8px solid var(--z,#055a52);
  border-radius:16px;box-shadow:0 4px 14px rgba(20,30,50,.08)}
.nv-bloc.b-qui{--z:var(--tk-qui,#9d174d);--z-b:var(--tk-qui-b,#db2777);--z-f:var(--tk-qui-f,#fbe0ec);border-top-color:var(--z-b,#0BAE9F)}
.nv-bloc.b-ticket{--z:var(--tk-faire,#055a52);--z-b:var(--tk-faire-b,#0BAE9F);--z-f:var(--tk-faire-f,#c9e9e4);border-top-color:var(--z-b,#0BAE9F)}
.nv-bloc.b-inter{--z:var(--tk-lire,#1e40af);--z-b:var(--tk-lire-b,#2f6fd6);--z-f:var(--tk-lire-f,#d9e5fb);border-top-color:var(--z-b,#0BAE9F)}
.nv-bloc.b-deja{--z:var(--tk-prevoir,#9a3f06);--z-b:var(--tk-prevoir-b,#ea7f1b);--z-f:var(--tk-prevoir-f,#fde1c4);border-top-color:var(--z-b,#0BAE9F)}
.nv-bloc.b-fait{--z:var(--tk-fait,#166534);--z-b:var(--tk-fait-b,#2e8b57);--z-f:var(--tk-fait-f,#d6eedd)}
.nv-bloc.b-temps,.nv-bloc.b-quand{--z:var(--tk-temps,#4c1d95);--z-b:var(--tk-temps-b,#7c3aed);--z-f:var(--tk-temps-f,#e9e0fb)}
.nv-bloc.b-fact,.nv-bloc.b-argent{--z:var(--tk-argent,#7a4b06);--z-b:var(--tk-argent-b,#d4a72c);--z-f:var(--tk-argent-f,#fbeec4)}
.nv-bloc.b-comment{--z:var(--tk-prevoir,#9a3f06);--z-b:var(--tk-prevoir-b,#ea7f1b);--z-f:var(--tk-prevoir-f,#fde1c4)}
.nv-bloc.b-note{--z:var(--tk-cadre,#6b5a3c);--z-b:var(--tk-cadre-b,#c8b48c);--z-f:var(--tk-cadre-f,#f7f2e8)}
.nv-bloc .nv-lbl,.nv-bloc.b-qui .nv-lbl,.nv-bloc.b-ticket .nv-lbl,.nv-bloc.b-inter .nv-lbl,.nv-bloc.b-deja .nv-lbl{color:var(--z,#055a52);font-size:13px}
.nv-sous{color:var(--tx-dark,#1a1f2e);font-weight:700}
.nv-fac,.nv-aide,.nv-aide.vide{color:var(--tx-dark-2,#3d4352)}
.nv-bloc .nv-champ{border:2px solid var(--z-b,#0BAE9F);border-radius:10px;background:#fff;color:var(--tx-dark,#1a1f2e)}
.nv-bloc .nv-champ:focus{border-color:var(--z,#055a52);box-shadow:0 0 0 3px rgba(11,174,159,.18)}
.nv-bloc .nv-case-f{background:#fff;border:2px solid var(--z-b,#0BAE9F);border-radius:12px;padding:8px 12px;align-items:center}
.nv-bloc .nv-case-f input{width:20px;height:20px;margin:0;accent-color:var(--z,#055a52)}
.nv-bloc .nv-case-f:has(input:checked){background:var(--z,#055a52);color:#fff}
.nv-bloc .nv-case-f:has(input:checked) i{color:#fff}

/* ── Les boutons : le geste principal en or → turquoise, le geste discret bordé ─────────── */
.nv-valider,.nv-valider.nv-or{border:0;border-radius:14px;color:#0b1f22;font-weight:800;
  background:linear-gradient(100deg,var(--or-1,#f5d370),var(--or-2,#e8c76a) 35%,var(--accent-bright,#0BAE9F));box-shadow:0 6px 18px rgba(11,174,159,.25)}
.nv-valider:hover{filter:brightness(1.04)}
.nv-btn-ghost{border:2px solid var(--tk-faire-b,#0BAE9F);color:var(--tk-faire,#055a52);background:#fff;border-radius:12px;font-weight:700}
.nv-btn-ghost:hover{background:var(--tk-faire-f,#c9e9e4)}

/* ── Les têtes de page (.tf-tete) : un bandeau turquoise, pas un paragraphe gris ────────── */
.nv .tf-tete{margin:0 0 10px;padding:8px 18px;border-radius:16px;box-shadow:0 4px 14px rgba(20,30,50,.08);
  background:var(--tk-faire-f,#c9e9e4);border:2px solid var(--tk-faire-b,#0BAE9F);border-left:8px solid var(--tk-faire,#055a52)}
.nv .tf-tete .nv-lbl{color:var(--tk-faire,#055a52)}
.nv .tf-tete .nv-aide{color:var(--tx-dark,#1a1f2e)}

/* ── Les tableaux (.tf-table) : tête turquoise, familles colorées, totaux sable ─────────── */
.nv .tf-table{border:2px solid var(--tk-faire-b,#0BAE9F);border-radius:14px;overflow:hidden}
.nv .tf-table thead th{background:var(--tk-faire,#055a52);color:#fff;border-bottom:0;letter-spacing:.06em}
.nv .tf-table thead th a{color:#fff}
.nv .tf-table thead .tf-total th{background:var(--tk-cadre-f,#f7f2e8);color:var(--tx-dark,#1a1f2e);border-bottom:2px solid var(--tk-cadre-b,#c8b48c)}
.nv .tf-table thead .tf-total .tf-total-l,.nv .tf-total-l{color:var(--tx-dark,#1a1f2e)}
.nv .tf-famille td{background:var(--tk-faire-f,#c9e9e4);border-top:2px solid var(--tk-faire-b,#0BAE9F);border-bottom:1px solid var(--tk-faire-b,#0BAE9F)}
.nv .tf-famille .tf-fam-l{color:var(--tk-faire,#055a52);font-size:13px}
.nv .tf-famille td small{color:var(--tx-dark-2,#3d4352)}
.nv .tf-famille.f-cm td{background:var(--tk-fait-f,#d6eedd);border-color:var(--tk-fait-b,#2e8b57)}
.nv .tf-famille.f-cm .tf-fam-l{color:var(--tk-fait,#166534)}
.nv .tf-famille.f-services td{background:var(--tk-argent-f,#fbeec4);border-color:var(--tk-argent-b,#d4a72c)}
.nv .tf-famille.f-services .tf-fam-l{color:var(--tk-argent,#7a4b06)}
.nv .tf-famille.f-microsoft td,.nv .tf-famille.f-eset td,.nv .tf-famille.f-altaro td,.nv .tf-famille.f-mib td,.nv .tf-famille.f-c2 td{background:var(--tk-lire-f,#d9e5fb);border-color:var(--tk-lire-b,#2f6fd6)}
.nv .tf-famille.f-microsoft .tf-fam-l,.nv .tf-famille.f-eset .tf-fam-l,.nv .tf-famille.f-altaro .tf-fam-l,.nv .tf-famille.f-mib .tf-fam-l,.nv .tf-famille.f-c2 .tf-fam-l{color:var(--tk-lire,#1e40af)}
.nv .tf-row:hover td{background:#fbfaf5}
.nv .tf-cell{border:1.5px solid #d6dde8;border-radius:8px}
.nv .tf-cell:focus{border-color:var(--tk-faire-b,#0BAE9F);box-shadow:0 0 0 3px rgba(11,174,159,.18)}
/* 17/09 (Miguël : « en réel c'est trop fin, trop petit, trop pâle ») — les paires mois / année : un cadre
   bleu franc de 3 px autour des deux lignes, fond bleu clair, le nom en gras, un souffle après. */
.nv .tf-row.tf-paire td{background:var(--tk-lire-f,#d9e5fb);padding-top:6px;padding-bottom:6px}
.nv .tf-row.tf-paire td:first-child{border-left:4px solid var(--tk-lire,#1e40af)}
.nv .tf-row.tf-paire td:last-child{border-right:4px solid var(--tk-lire,#1e40af)}
.nv .tf-row.tf-paire-a td{border-top:3px solid var(--tk-lire,#1e40af);border-bottom:1px dashed var(--tk-lire-b,#2f6fd6)}
.nv .tf-row.tf-paire-b td{border-bottom:3px solid var(--tk-lire,#1e40af)}
.nv .tf-row.tf-paire-b + .tf-row td,.nv .tf-row.tf-paire-b + .tf-famille td{padding-top:12px}
.nv .tf-row.tf-paire .tf-cell{border-color:var(--tk-lire-b,#2f6fd6);font-weight:700}
.nv .tf-row.tf-paire-a .tf-bascule{color:var(--tk-lire,#1e40af);font-weight:800;font-size:12.5px}

/* ── Les cartes de la fiche client : un thème par carte ─────────────────────────────────── */
.cf-card{--z:var(--tk-faire,#055a52);--z-b:var(--tk-faire-b,#0BAE9F);--z-f:var(--tk-faire-f,#c9e9e4);border:2px solid var(--z-b,#0BAE9F);border-radius:16px;box-shadow:0 4px 14px rgba(20,30,50,.08)}
.cf-card--coord{--z:var(--tk-qui,#9d174d);--z-b:var(--tk-qui-b,#db2777);--z-f:var(--tk-qui-f,#fbe0ec)}
.cf-card--prod{--z:var(--tk-argent,#7a4b06);--z-b:var(--tk-argent-b,#d4a72c);--z-f:var(--tk-argent-f,#fbeec4)}
.cf-card--indisp,.cf-card--conges{--z:var(--tk-temps,#4c1d95);--z-b:var(--tk-temps-b,#7c3aed);--z-f:var(--tk-temps-f,#e9e0fb)}
.cf-card--tickets{--z:var(--tk-prevoir,#9a3f06);--z-b:var(--tk-prevoir-b,#ea7f1b);--z-f:var(--tk-prevoir-f,#fde1c4)}
.cf-card--superv{--z:var(--tk-lire,#1e40af);--z-b:var(--tk-lire-b,#2f6fd6);--z-f:var(--tk-lire-f,#d9e5fb)}
.cf-card--remarq{--z:var(--tk-cadre,#6b5a3c);--z-b:var(--tk-cadre-b,#c8b48c);--z-f:var(--tk-cadre-f,#f7f2e8)}
.cf-card-h{background:var(--z-f,#c9e9e4);color:var(--z,#055a52);border-bottom:2px solid var(--z-b,#0BAE9F);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:12px;backdrop-filter:none}
.cf-card-h svg{color:var(--z,#055a52)}

/* ── Les tuiles de chiffres (.ch-kpi, Charges et Résultat) : un thème chacune ───────────── */
.nv-charges .ch-kpi{--z:var(--tk-cadre,#6b5a3c);--z-b:var(--tk-cadre-b,#c8b48c);--z-f:var(--tk-cadre-f,#f7f2e8);background:var(--z-f,#c9e9e4);border:2px solid var(--z-b,#0BAE9F);border-left:8px solid var(--z,#055a52);border-radius:14px}
.nv-charges .ch-kpi.k-ca{--z:var(--tk-faire,#055a52);--z-b:var(--tk-faire-b,#0BAE9F);--z-f:var(--tk-faire-f,#c9e9e4)}
.nv-charges .ch-kpi.k-ch{--z:var(--tk-prevoir,#9a3f06);--z-b:var(--tk-prevoir-b,#ea7f1b);--z-f:var(--tk-prevoir-f,#fde1c4)}
.nv-charges .ch-kpi.k-re{--z:var(--tk-fait,#166534);--z-b:var(--tk-fait-b,#2e8b57);--z-f:var(--tk-fait-f,#d6eedd)}
.nv-charges .ch-kpi.k-fin{--z:var(--tk-temps,#4c1d95);--z-b:var(--tk-temps-b,#7c3aed);--z-f:var(--tk-temps-f,#e9e0fb)}
.nv-charges .ch-kpi.k-sa{--z:var(--tk-qui,#9d174d);--z-b:var(--tk-qui-b,#db2777);--z-f:var(--tk-qui-f,#fbe0ec)}
.nv-charges .ch-kpi.k-ma{--z:var(--tk-argent,#7a4b06);--z-b:var(--tk-argent-b,#d4a72c);--z-f:var(--tk-argent-f,#fbeec4)}
.nv-charges .ch-kpi-l{color:var(--z,#055a52)}
.nv-charges .ch-kpi-v{color:var(--tx-dark,#1a1f2e)}
/* ── LE GRAND ÉCRAN (17/09, Miguël : « en réel c'est trop fin, trop petit, trop pâle ») ─────────────
   Sur son écran de 1 900 px et plus, la page s'étire et tout paraît menu. Au-delà de 1 700 px, la page
   entière grandit d'un cran (traits, textes, cases), d'un cran de plus au-delà de 2 100 px. Rien ne
   change en dessous : la vue compacte reste celle de 380 à 1 400 px. */
/* Miguël préfère le rendu de la fenêtre de 1 450 px : sur 1 900 px, c'est un agrandissement de 1,3. */
/* 18/09 (Miguël : « certaines pages sont grossières ») — un cran plus bas : 15 %, puis 30 % au-delà de 2 200 px. */
/* 21/09 (Miguël : « règle les quatre d'un coup ») — ce qui est collant DANS la page (bandeau de fiche, en-têtes de
   grille, barre de la supervision, bandeau des étapes) calcule son accroche sous le bloc de tête en pixels agrandis :
   86 × 1,15 = 99 → 13 px de jour. La variable --zoom-page suit le zoom ; chaque accroche s'y divise. */
@media (min-width:1700px){main.page{zoom:1.15;--zoom-page:1.15}}
@media (min-width:2200px){main.page{zoom:1.3;--zoom-page:1.3}}
/* 18/09 (Miguël : « obligé de dézoomer en dessous de 80 % ») — le flux du ticket a été dessiné grand ;
   il ne prend pas le zoom du grand écran. */
@media (min-width:1700px){main.page:has(.tp){zoom:1;--zoom-page:1}}

/* Le catalogue des tarifs est une affaire d'argent, pas de personnes : son cadre est or. */
.nv-tarifs .nv-bloc.b-qui{--z:var(--tk-argent,#7a4b06);--z-b:var(--tk-argent-b,#d4a72c);--z-f:var(--tk-argent-f,#fbeec4);border-top-color:var(--z-b,#0BAE9F)}
.nv-tarifs .nv-bloc.b-qui .nv-lbl{color:var(--z,#055a52)}

/* 17/09 (Miguël, Pilotage › Synthèse) — les factures à venir en tête du tableau des projets, en or (l'argent) ;
   et le tableau prend toute la largeur de sa zone (il était devenu un bloc défilant, donc étroit). */
@media (min-width:900px){.dtable{display:table;width:100%}}
.dtable .sep.sep-fact td{background:linear-gradient(90deg,var(--tk-argent-f,#fbeec4),transparent);color:var(--tk-argent,#7a4b06);border-top:3px solid var(--tk-argent-b,#d4a72c)}
.dtable tbody tr.fact td{background:#fffaf0}
.dtable tbody tr.fact td.tot{color:var(--tk-argent,#7a4b06)}

/* 17/09 (Miguël) — Projets N à gauche, N+1 à droite quand la place le permet, l'un sous l'autre sinon. */
.pl-deux{display:grid;grid-template-columns:1fr;gap:var(--sp-4,16px);margin-top:var(--sp-4,16px)}
@media (min-width:1500px){.pl-deux{grid-template-columns:1fr 1fr}}
.pl-col .lbl-sec{margin-top:0}

.lbl-sec.lbl-fact{color:var(--tk-argent,#7a4b06)}
/* 17/09 (Miguël : « une seule ligne pour grouper la valeur ») — la ligne des factures à venir, en or ; le détail se déplie. */

@media (max-width:700px){.fact-d>summary{grid-template-columns:1fr auto}.fact-q{grid-column:1 / -1}.fact-h{display:none}}

/* 17/09 (Miguël, Pilotage : « mieux identifier la séparation de N et N+1 ») — LA SÉPARATION N / N+1 :
   chaque année ouvre par une bande pleine, à sa couleur (N = orange « prévoir », N+1 = or), texte blanc,
   plus haute ; et un trait épais sépare les deux blocs. */
.dtable .sep td{padding:12px 16px;font-size:16px;letter-spacing:.06em;color:#fff;background:var(--tk-prevoir,#9a3f06);border-top:4px solid var(--tk-prevoir-b,#ea7f1b);border-bottom:2px solid var(--tk-prevoir-b,#ea7f1b)}
.dtable .sep + tr td{border-top:0}
.dtable .sep.sep-n1 td{background:var(--tk-argent,#7a4b06);border-top:6px solid var(--or-2,#e8c76a);border-bottom:2px solid var(--tk-argent-b,#d4a72c)}
.dtable tbody tr.sep.sep-n1{box-shadow:0 -10px 0 #fff}
/* 17/09 (Miguël : « années en plus gros ») — l'année de la bande ressort. */
.dtable .sep td b{font-size:22px;letter-spacing:0;margin-left:6px}

/* ── LE BLOC « QUI C'EST » NE GASPILLE PLUS LES DEUX TIERS DE LA PAGE (02/10/2026) ────────────
   Miguël, capture à l'appui : « étrange cette mise en page avec espace gaspillé ».
   Mesuré : `.nv-g2` est une grille de colonnes de 300 px — trois colonnes sur un écran large.
   Les trois premiers champs (nom, représentant, SIRET) en occupaient une chacun, et TOUT LE
   RESTE — les deux cases, les deux dates de contrat, les trois choix de passage, le cumul
   mensuel, le taux horaire — vivait dans `.nv-cases-f`, qui est UNE SEULE case de cette grille
   empilée en colonne. Huit champs à la queue leu leu dans un couloir de 300 px, et les deux
   tiers de la largeur vides à côté.
   La cause est banale : un conteneur qui groupe des champs pour la lisibilité du code devient,
   dans une grille, un seul élément. Il reprend donc toute la ligne, et range ses propres
   champs comme la grille du dessus — mêmes colonnes, même respiration. */
.nv-bloc .nv-cases-f{grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:10px; align-items:start; justify-content:stretch}
/* Les deux cases à cocher restent côte à côte en tête, sur une ligne à elles : ce sont des
   décisions, pas des champs à remplir, et les mêler aux dates brouillerait les deux. */
.nv-bloc .nv-cases-f > .nv-case-f{align-self:start}

/* ── LE MODE DE CHAQUE PÉRIODE, SUR UNE LIGNE (02/10/2026) ────────────────────────────────────
   Miguël : « en classique nous avons choisi T1 T2 et T4 sur site et T3 au tél ou visio ». La
   ligne porte autant de cases que la maison a de périodes — quatre trimestres, ou douze mois
   chez un licencié qui passe au mois. Elle s'enroule d'elle-même quand il y en a beaucoup :
   douze cases sur une seule ligne seraient illisibles, douze cases sur trois lignes ne le sont
   pas. */
.nv-periodes{display:flex;flex-direction:column;gap:7px}
.nv-periodes-l{display:flex;flex-wrap:wrap;gap:8px}
.nv-periode{display:flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:10px;background:#fff;border:2px solid var(--z-b,#0BAE9F)}
.nv-periode > span{font:800 13px var(--font,system-ui,sans-serif);color:var(--z,#055a52);
  min-width:28px}
.nv-periode select{border:0;background:transparent;font:500 13px var(--font,system-ui,sans-serif);
  color:var(--tx-dark,#1a1f2e);padding:2px 0}
.nv-periode select:focus{outline:2px solid var(--or-1,#f5d370);outline-offset:2px}

/* ── LA BARRE DES ONGLETS NE TIRE PLUS LA PAGE, SUR GRAND ÉCRAN NON PLUS (02/10/2026) ──────────
   Le même défaut qu'au téléphone le 23/09, à l'autre bout : en ajoutant « CM » aux Réglages, la
   barre est passée à onze onglets, 1 509 px sur un écran de 1 220 — et c'est la PAGE ENTIÈRE qui
   s'est mise à glisser de côté, barre de défilement en bas, contenu décalé.
   La cause est la même qu'alors : la colonne de gauche vaut `minmax(max-content, 1fr)`, donc elle
   ne descend jamais sous la largeur de ses onglets et pousse la grille. Ici elle remplit sa
   colonne, pas plus, et ce sont les onglets qui glissent à l'intérieur.
   LA BARRE DE DÉFILEMENT RESTE VISIBLE, fine : au doigt on devine qu'il y a une suite, à la
   souris non — une liste qui se ferme en silence finit par faire oublier ce qu'elle contient. */
@media (min-width:641px){
  /* minmax(0,auto) et non 1fr : la barre prend la place qu il lui faut avant de partager le
     reste. Mesure sur l ecran de Miguel, 1 220 px : 1fr ne montrait que 431 px d onglets,
     auto en montre 863 — et la page ne glisse toujours pas. */
  .niv2{grid-template-columns:minmax(0,auto) auto minmax(0,1fr)}
  .niv2-left{justify-self:stretch;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.38) transparent}
  .niv2-left::-webkit-scrollbar{height:5px}
  .niv2-left::-webkit-scrollbar-thumb{background:rgba(255,255,255,.38);border-radius:3px}
  .niv2-left::-webkit-scrollbar-track{background:transparent}
}

/* ── LE CHOIX DU RYTHME DES PASSAGES (02/10/2026) ─────────────────────────────────────────────
   Miguël : « il faut une option au mois ». Quatre cartes à cocher plutôt qu'une liste déroulante :
   le rythme est une décision rare et lourde — elle change la lecture de tout l'historique du CM —
   et une liste fermée la rendrait aussi anodine qu'un réglage d'affichage. Les quatre possibilités
   restent sous les yeux, avec ce que chacune coûte en passages.
   Fond blanc : le texte sombre y est lu sans effort (#1a1f2e, 15:1 ; #475569, 8,6:1). */
.nv-rythme{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;
  background:#fff;border:2px solid var(--z-b,#0BAE9F);cursor:pointer}
.nv-rythme.est-choisi{box-shadow:0 0 0 3px rgba(11,174,159,.22)}
.nv-rythme > span{display:flex;flex-direction:column;line-height:1.3}
.nv-rythme b{font:800 13px var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e)}
.nv-rythme small{font:500 12px var(--font,system-ui,sans-serif);color:#475569}
.nv-rythme input{accent-color:var(--z,#055a52);width:16px;height:16px;flex:0 0 auto}
.nv-rythme:focus-within{outline:2px solid var(--or-1,#f5d370);outline-offset:2px}

/* ── LA PHRASE QUI DIT CE QUE LE CHOIX DONNE (02/10/2026) ─────────────────────────────────────
   Sous le rythme d'un client : « il figurera en T1 et T3 seulement ». Un réglage qui ne se
   traduit pas sous les yeux ne se vérifie jamais — on le règle, on l'oublie, et on découvre six
   mois plus tard qu'il ne faisait pas ce qu'on croyait.
   #3f4a5a sur fond clair : 9:1. */
.nv-dit{grid-column:1 / -1;margin:2px 0 0;padding:7px 11px;border-radius:9px;
  background:rgba(255,255,255,.72);border-left:4px solid var(--z-b,#0BAE9F);
  font:500 12.5px/1.45 var(--font,system-ui,sans-serif);color:#3f4a5a}
.nv-dit b{font-weight:800;color:var(--tx-dark,#1a1f2e)}

/* ═══ 02/10/2026 — LES BILLES DES PASSAGES SUR LA FICHE CLIENT ═══════════════════════════════
   Miguel : « 4 petites billes si au trimestre, 12 si passage au mois. Grises pas planifie,
   orange en attente de validation, vert, validee. »

   TROIS ETATS, TROIS COULEURS, ET JAMAIS LA COULEUR SEULE : chaque bille porte son texte au
   survol et pour les lecteurs d'ecran. Une information portee par la seule couleur n'existe pas
   pour qui ne la distingue pas — et ces billes font 9 pixels.

   CONTRASTES MESURES SUR LE FOND CLAIR DE LA FICHE (#ffffff) : le vert #15803d donne 4,9 et
   l'orange #b45309 5,9 — tous deux au-dessus du seuil, meme si ce sont des pastilles et non du
   texte. Le gris #cbd5e1 est volontairement PALE : « rien de planifie » doit se voir comme un
   creux, pas comme une alerte. Son cerne #94a3b8 lui donne sa forme. */
.cf-cm{display:inline-flex;align-items:center;gap:3px;margin-left:2px;vertical-align:middle}
.cf-cm-b{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto;
         background:#cbd5e1;border:1px solid #94a3b8;cursor:help}
.cf-cm-b--attente{background:#f59e0b;border-color:#b45309}
.cf-cm-b--fait{background:#22c55e;border-color:#15803d}
/* Douze billes au mois : elles tiennent sur la meme ligne en se resserrant, plutot que de
   pousser le nom du client a la ligne. */
.cf-cm:has(.cf-cm-b:nth-child(9)){gap:2px}
.cf-cm:has(.cf-cm-b:nth-child(9)) .cf-cm-b{width:8px;height:8px}

/* Le grand bandeau retire laisse sa section vide : elle ne doit pas garder sa hauteur ni son
   trait. On ne supprime pas la balise — le script s'y accroche encore pour d'autres choses. */
.cm-fil--vide{margin:0;padding:0;border:0;min-height:0;background:none;display:none}

/* ── LE DÉSERT AU MILIEU (02/10/2026) ──────────────────────────────────────────────────────────
   Miguël, deuxième capture annotée de la page Conseils : cinq rectangles rouges, tous sur des
   vides HORIZONTAUX. La hauteur était réglée le matin ; c'est la largeur qui restait.

   LA CAUSE EST UNE SEULE LIGNE, ÉCRITE UNE FOIS ET HÉRITÉE PARTOUT : les en-têtes de bloc sont
   en `justify-content:space-between`. Deux textes, l'un collé à gauche, l'autre collé à droite,
   et tout l'espace au milieu. C'est joli sur une carte de visite, illisible sur un écran de
   travail : l'œil doit traverser le vide pour relier un titre à son explication.

   On les remet l'un derrière l'autre, dans l'ordre où on les lit. Portée limitée à la page
   Conseils : le même défaut existe sur les autres écrans, il sera repris quand ils seront vus.

   LES CINQ RECTANGLES :
     ① l'en-tête « Envoyer un conseil » et sa phrase        -> tf-tete
     ② le bandeau bleu « Depuis une alerte »                -> nv-bandeau-info
     ③ la bande vide sous les quatre champs                 -> rc-choisi (le bloc du client
       faisait deux lignes et tirait toute la rangée vers le bas)
     ④ le trou entre « Signé Miguël Leplat » et le bouton   -> cs-actions
     ⑤ l'en-tête « À conseiller » et sa phrase              -> tf-tete, même correction que ①
*/
.nv-conseils .tf-tete{justify-content:flex-start}
/* La phrase suit le titre et prend TOUTE la place qui reste : bornee a 72 caracteres, elle
   se coupait trop tot et emportait le lien « gerer la bibliotheque » avec elle. Un vide
   supprime ne doit pas couter une information. */
.nv-conseils .tf-tete .nv-aide{flex:1 1 auto; min-width:0; max-width:none}

/* ② et ⑤ : un bandeau s'arrête où son texte s'arrête. */
.nv-conseils .nv-bandeau-info{width:fit-content; max-width:100%}

/* ③ LE CLIENT TIENT SUR UNE LIGNE, comme les quatre champs d'à côté. Son nom se coupe
   proprement s'il est long — il est entier dans l'infobulle et dans la liste. Sans cela sa
   boîte fait deux lignes, la rangée prend sa hauteur, et les quatre autres colonnes laissent
   une bande vide sous elles. */
.nv-conseils .rc-choisi{flex-wrap:nowrap; padding:7px 11px; gap:8px}
.nv-conseils .rc-nom{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nv-conseils .rc-changer{padding:5px 10px; font-size:12px}

/* ④ la signature et le bouton voyagent ensemble, au bout de la ligne. */
.nv-conseils .cs-actions{justify-content:flex-end}

/* ── LE BOUTON MONTE À CÔTÉ DE LA ZONE DE TEXTE (02/10/2026) ───────────────────────
   Miguël, flèche rouge du bouton vers la zone de texte : « pas difficile à trouver un peu de
   place ». La zone prenait toute la largeur alors qu'on y écrit des phrases, et la signature
   avec son bouton s'en allaient occuper une ligne à eux seuls, en dessous.
   Ils viennent se loger à DROITE de la zone, calés en bas : une ligne entière de gagnée, et le
   bouton se trouve là où l'œil finit de lire.
   Le formulaire passe à deux colonnes ; tout ce qui n'est pas la zone de texte ou les actions
   traverse les deux, donc rien d'autre ne bouge. */
.nv-conseils .cs-form{grid-template-columns:minmax(0,1fr) auto; align-items:end}
.nv-conseils .cs-form > *{grid-column:1 / -1}
.nv-conseils .cs-champ--texte{grid-column:1}
.nv-conseils .cs-actions{grid-column:2; align-self:end; flex-direction:column; align-items:flex-end;
  gap:7px; padding-bottom:2px}
.nv-conseils .cs-actions .nv-aide{white-space:nowrap}

/* ── LA PHRASE D'ALERTE DANS L'EN-TÊTE (02/10/2026) ────────────────────────────────
   Elle remplace l'explication générale quand on vient d'une alerte, et doit se distinguer d'elle :
   c'est un contexte, pas un mode d'emploi. Le bleu de la maison sur fond clair, 7,6:1. */
.nv-conseils .cs-aide-alerte{color:#1d4ed8; font-weight:600}
.nv-conseils .cs-aide-alerte b{color:#13308f}

/* ── LES TITRES SUR LA MÊME VERTICALE QUE LEUR CONTENU (02/10/2026) ───────────────────────────
   Miguël : « il faut aligner les textes, regarde bien ». Le cadre écarte son contenu de 18 px ;
   le bandeau du titre, posé DANS ce cadre, en rajoutait 18 de marge et 8 de liseré — le titre
   partait donc à 44 px pendant que « LE CLIENT » partait à 18. Deux verticales pour une seule
   colonne de lecture : l'œil le voit sans savoir le nommer.
   Le bandeau déborde maintenant de 12 px de chaque côté (il garde son allure de pastille, un peu
   plus large) et rentre ses marges d'autant : 6 + 8 de liseré + 4 = 18. Le titre et les champs
   partent du même trait. */
.nv-conseils .tf-tete{margin:0 -12px 10px; padding:8px 12px 8px 4px}

/* ── « CONSEIL » ET « DEPUIS UNE ALERTE » SUR LA MÊME LIGNE DE BASE (02/10/2026) ───────────────
   Miguël, montrant les deux mots côte à côte. L'en-tête alignait ses deux textes PAR LE HAUT
   (align-items:flex-start). Deux tailles de lettres différentes alignées par le haut ne
   reposent pas sur le même trait : le petit texte flotte, et l'œil lit deux lignes là où il
   n'y en a qu'une. `baseline` les pose sur le pied des lettres, comme une phrase écrite. */
.nv-conseils .tf-tete{align-items:baseline}


/* ═══ 02/10/2026 — LES BANDES DE TITRE RESTENT SOUS L'EN-TETE ════════════════════════════════
   Miguel : « de nombreuses barres d'info sous le header disparaissent, et c'est souvent moche de
   ne pas les voir — c'est comme un tableau qui, quand on scrolle, fait disparaitre les titres ».

   L'en-tete du site est deja colle a 0, sur 86 pixels, au-dessus de tout (z-index 50). La bande
   de titre d'une page s'accroche donc juste en dessous, et passe DERRIERE lui.

   SEULE LA PREMIERE BANDE SE COLLE. Une page peut en porter trois ; les coller toutes
   empilerait trois bandeaux et mangerait l'ecran — exactement ce qu'on vient de lui retirer.

   Le fond est deja opaque sur `.zone` : sans lui, le contenu defilerait au travers. */
/* 02/10/2026 — TOUTES LES BANDES DE TITRE, pas seulement celles du CM.
   Releve page par page : previsionnel, disponibilites, agenda, projets, commandes, KB,
   parrainages, idees et pense-bete portent tous la bande `.zone` de la maison en premiere fille
   de leur conteneur. Un seul selecteur les prend. L'accueil et les reglages ont leur propre
   bandeau, nomme — on les ajoute a la main.
   On NE colle PAS le premier bloc de conseils, tarifs, charges et NAS : c'est un volet de
   travail, pas un titre. Coller un formulaire n'aiderait personne. */
main.page > * > .zone:first-of-type,
main.page > .jr > .jr-tete,
main.page > .et-bandeau,
.cp-barre{position:sticky;top:var(--colle-1,86px);z-index:20;
          /* L'ombre, et pas un espace : une bande collee se detache par en dessous. C'est deja
             ce que fait la fiche client, mesuree ce jour — meme valeur, pour que les deux se
             ressemblent. */
          box-shadow:0 8px 20px rgba(28,36,38,.14)}


/* ═══ 02/10/2026 — LES BANDES COLLEES TIENNENT COMPTE DU ZOOM DE LA PAGE ═════════════════════
   Miguel : « ca remonte toujours ». Mesure a 1900 px : la bande se collait a 99 pixels alors que
   l'en-tete s'arrete a 86 — treize pixels de fente, dans lesquels le contenu defilait.

   La cause : `main.page{zoom:1.15}` au-dela de 1700 px (1.3 au-dela de 2200). Une longueur ecrite
   A L'INTERIEUR d'un element zoome est multipliee par ce zoom. Un `top:86px` y vaut 99.

   On divise donc par le zoom, AUX MEMES SEUILS que la feuille — pas a des seuils inventes, sans
   quoi les deux se desynchroniseraient au premier changement.

     --colle-1  la bande qui dit OU L'ON EST, sous l'en-tete
     --colle-2  la bande DEPUIS LAQUELLE ON AGIT, sous la premiere */
:root{--colle-1:86px;
      /* 40 et non 44 : la bande de titre fait 44 px, donc la seconde la CHEVAUCHE de 4. Un jour
         de quelques pixels laisserait passer le texte, et sa largeur depend du zoom — mesuree a
         8 px sans zoom, 1,4 a 1,15. Un chevauchement, lui, tient quelle que soit la hauteur de
         la bande du dessus. */
      --colle-2:calc(var(--colle-1) + 40px)}
@media (min-width:1700px){:root{--colle-1:74.8px}}
@media (min-width:2200px){:root{--colle-1:66.2px}}