/*
 * © 2026 Infobascongo asbl — Tous droits réservés.
 * MonBarreauAMS — code propriétaire. Reproduction, distribution ou réutilisation interdite sans autorisation écrite.
 * MonBarreauAMS est une solution standard d'Infobascongo asbl. Marques et contenus des ordres clients restent la propriété de leurs détenteurs respectifs.
 */
/* MonBarreauKGC — design tokens & primitives (palette du logo : navy + bronze) */
:root{
  --bg:#f4f5f8;
  --bg-2:#e7eaf1;
  --surface:#ffffff;
  --surface-2:#f8f9fb;
  --ink:#101827;
  --ink-2:#3b4356;
  --ink-3:#5c6377;
  --line:#dbdfe8;
  --line-2:#ecedf3;
  --primary:#2c4a7c;        /* navy du logo */
  --primary-ink:#1a2c4d;
  --primary-soft:#dde5f3;
  --accent:#a8712e;         /* bronze du logo */
  --accent-soft:#f1e3cf;
  --gold:#c9962f;
  --gold-soft:#f6e9cc;
  --danger:#a3392f;
  /* Jetons semantiques : ils n'existaient QUE dans le theme « Clarte ». Dans les 7 autres,
     dont le theme par defaut, var(--danger-soft) resolvait a vide et la declaration entiere
     devenait invalide — le bandeau d'alerte « Securite reduite : second facteur
     indisponible » s'affichait donc SANS fond rouge, reduit a un texte avec un filet.
     Declares ici, les huit themes en heritent ; chaque theme reste libre de les redefinir. */
  --ok:#1c6b35;
  --ok-soft:#dcefe2;
  --warn:#8a5310;
  --warn-soft:#f7e8d4;
  --danger-soft:#f6dedb;
  --info:#3a5a7a;
  --shadow: 0 1px 0 rgba(16,24,39,.04), 0 1px 2px rgba(16,24,39,.05);
  --shadow-lg: 0 1px 2px rgba(16,24,39,.04), 0 12px 30px rgba(16,24,39,.08);
  --radius:10px;
  --radius-lg:16px;
  --sidebar-bg:#1a2c4d;
  --sidebar-ink:#dde3f0;
  --sidebar-line:#0f1c33;
  --sidebar-item:#b7c1d8;
  --sidebar-active-bg:#28407a;
  --sidebar-hover-bg:#22345c;
  --sidebar-muted:#a3aec9;
  --sidebar-icon-active:#c9962f;
  --notice-ink:#7a4a12;   /* texte des bandeaux d'information */
}

:root[data-theme="noir"]{
  --bg:#f2f2f2;
  --bg-2:#e6e6e6;
  --surface:#ffffff;
  --surface-2:#f7f7f7;
  --ink:#111111;
  --ink-2:#3a3a3a;
  --ink-3:#5e5e5e;
  --line:#dcdcdc;
  --line-2:#ececec;
  --primary:#1a1a1a;
  --primary-ink:#000000;
  --primary-soft:#e3e3e3;
  --accent:#a8712e;
  --accent-soft:#f1e3cf;
  --gold:#c9962f;
  --gold-soft:#f6e9cc;
  --sidebar-bg:#141414;
  --sidebar-ink:#f0f0f0;
  --sidebar-line:#000000;
  --sidebar-item:#bdbdbd;
  --sidebar-active-bg:#2c2c2c;
  --sidebar-hover-bg:#232323;
  --sidebar-muted:#8a8a8a;
  --sidebar-icon-active:#c9962f;
}

:root[data-theme="emeraude"]{
  --bg:#f1f4f1;
  --bg-2:#e3ebe4;
  --surface:#ffffff;
  --surface-2:#f6f9f6;
  --ink:#10201a;
  --ink-2:#3a4a42;
  --ink-3:#566860;
  --line:#dbe6df;
  --line-2:#ecf2ee;
  --primary:#1f4d3d;
  --primary-ink:#123329;
  --primary-soft:#d8e8e0;
  --accent:#c9962f;
  --accent-soft:#f6e9cc;
  --gold:#c9962f;
  --gold-soft:#f6e9cc;
  --sidebar-bg:#123329;
  --sidebar-ink:#dfece5;
  --sidebar-line:#0a1f19;
  --sidebar-item:#a9c4b8;
  --sidebar-active-bg:#1c4a3a;
  --sidebar-hover-bg:#17402f;
  --sidebar-muted:#7fa896;
  --sidebar-icon-active:#c9962f;
}

:root[data-theme="rdc"]{
  --bg:#f3f7fc;
  --bg-2:#e5eefa;
  --surface:#ffffff;
  --surface-2:#f7fafd;
  --ink:#0e1c2e;
  --ink-2:#33465c;
  --ink-3:#5a6879;
  --line:#d7e2ee;
  --line-2:#eaf0f8;
  --primary:#007fff;
  --primary-ink:#004e9e;
  --primary-soft:#d9ebff;
  --accent:#ce1021;
  --accent-soft:#fbdadd;
  --gold:#f7d618;
  --gold-soft:#fdf3c4;
  --sidebar-bg:#003f7f;
  --sidebar-ink:#e4f0ff;
  --sidebar-line:#00305e;
  --sidebar-item:#a9c8ea;
  --sidebar-active-bg:#0058ad;
  --sidebar-hover-bg:#004a91;
  --sidebar-muted:#b6d2ee;
  --sidebar-icon-active:#f7d618;
}

