/* ══════════════════════════════════════════════════════════════════
   Le Desk · feuille de style
   Charte v5. Reprise de la maquette validée le 1er octobre 2026.
   L'ancienne feuille reste dans l'étiquette avant-refonte-interface.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --fond:#F4F3EF; --surface:#fff; --bord:#E9E4DA; --bord-f:#DCD5C7;
  --encre:#15171F; --gris:#6E6A60; --pale:#9A958A; --creme:#F3EFE8; --creme2:#F8F6F1;
  --ray:22px; --ombre:0 1px 2px rgba(40,30,10,.04),0 8px 24px rgba(40,30,10,.06);
  --bleu:#2F5BFF; --bleu-f:#1E3FB8; --bleu-c:#E6ECFF; --bleu-b:#C9D5FF;
  --jaune:#FFD23F; --jaune-e:#3A2E00; --jaune-c:#FFF4CC; --jaune-f:#6B5600;
  --vert:#12663D; --vert-c:#DDF5E7; --vert-v:#1FB36B;
  --rouge:#C2410C; --rouge-c:#FFE9E0; --rouge-f:#9A3412;
  --violet:#5B3FC4; --violet-c:#EEE8FF;
  --pastel-b:#D7E3FF; --pastel-p:#FFE0D0; --pastel-v:#E7DCFF;
  --pastel-g:#CFEFD9; --pastel-j:#FFE9A8; --pastel-n:#EFEBE2;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--fond);color:var(--encre);font-family:'Geist',system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.mono{font-family:'Geist Mono',ui-monospace,monospace}
.pousse{flex:1}

/* ═══════════ ossature ═══════════ */
.app{min-height:100vh;display:grid;grid-template-columns:84px minmax(0,1fr);transition:grid-template-columns .18s ease}
.app.ouvert{grid-template-columns:258px minmax(0,1fr)}
@media(max-width:860px){.app.ouvert{grid-template-columns:84px minmax(0,1fr)}}
.ecran{display:none}
.ecran.actif{display:block}

