/* CE QUE TOUTES LES PAGES DU BACK OFFICE PARTAGENT.
 *
 * POURQUOI CE FICHIER. Le lien de retour et la vignette de compte etaient
 * recopies dans chaque page — deja trois fois pour le premier. Une regle
 * recopiee derive : le jour ou l on change la taille d une vignette, elle
 * change a un endroit sur quatre, et personne ne voit lequel avant une capture
 * d ecran.
 *
 * CE QU IL NE FAIT PAS. Il ne redefinit aucun jeton : les couleurs, les rayons
 * et les fontes viennent du socle. Une page qui recopie sa palette derive au
 * premier changement d accent.
 */

/* ── LE RETOUR ─────────────────────────────────────────────────────────────
   Aucune page du back office n est un cul-de-sac. La file de poche n a
   volontairement pas de barre de navigation — un lead a la fois, un pouce, en
   boutique — mais elle porte quand meme de quoi revenir. */
.bar .retour{font:600 11px var(--fm);letter-spacing:.06em;text-transform:uppercase;
  color:var(--brume);text-decoration:none;border:1px solid var(--ligne-fort);
  border-radius:var(--r-puce);padding:4px 9px}
.bar .retour:hover{color:var(--vif-clair);border-color:rgba(var(--ac-rgb),.5)}

/* ── LA VIGNETTE D UN COMPTE ───────────────────────────────────────────────
   L INITIALE EST DESSOUS, LA PHOTO PAR-DESSUS. Rien a remplacer quand l image
   n arrive pas : une photo refusee, lente ou absente laisse simplement voir la
   lettre. Un cadre vide se lirait comme un chargement casse, et on finit par
   croire l ecran en panne. */
.vig{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;margin:0;border-radius:9px;overflow:hidden;
  background:var(--n3);border:1px solid var(--ligne);
  font:600 12px var(--fm);color:var(--t4)}
.vig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .3s ease}
.vig img.pose{opacity:1}
/* Deux tailles, parce qu un mur de pipeline et une fiche d appel ne demandent
   pas la meme place. */
/* La carte du modele en fond : un peu plus sombre que la photo du compte, pour
   qu on sente que c est un decor et pas un portrait. */
.vig.icp img.pose{opacity:.92}
.vig.petite{width:26px;height:26px;border-radius:7px;font-size:10px}
.vig.grande{width:52px;height:52px;border-radius:13px;font-size:17px}

/* ── LA BARRE DE RECHERCHE ─────────────────────────────────────────────────
   Elle filtre ce qui est DEJA a l ecran, et le dit. Une recherche qui semble
   fouiller les cinquante mille comptes alors qu elle trie deux cents lignes
   ferait conclure « ce compte n existe pas » a chaque absence. */
.cherche{position:relative;display:flex;align-items:center;gap:8px}
.cherche input{width:100%;padding:9px 12px;border-radius:10px;
  border:1px solid var(--ligne-fort);background:var(--n2);color:var(--t1);
  font:500 13px var(--fb)}
.cherche input:focus{outline:2px solid var(--vif-clair);outline-offset:1px}
.cherche .compte{font:500 10.5px var(--fm);color:var(--t4);white-space:nowrap}

/* ── LA COQUILLE : UN RAIL A GAUCHE, LE MEME PARTOUT ──────────────────────
   Le Sales OS portait un rail ; les six autres ecrans posaient une barre en
   haut et rien d autre. Cliquer « Queue » ne changeait donc pas d ecran DANS
   l outil, ca faisait atterrir sur une autre page, avec une autre forme — et
   c est la FORME qui dit si on est encore dans la meme application. Mettre les
   liens dans la barre du haut ne suffisait pas : les liens existaient, la forme
   changeait toujours. */
.os{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:100vh}
/* « relative » N EST PAS DECORATIF ICI. La carte pose son globe en
   position:absolute inset:0 ; sans contexte de positionnement sur la colonne,
   ce inset se resout contre la FENETRE — le canvas recouvrait donc le rail, qui
   etait bien dans la page, invisible dessous, et la carte devenait un ecran
   sans retour. Le rail existait, on ne pouvait simplement pas le toucher. */
.os-corps{min-width:0;position:relative}
/* LE RAIL REPLIE, ICI COMME DANS LE SALES OS : la colonne tombe a zero, le
   corps prend tout ; le bouton de la barre le rouvre. Sur telephone le rail
   est une bande et ne se replie pas. */
.os.replie{grid-template-columns:0 minmax(0,1fr)}
.os.replie .os-rail{opacity:0;pointer-events:none;overflow:hidden;padding-inline:0;border-right:0}
.bar .replier{order:-2;width:30px;height:30px;border-radius:8px;color:var(--t4);display:inline-flex;align-items:center;justify-content:center;
  flex:none;background:none;border:0;cursor:pointer;transition:color .18s,background .18s}
.bar .replier:hover{color:var(--texte);background:var(--verre)}
.bar .replier svg,.haut .replier svg{width:16px;height:16px}
.bar .os-fil{font:600 12px var(--fm);color:var(--brume);white-space:nowrap}
.bar .os-fil+b{font:600 12px var(--fm);color:var(--texte)}
@media(max-width:860px){.bar .replier{display:none}.os.replie{grid-template-columns:1fr}.os.replie .os-rail{opacity:1;pointer-events:auto;overflow:visible;padding-inline:12px}}
/* Il defile tout seul : sans ca, un rail plus haut que l ecran rend ses
   dernieres entrees inatteignables, et on le voit « disparaitre » en descendant
   dans une longue liste. Le cadre reste, le contenu bouge. */