:root[data-theme="bordeaux"]{
  --bg:#f7f1f2;
  --bg-2:#efe1e3;
  --surface:#ffffff;
  --surface-2:#faf5f5;
  --ink:#241417;
  --ink-2:#4a353a;
  --ink-3:#6b565b;
  --line:#e7d7da;
  --line-2:#f2e8ea;
  --primary:#8e2434;
  --primary-ink:#5e1622;
  --primary-soft:#f0dade;
  --accent:#c9962f;
  --accent-soft:#f6e9cc;
  --gold:#c9962f;
  --gold-soft:#f6e9cc;
  --sidebar-bg:#5e1622;
  --sidebar-ink:#f2dfe2;
  --sidebar-line:#3f0e17;
  --sidebar-item:#d3a9b0;
  --sidebar-active-bg:#7a2130;
  --sidebar-hover-bg:#6c1c29;
  --sidebar-muted:#d5b0b5;
  --sidebar-icon-active:#c9962f;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Bricolage Grotesque","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;margin:0;font-weight:600;letter-spacing:-0.01em}
code{font-family:"JetBrains Mono",monospace}
a{color:var(--primary)}
a:hover{color:var(--primary-ink)}

.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh;transition:grid-template-columns .18s ease}
.app.sidebar-collapsed{grid-template-columns:72px 1fr}
.sidebar{position:relative;transition:width .18s ease}
.sidebar-toggle{
  position:absolute;top:22px;right:-13px;width:26px;height:26px;border-radius:50%;
  background:var(--sidebar-bg,#fff);border:1px solid rgba(255,255,255,.25);color:var(--sidebar-ink,#333);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.sidebar-toggle:hover{filter:brightness(1.15)}
.sidebar.collapsed .brand-name,.sidebar.collapsed .brand-sub,.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-item span,.sidebar.collapsed .nav-badge,.sidebar.collapsed .user-chip>div:not(.avatar){display:none}
.sidebar.collapsed .brand{justify-content:center}
.sidebar.collapsed .nav-item{justify-content:center}
.sidebar.collapsed .user-chip{justify-content:center}
.sidebar{
  background:var(--sidebar-bg);
  color:var(--sidebar-ink);
  padding:18px 14px;
  display:flex;
  flex-direction:column;
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 6px 16px}
.brand-mark{
  width:36px;height:36px;border-radius:9px;
  background:#fff;
  display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.18);
  overflow:hidden;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;padding:2px}
.brand-name{font-weight:700;font-size:15px;color:#fff;letter-spacing:-0.01em}
.brand-sub{font-size:11px;color:var(--sidebar-muted);margin-top:1px}

.nav-scroll{
  flex:1 1 auto;overflow-y:auto;margin:0 -6px;padding:0 6px;min-height:0;
  scrollbar-width:thin;scrollbar-color:var(--sidebar-hover-bg) transparent;
}
.nav-scroll::-webkit-scrollbar{width:8px}
.nav-scroll::-webkit-scrollbar-track{background:transparent}
.nav-scroll::-webkit-scrollbar-thumb{background:var(--sidebar-hover-bg);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.nav-scroll:hover::-webkit-scrollbar-thumb{background:var(--sidebar-active-bg)}

.nav-section{margin-top:14px}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--sidebar-muted);font-weight:700;padding:0 10px;margin-bottom:6px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;
  color:var(--sidebar-item);font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none;
  /* Ces entrées sont désormais de vrais <button> (accessibles au clavier) : on neutralise
     les styles par défaut du navigateur pour conserver l'apparence d'origine. */
  width:100%;background:none;border:0;font-family:inherit;text-align:left;appearance:none;
  /* Un <button> n'herite pas du line-height du corps de page : sans cette valeur, un
     libelle sur deux lignes (« Carte professionnelle ») s'affiche tasse. */
  line-height:1.35;
  position:relative;
}
.nav-item:hover{background:var(--sidebar-hover-bg);color:#fff}
.nav-item.active{background:var(--sidebar-active-bg);color:#fff;font-weight:600}
.nav-item.active .ic{color:var(--sidebar-icon-active)}
.nav-item .ic{width:17px;height:17px;flex:none}
.nav-badge{margin-left:auto;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.12);color:#fff;padding:1px 7px;border-radius:99px}

/* Focus clavier — TOUS les thèmes. Il n'existait que pour le thème « Clarté » : dans les
   autres, une personne naviguant au clavier ne voyait pas où elle se trouvait. */
.btn:focus-visible,.nav-item:focus-visible,.filter-pill:focus-visible,.switch:focus-visible,
.step-btn:focus-visible,.quick-add:focus-visible,a:focus-visible,[tabindex]:focus-visible,
summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.nav-item:focus-visible{outline-color:#5ea8ff;outline-offset:-2px}
/* Lien d'évitement : premier élément focalisable, invisible jusqu'au Tab. Sans lui, chaque
   page se parcourt en traversant tout le menu latéral. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--primary);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-size:13px;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

.sidebar-foot{border-top:1px solid var(--sidebar-line);padding-top:12px;margin-top:12px}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;cursor:pointer}
.user-chip:hover{background:var(--sidebar-hover-bg)}

.main{padding:26px 32px 60px;min-width:0}
.view{max-width:1360px}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
.page-head h1{font-size:26px}
.lede{color:var(--ink-3);font-size:13.5px;margin-top:5px;max-width:620px;line-height:1.5}
.page-actions{display:flex;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end}

.btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-weight:600;font-size:13px;
  cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-ink)}
.btn-lg{padding:11px 18px;font-size:14px}
.btn-sm{padding:6px 10px;font-size:12px}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--bg-2)}
.btn-icon{padding:7px}
.btn[disabled]{opacity:.55;cursor:default}
.ic{width:16px;height:16px}
.ic-sm{width:14px;height:14px}
.ic-lg{width:22px;height:22px}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.card-pad{padding:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.card-head h3{font-size:15px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-3-2{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.grid-7-5{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}

.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;background:var(--bg-2);color:var(--ink-2)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.chip-green{background:#dcefe2;color:#1f6b3f}
.chip-orange{background:var(--accent-soft);color:var(--notice-ink,#7a4a12)}
.chip-gold{background:var(--gold-soft);color:#8a6410}
.chip-blue{background:var(--primary-soft);color:var(--primary-ink)}
.chip-red{background:#f3d6d2;color:#7a261d}
.chip-gray{background:var(--bg-2);color:var(--ink-3)}
.chip-outline{background:transparent;border:1px solid var(--line);color:var(--ink-3)}

.bar{height:6px;background:var(--bg-2);border-radius:99px;overflow:hidden}
.bar > div{height:100%;background:var(--primary);border-radius:99px}
.spin2{width:15px;height:15px;border:2px solid var(--primary);border-right-color:transparent;border-radius:99px;animation:bkgcspin .7s linear infinite;display:inline-block;flex:none}
@keyframes bkgcspin{to{transform:rotate(360deg)}}

.divider{height:1px;background:var(--line-2);margin:14px 0}

.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;width:1%}
.tbl th:last-child,.tbl td:last-child{width:auto}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);font-size:13.5px}
.card:has(> .tbl),.card:has(> div > .tbl){overflow-x:auto}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr:last-child td{border-bottom:none}

.person{display:flex;align-items:center;gap:10px}
.person .name{font-weight:600;font-size:13.5px}
.avatar{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none}

.filters{display:flex;gap:8px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.filter-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.filter-pill.on{background:var(--primary);border-color:var(--primary);color:#fff}
.filter-pill .ic{width:13px;height:13px}

.switch{width:38px;height:22px;border-radius:99px;background:var(--bg-2);border:1px solid var(--line);position:relative;cursor:pointer;flex:none;display:inline-block}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.switch.on{background:var(--primary);border-color:var(--primary)}
.switch.on::after{left:18px}

.micro-label{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}

.banner{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:11px;border:1px solid var(--line);font-size:13px;margin-bottom:16px}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(16,24,39,.45);display:grid;place-items:center;z-index:100;padding:20px}
.modal{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column}
.modal.wide{max-width:760px}
.modal.resizable{resize:both;overflow:auto;min-width:480px;min-height:420px;max-width:96vw;max-height:92vh}
.rich-editable:empty:before{content:attr(data-placeholder);color:var(--ink-3)}
.rich-editable blockquote{margin:8px 0;padding-left:12px;border-left:3px solid var(--line);color:var(--ink-3)}
/* Image inseree dans le corps : bornee a la largeur de l'editeur. Le lecteur est deja
   couvert par la regle .msg-body-view img plus bas ; l'editeur ne l'etait pas, et une
   image de 1400 px debordait de la zone de saisie. */
.rich-editable img{max-width:100%;height:auto;border-radius:6px}
.msg-body-view{max-width:100%;overflow-wrap:break-word;word-break:break-word}
.msg-body-view img,.msg-body-view table,.msg-body-view iframe,.msg-body-view video{max-width:100% !important;height:auto !important}
.msg-body-view *{max-width:100% !important;float:none !important;width:auto !important}
.msg-body-view table{display:block;overflow-x:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line-2)}
.modal-head h2{font-size:17px}
.modal-body{padding:20px 22px;overflow:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 22px;border-top:1px solid var(--line-2)}

/* Card cross-fade for demo/live badge etc */
.step-btn{width:40px;height:40px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);font-size:22px;font-weight:700;color:var(--ink-2);cursor:pointer;line-height:1}
.step-btn:hover{background:var(--surface-2)}
.quick-add{padding:3px 9px;border-radius:99px;border:1px solid var(--line);background:var(--surface-2);font-size:11px;font-weight:600;color:var(--ink-3);cursor:pointer}

/* Carte professionnelle */
.pro-card{
  width:100%;max-width:400px;border-radius:16px;padding:22px 24px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--primary-ink) 0%, var(--primary) 65%, var(--accent) 130%);
  box-shadow:0 16px 40px rgba(26,44,77,.35);
  box-sizing:border-box;
}
.grid-3-2 > *, .grid-2 > *, .grid-3 > *{min-width:0}
/* Modèles de carte alternatifs */
.pro-card.model-minimal{background:var(--primary-ink);box-shadow:0 10px 30px rgba(26,44,77,.28)}
.pro-card.model-minimal .photo{border-radius:10px;border-color:rgba(255,255,255,.22)}
.pro-card.model-light{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 34px rgba(26,44,77,.14)}
.pro-card.model-light .photo{background:var(--surface-2);color:var(--primary);border:2px solid var(--line)}
.pro-card.model-mono{background:#141821;color:#e9ecf2;box-shadow:0 12px 34px rgba(0,0,0,.4)}
.pro-card.model-mono .photo{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18)}
.pro-card.model-filigrane{background:linear-gradient(135deg,var(--primary-ink) 0%, var(--primary) 70%);box-shadow:0 14px 38px rgba(26,44,77,.3)}
.pro-card.model-filigrane::after{content:"";position:absolute;right:-24px;bottom:-30px;width:200px;height:200px;background:url(bkgc-logo-web.png) center/contain no-repeat;opacity:.10;filter:brightness(0) invert(1);pointer-events:none}
.pro-card.model-filigrane > *{position:relative;z-index:1}
.pro-card.model-image{background-color:transparent;background-size:cover;background-position:center;box-shadow:0 14px 38px rgba(26,44,77,.3)}
.pro-card.model-image::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(15,20,32,.55),rgba(15,20,32,.28));z-index:0}
.pro-card.model-image > *{position:relative;z-index:1}
.pro-card .row{display:flex;align-items:center;gap:12px}
.pro-card .photo{width:64px;height:64px;border-radius:12px;background:rgba(255,255,255,.15);display:grid;place-items:center;font-weight:700;font-size:22px;border:2px solid rgba(255,255,255,.3)}

