/* Portail CB TEL — feuille de style.
   Sortie du HTML au lot 47 : 53 ko etaient renvoyes A CHAQUE PAGE.
   Desormais mise en cache par le navigateur ; le numero de version
   dans l'URL (?v=) force le rechargement apres une mise a jour. */
/* ===================================================================
   Charte « cfx » CB TEL — tokens globaux
   =================================================================== */
:root{
  --fa:#0d9488;--fa2:#0f766e;--fa-tint:#ccfbf1;--fa-soft:#f0fdfa;--fa-ink:#134e4a;
  --rouge:#e2001a;--rouge2:#b30015;--rouge-tint:#ffe0e3;--rouge-soft:#fff5f6;
  --bg:#f1f5f9;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--card:#fff;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);--shadow-md:0 4px 12px rgba(15,23,42,.08);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{margin:0}

/* ------------------------- coquille ------------------------- */
.app{display:flex;min-height:100vh}
.side{flex:0 0 256px;background:#fff;padding:16px 0;position:sticky;top:0;height:100vh;
  overflow-y:auto;border-right:1px solid var(--border);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column}
.side .brand{padding:0 18px 14px;border-bottom:1px solid var(--border);margin-bottom:10px}
.side .brand b{font-size:15px;display:block;letter-spacing:-.01em}
.side .brand span{font-size:11.5px;color:var(--muted)}
.side .grp{padding:12px 18px 6px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);font-weight:700}
.side a{display:flex;align-items:center;gap:10px;padding:8px 18px;text-decoration:none;
  color:#475569;font-size:13px;font-weight:600;border-left:3px solid transparent}
.side a:hover{background:var(--bg);color:var(--text)}
.side a.on{background:var(--bg);color:var(--text);border-left-color:var(--fa)}
.side a .e{width:18px;text-align:center;font-size:14px}
.side .zone{margin:4px 10px 12px;border-radius:11px;padding:2px 0 8px}
.side .zone a{padding-left:15px}
.side .zone.op{background:var(--rouge-soft);box-shadow:inset 0 0 0 1px #f5c2c7}
.side .zone.op .grp{color:var(--rouge2);padding-top:10px}
.side .zone.op a:hover{background:var(--rouge-tint);color:#7a000e}
.side .zone.op a.on{background:var(--rouge-tint);color:#7a000e;border-left-color:var(--rouge)}
.side .zone.cli{background:var(--fa-soft);box-shadow:inset 0 0 0 1px #99e5dc}
.side .zone.cli .grp{color:var(--fa2);padding-top:10px}
.side .zone.cli a:hover{background:var(--fa-tint);color:var(--fa-ink)}
.side .zone.cli a.on{background:var(--fa-tint);color:var(--fa-ink);border-left-color:var(--fa)}
.side .cli{margin:12px 12px 4px;padding:10px 12px;border-radius:10px;
  background:linear-gradient(135deg,var(--fa),var(--fa2));color:#fff;box-shadow:var(--shadow-sm)}
.side .cli .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.75;font-weight:700}
.side .cli .nm{font-size:14px;font-weight:700;margin-top:2px;line-height:1.25}
.side .cli button{margin-top:8px;width:100%;padding:5px 8px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.14);color:#fff;border-radius:7px;cursor:pointer;
  font-size:11.5px;font-weight:600}
.side .cli button:hover{background:rgba(255,255,255,.26)}
.side .noclient{margin:12px 12px 4px;padding:10px 12px;border-radius:10px;border:1px dashed #cbd5e1;
  background:var(--bg);color:var(--muted);font-size:12px;line-height:1.45}
.side .me{margin-top:auto;padding:14px 18px 0;border-top:1px solid var(--border)}
.side .me b{display:block;font-size:12.5px;overflow-wrap:anywhere}
.side .me span{font-size:11.5px;color:var(--muted)}
.side .me form{margin-top:8px}
.main{flex:1;min-width:0;padding:20px 24px 60px;max-width:1240px}

/* ---------------- bandeau de contexte client ---------------- */
.ctxbar{display:flex;align-items:center;gap:10px;background:var(--fa);color:#fff;
  border-radius:10px;padding:8px 14px;margin-bottom:14px;font-size:13px;box-shadow:var(--shadow-sm)}
.ctxbar .e{font-size:15px}
.ctxbar b{font-weight:700}

/* ---------------- bandeau de page (cfx) ---------------- */
.cfx-head{display:flex;align-items:center;gap:14px;color:#fff;padding:16px 20px;
  background:linear-gradient(135deg,var(--fa) 0%,var(--fa2) 100%);
  border-radius:var(--radius);box-shadow:var(--shadow-md);margin-bottom:18px}
.cfx-head .ic{flex:0 0 44px;height:44px;display:grid;place-items:center;
  background:rgba(255,255,255,.18);border-radius:10px;font-size:22px}
.cfx-head .ti{font-size:18px;font-weight:650;letter-spacing:-.01em}
.cfx-head .su{font-size:12.5px;opacity:.85;margin-top:2px}
/* Lot 46 — connexion par code : saisie large, option « se souvenir ». */
.codein{width:100%;font-size:30px;letter-spacing:.35em;text-align:center;padding:12px 10px;
  border:1.5px solid #a9c0d6;border-radius:10px;font-weight:800;color:#0d1b2a;
  font-variant-numeric:tabular-nums;margin-bottom:12px;background:#fff}
.codein:focus{outline:0;border-color:#16406b;box-shadow:0 0 0 4px rgba(22,64,107,.16)}
.codein::placeholder{color:#c3d4e4;letter-spacing:.35em}
.souv{display:flex;gap:9px;align-items:flex-start;margin:0 0 13px;cursor:pointer;font-size:12.5px}
.souv small{display:block;color:var(--muted);font-size:11px}
.lienbtn{background:none;border:0;color:#16406b;font:inherit;font-size:12.5px;cursor:pointer;
  text-decoration:underline}
.pied-aide{text-align:center;font-size:12px;color:var(--muted);margin:12px 0 0;line-height:1.5}
.fld .opt{font-weight:400;color:var(--muted);font-size:11px;text-transform:none;letter-spacing:0}

/* Lot 45 — sous-titres du menu client et indice de repli. */
.side .ssz{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#7891ab;padding:11px 14px 4px;margin-top:3px;border-top:1px solid #e6edf4}
.side .ssz:first-of-type{margin-top:1px}
.side .repli{font-weight:500;font-size:10px;opacity:.65;letter-spacing:0;text-transform:none}
/* la barre de gauche defile seule : le contenu de la page ne bouge plus */
.side{max-height:100vh;overflow-y:auto}

/* zone opérateur : bandeaux rouges (convention de la charte) */
.main.op .cfx-head{background:linear-gradient(135deg,var(--rouge) 0%,var(--rouge2) 100%)}

/* ---------------- cartes ---------------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:16px 18px;margin-bottom:14px}
.card > table:first-child{margin-top:-4px}

/* ---------------- boutons ---------------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#fff;
  color:var(--text);border:1px solid var(--border);border-radius:8px;cursor:pointer;
  font-weight:600;font-size:13px;text-decoration:none}
.btn:hover{background:var(--bg)}
.btn.p{background:var(--fa);border-color:var(--fa);color:#fff}
.btn.p:hover{background:var(--fa2);border-color:var(--fa2)}
.btn.d{color:var(--rouge2);border-color:#f5c2c7;background:#fff}
.btn.d:hover{background:var(--rouge-soft)}
.btn.s{padding:5px 10px;font-size:12px}
/* boutons posés sur un bandeau coloré : translucides */
.cfx-head .btn,.cfx-head .btn.p,.cfx-head .btn.s{background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.38);color:#fff}
.cfx-head .btn:hover,.cfx-head .btn.p:hover{background:rgba(255,255,255,.3)}

/* ---------------- tableaux ---------------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:650;padding:9px 12px;border-bottom:1px solid var(--border);
  background:var(--fa-soft);white-space:nowrap}
.main.op th{background:var(--rouge-soft)}
td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:hover td{background:var(--bg)}
td.empty{text-align:center;color:var(--muted);padding:22px 12px;font-style:italic}
td.empty:hover{background:transparent}

/* ---------------- pastilles ---------------- */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}
.pill.g{background:var(--fa-tint);color:var(--fa-ink)}
.pill.r{background:var(--rouge-tint);color:#7a000e}
.pill.n{background:#e2e8f0;color:#334155}

/* ---------------- champs ---------------- */
.fld{margin-bottom:13px}
.fld label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.fld input[type=text],.fld input[type=email],.fld input[type=password],
.fld input[type=number],.fld select,.fld textarea{width:100%;padding:8px 10px;
  border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font:inherit}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--fa);
  outline-offset:-1px;border-color:var(--fa)}
.fld small{color:var(--muted);font-size:11.5px;display:block;margin-top:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.destrow{display:grid;grid-template-columns:200px 1fr;gap:8px}
.destrow select,.destrow input{padding:8px 10px;border:1px solid var(--border);
  border-radius:8px;font:inherit}
.keysrow{display:grid;grid-template-columns:46px 150px 1fr 1fr;gap:8px;margin-bottom:7px;
  align-items:center}
.keysrow select,.keysrow input{padding:7px 9px;border:1px solid var(--border);
  border-radius:8px;font:inherit}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:12px}
.filters .fld{margin:0}
.check{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;margin:9px 0}

/* ---------- lignes de tableau cliquables ----------
   Une ligne porteuse de data-href s'ouvre au clic, où que l'on clique
   (sauf sur un bouton ou un lien à l'intérieur). Remplace les boutons
   « Modifier » qui alourdissaient chaque ligne. */
tr[data-href]{cursor:pointer}
tr[data-href]:hover > td{background:var(--fa-soft)}
tr[data-href]:hover > td:first-child{box-shadow:inset 3px 0 0 var(--fa)}
tr[data-href]:focus-visible{outline:2px solid var(--fa);outline-offset:-2px}
tr[data-href] .chev{color:var(--muted);font-weight:700;opacity:0;transition:.12s}
tr[data-href]:hover .chev{opacity:1;color:var(--fa2)}

/* ---------- bouton « copier » accolé à un champ ---------- */
.copywrap{display:flex;align-items:stretch;gap:0;width:100%}
.copywrap > input,.copywrap > code{flex:1;min-width:0;border-radius:8px 0 0 8px}
.copywrap > code{display:flex;align-items:center;padding:8px 11px;
  border:1px solid var(--border);border-right:0;background:#f8fafc}
.btn.copybtn{flex:0 0 auto;border-radius:0 8px 8px 0;border-left:0;padding:0 12px;
  font-size:15px;line-height:1;color:var(--muted);min-width:42px}
.btn.copybtn:hover{background:var(--fa-soft);color:var(--fa2);border-color:var(--fa)}
.btn.copybtn.ok{background:var(--fa-tint);color:var(--fa-ink);border-color:var(--fa)}
code.secret{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em}
a.oeil{text-decoration:none;font-size:13px;margin-left:2px}
details summary::-webkit-details-marker{color:var(--muted)}
details[open] summary{margin-bottom:2px}

/* ---------- fiche à onglets (fiche trunk) ---------- */
/* ruban d'état permanent, sous le bandeau de page */
.ribbon{background:#fff;border-left:1px solid var(--border);border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap}
.ribbon .cell{padding:13px 22px;border-right:1px solid #eef2f6;min-width:152px}
.ribbon .cell:last-child{border-right:0}
.ribbon .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#94a3b8}
.ribbon .v{font-size:14px;font-weight:650;margin-top:4px;display:flex;align-items:center;gap:7px}
.ribbon .v small{font-weight:400;color:var(--muted);font-size:12px}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.dot.ok{background:#16a34a}.dot.ko{background:#dc2626}.dot.na{background:#cbd5e1}

/* aperçu « ce que voit votre correspondant » */
.preview{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:center;
  background:linear-gradient(135deg,#0f1b30,#0b1220);border-radius:14px;padding:22px 24px;
  margin-bottom:24px;box-shadow:0 12px 32px -8px rgba(11,18,32,.18)}
.phone{background:#111827;border:1px solid rgba(255,255,255,.14);border-radius:22px;
  padding:20px 18px 22px;text-align:center;box-shadow:0 10px 28px -6px rgba(0,0,0,.6)}
.phone .lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7f8ea7;
  font-weight:700;margin-bottom:14px}
.phone .who{font-size:13px;color:#9fb0c8;margin-bottom:3px}
.phone .num{font-size:20px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.phone .call{margin-top:16px;display:flex;gap:12px;justify-content:center}
.phone .call i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:16px;color:#fff}
.phone .call .g{background:#16a34a}.phone .call .r{background:#dc2626}
.pv-txt h4{color:#fff;font-size:15px;font-weight:650;margin-bottom:7px}
.pv-txt p{color:#a9b8cf;font-size:13px;max-width:52ch}
.pv-txt .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#dbe6f5;
  border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600}
.chip b{color:#5eead4}

/* cartes de réglage : en-tête en RELIEF */
.setgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.setcard{border:1px solid var(--border);border-radius:12px;padding:0 0 16px;background:#fff;
  overflow:hidden;box-shadow:0 1px 2px rgba(11,18,32,.05)}
.setcard:hover{border-color:#cfdae6;box-shadow:0 2px 8px rgba(11,18,32,.07)}
.setcard .top{display:flex;align-items:center;gap:12px;padding:13px 17px;
  background:linear-gradient(180deg,#fdfefe 0%,#eef2f7 100%);border-bottom:1px solid #dde5ee;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(11,18,32,.06);margin-bottom:14px}
.setcard .ic{flex:0 0 36px;height:36px;border-radius:10px;display:grid;place-items:center;
  font-size:17px;background:linear-gradient(180deg,#ffffff,#e8fbf7);border:1px solid #b8ece4;
  box-shadow:0 1px 2px rgba(13,148,136,.20), inset 0 1px 0 #fff}
.setcard.lockd .ic{background:linear-gradient(180deg,#ffffff,#ffeef0);border-color:#f6c9cf;
  box-shadow:0 1px 2px rgba(168,0,15,.18), inset 0 1px 0 #fff}
.setcard h5{font-size:13.5px;font-weight:700;margin:0}
.setcard .top ~ *{margin-left:17px;margin-right:17px}
.setcard .why{font-size:12px;color:var(--muted);margin-bottom:12px}
.setcard .fld{margin-bottom:0}
.setcard .ex{margin-top:11px;font-size:12px;color:var(--muted);background:#f8fafc;
  border-radius:8px;padding:9px 11px;border:1px solid #eef2f6}
.setcard .ex b{color:#334155}
.setcard .row{display:flex;gap:9px}
.setcard .row .fld{margin-left:0;margin-right:0}

/* onglets à fort contraste */
.tabs{display:flex;gap:5px;background:#0b1220;padding:7px 10px 0;overflow-x:auto}
.tabs a{background:rgba(255,255,255,.08);color:#b6c4d8;font-size:13.5px;font-weight:700;
  padding:11px 17px;border-radius:10px 10px 0 0;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px}
.tabs a:hover{background:rgba(255,255,255,.16);color:#fff}
.tabs a.on{background:#fff;color:var(--rouge2);box-shadow:0 -3px 10px rgba(0,0,0,.22)}
.tabs .n{background:rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:0 7px;
  font-size:11px;font-weight:800;min-width:20px;text-align:center}
.tabs a.on .n{background:var(--rouge);color:#fff}
.tabs .warn{width:7px;height:7px;border-radius:50%;background:#f59e0b}

.pane{background:#fff;border:1px solid var(--border);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-sm);
  padding:26px 28px 28px;margin-bottom:14px}
.pane .ph{display:flex;align-items:baseline;gap:10px;margin-bottom:3px;flex-wrap:wrap}
.pane .ph h3{font-size:15px;font-weight:650}
.pane .ph .of{margin-left:auto;font-size:12.5px;color:var(--muted)}
.pane .lead{color:var(--muted);font-size:13px;max-width:64ch;margin-bottom:20px}
.pane .sec{border-top:1px solid #eef2f6;margin-top:22px;padding-top:20px}
.pane .sec h4{font-size:13px;font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:8px}
.pane .sec .sh{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.split{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start}
.aside{background:#fbfcfd;border:1px solid var(--border);border-radius:12px;padding:0 0 17px;
  overflow:hidden}
.aside h4{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:13px 17px;
  background:linear-gradient(180deg,#fdfefe 0%,#eef2f7 100%);border-bottom:1px solid #dde5ee;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(11,18,32,.06);
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#334155}
.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 17px;
  border-bottom:1px solid #eef2f6;font-size:12.5px}
.kv:last-of-type{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-weight:650;text-align:right}
.aside .btn{width:calc(100% - 34px);margin:10px 17px 0;justify-content:center}
.aside small{display:block;margin:12px 17px 0;font-size:12px;color:var(--muted)}

.box{border-radius:12px;padding:15px 17px;font-size:13px;margin-bottom:18px;border:1px solid}
.box.okb{background:var(--fa-soft);border-color:#b8ece4;color:#0f5c55}
.box.kob{background:var(--rouge-soft);border-color:#f6c9cf;color:#7a000e}
.box.wab{background:#fffbeb;border-color:#fde3a7;color:#78350f}
.box .bt{font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:5px}
.box .fix{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap}

/* lignes de destinations de la fiche trunk — NE PAS nommer « zone » :
   cette classe est déjà celle des groupes du menu latéral (.side .zone). */
.zline{display:flex;align-items:center;gap:14px;padding:11px 2px;border-bottom:1px solid #eef2f6}
.zline:last-child{border-bottom:0}
.zline .fl{font-size:17px;width:24px;text-align:center}
.zline .nm{font-weight:600;font-size:13.5px}
.zline .ds{font-size:12px;color:#94a3b8}
.zline .rt{margin-left:auto;display:flex;align-items:center;gap:12px}
.aide{background:var(--fa-soft);border:1px solid #c8f0e9;border-radius:12px;padding:17px 19px;
  font-size:12.8px;margin:14px 0 20px;line-height:1.65}
.qm{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:#e2e8f0;color:#475569;font-size:12px;font-weight:800;cursor:pointer;
  border:0;text-decoration:none}
.qm:hover{background:var(--fa);color:#fff}
.mono{font:12.5px ui-monospace,Menlo,Consolas,monospace;color:#475569}
.auto{font-size:11px;font-weight:700;color:#5eead4;background:rgba(94,234,212,.16);
  padding:2px 8px;border-radius:6px}
.cfx-head.tabbed{border-radius:var(--radius) var(--radius) 0 0;margin-bottom:0}
@media(max-width:900px){.split{grid-template-columns:1fr}}
@media(max-width:860px){.setgrid{grid-template-columns:1fr}}
@media(max-width:760px){.preview{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}}

/* ---------------- messages, secrets, connexion ---------------- */
.msg{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-weight:600;font-size:13.5px}
.msg.ok{background:var(--fa-tint);color:var(--fa-ink)}
.msg.err{background:var(--rouge-tint);color:#7a000e}
.secret{background:#0f172a;color:#5eead4;font-family:ui-monospace,Menlo,Consolas,monospace;
  padding:14px;border-radius:10px;font-size:16px;letter-spacing:.04em;user-select:all;
  margin:8px 0;word-break:break-all}
.qr{display:flex;justify-content:center;margin:6px 0 14px}
.qr svg{width:200px;height:200px;border-radius:10px;box-shadow:0 0 0 1px var(--border)}
.login{max-width:420px;margin:8vh auto}
.login .logo{text-align:center;margin-bottom:18px}
.login .logo b{font-size:20px}
.login .logo span{display:block;color:var(--muted);font-size:12.5px}

@media(max-width:900px){.grid2{grid-template-columns:1fr}}
@media(max-width:760px){
  .app{flex-direction:column}
  .side{flex:none;height:auto;position:static;border-right:0;
    border-bottom:1px solid var(--border);padding:10px}
  .side .brand,.side .grp,.side .noclient{display:none}
  .side .zone{display:flex;overflow-x:auto;margin:0 0 6px;padding:2px}
  .side a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:8px 12px}
  .side a.on{border-left:0}
  .side .me{margin-top:8px}
  .main{padding:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Lot 38 — fiche extension modernisee : cartes a bandeau bleu nuit,
   situations en lignes a icone, interrupteurs, apercu du parcours d'appel.
   Meme vocabulaire visuel que les touches du telephone (lot 37). */
.xb{background:#fff;border:1px solid #a9c0d6;border-radius:12px;overflow:hidden;margin-bottom:11px;
  box-shadow:0 2px 4px rgba(13,27,42,.07),0 10px 24px rgba(13,27,42,.07)}
.xb-ent{display:flex;align-items:center;gap:11px;padding:8px 14px;
  background:linear-gradient(120deg,#16406b,#0f3054);color:#fff}
/* La charte impose « .card h2 { color:#0d3560 } » PLUS BAS dans la feuille :
   sur un bandeau bleu nuit, le titre devenait invisible. On reprend la main
   avec un selecteur plus specifique, sans recourir a !important. */
.xb-ent h2,.card .xb-ent h2,.pane .xb-ent h2{font-size:13px;margin:0;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:#fff}
.xb-tag{margin-left:auto;font-size:11.5px;background:rgba(255,255,255,.15);color:#dbeafe;
  border-radius:99px;padding:3px 11px;font-weight:600}
.xb-corps{padding:11px 14px}
.xrg{display:flex;flex-wrap:wrap;gap:9px 16px;align-items:flex-start}
.xf label{display:block;font-size:10px;letter-spacing:.05em;color:#16406b;font-weight:800;
  text-transform:uppercase;margin-bottom:2px;white-space:nowrap}
.xf input,.xf select{padding:5px 9px;border:1.5px solid #a9c0d6;border-radius:7px;background:#fff;
  font:inherit;font-size:12.5px;height:30px;color:#0d1b2a;font-weight:600}
.xf input:focus,.xf select:focus{outline:0;border-color:#16406b;box-shadow:0 0 0 3px rgba(22,64,107,.18)}
.xf input::placeholder{color:#8fa9c0;font-weight:400}
.xf small{display:block;color:#5b7b99;font-size:10.5px;margin-top:2px;font-weight:400}
.xf.w1 input{width:96px}
.xf.w2 input,.xf.w2 select{width:210px}
.xf.w3 input,.xf.w3 select{width:290px}
.xf.w4 select{width:330px}
/* situations */
.xduo{display:grid;grid-template-columns:1fr 262px}
.xduo-g{padding:10px 12px 12px}
.xsit{display:flex;align-items:center;gap:10px;padding:6px 9px;border:1px solid #dce6f0;
  border-radius:9px;background:#fff}
.xsit + .xsit{margin-top:4px}
.xsit:hover{border-color:#7aa7d0;box-shadow:0 2px 8px rgba(22,64,107,.09)}
.xsit.off{background:#f4f8fc}
.xic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;
  flex:0 0 28px;border:1px solid transparent}
.i-noa{background:#e2ecf8;color:#123f6b;border-color:#93bce6}
.i-occ{background:#fbe0e4;color:#8e1b28;border-color:#eab0b8}
.i-npd{background:#e9e0f8;color:#4b2f86;border-color:#c2abec}
.i-inc{background:#dff0e6;color:#0a5c2e;border-color:#96d5af}
.xtxt{width:152px;flex:0 0 152px}
.xtxt b{display:block;font-size:12.5px;line-height:1.2}
.xtxt small{display:block;color:#5b7b99;font-size:10.5px;line-height:1.2}
.xduree{width:80px;flex:0 0 80px;font-size:12px;color:#41607d}
.xduree input{width:64px;padding:5px 7px;height:30px;border:1.5px solid #a9c0d6;border-radius:7px;
  font-weight:600;font-size:12.5px}
.xtiret{color:#a9bccd;text-align:center;width:80px;flex:0 0 80px}
.xch{flex:1;display:grid;grid-template-columns:1fr 190px;gap:8px;min-width:0}
.xsit select,.xsit input.xdest{width:100%;padding:4px 8px;border:1.5px solid #a9c0d6;border-radius:7px;
  height:28px;font:inherit;font-size:12.5px;font-weight:600;color:#0d1b2a}
.xsit input.xdest::placeholder{color:#8fa9c0;font-weight:400}
.xsit select:focus,.xsit input:focus{outline:0;border-color:#16406b;box-shadow:0 0 0 3px rgba(22,64,107,.18)}
/* parcours de l'appel */
.xduo-d{background:#eef4fa;border-left:1px solid #a9c0d6;padding:13px}
.xduo-d h3{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#16406b;
  margin:0 0 10px;font-weight:800}
.xet{display:flex;gap:9px;align-items:flex-start;font-size:12px}
.xet .rond{width:22px;height:22px;border-radius:50%;flex:0 0 22px;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff;background:#16406b}
.xet .rond.fin{background:#0f7a3d}
.xet .t{padding-bottom:8px;margin-left:-20px;padding-left:29px;border-left:2px solid #cfdae6;margin-top:1px}
.xet:last-child .t{border-left-color:transparent;padding-bottom:0}
.xet b{display:block;color:#0d1b2a}
.xet small{color:#41607d}
.xleg{margin-top:8px;font-size:11px;color:#41607d;line-height:1.5;background:#fff;
  border:1px solid #cfdae6;border-radius:8px;padding:9px 10px}
/* interrupteurs */
.xsw{display:flex;align-items:center;gap:9px;padding:2px 0;cursor:pointer;min-height:26px}
.xsw input{position:absolute;opacity:0;width:0;height:0}
.xbt{width:32px;height:18px;border-radius:99px;background:#c3d3e2;position:relative;flex:0 0 32px;
  transition:.15s}
.xbt i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;
  transition:.15s}
.xsw input:checked + .xbt{background:#0f7a3d}
.xsw input:checked + .xbt i{left:16px}
.xsw span{font-size:12.5px;font-weight:600;line-height:1.25}
.xsw span small{display:inline;color:#5b7b99;font-weight:400;font-size:11.5px;margin-left:7px}
.xsous{margin-left:41px;padding-left:11px;border-left:2px solid #dce6f0;margin-top:1px}
/* QR */
.xqr{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;margin-top:14px;
  padding-top:12px;border-top:1px solid #dce6f0}
.xqr-c{text-align:center}
.xqr-img{background:#fff;border:1.5px solid #a9c0d6;border-radius:10px;padding:7px;display:inline-block}
.xqr-c p{font-size:11.5px;color:#33526f;margin:6px 0 0;max-width:150px;line-height:1.4}
/* Lot 44 — editeur d'horaires : modeles, grille peinte, resume en francais. */
.hlab{font-size:10.5px;font-weight:800;color:#16406b;text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 8px}
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.mod{border:1.5px solid #dbe7f2;border-radius:12px;padding:10px 12px;cursor:pointer;background:#fff;
  text-align:left;font:inherit;transition:.15s}
.mod:hover{border-color:#7aa7d0;box-shadow:0 3px 12px rgba(22,64,107,.10)}
.mod.on{border-color:#16406b;background:#f4f9fe;box-shadow:0 0 0 3px rgba(22,64,107,.10)}
.mod b{display:block;font-size:12.5px;margin-bottom:2px;color:#0b1a2b}
.mod small{color:#7891ab;font-size:11px;display:block;line-height:1.35}
.grille{border:1px solid #e3ebf3;border-radius:11px;overflow:hidden;user-select:none}
.gh{display:grid;grid-template-columns:48px repeat(24,1fr);background:#f7fafd;border-bottom:1px solid #e3ebf3}
.gh span{font-size:9px;color:#93a7ba;text-align:center;padding:4px 0;font-weight:700}
.gl{display:grid;grid-template-columns:48px repeat(24,1fr);border-bottom:1px solid #f0f4f8}
.gl:last-child{border-bottom:0}
.gl .j{font-size:10.5px;font-weight:800;color:#4a6a88;padding:6px 0 6px 9px;text-transform:uppercase;
  letter-spacing:.05em;display:flex;align-items:center}
.gl .h{height:26px;border-right:1px solid #f4f7fa;cursor:pointer}
.gl .h:hover{background:#e3effb}
.gl .h.on{background:linear-gradient(180deg,#4a97da,#1d69b3)}
.gl .h.on:hover{background:linear-gradient(180deg,#3f8fd6,#155a9c)}
.outils{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.pu{border:1px solid #cfdae6;background:#fff;border-radius:8px;padding:6px 12px;font:inherit;
  font-size:12px;font-weight:700;color:#16406b;cursor:pointer}
.pu:hover{background:#f2f7fc;border-color:#a9c6e2}
.outils .aide{font-size:11.5px;color:#7891ab;margin-left:auto}
.res{background:#f4f9fe;border:1px solid #cfe0ee;border-radius:11px;padding:10px 13px;
  font-size:12.5px;color:#16406b;margin-top:12px}
.res b{display:block;margin-bottom:3px}
.hpied{display:flex;gap:9px;padding:12px 17px;border-top:1px solid #edf2f7;background:#f8fbfd}
/* fermetures */
/* Lot 56 : la LIGNE de l'interrupteur manquait — sans elle, le bouton se
   superposait au texte et rognait le debut du libelle. */
.sw{display:flex;align-items:flex-start;gap:11px;cursor:pointer;padding:4px 0;margin:0 0 4px}
.sw > span:last-child{flex:1;min-width:0}
.sw b{font-size:13px;display:block;line-height:1.3}
.sw small{display:block;color:#5b7b99;font-size:11.5px;line-height:1.4;font-weight:400}
.sw .bt{width:36px;height:21px;border-radius:99px;background:#c3d3e2;position:relative;
  flex:0 0 36px;margin-top:2px;transition:background .15s}
.sw .bt.on{background:#0f7a3d}
.sw .bt i{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff}
.sw .bt.on i{left:18px}
.exc{margin-left:47px;padding-left:13px;border-left:2px solid #e6edf4;margin-top:6px}
.ex{display:flex;align-items:center;gap:10px;padding:5px 0}
.ex .d{background:#eef4fa;border:1px solid #cfe0ee;color:#16406b;border-radius:7px;padding:2px 9px;
  font-size:11.5px;font-weight:800;min-width:64px;text-align:center}
.ex .d.per{background:#fdf4e7;border-color:#eed7b4;color:#8a5a1e;min-width:104px}
.ex b{font-size:12.5px}
.ex .x{border:1px solid #e8b6bd;background:#fff;color:#a01e2c;border-radius:6px;width:24px;height:24px;
  cursor:pointer;font-size:11px}
.ex .x:hover{background:#fdeef0}
.ajt{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.ajt input,.ajt select{padding:5px 9px;border:1px solid #c9d8e6;border-radius:8px;font:inherit;
  font-size:12.5px;height:30px;font-weight:600}

/* Lot 43b — le « plus personne de joignable » est une EXCEPTION au cas
   « personne ne decroche », pas une situation jumelle : on la replie. */
.xexc{border:1px dashed #c9d8e6;border-radius:10px;background:#fafcfe;margin-top:6px;overflow:hidden}
.xexc.ouvert{border-style:solid;border-color:#e6c199;background:#fffaf3}
.xexc-t{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;
  background:transparent;font:inherit;text-align:left;cursor:pointer;color:#0d1b2a}
.xexc-t b{font-size:12.5px;display:block;line-height:1.2}
.xexc-t small{color:#5b7b99;font-size:10.5px;display:block;line-height:1.25}
.xexc-t .xic{width:26px;height:26px;font-size:12px;flex:0 0 26px}
.xexc-fl{margin-left:auto;color:#8fa9c0;font-size:12px;transition:.15s}
.xexc.ouvert .xexc-fl{transform:rotate(180deg)}
.xexc-c{display:none;padding:2px 10px 10px 46px}
.xexc.ouvert .xexc-c{display:block}

/* Lot 42 — page Horaires : etat du jour en hero, semaine dessinee,
   annee resumee, fermetures en deux onglets. */
.hero{border-radius:15px;padding:14px 18px;margin-bottom:13px;display:flex;align-items:center;
  gap:15px;background:linear-gradient(115deg,#0e3a2a,#116b41 60%);color:#eafaf1;
  box-shadow:0 6px 20px rgba(11,50,32,.20)}
.hero.ferme{background:linear-gradient(115deg,#3d1418,#8e1b28 60%);box-shadow:0 6px 20px rgba(90,16,26,.20)}
.hero .rond{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center;font-size:19px;flex:0 0 42px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hero b{font-size:15.5px;display:block;color:#fff}
.hero small{color:#c9ecda;font-size:12px}
.hero.ferme small{color:#f3c9ce}
.hero .droite{margin-left:auto;text-align:right}
.hero .droite b{font-size:14px}
.hc{background:#fff;border-radius:15px;margin-bottom:13px;overflow:hidden;
  box-shadow:0 1px 2px rgba(11,26,43,.06),0 10px 28px rgba(11,26,43,.09)}
.hc-ent{display:flex;align-items:center;gap:11px;padding:13px 17px;border-bottom:1px solid #edf2f7}
.hc-ent .ic{width:30px;height:30px;border-radius:9px;background:#e8f0f9;color:#16406b;
  display:grid;place-items:center;font-size:14px;flex:0 0 30px}
.hc-ent h2,.card .hc-ent h2{font-size:14px;margin:0;font-weight:800;color:#0b1a2b}
.hc-ent .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.hc-corps{padding:14px 17px 17px}
.enligne{display:flex;gap:7px;align-items:center}
.ans{display:flex;align-items:center;gap:8px;font-size:13px;background:#f1f5f9;border-radius:8px;
  padding:3px 10px}
.ans a{color:#16406b;text-decoration:none;font-weight:800;font-size:15px;line-height:1}
.ans a:hover{color:#3f8fd6}
.ans b{font-weight:800;color:#0b1a2b}
.tagu{font-size:11px;color:#4a6a88;background:#f1f5f9;border-radius:99px;padding:2px 9px;font-weight:600}
.tagu.vide{color:#93a7ba}
/* calendrier dessine */
.cal{border:1px solid #e3ebf3;border-radius:12px;padding:12px 14px;background:#fff}
.cal + .cal{margin-top:9px}
.cal:hover{border-color:#a9c6e2;box-shadow:0 4px 14px rgba(22,64,107,.09)}
.cal-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cal-nom{font-size:13.5px;font-weight:800;color:#16406b;text-decoration:none}
.cal-nom:hover{text-decoration:underline}
.cal-h .sp{margin-left:auto;display:flex;gap:6px;align-items:center}
.sem{display:grid;grid-template-columns:32px 1fr;gap:3px 9px;align-items:center}
.jour{font-size:10px;font-weight:800;color:#7891ab;text-transform:uppercase;letter-spacing:.06em}
.piste{position:relative;height:14px;border-radius:5px;background:#f2f6fa;overflow:hidden}
.piste .seg{position:absolute;top:0;bottom:0;border-radius:5px;
  background:linear-gradient(180deg,#3f8fd6,#1d69b3)}
.piste.ferme{background:repeating-linear-gradient(45deg,#f7f9fc,#f7f9fc 5px,#eef2f7 5px,#eef2f7 10px)}
.regle{display:grid;grid-template-columns:32px 1fr;gap:9px;margin-top:4px}
.regle .g{display:flex;justify-content:space-between;font-size:9.5px;color:#9bafc2;font-weight:600}
/* onglets des fermetures */
.htabs{display:flex;gap:0;padding:0 17px;border-bottom:1px solid #edf2f7;align-items:center}
.htabs a{padding:10px 3px;margin-right:16px;font-size:12.5px;font-weight:700;color:#7891ab;
  text-decoration:none;border-bottom:2.5px solid transparent}
.htabs a.on{color:#16406b;border-bottom-color:#16406b}
.htabs .cpt{margin-left:auto;font-size:11.5px;color:#7891ab}
/* annee resumee */
.annee{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin-bottom:12px}
.mois{background:#f7fafd;border:1px solid #e6edf4;border-radius:9px;padding:6px 3px;text-align:center}
.mois .m{font-size:9.5px;font-weight:800;color:#7891ab;text-transform:uppercase}
.mois .pts{display:flex;justify-content:center;gap:2px;margin-top:4px;min-height:7px}
.mois .pt{width:5px;height:5px;border-radius:50%;background:#3f8fd6;display:inline-block}
.mois .pt.per{background:#c98b2e}
.mois.creux{opacity:.5}
/* ajout et lignes */
.hajout{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-end;padding:11px 13px;
  background:#f6fafd;border:1px solid #dbe7f2;border-radius:11px;margin-bottom:11px}
.hajout .f label{display:block;font-size:9.5px;letter-spacing:.07em;color:#5b7b99;font-weight:800;
  text-transform:uppercase;margin-bottom:3px}
.hajout .f input,.hajout .f select{padding:5px 9px;border:1px solid #c9d8e6;border-radius:8px;
  background:#fff;font:inherit;font-size:12.5px;height:31px;font-weight:600}
.fx{display:flex;align-items:center;gap:11px;padding:7px 11px;border-radius:10px;
  border:1px solid #edf2f7}
.fx + .fx{margin-top:4px}
.fx:hover{background:#f8fbfe;border-color:#dbe7f2}
.fx b{font-size:12.5px;font-weight:700}
.fx form{margin-left:auto}
.fx .src{margin-left:auto;font-size:11px;color:#8fa5ba}
.fx .src + form{margin-left:11px}
.dte{background:#eef4fa;color:#16406b;border:1px solid #cfe0ee;border-radius:8px;padding:2px 9px;
  font-size:11.5px;font-weight:800;white-space:nowrap;min-width:64px;text-align:center}
.dte.per{background:#fdf4e7;color:#8a5a1e;border-color:#eed7b4;min-width:104px}
.hhint{font-size:11.5px;color:#7891ab;margin:11px 0 0;line-height:1.5}
.hvide{text-align:center;padding:22px 14px;border:1px dashed #c9d8e6;border-radius:12px;background:#fafcfe}
.hvide .em{font-size:24px;opacity:.5}
.hvide b{display:block;font-size:13.5px;margin:5px 0 3px}
.hvide small{color:#7891ab;display:block;margin-bottom:11px}

/* Lot 41 — fiche groupe : membres en lignes, deux colonnes accueil/horaires. */
.mb{display:flex;align-items:center;gap:9px;padding:5px 9px;border:1px solid #dce6f0;
  border-radius:9px;background:#fff;cursor:pointer}
.mb + .mb{margin-top:4px}
.mb:hover{border-color:#7aa7d0}
.mb.pas{background:#f7fafd;opacity:.75}
.mb.hors{background:#fdf6f7;border-color:#eab0b8}
.mb b{font-size:12.5px}
.mbnum{font-weight:800;color:#16406b;font-size:12.5px;min-width:38px}
.mb.pas .mbnum{color:#8fa9c0}
.et{font-size:10.5px;border-radius:99px;padding:1px 8px;font-weight:700;margin-left:auto}
.et.ok{background:#dff0e6;color:#0a5c2e;border:1px solid #96d5af}
.et.npd{background:#fbe0e4;color:#8e1b28;border:1px solid #eab0b8}
.et2{font-size:11px;color:#5b7b99;width:86px;text-align:right}
.mbord{font-size:10.5px;color:#5b7b99;display:flex;align-items:center;gap:5px}
.mbord input{width:54px;padding:3px 6px;height:24px;border:1.5px solid #a9c0d6;border-radius:6px;
  font-size:12px;font-weight:600}
.i-vid{background:#fdf0e2;color:#7a4d13;border-color:#e6c199}
.xch2{flex:1;min-width:0}
.xch2 select,.xch2 input{padding:4px 8px;border:1.5px solid #a9c0d6;border-radius:7px;height:28px;
  font:inherit;font-size:12.5px;font-weight:600;color:#0d1b2a}
.hint2{font-size:11px;color:#5b7b99;margin:7px 0 0;line-height:1.4}
.xdeux{display:grid;grid-template-columns:1fr 1fr}
.xdeux > div{padding:11px 14px}
.xdeux > div + div{border-left:1px solid #dce6f0}
.xst{font-size:11px;font-weight:800;color:#16406b;text-transform:uppercase;letter-spacing:.05em;
  margin:0 0 7px}

/* Lot 39 — rappel de priorite quand le poste est membre d'un groupe. */
.xprio{background:#fff8f1;border:1px solid #f0d9c0;border-radius:9px;padding:9px 11px;margin-top:9px}
.xprio b{color:#8a5a1e;font-size:12.5px}
.xprio p{margin:4px 0 7px;font-size:11.5px;color:#5c4326;line-height:1.45}
.xprio-l{display:flex;flex-wrap:wrap;gap:5px}
.xprio .xpil{background:#fdf0e2;border-color:#e6c199;color:#7a4d13;font-weight:600;font-size:11.5px}
.xprio .xpil b{color:#5c3a0d}

/* Lignes directes (SDA) : pastilles compactes dans les parametres de base,
   au lieu d'une carte entiere pour deux numeros. */
.xsda{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:30px}
.xpil{display:inline-flex;align-items:center;gap:5px;background:#e8f0f9;border:1.5px solid #93bce6;
  color:#123f6b;border-radius:99px;padding:3px 9px;font-size:12.5px;font-weight:700}
.xpil-x{border:0;background:transparent;color:#5b7b99;cursor:pointer;font-size:12px;padding:0;
  line-height:1;font-weight:700}
.xpil-x:hover{color:#a01e2c}
.xvide{color:#8fa9c0;font-size:12px;font-style:italic}
.xsda-sel{padding:4px 8px;border:1.5px solid #a9c0d6;border-radius:7px;height:28px;
  font-size:12.5px;font-weight:600;color:#0d1b2a;background:#fff}
.xpied{display:flex;gap:9px;align-items:center;padding:9px 14px;border-top:1px solid #a9c0d6;
  background:#dce6f0}

/* Lot 36 — touches programmables : cartes contrastees + apercu de l'ecran
   du telephone. Le contraste est volontairement fort (bandeau bleu nuit,
   numeros pleins, bordures a 1,5 px) : la version pale etait jolie mais
   illisible a l'usage. */
.tkm-bloc{background:#fff;border:1px solid #a9c0d6;border-radius:13px;overflow:hidden;
  box-shadow:0 2px 4px rgba(13,27,42,.08),0 10px 26px rgba(13,27,42,.09);margin-top:10px}
.tkm-entete{display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:linear-gradient(120deg,#16406b,#0f3054);color:#fff}
.tkm-entete h2,.card .tkm-entete h2,.pane .tkm-entete h2{font-size:13px;margin:0;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.tkm-cpt{margin-left:auto;font-size:11.5px;color:#dbeafe;background:rgba(255,255,255,.15);
  border-radius:99px;padding:3px 11px;font-weight:600}
.tkm-corps{display:grid;grid-template-columns:1fr 258px}
.tkm-gauche{padding:11px 12px 14px}
.tkm{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:10px;
  border:1px solid #dce6f0;background:#fff;position:relative}
.tkm + .tkm{margin-top:6px}
.tkm:hover{border-color:#7aa7d0;box-shadow:0 2px 8px rgba(22,64,107,.10)}
.tkm.libre{background:#f4f8fc;border-style:dashed;border-color:#bacfe2}
.tkm.drag{border-color:#16406b;box-shadow:0 0 0 3px rgba(22,64,107,.15)}
.tkm .poi{color:#8fa9c0;cursor:grab;font-size:15px;user-select:none;width:13px;flex:0 0 13px}
.tkm .no{width:27px;height:27px;border-radius:8px;background:#16406b;color:#fff;
  font-weight:800;font-size:12px;display:grid;place-items:center;flex:0 0 27px}
.tkm.libre .no{background:#c3d3e2;color:#48657f}
.tkm .ico{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;
  font-size:14px;flex:0 0 31px;border:1px solid transparent}
.i-blf{background:#d6f2e0;color:#0a5c2e;border-color:#8fd4ac}
.i-ext{background:#d9e8f9;color:#123f6b;border-color:#8fbde8}
.i-non{background:#e6edf4;color:#7d94aa;border-color:#c9d8e5}
.tkm .ch{flex:1;display:grid;grid-template-columns:150px 1fr;gap:8px;align-items:center;min-width:0}
.tkm .deux{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.tkm select,.tkm input{width:100%;padding:5px 8px;border:1.5px solid #a9c0d6;border-radius:8px;
  background:#fff;font-size:12.5px;height:31px;color:#0d1b2a;font-weight:600}
.tkm input::placeholder{color:#8fa9c0;font-weight:400}
.tkm select:focus,.tkm input:focus{outline:0;border-color:#16406b;box-shadow:0 0 0 3px rgba(22,64,107,.18)}
.tkm .act{display:flex;gap:4px}
.tkm .mini{width:26px;height:26px;border:1.5px solid #a9c0d6;background:#fff;border-radius:7px;
  color:#2c4c6b;font-size:12px;cursor:pointer;padding:0;line-height:1;font-weight:700}
.tkm .mini:hover{background:#e8f0f9;border-color:#16406b}
.tkm .mini.sup{color:#a01e2c;border-color:#e2aeb5}
.tkm .mini.sup:hover{background:#fbe3e6;border-color:#a01e2c}
.marq-ligne{display:none}
.tkm.ligneici{border-color:#bda6ea;background:#faf7ff}
.tkm.ligneici .marq-ligne{display:block;position:absolute;right:96px;font-size:11px;
  color:#4b2f86;font-weight:700;white-space:nowrap}
.plus{margin-top:8px;width:100%;padding:9px;border:1.5px dashed #7aa7d0;background:#eef5fb;
  border-radius:10px;color:#16406b;font-weight:800;font-size:12.5px;cursor:pointer}
.plus:hover{background:#e0edf9}
.tkm-droite{background:#eef4fa;border-left:1px solid #a9c0d6;padding:13px}
.tkm-droite h3{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#16406b;
  margin:0 0 9px;font-weight:800}
.tel{background:#0d1b2a;border-radius:11px;padding:9px;border:2px solid #16283d}
.ecran{background:#050d16;border-radius:7px;padding:8px;min-height:60px}
.kl{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:6px;
  color:#eaf3fb;font-size:12px;font-weight:600;background:rgba(255,255,255,.05)}
.kl + .kl{margin-top:3px}
.kl .pt{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.pt-v{background:#22c55e;box-shadow:0 0 6px #22c55e}
.pt-r{background:#ef4444;box-shadow:0 0 6px #ef4444}
.pt-b{background:#60a5fa;box-shadow:0 0 6px #60a5fa}
.pt-l{background:#a78bfa;box-shadow:0 0 6px #a78bfa}
.pt-n{background:#2a3d52}
.kl.vide{color:#61798f;background:transparent;font-weight:400}
.kl small{margin-left:auto;color:#8fb0cc;font-size:10px;font-weight:500}
.tkm-leg{margin-top:11px;font-size:11.5px;color:#2c4c6b;line-height:1.6}
.tkm-leg b{color:#0d1b2a}
.tkm-aide{padding:11px 16px;border-top:1px solid #cfdae6;background:#f4f8fc;
  font-size:11.5px;color:#33526f}

/* Lot 34 — tableau des quatre situations d'appel de la fiche extension.
   Volontairement dense : les quatre lignes doivent se comparer d'un coup
   d'oeil, avec les en-tetes de colonnes ecrits une seule fois. */
table.situ{width:100%;border-collapse:collapse;margin-top:8px}
table.situ th{background:#eef4fa;text-align:left;font-size:10.5px;letter-spacing:.04em;
  color:#2c4c6b;text-transform:uppercase;padding:6px 9px;border-bottom:1px solid #c6d7e6}
table.situ td{padding:7px 9px;border-bottom:1px solid #e3ebf3;vertical-align:middle;background:#fff}
table.situ tr:last-child td{border-bottom:0}
table.situ td small{color:var(--muted);font-size:11px}
table.situ .tiret{color:#a8bccd}
table.situ select,table.situ input{padding:5px 8px;font-size:13px;height:30px}

/* ================================================================
   CHARTE NODIA (validée le 30/07 sur maquette v6) — bloc de
   surcharge unique, posé APRÈS le CSS historique qu'il redéfinit.
   Fond de page gris clair presque blanc ; menu latéral sur panneau
   bleu-gris foncé avec zones blanches repliables ; cartes, bandeaux
   et onglets en bleu nuit limnovo.fr éclairé de halos ; LE bleu du
   site (#3fc6ee) sur les accents ; bouton principal teal plein.
   La carte « Numéros présentés » (.preview) garde son style d'origine.
   ================================================================ */
:root{
  --blue:#3fc6ee;--blue-ink:#0a9ecb;--teal:#1cb5c9;--cyan:#67e8f9;
  --ok:#22c55e;--warn:#f5a524;--bad:#f87171;   /* jauges et états (lot 22) */
  --nuit:#0c1c31;--nuit2:#122b4a;--card:#16304f;--card2:#2c5a8c;
  --bg:#eef3f8;--text:#f2f8fd;--ink:#12283f;--muted:#b3cde2;
  --border:#35597f;--fa:#1cb5c9;--fa2:#0e8fa1;
  --fa-tint:rgba(28,181,201,.16);--fa-soft:rgba(28,181,201,.08);--fa-ink:#073b36;
  --rouge:#ef4444;--rouge2:#c22e3c;
  --rouge-tint:rgba(239,68,68,.16);--rouge-soft:rgba(239,68,68,.08);
  --shadow-sm:0 4px 14px rgba(16,35,58,.12);--shadow-md:0 10px 26px rgba(16,35,58,.16);
}
body{color:var(--ink);background:
  radial-gradient(900px 460px at 88% -10%, rgba(63,198,238,.10), transparent 60%),
  radial-gradient(760px 420px at -12% 16%, rgba(28,181,201,.07), transparent 55%),
  linear-gradient(165deg,#f2f6fa 0%,#eef3f8 55%,#eaf1f7 100%)}
/* ---- menu latéral : panneau foncé, zones blanches repliables ---- */
.side{background:linear-gradient(180deg,#c3d4e4,#aec4d8);border-right:1px solid #96b0c8;
  padding:14px 10px;box-shadow:none}
.side .brand{padding:0;border:0;margin-bottom:12px;background:#fff;border-radius:12px;
  border:1px solid #c4d5e4;box-shadow:0 4px 12px rgba(16,35,58,.14);overflow:hidden}
.side .brand img{display:block;width:100%;height:auto;padding:6px 6px}
.side details.zone{background:#fff;border:1px solid #c4d5e4;border-radius:12px;
  margin:0 0 12px;padding:0 0 6px;box-shadow:0 4px 12px rgba(16,35,58,.14);overflow:hidden}
.side details.zone[open]{padding-bottom:8px}
.side .zone summary{list-style:none;cursor:pointer;user-select:none;padding:9px 12px;
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;
  color:#f2f8fd;background:linear-gradient(120deg,#16406b,#0f3054);
  border-bottom:1px solid #0c2440;display:flex;align-items:center;gap:8px;margin:0}
.side .zone summary::-webkit-details-marker{display:none}
.side .zone summary::before{content:"\25B8";transition:transform .15s;font-size:11px}
.side .zone[open] summary::before{transform:rotate(90deg)}
.side .zone summary:hover{background:#f3f9fd}
.side .zone.op{background:#fff;box-shadow:0 4px 12px rgba(16,35,58,.14)}
.side .zone.op summary{color:#f2f8fd}
.side .zone.op summary::before{color:var(--blue-ink)}
.side .zone.cli{background:#fff;box-shadow:0 4px 12px rgba(16,35,58,.14)}
.side .zone.cli summary{color:#f2f8fd}
.side .zone.cli summary::before{color:var(--teal)}
.side a{color:#22405e;font-weight:500}
.side a:hover{background:#f0f7fc;color:#0f2946}
.side a.on{background:rgba(63,198,238,.14);color:#083048;border-left-color:var(--blue-ink);font-weight:700}
.side .zone.op a:hover{background:rgba(63,198,238,.09);color:#083048}
.side .zone.op a.on{background:rgba(63,198,238,.16);color:#083048;border-left-color:var(--blue-ink)}
.side .zone.cli a:hover{background:rgba(28,181,201,.10);color:#073b36}
.side .zone.cli a.on{background:rgba(28,181,201,.18);color:#073b36;border-left-color:var(--teal)}
.side .verline{margin:2px 10px 8px;font-size:10px;color:#5b7b99;text-align:center;
  letter-spacing:.04em}
.side .selC{margin:8px 10px 4px}
.side .selC label{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
  color:#f2f8fd;font-weight:900;margin:0;padding:5px 9px;border-radius:8px 8px 0 0;
  background:linear-gradient(120deg,#16406b,#0f3054)}
.side .selC select{width:100%;padding:6px 8px;border:1px solid #9fd3e8;border-top:0;border-radius:0 0 8px 8px;
  background:#fff;color:#0b3a52;font:inherit;font-weight:700;font-size:12px}
.side .noclient{background:#ffffffb8;border-color:#9fb6cc;color:#33526f}
.side .me{margin:auto 0 0;border:1px solid #c4d5e4;border-top:1px solid #c4d5e4;
  background:#fff;border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:8px;
  color:#12283f;box-shadow:0 4px 12px rgba(16,35,58,.14)}
.side .me .who{flex:1;min-width:0}
.side .me b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .me span{display:block;color:#33526f;font-size:10px}
.side .logout{margin:0 0 10px}
.side .logout button{width:100%;padding:7px 10px;border-radius:10px;cursor:pointer;
  border:1px solid #e4a7ae;background:#fff;color:#b3454f;font-weight:700;font-size:12.5px}
.side .logout button:hover{background:#ffe9ec;border-color:#d98a93}
/* ---- bandeaux de page : bleu nuit + halo (bleu op / teal client) ---- */
.cfx-head{color:#fff;border:1px solid rgba(63,198,238,.35);box-shadow:var(--shadow-md);
  background:radial-gradient(520px 220px at 90% -30%, rgba(28,181,201,.34), transparent 60%),
             linear-gradient(120deg,#0f2540,#0c1c31 70%)}
.main.op .cfx-head{border-color:rgba(63,198,238,.4);
  background:radial-gradient(520px 220px at 90% -30%, rgba(63,198,238,.32), transparent 60%),
             linear-gradient(120deg,#0f2540,#0c1c31 70%)}
.main.op .cfx-head.tabbed{border-color:rgba(239,68,68,.45);
  background:radial-gradient(520px 220px at 90% -30%, rgba(239,68,68,.30), transparent 60%),
             linear-gradient(120deg,#241726,#0c1c31 70%)}
.cfx-head .ic{background:rgba(255,255,255,.14)}
.ctxbar{background:linear-gradient(120deg,var(--teal),#2aa9e0)}
/* ---- DIRECTION 2 v2 (30/07) : cartes GRIS-BLEU MOYEN (variante 1), champs CLAIRS ---- */
.card,.pane{background:#dce6f0;border-color:#b3c6d9;color:#12283f;box-shadow:0 6px 18px rgba(16,35,58,.10)}
.card h1,.card h2,.card h3,.card h4,.card h5,.pane .ph h3,.pane .sec h4{color:#0d3560}
/* le premier titre en gras d'une carte devient une bande d'en-tête */
.card > b:first-child{display:block;margin:-10px -13px 10px;padding:9px 13px;
  background:linear-gradient(120deg,#16406b,#0f3054);border-bottom:1px solid #0c2440;
  color:#f2f8fd;font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:900}
table{font-variant-numeric:tabular-nums}
th{background:#c3d3e3;color:#143a5e;border-bottom:2px solid #b3c6d9}
.main.op th{background:#c3d3e3}
td{border-color:#bfd0e0}
tbody tr:nth-child(even) td,tr:nth-child(even) td{background:rgba(255,255,255,.35)}
tr:hover td,tr[data-href]:hover > td{background:rgba(255,255,255,.6)}
tr[data-href]:hover > td:first-child{box-shadow:inset 3px 0 0 #0a9ecb}
tr[data-href]:hover .chev{color:#0a9ecb}
td.empty{color:#4a6884}
.pill{padding-left:8px}
.pill::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px}
.pill.g{background:#ecfaf1;color:#0f7a3d;border:1px solid #a7e3c0}.pill.g::before{background:#22c55e}
.pill.r{background:#fdf1f2;color:#b3273a;border:1px solid #f2c1c7}.pill.r::before{background:#ef4444}
.pill.n{background:#f0f5f9;color:#33526f;border:1px solid #ccdbe8}.pill.n::before{background:#8fa9c0}
.fld label{color:#2c4c6b}
.fld input[type=text],.fld input[type=email],.fld input[type=password],
.fld input[type=number],.fld select,.fld textarea,
.destrow select,.destrow input,.keysrow select,.keysrow input{
  background:#fff;color:#12283f;border-color:#b9cede}
.fld input::placeholder,.fld textarea::placeholder,.destrow input::placeholder{color:#8fa9c0}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid #0a9ecb;outline-offset:1px;border-color:#0a9ecb}
.fld small{color:#4a6884}
.check{color:#12283f}
.btn{background:#fff;color:#12283f;border-color:#8fa9c0}
.btn:hover{background:#eaf7fc;border-color:#0a9ecb}
.btn.p{background:var(--teal);border-color:var(--teal);color:#032a33;font-weight:700}
.btn.p:hover{background:#25c3d8;border-color:#25c3d8}
.btn.d{background:#fff;color:#b3273a;border-color:#f2c1c7}
.btn.d:hover{background:#fdf1f2}
.copywrap > code{background:#fff;border-color:#b9cede;color:#12283f}
.btn.copybtn{color:#4a6884}
.btn.copybtn:hover{background:#eaf7fc;color:#0a9ecb;border-color:#0a9ecb}
.btn.copybtn.ok{background:#ecfaf1;color:#0f7a3d;border-color:#a7e3c0}
.ribbon{background:#dce6f0;border-color:#b3c6d9;color:#12283f}
.ribbon .cell{border-right-color:#bfd0e0}
.ribbon .k{color:#4a6884}
.tabs{background:#0c1c31}
.tabs a.on{background:#fff;color:#0a9ecb}
.tabs a.on .n{background:#0a9ecb;color:#fff}
.aside{background:#e4ecf4;border-color:#b3c6d9;color:#12283f}
.aside h4{background:linear-gradient(120deg,#16406b,#0f3054);border-bottom-color:#0c2440;color:#f2f8fd;box-shadow:none;text-transform:uppercase;letter-spacing:.07em;font-weight:900;font-size:11.5px}
.kv{border-bottom-color:#bfd0e0}
.kv .k{color:#4a6884}
.setcard{background:#e4ecf4;border-color:#b3c6d9;color:#12283f;box-shadow:none}
.setcard:hover{border-color:#9fc4dc;box-shadow:0 2px 10px rgba(16,35,58,.09)}
.setcard .top{background:linear-gradient(120deg,#16406b,#0f3054);border-bottom-color:#0c2440;box-shadow:none;color:#f2f8fd}
.setcard .ic{background:#dff2fb;border-color:#b3e0f2;box-shadow:none}
.setcard.lockd .ic{background:#fdeef0;border-color:#f2c1c7;box-shadow:none}
.setcard .ex{background:rgba(255,255,255,.6);border-color:#b3c6d9;color:#2c4c6b}
.setcard .ex b{color:#0d3560}
.setcard .why{color:#4a6884}
details summary{color:#12283f}
.pane .lead,.pane .sec .sh{color:#4a6884}
.pane .sec{border-top-color:#bfd0e0}
.dot.na{background:#c6d6e4}
/* ---- DENSITÉ COMPACTE (30/07) : tout tient sur un 15 pouces ---- */
body{font-size:13px}
.main{padding:12px 16px 30px}
.side{flex-basis:206px;padding:10px 8px}
.side .brand img{padding:3px 4px}
.side a{padding:5px 13px;font-size:12.5px;gap:8px}
.side .zone summary{padding:8px 11px;font-size:10px}
.side .zone .cli{margin:8px 8px 4px;padding:8px 10px}
.side .me{padding:10px 14px 0}
.cfx-head{padding:10px 14px;margin-bottom:10px;gap:11px}
.cfx-head .ic{flex-basis:34px;height:34px;font-size:17px;border-radius:8px}
.cfx-head .ti{font-size:15.5px}
.cfx-head .su{font-size:11.5px}
.ctxbar{padding:6px 12px;margin-bottom:10px;font-size:12px}
.card{padding:10px 13px;margin-bottom:10px}
th{padding:6px 9px}td{padding:6px 9px}
.fld{margin-bottom:9px}
.fld label{margin-bottom:3px;font-size:11px}
.fld input[type=text],.fld input[type=email],.fld input[type=password],
.fld input[type=number],.fld select,.fld textarea{padding:6px 9px}
.btn{padding:6px 12px;font-size:12.5px}
.btn.s{padding:4px 9px;font-size:11.5px}
.pane{padding:14px 16px 16px}
.pane .lead{margin-bottom:12px}
.pane .sec{margin-top:14px;padding-top:12px}
.tabs a{padding:8px 13px;font-size:12.5px}
.ribbon .cell{padding:9px 16px;min-width:130px}
.setcard .top{padding:9px 13px;margin-bottom:10px}
.aside h4{padding:9px 13px;margin-bottom:10px}
.kv{padding:6px 13px}

/* Lot 48 — jauge de charge du tableau de bord : la marge se lit d'un
   coup d'oeil, sans interpreter un nombre brut. */
.jauge{height:6px;border-radius:99px;background:#e6edf4;overflow:hidden;margin:7px 0 5px}
.jauge span{display:block;height:100%;border-radius:99px;transition:width .3s}

/* Lot 49 — enregistrement : calculateur de volume et jauges de quota. */
.calc{background:#f4f9fe;border:1px solid #cfe0ee;border-radius:11px;padding:12px 14px;margin-top:12px}
.calc b.t{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#16406b;margin-bottom:8px}
.cres{display:flex;gap:22px;flex-wrap:wrap;margin-top:9px}
.cres .kpi b{display:block;font-size:19px;color:#16406b;line-height:1.15}
.cres .kpi span{font-size:11px;color:#5b7b99}
.q{display:flex;align-items:center;gap:12px;padding:7px 10px;border:1px solid #e3ebf3;border-radius:10px}
.q + .q{margin-top:6px}
.qic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;
  flex:0 0 30px;background:#e8f0f9;color:#16406b}
.qtxt{flex:1}
.qtxt b{display:block;font-size:12.5px}
.qtxt small{color:#5b7b99;font-size:11px}
.quse{width:190px}
.quse .lbl{font-size:11px;color:#41607d;display:flex;justify-content:space-between}

/* Lot 49b — liste des enregistrements : une ligne par appel, lecteur inclus. */
.enr{display:flex;align-items:center;gap:11px;padding:6px 10px;border:1px solid #edf2f7;
  border-radius:10px}
.enr + .enr{margin-top:4px}
.enr:hover{background:#f8fbfe;border-color:#dbe7f2}
.enr .edate{font-size:12px;font-weight:700;color:#16406b;width:112px;flex:0 0 112px}
.enr .esens{width:18px;text-align:center;color:#4a6a88;font-weight:800}
.enr .eext{font-weight:800;font-size:12.5px;width:46px}
.enr .epeer{font-size:12px;color:#41607d;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.enr .edur{font-size:12px;color:#5b7b99;width:52px;text-align:right}
.enr .eau{height:30px;width:250px}

/* Lot 52 — choix de destination : type + cible nommee, alignes. */
.destrow{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.destrow .dk{min-width:160px}
.destrow .dv{min-width:200px}
.destrow select,.destrow input{padding:5px 9px;border:1.5px solid #a9c0d6;border-radius:7px;
  height:30px;font:inherit;font-size:12.5px;font-weight:600;color:#0d1b2a;background:#fff}
.destrow select:focus,.destrow input:focus{outline:0;border-color:#16406b;
  box-shadow:0 0 0 3px rgba(22,64,107,.18)}

/* Lot 52 — bouton d'action positive : vert, pour qu'on comprenne qu'il
   AJOUTE quelque chose et qu'on ne le confonde pas avec un libelle. */
.btn.vert{background:#0f7a3d;color:#fff;border:0;font-weight:800;
  box-shadow:0 2px 6px rgba(15,122,61,.28)}
.btn.vert:hover{background:#0a5c2e}

/* Lot 54 — jeux de voix installes. */
.vxl{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.vx{background:#eef4fa;border:1px solid #cfe0ee;border-radius:9px;padding:5px 11px}
.vx b{font-size:12.5px;color:#16406b;display:block}
.vx small{font-size:10.5px;color:#5b7b99}

/* Lot 55 — Paramètres : sous-carte et grille à trois colonnes. */
.souscarte{background:#f7fafd;border:1px solid #e3ebf3;border-radius:11px;
  padding:11px 13px;margin-top:12px}
.souscarte > b{font-size:12.5px;color:#16406b;display:block;margin-bottom:2px}
.souscarte p{margin:0 0 9px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px;
  align-items:end}

/* =====================================================================
   Lot 57 — les blocs des Paramètres adoptent le bandeau bleu nuit du
   bloc SMTP. Ils avaient l'air de simples encadrés gris : rien ne
   disait que c'étaient des sections de même rang.

   La règle est plus spécifique que « .card h2 » de la charte, qui
   remettrait le titre en bleu foncé sur fond bleu nuit (leçon du
   lot 41b : titre invisible).
   ===================================================================== */
.setcard{background:#fff;border:1px solid #a9c0d6;border-radius:12px;overflow:hidden;
  padding:0;margin-bottom:13px;
  box-shadow:0 2px 4px rgba(13,27,42,.07),0 10px 24px rgba(13,27,42,.07)}
.setcard:hover{border-color:#a9c0d6;box-shadow:0 2px 4px rgba(13,27,42,.07),0 10px 24px rgba(13,27,42,.07)}
.setcard > .sh,
.card .setcard > .sh,
.pane .setcard > .sh{display:flex;align-items:center;gap:9px;margin:0;
  padding:9px 14px;background:linear-gradient(120deg,#16406b,#0f3054);
  border-bottom:1px solid #0c2440;color:#f2f8fd;font-size:12px;font-weight:900;
  text-transform:uppercase;letter-spacing:.07em}
/* le contenu retrouve la respiration que le padding de la carte donnait */
.setcard > .sh ~ *{margin-left:14px;margin-right:14px}
.setcard > .sh + .grid2,
.setcard > .sh + .grid3,
.setcard > .sh + .fld,
.setcard > .sh + .box,
.setcard > .sh + p{margin-top:13px}
.setcard > *:last-child{margin-bottom:14px}
.setcard .souscarte{margin-bottom:14px}

/* =====================================================================
   Lot 58 — LARGEUR DES CHAMPS.

   Tous les champs étaient en width:100% : sur un écran large, on avait
   une bande de 1500 px pour saisir « SAV ». Un champ trop long donne
   deux mauvaises indications — il suggère une saisie longue, et l'œil
   ne fait plus le lien entre l'étiquette et la valeur.

   On borne donc la largeur, en la calant sur la NATURE de la donnée.
   Les exceptions restent possibles avec un style= local.
   ===================================================================== */
.fld input[type=text],.fld input[type=email],.fld input[type=password],
.fld input[type=number],.fld input[type=date],.fld select,.fld textarea{
  max-width:440px}
/* données courtes : on resserre franchement */
.fld input[type=number]{max-width:150px}
.fld input[type=date]{max-width:190px}
.fld input[name*="prefix"],.fld input[name*="prefixe"],
.fld input[name*="number"],.fld input[name*="port"],
.fld input[name*="cli"]{max-width:220px}
/* les zones de texte gardent de la place : on y écrit vraiment */
.fld textarea{max-width:640px}
/* dans une grille à deux colonnes, le champ occupe sa colonne */
.grid2 .fld input,.grid2 .fld select,.grid3 .fld input,.grid3 .fld select{max-width:100%}

/* Lot 58 — catalogue des modeles de telephone : une ligne compacte. */
.mods{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.mdl{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid #e6edf4;
  border-radius:9px;background:#fff}
.mdl:hover{border-color:#a9c6e2;background:#fbfdff}
.mdl-code{font-weight:800;font-size:12.5px;color:#16406b;width:62px;flex:0 0 62px}
.mdl .mdl-lbl{flex:1;min-width:120px;max-width:none;padding:4px 8px;height:28px;
  font-size:12.5px;border:1px solid #dce6f0;border-radius:6px;background:#fff}
.mdl .mdl-lbl:hover{border-color:#a9c6e2}
.mdl-k{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.mdl-k input{width:56px;padding:4px 6px;height:28px;font-size:12.5px;text-align:center;
  border:1px solid #dce6f0;border-radius:6px;max-width:none}
.mdl-k small,.mdl-parc small{font-size:10px;color:#8fa5ba;text-transform:uppercase;
  letter-spacing:.04em}
.mdl-parc{display:flex;align-items:baseline;gap:4px;width:76px;flex:0 0 76px;
  font-size:12.5px;font-weight:700;color:#8fa5ba}
.mdl-parc.on{color:#16406b}
.mdl-on{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:#41607d;flex:0 0 auto;cursor:pointer}
.mdl-act{display:flex;gap:4px;opacity:.25;transition:opacity .15s}
.mdl:hover .mdl-act,.mdl:focus-within .mdl-act{opacity:1}
.mdl-act .mini{width:26px;height:26px;padding:0;font-size:12px}
.mdl-act .mini.vide{border-color:transparent;background:transparent;cursor:default;
  display:grid;place-items:center}

/* Lot 58 — journal SIP repliable : present sans encombrer. */
.jsip{border:1px solid #e6edf4;border-radius:11px;background:#fbfdff;margin-top:12px;
  overflow:hidden}
.jsip[open]{background:#fff;border-color:#cfdae6}
.jsip > summary{cursor:pointer;padding:10px 14px;font-size:12.5px;font-weight:800;
  color:#41607d;display:flex;align-items:center;gap:9px;list-style:none}
.jsip > summary::-webkit-details-marker{display:none}
.jsip > summary::after{content:"▾";margin-left:auto;color:#8fa9c0;transition:.15s}
.jsip[open] > summary::after{transform:rotate(180deg)}
.jsip > summary:hover{background:#f2f7fc;color:#16406b}
.jsip > *:not(summary){padding-left:14px;padding-right:14px}
.jsip > *:last-child{padding-bottom:14px}

/* =====================================================================
   Lot 59 — catalogue des modeles en CARTES, dans l'esprit des touches
   programmables : une icone qui dit la nature de l'appareil, le nombre
   de touches lisible, le parc en pastille. On reconnait un modele d'un
   coup d'oeil, sans lire une ligne de formulaire.
   ===================================================================== */
.mdl-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:11px;margin-top:12px}
.mdlc{background:#fff;border:1px solid #dce6f0;border-radius:13px;padding:11px 12px 10px;
  display:flex;flex-direction:column;gap:9px;transition:.15s}
.mdlc:hover{border-color:#a9c6e2;box-shadow:0 4px 14px rgba(22,64,107,.10)}
.mdlc.off{background:#f8fafc;opacity:.62}
.mdlc.off:hover{opacity:1}
.mdlc-h{display:flex;align-items:center;gap:10px}
.mdlc-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:17px;flex:0 0 38px;border:1px solid transparent}
.g-base{background:#eef4fa;border-color:#cfe0ee}
.g-milieu{background:#e8f0f9;border-color:#93bce6}
.g-haut{background:#e6f2ec;border-color:#96d5af}
.g-dect{background:#f3edfa;border-color:#c9b3e6}
.mdlc-nom{font-weight:800;font-size:14px;color:#0b1a2b;line-height:1.15;flex:1;min-width:0}
.mdlc-nom small{display:block;font-weight:500;font-size:11px;color:#7891ab;margin-top:1px}
.mdlc-parc{font-size:11px;font-weight:800;color:#0a5c2e;background:#dff0e6;
  border:1px solid #96d5af;border-radius:99px;padding:3px 9px;white-space:nowrap;text-align:center}
.mdlc-parc small{display:block;font-weight:600;font-size:9.5px;opacity:.85}
.mdlc .mdlc-lbl{width:100%;max-width:none;padding:6px 9px;height:32px;font-size:12.5px;
  border:1px solid #dce6f0;border-radius:8px;background:#fbfdff;color:#0b1a2b}
.mdlc .mdlc-lbl:focus{outline:0;border-color:#16406b;background:#fff;
  box-shadow:0 0 0 3px rgba(22,64,107,.14)}
.mdlc-p{display:flex;align-items:center;gap:10px}
.mdlc-k{font-size:10.5px;font-weight:800;color:#5b7b99;text-transform:uppercase;
  letter-spacing:.05em;display:flex;align-items:center;gap:6px}
.mdlc-k input{width:58px;max-width:none;padding:4px 6px;height:28px;font-size:12.5px;
  text-align:center;border:1px solid #dce6f0;border-radius:7px;font-weight:700}
/* interrupteur « proposé » : la case native reste, on l'habille */
.mdlc-sw{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:#41607d;cursor:pointer;margin-left:auto}
.mdlc-sw input{position:absolute;opacity:0;width:0;height:0}
.mdlc-bt{width:32px;height:19px;border-radius:99px;background:#c3d3e2;position:relative;
  flex:0 0 32px;transition:background .15s}
.mdlc-bt::after{content:"";position:absolute;top:3px;left:3px;width:13px;height:13px;
  border-radius:50%;background:#fff;transition:left .15s}
.mdlc-sw input:checked + .mdlc-bt{background:#0f7a3d}
.mdlc-sw input:checked + .mdlc-bt::after{left:16px}
.mdlc-sw input:focus-visible + .mdlc-bt{box-shadow:0 0 0 3px rgba(22,64,107,.25)}
.mdlc-act{display:flex;gap:4px}
.mdlc-act .mini{width:28px;height:28px;padding:0;font-size:12px}
.mdlc-act .mini.vide{border-color:transparent;background:transparent;cursor:default;
  display:grid;place-items:center}

/* Lot 59 — plusieurs telephones sur un meme poste : onglets d'appareil. */
.tels{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 11px;
  padding:9px 11px;background:#eef4fa;border:1px solid #cfe0ee;border-radius:11px}
.tels-t{font-size:12px;font-weight:800;color:#16406b;margin-right:6px}
.tels-t small{display:block;font-weight:500;font-size:10.5px;color:#5b7b99}
.tel{display:block;padding:6px 12px;border-radius:9px;background:#fff;border:1.5px solid #cfe0ee;
  text-decoration:none;color:#41607d;transition:.15s}
.tel:hover{border-color:#7aa7d0;color:#16406b}
.tel.on{border-color:#16406b;background:#16406b;color:#fff;
  box-shadow:0 2px 6px rgba(22,64,107,.25)}
.tel b{display:block;font-size:12.5px}
.tel small{display:block;font-size:10.5px;opacity:.8;font-family:ui-monospace,Menlo,monospace}

/* Lot 60 — export d'un jeu de voix depuis sa pastille. */
.vx-dl{display:inline-block;margin-top:5px;background:#fff;border:1px solid #cfe0ee;
  border-radius:7px;padding:3px 9px;font:inherit;font-size:10.5px;font-weight:700;
  color:#16406b;cursor:pointer}
.vx-dl:hover{background:#eef4fa;border-color:#7aa7d0}

/* Lot 60 — etat du fond d'ecran du parc. */
.fond-etat{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin:9px 0 4px}
.fond-mods{font-size:11.5px;color:#5b7b99}
.fond-mods b{color:#16406b}

/* Lot 61 — bouton d'ajout d'un telephone dans le bandeau d'appareils. */
.tel.plus{border-style:dashed;border-color:#7aa7d0;background:#f4f9fe;color:#16406b}
.tel.plus:hover{background:#e8f0f9;border-style:solid}
.tel.max{border-color:#e6c199;background:#fff8f1;color:#8a5a1e;cursor:default}

/* Lot 62 — pied de carte : le bouton d'action la referme visuellement. */
.xb-pied{display:flex;align-items:center;gap:11px;padding:11px 14px;
  border-top:1px solid #e6edf4;background:#f7fafd}
.xb-pied small{color:#5b7b99;font-size:11.5px}

/* Lot 63 — l'annonce des situations, mise a part, avec son aide. */
.annonce{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-top:10px;
  border:1px dashed #e6c199;border-radius:10px;background:#fffaf3}
.annonce .xtxt b{color:#8a5a1e}
.i-ann{background:#fdf0e2;color:#7a4d13;border-color:#e6c199}
.aide{width:19px;height:19px;border-radius:50%;background:#e6c199;color:#5c4326;font-size:11px;
  font-weight:800;display:grid;place-items:center;cursor:help;flex:0 0 19px;position:relative}
.aide:hover .bulle,.aide:focus-within .bulle{display:block}
.bulle{display:none;position:absolute;left:24px;top:-6px;width:300px;background:#0f3054;color:#fff;
  border-radius:9px;padding:9px 11px;font-size:11.5px;font-weight:400;line-height:1.45;z-index:20;
  box-shadow:0 6px 20px rgba(11,26,43,.28);text-align:left}
.bulle b{color:#ffd9a8}
/* message d'accueil de la messagerie */
.vmg{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:9px}
.vmg .voie{border:1px solid #dce6f0;border-radius:11px;padding:11px 12px;background:#fbfdff}
.vmg .voie.reco{border-color:#96d5af;background:#f6fdf9}
.vmg .voie > b{display:block;font-size:12.5px;margin-bottom:3px}
.vmg .voie > small{color:#5b7b99;font-size:11.5px;display:block;line-height:1.45}
.etapes{margin:9px 0 0;padding-left:17px;font-size:11.5px;color:#41607d}
.etapes li{margin-bottom:3px}
.kcode{display:inline-block;background:#0f3054;color:#fff;border-radius:6px;padding:1px 8px;
  font-weight:800;font-size:12.5px;font-family:ui-monospace,Menlo,monospace;margin:0 2px}

/* Lot 63 — avertissement et conseil de la carte « navigateur ». */
.dgr{background:#fdf6f7;border:1px solid #eab0b8;border-radius:10px;padding:11px 13px;
  font-size:12.5px;color:#8e1b28;margin-top:11px;line-height:1.5}
.dgr b{display:block;margin-bottom:3px}
.dgr b + b,.dgr b:not(:first-child){display:inline}
.cons{background:#f4f9fe;border:1px solid #cfe0ee;border-radius:10px;padding:11px 13px;
  font-size:12.5px;color:#16406b;margin-top:9px;line-height:1.5}
.cons b:first-child{display:block;margin-bottom:3px}

/* Lot 64 — touches du SVI : le chiffre, ce qu'il fait, sa destination. */
.touches{display:flex;flex-direction:column;gap:5px}
.tch{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid #dce6f0;
  border-radius:10px;background:#fff;flex-wrap:wrap}
.tch:hover{border-color:#a9c6e2}
.tch.vide{background:#fafcfe;opacity:.7}
.tch.vide:hover{opacity:1}
.tch .dig{width:34px;height:34px;border-radius:9px;background:#16406b;color:#fff;font-weight:800;
  font-size:16px;display:grid;place-items:center;flex:0 0 34px}
.tch.vide .dig{background:#e6edf4;color:#8fa9c0}
.tch .tlib{width:170px;flex:0 0 170px;padding:5px 9px;height:30px;font-size:12.5px;
  border:1.5px solid #dce6f0;border-radius:7px;font-weight:700;max-width:none}
.tch .tlib:focus{outline:0;border-color:#16406b;box-shadow:0 0 0 3px rgba(22,64,107,.14)}
.tch .destrow{flex:1;min-width:260px}
.xf .opt{font-weight:400;color:#7891ab;text-transform:none;letter-spacing:0;font-size:10px}

/* Lot 68 — avertissement d'un reglage a double tranchant. */
.avert{background:#fff8f1;border:1px solid #f0d9c0;border-radius:10px;padding:11px 13px;
  font-size:12.5px;color:#5c4326;margin-top:11px;line-height:1.5}
.avert b:first-child{display:block;margin-bottom:3px;color:#8a5a1e}

/* =====================================================================
   Lot 71 — MENU EN RAIL + RECHERCHE, et bandeau de contexte client.
   ===================================================================== */
/* Lot 72 : le rail cede la place a DEUX MODES. */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mode{border:1.5px solid transparent;border-radius:11px;padding:9px 6px;cursor:pointer;
  font:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#ffffff9c;color:#5b7b99;transition:.14s}
.mode .ic{font-size:17px;line-height:1}
.mode b{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase}
.mode:hover{background:#fff;color:#16406b}
.mode.on.op{background:linear-gradient(135deg,#16406b,#0f3054);color:#fff;
  box-shadow:0 4px 12px rgba(22,64,107,.34)}
.mode.on.cl{background:linear-gradient(135deg,#1cb5c9,#0f7d8c);color:#fff;
  box-shadow:0 4px 12px rgba(15,125,140,.32)}
.mcorps{flex:1;display:flex;gap:8px;min-height:0}
.mrail{background:#16406b;border-radius:12px;padding:6px 4px;display:flex;flex-direction:column;
  gap:3px;flex:0 0 62px;box-shadow:0 4px 12px rgba(16,35,58,.16)}
.mfam{width:54px;height:46px;border-radius:9px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;font-size:15px;color:#cfe4f5;cursor:pointer;
  background:transparent;border:0;font-family:inherit;transition:.12s}
.mfam i{font-style:normal;font-size:8px;letter-spacing:.02em;text-transform:uppercase;
  font-weight:800;opacity:.9}
.mfam:hover{background:rgba(255,255,255,.18);color:#fff}
.mfam.on{background:#fff;color:#16406b}
.mfam.on:hover{background:#fff}
.msep{height:1px;background:rgba(255,255,255,.18);margin:4px 6px}
.mpan{flex:1;background:#fff;border:1px solid #c4d5e4;border-radius:12px;display:flex;
  flex-direction:column;min-width:0;box-shadow:0 4px 12px rgba(16,35,58,.10);overflow:hidden}
.mrech{padding:8px 9px;border-bottom:1px solid #e6edf4;position:relative}
.mrech input{width:100%;padding:6px 9px 6px 27px;border:1.5px solid #c4d5e4;border-radius:8px;
  font:inherit;font-size:12px;background:#fbfdff;max-width:none}
.mrech input:focus{outline:0;border-color:#16406b;background:#fff;
  box-shadow:0 0 0 3px rgba(22,64,107,.14)}
.mrech .lp{position:absolute;left:17px;top:50%;transform:translateY(-50%);font-size:11px;opacity:.55}
.mrech kbd{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:9px;
  background:#eef4fa;border:1px solid #cfe0ee;border-radius:4px;padding:1px 4px;color:#5b7b99}
.mliste{flex:1;overflow-y:auto;padding-bottom:6px}
.mtitre{padding:9px 12px 4px;font-size:9px;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:#7891ab}
.mliste a{display:flex;gap:9px;padding:6px 12px;font-size:12.5px;color:#22405e;
  text-decoration:none;border-left:3px solid transparent;align-items:center}
.mliste a:hover{background:#f0f7fc;color:#0f2946}
.mliste a.on{background:rgba(63,198,238,.16);border-left-color:#16406b;color:#083048;font-weight:700}
.mliste a .e{width:17px;text-align:center;font-size:13px}
.mliste a small{margin-left:auto;color:#8fa9c0;font-size:9.5px;font-weight:600}

/* ---- bandeau de contexte ---- */
.ctx{background:#fff;border-bottom:1px solid #a9c0d6;padding:9px 20px;display:flex;
  align-items:center;gap:14px;position:sticky;top:0;z-index:40;
  box-shadow:0 2px 10px rgba(13,27,42,.06);margin:-18px -20px 16px}
.ctx-cli{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,#1cb5c9,#0f7d8c);
  color:#fff;border-radius:11px;padding:6px 13px;cursor:pointer;border:0;font:inherit;
  box-shadow:0 3px 10px rgba(15,125,140,.26)}
.ctx-cli:hover{filter:brightness(1.07)}
.ctx-cli.vide{background:linear-gradient(135deg,#8fa9c0,#6d8ba6)}
.ctx-cli .av{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.22);
  display:grid;place-items:center;font-size:12.5px;font-weight:800}
.ctx-cli .tx{text-align:left}
.ctx-cli .tx b{display:block;font-size:14px;line-height:1.15}
.ctx-cli .tx span{display:block;font-size:10.5px;opacity:.85}
.ctx-cli .fl{font-size:11px;opacity:.8}
.ctx-inf{display:flex;gap:16px}
.ctx-inf div b{display:block;font-size:13px;color:#16406b}
.ctx-inf div span{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#8fa9c0;
  font-weight:800}
.ctx-fin{margin-left:auto}
.ctx-pop{position:absolute;top:52px;left:20px;width:400px;background:#fff;border:1px solid #a9c0d6;
  border-radius:13px;box-shadow:0 18px 46px rgba(13,27,42,.26);overflow:hidden;z-index:50}
.ctx-r{padding:10px;border-bottom:1px solid #e6edf4;position:relative}
.ctx-r input{width:100%;padding:8px 11px 8px 30px;border:1.5px solid #c4d5e4;border-radius:9px;
  font:inherit;font-size:13px;max-width:none}
.ctx-r input:focus{outline:0;border-color:#0f7d8c;box-shadow:0 0 0 3px rgba(28,181,201,.18)}
.ctx-r .lp{position:absolute;left:20px;top:50%;transform:translateY(-50%);opacity:.5;font-size:12px}
.ctx-l{max-height:300px;overflow-y:auto;padding:5px 0 7px}
.ctx-l .cl{margin:0}
.ctx-l .cl button{width:100%;display:flex;align-items:center;gap:10px;padding:7px 13px;
  cursor:pointer;border:0;border-left:3px solid transparent;background:transparent;
  font:inherit;text-align:left}
.ctx-l .cl button:hover{background:#eef8fb;border-left-color:#0f7d8c}
.ctx-l .cl.actif button{background:#e6f5f8;border-left-color:#0f7d8c}
.ctx-l .ic{width:28px;height:28px;border-radius:8px;background:#e6f5f8;color:#0f7d8c;
  display:grid;place-items:center;font-size:11px;font-weight:900;border:1px solid #a9dde6;flex:0 0 28px}
.ctx-l .nm{flex:1;min-width:0}
.ctx-l .nm b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-l .nm span{display:block;font-size:10.5px;color:#5b7b99}
.ctx-l .st{font-size:10px;font-weight:800;color:#0a5c2e;background:#dff0e6;border-radius:99px;
  padding:2px 8px}
.ctx-l .st.sus{color:#8e1b28;background:#fbe0e4}
.ctx-l .vide{padding:14px 13px;color:#7891ab;font-size:12px}
.ctx-f{padding:7px 13px;border-top:1px solid #e6edf4;font-size:10.5px;color:#7891ab;background:#fbfdff}
.ctx-f kbd{background:#eef4fa;border:1px solid #cfe0ee;border-radius:4px;padding:1px 5px;font-size:9.5px}

/* Lot 72 — titres de section EN PASTILLE (variante B validee). */
.mliste .gt{padding:11px 12px 4px;display:flex;align-items:center;gap:8px}
.mliste .gt:first-child{padding-top:8px}
.mliste .gt span{background:linear-gradient(135deg,#1cb5c9,#0f7d8c);color:#fff;
  border-radius:99px;padding:3px 11px;font-size:10px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}
.mliste .gt em{flex:1;height:1px;background:#e6edf4;font-style:normal}
.mgrp[data-mode="op"] .gt span{background:linear-gradient(135deg,#16406b,#0f3054)}
/* le panneau prend toute la largeur : plus de rail a cote */
.mpan{flex:1;background:#fff;border:1px solid #c4d5e4;border-radius:12px;display:flex;
  flex-direction:column;min-height:0;overflow:hidden;box-shadow:0 4px 12px rgba(16,35,58,.10)}
/* bandeau en mode operateur : bleu nuit, AUCUN nom de client */
.ctx.op{background:linear-gradient(120deg,#16406b,#0f3054);border-color:#0c2440;color:#fff}
.ctx.op .band{display:flex;align-items:center;gap:11px}
.ctx.op .band .ic{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:15px}
.ctx.op .band b{display:block;font-size:14px;letter-spacing:.02em}
.ctx.op .band span span{display:block;font-size:10.5px;color:#bcd6ec}
.ctx.op .rappel{margin-left:auto;font-size:11.5px;color:#bcd6ec;display:flex;
  align-items:center;gap:9px}
.ctx.op .rappel b{color:#fff}
.ctx.op .rappel a{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:8px;padding:4px 10px;font-size:11px;text-decoration:none}
.ctx.op .rappel a:hover{background:rgba(255,255,255,.28)}
.ctx.cl{background:#fff;border-color:#a9c0d6}

/* Lot 73 — marque de l'installation : logo du menu, depots. */
.blogo{background:#fff;border:1px solid #c4d5e4;border-radius:12px;padding:8px 10px;
  display:grid;place-items:center}
.blogo img{max-width:100%;max-height:46px;display:block}
.brg{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.bdep{border:1.5px dashed #a9c6e2;border-radius:11px;padding:12px;background:#fbfdff;
  display:flex;gap:13px;align-items:flex-start}
.bapr{width:74px;height:56px;border-radius:9px;background:#16406b;display:grid;place-items:center;
  flex:0 0 74px;overflow:hidden;padding:5px}
.bapr.petit{width:44px;height:44px;flex:0 0 44px}
.bapr img{max-width:100%;max-height:100%;display:block}
.bapr span{color:#9fc4e3;font-size:10px}
.btx{flex:1;min-width:0}
.btx b{display:block;font-size:12.5px}
.btx small{display:block;color:#5b7b99;font-size:10.5px;line-height:1.45}
.btx input[type=file]{font-size:11px;max-width:200px}

/* Lot 74 — gabarits des messages. */
.gdx{display:grid;grid-template-columns:400px 1fr;gap:13px;align-items:start}
@media (max-width:1100px){.gdx{grid-template-columns:1fr}}
.tplr{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #e6edf4;
  border-radius:10px;margin-bottom:6px;background:#fff;text-decoration:none;color:#22405e}
.tplr:hover{border-color:#a9c6e2;background:#fbfdff}
.tplr.on{border-color:#16406b;background:rgba(63,198,238,.10);box-shadow:0 0 0 2px rgba(22,64,107,.10)}
.tplr .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;
  flex:0 0 30px;background:#eef4fa;border:1px solid #cfe0ee}
.tplr .tx{flex:1;min-width:0}
.tplr .tx b{display:block;font-size:12.5px}
.tplr .tx small{display:block;color:#7891ab;font-size:10.5px}
.tplr .et{font-size:9.5px;font-weight:800;border-radius:99px;padding:2px 8px;white-space:nowrap}
.tplr .et.def{background:#eef4fa;color:#5b7b99;border:1px solid #cfe0ee}
.tplr .et.mod{background:#dff0e6;color:#0a5c2e;border:1px solid #96d5af}
.repm{width:100%;border-collapse:collapse;font-size:11.5px}
.repm td{padding:5px 4px;border-bottom:1px solid #eef1f5;vertical-align:top}
.repm td:first-child{white-space:nowrap;width:52%}
.repm code{background:#0f3054;color:#dbeafe;border-radius:5px;padding:1px 6px;font-size:10.5px}
.apmail{background:#eef1f5;border-radius:10px;padding:12px;max-height:520px;overflow:auto}
.apmail img{max-width:100%}

/* Lot 79 — chaine du « ne pas deranger » : ou ca casse, en clair. */
.chn{display:flex;flex-direction:column;gap:5px}
.chl{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;
  border:1px solid #dce6f0;background:#fbfdff}
.chl.ok{border-color:#96d5af;background:#f6fdf9}
.chl.ko{border-color:#eab0b8;background:#fdf6f7}
.chl .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:900;flex:0 0 22px;background:#e6edf4;color:#5b7b99}
.chl.ok .ic{background:#dff0e6;color:#0a5c2e}
.chl.ko .ic{background:#fbe0e4;color:#8e1b28}
.chl .tx b{display:block;font-size:12.5px}
.chl .tx small{display:block;color:#5b7b99;font-size:11px}
.chl.ko .tx small{color:#8e1b28}

/* Lot 82 — barre d'enregistrement des touches, collee au bas de la carte. */
.tkbar{position:sticky;bottom:0;background:#fff;border-top:2px solid #16406b;
  padding:9px 13px;display:flex;align-items:center;gap:11px;z-index:5;
  box-shadow:0 -4px 14px rgba(13,27,42,.10);margin:10px -14px -13px;
  border-radius:0 0 12px 12px}
.tkbar .txt{flex:1;font-size:12px;color:#41607d}
.tkbar .txt b{color:#8a5a1e}
.tkbar.rien{border-top-color:#cfdae6}
.tkbar.rien .txt{color:#8fa9c0}