.os-rail{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;
  gap:4px;padding:14px 12px;border-right:1px solid var(--ligne);background:var(--n1);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.os-marque{display:flex;align-items:center;gap:9px;padding:6px 10px 14px;
  font:700 15px var(--fb);letter-spacing:-.02em;color:var(--texte);text-decoration:none}
.os-marque svg{width:22px;height:15px;color:var(--vif);flex:none}

.ecrans{display:flex;flex-direction:column;gap:2px}
.ecrans a{display:block;font:600 13px var(--fb);color:var(--t4);text-decoration:none;
  padding:9px 11px;border-radius:9px;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease)}
.ecrans a:hover{color:var(--texte);background:var(--verre)}
.ecrans a.on{color:var(--t1);background:rgba(var(--ac-rgb),.1);font-weight:600}
/* Intel et Learn, sous « Sales OS », quand on n y est pas : deux petits liens
   en retrait, pour que les deux modes restent a un clic depuis tous les
   ecrans. */

/* La barre de la page reste, sans son logo : il vit en haut du rail, et deux
   marques a dix centimetres l une de l autre font hesiter sur laquelle ramene
   ou. */
.os .bar{padding-left:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* LES MODULES DANS LA BARRE, LA MEME RANGEE QUE DANS LE SALES OS. Le Sales
   OS a son propre style pour « .modes » ; ici « .os-modules » le rejoue pour
   les six autres pages, qui ne chargent pas sales.html. */
.bar .os-modules{display:flex;gap:2px;padding:3px;border-radius:10px;border:1px solid var(--ligne);background:var(--n1);flex:none;order:-1}
.bar .os-modules .pa{padding:6px 12px;border-radius:7px;font:600 12px var(--fb);color:var(--brume);text-decoration:none;
  background:transparent;border:0;cursor:pointer;transition:background .18s,color .18s}
.bar .os-modules .pa:hover{color:var(--texte)}
.bar .os-modules .pa.on{background:rgba(var(--ac-rgb),.14);color:var(--vif-clair)}
@media(max-width:860px){.bar .os-modules{order:0;width:100%;overflow-x:auto;scrollbar-width:none}.bar .os-modules .pa{padding:6px 9px;font-size:11.5px;white-space:nowrap}}

/* SUR TELEPHONE LE RAIL DEVIENT UNE BANDE. Il n y a pas la place pour une
   colonne, mais « pas la place » ne veut pas dire « pas de sortie » : les
   destinations restent, en ligne, defilables. La derniere entree ne doit pas
   etre celle qu on perd. */
@media(max-width:860px){
  /* « auto 1fr », PAS DEUX RANGEES AUTO. La coquille tient au moins un ecran
     de haut ; sur une page courte — une file vide, une porte de code — la
     grille repartissait l espace libre entre ses deux rangees, et la bande
     de navigation avalait la moitie de l ecran : la barre « My queue » se
     retrouvait a trois cents pixels du haut. Vu en peignant la pioche vide. */
  .os{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .os-rail{position:sticky;top:0;z-index:30;height:auto;flex-direction:row;align-items:center;
    gap:8px;padding:8px 12px;border-right:0;border-bottom:1px solid var(--ligne);
    background:rgba(8,9,10,.94);backdrop-filter:blur(12px)}
  .os-marque{padding:0;font-size:0;gap:0}
  .os-marque svg{width:24px;height:17px}
  .ecrans{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:2px}
  .ecrans::-webkit-scrollbar{display:none}
  .ecrans a{padding:6px 10px;font-size:12px}
}

/* ── JOURNALISER UNE ISSUE ─────────────────────────────────────────────────
   Le bloc pose par assets/journal.js. Il vit sur la carte du Sales OS et sur la
   fiche d un compte, et il est la raison pour laquelle la base cessera de
   porter zero activite : jusqu ici on ne pouvait enregistrer que depuis le
   telephone, et le bouton du bureau etait un lien qui faisait quitter l ecran.

   LES BOUTONS SONT PLUS PETITS QU AU TELEPHONE, ET C EST VOULU. La file de
   poche se tape au pouce en boutique ; ici on a une souris et un ecran large,
   et des boutons de 14 px de haut y prendraient toute la carte au detriment de
   ce qu il faut LIRE avant d appeler. */
.journal{margin-top:14px;padding-top:14px;border-top:1px dashed var(--ligne)}
.journal .cap{font:600 9px var(--fm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--t4);margin-bottom:8px}
.journal .rang{display:flex;flex-wrap:wrap;gap:6px}
.journal .iss{padding:7px 11px;border-radius:9px;border:1px solid var(--ligne-fort);
  background:transparent;color:var(--t2);font:600 12px var(--fb);
  transition:all .16s var(--ease)}
.journal .iss:hover{color:var(--texte);border-color:var(--brume)}
.journal .iss:disabled{opacity:.45;cursor:default}
/* Les crans qui font AVANCER portent l accent, ceux qui ferment restent
   sobres : on doit voir d un coup d oeil lequel fait progresser un dossier. */
.journal .iss.chaud{border-color:rgba(var(--ac-rgb),.45);color:var(--vif-clair);
  background:rgba(var(--ac-rgb),.07)}
.journal .iss.froid{border-color:var(--ligne);color:var(--t4)}

.journal .echo{margin-top:10px;padding:10px 12px;border-radius:10px;
  font:500 13px var(--fb);line-height:1.5;border:1px solid var(--ligne);color:var(--brume)}
.journal .echo.ok{border-color:rgba(var(--ac-rgb),.45);color:var(--vif-clair);
  background:rgba(var(--ac-rgb),.07)}
.journal .echo.non{border-color:rgba(232,67,79,.45);color:#FFB4B9;
  background:rgba(232,67,79,.07)}
.journal .echo.demande{color:var(--t1)}
/* Le retour d appel : le bloc s allume et attend l issue. */
.journal .echo.appel{border-color:rgba(var(--ac-rgb),.5);background:rgba(var(--ac-rgb),.08);color:var(--t1)}
.journal .echo.appel b{color:var(--vif-clair)}
.journal.attend-issue{border-top-color:rgba(var(--ac-rgb),.6);animation:kj-attend 1.2s ease-in-out 3}
@keyframes kj-attend{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px rgba(var(--ac-rgb),.25)}}
@media(prefers-reduced-motion:reduce){.journal.attend-issue{animation:none}}
.journal .echo .aide{margin:0 0 8px;font-size:12px;color:var(--t4)}
.journal .echo .aide-onb{margin:-2px 0 8px;font:500 11.5px/1.45 var(--fb);color:var(--vif-clair)}
.journal .echo input[type=datetime-local]{font:500 12.5px var(--fb);color:var(--texte);background:var(--n1);
  border:1px solid var(--ligne);border-radius:8px;padding:8px 10px;min-height:38px;width:100%}
.journal .echo label{display:block;margin-bottom:8px;font:600 10px var(--fm);
  letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
.journal .echo input,.journal .echo select{display:block;width:100%;margin-top:4px;padding:9px 11px;
  border-radius:9px;border:1px solid var(--ligne-fort);background:var(--n2);
  color:var(--t1);font:500 13.5px var(--fb);text-transform:none;letter-spacing:0}
/* Le montant d un compte gagne : devise, cash, mensuel sur une rangee ; la
   douleur repliee dessous, pour le cas ou elle n a jamais ete ecrite. */
.journal .echo .rang.montant{display:grid;grid-template-columns:90px 1fr 1fr;gap:8px;margin-bottom:8px}
.journal .echo .rang.montant label{margin:0}
.journal .echo .plus{margin:2px 0 10px}
.journal .echo .plus summary{cursor:pointer;list-style:none;font:500 12px var(--fb);color:var(--t4);margin-bottom:6px}
.journal .echo .plus summary::before{content:"▸ ";font-size:9px}
.journal .echo .plus[open] summary::before{content:"▾ "}

/* ── LE SCRIPT D APPEL ───────────────────────────────────────────────────
   Pose par assets/script-appel.js sur la carte d appel, la fiche et la file
   de poche. Les phrases sont citees du playbook ; les crochets qui restent
   sont marques : c est ce que le commercial doit remplir en lisant la carte. */
.script{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px dashed var(--ligne-fort);background:var(--n1)}
.script .sc-t{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font:600 9.5px var(--fm);
  letter-spacing:.1em;text-transform:uppercase;color:var(--t4);margin-bottom:8px}
.script .sc-t span{font:500 11px var(--fb);letter-spacing:0;text-transform:none;color:var(--t4)}
.script .sc-l{margin-top:8px}
.script .sc-l .k{display:block;font:600 9px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--vif-clair);margin-bottom:3px}
.script .sc-l p{margin:0;font:500 13.5px/1.5 var(--fb);color:var(--t1)}
.script .sc-l p+p{margin-top:5px}
.script mark{background:rgba(232,161,58,.18);color:var(--caution);border-radius:3px;padding:0 2px}
.script .sc-plus{margin-top:10px}
.script .sc-plus summary{cursor:pointer;list-style:none;font:600 11px var(--fm);letter-spacing:.06em;color:var(--brume)}
.script .sc-plus summary::before{content:"▸ ";font-size:9px}
.script .sc-plus[open] summary::before{content:"▾ "}
.script .sc-src{margin:10px 0 0;font:500 11px var(--fm);color:var(--t4)}

/* ── LES MOTS DE L EQUIPE ──────────────────────────────────────────────────
   Le panneau pose par assets/compte.js sur la fiche d un compte, et relu dans
   l Inbox. Il ne ressemble PAS a une messagerie, volontairement : pas de bulles,
   pas d alignement gauche-droite, pas d avatar. C est un carnet pose sur un
   dossier — l equipe parle sur WhatsApp, et imiter WhatsApp ici ferait attendre
   des choses qu on ne donne pas (le vocal, le push, la lecture).

   UN MOT NON LU QUI M EST ADRESSE PORTE UN LISERE, PAS UNE PASTILLE ROUGE. Il
   sera lu dans la seconde ou cette page s affiche ; une alarme pour quelque
   chose qu on a deja sous les yeux s ignore vite, y compris quand elle compte. */
.mots .fil{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.mots .mot{padding:10px 0;border-bottom:1px solid var(--ligne)}
.mots .mot:last-child{border-bottom:0}
.mots .mot.neuf{border-left:2px solid rgba(var(--ac-rgb),.55);padding-left:10px;margin-left:-12px}
.mots .mot .signe{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
.mots .mot .signe b{font:600 12.5px var(--fb);color:var(--t1)}
.mots .mot .signe .a{font:500 11.5px var(--fb);color:var(--vif-clair)}
.mots .mot .signe i{margin-left:auto;font:500 11px var(--fm);font-style:normal;color:var(--t4)}
.mots .mot p{margin:0;font:400 13.5px/1.55 var(--fb);color:var(--t2);
  overflow-wrap:anywhere;white-space:pre-wrap}

.mots .ecrire{padding-top:14px;border-top:1px dashed var(--ligne)}
.mots .ecrire textarea{display:block;width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--ligne-fort);background:var(--n2);color:var(--t1);
  font:400 13.5px/1.5 var(--fb);resize:vertical}
.mots .ecrire textarea:focus{outline:none;border-color:rgba(var(--ac-rgb),.5)}
/* La ligne du bas s enroule : le nom d un collegue peut etre long, et une
   colonne de fiche fait 380 px sur un portable. */
.mots .ecrire .bas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px}
.mots .ecrire select{flex:1;min-width:0;padding:8px 10px;border-radius:9px;
  border:1px solid var(--ligne-fort);background:var(--n2);color:var(--t2);
  font:500 12.5px var(--fb)}
.mots .ecrire button{padding:8px 14px;border-radius:9px;
  border:1px solid rgba(var(--ac-rgb),.45);background:rgba(var(--ac-rgb),.09);
  color:var(--vif-clair);font:600 12.5px var(--fb);transition:all .16s var(--ease)}
.mots .ecrire button:hover{background:rgba(var(--ac-rgb),.16)}
.mots .ecrire button:disabled{opacity:.45;cursor:default}
.mots .ecrire .echo{margin-top:9px;padding:9px 11px;border-radius:9px;
  font:500 12.5px/1.5 var(--fb);border:1px solid var(--ligne);color:var(--brume)}
.mots .ecrire .echo.ok{border-color:rgba(var(--ac-rgb),.45);color:var(--vif-clair);
  background:rgba(var(--ac-rgb),.07)}
.mots .ecrire .echo.non{border-color:rgba(232,67,79,.45);color:#FFB4B9;
  background:rgba(232,67,79,.07)}

/* ── LA MARQUE QUI TOURNE PENDANT QU ON ATTEND ─────────────────────────────
   Posee par KOS.chargement(). Deux traces du meme oeil : l ellipse porte un
   segment qui en fait le tour, la feuille centrale bat comme une paupiere.

   LA LONGUEUR DU TRACE EST CALCULEE, PAS DEVINEE. Le perimetre d une ellipse de
   demi-axes 100 et 68 vaut environ 532 unites (Ramanujan) ; un segment de 120
   suivi d un vide de 412 fait donc un quart de tour eclaire. Un dasharray pris
   au hasard donne un segment qui s allonge et se raccourcit en tournant, ce qui
   se voit et fait bancal.

   RIEN DE TIERS. Pas de bibliotheque, pas de GIF, pas une police d icones : la
   regle de la maison interdit une ressource tierce a l execution, et un rond
   qui tourne aurait de toute facon pu etre celui de n importe qui. */
.kchargement{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:64px 20px;color:var(--t3);text-align:center}
.kchargement.petit{padding:26px 16px;gap:10px}
.kchargement span{font:500 13.5px var(--fb);color:var(--t4);max-width:34ch;line-height:1.5}
.kchargement.petit span{font-size:12.5px}
.kc-oeil{width:62px;height:43px;color:var(--vif);overflow:visible}
.kchargement.petit .kc-oeil{width:40px;height:28px}
.kc-tour{stroke-dasharray:120 412;stroke-dashoffset:0;
  animation:kc-tour 1.5s cubic-bezier(.5,.05,.5,.95) infinite}
@keyframes kc-tour{to{stroke-dashoffset:-532}}
/* La paupiere bat sur le meme rythme, un demi-temps plus tard : les deux en
   phase se liraient comme un seul mouvement, et l oeil ne battrait plus. */
.kc-iris{transform-box:fill-box;transform-origin:center;opacity:.9;
  animation:kc-iris 1.5s ease-in-out .18s infinite}
@keyframes kc-iris{
  0%,100%{transform:scaleY(1);opacity:.9}
  45%{transform:scaleY(.18);opacity:.5}
}
/* UNE ANIMATION EN BOUCLE DECLENCHE DES MIGRAINES ET DES NAUSEES chez une partie
   des gens. Quand le systeme le dit, la marque se pose et la phrase en dessous
   porte seule l information. */
@media (prefers-reduced-motion: reduce){
  .kc-tour{animation:none;stroke-dasharray:none;opacity:.5}
  .kc-iris{animation:none}
}

/* LA PHRASE SOUS L OEIL. Citee d un document du depot, petite, sans
   guillemets typographiques ajoutes : le <q> natif en met, et on les retire —
   ce n est pas une parole rapportee, c est une regle affichee. */
.kchargement .kc-phrase{display:block;margin-top:6px;max-width:44ch;quotes:none}
.kchargement .kc-phrase::before,.kchargement .kc-phrase::after{content:none}
.kchargement .kc-phrase span{display:block;font:500 13.5px/1.55 var(--fb);color:var(--t2);
  text-wrap:balance}
.kchargement .kc-phrase cite{display:block;margin-top:6px;font:500 10px var(--fm);
  letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--t4)}