/* ═══════════ rail ═══════════ */
.rail{background:#fff;border-right:1px solid var(--bord);display:flex;flex-direction:column;align-items:center;padding:16px 0;position:sticky;top:0;height:100vh;overflow:hidden;z-index:40}
.rh{flex:none;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 13px}
.rn{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:15px 11px;scrollbar-width:thin;scrollbar-color:var(--bord-f) transparent}
.app.ouvert .rn{padding-left:13px;padding-right:13px}
.rn::-webkit-scrollbar{width:5px}
.rn::-webkit-scrollbar-track{background:transparent}
.rn::-webkit-scrollbar-thumb{background:var(--bord-f);border-radius:99px}
.rb{flex:none;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 13px 0;border-top:1px solid var(--bord)}
.app.ouvert .rh,.app.ouvert .rn,.app.ouvert .rb{align-items:stretch}
.marq{display:flex;align-items:center;gap:10px;width:100%;justify-content:center}
/* replié : la flèche passe sous le logo, qui reste centré */
.app:not(.ouvert) .marq{flex-direction:column;gap:9px}
.los{width:37px;height:37px;border-radius:12px;flex:none;background:linear-gradient(145deg,#4B72FF,#2F5BFF 55%,#1C3BD6);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(47,91,255,.35)}
.los i{width:12px;height:12px;background:var(--jaune);border-radius:3px;transform:rotate(45deg);display:block}
.mnom{display:none;flex:1;min-width:0}
.mnom b{display:block;font-size:15px;letter-spacing:-.025em}
.mnom span{display:block;color:var(--pale);font-size:12.5px}
.plier{width:28px;height:28px;border-radius:9px;flex:none;border:1px solid var(--bord);background:#fff;color:var(--gris);display:flex;align-items:center;justify-content:center}
.plier:hover{background:var(--creme2);color:var(--encre)}
.plier svg{transition:transform .18s ease}
.app.ouvert .mnom{display:block}
.app.ouvert .plier svg{transform:rotate(180deg)}
.rch{display:flex;align-items:center;gap:8px;width:100%;padding:9px 11px;border-radius:11px;background:var(--creme2);border:1px solid var(--bord);color:var(--pale);justify-content:center}
.rch input{background:none;border:none;outline:none;width:100%;display:none}
.app.ouvert .rch{justify-content:flex-start}
.app.ouvert .rch input{display:block}
.sct{display:none;color:var(--pale);font-size:12px;font-weight:700;letter-spacing:.11em;padding:14px 11px 7px}
.sct:first-child{padding-top:0}
.app.ouvert .sct{display:block}
.item{position:relative;width:60px;padding:9px 0 7px;border-radius:13px;color:var(--gris);display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:600;transition:background .12s,color .12s}
.item:hover{background:var(--creme)}
.item.on{background:var(--bleu-c);color:var(--bleu-f)}
.item .cpt{position:absolute;top:3px;right:7px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--jaune);color:var(--jaune-e);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.app.ouvert .item{flex-direction:row;width:100%;justify-content:flex-start;gap:11px;padding:10px 11px;font-size:14px;letter-spacing:-.015em}
.app.ouvert .item .cpt{position:static;margin-left:auto;order:2}
/* un chantier arrêté dans le badge : le rouge plein, pas le jaune d'attente.
   L'étiquette qu'il peut porter se fond dans le badge. */
.item .cpt.rouge{background:var(--rouge);color:#fff}
.item .cpt .etq{background:none;color:inherit;padding:0;font-size:inherit}
.moi-h{position:relative;width:100%}
.moi{display:flex;align-items:center;gap:10px;width:100%;justify-content:center;margin-top:8px;padding:8px;border-radius:14px}
.app.ouvert .moi{border:1px solid var(--bord);background:var(--creme2);padding:10px}
.app.ouvert .moi:hover{background:var(--creme)}
.moi .ini{width:35px;height:35px;border-radius:50%;flex:none;background:linear-gradient(145deg,#FFE27A,#FFD23F);color:var(--jaune-e);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.moi.on .ini{box-shadow:0 0 0 3px var(--bleu-c),0 0 0 4px var(--bleu)}
.moi .q{display:none;text-align:left;min-width:0;flex:1}
.moi .q b{display:block;font-size:13.5px;letter-spacing:-.015em}
.moi .q span{display:block;color:var(--pale);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moi .chev{display:none;color:var(--pale);flex:none}
.app.ouvert .moi .q,.app.ouvert .moi .chev{display:block}
.menu-moi{position:absolute;left:52px;bottom:0;width:214px;background:#fff;border:1px solid var(--bord);border-radius:14px;padding:7px;display:none;z-index:80;box-shadow:0 16px 40px rgba(40,30,10,.18)}
.app.ouvert .menu-moi{left:0;right:0;width:auto;bottom:58px}
.menu-moi.ouvert{display:block}
.menu-moi .tt{padding:9px 10px 11px;border-bottom:1px solid var(--bord);margin-bottom:6px}
.menu-moi .tt b{display:block;font-size:13.5px}
.menu-moi .tt span{color:var(--pale);font-size:13px}
.menu-moi button,.menu-moi a{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 10px;border-radius:9px;font-weight:600;font-size:13.5px}
.menu-moi button:hover,.menu-moi a:hover{background:var(--creme2)}
.menu-moi .sp{height:1px;background:var(--bord);margin:6px 0}
.menu-moi button.sortie,.menu-moi a.sortie{color:var(--rouge-f)}

/* ═══════════ bannière (accueil) ═══════════ */
.banniere{position:relative;overflow:hidden;color:#fff;padding:20px 30px 100px;background:linear-gradient(135deg,#1A36C9 0%,#2F5BFF 55%,#4B72FF 100%)}
.banniere .ha{position:absolute;right:-120px;top:-170px;width:470px;height:470px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,63,.28),transparent 62%)}
.banniere .hb{position:absolute;left:28%;bottom:-210px;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 60%)}
.banniere .in{position:relative}
.bmarque{font-weight:700;font-size:16px}
.bmarque span{opacity:.6;font-weight:500}
.ib{width:36px;height:36px;border-radius:11px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.ib:hover{background:rgba(255,255,255,.2)}
.ib .pc{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:#FF7A59;border:1.5px solid #2F5BFF}
.salut{margin:6px 0 0;font-weight:700;font-size:40px;letter-spacing:-.038em;line-height:1.06}
.bseg{display:flex;gap:3px;padding:4px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:12px}
.bseg button{padding:7px 14px;border-radius:9px;font-size:13.5px;font-weight:600;color:#fff}
.bseg button.on{background:#fff;color:var(--encre)}
.dates-perso{display:none;align-items:center;gap:11px;flex-wrap:wrap;margin-top:18px;padding:13px 15px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.dates-perso.ouvert{display:flex}
.dates-perso label{display:flex;align-items:center;gap:8px;font-size:13.5px;opacity:.85}
.dates-perso input{padding:8px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:#fff;color-scheme:dark}
.dates-perso .np{font-size:13px;opacity:.75}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:11px;margin-top:22px}
.tuile{padding:15px 17px;border-radius:17px;min-width:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.tuile .l{font-size:13px;opacity:.78}
.tuile .v{font-weight:800;font-size:29px;letter-spacing:-.035em;margin-top:3px}
.tuile .d{font-size:12.5px;opacity:.68;margin-top:2px}
.tuile.accent{background:var(--jaune);color:var(--jaune-e);border-color:transparent;box-shadow:0 10px 26px rgba(0,0,0,.2);cursor:pointer}
.tuile.accent .l{opacity:.85}
.tuile.accent .d{opacity:.7}
.remonte{margin-top:-78px;position:relative;z-index:2;padding:0 30px 60px;max-width:1460px}
/* Les missions à débloquer, dans le bandeau : une bande claire sous les
   tuiles, qui se lit d'un coup d'œil sans casser la remontée des cartes. */
.banniere .debloquer{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:12px;padding:12px 15px;border-radius:15px;background:#FFF1EC;color:var(--rouge-f);border:1px solid #F3C9B8}
.banniere .debloquer .pastl{width:26px;height:26px;background:#fff;flex:none}
.banniere .debloquer .quoi{flex:1;min-width:200px;font-size:13.5px}
.banniere .debloquer .quoi b{display:block}
.banniere .debloquer .quoi span{display:block;color:var(--rouge);font-size:13px;margin-top:1px}
.banniere .debloquer .liens{display:flex;gap:7px;flex-wrap:wrap}
.banniere .debloquer .liens a{padding:7px 12px;border-radius:11px;background:#fff;border:1px solid #F3C9B8;color:var(--rouge-f);font-weight:600;font-size:13.5px;text-decoration:none;white-space:nowrap}
.banniere .debloquer .liens a span{font-weight:400;opacity:.75}
.banniere .debloquer .liens a:hover{border-color:var(--rouge)}
/* la bannière : les mêmes segments, mais ce sont des liens */
.bseg a{padding:7px 14px;border-radius:9px;font-size:13.5px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap}
.bseg a.on{background:#fff;color:var(--encre)}
.bseg{flex-wrap:wrap}
a.tuile{text-decoration:none;color:inherit;display:block}
a.tuile:hover{background:rgba(255,255,255,.2)}
a.tuile.accent:hover{background:#FFDC66}

/* ═══════════ barre du haut (écrans intérieurs) ═══════════ */
header.fil{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 28px;background:#fff;border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:30}
header.fil .ch{color:var(--pale);font-size:14px}
header.fil .ch b{color:var(--encre);font-weight:600}
header.fil .ch a{text-decoration:none}
header.fil .ch a:hover{text-decoration:underline}
.ib2{width:36px;height:36px;border-radius:11px;border:1px solid var(--bord);background:#fff;color:var(--gris);display:flex;align-items:center;justify-content:center;position:relative}
.ib2:hover{background:var(--creme2)}
.ib2 .pc{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--rouge);border:1.5px solid #fff}
.corps{padding:26px 28px 70px;max-width:1460px}
.tete{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.tete h1{font-size:31.5px;font-weight:700;letter-spacing:-.035em;line-height:1.1}
.tete p{color:var(--gris);font-size:15px;margin-top:5px}

/* ═══════════ boutons ═══════════ */
.bjaune{padding:10px 17px;border-radius:12px;background:var(--jaune);color:var(--jaune-e);font-weight:700;white-space:nowrap;box-shadow:0 6px 16px rgba(255,190,40,.35)}
.bjaune:hover{background:#FFDC66}
.bs{padding:9px 14px;border-radius:11px;border:1px solid var(--bord-f);background:#fff;font-weight:600;white-space:nowrap}
.bs:hover{background:var(--creme2)}
.bb{padding:9px 15px;border-radius:11px;background:var(--bleu);color:#fff;font-weight:700;white-space:nowrap}
.bb:hover{background:var(--bleu-f)}
/* La couleur d'un bouton dit ce qu'il fait, partout dans le Desk : le vert
   valide (approuver, accepter, mettre en ligne), le rouge supprime ou annule.
   Tout le reste est neutre. Règle posée par la direction le 12 octobre 2026. */
.bvert{padding:9px 15px;border-radius:11px;background:#15803D;color:#fff;font-weight:700;white-space:nowrap}
.bvert:hover{background:#166534}
.bn{padding:9px 15px;border-radius:11px;background:var(--encre);color:#fff;font-weight:700;white-space:nowrap}
/* Le danger se voit avant d'être lu. Un bouton qui supprime, retire ou
   arrête porte le rouge plein : la main hésite avant d'y aller, et c'est
   exactement ce qu'on veut. */
.bd{padding:9px 15px;border-radius:11px;border:1px solid #DC2626;background:#DC2626;color:#fff;font-weight:700;white-space:nowrap}
.bd:hover{background:#B91C1C;border-color:#B91C1C}
/* Le rouge léger : annuler, retirer, désactiver, sans peser autant qu'une suppression. */
.bannule{padding:9px 14px;border-radius:11px;border:1px solid #F3C4C4;background:#fff;color:#B91C1C;font-weight:600;white-space:nowrap;text-decoration:none}
.bannule:hover{background:#FEF2F2;border-color:#E9A3A3}
/* Sa petite sœur : la croix qui retire une ligne. Discrète au repos pour ne
   pas crier sur chaque ligne d'une liste, franchement rouge dès qu'on
   l'approche. */
.bx{width:26px;height:26px;border-radius:9px;border:1px solid var(--bord-f);background:#fff;
  color:var(--pale);font-size:15px;line-height:1;flex:none;display:inline-flex;
  align-items:center;justify-content:center}
.bx:hover{background:var(--rouge);border-color:var(--rouge);color:#fff}
.seg{display:flex;gap:3px;padding:4px;background:#fff;border:1px solid var(--bord);border-radius:12px}
.seg button{padding:7px 14px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--gris)}
.seg button.on{background:var(--encre);color:#fff}
.seg a{padding:7px 14px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--gris);text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg a.on{background:var(--encre);color:#fff}
.seg{flex-wrap:wrap}

/* ═══════════ briques ═══════════ */
.carte{background:var(--surface);border:1px solid var(--bord);border-radius:var(--ray);box-shadow:var(--ombre);margin-bottom:18px}
.ct{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:17px 20px 0}
.ct h2{font-size:16.5px;font-weight:700;letter-spacing:-.025em}
.ct .n{color:var(--pale);font-weight:500}
.cc{padding:15px 20px 20px}
.lien{color:var(--bleu);font-weight:600;font-size:13.5px;text-decoration:none}
.lien:hover{text-decoration:underline}
.etq{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap}
.e-b{background:var(--bleu-c);color:var(--bleu-f)}.e-v{background:var(--vert-c);color:var(--vert)}
.e-j{background:var(--jaune-c);color:var(--jaune-f)}.e-r{background:var(--rouge-c);color:var(--rouge-f)}
.e-u{background:var(--violet-c);color:var(--violet)}.e-g{background:var(--creme);color:var(--gris)}
.pt{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.g2{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:1200px){.g2{grid-template-columns:1fr}}
.g2>*,.g3>*,.val>*,.clients>*,.projets>*,.agents>*,.par>*,.kanban>*{min-width:0}
/* Une colonne unique. Deux colonnes supposent deux piles de hauteur
   comparable ; quand l'une fait le double de l'autre, la page se lit mal et
   la plus courte laisse un grand vide. On empile alors, simplement. */
.pile-cartes{display:block}
.pile-cartes > div > .carte:last-child{margin-bottom:18px}
.g3{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
/* les livrables à décider : deux par rangée, jamais plus, quelle que soit la largeur.
   Au-delà, les cartes rétrécissent et l'aperçu du site devient illisible.
   Ces trois règles visaient « #ec-accueil », l'identifiant de la maquette : le
   Desk ne les recevait pas, et montait jusqu'à trois cartes par rangée. */
.g3.decider,#ec-accueil .carte .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Barre depliee, la colonne se resserre : on repasse a une carte par rangee
   plutot que d'en serrer deux sous 330 px. C'est ce que la maquette prevoit,
   et ce que Fitzerald a retenu apres l'avoir vu — un apercu de site a 296 px
   ne montre plus le site. */
.app.ouvert .g3.decider,.app.ouvert #ec-accueil .carte .g3{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
@media(max-width:1180px){.g3.decider,#ec-accueil .carte .g3{grid-template-columns:minmax(0,1fr)}}
.pile{display:flex}
.pile span{width:29px;height:29px;border-radius:50%;margin-left:-9px;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.pile span:first-child{margin-left:0}
.aj{background:var(--jaune);color:var(--jaune-e)}.ab{background:var(--bleu);color:#fff}
.av{background:var(--vert-v);color:#fff}.au{background:var(--violet);color:#fff}
.ag{background:var(--creme);color:var(--gris)}
/* Les pastilles d'initiales. La maquette les posait en pastel ; sur un écran
   plein de cartes claires, elles s'éteignaient et ne distinguaient plus rien.
   Six couleurs franches, assez contrastées pour que deux clients voisins ne
   se confondent jamais. */
.ac1{background:#2F5BFF;color:#fff}.ac2{background:#E2561B;color:#fff}
.ac3{background:#5B3FC4;color:#fff}.ac4{background:#0E9B5C;color:#fff}
.ac5{background:#C8930B;color:#fff}.ac6{background:#C2185B;color:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;font-weight:600;color:var(--pale);font-size:12px;letter-spacing:.05em;text-transform:none;padding:0 12px 9px}
table.tbl td{padding:11px 12px;border-top:1px solid var(--bord)}
table.tbl tr:hover td{background:var(--creme2)}
/* Un titre de tableau est écrit à l'encre pour que la colonne reste lisible ;
   au survol il redevient un lien, sans quoi on ne sait pas qu'on peut cliquer. */
table.tbl tr:hover .lien{color:var(--bleu);text-decoration:underline}
/* un tableau ne se comprime pas : il garde une largeur lisible et défile
   de côté quand la place manque. Un titre coupé en cinq lignes d'un mot
   ne se lit pas. */
.defile-x{overflow-x:auto;scrollbar-width:thin}
/* ── déposer un fichier ──
   Le champ de fichier du navigateur est laid partout, et il ne ressemble à
   rien de ce que le Desk pose ailleurs. On le cache, et on habille le label
   qui le porte : le clic traverse. */
.fich{display:block;cursor:pointer;border:1.5px dashed var(--bord-f);border-radius:14px;
  background:var(--creme2);padding:18px 16px;text-align:center;transition:border-color .12s,background .12s}
.fich:hover{border-color:var(--bleu);background:var(--bleu-c)}
.fich input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.fich .fi{width:34px;height:34px;border-radius:11px;background:#fff;border:1px solid var(--bord);
  display:flex;align-items:center;justify-content:center;margin:0 auto 9px;color:var(--bleu)}
.fich .ft{display:block;font-weight:700;font-size:13.5px}
.fich .fd{display:block;color:var(--gris);font-size:13px;margin-top:3px}
.fich .fn{display:none;margin-top:9px;font-size:13px;color:var(--bleu-f);font-weight:600;overflow-wrap:anywhere}
.fich.pris{border-style:solid;border-color:var(--vert-v);background:var(--vert-c)}
.fich.pris .fn{display:block;color:var(--vert)}
.fich.pris .fi{color:var(--vert-v)}
.defile-x::-webkit-scrollbar{height:8px}
.defile-x::-webkit-scrollbar-track{background:transparent}
.defile-x::-webkit-scrollbar-thumb{background:var(--bord-f);border-radius:99px}
.defile-x>table.tbl{min-width:820px}
table.tbl td.court,table.tbl th.court{white-space:nowrap}
.jaug{height:8px;border-radius:99px;background:var(--creme);position:relative;overflow:hidden}
.jaug i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--bleu);display:block}
.jaug .sl{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--encre);opacity:.5}
.ctrl{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--bord);font-size:13.5px}
.ctrl:first-child{border-top:none}
.pastl{width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.p-ok{background:var(--vert-c);color:var(--vert)}.p-att{background:var(--jaune-c);color:var(--jaune-f)}
.p-ko{background:var(--rouge-c);color:var(--rouge-f)}
.champ{margin-bottom:14px}
.champ label{display:block;font-weight:600;font-size:13.5px;margin-bottom:5px}
.champ input,.champ select{width:100%;padding:10px 12px;border:1px solid var(--bord-f);border-radius:11px;background-color:#fff}
.champ select{padding-right:36px}
.champ small{display:block;color:var(--pale);font-size:13px;margin-top:4px}
.champ textarea{width:100%;padding:11px 12px;border:1px solid var(--bord-f);border-radius:11px;background:#fff;min-height:104px;resize:vertical;line-height:1.55}
.champ input:focus,.champ select:focus,.champ textarea:focus,#rch:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu-c)}
.champ input::placeholder,.champ textarea::placeholder{color:var(--pale)}
.champ .req{color:var(--rouge)}
.grille-champs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.grille-champs{grid-template-columns:1fr}}
.bascule{width:38px;height:22px;border-radius:99px;background:var(--vert-v);position:relative;flex:none}
.bascule i{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;display:block}
.bascule.off{background:var(--bord-f)}
.bascule.off i{right:auto;left:3px}
/* La case de connexion : une vraie case, dessinée en interrupteur. */
.cnx-case input:not(:checked) + .bascule{background:var(--bord-f)}
.cnx-case input:not(:checked) + .bascule i{right:auto;left:3px}
.cnx-case input:focus-visible + .bascule{outline:2px solid var(--bleu);outline-offset:2px}
.fam{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--pale)}
.fam::after{content:'';flex:1;height:1px;background:var(--bord)}
.fam .n{color:var(--gris);letter-spacing:0}
.fam2{margin-top:24px}
.onglets{display:flex;gap:3px;padding:4px;background:#fff;border:1px solid var(--bord);border-radius:14px;margin-bottom:18px;overflow-x:auto}
.onglets button{padding:9px 14px;border-radius:10px;font-weight:600;font-size:13.5px;color:var(--gris);white-space:nowrap}
.onglets button.on{background:var(--bleu-c);color:var(--bleu-f)}
.onglets a{padding:9px 14px;border-radius:10px;font-weight:600;font-size:13.5px;color:var(--gris);white-space:nowrap;text-decoration:none}
.onglets a.on{background:var(--bleu-c);color:var(--bleu-f)}
.pan{display:none}.pan.actif{display:block}
.panr{display:none}.panr.actif{display:block}

/* ═══════════ miniature de site ═══════════ */
.mini{display:block;overflow:hidden;background:#fff}
.mini .mt{display:flex;align-items:center;gap:6px;padding:7px 9px;border-bottom:1px solid #EDE8DE}
.mini .mt i{width:11px;height:11px;border-radius:3px;display:block;flex:none;background:var(--tone,#4A463E)}
.mini .mt b{font-size:9px;font-weight:700;color:#000}
.mini .mt span{margin-left:auto;display:flex;gap:5px;align-items:center}
.mini .mt em{width:15px;height:3px;border-radius:2px;background:#DCD6CA;display:block}
.mini .mt u{width:23px;height:9px;border-radius:3px;background:var(--acc,#FFD23F);display:block}
.mini .mh{background:var(--tone,#4A463E);color:#fff;padding:13px 12px 14px}
.mini .mh small{font-size:6px;letter-spacing:.18em;opacity:.65;display:block}
.mini .mh strong{display:block;font-size:11.5px;font-weight:700;letter-spacing:-.02em;margin:4px 0 5px;line-height:1.16}
.mini .mh p{font-size:7px;opacity:.6}
.mini .mb{display:flex;gap:5px;margin-top:8px}
.mini .mb u{width:37px;height:11px;border-radius:3px;background:var(--acc,#FFD23F);display:block}
.mini .mb s{width:29px;height:11px;border-radius:3px;border:1px solid rgba(255,255,255,.4);display:block}
.mini .mc{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px 12px 12px;background:#fff}
.mini .mc s{display:block}
.mini .mc s i{display:block;width:11px;height:11px;border-radius:3px;margin-bottom:4px;background:#C9C3B6}
.mini .mc s em{display:block;height:3px;border-radius:2px;background:#DCD6CA;margin-bottom:3px}
.mini .mc s em.k{width:60%}
.m-adjovi{--tone:#4A463E;--acc:#FFD23F}
.m-mie{--tone:#8A5A3B;--acc:#F5C37A}
.m-fund{--tone:#5B3FC4;--acc:#C9B8FF}
.m-pharm{--tone:#2F6B4F;--acc:#9FE3BF}
.m-fram{--tone:#1E3FB8;--acc:#9FB4FF}
.m-coeur{--tone:#A63D5B;--acc:#FFC2D2}
.m-tchite{--tone:#4A6B2F;--acc:#C8E6A0}

/* aperçu de document */
.doc{background:#fff;padding:13px 14px}
.doc .dt{font-size:9.5px;font-weight:700;color:#000;letter-spacing:-.01em;line-height:1.3}
.doc .ds{font-size:6.5px;color:#9A958A;margin-top:3px;letter-spacing:.04em}
.doc .rl{height:1px;background:#EDE8DE;margin:9px 0}
.doc em{display:block;height:3px;border-radius:2px;background:#DCD6CA;margin-bottom:4px}
.doc em.k{width:62%}.doc em.k2{width:84%}
.doc .tb{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:9px}
.doc .tb i{height:11px;border-radius:3px;background:#F2EEE6;display:block}
.doc .tb i.on{background:#E7DCFF}
.doc .sg2{display:inline-block;margin-top:9px;padding:3px 7px;border-radius:4px;background:#EEE8FF;color:#5B3FC4;font-size:6px;font-weight:700;letter-spacing:.06em}

/* ═══════════ cartes de décision ═══════════ */
.dc{border-radius:20px;padding:16px;border:1px solid transparent}
.dc .tg{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.dc .tg span{background:rgba(255,255,255,.75);padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700}
.dc .cad{border-radius:11px;overflow:hidden;box-shadow:0 5px 16px rgba(40,30,10,.13)}
.dc h3{font-size:18px;font-weight:700;letter-spacing:-.028em;margin-top:13px}
.dc .d{font-size:13.5px;opacity:.76;margin-top:4px}
.dc .pd{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(0,0,0,.08)}
.dc .b1{padding:9px 13px;border-radius:11px;background:rgba(255,255,255,.85);font-weight:700;font-size:13.5px}
.dc .b2{padding:9px 15px;border-radius:11px;color:#fff;font-weight:700;font-size:13.5px;background:#15803D!important}
.dc .b2:hover{background:#166534!important}
.c1{background:var(--pastel-b);color:#1B3480} .c1 .b2{background:#2F5BFF}
.c2{background:var(--pastel-p);color:#8A3A12} .c2 .b2{background:#C2410C}
.c3{background:var(--pastel-v);color:#3E2A8F} .c3 .b2{background:#5B3FC4}
.c4{background:var(--pastel-g);color:#0E5432} .c4 .b2{background:#12663D}
/* Quatre teintes de plus : la maquette en posait quatre, et le Desk peut
   porter huit agents. Sans elles, le cinquieme agent et les suivants
   retombaient tous sur la meme couleur. */
.c5{background:var(--pastel-j);color:#5E4700} .c5 .b2{background:#A8760A}
.c6{background:#FFDDE8;color:#8A1F3C} .c6 .b2{background:#B01256}
.c7{background:#D4F1F4;color:#0C6D78} .c7 .b2{background:#0C6D78}
.c8{background:var(--pastel-n);color:#434E5E} .c8 .b2{background:#434E5E}
a.b1,a.b2{text-decoration:none;display:inline-block}

/* parcours */
.par{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:900px){.par{grid-template-columns:repeat(2,minmax(0,1fr))}}
.carte.pleine{grid-column:1/-1;margin-bottom:0}
.ps{border-radius:17px;padding:15px;text-align:left;width:100%;transition:transform .12s,box-shadow .12s}
button.ps:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(40,30,10,.13)}
.ps .h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;opacity:.85}
.ps .v{display:block;font-weight:700;font-size:30.5px;letter-spacing:-.03em;margin:8px 0 3px}
.ps .d{display:block;font-size:12.5px;opacity:.68}
.ps .cl{display:flex;margin-top:12px}
.ps .cl span{width:27px;height:27px;border-radius:50%;margin-left:-8px;border:2px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;background:#fff}
.ps .cl span:first-child{margin-left:0}
.ps .cl span.plus{background:rgba(255,255,255,.75)}
a.ps{text-decoration:none;display:block}
a.ps:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(40,30,10,.13)}
a.rang{text-decoration:none}
a.rang:hover{filter:brightness(.98)}

/* barres */
.barres{display:flex;align-items:flex-end;gap:8px;height:118px}
.barres .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;height:100%}
.barres .b i{width:100%;border-radius:7px 7px 0 0;background:var(--bleu-b);display:block}
.barres .b.fort i{background:linear-gradient(180deg,#4B72FF,#2F5BFF)}
.barres .b .lg{font-size:12px;color:var(--pale)}

/* en direct */
.direct{border-radius:16px;padding:15px 16px;background:var(--encre);color:#fff}
.direct .l1{display:flex;align-items:center;gap:10px}
.direct b{font-weight:700;font-size:14.5px}
.direct .s{opacity:.68;font-size:13px;margin-top:1px}
.direct .pc2{margin-left:auto;font-weight:700;font-size:16px}
.direct .br{height:6px;border-radius:99px;background:rgba(255,255,255,.16);margin:12px 0 9px;overflow:hidden}
.direct .br i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7CF2A8,#4B72FF)}
.direct .lg2{font-family:'Geist Mono',monospace;font-size:12.5px;opacity:.6}
.rang{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;margin-top:9px;border:1px solid transparent}
.rang b{font-size:13.5px}
.rang .s{display:block;font-size:13px;opacity:.75}

/* ═══════════ Valider ═══════════ */
.val{display:grid;grid-template-columns:288px minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:1060px){.val{grid-template-columns:1fr}}
/* une seule colonne : l'arbitrage passe devant le reste.
   C'est la seule chose qu'on vient faire sur cet écran. */
@media(max-width:1200px){.val .decider{order:-1}}
.fitem{display:flex;gap:11px;align-items:center;padding:10px;border:1px solid transparent;border-radius:13px;margin-bottom:6px;width:100%;text-align:left}
.fitem:hover{background:var(--creme2)}
a.fitem{text-decoration:none;color:inherit}
.fitem.on{background:var(--bleu-c);border-color:var(--bleu-b)}
.fitem .vg{width:52px;height:38px;border-radius:7px;flex:none;overflow:hidden;border:1px solid var(--bord)}
.fitem .t{font-weight:700;font-size:13.5px;letter-spacing:-.015em}
.fitem .d{color:var(--gris);font-size:13px}
.navig{border:1px solid var(--bord);border-radius:14px;overflow:hidden;background:#fff}
.nbar{display:flex;align-items:center;gap:9px;padding:9px 13px;background:var(--creme2);border-bottom:1px solid var(--bord)}
.feux{display:flex;gap:4px}
.feux i{width:8px;height:8px;border-radius:50%;background:#D6D0C4;display:block}
.url{font-family:'Geist Mono',monospace;font-size:12.5px;color:var(--gris);flex:1}
.apps{display:flex;gap:3px;padding:3px;background:var(--creme);border-radius:9px}
.apps button{padding:5px 11px;border-radius:7px;font-size:13px;font-weight:600;color:var(--gris)}
.apps button.on{background:#fff;color:var(--encre);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.apercu{transition:max-width .25s ease;margin:0 auto;max-width:100%}
.apercu[data-app="tablette"]{max-width:620px}
.apercu[data-app="mobile"]{max-width:340px}
.stete{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--bord);font-size:13px}
.stete .ln{margin-left:auto;display:flex;gap:15px;color:var(--gris)}
.shero{background:#4A463E;color:#fff;padding:34px 28px}
.shero .kk{font-size:12px;letter-spacing:.15em;opacity:.7}
.shero h3{font-size:27px;font-weight:700;letter-spacing:-.03em;margin:8px 0 6px}
.shero p{opacity:.8;font-size:13.5px}
.shero .bt{display:flex;gap:9px;margin-top:17px}
.shero .bt span{padding:9px 16px;border-radius:9px;font-size:13.5px;font-weight:600}
.scols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:22px 28px}
.scols .c i{display:block;width:28px;height:28px;border-radius:8px;margin-bottom:9px}
.scols .c b{display:block;font-size:14px}
.scols .c span{color:var(--gris);font-size:13.5px}
.voile-b{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:14px;background:var(--jaune-c);border:1px solid #F0DFA0;margin-bottom:16px;font-size:13.5px;color:var(--jaune-f)}
.voile-b b{color:var(--jaune-e)}

/* ═══════════ Missions ═══════════ */
/* les colonnes ne se laissent plus écraser : elles gardent une largeur
   minimale et le tableau défile de côté quand la place manque. */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(296px,1fr));gap:14px;align-items:start;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.kanban::-webkit-scrollbar{height:8px}
.kanban::-webkit-scrollbar-thumb{background:var(--bord-f);border-radius:99px}
.fiche{cursor:pointer;transition:transform .12s,box-shadow .12s}
.fiche:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(40,30,10,.12)}
.col{border-radius:20px;padding:13px;border:1px solid transparent}
.col .ch{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;padding:2px 5px 12px}
.col .ch .n{margin-left:auto;opacity:.6;font-weight:600}
.fiche{background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:15px;padding:13px;margin-bottom:10px;color:var(--encre)}
.fiche:last-child{margin-bottom:0}
.fiche .cad{border-radius:9px;overflow:hidden;margin-bottom:11px;box-shadow:0 3px 10px rgba(40,30,10,.1)}
.fiche .t{font-weight:700;letter-spacing:-.02em;margin:7px 0 4px;font-size:15px}
.fiche .d{color:var(--gris);font-size:13px}
.fiche .pd{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid var(--bord);font-size:13px;color:var(--gris)}
.avance{height:5px;border-radius:99px;background:var(--creme);margin-top:10px;overflow:hidden}
.avance i{display:block;height:100%;border-radius:99px;background:var(--bleu)}
.echec{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:17px;background:var(--rouge-c);border:1px solid #F3C9B8;margin-bottom:18px}
.dc .t2{display:block;font-size:16px;font-weight:700;letter-spacing:-.025em;margin-top:4px}
.plus-sites{width:100%;padding:12px;border-radius:13px;background:rgba(255,255,255,.65);border:1px dashed rgba(14,84,50,.35);color:#0E5432;font-weight:700;font-size:13.5px}
.plus-sites:hover{background:#fff}
.vue-m[hidden]{display:none}
table.tbl tr[data-m]{cursor:pointer}
.jcl{display:flex;gap:3px;padding:4px;background:#fff;border:1px solid var(--bord);border-radius:12px;flex-wrap:wrap}

/* ═══════════ Projets ═══════════ */
/* « auto-fill » et non « auto-fit » : avec un seul projet, « auto-fit »
   fait disparaitre les colonnes vides et la carte s'etire sur toute la
   largeur — quatre chiffres perdus dans 1300 px. La maquette ecrit
   « auto-fit », mais elle montre toujours trois projets : le cas ne s'y est
   jamais pose. Avec « auto-fill », une carte garde la taille qu'elle aurait
   parmi d'autres, et la place libre se voit. */
.projets{display:grid;grid-template-columns:repeat(auto-fill,minmax(372px,1fr));gap:16px}
.pj{display:block;text-align:left;padding:0;background:#fff;border:1px solid var(--bord);border-radius:20px;box-shadow:var(--ombre);transition:border-color .12s,transform .12s,box-shadow .12s;width:100%}
.pj:hover{border-color:var(--bord-f);transform:translateY(-2px);box-shadow:0 10px 26px rgba(40,30,10,.12)}
.pj .dd{display:block;padding:20px}
.pj .hh{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.pj .sq{width:48px;height:48px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;letter-spacing:-.02em}
.pj .t{display:block;font-weight:700;font-size:19.5px;letter-spacing:-.03em}
.pj .cl2{display:block;color:var(--pale);font-size:13px;margin-top:2px}
.pj .d{display:block;color:var(--gris);font-size:13.5px;line-height:1.55}
.pj .chif{display:flex;margin:16px 0;border:1px solid var(--bord);border-radius:13px;overflow:hidden}
.pj .ch2{flex:1;padding:11px 12px;border-left:1px solid var(--bord);min-width:0}
.pj .ch2:first-child{border-left:none}
.pj .ch2 b{display:block;font-weight:700;font-size:17px;letter-spacing:-.025em}
.pj .ch2 span{display:block;color:var(--pale);font-size:12px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj .avc{display:block}
.pj .lb{display:flex;justify-content:space-between;font-size:13px;color:var(--gris);margin-bottom:6px}
.pj .lb b{color:var(--encre)}
.pj .pf{display:flex;align-items:center;gap:9px;margin-top:15px;padding-top:13px;border-top:1px solid var(--bord)}
.pj .ec{color:var(--gris);font-size:13px}
.pj .al{display:block;margin-top:12px;padding:9px 12px;border-radius:11px;background:var(--rouge-c);color:var(--rouge-f);font-size:13px;font-weight:600}
.ul-t{background:linear-gradient(135deg,#3B2E8F 0%,#5B3FC4 60%,#7A5FE0 100%);color:#fff;border-radius:22px;padding:24px 26px;margin-bottom:18px;position:relative;overflow:hidden}
.ul-t .hl{position:absolute;right:-90px;top:-130px;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,63,.22),transparent 62%)}
.ul-t .in{position:relative}
.ul-t h2{font-size:27px;font-weight:700;letter-spacing:-.032em}
.ul-c{display:flex;gap:26px;flex-wrap:wrap;margin-top:17px}
.ul-c .c .v{font-weight:800;font-size:22.5px;letter-spacing:-.025em}
.ul-c .c .l{font-size:12.5px;opacity:.72}
/* les missions d'un projet : des cartes qui s'ouvrent, pas un tableau muet */
.mcartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:14px}
.mc2{border-radius:18px;padding:16px;text-align:left;width:100%;border:1px solid transparent;transition:transform .12s,box-shadow .12s}
.mc2:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(40,30,10,.14)}
a.mc2{display:block;color:inherit;text-decoration:none}
.mc2 .pd2 b{font-weight:700}
.mc2 .hh{display:flex;align-items:center;gap:7px;margin-bottom:11px}
.mc2 .t{display:block;font-weight:700;font-size:18px;letter-spacing:-.028em}
.mc2 .d{display:block;font-size:13.5px;opacity:.76;margin-top:5px;line-height:1.5}
.mc2 .avance{display:block;margin-top:13px}
.mc2 .pd2{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(0,0,0,.08)}
.mc2 .mm{font-size:13px;opacity:.78}

.circuit{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.niv{display:flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid var(--bord);border-radius:13px;background:#fff}
.niv .num{width:23px;height:23px;border-radius:50%;background:var(--violet-c);color:var(--violet);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex:none}
.fleche{color:var(--pale);font-weight:700}

/* ═══════════ Clients ═══════════ */
.clients{display:grid;grid-template-columns:272px minmax(0,1fr);gap:18px;align-items:start}
#detail-client .g2{grid-template-columns:repeat(auto-fit,minmax(430px,1fr))}
#detail-client .g3{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media(max-width:1060px){.clients{grid-template-columns:1fr}}
.cl{display:flex;gap:11px;align-items:center;padding:10px 11px;border-radius:13px;border:1px solid transparent;width:100%;text-align:left;margin-bottom:4px}
.cl:hover{background:var(--creme2)}
.cl.on{background:var(--bleu-c);border-color:var(--bleu-b)}
a.cl{text-decoration:none;color:inherit}
.cl .t{display:block;font-weight:700;font-size:13.5px}
.cl .d{display:block;font-size:13px;color:var(--gris)}
.cl[hidden]{display:none}
.vide3{padding:22px 12px;text-align:center;color:var(--pale);font-size:13.5px}
.secret{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--bord);border-radius:12px;margin-bottom:8px;background:var(--creme2)}
.secret .t{font-weight:600;font-size:13.5px}
.secret .v{font-family:'Geist Mono',monospace;font-size:13px;color:var(--pale)}
.chrono{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--bord);font-size:13.5px}
.chrono .q{width:76px;flex:none;color:var(--pale);font-size:13px}
/* l'historique d'un client : une ligne par événement, sur toute la largeur */
.hline{display:flex;align-items:center;gap:16px;padding:11px 0;border-top:1px solid var(--bord);font-size:13.5px}
.hline .hq{width:92px;flex:none;color:var(--pale);font-size:13px}
.hline .ht{flex:1;min-width:0}
.hline .hc{flex:none;color:var(--gris);font-size:13px}

/* ═══════════ Agents ═══════════ */
.agents{display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:18px}
@media(max-width:1040px){.agents{grid-template-columns:1fr}}
.agent{border-radius:20px;padding:22px;border:1px solid transparent}
.agent.avenir{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:transparent;border:1.5px dashed var(--bord-f);color:var(--gris);justify-content:center;min-height:210px}
.agent.avenir:hover{border-color:var(--bleu);background:var(--bleu-c);color:var(--bleu-f)}
.agent.avenir .av-cadre{width:52px;height:52px;border-radius:15px;border:1.5px dashed var(--bord-f);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:300;margin-bottom:14px}
.agent.avenir:hover .av-cadre{border-color:var(--bleu)}
.agent.avenir .av-t{display:block;font-size:18px;font-weight:700;letter-spacing:-.025em;color:var(--encre)}
.agent.avenir:hover .av-t{color:var(--bleu-f)}
.agent.avenir .av-d{display:block;font-size:13.5px;line-height:1.55;margin-top:6px;opacity:.8}
.agent.ouvrable{cursor:pointer;transition:transform .12s,box-shadow .12s}
.agent.ouvrable:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(40,30,10,.14)}
.reg-bloc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.agent .tt{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.agent .rd{width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center}
.agent .rd .vis{border-radius:15px;box-shadow:0 4px 12px rgba(40,30,10,.16)}
.agent h3{font-size:20.5px;font-weight:700;letter-spacing:-.028em}
.agent .role{font-size:13.5px;opacity:.7;margin-top:1px}
.agent .ds{font-size:14.5px;line-height:1.6;opacity:.82;margin-bottom:17px}
.agent .ch3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:17px}
.agent .ch3 .c{background:rgba(255,255,255,.65);border-radius:13px;padding:13px 14px}
.agent .ch3 .v{font-weight:700;font-size:20.5px;letter-spacing:-.025em}
.agent .ch3 .l{font-size:13px;opacity:.65;margin-top:2px}
.agent .bt{width:100%;padding:11px;border-radius:12px;background:rgba(255,255,255,.85);font-weight:700}
.brief{font-family:'Geist Mono',monospace;font-size:13px;line-height:1.75;background:var(--encre);color:#D6D0C4;border-radius:14px;padding:16px 18px;white-space:pre-wrap;overflow-x:auto}
.brief b{color:#7CF2A8;font-weight:500}
.brief u{color:var(--jaune);text-decoration:none}

/* ═══════════ Journal ═══════════ */
.jour{display:flex;align-items:center;gap:10px;padding:10px 13px;margin:18px 0 4px;background:var(--creme);border-radius:11px;font-weight:700;font-size:13.5px}
.jour:first-child{margin-top:0}
.jour .tot{font-family:'Geist Mono',monospace;color:var(--gris);font-weight:600}

/* ═══════════ la recherche : un « aller à », pas un moteur ═══════════ */
.rch-h{position:relative;width:100%}
/* barre repliée : la recherche s'ouvre en débordant sur le contenu, sinon
   le champ serait invisible et le bouton ne servirait à rien. */
.app:not(.ouvert) .rch{cursor:pointer}
.app:not(.ouvert) .rch-h.deplie .rch{
  position:absolute;left:0;top:0;width:302px;z-index:88;background:#fff;
  justify-content:flex-start;box-shadow:0 10px 30px rgba(40,30,10,.18);
}
.app:not(.ouvert) .rch-h.deplie .rch input{display:block}
.app:not(.ouvert) .palette{left:0;top:48px;width:302px}
.palette{position:absolute;left:0;top:calc(100% + 8px);width:300px;max-height:340px;overflow-y:auto;background:#fff;border:1px solid var(--bord);border-radius:15px;box-shadow:0 18px 44px rgba(40,30,10,.2);padding:7px;display:none;z-index:85}
.app:not(.ouvert) .palette{left:60px;top:0}
.palette.ouvert{display:block}
.palette .gr{color:var(--pale);font-size:12px;font-weight:700;letter-spacing:.1em;padding:9px 10px 5px}
/* Les entrées sont des liens (desk.js les rend en <a>) ; la maquette les
   écrivait en <button>. On habille les deux, sinon la palette rend nue. */
.palette a,.palette button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:10px;font-size:13.5px;color:inherit}
/* le survol est limité à la palette du rail : agents.php appelle aussi
   « palette » ses pastilles de couleur, qui ne doivent pas blanchir */
.palette a:hover,.rch-h .palette button:hover{background:var(--creme2)}
/* l'entrée survolée au clavier : la même teinte que le rail pour « ici »,
   pour qu'on la distingue d'un simple passage de souris */
.palette a.surv,.palette button.surv{background:var(--bleu-c);color:var(--bleu-f)}
.palette a .ic,.palette button .ic{width:26px;height:26px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.palette a b,.palette button b{font-weight:600}
.palette a span.sb,.palette button span.sb{display:block;color:var(--pale);font-size:12.5px}
.palette .vide{padding:16px 10px;text-align:center;color:var(--pale);font-size:13.5px}
/* la dernière ligne : chercher dans tout le Desk. Séparée d'un trait, en
   bleu, pour dire qu'elle ne mène pas à une fiche mais à une page. */
.palette .chercher{margin-top:6px;border-top:1px solid var(--bord);border-radius:0 0 10px 10px;padding-top:10px;color:var(--bleu-f)}
.palette .chercher b{font-weight:600;overflow-wrap:anywhere}
.palette .chercher .ic{background:var(--bleu-c);color:var(--bleu-f)}

/* ═══════════ notifications ═══════════ */
.notifs{position:fixed;right:28px;top:62px;width:342px;max-height:72vh;overflow-y:auto;background:#fff;border:1px solid var(--bord);border-radius:18px;box-shadow:0 20px 50px rgba(40,30,10,.22);padding:8px;display:none;z-index:95}
.notifs.ouvert{display:block}
.notifs{overflow-x:hidden}
.notifs .nt{display:flex;align-items:center;gap:9px;padding:11px 12px 12px;border-bottom:1px solid var(--bord)}
.notifs .nt .bs{padding:5px 9px;font-size:13px;flex:none}
.notifs .tout-lu{display:block;width:100%;margin:8px 0 2px;padding:8px;border-radius:10px;background:var(--creme2);border:1px solid var(--bord);font-weight:600;font-size:13.5px;color:var(--gris)}
.notifs .tout-lu:hover{background:var(--creme);color:var(--encre)}
.notifs .nt b{font-size:14.5px;letter-spacing:-.02em;flex:1}
.notifs .gr{color:var(--pale);font-size:12px;font-weight:700;letter-spacing:.1em;padding:10px 12px 6px}
.notifs .nl{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 12px;border-radius:12px;font-size:13.5px}
.notifs .nl:hover{background:var(--creme2)}
.notifs .nl .ic{width:28px;height:28px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
/* trois groupes : en attente de vous (jaune), arrêté (rouge), surveillance
   (bleu). L'icône dit le groupe avant que le titre soit lu. */
.notifs .nl .ic.e-j{background:var(--jaune-c);color:var(--jaune-f)}
.notifs .nl .ic.e-r{background:var(--rouge-c);color:var(--rouge-f)}
.notifs .nl .ic.e-b{background:var(--bleu-c);color:var(--bleu-f)}
.notifs .gr+.gr{margin-top:4px}
.notifs .nl+.gr{margin-top:6px;border-top:1px solid var(--bord);padding-top:12px}
.notifs .nl .tx{flex:1;min-width:0;text-align:left;font-size:13.5px;line-height:1.45}
.notifs .nl .hr{display:block;color:var(--pale);font-size:12.5px;margin-top:2px}
.notifs .nl .lu{width:24px;height:24px;border-radius:50%;flex:none;border:1px solid var(--bord);color:var(--pale);font-size:12.5px;display:flex;align-items:center;justify-content:center}
.notifs .nl .lu:hover{background:var(--vert-c);color:var(--vert);border-color:var(--vert-c)}
.notifs .nl[data-lu="1"]{opacity:.5}
.notifs .nl[data-lu="1"] .lu{background:var(--vert-c);color:var(--vert);border-color:var(--vert-c)}
.notifs .vide2{padding:22px 12px;text-align:center;color:var(--pale);font-size:13.5px}
.notifs .pied{padding:10px 12px 6px;border-top:1px solid var(--bord);margin-top:6px}

/* ═══════════ page de commande ═══════════ */
.kinds2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.kinds2{grid-template-columns:1fr}}
.kind2{display:flex;gap:11px;align-items:center;padding:15px;border-radius:16px;text-align:left;border:2px solid transparent;background:var(--creme2)}
.kind2:hover{background:var(--creme)}
.kind2.on{border-color:currentColor}
.kind2 .p{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
/* Ici la pastille est un carre arrondi, pas un rond : le visage garde donc
   son propre arrondi au lieu d'etre decoupe. */
.kind2 .p.pv{background:none;overflow:hidden}
.kind2 .p.pv .vis{width:100%;height:100%;border-radius:11px}
.kind2 .t{display:block;font-weight:700;font-size:15px;letter-spacing:-.02em}
.kind2 .d{display:block;font-size:13px;opacity:.72;margin-top:2px}
/* Le choix d'une commande : un agent par carte, ce qu'il fait en lignes. */
.choix-agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
@media(max-width:760px){.choix-agents{grid-template-columns:1fr}}
.choix-agent{padding:18px;margin:0}
.choix-tete{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.choix-tete b{display:block;font-size:18px;letter-spacing:-.025em}
.choix-tete span span{display:block;font-size:13.5px;opacity:.75;margin-top:1px}
.choix-vis{width:46px;height:46px;flex:none;display:flex}
.choix-vis .vis{width:100%;height:100%}
.choix-act{display:flex;gap:12px;align-items:center;padding:13px 15px;border-radius:14px;background:rgba(255,255,255,.7);color:inherit;text-decoration:none;margin-top:8px;border:2px solid transparent}
.choix-act:hover{background:#fff;border-color:currentColor}
.choix-act b{display:block;font-size:15px;letter-spacing:-.015em}
.choix-act span span{display:block;font-size:13px;opacity:.72;margin-top:2px}
.choix-fl{font-size:18px;font-weight:700;opacity:.6}
.etapes .et{display:flex;gap:11px;padding:9px 0}
.etapes .n2{width:24px;height:24px;border-radius:50%;flex:none;background:var(--bleu-c);color:var(--bleu-f);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.etapes .et b{font-size:13.5px}
.etapes .s2{display:block;color:var(--gris);font-size:13px;margin-top:1px}

.jeton{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--bord);border-radius:14px;margin-bottom:10px;background:var(--creme2);flex-wrap:wrap}
.jeton:last-of-type{margin-bottom:0}
.jeton .jt{font-size:14px;font-weight:600;letter-spacing:.02em;flex:none;min-width:112px}
.jeton .jp{flex:none}
.jeton .jd{flex:1 1 150px;min-width:0;font-size:13.5px}
.jeton .ju{flex:none;min-width:80px;text-align:right;font-size:13.5px;font-weight:600}
.jeton > button{flex:none}
@media(max-width:620px){.jeton .ju{text-align:left}}
.jeton .js{display:block;color:var(--pale);font-size:12.5px;font-weight:400;margin-top:2px}


/* ═══════════ comparaison avant / après ═══════════ */
.diff{background:#fff;border:1px solid var(--bord);border-radius:14px;overflow:hidden}
.diff-tete{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bord);color:var(--pale);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:none}
.diff-tete span{background:var(--creme2);padding:11px 16px}
.diff-l{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bord);border-top:1px solid var(--bord)}
.diff-l .dv{padding:13px 16px;font-size:13.5px;line-height:1.6;background:#fff}
.diff-l .avant{background:#FFF6F3;color:#8A3A12;text-decoration:line-through;text-decoration-color:rgba(138,58,18,.35)}
.diff-l .apres{background:#F4FCF7;color:#0E5432}
@media(max-width:760px){.diff-tete,.diff-l{grid-template-columns:1fr}}

/* ── comparaison : deux colonnes, un seul texte de chaque côté ──
   comparer_textes() rend tout le texte d'un bloc et marque les écarts
   avec <del> et <ins>. On souligne les écarts, pas la colonne entière. */
.diff .dcol{padding:15px 17px;font-size:13.5px;line-height:1.7;background:#fff;min-width:0;overflow-wrap:anywhere}
.diff .dcol del{background:#FFE1D5;color:#8A3A12;text-decoration:line-through;text-decoration-color:rgba(138,58,18,.45);border-radius:3px;padding:0 2px}
.diff .dcol ins{background:#D5F5E3;color:#0E5432;text-decoration:none;border-radius:3px;padding:0 2px}
.diff-seul{padding:17px 19px;font-size:14px;line-height:1.75;background:#fff;border:1px solid var(--bord);border-radius:14px;overflow-wrap:anywhere}
.diff[hidden],.diff-seul[hidden]{display:none}

/* un texte brut qui garde ses retours à la ligne */
.brut{white-space:pre-wrap;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* le cadre d'aperçu d'un site : l'image vient du site lui-même */
.cadre-site{width:100%;height:520px;border:none;display:block;background:#fff}
.apercu[data-app="mobile"] .cadre-site{height:600px}

/* la pastille d'une vignette de file, quand il n'y a pas d'image */
.vg-l{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:700;font-size:11.5px;letter-spacing:.02em}

/* une file vide : ce n'est pas une panne, c'est du travail fini */
.fini{text-align:center;padding:52px 26px}
.fini .co{font-size:32.5px;line-height:1}
.fini b{display:block;font-size:20.5px;letter-spacing:-.025em;margin-top:11px}
.fini p{color:var(--gris);margin-top:7px}

/* ═══════════ page de connexion ═══════════ */
.connexion{position:fixed;inset:0;z-index:200;display:none;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--fond)}
.connexion.vu{display:grid}
.cnx-gauche{position:relative;overflow:hidden;color:#fff;padding:46px 48px;display:flex;align-items:center;background:linear-gradient(135deg,#1A36C9 0%,#2F5BFF 55%,#4B72FF 100%)}
.cnx-gauche .ha{position:absolute;right:-130px;top:-170px;width:470px;height:470px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,63,.3),transparent 62%)}
.cnx-gauche .hb{position:absolute;left:-90px;bottom:-200px;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 60%)}
.cnx-dedans{position:relative;max-width:540px}
.cnx-phrase{font-size:31.5px;font-weight:700;letter-spacing:-.035em;line-height:1.22;margin:38px 0 32px;text-wrap:balance}
.cnx-liste .cnx-l{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-top:1px solid rgba(255,255,255,.16)}
.cnx-liste .cnx-l:first-child{border-top:none}
.cnx-p{width:34px;height:34px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:rgba(159,180,255,.26);color:#C9D5FF}
.cnx-liste b{font-weight:700}
.cnx-liste .s4{display:block;opacity:.7;font-size:13.5px;margin-top:2px}
.cnx-visages{display:flex;gap:18px;flex-wrap:wrap;margin:36px 0 4px}
.cnx-v{display:flex;flex-direction:column;align-items:center;gap:9px}
.cnx-libre{width:66px;height:66px;border-radius:19px;border:1.5px dashed rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:300;color:#fff}
.cnx-v.libre b{opacity:.5;font-weight:500}
.cnx-v b{font-size:13.5px;font-weight:600;opacity:.85}
.cnx-v .vis{box-shadow:0 10px 24px rgba(0,0,0,.22)}
.vis{display:block;border-radius:19px}
/* ── un visage a la place d'une lettre ──
   Le visage garde le cadre de ce qu'il remplace : meme diametre, meme place
   dans la pile, meme bordure blanche. C'est le cadre qui arrondit, le visage
   se contente de le remplir — sans quoi un carre arrondi de 19 px dans un
   rond de 27 laisserait quatre coins vides. */
.pile span.pv,.av.av-vis{background:none;overflow:hidden;padding:0}
.pile span.pv .vis,.av.av-vis .vis{width:100%;height:100%;border-radius:0}
/* Dans le journal, l'etiquette porte le nom : le visage le precede, assez
   petit pour ne pas pousser la colonne. */
.etq .vis{width:14px;height:14px;border-radius:4px;flex:none}
.cnx-pied{margin-top:34px;font-size:14px;opacity:.75;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.cnx-droite{display:flex;align-items:center;justify-content:center;padding:40px 32px;overflow-y:auto}
.cnx-form{width:min(392px,100%)}
.cnx-form h1{font-size:37px;font-weight:700;letter-spacing:-.04em}
.cnx-sous{color:var(--gris);font-size:15px;margin:7px 0 26px}
.cnx-alerte{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:13px;background:var(--rouge-c);color:var(--rouge-f);font-size:13.5px;margin-bottom:18px}
.cnx-mdp{position:relative;display:block}
.cnx-mdp input{padding-right:84px}
.cnx-oeil{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:6px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--gris);background:var(--creme2)}
.cnx-oeil:hover{background:var(--creme);color:var(--encre)}
.case{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--gris);cursor:pointer}
.cnx-case{display:flex;align-items:center;gap:11px;margin:4px 0 20px;font-size:13.5px;color:var(--gris);cursor:pointer}
.cnx-ok{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--vert-c);color:var(--vert);font-size:25px;font-weight:700;margin-bottom:18px}
.cnx-rappel{border:1px solid var(--bord);border-radius:14px;padding:4px 15px;margin-top:20px}
.cnx-form[hidden]{display:none}
.cnx-note{color:var(--pale);font-size:13px;line-height:1.6;margin-top:22px;padding-top:18px;border-top:1px solid var(--bord)}
.cnx-alerte[hidden]{display:none}
@media(max-width:980px){.connexion.vu{grid-template-columns:minmax(0,1fr)}.connexion .cnx-gauche{display:none}}

/* ═══════════ le bandeau de confirmation ═══════════ */
/* ── la confirmation d'un geste grave ──
   Le navigateur sait poser une question, mais il la pose avec ses mots, sa
   police et ses boutons — et on finit par cliquer « OK » sans lire. Celle-ci
   est de la maison : elle nomme ce qui va se passer, et son bouton est rouge. */
.voile-m{position:fixed;inset:0;background:rgba(21,23,31,.55);display:none;z-index:200;
  align-items:center;justify-content:center;padding:22px}
.voile-m.ouvert{display:flex}
.modale{background:#fff;border-radius:20px;max-width:430px;width:100%;padding:24px 26px 22px;
  box-shadow:0 30px 70px rgba(0,0,0,.35)}
.modale .mi{width:44px;height:44px;border-radius:14px;background:var(--rouge-c);color:var(--rouge);
  display:flex;align-items:center;justify-content:center;font-size:23.5px;font-weight:800;margin-bottom:14px}
.modale h3{font-size:18px;font-weight:700;letter-spacing:-.025em}
.modale p{color:var(--gris);font-size:14px;line-height:1.6;margin-top:7px}
.modale .mb{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.modale .mb .bd,.modale .mb .bs{flex:1;text-align:center;padding:11px 16px}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:120;
  display:flex;align-items:center;gap:12px;max-width:min(560px,92vw);
  padding:14px 18px;border-radius:15px;background:var(--encre);color:#fff;
  box-shadow:0 18px 44px rgba(0,0,0,.3);opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;font-size:14px;
}
.toast.vu{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast .ic2{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;background:rgba(255,255,255,.16)}
.toast.ok .ic2{background:var(--vert-v);color:#06301c}
.toast.att .ic2{background:var(--jaune);color:var(--jaune-e)}
.toast b{display:block}
.toast span.s3{display:block;opacity:.7;font-size:13px;margin-top:2px}
.toast .x{margin-left:6px;opacity:.6;font-size:14px}
.toast .x:hover{opacity:1}

/* ═══════════ modale ═══════════ */
.voile{position:fixed;inset:0;background:rgba(21,23,31,.45);z-index:90;display:none;align-items:center;justify-content:center;padding:24px}
.voile.ouvert{display:flex}
.modale{background:#fff;border-radius:22px;width:min(540px,100%);max-height:90vh;overflow:auto;box-shadow:0 20px 50px rgba(40,30,10,.25);padding:24px}
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.kind{display:flex;gap:10px;align-items:center;padding:13px;border:1px solid var(--bord);border-radius:14px;background:#fff;text-align:left}
.kind.on{border-color:var(--bleu);background:var(--bleu-c)}
.kind.eteint{opacity:.45}
.kind .p{width:31px;height:31px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;flex:none}
.kind .t{font-weight:700;font-size:13.5px}
.kind .d{color:var(--gris);font-size:12.5px}
.depot{border:1px dashed var(--bord-f);border-radius:13px;padding:16px;text-align:center;color:var(--gris);font-size:13.5px}


/* ══════════════════════════════════════════════════════════════════
   Sur téléphone et sur tablette étroite
   ──────────────────────────────────────────────────────────────────
   Le rail prenait 84 px sur 375 : un quart de l'écran, pour une colonne
   d'icônes sans mots. En dessous de 820 px il sort du flux et devient un
   tiroir. L'écran rend sa largeur au contenu, et le menu, quand on
   l'ouvre, s'ouvre en grand avec ses libellés.
   ══════════════════════════════════════════════════════════════════ */

/* Le bouton n'existe que là où il a quelque chose à ouvrir. */
.ouvre-rail{display:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--bord);
  background:#fff;color:var(--encre);align-items:center;justify-content:center;flex:none}
.banniere .ouvre-rail{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.14);color:#fff}
.voile-rail{display:none}

@media(max-width:820px){
  /* ── l'ossature ── */
  .app,.app.ouvert{grid-template-columns:minmax(0,1fr)}

  /* ── le rail, en tiroir ──
     Hors écran au repos ; il revient d'un seul tenant, toujours déplié :
     un menu qu'on ouvre exprès n'a aucune raison de cacher ses mots. */
  .app .rail{position:fixed;left:0;top:0;bottom:0;z-index:120;width:min(288px,86vw);height:100dvh;
    transform:translateX(-100%);transition:transform .22s ease;align-items:stretch;
    padding:15px 0;box-shadow:0 18px 50px rgba(40,30,10,.26)}
  .app.tiroir .rail{transform:none}
  .app .rail .rh,.app .rail .rn,.app .rail .rb{align-items:stretch}
  .app .rail .marq{flex-direction:row;justify-content:flex-start}
  .app .rail .mnom{display:block}
  .app .rail .sct{display:block}
  .app .rail .rch{justify-content:flex-start}
  .app .rail .rch input{display:block}
  .app .rail .item{flex-direction:row;width:100%;justify-content:flex-start;gap:12px;
    padding:12px 11px;font-size:15px;letter-spacing:-.015em}
  .app .rail .item .cpt{position:static;margin-left:auto;order:2}
  .app .rail .moi{border:1px solid var(--bord);background:var(--creme2);padding:10px;justify-content:flex-start}
  .app .rail .moi .q,.app .rail .moi .chev{display:block}
  .app .rail .menu-moi{left:0;right:0;width:auto;bottom:58px}
  /* Plier un tiroir n'a pas de sens : la flèche devient une fermeture. */
  .app .rail .plier svg{transform:rotate(180deg)}

  .voile-rail{display:block;position:fixed;inset:0;z-index:110;background:rgba(21,23,31,.42);
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  .app.tiroir .voile-rail{opacity:1;pointer-events:auto}

  .ouvre-rail{display:flex}

  /* ── les marges respirent moins : 28 px de chaque côté sur 375,
        c'est un sixième de l'écran donné au vide ── */
  .corps{padding:18px 16px 56px}
  header.fil{padding:11px 14px;gap:9px}
  .remonte{padding:0 16px 46px;margin-top:-62px}
  .banniere{padding:14px 16px 86px}
  .salut{font-size:30.5px}
  .shero,.scols{padding:22px 16px}
  div.fil{padding:14px 16px 0}
  .entete{padding:18px 16px 0}
  .entete h1{font-size:26px}
  .entete+*,.entete~.panneau,.entete~.grille-2,.entete~.filtres,.entete~.formulaire{margin-left:16px;margin-right:16px}
  .panneau,.grille-2,.filtres,.colonnes{margin-left:16px;margin-right:16px}
  .periode-perso,.u-onglets{margin-left:16px;margin-right:16px}
  .ct{padding:15px 16px 0}
  .cc{padding:13px 16px 17px}

  /* ── les tableaux deviennent des cartes ──
     Six colonnes dans 375 px se parcourent de côté, et l'on perd la colonne
     qu'on vient de lire en atteignant la suivante. Chaque ligne devient donc
     un bloc, et chaque valeur porte le nom de sa colonne. */
  .defile-x{overflow:visible}
  .defile-x>table.tbl.cartes-m{min-width:0}
  table.tbl.cartes-m,table.tbl.cartes-m tbody,table.tbl.cartes-m tr,table.tbl.cartes-m td{display:block;width:100%}
  table.tbl.cartes-m thead{display:none}
  table.tbl.cartes-m tr{border:1px solid var(--bord);border-radius:15px;background:#fff;
    padding:12px 14px;margin-bottom:10px}
  table.tbl.cartes-m tr:hover td{background:none}
  table.tbl.cartes-m td{border:none;padding:5px 0;text-align:left}
  /* La première cellule est le titre de la carte : elle n'a pas d'étiquette. */
  table.tbl.cartes-m td:first-child{font-size:14.5px;padding-top:0;padding-bottom:8px;
    border-bottom:1px solid var(--bord);margin-bottom:5px}
  table.tbl.cartes-m td[data-l]{display:flex;gap:12px;align-items:baseline}
  table.tbl.cartes-m td[data-l]::before{content:attr(data-l);flex:none;width:112px;
    color:var(--pale);font-size:12px;letter-spacing:.05em;text-transform:none;font-weight:600}
  table.tbl.cartes-m td[style*="text-align:right"]{text-align:left!important}
  table.tbl.cartes-m td .jaug{width:100%!important}

  /* Un tableau à deux ou trois colonnes tient dans 375 px, mais pas avec
     des largeurs fixées pour un grand écran : on les libère, et les cellules
     respirent moins. */
  table.tbl:not(.cartes-m) td[style*="width:"],table.tbl:not(.cartes-m) th[style*="width:"]{width:auto!important;min-width:0!important}
  table.tbl:not(.cartes-m) td,table.tbl:not(.cartes-m) th{padding-left:6px;padding-right:6px}
  table.tbl:not(.cartes-m) td:first-child,table.tbl:not(.cartes-m) th:first-child{padding-left:0}
  table.tbl:not(.cartes-m) td:last-child,table.tbl:not(.cartes-m) th:last-child{padding-right:0}

  /* ── les grilles s'empilent ── */
  .g2,.g3,.val,.clients,.agents,.projets,.mcartes,.kinds,.kinds2,.grille-2,.colonnes,
  .reg-bloc,.filtres,.grille-champs,.form-grille,.scols,.diff-tete,.diff-l,
  #detail-client .g2,#detail-client .g3{grid-template-columns:minmax(0,1fr)}
  /* Quatre haltes de parcours ne tiennent pas côte à côte ; deux, oui. */
  .par{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tuiles{grid-template-columns:minmax(0,1fr)}
  /* Trois chiffres restent lisibles à trois : c'est leur comparaison qui
     compte, et les empiler la ferait perdre. */
  .agent .ch3,.mini .mc,.doc .tb{gap:7px}
  /* Le kanban garde ses colonnes et se parcourt de côté : c'est un tableau
     de bord, pas une liste, et ses colonnes ont un sens l'une à côté de
     l'autre. On rétrécit seulement les colonnes. */
  .kanban{grid-template-columns:repeat(4,minmax(250px,1fr))}

  /* Quatre chiffres de projet côte à côte dans 343 px : chaque légende est
     tronquée. Deux par ligne, et elles se lisent en entier. */
  .pj .chif{flex-wrap:wrap}
  .pj .ch2{flex:1 1 44%}
  .pj .ch2:nth-child(odd){border-left:none}
  .pj .ch2:nth-child(n+3){border-top:1px solid var(--bord)}

  /* ── rien ne colle en haut sur un petit écran ──
     Une carte collante prend la moitié de la hauteur et pousse le reste
     hors de vue. */
  .carte[style*="sticky"],.val .decider{position:static!important;top:auto!important}

  /* ── les barres d'action ── */
  .entete{flex-direction:column;align-items:stretch}
  .entete-actions{margin-left:0;width:100%}
  .entete-actions>*{flex:1 1 auto;justify-content:center;text-align:center}
  header.fil .ch{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ct{gap:8px}
  .ct h2{font-size:16px}

  /* ── le doigt a besoin de place ──
     En dessous de 40 px, on vise à côté ; et sur un bouton qui envoie une
     mise en ligne, viser à côté n'est pas anodin. */
  .b1,.bs,.bd,.bjaune,.bouton,.ib,.ib2{min-height:40px}
  .item{min-height:44px}
  input,select,textarea{font-size:17px}
  /* 16 px au moins sur un champ : en dessous, iOS zoome tout seul à la
     saisie et ne redézoome jamais. */

  /* ── les onglets et les segments se parcourent de côté ── */
  .bseg,.u-onglets,.filtres-rapides{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .bseg::-webkit-scrollbar,.u-onglets::-webkit-scrollbar{display:none}
  .bseg a,.bseg button{white-space:nowrap}

  /* ── la connexion et les fenêtres de confirmation ── */
  .cnx-droite{padding:28px 20px}
  .cnx-phrase{font-size:25px}
  .voile-m{padding:14px}
  .modale{padding:20px 20px 18px}
  .modale .mb .bd,.modale .mb .bs{flex:1 1 100%}

  /* ── les notifications et les menus flottants ── */
  .notifs{left:12px;right:12px;width:auto;max-width:none}
  .palette{left:0;right:0;width:auto}
}

/* ── un téléphone très étroit ──
   En dessous de 340 px, le nom de la colonne et sa valeur ne tiennent plus
   côte à côte : le nom passe au-dessus. */
@media(max-width:340px){
  .par{grid-template-columns:minmax(0,1fr)}
  .salut{font-size:27px}
  .tuile .v{font-size:26px}
  table.tbl.cartes-m td[data-l]{display:block}
  table.tbl.cartes-m td[data-l]::before{display:block;width:auto;margin-bottom:2px}
}

/* ══════════════════════════════════════════════════════════════════
   Repris de l'ancienne feuille
   ──────────────────────────────────────────────────────────────────
   Le Desk ne charge plus style.css. Les classes ci-dessous y vivaient
   seules et des pages chargées les portent encore : sans elles, le
   planning d'Ulysse, le circuit de validation, la chaîne d'attente, les
   pièces, le sélecteur d'agents, la fiche mission et les résultats de
   recherche rendaient nus. Elles sont réécrites à la charte v5, avec les
   variables de cette feuille. Chaque bloc disparaît quand l'écran qui
   l'emploie est repris.
   ══════════════════════════════════════════════════════════════════ */

/* ── une colonne de kanban vide ──
   Filtrer par agent peut vider une halte : un mot discret dit que ce n'est
   pas une panne, et le cadre pointillé garde la place d'une fiche. */
.kanban .col .vide-col{padding:18px 10px;text-align:center;font-size:13px;font-weight:600;opacity:.6;
  border:1px dashed currentColor;border-radius:13px}

/* ── une rangée cliquable de liste : une mission, un livrable, un résultat ── */
.mission{display:flex;align-items:center;gap:13px;padding:12px 20px;border-bottom:1px solid var(--bord);
  color:inherit;text-decoration:none;min-width:0;transition:background .12s}
.mission:last-child{border-bottom:none}
a.mission:hover{background:var(--creme2)}
.mission .inf{flex:1 1 auto;min-width:0}
.mission .statut,.mission .etq,.mission .av,.mission .piles{flex:none}
.mission .t{font-weight:700;font-size:14px;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mission .c{font-size:13px;color:var(--gris)}
.mission .pct{font-variant-numeric:tabular-nums;font-weight:700;font-size:14.5px;flex:none;letter-spacing:-.02em}

/* ── les petites mesures : chiffre au-dessus, légende dessous ── */
.mes{min-width:0}
.mes .c{font-weight:700;font-size:18px;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.mes .l{color:var(--pale);font-size:12px;letter-spacing:.05em;text-transform:none;font-weight:600;margin-top:2px}
.mesures-api{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:14px 16px;
  background:var(--creme2);border:1px solid var(--bord);border-radius:14px}
@media(max-width:820px){.mesures-api{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── un agent branché à l'API : l'étincelle devant son nom ── */
.etincelle{font-size:.9em;line-height:1;filter:saturate(1.2)}

/* ── le bandeau de suivi d'une tâche en traitement ──
   La passerelle en fait déjà une boîte ; ici on aligne son contenu, et
   l'étiquette bat tant que l'agent travaille. */
.suivi{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.suivi-detail{font-size:13.5px;color:var(--gris);font-weight:600}
.suivi.anime [data-etat]{position:relative;padding-left:24px}
.suivi.anime [data-etat]::before{content:"";position:absolute;left:10px;top:50%;margin-top:-4px;width:8px;height:8px;
  border-radius:50%;background:currentColor;animation:pulsation 1.5s ease-in-out infinite}
@keyframes pulsation{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

/* ── une barre d'avancement fine, sa légende dessous ── */
.barre-p{height:7px;border-radius:99px;background:var(--creme);overflow:hidden}
.barre-p i{display:block;height:100%;border-radius:99px;background:var(--bleu);transition:width .5s ease}
.barre-p.fin{height:5px}
.jauge-legende{display:flex;justify-content:space-between;gap:10px;color:var(--gris);font-size:13px;margin-top:8px}

/* ── l'avancement d'une tâche d'Iris : la barre, puis ce qui mérite d'être su ── */
.avance{height:7px;border-radius:99px;background:var(--creme);overflow:hidden;margin:-4px 0 14px}
.avance[hidden]{display:none}
.avance span{display:block;height:100%;border-radius:99px;background:var(--bleu);transition:width .8s ease}
.alerte-suivi{margin:-4px 0 14px}
.alerte-suivi[hidden]{display:none}

/* ── la tête d'une fiche : avatar, titre, actions à droite ── */
.fiche-tete{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--bord);border-radius:var(--ray);box-shadow:var(--ombre);padding:22px 24px;margin:18px 28px;max-width:1460px}
.corps .fiche-tete{margin-left:0;margin-right:0;max-width:none}
.fiche-tete>*{min-width:0;max-width:100%}
.fiche-inf{flex:1;min-width:200px}
.fiche-inf h1{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.fiche-inf .role{color:var(--gris);font-size:14.5px;margin-top:3px}
.fiche-inf .desc{font-size:14px;color:var(--gris);margin-top:10px;max-width:540px;line-height:1.55}
.fiche-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end;flex:none}
.fiche-actions>div{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:820px){
  .fiche-tete{margin:14px 16px;padding:18px 16px;gap:14px}
  .fiche-actions{width:100%;align-items:stretch}
  .fiche-actions>div{justify-content:stretch}
  .fiche-actions>div>*{flex:1;text-align:center}
  .fiche-actions>.statut,.fiche-actions>.etq{align-self:flex-start}
}

/* ── le sélecteur d'agents en cases ──
   Une case par agent, son visage, son rôle ; la case cochée prend le bleu
   du rail, comme tout ce qui est « choisi » dans le Desk. */
.cases-agents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
@media(max-width:620px){.cases-agents{grid-template-columns:minmax(0,1fr)}}
.case-agent{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--bord-f);border-radius:12px;
  background:#fff;cursor:pointer;transition:border-color .12s,background .12s;min-width:0}
.case-agent:hover{border-color:var(--bleu);background:var(--creme2)}
.case-agent input{margin:0;flex:none;accent-color:var(--bleu);width:auto}
.case-agent .n{font-size:14px;font-weight:700;letter-spacing:-.015em}
.case-agent .r{font-size:13px;color:var(--gris)}
.case-agent:has(input:checked){border-color:var(--bleu);background:var(--bleu-c)}
.case-agent:has(input:focus-visible){box-shadow:0 0 0 3px var(--bleu-c)}

/* ── l'œil d'un mot de passe ── */
.champ-mdp{position:relative}
.champ-mdp input{padding-right:46px}
.oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:var(--gris);transition:background .12s,color .12s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.oeil:hover{background:var(--creme);color:var(--encre)}
.oeil svg{width:19px;height:19px;pointer-events:none}
.oeil .ferme{display:none}
.oeil.ouvert .ouvre{display:none}
.oeil.ouvert .ferme{display:block}

/* ── le choix d'avatar d'un agent ──
   La pastille de couleur s'appelle « palette » dans agents.php, du même nom
   que la liste de recherche du rail. Celle du rail est absolue et cachée
   au repos : la pastille, elle, est posée dans le formulaire et toujours
   visible. On la distingue par son parent [data-palette]. */
.avatar-choix{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.apercu-avatar{position:relative;flex:none;width:78px;height:78px}
.apercu-avatar .av{width:100%;height:100%;font-size:28px;box-shadow:0 6px 16px rgba(40,30,10,.14)}
.apercu-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%;display:block}
.avatar-choix .cote{flex:1;min-width:210px;display:flex;flex-direction:column;gap:10px}
[data-palette] .palette{position:static;display:flex;gap:9px;flex-wrap:wrap;width:auto;max-height:none;overflow:visible;
  background:none;border:none;border-radius:0;box-shadow:none;padding:4px 0}
[data-palette] .palette button{width:34px;height:34px;border-radius:50%;padding:0;border:2px solid transparent;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;transition:transform .12s,border-color .12s}
[data-palette] .palette button:hover{transform:scale(1.09)}
[data-palette] .palette button.choisi{border-color:var(--encre);transform:scale(1.09)}

/* ── Ulysse : étiquettes et pastilles ── */
.badge-att{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:none;
  padding:2px 8px;border-radius:99px;background:var(--jaune-c);color:var(--jaune-f);margin-left:6px;vertical-align:middle}
.u-anomalie{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;
  background:var(--rouge-c);color:var(--rouge-f);margin-left:6px;vertical-align:middle}
.u-role{display:inline-block;font-size:13px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--jaune-c);color:var(--jaune-f)}
.u-role-vide{background:var(--rouge-c);color:var(--rouge-f)}
.u-bloquante{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:none;
  padding:2px 7px;border-radius:99px;background:var(--violet-c);color:var(--violet);margin-left:6px;vertical-align:middle}
.u-retard{color:var(--rouge-f);font-weight:700}

/* ── Ulysse : l'avancement d'un lot ── */
.u-avancement{display:flex;align-items:center;gap:10px;min-width:120px}
.u-avancement .piste{flex:1;height:7px;background:var(--creme);border-radius:99px;overflow:hidden}
.u-avancement .piste i{display:block;height:100%;background:var(--vert-v);border-radius:99px}
.u-avancement .n{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--gris);min-width:34px;text-align:right}

/* ── Ulysse : le planning par jour ──
   Un bandeau par journée, le nombre d'entrées à côté ; aujourd'hui se
   reconnaît à son point bleu. */
.u-jour{display:flex;align-items:baseline;gap:10px;padding:13px 20px 8px;border-top:1px solid var(--bord);
  background:var(--creme2);font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.u-jour:first-child{border-top:none}
.u-jour .n{color:var(--gris);font-weight:600;font-size:13px}
.u-jour.aujourdhui{color:var(--bleu-f)}
.u-jour.aujourdhui::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--bleu);align-self:center;flex:none}
.u-jalon td{font-weight:700;background:var(--jaune-c)}
.u-jalon .drapeau,.drapeau{display:inline-flex;align-items:center;gap:7px;color:var(--jaune-f)}
.drapeau svg{width:15px;height:15px;flex:none}
/* une tâche sous son livrable : décalée, reliée par un trait */
.u-sous{padding-left:44px !important;position:relative}
.u-sous::before{content:"";position:absolute;left:26px;top:0;bottom:0;border-left:2px solid var(--bord-f)}
@media(max-width:560px){.u-sous{padding-left:24px !important}.u-sous::before{left:12px}}
.u-liste-suivi .quoi .t{overflow-wrap:anywhere}

/* ── Ulysse : le circuit de validation d'un livrable ──
   Un niveau par ligne ; celui qui attend est en jaune, ceux qui sont
   franchis s'effacent. Le rang reprend le rond numéroté des étapes. */
.u-circuit{display:flex;flex-direction:column;gap:8px}
.u-circuit .niveau{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--bord);border-radius:13px;background:#fff;font-size:13.5px}
.u-circuit .niveau.courant{border-color:#F0DFA0;background:var(--jaune-c)}
.u-circuit .niveau.passe{opacity:.55}
/* .rang est aussi la rangée « en direct » de l'accueil : on remet tout à plat */
.u-circuit .niveau .rang{display:inline-flex;width:26px;height:26px;padding:0;margin:0;gap:0;border:none;border-radius:50%;
  background:var(--encre);color:#fff;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.u-circuit .niveau.courant .rang{background:var(--jaune-f)}
.u-circuit .niveau .quoi{flex:1;min-width:0;font-weight:600}
.u-circuit .niveau .d{display:block;font-size:13px;color:var(--gris);font-weight:500;margin-top:2px}

/* ── Ulysse : la chaîne d'attente d'une tâche ── */
.u-chaine{display:flex;flex-direction:column;gap:8px}
.maillon{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--bord);border-radius:13px;background:var(--creme2)}
.maillon .fleche{color:var(--pale);flex:none;width:18px;height:18px}
.maillon .quoi{flex:1;min-width:0;font-size:13.5px;font-weight:600}
.maillon .quoi a{color:var(--encre);font-weight:700}
.maillon .quoi a:hover{color:var(--bleu)}
.maillon .quoi .d{display:block;font-size:13px;color:var(--gris);margin-top:2px;font-weight:500}
.maillon form{flex:none}

/* ── Ulysse : les pièces d'un objet et leurs versions ──
   La passerelle fait de .u-piece une boîte ; on y range l'icône, le nom
   et les actions sur une ligne. */
.u-pieces{display:flex;flex-direction:column;gap:8px}
.u-piece{display:flex;align-items:flex-start;gap:12px}
.u-piece .ic{flex:none;width:22px;height:22px;color:var(--gris);margin-top:2px}
.u-piece .ic svg{width:22px;height:22px}
.u-piece .quoi{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.u-piece .quoi>a{color:var(--encre);font-weight:700}
.u-piece .quoi>a:hover{color:var(--bleu)}
.u-piece .d{display:block;font-size:13px;color:var(--gris);margin-top:2px;font-weight:500}
.u-piece .d a{color:var(--bleu);font-weight:600}
.u-piece .actions{flex:none;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.u-versions{margin-top:6px;font-size:13px}
.u-versions>summary{cursor:pointer;color:var(--bleu);font-weight:600;list-style:none;user-select:none}
.u-versions>summary::-webkit-details-marker{display:none}
.u-versions>summary::before{content:"+ ";font-weight:700}
.u-versions[open]>summary::before{content:"− "}
.u-versions .d{padding-left:12px}

/* ── Ulysse : le statut en un geste ──
   La passerelle en faisait une boîte ; c'est une liste déroulante colorée
   comme l'étiquette qu'elle remplace. Le bouton « OK » n'existe que sans
   script : avec, la liste s'envoie toute seule. */
.u-rapide{display:inline-flex;align-items:center;gap:6px;padding:0;border:none;background:none;font-size:inherit}
.u-rapide select{width:auto;padding:5px 26px 5px 11px;font-size:13px;font-weight:600;border-radius:99px;border:1px solid transparent;
  background:var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A60' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/13px;
  color:var(--gris);line-height:1.3;cursor:pointer;-webkit-appearance:none;appearance:none}
.u-rapide select.s-actif{background-color:var(--vert-c);color:var(--vert)}
.u-rapide select.s-pause,.u-rapide select.s-attente{background-color:var(--jaune-c);color:var(--jaune-f)}
.u-rapide select.s-bleu{background-color:var(--bleu-c);color:var(--bleu-f)}
.u-rapide select.s-echec,.u-rapide select.s-rouge{background-color:var(--rouge-c);color:var(--rouge-f)}
.u-rapide select.s-fini,.u-rapide select.s-futur{background-color:var(--creme);color:var(--gris);border-color:var(--bord-f)}
.u-rapide select:focus{outline:none;box-shadow:0 0 0 3px var(--bleu-c);border-color:var(--bleu)}
.js .u-rapide-ok{display:none}


/* Les niveaux d'accès : un membre au niveau Lecture ne commande rien, un
   membre qui n'est pas de la direction n'ouvre ni les réglages, ni le
   journal, ni la fiche des agents. Le serveur refuse de toute façon ; ceci
   évite seulement de mener à une porte fermée. */
.niveau-lecture a[href^="commande.php"],
body:not(.niveau-direction) a[href^="reglages.php"],
body:not(.niveau-direction) a[href^="journal.php"],
body:not(.niveau-direction) a[href^="agents.php"]{display:none!important}

/* ── Premiers pas ── */
.pp-h2{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:26px 0 12px}
.pp-quatre{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.pp-quatre .carte{margin-bottom:0}
.pp-quatre .cc>b{display:block;font-size:15px;margin:6px 0 4px}
.pp-quatre p{color:var(--gris);font-size:13.5px;line-height:1.5}
.pp-num{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:9px;background:var(--pastel-b);color:#1B3480;font-weight:800;font-size:13.5px}
.pp-non{display:block;margin-top:8px;color:var(--pale);font-size:13px}
.pp-etapes>div{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--bord);font-size:14px;line-height:1.5}
.pp-etapes>div:first-child{border-top:none;padding-top:0}
.pp-agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pp-agents .carte{margin-bottom:0}
.pp-agent-tete{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:13px;margin-bottom:12px}
.pp-agent-tete b{display:block;font-size:15px}
.pp-agent-tete span span{display:block;font-size:13px;opacity:.8}
.pp-vis{width:42px;height:42px;flex:none;display:block}
.pp-vis svg{width:100%;height:100%}
.pp-fiche{margin:0 0 12px;font-size:13.5px;line-height:1.5}
.pp-fiche dt{color:var(--pale);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:none;margin-top:8px}
.pp-fiche dd{margin:2px 0 0;color:var(--encre)}

/* ── La visite guidée ── un cadre autour de l'élément montré, le reste
   assombri, et une bulle qui dit à quoi il sert. */
.visite-trou{position:fixed;z-index:400;border-radius:12px;box-shadow:0 0 0 3px #2F5BFF,0 0 0 9999px rgba(12,18,38,.55);pointer-events:none;transition:all .25s ease}
.visite-bulle{position:fixed;z-index:401;width:min(320px,calc(100vw - 32px));background:#fff;color:var(--encre);border-radius:16px;padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.28);font-size:14px;line-height:1.5}
.visite-bulle b{display:block;font-size:16px;margin-bottom:5px}
.visite-bulle .pied{display:flex;align-items:center;gap:8px;margin-top:14px}
.visite-bulle .pied span{flex:1;color:var(--pale);font-size:13px}
.visite-bulle button{border:0;border-radius:10px;padding:8px 13px;font:inherit;font-weight:700;cursor:pointer}
.visite-bulle .suiv{background:#2F5BFF;color:#fff}
.visite-bulle .quit{background:var(--creme2,#F3F0E8);color:var(--gris)}

/* ── Les listes déroulantes ──
   La liste qui s'ouvre est dessinée par le Desk (desk.js) : celle du
   navigateur suivait Windows, pas la charte. La case fermée garde son
   propre dessin, page par page. */
.liste-desk{position:fixed;z-index:500;min-width:180px;max-width:min(460px,calc(100vw - 24px));max-height:320px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--bord);border-radius:14px;padding:6px;
  box-shadow:0 14px 40px rgba(20,16,8,.16),0 2px 6px rgba(20,16,8,.06);font-size:14px;overscroll-behavior:contain}
.liste-desk .opt{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;color:var(--encre);line-height:1.35}
.liste-desk .opt .coche{width:14px;flex:none;color:var(--bleu);font-weight:800;text-align:center}
.liste-desk .opt.actif{background:var(--bleu-c)}
.liste-desk .opt.choisi{font-weight:700;color:var(--bleu-f)}
.liste-desk .opt.inactif{color:var(--pale);cursor:default}
.liste-desk .opt.inactif.actif{background:none}
.liste-desk .groupe{padding:10px 11px 4px;color:var(--pale);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:none}
.liste-desk{scrollbar-width:thin;scrollbar-color:var(--bord-f) transparent}

/* ── La case d'une liste déroulante, partout ──
   Sans ceci, une liste posée hors d'un formulaire gardait la bordure noire
   et la flèche de Windows. Spécificité nulle (:where) : les dessins
   particuliers (.champ, .u-rapide) passent devant sans rien redéclarer. */
:where(select:not([multiple]):not([size])){-webkit-appearance:none;appearance:none;cursor:pointer;
  padding:9px 36px 9px 12px;border:1px solid var(--bord-f);border-radius:11px;color:var(--encre);line-height:1.3;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A60' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px}
:where(select:not([multiple]):not([size])):hover{border-color:var(--pale)}
:where(select:not([multiple]):not([size])):focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu-c)}
:where(select:disabled){opacity:.55;cursor:default}
/* Le vrai aperçu d'un livrable : la capture d'un site, ou la première page
   d'un document. Il prend la place du dessin, au même format. */
.apercu-reel{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;background:#fff}
.apercu-reel.page{object-fit:cover;object-position:top center;background:#F2EEE6}
.doc .extrait{font-size:8.5px;line-height:1.45;color:#3B3A36;max-height:84px;overflow:hidden;margin-bottom:6px;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.fitem .vg .apercu-reel{width:100%;height:100%;aspect-ratio:auto}

/* L'aperçu se pose comme une feuille : entière, jamais coupée, avec une
   marge tout autour et une ombre légère. Une page en hauteur, une
   diapositive ou un tableur en largeur : chacun garde ses proportions. */
.apercu-cadre{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:14px;background:var(--creme2);overflow:hidden}
.apercu-cadre .apercu-reel,.apercu-cadre .apercu-reel.page{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:auto;
  object-fit:contain;border-radius:3px;background:#fff;box-shadow:0 1px 2px rgba(40,30,10,.08),0 4px 14px rgba(40,30,10,.14)}
.apercu-cadre.site{aspect-ratio:16/10}
.fitem .vg .apercu-cadre{aspect-ratio:auto;width:100%;height:100%;padding:3px}
.fitem .vg .apercu-cadre .apercu-reel{width:auto;height:auto;box-shadow:0 1px 3px rgba(40,30,10,.18);border-radius:1px}

/* ══ Les couleurs des agents ══
   Adoptées par la direction le 12 octobre 2026, après une longue série
   d'essais. Chaque agent a une couleur profonde (--ag) ; ses surfaces (En
   direct, Surveillance, Nouvelle commande, Premiers pas) en prennent la
   matière : éclairée en haut à gauche, assombrie en bas à droite, un liseré
   et un cercle discret. Les documents à décider restent sur un fond neutre :
   la même couleur répétée de carte en carte saturait la page. La couleur de
   l'agent n'est jamais celle d'un bouton : le vert valide, le rouge supprime
   ou annule (voir .bvert, .bd, .bannule). */

.ag-noah,.choix-agent.c1,.pp-agent-tete.c1{--ag:#2346D6;--ag-d:#162C91;--ag-l:#5274F2;--ag-p:#C3D0FF}
.ag-iris,.choix-agent.c6,.pp-agent-tete.c6{--ag:#8B1E4F;--ag-d:#560F30;--ag-l:#B5406F;--ag-p:#F7C2D6}
.ag-agent,.choix-agent.c2,.pp-agent-tete.c2{--ag:#C84B1C;--ag-d:#88300D;--ag-l:#E77840;--ag-p:#FFD3BE}
.ag-ulysse,.choix-agent.c3,.pp-agent-tete.c3{--ag:#4536A8;--ag-d:#281F70;--ag-l:#6D5BD6;--ag-p:#D6CEFF}
.ag-eliotte,.carte-surv,.pp-agent-tete.c4{--ag:#0E7A50;--ag-d:#064A30;--ag-l:#27A671;--ag-p:#B4EBCF}
.ag-humain,.choix-agent.c5{--ag:#946410;--ag-d:#5C3D05;--ag-l:#C08A2A;--ag-p:#F7E0AE}

/* La surface d'un agent : sa couleur, éclairée en haut à gauche, assombrie
   en bas à droite, un liseré de lumière et un grand cercle discret. */
.surface-ag,.carte-surv,.rang,
.choix-agent,.pp-agent-tete{
  position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 95% at 0% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),
             radial-gradient(90% 80% at 100% 100%,rgba(0,0,0,.22),rgba(0,0,0,0) 60%),
             linear-gradient(150deg,var(--ag-l),var(--ag) 48%,var(--ag-d))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -18px var(--ag-d)!important;
  border-color:transparent!important}
.surface-ag::after,.carte-surv::after,.rang::after,
.choix-agent::after,.pp-agent-tete::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  width:260px;height:260px;right:-90px;top:-120px;border:1.5px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 34px rgba(255,255,255,.035)}
.rang::after{width:120px;height:120px;right:-40px;top:-60px;box-shadow:0 0 0 18px rgba(255,255,255,.04)}

/* Les cartes de décision : claires, la page posée sur la couleur de
   l'agent, le bouton profond ; elles se soulèvent au survol. */
.dc{background:#fff!important;color:var(--encre)!important;border:none;padding:10px 10px 14px;
  box-shadow:0 1px 2px rgba(20,16,8,.04),0 12px 32px -20px rgba(20,16,8,.28);transition:transform .18s ease,box-shadow .18s ease}
.dc:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(20,16,8,.04),0 20px 40px -20px rgba(20,16,8,.34)}
.dc .tg{padding:6px 6px 0}
.dc .tg span{background:var(--creme2);color:var(--gris)}
/* Fond neutre sous le document : la couleur répétée de carte en carte
   saturait la page (retour du 12 octobre 2026). Elle ne reste que sur
   l'étiquette et le bouton. */
.dc .cad{border-radius:16px;padding:20px;background:#F1EFEA;box-shadow:inset 0 0 0 1px rgba(20,16,8,.04)}
.dc .apercu-cadre{background:transparent;padding:0}
.dc .cad .apercu-reel,.dc .cad .doc,.dc .cad .mini{border-radius:5px;box-shadow:0 1px 2px rgba(20,16,8,.1),0 12px 26px -12px rgba(20,16,8,.32)}
.dc h3,.dc .d,.dc .pd{margin-left:6px;margin-right:6px}
.dc .d{color:var(--gris);opacity:1}
.dc .pd{border-top-color:var(--bord)}
/* « Revoir » : un vrai bouton secondaire, net à côté du vert. */
.dc .b1{background:#fff;color:var(--encre);border:1.5px solid #CFC9BC;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;transition:border-color .15s,background .15s}
.dc .b1::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%273%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%273%27/%3E%3C/svg%3E") center/contain no-repeat}
.dc .b1:hover{border-color:var(--encre);background:#FAF9F6}
.dc .b2{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 16px -8px #15803D}

/* Les cartes d'agent : texte blanc sur la surface. */
.carte-surv h2,.carte-surv b,.carte-surv div{color:#fff!important}
.carte-surv p,.carte-surv span{color:#fff!important}
.carte-surv b[style*="font-size:20.5px"]{font-size:26px!important}
.carte-surv .etq{background:rgba(255,255,255,.14)!important;color:#fff!important;backdrop-filter:blur(4px)}
.carte-surv div[style*="border-bottom"]{border-bottom-color:rgba(255,255,255,.16)!important}
.rang{color:#fff!important}
.rang .s{color:#fff}
.rang:hover{filter:brightness(1.06)}

.choix-agent{color:#fff!important}
.choix-act{background:rgba(255,255,255,.96);color:var(--encre);box-shadow:0 6px 16px -10px rgba(0,0,0,.4)}
.choix-act:hover{background:#fff;border-color:rgba(255,255,255,.6)}
.choix-act span span{color:var(--gris)}
.pp-agent-tete{color:#fff!important}

/* La fiche d'un agent, sur sa surface : texte blanc, boutons neutres. */
.fiche-agent .cc{color:#fff!important}
.fiche-agent .etq{background:rgba(255,255,255,.16)!important;color:#fff!important}
.fiche-agent .cc div[style*="rgba(255,255,255,.65)"]{background:rgba(255,255,255,.12)!important;color:#fff!important}
.fiche-agent .bb{background:#fff!important;color:var(--encre)!important}
.fiche-agent .bb:hover{background:#F4F2EE!important}
.fiche-agent .bs{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.fiche-agent .bs:hover{background:rgba(255,255,255,.2)}
/* La liste des agents : la surface de chacun, texte blanc, chiffres sur
   verre, et son bouton neutre (blanc). */
.carte-agent{color:#fff!important}
.carte-agent h3{color:#fff}
.carte-agent .role,.carte-agent .ds{color:#fff;opacity:1}
.carte-agent .etq{background:rgba(255,255,255,.16)!important;color:#fff!important}
.carte-agent .ch3 .c{background:rgba(255,255,255,.12)}
.carte-agent .ch3 .l{color:#fff;opacity:1}
.carte-agent .bt{background:#fff;color:var(--encre)}
.carte-agent.ouvrable:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 34px -16px var(--ag-d)!important}

/* Les gabarits : des documents, sur fond neutre, comme ceux à décider. */
.choix-agent.gabarit-carte{background:#fff!important;color:var(--encre)!important;box-shadow:var(--ombre)!important;border:1px solid var(--bord)!important}
.choix-agent.gabarit-carte::after{display:none}
.choix-agent.gabarit-carte .choix-act{background:var(--creme2)}

/* Une étiquette sans agent connu reste lisible : encre au lieu de blanc sur blanc. */
.dc .tg span:first-child{background:var(--ag,#15171F)}

/* ══ Les textes sont neutres ══
   Règle de la direction (12 octobre 2026) : un texte est noir ou gris sur
   un fond clair, blanc sur un fond foncé ou coloré ; jamais vert, bleu,
   bordeaux ou jaune. La couleur reste aux fonds, aux pastilles et aux
   boutons. Ce bloc passe après tout le reste pour le garantir. */

.item.on,.onglets button.on,.onglets a.on,.agent.avenir:hover,.agent.avenir:hover .av-t,
.palette a.surv,.palette button.surv,.palette .chercher,.palette .chercher .ic,
.etapes .n2,.u-jour.aujourdhui,.liste-desk .opt.choisi,.fich .fn,.fich.pris .fn,
.e-b,.e-v,.e-j,.e-r,.e-u,.aj,.p-ok,.p-att,.p-ko,
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,
.item .cpt,.moi .ini,.tuile.accent,.bjaune,.voile-b,.voile-b b,.badge-att,
.menu-moi button.sortie,.menu-moi a.sortie,
.banniere .debloquer,.banniere .debloquer .quoi span,.banniere .debloquer .liens a,
.notifs .nl .ic.e-j,.notifs .nl .ic.e-r,.notifs .nl .ic.e-b,.notifs .nl .lu:hover,.notifs .nl[data-lu="1"] .lu,
.plus-sites,.pj .al,.niv .num,.doc .sg2,.pp-num,
.diff-l .avant,.diff-l .apres,.diff .dcol del,.diff .dcol ins,
.cnx-alerte,.cnx-ok,.modale .mi,.toast.att .ic2,.champ .req,
.u-anomalie,.u-role,.u-role-vide,.u-bloquante,.u-retard,.u-jalon .drapeau,.drapeau,
.u-rapide select.s-actif,.u-rapide select.s-pause,.u-rapide select.s-attente,.u-rapide select.s-bleu,
.u-rapide select.s-echec,.u-rapide select.s-rouge,
.fich .fi,.fich.pris .fi,.liste-desk .opt .coche{color:var(--encre)}
.doc .ds{color:var(--pale)}

/* Les liens : en noir, soulignés, pour rester reconnaissables. */
.lien,table.tbl tr:hover .lien,.maillon .quoi a:hover,.u-piece .quoi>a:hover,.u-piece .d a,.u-versions>summary{
  color:var(--encre);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lien:hover{text-decoration-thickness:2px}

/* Annuler : le rouge passe à la bordure, le texte reste noir. */
.bannule{color:var(--encre);border-color:#E5484D}
.bannule:hover{background:#FEF2F2;border-color:#DC2626}

/* Sur fond foncé : blanc. */
.brief,.brief b,.brief u{color:#fff}
.cnx-p{color:#fff}
/* La coche de la Surveillance : noire sur sa pastille blanche. */
.carte-surv .pastl{color:#000!important}
/* Les initiales des clients du parcours gardent leur pastille de couleur :
   un fond blanc imposé plus haut les rendait blanches sur blanc. */
.ps .cl span.ac1{background:#2F5BFF}.ps .cl span.ac2{background:#E2561B}.ps .cl span.ac3{background:#5B3FC4}
.ps .cl span.ac4{background:#0E9B5C}.ps .cl span.ac5{background:#C8930B}.ps .cl span.ac6{background:#C2185B}
/* Les titres de section, assez contrastés pour se lire. */
.fam{color:var(--gris)}
/* Le jaune est trop clair pour un texte blanc : les initiales y sont noires. */
.ac5,.ps .cl span.ac5{color:var(--encre)}

/* ══ Noir pur, blanc pur ══
   Règle de la direction (12 octobre 2026) : un texte est noir pur sur fond
   clair, blanc pur sur fond foncé ou coloré. Ni gris, ni transparence : la
   hiérarchie passe par la taille et la graisse. */
:root{--encre:#000;--gris:#000;--pale:#000}
body{color:#000}
.bmarque span,.dates-perso label,.dates-perso .np,.tuile .l,.tuile .d,.tuile.accent .l,.tuile.accent .d,
.banniere .debloquer .liens a span,.mini .mh small,.mini .mh p,.dc .d,.ps .h,.ps .d,.direct .s,.direct .lg2,
.rang .s,.shero .kk,.shero p,.col .ch .n,.ul-c .c .l,.mc2 .d,.mc2 .mm,.agent.avenir .av-d,.agent .role,.agent .ds,
.agent .ch3 .l,.kind2 .d,.choix-tete span span,.choix-act span span,.choix-fl,.cnx-liste .s4,.cnx-v.libre b,.cnx-v b,
.cnx-pied,.toast span.s3,.toast .x,.kanban .col .vide-col,.pp-agent-tete span span,
.tuile .l,.tuile .d,.dc .d{opacity:1}
.tuile .l,.tuile .d{color:#fff}.tuile.accent .l,.tuile.accent .d{color:#000}
.rang .s,.direct .s,.direct .lg2,.carte-agent .role,.carte-agent .ds,.carte-agent .ch3 .l,.fiche-agent .cc{color:#fff}
.doc .extrait,.doc .ds{color:#000}
::placeholder{color:#000;opacity:.45}
/* Un compteur à côté d'un titre : entre parenthèses, plus de point médian
   (charte anti-IA, 12 octobre 2026). */
.ct .n::before,.fam .n::before{content:"("}
.ct .n::after,.fam .n::after{content:")"}
.ct .n,.fam .n{margin-left:2px}
/* Sans capitales, l'espacement large n'a plus lieu d'être. */
.sct,.fam,table.tbl th,.mes .l,.badge-att,.u-bloquante,.pp-fiche dt,.liste-desk .groupe,.diff-tete{letter-spacing:0}

/* Une carte de ce modèle sans agent (un dossier, par exemple) reste une
   carte blanche à texte noir : la surface colorée n'appartient qu'aux agents.
   Sans cette règle, les dossiers s'affichaient en blanc sur fond clair. */
.choix-agent:not(.c1):not(.c2):not(.c3):not(.c4):not(.c5):not(.c6){background:#fff!important;color:#000!important;
  box-shadow:var(--ombre)!important;border:1px solid var(--bord)!important}
.choix-agent:not(.c1):not(.c2):not(.c3):not(.c4):not(.c5):not(.c6)::after{display:none}
.choix-agent:not(.c1):not(.c2):not(.c3):not(.c4):not(.c5):not(.c6) .choix-tete span span{color:#000}
/* L'aperçu et le titre d'une carte de décision ouvrent le livrable. */
.dc a.cad{display:block;cursor:pointer;transition:filter .15s}
.dc a.cad:hover{filter:brightness(.97)}
.dc .dc-titre{display:block;color:inherit;text-decoration:none}
.dc .dc-titre:hover{text-decoration:underline;text-underline-offset:3px}

/* ── La page d'une mission (12 octobre 2026) ──
   L'état d'un coup d'œil en haut, les rendus ensuite, le reste replié. */
.ms-tete .cc{padding-top:22px}
.ms-haut{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.ms-titre{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin:0}
.ms-client{margin-top:6px;font-size:14.5px}
.ms-actions{display:flex;flex-direction:column;gap:8px;min-width:200px}
.ms-actions>a{padding:11px 16px}
.ms-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.ms-kpis>div{background:var(--creme2);border-radius:14px;padding:12px 14px;min-width:0}
.ms-kpis span{display:block;font-size:12.5px;color:var(--gris)}
.ms-kpis b{display:block;font-size:15px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){.ms-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ms-plie{margin-top:12px;border-top:1px solid var(--bord);padding-top:12px}
.ms-plie>summary{cursor:pointer;font-weight:600;font-size:13.5px;list-style:none;display:flex;align-items:center;gap:8px}
.ms-plie>summary::-webkit-details-marker{display:none}
.ms-plie>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.ms-plie[open]>summary::before{transform:rotate(45deg)}
.ms-histo .ctrl{font-size:13px;align-items:flex-start}
.ms-supprimer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px;padding-top:18px;border-top:1px solid var(--bord)}
.ms-supprimer span{font-size:13px}
.mission-vue .g3.decider{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
/* Le rendu d'une fabrication : la capture du site à gauche, les repères à droite. */
.ch-rendu{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.ch-capture{display:block;width:min(360px,100%);flex:none;border-radius:14px;overflow:hidden;border:1px solid var(--bord)}
.ch-capture .apercu-cadre{padding:12px}
.ms-kpis b a{color:inherit}

/* ── Lire un document dans À décider (12 octobre 2026) ──
   Le résultat seul, en grand ; l'original à côté seulement sur demande. */
.iris-choix{display:flex;justify-content:flex-end;margin-bottom:12px}
.iris-duo{display:grid;gap:16px;align-items:start}
.iris-duo[data-mode="seul"]{grid-template-columns:minmax(0,1fr)}
.iris-duo[data-mode="seul"] .iris-source{display:none}
.iris-duo[data-mode="cote"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1100px){.iris-duo[data-mode="cote"]{grid-template-columns:minmax(0,1fr)}}
.iris-pages{max-height:85vh;overflow:auto;background:#8a8a8a;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:16px;align-items:center}
.iris-pages a{display:block;width:100%;max-width:900px;cursor:zoom-in}
.iris-pages img{display:block;width:100%;height:auto;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.iris-duo[data-mode="cote"] .iris-pages a{max-width:640px}

/* Sur téléphone, une ligne de liste chargée de boutons passe à la ligne au lieu
   de déborder de l'écran (Intervenants d'Ulysse, audit du 12 octobre 2026). */
@media(max-width:600px){.ctrl{flex-wrap:wrap}}
/* Les initiales d'un intervenant : noires sur leur pastille, lisibles quelle
   que soit la teinte qu'un style plus haut leur donne. */
.av[class*="c-"]{color:#000!important}

/* Un élément marqué hidden reste caché, quelle que soit la règle qui le montre
   (l'aide « Nouvelle entreprise » s'affichait toujours, audit du 12 octobre 2026). */
[hidden]{display:none!important}