@media print{
  body *{visibility:hidden}
}

/* ===================== Responsive : mobile & tablette ===================== */
.mobile-topbar{display:none}
.sidebar-scrim{display:none}

@media (max-width: 1024px){
  .app{grid-template-columns:220px 1fr}
  .main{padding:20px}
  .grid-3-2, .grid-7-5{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr) !important}
}

@media (max-width: 780px){
  .app{display:block !important}
  .app.sidebar-collapsed{grid-template-columns:unset}
  .sidebar-toggle{display:none}
  .sidebar{
    position:fixed !important;top:0;left:0;bottom:0;right:auto;width:78vw;max-width:280px;z-index:200;
    transform:translateX(-100%) !important;transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  .sidebar.collapsed .brand-name,.sidebar.collapsed .brand-sub,.sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-item span,.sidebar.collapsed .nav-badge,.sidebar.collapsed .user-chip>div:not(.avatar){display:block !important}
  .sidebar.collapsed .brand,.sidebar.collapsed .nav-item,.sidebar.collapsed .user-chip{justify-content:flex-start !important}
  .sidebar.open{transform:translateX(0) !important}
  .sidebar-scrim{display:none}
  .sidebar-scrim.open{display:block !important;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:190}
  .mobile-topbar{
    display:flex !important;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  }
  .mobile-topbar .btn-icon{border:1px solid var(--line)}
  .main{padding:14px}
  .page-head{flex-direction:column;align-items:stretch;gap:10px}
  .page-actions{justify-content:flex-start}
  .grid-2, .grid-3, .grid-3-2, .grid-7-5{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px}
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
  .modal{max-width:94vw;max-height:92vh}
  .modal.resizable{resize:none;min-width:0;min-height:0;width:94vw;max-width:94vw}
  .modal-body{padding:16px}
  .msg-body-view{font-size:15px !important;line-height:1.7 !important}
  .pro-card{max-width:100%}
  .pro-card .row{flex-wrap:wrap}
}
@media (max-width: 780px){
  .monespace-layout{display:block !important}
  .monespace-nav{min-width:0 !important;width:100%;margin-bottom:14px}
  .monespace-content{min-width:0 !important;width:100%}
  .msg-layout{display:block !important}
  .msg-list-panel{flex:none !important;width:100%;border-right:none !important;border-bottom:1px solid var(--line);max-height:280px !important}
  .msg-read-panel{display:none !important}
  .msg-layout.has-selected .msg-list-panel{display:none !important}
  .msg-layout.has-selected .msg-read-panel{display:block !important;position:fixed;inset:0;z-index:60;background:var(--surface);overflow-y:auto;padding:16px !important;-webkit-overflow-scrolling:touch}
  .msg-back-btn{display:none}
  .msg-layout.has-selected .msg-back-btn{display:inline-flex}
}
@media (min-width: 781px){
  .msg-back-btn{display:none}
  .mobile-topbar{display:none}
  .sidebar-scrim{display:none}
}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width: 780px){
  .theme-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 480px){
  .theme-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr !important}
  h1{font-size:21px}
}
/* Mobile : confort tactile et débordements */
@media (max-width: 780px){
  .card-head{flex-wrap:wrap}
  .card-head h3{font-size:14px}
  .filters{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .filters .filter-pill{white-space:nowrap;flex:none}
  .filters select{flex:none;max-width:46vw}
  .btn{min-height:38px}
  .btn-icon{min-width:38px}
  .leaflet-popup-content{font-size:13px}
  .leaflet-touch .leaflet-control-zoom a{width:36px;height:36px;line-height:36px}
  input, select, textarea{font-size:16px !important} /* évite le zoom automatique iOS */
  .tbl input{font-size:13px !important}
}
.bkgc-legal-body{color:var(--ink-2);line-height:1.6;font-size:14.5px;max-width:800px}
.bkgc-legal-body .lz-h2{font-size:17px;color:var(--primary);margin:24px 0 8px;font-weight:700}
.bkgc-legal-body .lz-h2:first-child{margin-top:0}
.bkgc-legal-body .lz-h3{font-size:15px;color:var(--primary-ink);margin:18px 0 6px;font-weight:700}
.bkgc-legal-body .lz-h4{font-size:14px;color:var(--ink);margin:14px 0 4px;font-weight:700}
.bkgc-legal-body p{margin:0 0 12px;text-wrap:pretty}
.bkgc-legal-body .lz-ul{margin:0 0 14px;padding-left:22px}
.bkgc-legal-body .lz-ul li{margin-bottom:5px}
.bkgc-legal-body .lz-tbl{border-collapse:collapse;width:100%;margin:8px 0 18px;font-size:13px}
.bkgc-legal-body .lz-tbl th,.bkgc-legal-body .lz-tbl td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.bkgc-legal-body .lz-tbl th{background:var(--primary-soft);color:var(--primary-ink);font-weight:700}

/* ======================================================================
   SKINS — thèmes qui changent l'apparence complète (pas juste la couleur)
   ====================================================================== */

/* =========================================================
   BKC nuit — contrepartie sombre du theme officiel.

   Meme charte que « BKC officiel » : navy du logo, bronze en accent. Seules les
   luminosites sont inversees. C'est le seul theme sombre qui conserve l'identite du
   Barreau (Futuriste et Clarte sont sombres mais abandonnent la charte).

   Choisi explicitement dans Parametres, ET applique automatiquement a « BKC officiel »
   quand le telephone ou l'ordinateur est en mode sombre — un confrere qui consulte un
   dossier le soir n'a donc rien a regler. Pour figer le theme officiel en clair :
     <html data-bkc="light">
   ========================================================= */
:root[data-theme="bkcnuit"],
:root[data-theme="bkc"][data-bkc="dark"]{
  --notice-ink:#e8b779;
  --bg:#0d1524;
  --bg-2:#131e33;
  --surface:#16223a;
  --surface-2:#1c2942;
  --ink:#e8edf7;
  --ink-2:#b3bdd1;
  --ink-3:#8d99b3;
  --line:#28354f;
  --line-2:#1d2a42;
  --primary:#3f6fb5;        /* navy eclairci : porte du texte blanc a 5,06 */
  --primary-ink:#8fb3e2;    /* en sombre, la variante « ink » sert au TEXTE, donc plus claire */
  --primary-soft:rgba(63,111,181,.22);
  --accent:#d9a055;         /* bronze du logo, eclairci */
  --accent-soft:rgba(217,160,85,.16);
  --gold:#e0b45c;
  --gold-soft:rgba(224,180,92,.16);
  --danger:#e0645a;
  --info:#8fb3e2;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
  --sidebar-bg:#0a1120;
  --sidebar-ink:#dde3f0;
  --sidebar-line:#1a2740;
  --sidebar-item:#a8b4cd;
  --sidebar-active-bg:#1e3560;
  --sidebar-hover-bg:#16233c;
  --sidebar-muted:#93a0bb;
  --sidebar-icon-active:#e0b45c;
  color-scheme:dark;
}
/* Les regles de base posent du texte SOMBRE sur des fonds « soft » CLAIRS. En sombre les
   fonds soft deviennent translucides : les couleurs de texte ecrites en dur doivent donc
   etre reprises, sinon les puces de statut deviennent illisibles. */
:root[data-theme="bkcnuit"] .chip-green,:root[data-theme="bkc"][data-bkc="dark"] .chip-green{background:rgba(64,190,120,.16);color:#6ddc9b}
:root[data-theme="bkcnuit"] .chip-gold,:root[data-theme="bkc"][data-bkc="dark"] .chip-gold{background:var(--gold-soft);color:#e8c476}
:root[data-theme="bkcnuit"] .chip-red,:root[data-theme="bkc"][data-bkc="dark"] .chip-red{background:rgba(224,100,90,.16);color:#f0908a}
/* --primary sert de FOND de bouton (texte blanc) ; comme couleur de TEXTE sur fond sombre
   il tombe a 4,3. Les usages textuels passent donc a --primary-ink, plus clair. */
:root[data-theme="bkcnuit"] a,:root[data-theme="bkc"][data-bkc="dark"] a{color:var(--primary-ink)}
:root[data-theme="bkcnuit"] a:hover,:root[data-theme="bkc"][data-bkc="dark"] a:hover{color:#b3ccef}
:root[data-theme="bkcnuit"] .bkgc-legal-body .lz-h2,:root[data-theme="bkc"][data-bkc="dark"] .bkgc-legal-body .lz-h2{color:var(--primary-ink)}
:root[data-theme="bkcnuit"] .bkgc-legal-body .lz-h3,:root[data-theme="bkc"][data-bkc="dark"] .bkgc-legal-body .lz-h3{color:#b3ccef}
/* --primary-ink etant clair ici, il ne peut plus servir de fond de survol : on fonce. */
:root[data-theme="bkcnuit"] .btn-primary:hover,:root[data-theme="bkc"][data-bkc="dark"] .btn-primary:hover{background:#35619f;border-color:#35619f}
:root[data-theme="bkcnuit"] .tbl thead th,:root[data-theme="bkc"][data-bkc="dark"] .tbl thead th{background:var(--bg-2)}
:root[data-theme="bkcnuit"] .switch::after,:root[data-theme="bkc"][data-bkc="dark"] .switch::after{background:#e8edf7}
:root[data-theme="bkcnuit"] .modal-backdrop,:root[data-theme="bkc"][data-bkc="dark"] .modal-backdrop{background:rgba(2,6,14,.66)}
/* Bascule automatique du theme officiel selon le reglage du systeme. data-bkc="light"
   sur <html> la neutralise pour qui prefere le clair en permanence. */
@media (prefers-color-scheme:dark){
  :root[data-theme="bkc"]:not([data-bkc="light"]){
    --notice-ink:#e8b779;
    --bg:#0d1524;--bg-2:#131e33;--surface:#16223a;--surface-2:#1c2942;
    --ink:#e8edf7;--ink-2:#b3bdd1;--ink-3:#8d99b3;
    --line:#28354f;--line-2:#1d2a42;
    --primary:#3f6fb5;--primary-ink:#8fb3e2;--primary-soft:rgba(63,111,181,.22);
    --accent:#d9a055;--accent-soft:rgba(217,160,85,.16);
    --gold:#e0b45c;--gold-soft:rgba(224,180,92,.16);
    --danger:#e0645a;--info:#8fb3e2;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
    --sidebar-bg:#0a1120;--sidebar-line:#1a2740;--sidebar-item:#a8b4cd;
    --sidebar-active-bg:#1e3560;--sidebar-hover-bg:#16233c;
    --sidebar-muted:#93a0bb;--sidebar-icon-active:#e0b45c;
    color-scheme:dark;
  }
  :root[data-theme="bkc"]:not([data-bkc="light"]) .chip-green{background:rgba(64,190,120,.16);color:#6ddc9b}
  :root[data-theme="bkc"]:not([data-bkc="light"]) .chip-gold{background:var(--gold-soft);color:#e8c476}
  :root[data-theme="bkc"]:not([data-bkc="light"]) .chip-red{background:rgba(224,100,90,.16);color:#f0908a}
  :root[data-theme="bkc"]:not([data-bkc="light"]) a{color:var(--primary-ink)}
  :root[data-theme="bkc"]:not([data-bkc="light"]) a:hover{color:#b3ccef}
  :root[data-theme="bkc"]:not([data-bkc="light"]) .bkgc-legal-body .lz-h2{color:var(--primary-ink)}
  :root[data-theme="bkc"]:not([data-bkc="light"]) .bkgc-legal-body .lz-h3{color:#b3ccef}
  :root[data-theme="bkc"]:not([data-bkc="light"]) .btn-primary:hover{background:#35619f;border-color:#35619f}
  :root[data-theme="bkc"]:not([data-bkc="light"]) .tbl thead th{background:var(--bg-2)}
  :root[data-theme="bkc"]:not([data-bkc="light"]) .switch::after{background:#e8edf7}
  :root[data-theme="bkc"]:not([data-bkc="light"]) .modal-backdrop{background:rgba(2,6,14,.66)}
}

/* ---------- Windows 95 classique ---------- */
:root[data-theme="win95"]{
  --bg:#008080;--bg-2:#c0c0c0;--surface:#c0c0c0;--surface-2:#bfbfbf;
  --ink:#000000;--ink-2:#000000;--ink-3:#3a3a3a;
  --line:#808080;--line-2:#a8a8a8;
  --primary:#000080;--primary-ink:#000080;--primary-soft:#b0b0d0;
  --accent:#000080;--accent-soft:#c8c8dc;--gold:#808000;--gold-soft:#d8d8b0;
  --radius:0px;--radius-lg:0px;--shadow:none;--shadow-lg:2px 2px 0 rgba(0,0,0,.5);
  --sidebar-bg:#000080;--sidebar-ink:#ffffff;--sidebar-line:#000060;
  --sidebar-item:#d8d8f0;--sidebar-active-bg:#1084d0;--sidebar-hover-bg:#0a3a8c;
  --sidebar-muted:#a8a8d0;--sidebar-icon-active:#ffff00;
}
:root[data-theme="win95"] body{font-family:"Tahoma","MS Sans Serif","Segoe UI",sans-serif;font-size:13px;-webkit-font-smoothing:none}
:root[data-theme="win95"] h1,:root[data-theme="win95"] h2,:root[data-theme="win95"] h3{font-family:"Tahoma","MS Sans Serif",sans-serif;font-weight:700;letter-spacing:0}
:root[data-theme="win95"] .card,:root[data-theme="win95"] .modal{background:#c0c0c0;border:2px solid #c0c0c0;border-top-color:#ffffff;border-left-color:#ffffff;border-right-color:#404040;border-bottom-color:#404040;box-shadow:1px 1px 0 #808080}
:root[data-theme="win95"] .btn,:root[data-theme="win95"] .step-btn,:root[data-theme="win95"] .quick-add{background:#c0c0c0;color:#000;border:2px solid #c0c0c0;border-top-color:#ffffff;border-left-color:#ffffff;border-right-color:#404040;border-bottom-color:#404040;border-radius:0;box-shadow:1px 1px 0 #808080;font-weight:700}
:root[data-theme="win95"] .btn:active{border-top-color:#404040;border-left-color:#404040;border-right-color:#ffffff;border-bottom-color:#ffffff;box-shadow:none}
:root[data-theme="win95"] .btn-primary{background:#c0c0c0;color:#000}
:root[data-theme="win95"] .filter-pill,:root[data-theme="win95"] .chip{border-radius:0}
:root[data-theme="win95"] .filter-pill.on{background:#000080;color:#fff}
:root[data-theme="win95"] input,:root[data-theme="win95"] select,:root[data-theme="win95"] textarea,:root[data-theme="win95"] .rich-editable{border-radius:0 !important;border:2px solid #808080 !important;border-top-color:#404040 !important;border-left-color:#404040 !important;background:#fff !important}
:root[data-theme="win95"] .switch{border-radius:0}
:root[data-theme="win95"] .modal-backdrop{background:rgba(0,0,64,.35)}
/* Le contenu vit dans une fenetre grise, pas a meme le bureau turquoise : fidele a
   Windows 95 et seul moyen de rendre les textes secondaires lisibles (2,38 -> 6,3). */
:root[data-theme="rdc"] .btn-primary{background:#005cbf;border-color:#005cbf}
:root[data-theme="rdc"] .btn-primary:hover{background:#004e9e;border-color:#004e9e}
:root[data-theme="win95"] .main{background:#c0c0c0;border:2px solid #c0c0c0;border-top-color:#ffffff;border-left-color:#ffffff;border-right-color:#404040;border-bottom-color:#404040}

/* ---------- Futuriste (néon / verre) ---------- */
:root[data-theme="futur"]{
  --bg:#05080f;--bg-2:#0c1424;--surface:rgba(16,26,46,.72);--surface-2:rgba(22,34,58,.72);
  --ink:#eaf2ff;--ink-2:#aebfd8;--ink-3:#6f83a3;
  --line:rgba(120,160,220,.22);--line-2:rgba(120,160,220,.12);
  --primary:#22d3ee;--primary-ink:#67e8f9;--primary-soft:rgba(34,211,238,.16);
  --accent:#a855f7;--accent-soft:rgba(168,85,247,.18);--gold:#38bdf8;--gold-soft:rgba(56,189,248,.16);
  --radius:12px;--radius-lg:18px;
  --shadow:0 0 0 1px rgba(120,160,220,.12), 0 8px 30px rgba(0,0,0,.5);
  --shadow-lg:0 0 0 1px rgba(120,160,220,.16), 0 20px 60px rgba(0,0,0,.6);
  --sidebar-bg:#070c17;--sidebar-ink:#dbe7ff;--sidebar-line:rgba(120,160,220,.14);
  --sidebar-item:#8ea3c4;--sidebar-active-bg:rgba(34,211,238,.14);--sidebar-hover-bg:rgba(120,160,220,.08);
  --sidebar-muted:#8b9dbd;--sidebar-icon-active:#22d3ee;--notice-ink:#e8b779;
}
:root[data-theme="futur"] body{background:radial-gradient(1200px 700px at 80% -10%,rgba(34,211,238,.10),transparent 60%),radial-gradient(1000px 600px at -10% 110%,rgba(168,85,247,.10),transparent 55%),var(--bg)}
:root[data-theme="futur"] h1,:root[data-theme="futur"] h2,:root[data-theme="futur"] h3{font-family:"Orbitron","Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:.01em}
:root[data-theme="futur"] .card,:root[data-theme="futur"] .modal{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}
:root[data-theme="futur"] .btn{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);backdrop-filter:blur(8px)}
:root[data-theme="futur"] .btn:hover{border-color:var(--primary);box-shadow:0 0 12px rgba(34,211,238,.35)}
:root[data-theme="futur"] .btn-primary{background:linear-gradient(120deg,#22d3ee,#0ea5e9);color:#05131c;border:none;box-shadow:0 0 18px rgba(34,211,238,.45);font-weight:700}
:root[data-theme="futur"] .filter-pill.on{box-shadow:0 0 14px rgba(34,211,238,.4)}
:root[data-theme="futur"] input,:root[data-theme="futur"] select,:root[data-theme="futur"] textarea,:root[data-theme="futur"] .rich-editable{background:rgba(8,14,26,.7) !important;color:var(--ink) !important;border:1px solid var(--line) !important}
:root[data-theme="futur"] .tbl tbody tr:hover{background:rgba(34,211,238,.06)}
:root[data-theme="futur"] .chip-blue{background:var(--primary-soft);color:var(--primary-ink)}
:root[data-theme="futur"] .modal-backdrop{background:rgba(2,6,16,.7);backdrop-filter:blur(4px)}

/* ---- Station de scan (liste de présence) : confort mobile ---- */
.pq-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.pq-stage{padding:34px 26px;text-align:center;transition:background .2s;min-height:280px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.pq-tools{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media(max-width:820px){
  .pq-grid{grid-template-columns:1fr;gap:14px}
  .pq-stage{padding:30px 18px;min-height:220px}
  .pq-grid .stat-grid{grid-template-columns:1fr 1fr!important}
  .pq-tools{flex-direction:column;align-items:stretch}
  .pq-tools .btn,.pq-tools input{width:100%}
  .pq-grid .card [style*="max-height"]{max-height:none!important}
}

/* =========================================================
   Thème « Clarté » — principes Apple : matériaux translucides,
   hiérarchie par le blanc, type à tracking optique, ressorts.

   Clair par défaut, sombre automatiquement le soir (prefers-color-scheme).
   Pour figer l'apparence, poser sur <html> :
     data-clarte="light"  → toujours clair
     data-clarte="dark"   → toujours sombre
   ========================================================= */
:root[data-theme="clarte"]{
  --bg:#f5f5f7;--bg-2:#ebebef;
  --surface:rgba(255,255,255,.82);--surface-2:rgba(246,246,249,.78);
  --ink:#1d1d1f;--ink-2:#43434a;--ink-3:#6b6b70;
  --line:rgba(0,0,0,.09);--line-2:rgba(0,0,0,.05);
  --primary:#0071e3;--primary-ink:#0058b0;--primary-soft:rgba(0,113,227,.10);
  --accent:#5e5ce6;--accent-soft:rgba(94,92,230,.12);
  --gold:#bf8b2e;--gold-soft:rgba(191,139,46,.13);
  --radius:14px;--radius-lg:22px;
  /* Ombres douces et diffuses : la profondeur vient de la lumière, pas du trait */
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  --shadow-lg:0 2px 6px rgba(0,0,0,.05), 0 18px 48px rgba(0,0,0,.10);
  --sidebar-bg:rgba(28,28,30,.88);--sidebar-ink:#f5f5f7;--sidebar-line:rgba(255,255,255,.10);
  --sidebar-item:#b8b8bf;--sidebar-active-bg:rgba(0,113,227,.26);--sidebar-hover-bg:rgba(255,255,255,.07);
  --sidebar-muted:#a8a8ad;--sidebar-icon-active:#5ea8ff;
  /* Ressort critique (sans rebond) — valeur par défaut de l'interface */
  --spring:cubic-bezier(.32,.72,0,1);
  /* Bord supérieur clair des matériaux : s'inverse en sombre */
  --glass-edge:rgba(255,255,255,.5);
  /* Couleurs sémantiques alignées sur la palette — les puces par défaut jurent sinon */
  --ok:#248a3d;--ok-soft:rgba(36,138,61,.12);
  --warn:#a05a00;--warn-soft:rgba(160,90,0,.12);
  --danger:#c9302c;--danger-soft:rgba(201,48,44,.11);
  --focus:rgba(0,113,227,.42);
}

/* ---- Apparence sombre : automatique le soir, ou forcée par data-clarte="dark" ---- */
@media (prefers-color-scheme:dark){
  :root[data-theme="clarte"]:not([data-clarte="light"]){
    --bg:#000000;--bg-2:#1c1c1e;
    --surface:rgba(28,28,30,.78);--surface-2:rgba(44,44,46,.72);
    --ink:#f5f5f7;--ink-2:#c7c7cc;--ink-3:#8e8e93;
    --line:rgba(255,255,255,.13);--line-2:rgba(255,255,255,.07);
    --primary:#0a84ff;--primary-ink:#409cff;--primary-soft:rgba(10,132,255,.18);
    --accent:#7d7aff;--accent-soft:rgba(125,122,255,.20);
    --gold:#e0a63c;--gold-soft:rgba(224,166,60,.18);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
    --shadow-lg:0 2px 8px rgba(0,0,0,.6), 0 22px 56px rgba(0,0,0,.55);
    --sidebar-bg:rgba(18,18,20,.92);--sidebar-active-bg:rgba(10,132,255,.30);
    --sidebar-hover-bg:rgba(255,255,255,.06);--sidebar-icon-active:#64b5ff;
    --glass-edge:rgba(255,255,255,.08);
    --ok:#30d158;--ok-soft:rgba(48,209,88,.18);
    --warn:#ff9f0a;--warn-soft:rgba(255,159,10,.18);
    --danger:#ff453a;--danger-soft:rgba(255,69,58,.18);
    --focus:rgba(10,132,255,.55);--notice-ink:#e8b779;
  }
}
:root[data-theme="clarte"][data-clarte="dark"]{
  --bg:#000000;--bg-2:#1c1c1e;
  --surface:rgba(28,28,30,.78);--surface-2:rgba(44,44,46,.72);
  --ink:#f5f5f7;--ink-2:#c7c7cc;--ink-3:#8e8e93;
  --line:rgba(255,255,255,.13);--line-2:rgba(255,255,255,.07);
  --primary:#0a84ff;--primary-ink:#409cff;--primary-soft:rgba(10,132,255,.18);
  --accent:#7d7aff;--accent-soft:rgba(125,122,255,.20);
  --gold:#e0a63c;--gold-soft:rgba(224,166,60,.18);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 2px 8px rgba(0,0,0,.6), 0 22px 56px rgba(0,0,0,.55);
  --sidebar-bg:rgba(18,18,20,.92);--sidebar-active-bg:rgba(10,132,255,.30);
  --sidebar-hover-bg:rgba(255,255,255,.06);--sidebar-icon-active:#64b5ff;
  --glass-edge:rgba(255,255,255,.08);
  --ok:#30d158;--ok-soft:rgba(48,209,88,.18);
  --warn:#ff9f0a;--warn-soft:rgba(255,159,10,.18);
  --danger:#ff453a;--danger-soft:rgba(255,69,58,.18);
  --focus:rgba(10,132,255,.55);--notice-ink:#e8b779;
}
:root[data-theme="clarte"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="clarte"]{color-scheme:light dark}

/* Typographie : police système, tracking spécifique à la taille (jamais une valeur unique) */
:root[data-theme="clarte"] body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif}
:root[data-theme="clarte"] h1,:root[data-theme="clarte"] h2,:root[data-theme="clarte"] h3{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;font-optical-sizing:auto}
:root[data-theme="clarte"] h1{font-weight:700;letter-spacing:-.022em;line-height:1.08}
:root[data-theme="clarte"] h2{font-weight:650;letter-spacing:-.018em;line-height:1.14}
:root[data-theme="clarte"] h3{font-weight:600;letter-spacing:-.012em;line-height:1.2}
:root[data-theme="clarte"] .lede{letter-spacing:-.004em;line-height:1.5}
:root[data-theme="clarte"] .micro-label{letter-spacing:.02em;font-weight:600}

/* Chiffres tabulaires : montants, dates, matricules et compteurs doivent s'aligner
   en colonne. Sans cela, une colonne de cotisations « danse » d'une ligne à l'autre. */
[data-theme="clarte"] .tbl td,[data-theme="clarte"] .tbl th,
[data-theme="clarte"] .stat-grid .card,[data-theme="clarte"] .pro-card,
[data-theme="clarte"] input[type="number"],[data-theme="clarte"] input[type="date"],
[data-theme="clarte"] time,[data-theme="clarte"] .chip{font-variant-numeric:tabular-nums}

/* Matériaux : couches translucides, le contenu défile dessous */
:root[data-theme="clarte"] .card,:root[data-theme="clarte"] .modal{
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-edge);box-shadow:var(--shadow)}
:root[data-theme="clarte"] .modal{box-shadow:var(--shadow-lg);border-radius:var(--radius-lg)}
:root[data-theme="clarte"] .modal-backdrop{background:rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
:root[data-theme="clarte"] .sidebar{backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%)}
[data-theme="clarte"] .card-head,[data-theme="clarte"] .modal-head{border-bottom-color:var(--line-2)}

/* Réponse : retour au pointer-down, ressort au relâchement */
:root[data-theme="clarte"] .btn{
  border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-weight:590;letter-spacing:-.008em;backdrop-filter:blur(10px);
  transition:transform .38s var(--spring),background .2s ease,border-color .2s ease,box-shadow .28s ease}
:root[data-theme="clarte"] .btn:hover{background:var(--surface-2);border-color:var(--line);box-shadow:0 2px 10px rgba(0,0,0,.06)}
:root[data-theme="clarte"] .btn:active{transform:scale(.96);transition-duration:.1s}
:root[data-theme="clarte"] .btn-primary{
  background:var(--primary);color:#fff;border:none;box-shadow:0 1px 3px rgba(0,113,227,.32),0 6px 18px rgba(0,113,227,.22)}
:root[data-theme="clarte"] .btn-primary:hover{background:var(--primary-ink);box-shadow:0 2px 6px rgba(0,113,227,.36),0 10px 26px rgba(0,113,227,.26)}
[data-theme="clarte"] .btn-ghost{background:transparent;border-color:transparent;box-shadow:none}
[data-theme="clarte"] .btn-ghost:hover{background:var(--surface-2);box-shadow:none}
[data-theme="clarte"] .btn-icon{border-radius:999px}
[data-theme="clarte"] .btn:disabled{opacity:.42;box-shadow:none;transform:none;cursor:not-allowed}
[data-theme="clarte"] .step-btn,[data-theme="clarte"] .quick-add{border-radius:999px;background:var(--surface);border-color:var(--line);color:var(--ink-2);transition:transform .38s var(--spring),background .2s ease}
[data-theme="clarte"] .step-btn:active,[data-theme="clarte"] .quick-add:active{transform:scale(.94);transition-duration:.1s}
:root[data-theme="clarte"] .nav-item{border-radius:10px;transition:background .2s ease,transform .38s var(--spring)}
:root[data-theme="clarte"] .nav-item:active{transform:scale(.985);transition-duration:.1s}

/* Focus clavier : anneau visible sur TOUT ce qui se pilote au clavier. Il manquait
   sur les boutons, la navigation et les pastilles — un utilisateur au clavier ne
   savait pas où il se trouvait. :focus-visible n'apparaît pas au clic à la souris. */
[data-theme="clarte"] .btn:focus-visible,[data-theme="clarte"] .nav-item:focus-visible,
[data-theme="clarte"] .filter-pill:focus-visible,[data-theme="clarte"] .switch:focus-visible,
[data-theme="clarte"] .step-btn:focus-visible,[data-theme="clarte"] .quick-add:focus-visible,
[data-theme="clarte"] a:focus-visible,[data-theme="clarte"] [tabindex]:focus-visible,
[data-theme="clarte"] summary:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus)}
[data-theme="clarte"] .tbl tbody tr:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}

/* Contrôles : formes continues, focus net et non agressif */
:root[data-theme="clarte"] input,:root[data-theme="clarte"] select,:root[data-theme="clarte"] textarea,:root[data-theme="clarte"] .rich-editable{
  border-radius:11px !important;border:1px solid var(--line) !important;background:var(--surface) !important;color:var(--ink) !important;
  transition:border-color .18s ease,box-shadow .18s ease}
:root[data-theme="clarte"] input:focus,:root[data-theme="clarte"] select:focus,:root[data-theme="clarte"] textarea:focus{
  border-color:var(--primary) !important;box-shadow:0 0 0 4px var(--primary-soft) !important;outline:none}
[data-theme="clarte"] input::placeholder,[data-theme="clarte"] textarea::placeholder{color:var(--ink-3)}
:root[data-theme="clarte"] .filter-pill,:root[data-theme="clarte"] .chip{border-radius:999px;letter-spacing:-.004em}
:root[data-theme="clarte"] .filter-pill{transition:transform .38s var(--spring),background .2s ease}
:root[data-theme="clarte"] .filter-pill:active{transform:scale(.96);transition-duration:.1s}
:root[data-theme="clarte"] .filter-pill.on{background:var(--primary);color:#fff;border-color:transparent}
:root[data-theme="clarte"] .switch{border-radius:999px;background:var(--bg-2);border-color:var(--line);transition:background .22s var(--spring)}
:root[data-theme="clarte"] .switch::after{box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .28s var(--spring)}

/* Puces de statut : reprises sur la palette sémantique du thème, sinon les verts et
   rouges par défaut détonnent au milieu du bleu Apple. */
[data-theme="clarte"] .chip{background:var(--bg-2);color:var(--ink-2);font-weight:590}
[data-theme="clarte"] .chip-green{background:var(--ok-soft);color:var(--ok)}
[data-theme="clarte"] .chip-orange{background:var(--warn-soft);color:var(--warn)}
[data-theme="clarte"] .chip-gold{background:var(--gold-soft);color:var(--gold)}
[data-theme="clarte"] .chip-blue{background:var(--primary-soft);color:var(--primary)}
[data-theme="clarte"] .chip-red{background:var(--danger-soft);color:var(--danger)}
[data-theme="clarte"] .chip-gray{background:var(--bg-2);color:var(--ink-3)}
[data-theme="clarte"] .chip-outline{background:transparent;border:1px solid var(--line);color:var(--ink-3)}

/* Bandeaux d'information : même matériau que les cartes */
[data-theme="clarte"] .banner{border-radius:var(--radius);border-color:var(--line);background:var(--surface);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}

/* Progression, chargement, avatars */
[data-theme="clarte"] .bar{background:var(--bg-2);height:7px}
[data-theme="clarte"] .bar > div{background:var(--primary);transition:width .5s var(--spring)}
[data-theme="clarte"] .spin2{border-color:var(--line);border-right-color:transparent;border-top-color:var(--primary)}
[data-theme="clarte"] .avatar{border-radius:999px;font-weight:590;letter-spacing:-.01em}

/* Tableaux : en-tête collant — le matériau translucide n'a de sens que s'il reste
   visible pendant le défilement d'un long Tableau du Barreau. */
:root[data-theme="clarte"] .tbl thead th{background:var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);letter-spacing:.02em;position:sticky;top:0;z-index:2}
:root[data-theme="clarte"] .tbl tbody tr{transition:background .16s ease}
:root[data-theme="clarte"] .tbl tbody tr:hover{background:var(--primary-soft)}
[data-theme="clarte"] .tbl td{border-bottom-color:var(--line-2)}

/* Sélection de texte et barres de défilement : les derniers éléments à trahir un thème */
[data-theme="clarte"] ::selection{background:var(--primary-soft);color:var(--ink)}
[data-theme="clarte"] *{scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent}
[data-theme="clarte"] ::-webkit-scrollbar{width:11px;height:11px}
[data-theme="clarte"] ::-webkit-scrollbar-track{background:transparent}
[data-theme="clarte"] ::-webkit-scrollbar-thumb{background:rgba(134,134,139,.5);border-radius:999px;border:3px solid transparent;background-clip:content-box}
[data-theme="clarte"] ::-webkit-scrollbar-thumb:hover{background:rgba(134,134,139,.8);background-clip:content-box}

/* Carte professionnelle : identité conservée (navy → bronze), ombre affinée */
[data-theme="clarte"] .pro-card{box-shadow:0 2px 8px rgba(0,0,0,.10),0 20px 50px rgba(26,44,77,.28)}

/* Accessibilité : mouvement réduit, transparence réduite, contraste élevé */
@media (prefers-reduced-motion:reduce){
  :root[data-theme="clarte"] *{transition-duration:.15s !important;animation-duration:.15s !important}
  :root[data-theme="clarte"] .btn:active,:root[data-theme="clarte"] .filter-pill:active,:root[data-theme="clarte"] .nav-item:active,
  :root[data-theme="clarte"] .step-btn:active,:root[data-theme="clarte"] .quick-add:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  :root[data-theme="clarte"] .card,:root[data-theme="clarte"] .modal,:root[data-theme="clarte"] .btn,
  :root[data-theme="clarte"] .tbl thead th,:root[data-theme="clarte"] .sidebar,:root[data-theme="clarte"] .banner{
    backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  :root[data-theme="clarte"] .sidebar{background:#1c1c1e}
  :root[data-theme="clarte"] .modal-backdrop{background:rgba(0,0,0,.5);backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root[data-theme="clarte"]{--line:rgba(0,0,0,.28);--ink-3:#5c5c62;--focus:rgba(0,113,227,.7)}
  :root[data-theme="clarte"] .card,:root[data-theme="clarte"] .btn{background:#fff;border-width:1.5px}
}
/* Impression : le matériau translucide n'existe pas sur le papier */
@media print{
  :root[data-theme="clarte"] .card,:root[data-theme="clarte"] .banner,:root[data-theme="clarte"] .tbl thead th{
    backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;box-shadow:none;border:1px solid #ccc}
  :root[data-theme="clarte"] .tbl thead th{position:static}
}


/* ============================================================
   Fenetre « Creer des comptes depuis les profils » sur telephone

   Elle debordait de l'ecran : le bouton « Creer » se trouvait hors champ, a
   droite d'« Annuler », et le compte ne pouvait donc pas etre cree depuis un
   telephone. Deux causes cumulees :

   1. La regle mobile .tbl{white-space:nowrap} (ligne 414) empeche tout retour
      a la ligne. Un nom long et une adresse e-mail sur une meme ligne rendent
      la table plus large que l'ecran.
   2. La fenetre est stylee entierement en ligne : la regle .modal{max-width:94vw}
      ne s'y appliquait pas, et un style en ligne ne peut pas porter de media
      query. D'ou ces classes d'accroche.

   Choix : sur telephone, les colonnes « Role » et « N° d'ordre » sont masquees
   et leur contenu passe SOUS le nom, plutot que de laisser la table defiler
   horizontalement. Un defilement lateral sur une liste a cocher fait perdre la
   colonne des cases : on ne sait plus ce qu'on coche.
   ============================================================ */
.prov-mob{display:none}
/* Largeurs de colonnes explicites, y compris sur BUREAU.
   Sans elles, deux regles globales se combinent contre cette table :
     ligne 304  .tbl th{width:1%}              -> affame la colonne « Profil »
     ligne 305  .tbl td:last-child{width:auto} -> donne tout l'espace a la
                                                  colonne « N° d'ordre »
   Resultat : le nom du confrere s'empilait sur sept lignes tandis que « 24072 »
   disposait de 483 px. Jouer sur overflow-wrap ne suffit pas — c'est un probleme
   de repartition de largeur, pas de coupure de mots. Le « min-width » garantit
   la place du nom quelle que soit la largeur minimale calculee du contenu. */
.prov-modal .prov-list .tbl th:first-child,.prov-modal .prov-list .tbl td:first-child{width:38px}
.prov-modal .prov-list .tbl th:nth-child(2),.prov-modal .prov-list .tbl td:nth-child(2){width:auto;min-width:260px}
.prov-modal .prov-list .tbl th:nth-child(3),.prov-modal .prov-list .tbl td:nth-child(3){width:104px}
.prov-modal .prov-list .tbl th:nth-child(4),.prov-modal .prov-list .tbl td:nth-child(4){width:112px}
@media (max-width:640px){
  .prov-ov{padding:8px !important}
  .prov-modal{width:100% !important;max-height:96vh !important}
  .prov-modal>*{min-width:0}
  .prov-modal .prov-head{padding:13px 14px !important}
  .prov-modal .prov-head h3{font-size:14px !important;line-height:1.3}
  .prov-modal .prov-search{padding:11px 14px !important}
  /* On annule display:block + nowrap : la table redevient une table, et le
     texte peut se couper. */
  .prov-modal .prov-list .tbl{display:table !important;white-space:normal !important;table-layout:fixed;width:100%;overflow-x:visible !important}
  .prov-modal .prov-list .tbl th:nth-child(3),.prov-modal .prov-list .tbl td:nth-child(3),
  .prov-modal .prov-list .tbl th:nth-child(4),.prov-modal .prov-list .tbl td:nth-child(4){display:none}
  .prov-modal .prov-list .tbl th,.prov-modal .prov-list .tbl td{padding:10px 12px;white-space:normal}
  .prov-modal .prov-list .tbl th:first-child,.prov-modal .prov-list .tbl td:first-child{width:34px;padding-right:0}
  /* Largeur EXPLICITE sur la colonne « Profil ». Indispensable : la ligne 304 pose
     globalement .tbl th{width:1%}, valeur qui n'est qu'une suggestion en layout
     « auto » mais devient litterale avec table-layout:fixed. La colonne tombait alors
     a 3 px et le nom s'empilait un caractere par ligne — pire que le debordement
     d'origine. La largeur restante etait par ailleurs attribuee a la colonne 4 par la
     ligne 305 (:last-child{width:auto}), celle-la meme que l'on masque ici. */
  .prov-modal .prov-list .tbl th:nth-child(2),.prov-modal .prov-list .tbl td:nth-child(2){width:calc(100% - 34px);min-width:0}
  .prov-modal .prov-mob{display:block}
  /* Les deux boutons prennent toute la largeur : sur un ecran etroit, « Creer »
     doit etre atteignable au pouce, pas comprime dans un coin. */
  .prov-modal .prov-foot{padding:12px 14px !important}
  .prov-modal .prov-btns{flex:1 1 100%;display:flex;gap:8px}
  .prov-modal .prov-btns .btn{flex:1;justify-content:center;min-height:44px}
}