/* ── LES BADGES ───────────────────────────────────────────────────────────
   Poses par KOS.badges(). Une pastille ronde, une icone de deux traits, une
   teinte par famille : rouge ca presse, ambre de l argent passe, vert on peut
   agir, bleu une porte, violet leur audience, or le rang, gris une route.
   LES TEINTES SONT DES JETONS, ECRITS UNE FOIS ICI. Le socle n en porte que
   trois (accent, caution, restrict) ; il en faut six pour que six familles se
   distinguent d un coup d oeil, et les ecrire a la main dans chaque page
   deriverait au premier ajustement. */
:root{--bd-bleu:#5AA9FF;--bd-violet:#B98CFF;--bd-cyan:#3ED6D0;--bd-or:#F2C45A;--bd-rouge:#FF6B76;
  --bd-bleu-rgb:90,169,255;--bd-violet-rgb:185,140,255;--bd-cyan-rgb:62,214,208;--bd-or-rgb:242,196,90;
  --bd-rouge-rgb:255,107,118}
.bdg{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;vertical-align:middle}
.bd{display:inline-flex;align-items:center;gap:3px;height:20px;min-width:20px;padding:0 5px;
  border-radius:999px;border:1px solid transparent;font:600 9.5px var(--fm);font-style:normal;
  letter-spacing:.04em;line-height:1;cursor:default;flex:none}
.bd svg{display:block;flex:none}
.bd span{padding-right:1px}
.bdg.petit .bd{height:17px;min-width:17px;padding:0 3px}
.bdg.petit .bd svg{width:10px;height:10px}
.bd.rouge{color:var(--bd-rouge);background:rgba(var(--bd-rouge-rgb),.12);border-color:rgba(var(--bd-rouge-rgb),.35)}
.bd.ambre{color:var(--caution);background:rgba(232,161,58,.12);border-color:rgba(232,161,58,.35)}
.bd.vert{color:var(--vif-clair);background:rgba(var(--ac-rgb),.12);border-color:rgba(var(--ac-rgb),.35)}
.bd.bleu{color:var(--bd-bleu);background:rgba(var(--bd-bleu-rgb),.12);border-color:rgba(var(--bd-bleu-rgb),.35)}
.bd.violet{color:var(--bd-violet);background:rgba(var(--bd-violet-rgb),.12);border-color:rgba(var(--bd-violet-rgb),.35)}
.bd.cyan{color:var(--bd-cyan);background:rgba(var(--bd-cyan-rgb),.12);border-color:rgba(var(--bd-cyan-rgb),.35)}
.bd.or{color:var(--bd-or);background:rgba(var(--bd-or-rgb),.12);border-color:rgba(var(--bd-or-rgb),.4)}
.bd.gris{color:var(--t2);background:var(--verre-hi,rgba(242,243,244,.035));border-color:var(--ligne)}
/* La legende. Repliee : on l ouvre le premier jour, plus jamais ensuite. */
.bd-legende{margin:8px 0 0;font:500 11.5px var(--fb);color:var(--t4)}
.bd-legende summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  font:600 10px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
.bd-legende summary::-webkit-details-marker{display:none}
.bd-legende summary::before{content:"▸";font-size:9px;transition:transform .15s}
.bd-legende[open] summary::before{transform:rotate(90deg)}
.bd-legende summary:hover{color:var(--brume)}
.bd-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:5px 14px;margin-top:9px}
.bd-grille span{display:inline-flex;align-items:center;gap:7px;color:var(--brume);font-size:11.5px}
.bd-legende p{margin:9px 0 0;color:var(--t4);font-size:11.5px;line-height:1.5}

/* ── LES PACKS : UNE ICONE ET UNE COULEUR PAR MARCHE ──────────────────────
   La couleur vient de la puce elle-meme (--pk), ecrite par KOS.pack : un pack
   ajoute depuis la tour n a pas de regle ici, et il doit quand meme se voir.
   La bordure et le fond sont la couleur affaiblie, le trait est la couleur
   pleine : la puce se reconnait de loin sans crier. */
.pkc{display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 7px 0 5px;
  border-radius:6px;border:1px solid color-mix(in srgb,var(--pk) 45%,transparent);
  background:color-mix(in srgb,var(--pk) 10%,transparent);color:var(--pk);
  font:600 10px var(--fm);letter-spacing:.04em;font-style:normal;white-space:nowrap;
  vertical-align:middle}
.pkc svg{width:12px;height:12px;flex:none}
.pkc.grand{height:auto;padding:8px 10px;gap:9px;border-radius:10px;font:700 13px var(--fb);letter-spacing:0}
.pkc.grand svg{width:22px;height:22px}
/* Une puce-bouton : le meme dessin, en filtre. Eteinte, elle est grise et
   garde son trait ; allumee, sa couleur. */
button.pkc{cursor:pointer;transition:all .18s var(--ease)}
button.pkc.off{color:var(--t4);border-color:var(--ligne);background:transparent}
button.pkc.off:hover{color:var(--pk);border-color:color-mix(in srgb,var(--pk) 45%,transparent)}
.pkc .n{font:500 10px var(--fm);opacity:.75;font-variant-numeric:tabular-nums}

/* ── LEURS RESEAUX ────────────────────────────────────────────────────────
   Poses par KOS.reseaux(). Le sigle porte la teinte du reseau, le nombre est
   en clair, la variation en vert ou rouge. Une puce sans nombre veut dire
   « on sait ou ils sont, pas combien les suivent ». */
.rsx{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;vertical-align:middle}
.rsx .rs{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px 0 5px;border-radius:999px;
  border:1px solid var(--ligne);background:var(--n2);color:var(--t2);text-decoration:none;
  font:600 10.5px var(--fm);line-height:1;white-space:nowrap;flex:none;
  transition:border-color .15s var(--ease,ease),color .15s var(--ease,ease)}
.rsx a.rs:hover{border-color:var(--ligne-fort);color:var(--t1)}
.rsx .rs b{font:800 9px var(--fm);letter-spacing:.06em;padding:2px 4px;border-radius:5px;color:#08090A}
.rsx .rs.instagram b{background:#E1479B}.rsx .rs.facebook b{background:#5B8DEF}.rsx .rs.youtube b{background:#F04A4A}
.rsx .rs.tiktok b{background:#3ED6D0}.rsx .rs.linkedin b{background:#4EA3FF}.rsx .rs.x b,.rsx .rs.twitter b{background:#C9CDD1}
.rsx .rs.other b,.rsx .rs.autre b{background:#8A8F94}
/* La puce des avis Google : le G sur fond blanc, la note, le nombre d avis. */
.rsx .rs.google b{background:#F2F4F6}
.rsx .rs.google em{color:var(--t3)}
.rsx .rs span{font-variant-numeric:tabular-nums;color:var(--t1)}
.rsx .rs em{font-style:normal;font-size:9.5px;color:var(--t4)}
.rsx .rs em.monte{color:var(--vif-clair)}.rsx .rs em.descend{color:var(--bd-rouge)}
.rsx .rs.plus{color:var(--t4);padding:0 7px}
.rsx.court .rs{height:17px;padding:0 5px 0 3px;font-size:9.5px}
.rsx.court .rs b{font-size:8px;padding:1px 3px}

/* ── LE TEXTE QUI RESPIRE ─────────────────────────────────────────────────
   Pose par KOS.paragraphes() : une phrase par paragraphe, une ligne d air
   entre deux. La regle vit ici pour que les six ecrans respirent pareil. */
.aere p{margin:0;line-height:1.55}
.aere p+p{margin-top:.65em}

/* ── CE QUI BOUGE SUR LES SEPT ECRANS ─────────────────────────────────────
   La meme regle que dans le Sales OS : les blocs entrent une fois, ce qui est
   cliquable se souleve, rien ne boucle. Tout s arrete sous
   prefers-reduced-motion. */
@keyframes k-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.os-corps .enveloppe>*,.os-corps .env>*{animation:k-entre .38s var(--ease,ease) both}
.os-corps .enveloppe>*:nth-child(2),.os-corps .env>*:nth-child(2){animation-delay:.04s}
.os-corps .enveloppe>*:nth-child(3),.os-corps .env>*:nth-child(3){animation-delay:.08s}
.os-corps .enveloppe>*:nth-child(n+4),.os-corps .env>*:nth-child(n+4){animation-delay:.12s}
.cpt,.carte{transition:transform .2s var(--ease,ease),border-color .2s var(--ease,ease)}
.cpt:hover{transform:translateX(2px)}
.ecrans a{transition:background .18s var(--ease,ease),color .18s var(--ease,ease)}
@media(prefers-reduced-motion:reduce){
  .os-corps .enveloppe>*,.os-corps .env>*{animation:none}
  .cpt,.carte,.ecrans a{transition:none}.cpt:hover{transform:none}
}

/* L infobulle instantanee : la phrase du badge, tout de suite, lisible. */
.infobulle{position:absolute;z-index:80;padding:7px 10px;border-radius:9px;background:var(--n2,#16181B);
  border:1px solid var(--ligne-fort);color:var(--t1);font:500 12px var(--fb);line-height:1.45;
  box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;pointer-events:none;transform:translateY(-3px);
  transition:opacity .12s ease,transform .12s ease}
.infobulle.on{opacity:1;transform:none}

/* ── LE POP-UP D UN COMPTE, PARTOUT ─────────────────────────────────────
   Le pipeline et le CRM ouvrent un compte sans changer de page. Un voile,
   une carte, la croix ; Echap ferme. */
.voile{position:fixed;inset:0;z-index:40;background:rgba(4,5,6,.62);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto;
  animation:voile .18s var(--ease)}
@keyframes voile{from{opacity:0}to{opacity:1}}
.popin{width:min(640px,100%);border-radius:18px;border:1px solid var(--ligne-fort);background:var(--n1);
  box-shadow:0 24px 80px rgba(0,0,0,.55);padding:18px 20px 20px;animation:popin .22s var(--ease)}
@keyframes popin{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
/* L IMAGE DU POP-UP, EN GRAND. « les images la, on pourrait les faire plus
   grandes ? » : la carte ICP ou la photo est ce qu on reconnait avant le
   nom ; a 48 pixels elle etait une puce, a 88 elle est une image. Le texte
   se centre dessus, la croix reste en haut. */
.popin .haut{display:flex;align-items:center;gap:14px}
.popin .haut .vig{width:88px;height:88px;border-radius:18px;flex:none;font-size:30px}
.popin .haut .fermer{align-self:flex-start}
@media(max-width:480px){.popin .haut .vig{width:64px;height:64px;border-radius:14px;font-size:22px}}
.popin h3{margin:0;font:700 20px var(--fb);letter-spacing:-.02em}
.popin .sous{font:500 12.5px var(--fb);color:var(--brume);margin-top:2px}
.popin .fermer{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--ligne);color:var(--t4);font-size:16px;flex:none}
.popin .fermer:hover{color:var(--texte);border-color:var(--brume)}
.popin .jetons{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.popin .j{font:600 9px var(--fm);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ligne-fort);border-radius:999px;padding:3px 8px;color:var(--t4)}
.popin .j.vif{border-color:rgba(var(--ac-rgb),.45);color:var(--vif-clair)}
.popin .faits{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:14px;font:500 12.5px var(--fb)}
.popin .faits div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--ligne);padding-bottom:6px}
.popin .faits span{color:var(--t4)}
.popin .faits b{color:var(--t1);text-align:right;font-weight:600}
.popin .actes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.popin button{font:inherit;cursor:pointer;background:transparent;color:inherit;border:0}
.popin .actes a,.popin .actes button{padding:10px 14px;border-radius:10px;border:1px solid var(--ligne-fort);font:600 13px var(--fb);color:var(--t1);text-decoration:none}
.popin .actes .p{background:var(--vif);color:#0A1400;border-color:var(--vif)}
.popin .actes a:hover,.popin .actes button:hover{border-color:var(--brume)}
.popin .cap{font:600 9.5px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--t4);margin:14px 0 6px}
.popin textarea{width:100%;min-height:90px;border-radius:10px;border:1px solid var(--ligne-fort);background:var(--n2);color:var(--t1);
  padding:10px 12px;font:500 14px var(--fb);resize:vertical}
.popin .echo{margin-top:8px;font:500 12.5px var(--fb);color:var(--brume)}
.popin .echo.ok{color:var(--vif-clair)} .popin .echo.non{color:#FF6B75}
.popin .journal{margin-top:12px}
.popin .vers{font:500 12.5px var(--fb);color:var(--brume);margin:0 0 4px}
.popin .vers b{color:var(--vif-clair)}
@media(max-width:720px){.popin .faits{grid-template-columns:1fr}.voile{padding:2vh 10px}}
.popin .personnes{display:flex;flex-direction:column;gap:8px}
.popin .personne{border:1px solid var(--ligne);border-radius:11px;padding:9px 11px;background:var(--n2)}
.popin .personne b{font:600 13.5px var(--fb)}
.popin .personne .role{font:500 12px var(--fb);color:var(--brume);margin-left:6px}
.popin .routes{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.popin .route{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ligne-fort);border-radius:999px;
  padding:5px 11px;font:500 12.5px var(--fm);color:var(--t1);max-width:100%;overflow-wrap:anywhere;text-decoration:none;
  transition:border-color .15s,background .15s}
.popin a.route:hover{border-color:var(--vif);background:rgba(var(--ac-rgb),.08)}
.popin .route i{font:600 8.5px var(--fm);font-style:normal;letter-spacing:.09em;text-transform:uppercase;color:var(--t4)}
.popin .route.direct{border-color:rgba(var(--ac-rgb),.4);color:var(--vif-clair)}
.popin .src{font:500 11px var(--fm);color:var(--t4)}
.popin .vers.alerte{color:#FF6B75}
/* Se deconnecter : en bas du rail, discret, sur toutes les pages. */
/* LE BOUTON DES MARCHES, en haut a droite de chaque barre, et son pop-up :
   des puces ouvertes ou verrouillees, la carte du modele quand il y en a
   une, un cadenas qui dit l etat sans un mot. */
.os-marches{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--ligne-fort);background:transparent;color:var(--brume);font:600 12px var(--fb);cursor:pointer;flex:none}
.os-marches:hover{color:var(--t1);border-color:rgba(var(--ac-rgb),.5)}
.os-marches svg{width:13px;height:13px;color:var(--vif)}
.droite .os-marches{margin-left:0;margin-right:10px}
.popin.marches{width:min(760px,100%)}
.popin.marches .haut h3{font-size:18px}
.chips-m{display:flex;flex-wrap:wrap;gap:8px}
.chip-m{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:12px;border:1px solid var(--ligne-fort);
  background:var(--n2);color:var(--t1);font:600 12.5px var(--fb);text-align:left;cursor:default;transition:border-color .15s,opacity .15s,transform .15s}
button.chip-m{cursor:pointer}
button.chip-m:hover{border-color:rgba(var(--ac-rgb),.55);transform:translateY(-1px)}
.chip-m img{width:30px;height:30px;border-radius:8px;object-fit:cover;flex:none}
.chip-m img.rond{border-radius:50%}
.chip-m b{font-weight:600}
.chip-m i{display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;flex:none;color:var(--t4);border:1px solid var(--ligne)}
.chip-m i svg{width:11px;height:11px}
.chip-m.open{border-color:rgba(var(--ac-rgb),.45)}
.chip-m.open i{color:var(--vif);border-color:rgba(var(--ac-rgb),.5);background:rgba(var(--ac-rgb),.12)}
.chip-m.locked{opacity:.6;filter:saturate(.4)}
.chip-m.locked i{color:var(--t3,#9AA5AB);border-color:var(--ligne-fort)}
.chip-m.locked img{filter:grayscale(1) brightness(.7)}
.chip-m.focus.open::after{content:"focus";position:absolute;top:-7px;right:8px;font:600 8.5px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--vif);background:var(--n1);padding:0 4px}
.chip-m em{font:500 9.5px var(--fm);font-style:normal;color:var(--t4)}
.chips-m.icps .chip-m{padding-left:6px}
.popin.marches .echo{min-height:18px}
.os-sortir{margin-top:auto;padding:9px 10px;border-radius:9px;font:500 12px var(--fb);color:var(--t4);text-align:left;
  display:flex;align-items:center;gap:7px;cursor:pointer;background:transparent;border:0;transition:color .15s,background .15s}
.os-sortir:hover{color:var(--t1);background:var(--n2)}
.os-sortir svg{width:14px;height:14px;flex:none}
/* INSTALLER L APPLICATION. Juste au-dessus de la sortie, dans le rail de
   chaque page et dans celui du Sales OS ; quand il est la, c est lui qui
   prend l espace libre, et la sortie (ou le bloc « moi ») se colle dessous.
   Sans lui, rien ne bouge. Quand le navigateur a dit qu il sait installer
   (data-pret), le bouton passe en vert : ce sera un clic, pas une notice. */
.os-installer{margin-top:auto;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;
  font:500 12px var(--fb);color:var(--t4);text-align:left;background:none;border:1px dashed var(--ligne);cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.os-installer:hover{color:var(--t1);border-color:var(--brume)}
.os-installer[data-pret]{color:var(--vif);border-style:solid;border-color:rgba(var(--ac-rgb),.35)}
.os-installer[data-pret]:hover{background:rgba(var(--ac-rgb),.08)}
.os-installer svg{width:14px;height:14px;flex:none}
.os-installer+.os-sortir,.os-installer+.moi{margin-top:6px}
.os-aide{margin:2px 2px 6px;padding:9px 10px;border-radius:9px;background:var(--n2);border:1px solid var(--ligne);
  font:500 12px/1.45 var(--fb);color:var(--t2)}
@media(max-width:860px){
  .os-installer{margin-top:0;margin-left:auto;padding:6px 8px;border:0}
  .os-installer span{display:none}
  .os-aide{position:fixed;left:12px;right:12px;top:58px;z-index:40;margin:0}
}
@media(max-width:900px){.os-sortir{margin-top:0;margin-left:auto;padding:6px 8px}}

/* Les etiquettes de l equipe : une puce coloree, un bouton quand on peut la
   poser. Eteinte, elle est grise et vide ; allumee, elle prend sa teinte. */
.etq{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font:600 9.5px var(--fm);
  letter-spacing:.06em;text-transform:uppercase;font-style:normal;border:1px solid var(--ligne-fort);color:var(--t4);
  background:transparent;cursor:default;transition:all .15s var(--ease);white-space:nowrap}
button.etq{cursor:pointer}
button.etq:hover{color:var(--t1);border-color:var(--brume)}
.etq.on.vif{border-color:rgba(var(--ac-rgb),.5);color:var(--vif-clair);background:rgba(var(--ac-rgb),.1)}
.etq.on.ambre{border-color:rgba(232,161,58,.55);color:#F0BE6A;background:rgba(232,161,58,.1)}
.etq.on.bleu{border-color:rgba(90,169,255,.5);color:#8CC4FF;background:rgba(90,169,255,.1)}
.etq.on.or{border-color:rgba(240,190,106,.6);color:#F7D48F;background:rgba(240,190,106,.12)}
.etq.on.rouge{border-color:rgba(232,67,79,.5);color:#FF8B93;background:rgba(232,67,79,.1)}
.etq.on.gris{border-color:var(--ligne-fort);color:var(--t1);background:var(--n3,#1E2124)}
.etq.non{border-color:#FF6B75;animation:etq-non .3s}
@keyframes etq-non{50%{transform:translateX(3px)}}
.etqs{display:flex;flex-wrap:wrap;gap:5px}
/* Dans le pop-up, le bouton d etiquette garde sa forme : « .popin button »
   remet le bouton a plat, et pese plus lourd que « .etq » seul. */
.popin button.etq{font:600 9.5px var(--fm);border:1px solid var(--ligne-fort);height:20px;padding:0 8px;border-radius:999px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--t4);background:transparent}

/* ── LA LOUPE ─────────────────────────────────────────────────────────────
   L image d un compte en grand, sur le voile du pop-up : la photo, ou la
   carte de son modele. Un clic n importe ou la referme. */
.voile.loupe{align-items:center;padding:4vh 16px;cursor:zoom-out}
.voile.loupe figure{margin:0;max-width:min(920px,100%);animation:popin .22s var(--ease)}
.voile.loupe img{display:block;max-width:100%;max-height:78vh;margin:0 auto;border-radius:18px;object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.6);border:1px solid var(--ligne-fort)}
.voile.loupe figcaption{margin-top:12px;text-align:center;font:600 14px var(--fb);color:var(--t1)}
.voile.loupe figcaption span{display:block;margin-top:3px;font:500 11px var(--fm);color:var(--t4)}
.vig.loupe{cursor:zoom-in}

/* ── LE MOUVEMENT, PARTOUT, ET SEULEMENT SI ON LE VEUT ───────────────────
   « globalement ca manque d animation, de motion, de vivant ». Ce que ca
   change : ce qui arrive a l ecran monte en place (les cartes, les lignes,
   les compteurs, l une apres l autre) ; une image grossit un peu sous le
   curseur ; un bouton s enfonce ; la prochaine action respire ; « open now »
   bat. Tout vit sous prefers-reduced-motion : quelqu un qui a demande le
   calme a son systeme ne voit rien bouger. Le remplissage est « backwards »,
   pas « both » : une fois arrivee, la carte rend sa main au survol et au
   glisser-deposer, qui ont leurs propres transformations. */
@media (prefers-reduced-motion: no-preference){
  @keyframes monte{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes respire{0%,100%{box-shadow:0 0 0 0 rgba(var(--ac-rgb),0)}50%{box-shadow:0 0 0 1px rgba(var(--ac-rgb),.35),0 0 36px rgba(var(--ac-rgb),.13)}}
  @keyframes pouls{0%{box-shadow:0 0 0 0 rgba(var(--ac-rgb),.55)}70%{box-shadow:0 0 0 6px rgba(var(--ac-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--ac-rgb),0)}}
  .panneau,.compteurs>*,.nba,.cpt,.ph,.kc,.pk,.kpi,.panel,.hit,.carte,.bloc,.hyp,.ligne-c,.cible,.rech-l,.personne{animation:monte .38s var(--ease) backwards}
  .panneau:nth-child(2),.compteurs>:nth-child(2),.cpt:nth-child(2),.ph:nth-child(2),.kc:nth-child(2),.pk:nth-child(2),.kpi:nth-child(2),.hit:nth-child(2),.cible:nth-child(2){animation-delay:.05s}
  .panneau:nth-child(3),.compteurs>:nth-child(3),.cpt:nth-child(3),.ph:nth-child(3),.kc:nth-child(3),.pk:nth-child(3),.kpi:nth-child(3),.hit:nth-child(3),.cible:nth-child(3){animation-delay:.1s}
  .panneau:nth-child(4),.compteurs>:nth-child(4),.cpt:nth-child(4),.ph:nth-child(4),.kc:nth-child(4),.pk:nth-child(4),.kpi:nth-child(4),.hit:nth-child(4),.cible:nth-child(4){animation-delay:.15s}
  .cpt:nth-child(5),.ph:nth-child(5),.kc:nth-child(5),.pk:nth-child(5),.cible:nth-child(5){animation-delay:.2s}
  .cpt:nth-child(6),.ph:nth-child(6),.kc:nth-child(6),.pk:nth-child(6),.cible:nth-child(6){animation-delay:.25s}
  .cpt:nth-child(7),.ph:nth-child(7),.kc:nth-child(7),.pk:nth-child(7),.cible:nth-child(7){animation-delay:.3s}
  .cpt:nth-child(8),.ph:nth-child(8),.kc:nth-child(8),.pk:nth-child(8),.cible:nth-child(8){animation-delay:.35s}
  .nba{animation:monte .38s var(--ease) backwards,respire 4.5s ease-in-out 1.2s infinite}
  .vig img.pose{transition:opacity .3s ease,transform .35s var(--ease)}
  .cpt:hover .vig img,.kc:hover .vig img,.ph:hover .vig img,.s:hover .vig img,.ligne-c:hover .vig img{transform:scale(1.07)}
  button:not(:disabled):active,.pa:active,.mi:active,.chip-m:active{transform:scale(.97)}
  .pu.chaud::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--vif);margin-right:6px;vertical-align:1px;animation:pouls 1.6s ease-out infinite}
  .ecrans a,.os-installer,.os-sortir,.replier{transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
  .ecrans a:active{transform:scale(.98)}
}