/* FinaKop ERP Core — application plein écran (palette de marque : bleu roi + orange) */
:root{
  --bg:#0A0F1C; --bg2:#0E1626; --panel:#131D33; --panel2:#1A2742;
  --line:#233149; --line2:#2E3E5C;
  --blue:#3D6FE0; --blue-d:#1E3A8A; --navy:#16245C;
  --orange:#F39A12; --orange-d:#D07E00; --orange-l:#FFB23E;
  --text:#EAEFF7; --muted:#93A2BE; --muted2:#647194;
  --ok:#39B87E; --ok-bg:#10261F; --danger:#E5675F; --danger-bg:#3A1E1C;
  --warn:#F39A12; --warn-bg:#33270F;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  /* Échelle de design (élévation, rayons, transitions) — esprit Stripe/Notion */
  --radius:14px; --radius-sm:9px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --shadow-md:0 6px 20px -4px rgba(0,0,0,.45);
  --shadow-lg:0 18px 40px -10px rgba(0,0,0,.60);
  --ring:0 0 0 3px rgba(61,111,224,.32);
  --ease:cubic-bezier(.4,0,.2,1);
  --grad-blue:linear-gradient(135deg,#4C7BEC,#3258C9);
  color-scheme:dark;
}
html{color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01";background-image:radial-gradient(1200px 600px at 100% -10%,rgba(61,111,224,.06),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(243,154,18,.04),transparent 55%);background-attachment:fixed}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Syne,Inter,sans-serif;letter-spacing:-.01em}

/* ── Brand ── */
.brand{display:flex;align-items:flex-start;gap:11px}
.brand-logo{width:42px;height:42px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.brand-txt{display:flex;flex-direction:column;font-family:Syne,sans-serif;font-weight:800;line-height:1;color:#fff}
.brand-name{font-size:18px;letter-spacing:-.3px}
.brand-sub{font-family:Inter,sans-serif;font-weight:700;font-size:9px;letter-spacing:2.5px;color:var(--orange);margin-top:4px}
.brand-edition{align-self:flex-start;margin-top:7px;font-family:Inter,sans-serif;font-weight:800;font-size:8.5px;letter-spacing:1.1px;text-transform:uppercase;white-space:nowrap;color:var(--orange);background:rgba(243,154,18,.10);border:1px solid rgba(243,154,18,.45);padding:2px 8px;border-radius:20px}
.brand-edition.is-creative{color:#c9a4ff;background:rgba(150,100,220,.12);border-color:rgba(160,110,230,.5)}
.brand-tier{margin-top:4px;font-family:Inter,sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.2px;color:var(--muted);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── App shell ── */
.app{display:flex;min-height:100vh}
.side{width:250px;flex-shrink:0;background:linear-gradient(180deg,var(--bg2),var(--bg));border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}
.side .brand{padding:4px 8px 18px}
.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-sep{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted2);font-weight:700;padding:14px 12px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--muted);font-weight:500;font-size:13.5px;transition:.12s}
.nav-item:hover{background:var(--panel);color:var(--text)}
.nav-item.active{background:linear-gradient(90deg,rgba(61,111,224,.18),transparent);color:#fff;box-shadow:inset 2px 0 0 var(--blue)}
.nav-item.locked{opacity:.4;cursor:not-allowed}
.nav-ico{width:18px;text-align:center;font-size:14px}
.lock{margin-left:auto;font-size:11px}

/* ── Main ── */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 30px;border-bottom:1px solid var(--line);background:rgba(14,22,38,.7);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.page-title{font-size:20px;font-weight:800}
.topbar-right{display:flex;align-items:center;gap:14px}
.lic-dot{width:9px;height:9px;border-radius:50%;background:var(--muted2)}
.lic-active{background:var(--ok);box-shadow:0 0 0 3px rgba(57,184,126,.18)}
.lic-missing,.lic-invalid,.lic-expired,.lic-revoked{background:var(--danger);box-shadow:0 0 0 3px rgba(229,103,95,.18)}
.user{font-weight:600;font-size:13px}
.logout-form{margin:0}
.btn-logout{background:transparent;border:1px solid var(--line2);color:var(--muted);padding:7px 13px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.btn-logout:hover{border-color:var(--danger);color:var(--danger)}
.content{padding:26px 30px;max-width:1180px;width:100%}

/* ── Cards ── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;margin-bottom:20px;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-head h2{font-size:15px;font-weight:700}
.card-body{padding:20px}
.card-flush .table{margin:0}
.bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px;margin-bottom:22px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px 20px}
.stat-accent{border-top:3px solid var(--orange)}
.stat-label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);font-weight:600}
.stat-value{display:block;font-family:Syne,sans-serif;font-weight:800;font-size:27px;margin-top:7px}
.stat-value small{font-size:13px;color:var(--muted);font-family:Inter}

/* ── Modules grid ── */
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:13px;padding:20px}
.modcard{display:flex;align-items:center;gap:11px;padding:15px;border:1px solid var(--line);border-radius:11px;background:var(--bg2)}
.modcard.on{border-left:3px solid var(--blue)}
.modcard.off{opacity:.5}
.modicon{font-size:20px}
.modname{font-weight:600;flex:1}
.modbadge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px}
.b-on{background:var(--ok-bg);color:var(--ok)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-off{background:#212e44;color:var(--muted2)}

/* ── Subnav ── */
.subnav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px}
.subrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:-8px;margin-bottom:20px}
.navmenu{position:relative}
.navmenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:9px;white-space:nowrap;transition:.15s}
.navmenu>summary::-webkit-details-marker{display:none}
.navmenu>summary:hover{color:var(--text);border-color:var(--orange)}
.navmenu>summary .caret{font-size:10px;opacity:.7;transition:transform .15s}
.navmenu[open]>summary .caret{transform:rotate(180deg)}
.navmenu>summary.active{color:#fff;border-color:var(--orange);box-shadow:inset 0 -2px 0 var(--orange)}
.navmenu>summary .cur{color:var(--orange);font-weight:600}
.navmenu .menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:230px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.navmenu .menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted)}
.navmenu .menu a:hover{background:rgba(243,154,18,.10);color:var(--text)}
.navmenu .menu a.active{background:rgba(243,154,18,.16);color:#fff}
.subtab{padding:10px 16px;font-weight:600;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.subtab:hover{color:var(--text)}
.subtab.active{color:#fff;border-bottom-color:var(--orange)}

/* ── Tables ── */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted2);font-weight:700;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--bg2)}
.table td{padding:11px 18px;border-bottom:1px solid var(--line)}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--panel2)}
/* Toute table dans une carte défile horizontalement si elle déborde (évite le
   texte coupé dans une colonne étroite). */
.card-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);white-space:nowrap}
.right{text-align:right}.muted{color:var(--muted)}
.empty{text-align:center;color:var(--muted2);padding:34px}
.code{font-family:var(--mono);color:var(--orange);font-weight:600;font-size:12.5px}
.total td{font-weight:700;background:var(--bg2);border-top:2px solid var(--line2)}
.bordered{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.kv th{text-align:left;color:var(--muted);font-weight:600;width:200px;padding:9px 18px;border-bottom:1px solid var(--line)}
.kv td{padding:9px 18px;border-bottom:1px solid var(--line)}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.meta .stat-label{margin-bottom:3px}

/* ── Forms ── */
.fld{display:block;margin-bottom:15px}
.fld>span{display:block;font-weight:600;font-size:12.5px;margin-bottom:6px;color:var(--muted)}
/* Case à cocher : l'étiquette se place À CÔTÉ, pas dessous.
   Le motif employé jusqu'ici était « class="fld" style="flex-direction:row" »,
   sans effet : .fld est en display:block, où flex-direction ne veut rien dire.
   Le libellé tombait donc sous la case, et l'on pouvait hésiter sur ce qu'elle
   cochait dès que deux cases se suivaient. */
.fld-check{display:flex;align-items:center;gap:9px;margin-bottom:15px;cursor:pointer}
.fld-check>input[type=checkbox],.fld-check>input[type=radio]{width:auto;margin:0;flex:0 0 auto}
.fld-check>span{display:inline;margin:0;font-weight:600;font-size:12.5px;color:var(--muted)}
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:9px;color:var(--text);padding:10px 12px;font-size:14px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(61,111,224,.18)}
input[readonly]{opacity:.7}
textarea{resize:vertical;font-family:var(--mono);font-size:12.5px}
/* ── Grilles de formulaire ──────────────────────────────────────────────────
   .form-grid servait à DEUX choses : disposer les CHAMPS d'une section, et
   disposer les SECTIONS elles-mêmes. Avec minmax(260px,1fr), quatre sections
   tenaient côte à côte sur un écran large — chacune réduite à 260 px. Les
   libellés étaient tronqués, les tableaux imbriqués coupés, et une case à cocher
   se retrouvait séparée de son étiquette.

   Les deux usages sont désormais distincts :
     .form-grid  → les CHAMPS d'une section. 260 px suffisent à un champ.
     .form-rows  → les SECTIONS d'un formulaire, empilées sur toute la largeur.
                   Chacune dispose alors de la place nécessaire, et ses champs
                   s'étalent horizontalement au lieu de s'empiler dans une
                   colonne étroite. */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.form-grid>*{min-width:0}
.form-grid .fld{margin-bottom:15px}

/* Sections d'un formulaire : une par ligne, pleine largeur. */
.form-rows{display:grid;grid-template-columns:1fr;gap:14px}
.form-rows>*{min-width:0}
.form-rows .fld{margin-bottom:15px}
/* Une section pleine largeur peut étaler ses champs : on élargit le minimum,
   sinon on obtiendrait une file de champs de 260 px et beaucoup de vide. */
.form-rows .form-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* Cartes de tableau de bord : les colonnes sont voulues, mais 260 px les
   rendaient illisibles dès qu'elles portaient un tableau. */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.cards-grid>*{min-width:0}
.inline{display:flex;gap:8px;align-items:center}
.inline.wrap{flex-wrap:wrap}
.help{font-size:12px;color:var(--muted2);margin:-8px 0 14px}
.actions{display:flex;gap:10px;align-items:center;margin-top:6px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 17px;border-radius:9px;font-weight:600;font-size:13.5px;cursor:pointer;border:1px solid transparent;font-family:inherit;transition:.12s}
.btn-primary{background:linear-gradient(135deg,var(--orange-l),var(--orange-d));color:#241500;box-shadow:0 5px 16px rgba(243,154,18,.28)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn-blue{background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;box-shadow:0 5px 16px rgba(61,111,224,.28)}
.btn-ghost{background:transparent;border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{background:var(--panel2);border-color:var(--blue)}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn-block{width:100%;justify-content:center}
.danger{color:var(--danger)!important;border-color:rgba(229,103,95,.4)!important}
.danger:hover{background:var(--danger-bg)!important}

/* ── Alerts / tags ── */
.alert{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:13.5px;font-weight:500}
.alert a{font-weight:700;text-decoration:underline;margin-left:6px;color:var(--blue)}
.alert-ok{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(57,184,126,.3)}
.alert-err{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(229,103,95,.3)}
.alert-warn{background:var(--warn-bg);color:var(--warn);border:1px solid rgba(243,154,18,.3)}
.pill,.tag{display:inline-block;padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:700}
.pill{background:var(--orange);color:#241500}
.pill-missing,.pill-invalid,.pill-expired,.pill-revoked{background:var(--danger-bg);color:var(--danger)}
.tag{background:var(--ok-bg);color:var(--ok);margin:2px;border-radius:6px}
.balance-state{text-align:center;padding:11px!important}
.balance-state .ok{color:var(--ok);font-weight:700}
.balance-state .ko{color:var(--danger);font-weight:700}

/* ════════ Connexion (deux colonnes, façon maquette) ════════ */
.auth{display:grid;grid-template-columns:1.15fr .85fr;min-height:100vh;background:var(--bg)}
.auth-top{position:fixed;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--orange));z-index:5}
.auth-hero{position:relative;padding:64px 60px;display:flex;flex-direction:column;justify-content:center;gap:26px;overflow:hidden;background:radial-gradient(900px 500px at 10% 0%,rgba(61,111,224,.16),transparent),radial-gradient(700px 500px at 90% 100%,rgba(243,154,18,.10),transparent),var(--bg2);border-right:1px solid var(--line)}
.hero-logos{display:inline-flex;align-self:flex-start;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:12px 20px;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.hero-logos img{height:48px;width:auto;object-fit:contain}
.hero-eyebrow{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:3px;font-weight:700;color:var(--orange);text-transform:uppercase}
.hero-eyebrow::before{content:"";width:34px;height:1px;background:var(--orange)}
.hero-title{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(30px,3.4vw,50px);line-height:1.04;color:#fff;letter-spacing:-.02em}
.hero-title .accent{background:linear-gradient(120deg,var(--orange-l),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:15px;color:var(--muted);max-width:30em;line-height:1.7}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px}
.hero-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid var(--line2);border-radius:30px;font-size:12.5px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.02)}
.hero-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.hero-pill.b::before{background:var(--blue)}.hero-pill.g::before{background:var(--ok)}.hero-pill.p::before{background:#9D7BE0}
.hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
.hero-card{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--line);border-radius:13px;background:rgba(19,29,51,.6)}
.hero-card.full{grid-column:1 / -1}
.hero-card .hc-ico{font-size:20px;width:40px;height:40px;display:grid;place-items:center;background:var(--panel2);border-radius:10px;flex-shrink:0}
.hc-label{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted2);font-weight:700}
.hc-value{font-weight:600;font-size:13.5px;margin-top:2px}
.auth-form{display:flex;flex-direction:column;justify-content:center;padding:56px 60px;background:var(--bg)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:30px}
.auth-brand img{width:44px;height:44px;object-fit:contain}
.auth-brand .ab-name{font-family:Syne,sans-serif;font-weight:800;font-size:19px}
.auth-brand .ab-name small{display:block;font-family:Inter;font-weight:700;font-size:8.5px;letter-spacing:2.5px;color:var(--orange);margin-top:2px}
.auth-h{font-family:Syne,sans-serif;font-weight:800;font-size:34px;margin-bottom:6px}
.auth-desc{color:var(--muted);font-size:14px;margin-bottom:22px}
.auth-secure{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:30px;background:var(--ok-bg);color:var(--ok);font-size:12.5px;font-weight:700;border:1px solid rgba(57,184,126,.3);margin-bottom:24px}
.auth-form .fld>span{text-transform:uppercase;letter-spacing:.5px;font-size:11px}
.auth-input{position:relative}
.auth-input .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.6}
.auth-input input{padding-left:38px;height:48px}
.btn-login{width:100%;justify-content:center;height:50px;font-size:15px;font-weight:700;margin-top:6px}
.auth-divider{height:1px;background:var(--line);margin:26px 0 18px}
.auth-tags-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);font-weight:700;text-align:center;margin-bottom:12px}
.auth-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.auth-tag{padding:6px 13px;border-radius:8px;font-size:11.5px;font-weight:700;border:1px solid var(--line2);color:var(--muted)}
.auth-foot{margin-top:26px;text-align:center;color:var(--muted2);font-size:11.5px}
.auth-foot a{color:var(--orange)}

@media(max-width:980px){
  .auth{grid-template-columns:1fr}
  .auth-hero{display:none}
  .auth-form{min-height:100vh;padding:40px 26px}
}
@media(max-width:1200px){
  .form-grid,.meta{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .side{position:fixed;left:-260px;z-index:50;transition:.2s}
  .form-grid,.meta{grid-template-columns:1fr 1fr}
  .content{padding:18px}
}

/* ── Module Multi-sociétés ── */
.societe-box{display:flex;align-items:center;gap:10px;margin:0 8px 16px;padding:10px 11px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;border-left:3px solid var(--blue);transition:.12s}
.societe-box:hover{border-color:var(--blue);background:var(--panel)}
.societe-avatar{width:32px;height:32px;flex-shrink:0;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--blue-d));display:flex;align-items:center;justify-content:center;font-family:Syne,sans-serif;font-weight:800;font-size:12px;color:#fff}
.societe-info{display:flex;flex-direction:column;min-width:0;flex:1}
.societe-label{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted2);font-weight:600}
.societe-name{font-family:Syne,sans-serif;font-weight:800;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.societe-switch{font-size:14px;color:var(--orange);flex-shrink:0}
.nav-count{margin-left:auto;background:var(--panel2);border:1px solid var(--line2);color:var(--muted);font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px}
.soc-switch{margin:0}
.soc-switch select{width:auto;min-width:150px;max-width:230px;padding:7px 11px;font-size:12.5px;font-weight:600;background:var(--panel);border-color:var(--line2)}
.dash-soc{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:12px;padding:14px 18px;margin-bottom:20px}
.dash-soc-ico{font-size:22px}
.dash-soc-name{display:block;font-family:Syne,sans-serif;font-weight:800;font-size:18px;margin-top:2px}
.dash-soc-name small{font-family:Inter,sans-serif;font-weight:500;font-size:12px}
.societe-avatar-img{background:#fff;padding:3px;overflow:hidden}
.societe-avatar-img img{max-width:100%;max-height:100%;object-fit:contain}

/* ── Tableau de bord financier ── */
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(120deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:20px}
.dash-head-main{display:flex;align-items:center;gap:14px}
.dash-head-ico{width:48px;height:48px;flex-shrink:0;border-radius:13px;background:linear-gradient(135deg,var(--orange),var(--orange-d));display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 14px rgba(243,154,18,.3)}
.dash-title{font-family:Syne,sans-serif;font-weight:800;font-size:22px;line-height:1.15;margin:0}
.dash-sub{color:var(--muted);font-size:13px;margin:5px 0 0}
.dash-sub strong{color:var(--text)}
.dash-year select{padding:10px 14px;font-size:13px;font-weight:700;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;color:var(--text)}
.kpi .stat{position:relative;border-top:3px solid var(--line2)}
.kpi .stat-value{font-size:23px}
.kpi-foot{display:block;font-size:11px;color:var(--muted2);margin-top:8px;font-weight:600}
.kpi-ca{border-top-color:var(--orange)}
.kpi-pos{border-top-color:var(--ok)} .kpi-pos .stat-value{color:var(--ok)} .kpi-pos .kpi-foot{color:var(--ok)}
.kpi-neg{border-top-color:var(--danger)} .kpi-neg .stat-value{color:var(--danger)} .kpi-neg .kpi-foot{color:var(--danger)}
.kpi-treso{border-top-color:var(--blue)} .kpi-treso .stat-value{color:#7FA8FF}
.kpi-clients{border-top-color:#8B7FE0}
.kpi-fc{border-top-color:var(--orange-l)}
.kpi-ff{border-top-color:#E07FB0}
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px;align-items:start}
.dash-col{display:flex;flex-direction:column;gap:18px}
.cr-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.cr-row:last-of-type{border-bottom:none}
.cr-row strong{font-family:Syne,sans-serif;font-weight:800;font-size:15px}
.cr-row .pos{color:var(--ok)} .cr-row .neg{color:var(--danger)}
.cr-total{border-top:2px solid var(--line2);border-bottom:none;margin-top:4px;padding-top:13px}
.cr-total span{font-weight:700} .cr-total strong{font-size:18px}
.cr-bar{height:8px;background:var(--bg2);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:14px}
.cr-bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--danger))}
.treso-table td,.treso-table th{padding:11px 18px}
.treso-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;padding:3px 9px;border-radius:20px;background:var(--panel2);border:1px solid var(--line2);color:var(--orange-l)}
.mono{font-family:var(--mono);font-size:12.5px}
.quick-access{margin-top:4px}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.quick-card{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:.12s}
.quick-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.quick-ico{font-size:20px}
.quick-name{font-family:Syne,sans-serif;font-weight:700;font-size:14px}
@media(max-width:980px){.dash-cols{grid-template-columns:1fr}.dash-head{flex-direction:column;align-items:flex-start}}

/* ── Lanceur de module (accordéons + boutons CTA) ── */
.launch-hero{display:flex;align-items:center;gap:18px;margin:4px 0 22px}
.launch-ico{font-size:30px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.launch-title{font-size:22px;font-weight:800;margin:0;letter-spacing:-.2px}
.launch-sub{margin:3px 0 0;color:var(--muted);font-size:13.5px}
.fkc-acc{display:flex;flex-direction:column;gap:12px;max-width:1080px}
.fkc-acc-group{background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:border-color .15s}
.fkc-acc-group.open{border-color:var(--line2)}
.fkc-acc-head{width:100%;display:flex;align-items:center;gap:13px;padding:16px 20px;background:linear-gradient(90deg,var(--panel2),var(--panel));border:0;cursor:pointer;color:var(--text);font-family:inherit;font-size:15px;font-weight:700;text-align:left;transition:background .15s}
.fkc-acc-head:hover{background:linear-gradient(90deg,var(--panel2),var(--panel2))}
.fkc-acc-ico{font-size:18px;width:30px;text-align:center}
.fkc-acc-label{flex:1}
.fkc-acc-count{font-size:11px;font-weight:700;color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.fkc-acc-chev{color:var(--muted);font-size:14px;transition:transform .2s}
.fkc-acc-group.open .fkc-acc-chev{transform:rotate(90deg);color:var(--orange)}
/* La hauteur d'ouverture est posée par app.js d'après le contenu réel : la
   valeur figée de 900px tronquait les groupes les plus fournis. Les règles
   ci-dessous restent le repli quand JavaScript est indisponible — auquel cas
   l'accordéon n'est de toute façon plus interactif et tout doit rester lisible. */
.fkc-acc-body{max-height:0;overflow:hidden;transition:max-height .28s ease}
.fkc-acc-group.open .fkc-acc-body{max-height:2400px}
.no-js .fkc-acc-body{max-height:none}
.fkc-cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:12px;padding:16px 20px 20px}
.fkc-cta{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 15px;border-radius:11px;background:var(--ok-bg);border:1px solid rgba(57,184,126,.35);color:var(--text);min-height:62px;transition:transform .12s,box-shadow .12s,border-color .12s}
.fkc-cta:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.28);border-color:var(--ok)}
.fkc-cta-label{font-weight:700;font-size:13.5px}
.fkc-cta-desc{font-size:11.5px;color:var(--muted)}
.fkc-cta-go{position:absolute;right:13px;top:13px;color:var(--ok);font-weight:700;opacity:0;transition:opacity .12s}
.fkc-cta:hover .fkc-cta-go{opacity:1}
.fkc-cta.locked{background:var(--danger-bg);border-color:rgba(229,103,95,.35);cursor:pointer}
.fkc-cta.locked:hover{border-color:var(--danger);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.fkc-cta.locked .fkc-cta-label{color:var(--text)}
.fkc-cta-lock{font-size:11px}
@media(max-width:640px){.fkc-cta-grid{grid-template-columns:1fr}}

/* ── Module Analyse (graphiques SVG) ── */
.fkc-chart{width:100%;height:auto;display:block;overflow:visible}
.fkc-axis{fill:var(--muted);font-size:10px}
.fkc-legend{fill:var(--text);font-size:11px}
.fkc-donut-c{fill:var(--text);font-size:18px;font-weight:700}
.fkc-spark{display:block;width:100%;height:32px}
.an-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:14px}
.an-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:14px;margin-bottom:14px}
.an-grid-2>*{min-width:0}
.an-kpi{display:flex;flex-direction:column;gap:4px;position:relative}
.an-kpi-top{display:flex;align-items:center;gap:8px}
.an-kpi-top .ico{font-size:17px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:var(--panel2);border:1px solid var(--line)}
.an-kpi .v{font-size:1.7em;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums;line-height:1.1}
.an-kpi .l{color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.an-kpi .spark{margin-top:4px}
/* Tuiles colorées (accent à gauche + dégradé sur la valeur) */
.an-tile{position:relative;overflow:hidden;transition:transform .15s var(--ease),box-shadow .15s var(--ease),border-color .15s}
.an-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--muted);opacity:.9}
.an-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line2)}
.an-tile .v{background:linear-gradient(180deg,var(--text),var(--muted));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.an-tile-ok::before{background:var(--ok)} .an-tile-ok .ico{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.an-tile-danger::before{background:var(--danger)} .an-tile-danger .ico{color:var(--danger);background:var(--danger-bg);border-color:transparent}
.an-tile-blue::before{background:var(--blue)} .an-tile-blue .ico{color:var(--blue);background:rgba(61,111,224,.14);border-color:transparent}
.an-tile-orange::before{background:var(--orange)} .an-tile-orange .ico{color:var(--orange);background:rgba(243,154,18,.14);border-color:transparent}
.an-tile-violet::before{background:#8B5CF6} .an-tile-violet .ico{color:#8B5CF6;background:rgba(139,92,246,.14);border-color:transparent}
.an-tile-ok .v{background:linear-gradient(180deg,var(--ok),#1f8f5e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.an-tile-danger .v{background:linear-gradient(180deg,#ff8d85,var(--danger));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.an-tile-blue .v{background:linear-gradient(180deg,#7aa0f0,var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.an-tile-orange .v{background:linear-gradient(180deg,#ffc266,var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.an-tile-violet .v{background:linear-gradient(180deg,#b69cf5,#8B5CF6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* En-tête de carte graphique + légende */
.an-chart-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.an-chart-head .ico{font-size:15px}
.an-legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:2px 0 8px;font-size:11.5px;color:var(--muted)}
.an-legend span{display:inline-flex;align-items:center;gap:6px}
.an-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.couche{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;border:1px solid var(--line)}
/* En-tête de filtre période (module Analyse) */
.an-filter{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:16px}
.an-filter-row{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap}
.anf-group{display:flex;flex-direction:column;gap:7px}
.anf-group>label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.anf-dates{display:flex;align-items:center;gap:8px}
.anf-dates input{width:auto;min-width:138px}
.anf-dates .sep{color:var(--muted)}
.anf-quick{display:flex;gap:6px;flex-wrap:wrap}
.anf-chip{background:var(--panel2);border:1px solid var(--line2);color:var(--text);border-radius:9px;padding:9px 13px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .12s var(--ease)}
.anf-chip:hover{border-color:var(--orange);color:var(--orange)}
.anf-chip-y{background:var(--orange);border-color:var(--orange);color:#231400}
.anf-cmp{min-width:190px}
.anf-go{background:var(--orange);color:#231400;font-weight:800;border:0;padding:11px 18px;border-radius:10px;cursor:pointer;white-space:nowrap}
.anf-go:hover{filter:brightness(1.06)}
.anf-summary{margin-top:12px;color:var(--orange);font-size:12.5px;font-weight:600}
.anf-delta{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:20px}
.anf-delta.up{color:var(--ok);background:var(--ok-bg)} .anf-delta.down{color:var(--danger);background:var(--danger-bg)}
.an-kpi .v small{font-size:.5em;font-weight:600;color:var(--muted);-webkit-text-fill-color:var(--muted)}
@media(max-width:760px){.an-filter-row{gap:14px}.anf-go{width:100%}}
.couche-op{color:var(--blue);background:rgba(61,111,224,.12)}
.couche-perf{color:var(--orange);background:rgba(243,154,18,.12)}
.couche-pred{color:#8B5CF6;background:rgba(139,92,246,.12)}
.an-status{display:inline-block;width:9px;height:9px;border-radius:50%}
.an-ok{background:var(--ok)}.an-warn{background:var(--orange)}.an-danger{background:var(--danger)}.an-na{background:var(--muted)}
.an-alert{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;margin-bottom:8px;border:1px solid var(--line)}
.an-alert .ico{font-size:16px}
.an-alert.n-info{background:rgba(61,111,224,.10);border-color:rgba(61,111,224,.3)}
.an-alert.n-warn{background:var(--danger-bg);border-color:rgba(243,154,18,.3)}
.an-alert.n-danger{background:var(--danger-bg);border-color:rgba(229,103,95,.4)}

/* ── Barre Retour / Fermer des pages de données ── */
.modbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.modbar .btn-ghost{color:var(--muted)}
.modbar .btn-ghost:hover{color:var(--text)}

/* ═══════════════════════════════════════════════════════════════════
   Raffinement UI v2 — esprit Notion / Stripe : élévation, micro-animations,
   états de focus, contrôles & scrollbars natifs en dark. (Aucun markup modifié.)
   ═══════════════════════════════════════════════════════════════════ */

/* Scrollbars discrètes (WebKit + Firefox) */
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted2);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* Transitions globales sur les éléments interactifs */
a,button,.btn,.nav-item,.subtab,.card,.stat,.modcard,.fkc-cta,input,select,textarea,.modbadge{
  transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),
             box-shadow .18s var(--ease),transform .18s var(--ease),opacity .16s var(--ease)}

/* Focus visible homogène et accessible */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:none;box-shadow:var(--ring);border-radius:8px}

/* Apparition douce du contenu */
@keyframes fkc-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fkc-pop{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.content{animation:fkc-fade .34s var(--ease) both}
.card,.stat{animation:fkc-pop .3s var(--ease) both}

/* Élévation & survol des cartes-métriques (pas les cartes de formulaire) */
.card{box-shadow:var(--shadow-sm)}
.stat,.modcard,.fkc-cta{box-shadow:var(--shadow-sm)}
.stat:hover,.modcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line2)}
.card:has(.an-kpi):hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line2)}
.fkc-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* Boutons — finition Stripe (dégradé subtil, pression tactile) */
.btn{transition:transform .12s var(--ease),box-shadow .18s var(--ease),background-color .16s,border-color .16s,color .16s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--grad-blue);border-color:transparent;box-shadow:0 2px 8px -1px rgba(61,111,224,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 4px 14px -2px rgba(61,111,224,.55),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-ghost:hover{background:var(--panel2);border-color:var(--line2)}

/* Tables — survol de ligne discret (lisibilité Notion) */
.table tbody tr{transition:background-color .12s var(--ease)}
.table tbody tr:hover{background:rgba(255,255,255,.025)}
.table thead th{position:sticky;top:0}

/* Champs de formulaire — focus net */
.fld input,.fld select,.fld textarea,input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],select,textarea{
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background-color .15s}
.fld input:focus,.fld select:focus,.fld textarea:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--blue);box-shadow:var(--ring);outline:none}

/* Navigation latérale — indicateur animé */
.nav-item{position:relative}
.nav-item.active{background:linear-gradient(90deg,rgba(61,111,224,.22),rgba(61,111,224,.04));color:#fff}
.nav-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--grad-blue);box-shadow:0 0 12px rgba(61,111,224,.6)}
.nav-item:hover{transform:translateX(1px)}

/* Sous-onglets / barre Retour-Fermer */
.subtab{transition:color .15s var(--ease),border-color .15s var(--ease)}
.subtab.active{position:relative}

/* En-tête collant — légère ombre portée */
.topbar{backdrop-filter:saturate(1.2) blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.03),0 8px 24px -16px rgba(0,0,0,.6)}

/* Badge d'édition — éclat subtil */
.brand-edition{box-shadow:0 0 12px -4px rgba(243,154,18,.45)}
.brand-edition.is-creative{box-shadow:0 0 12px -4px rgba(160,110,230,.5)}

/* Graphiques — transition douce des barres/segments au survol */
.fkc-chart rect,.fkc-chart path,.fkc-chart circle{transition:opacity .15s var(--ease)}
.fkc-chart:hover rect:hover,.fkc-chart:hover path:hover{opacity:.85}

/* Statuts (pastilles) — légère pulsation pour l'état actif/licence */
.lic-active{animation:fkc-pulse 2.4s var(--ease) infinite}
@keyframes fkc-pulse{0%,100%{box-shadow:0 0 0 3px rgba(57,184,126,.18)}50%{box-shadow:0 0 0 5px rgba(57,184,126,.05)}}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ── Centre d'aide / Documentation ── */
.aide-hero{text-align:center;padding:30px 16px 26px;background:radial-gradient(700px 300px at 50% -20%,rgba(76,123,236,.14),transparent 60%);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:22px;animation:fkc-fade .34s var(--ease) both}
.aide-hero h1{font-size:27px;letter-spacing:-.5px}
.aide-hero>p{color:var(--muted);margin:8px 0 18px}
.aide-search{display:flex;align-items:center;gap:8px;max-width:600px;margin:0 auto;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:7px 8px 7px 14px;box-shadow:var(--shadow-md)}
.aide-search:focus-within{border-color:var(--blue);box-shadow:var(--ring)}
.aide-search-ico{opacity:.7}
.aide-search input{flex:1;background:transparent;border:0;color:var(--text);font-size:15px;font-family:inherit;outline:none}
.aide-quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.aide-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;transition:.16s var(--ease)}
.aide-chip:hover{color:var(--text);border-color:var(--blue);transform:translateY(-1px)}
.aide-h2{font-size:17px;margin:6px 0 12px}
.aide-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px;margin-bottom:8px}
.aide-cat{display:flex;flex-direction:column;gap:3px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-sm);transition:.18s var(--ease)}
.aide-cat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line2)}
.aide-cat-ico{font-size:24px}
.aide-cat-t{font-weight:700;color:var(--text);margin-top:4px}
.aide-cat-i{font-size:12.5px;color:var(--muted)}
.aide-result{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;transition:background .14s var(--ease)}
.aide-result:hover{background:var(--panel2)}
.aide-result-ico{font-size:18px;width:24px;text-align:center}
.aide-tuto-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:9px;transition:background .14s var(--ease)}
.aide-tuto-row:hover{background:var(--panel2)}
.aide-tuto-ico{font-size:17px;width:24px;text-align:center}
.aide-article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px;margin-bottom:20px;max-width:760px;box-shadow:var(--shadow-sm)}
.aide-article-cat{font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.5px}
.aide-article h1{font-size:25px;margin:6px 0 16px;letter-spacing:-.4px}
.aide-article-body{color:#C9D4E8;line-height:1.75;font-size:14.5px}
.aide-article-body p{margin:0 0 12px}
.aide-article-body ol,.aide-article-body ul{margin:0 0 14px 20px}
.aide-article-body li{margin:5px 0}
.aide-article-body em{color:var(--text);font-style:normal;font-weight:600;background:var(--panel2);padding:1px 6px;border-radius:5px}
.aide-article-body code{font-family:var(--mono);background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.9em;color:var(--orange)}
.aide-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.aide-steps li{display:flex;align-items:center;gap:13px;padding:11px 4px;border-bottom:1px solid var(--line)}
.aide-steps li:last-child{border-bottom:0}
.aide-step-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--grad-blue);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.aide-step-c{flex:1;font-size:13.5px}

/* ===================================================================
   RESPONSIVE — affichage optimisé téléphone / tablette / bureau (v1.45)
   =================================================================== */
.menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;
  border:1px solid var(--line2);background:var(--panel);color:var(--text);border-radius:9px;cursor:pointer;font-size:17px;line-height:1}
.menu-toggle:hover{border-color:var(--blue);color:#fff}
.side-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45;opacity:0;visibility:hidden;transition:opacity .2s ease}
.side-overlay.show{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}

/* Tablette & téléphone : barre latérale en tiroir (off-canvas) */
@media (max-width:860px){
  .side{position:fixed;top:0;left:-300px;width:268px;height:100vh;height:100dvh;z-index:50;
    transition:left .24s cubic-bezier(.4,0,.2,1);box-shadow:0 0 48px rgba(0,0,0,.55);overflow-y:auto}
  .side.open{left:0}
  .menu-toggle{display:inline-flex}
  .topbar{padding:12px 16px;gap:10px}
  .page-title{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .topbar-right{gap:12px}
  .content{padding:18px 14px}
  .bar{flex-wrap:wrap;gap:10px}
  .actions{flex-wrap:wrap}
  /* Tableaux : défilement horizontal plutôt que colonnes écrasées */
  .card-flush{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card-flush .table{min-width:600px}
  .soc-switch select{min-width:120px;max-width:170px}
}

/* Téléphone */
@media (max-width:560px){
  .form-grid,.meta{grid-template-columns:1fr!important}
  .page-title{font-size:16px}
  .content{padding:14px 11px}
  .topbar{padding:10px 12px}
  .topbar-right{gap:8px}
  .user{display:none}                 /* le nom réapparaît sur écrans plus larges */
  .modgrid{grid-template-columns:1fr 1fr;padding:14px}
  .stats{grid-template-columns:1fr 1fr}
  .dash-cols{grid-template-columns:1fr}
  .btn{padding:9px 13px;font-size:13px}
  .table th,.table td{padding:9px 12px}
  .bar .btn-sm{font-size:12px}
  h1,.page-title{letter-spacing:0}
}

/* Petit téléphone */
@media (max-width:400px){
  .modgrid,.stats{grid-template-columns:1fr}
  .societe-box{margin:0 0 14px}
}
.pj-flag{font-size:12px;opacity:.9;white-space:nowrap;vertical-align:middle}
.pj-flag sup{font-size:9px;font-weight:700;color:var(--orange);margin-left:1px}

/* ── Recherche/filtre instantané de liste ── */
.list-search{display:flex;align-items:center;gap:8px;margin:0 0 12px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;max-width:420px}
.list-search-ico{opacity:.6;font-size:14px;line-height:1}
.list-search-input{flex:1;border:0;background:transparent;color:var(--text);font-size:14px;outline:none;min-width:0}
.list-search-input::placeholder{color:var(--muted)}
.list-search-input::-webkit-search-cancel-button{cursor:pointer}

/* ── Cloche de notifications ── */
.notif-bell{position:relative;font-size:18px;text-decoration:none;line-height:1;display:inline-flex;align-items:center;margin-right:4px}
.notif-badge{position:absolute;top:-6px;right:-8px;background:var(--orange);color:#241500;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ── Centre d'aide : compléments (guide, essentiels, glossaire, dépannage) ── */
.aide-chip-hot{background:var(--accent);border-color:var(--accent);color:#fff}
.aide-cat-n{display:inline-block;min-width:20px;padding:1px 6px;margin-left:6px;border-radius:10px;background:var(--line);color:var(--muted);font-size:11.5px;font-weight:600;vertical-align:middle}
.aide-start{margin-bottom:18px}
.aide-start-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.aide-start-head h2{margin:0 0 4px;font-size:16px}
.aide-start-head p{margin:0;font-size:13px;max-width:60ch}
.aide-start-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.aide-start-step{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--text);text-decoration:none}
.aide-start-step:hover{border-color:var(--accent);background:var(--hover)}
.aide-start-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--line);color:var(--muted);font-size:12px;font-weight:700;flex:none}
.aide-ess{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin-bottom:6px}
.aide-ess-item{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;color:var(--text);text-decoration:none;font-size:13.5px}
.aide-ess-item:hover{background:var(--hover)}
.aide-ess-ico{font-size:18px;line-height:1.2;flex:none}
.aide-res-t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:14px 0 6px}
.aide-res-t:first-child{margin-top:0}
.aide-qa{padding:10px 0;border-bottom:1px solid var(--line)}
.aide-qa:last-child{border-bottom:none}
.aide-qa strong{font-size:13.5px}
.aide-qa p{margin:4px 0 0;font-size:13px;line-height:1.6}

/* ── Cascade SYSCOHADA (SIG) du Centre de Pilotage ─────────────────────────
   Grille en quatre colonnes : libellé, barre proportionnelle, montant,
   progression. Les soldes majeurs (valeur ajoutée, EBE, résultat net) sont
   accentués, car ce sont eux qu'un dirigeant lit en premier. */
.ckp-cascade { padding: 14px 16px; }
.ckp-cascade-per { font-size: 12px; margin-bottom: 10px; }
.ckp-casc-l { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(60px, 3fr) minmax(90px, auto) 72px;
              gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border, #2a2a3a); }
.ckp-casc-l:last-child { border-bottom: 0; }
.ckp-casc-l.maj { font-weight: 700; }
.ckp-casc-code { display: inline-block; min-width: 26px; font-family: ui-monospace, monospace;
                 font-size: 11px; opacity: .6; }
.ckp-casc-bar { height: 8px; border-radius: 4px; background: rgba(127,127,127,.15); overflow: hidden; }
.ckp-casc-bar > span { display: block; height: 100%; border-radius: 4px; }
.ckp-casc-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ckp-casc-val.neg { color: var(--danger); }
.ckp-casc-evo { text-align: right; font-size: 12px; white-space: nowrap; }
@media (max-width: 700px) {
  .ckp-casc-l { grid-template-columns: 1fr auto; }
  .ckp-casc-bar { display: none; }
}

/* ── Décisions expliquées & sections différées ─────────────────────────────
   La chaîne de raisonnement est repliée par défaut : la conclusion se lit
   d'un coup d'œil, la démonstration se déplie à la demande. */
.ckp-decisions{display:grid;gap:10px;padding:4px 0}
.ckp-dec{padding:12px 14px}
.ckp-dec-head{display:flex;align-items:center;gap:8px;font-weight:700}
.ckp-dec-ico{flex:0 0 auto}
.ckp-dec-lab{flex:1;min-width:0}
.ckp-dec-dom{font-size:11px;text-transform:uppercase;letter-spacing:.4px;opacity:.55}
.ckp-dec-msg{margin-top:6px;font-size:13.5px}
.ckp-dec-reco{margin-top:6px;font-size:13px;font-weight:600}
.ckp-dec-why{margin-top:8px;font-size:12.5px}
.ckp-dec-why summary{cursor:pointer;opacity:.7}
.ckp-dec-why summary:hover{opacity:1}
.ckp-dec-why ol{margin:8px 0 0 18px;padding:0;line-height:1.55;opacity:.85}
.ckp-dec .btn{margin-top:10px}

/* Squelette d'attente : signale qu'un contenu arrive, sans faire sauter la mise
   en page quand il arrive réellement. */
.ckp-skel{padding:16px;display:grid;gap:9px}
.ckp-skel span{display:block;height:11px;border-radius:6px;
  background:linear-gradient(90deg,rgba(127,127,127,.10),rgba(127,127,127,.22),rgba(127,127,127,.10));
  background-size:200% 100%;animation:ckpSkel 1.3s ease-in-out infinite}
.ckp-skel span.court{width:45%}
@keyframes ckpSkel{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.ckp-skel span{animation:none}}

/* ── Consolidation du groupe ───────────────────────────────────────────────
   Trois colonnes : cumul, éliminations, consolidé. Le lecteur doit pouvoir
   vérifier ce qui a été retiré, pas seulement lire le résultat. */
.ckp-conso{padding:12px 14px}
.ckp-conso-per{font-size:12px;margin-bottom:8px}
.ckp-conso .ckp-table td.num,.ckp-conso .ckp-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ckp-conso .ckp-table td.neg{color:var(--danger)}
.ckp-conso .ckp-table td.strong{font-weight:700}
.ckp-conso-res td{border-top:2px solid var(--border,#2a2a3a);font-weight:700;padding-top:8px}
.ckp-conso-alerte{margin-top:12px;padding:10px 12px;border-radius:8px;
  border-left:3px solid var(--warn,orange);background:rgba(255,165,0,.07);font-size:13px}
.ckp-conso-alerte ul{margin:6px 0 0 18px;padding:0}
.ckp-conso-note{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.5}

/* ═══════════════════════════════════════════════════════════════════════
   MODE UI — Simple / Professionnel / Expert (1.520.155)
   ═══════════════════════════════════════════════════════════════════════ */

/* Bascule de mode dans la barre du haut : discrète, mais toujours là. */
.mode-switch{display:flex;align-items:center;gap:5px}
.mode-switch-lbl{font-size:13px;line-height:1;cursor:default}
.mode-switch select{background:var(--panel);border:1px solid var(--line);color:var(--muted);
  border-radius:var(--radius-sm);padding:5px 8px;font-size:12px;font-weight:600;cursor:pointer}
.mode-switch select:hover{color:var(--text);border-color:var(--line2)}

/* ── Accueil du Mode Simple ─────────────────────────────────────────── */
.simple-home{max-width:820px;margin:0 auto}
.simple-hello{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:6px 0 22px}
.simple-hello-titre{font-size:26px;font-weight:800;letter-spacing:-.02em}
.simple-hello-date{color:var(--muted);font-size:14px;margin-top:2px}
.simple-hello-soc{font-size:12px;color:var(--muted2);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;white-space:nowrap}

.simple-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.simple-tuile{position:relative;display:flex;align-items:center;gap:16px;padding:22px 20px;
  border-radius:var(--radius-lg);background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .12s var(--ease),box-shadow .12s var(--ease),border-color .12s}
.simple-tuile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--blue)}
.simple-tuile-ico{font-size:32px;line-height:1;flex-shrink:0}
.simple-tuile-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.simple-tuile-label{font-family:Syne,Inter,sans-serif;font-weight:800;font-size:17px;letter-spacing:.02em}
.simple-tuile-sous{font-size:12.5px;color:var(--muted)}
.simple-tuile-go{margin-left:auto;color:var(--muted2);font-weight:700;font-size:18px;flex-shrink:0}
.simple-tuile:hover .simple-tuile-go{color:var(--blue)}
/* La vente est l'action principale : elle se voit de loin. */
.simple-tuile.tuile-vendre{background:linear-gradient(135deg,rgba(243,154,18,.13),var(--panel));
  border-color:rgba(243,154,18,.42)}
.simple-tuile.tuile-vendre:hover{border-color:var(--orange)}
.simple-tuile.tuile-vendre .simple-tuile-go{color:var(--orange)}

.simple-alertes{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.simple-alerte{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--radius-sm);
  font-size:13px;border-left:3px solid var(--muted2);background:var(--panel)}
.simple-alerte.niv-danger{border-left-color:var(--danger);background:var(--danger-bg)}
.simple-alerte.niv-warn{border-left-color:var(--warn);background:var(--warn-bg)}
.simple-alerte.niv-info{border-left-color:var(--blue);background:var(--panel2)}
.simple-alerte-txt{flex:1;min-width:0}
.simple-alerte-go{color:var(--blue);font-weight:600;white-space:nowrap}
.simple-vide{color:var(--muted);padding:26px;text-align:center;border:1px dashed var(--line);
  border-radius:var(--radius)}
.simple-pied{margin-top:26px;text-align:center;font-size:12.5px;color:var(--muted2)}
.simple-pied a{color:var(--blue);font-weight:600}

/* En Mode Simple, la barre latérale s'efface au profit des grandes actions
   sur les écrans larges — mais reste ouvrable par le bouton ☰. */
body.fkc-mode-simple .simple-home{padding-top:8px}

/* ── « Mon activité » ───────────────────────────────────────────────── */
.mact-brief{margin-bottom:18px;border-left:3px solid var(--blue)}
.mact-brief.mact-alerte{border-left-color:var(--danger)}
.mact-brief.mact-vigilance{border-left-color:var(--warn)}
.mact-salut{font-size:12px;color:var(--muted2);text-transform:uppercase;letter-spacing:.05em}
.mact-resume{font-size:15px;margin-top:6px;line-height:1.6}
.mact-reco{margin-top:10px;font-size:13.5px;color:var(--muted);font-style:italic}
.mact-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.mact-kpi{display:flex;flex-direction:column;gap:4px;padding:15px 16px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.mact-kpi-lib{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mact-kpi-val{font-family:Syne,Inter,sans-serif;font-size:22px;font-weight:800}
.mact-kpi-unite{font-size:11px;color:var(--muted2)}

/* ── Écran de réglage du mode ───────────────────────────────────────── */
.mode-source{color:var(--muted);margin-bottom:16px;font-size:13.5px}
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:22px}
.mode-card{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;padding:20px 18px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text);
  cursor:pointer;font:inherit;transition:transform .12s var(--ease),border-color .12s}
.mode-card:hover{transform:translateY(-2px);border-color:var(--blue)}
.mode-card.is-active{border-color:var(--blue);box-shadow:var(--ring)}
.mode-card-pastille{font-size:22px}
.mode-card-label{font-family:Syne,Inter,sans-serif;font-weight:800;font-size:16px}
.mode-card-devise{font-size:13px;color:var(--text);font-style:italic}
.mode-card-cible{font-size:12px;color:var(--muted)}
.mode-card-obj{font-size:12px;color:var(--muted2)}
.mode-card-badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;
  background:var(--blue);color:#fff;border-radius:999px;padding:3px 9px;letter-spacing:.04em}
.mode-ordre{margin:10px 0 0 20px;font-size:13px;color:var(--muted);line-height:1.9}
.mode-ordre li.on{color:var(--text)}
.mode-ordre li.on strong{color:var(--blue)}
.mode-reset{margin-top:14px}
.mode-note{margin-top:14px;font-size:12px;color:var(--muted2);line-height:1.6}

@media(max-width:640px){
  .simple-hello{flex-direction:column;gap:8px}
  .simple-tuiles{grid-template-columns:1fr}
  .simple-tuile{padding:18px 16px}
  .mode-switch select{max-width:96px}
}

/* ═══════════════════════════════════════════════════════════════════════
   DÉMARRAGE — onboarding en trois questions (1.520.157)
   ═══════════════════════════════════════════════════════════════════════ */

.onb{max-width:820px;margin:0 auto}
.onb-hero{display:flex;align-items:center;gap:18px;margin:4px 0 26px}
.onb-hero-ico{font-size:34px;line-height:1}
.onb-hero-titre{font-size:24px;font-weight:800;letter-spacing:-.02em}
.onb-hero-sub{color:var(--muted);font-size:14px;margin-top:3px}

.onb-etape{display:flex;gap:16px;padding:22px 20px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);margin-bottom:16px;box-shadow:var(--shadow-sm)}
.onb-num{flex-shrink:0;width:30px;height:30px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;font-family:Syne,Inter,sans-serif;font-weight:800;font-size:14px;
  background:var(--grad-blue);color:#fff}
.onb-corps{flex:1;min-width:0}
.onb-q{font-family:Syne,Inter,sans-serif;font-size:17px;font-weight:800;margin-bottom:5px}
.onb-aide{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.onb-champ{display:block}
.onb-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:700;margin-bottom:6px}
.onb-fige{padding:13px 15px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius-sm);
  display:flex;flex-direction:column;gap:4px}
.onb-fige span{font-size:12px;color:var(--muted)}

.onb-tailles{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px}
.onb-taille{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 14px 12px;
  background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius);cursor:pointer;
  transition:border-color .12s,transform .12s var(--ease)}
.onb-taille:hover{border-color:var(--blue);transform:translateY(-1px)}
.onb-taille.is-active{border-color:var(--blue);box-shadow:var(--ring)}
.onb-taille input{position:absolute;opacity:0;pointer-events:none}
.onb-taille-ico{font-size:22px;line-height:1}
.onb-taille-lbl{font-weight:700;font-size:13.5px}
.onb-taille-aide{font-size:11.5px;color:var(--muted)}
.onb-taille-mode{margin-top:5px;font-size:11px;color:var(--muted2)}

.onb-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.onb-mod{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--bg2);
  border:1px solid var(--line2);border-radius:var(--radius-sm);cursor:pointer;font-size:13px}
.onb-mod:hover{border-color:var(--line2);background:var(--panel2)}
.onb-mod input[type=checkbox]{width:auto;margin:0}
.onb-mod-ico{font-size:15px;line-height:1}
.onb-mod-lbl{flex:1;min-width:0}
.onb-mod.is-socle{opacity:.75;cursor:default}
.onb-mod-socle{font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em}

.onb-pied{display:flex;align-items:center;gap:12px;margin-top:22px}
.btn-lg{padding:13px 26px;font-size:15px;font-weight:700}
.onb-ecarter{margin-top:18px;text-align:center}
.onb-journal{margin:14px 0 0 18px;font-size:12.5px;color:var(--muted);line-height:1.9}
.onb-note{margin-top:16px;font-size:12px;color:var(--muted2);line-height:1.7}
.onb-note a{color:var(--blue);font-weight:600}

/* Bandeau d'invitation, en tête de contenu */
.onb-invite{display:flex;align-items:center;gap:13px;padding:13px 16px;margin-bottom:18px;
  border-radius:var(--radius);border:1px solid rgba(61,111,224,.4);
  background:linear-gradient(135deg,rgba(61,111,224,.14),var(--panel))}
.onb-invite-ico{font-size:20px;line-height:1;flex-shrink:0}
.onb-invite-txt{flex:1;min-width:0;font-size:13px;line-height:1.55}
.onb-invite-non{background:none;border:none;color:var(--muted2);font:inherit;font-size:12px;
  cursor:pointer;padding:6px 4px;text-decoration:underline}
.onb-invite-non:hover{color:var(--text)}

@media(max-width:640px){
  .onb-etape{flex-direction:column;gap:10px}
  .onb-tailles,.onb-modules{grid-template-columns:1fr}
  .onb-invite{flex-wrap:wrap}
  .onb-pied{flex-direction:column;align-items:stretch}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PACK GESTION COLLECTIVE DES DROITS — ruban de navigation et formulaires
   horizontaux (1.520.159).

   Le pack compte vingt écrans et des formulaires de vingt champs. À plat et
   en colonne, l'un mangeait trois lignes d'en-tête, l'autre deux écrans de
   défilement. Les règles ci-dessous n'inventent pas de thème : elles
   réutilisent les variables du socle, pour qu'un changement de palette
   continue de s'appliquer ici sans retouche.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ruban : deux lignes fixes, jamais dépliables ── */
.gc-ruban{margin:-4px 0 18px}
.gc-ruban-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.gc-rub{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;
  color:var(--muted);background:var(--panel);border:1px solid var(--line);white-space:nowrap;transition:.13s}
.gc-rub:hover{color:var(--text);border-color:var(--line2);background:var(--panel2)}
.gc-rub.is-on{color:#fff;background:var(--panel2);border-color:var(--orange);box-shadow:inset 0 -2px 0 var(--orange)}
.gc-rub-n{font-size:10px;font-weight:700;padding:1px 6px;border-radius:9px;background:var(--bg2);color:var(--muted2)}
.gc-rub.is-on .gc-rub-n{background:rgba(243,154,18,.18);color:var(--orange)}
.gc-ruban-profil{margin-left:auto;font-size:11px;color:var(--muted2);font-weight:600;white-space:nowrap}
.gc-ruban-sub{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--bg2);border:1px solid var(--line)}
.gc-sub{padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.gc-sub:hover{color:var(--text);background:var(--panel2)}
.gc-sub.is-on{color:#241500;background:linear-gradient(135deg,var(--orange-l),var(--orange-d))}

/* ── En-tête d'écran ── */
.gc-titre{margin-bottom:16px}
.gc-titre h1{font-size:21px;font-weight:700;margin-bottom:4px}
.gc-titre p{font-size:12.5px;max-width:900px}

/* ── Bandeau d'indicateurs ── */
.gc-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.gc-kpi-c{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.gc-kpi-c span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted2);font-weight:700}
.gc-kpi-c b{display:block;font-size:23px;font-weight:600;margin-top:4px}
.gc-kpi-c i{display:block;font-style:normal;font-size:11px;color:var(--muted2);margin-top:2px}

/* ── Le parcours en étapes ── */
.gc-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;padding:14px 20px;
  border-bottom:1px solid var(--line);background:var(--bg2)}
.gc-step{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);opacity:.55}
.gc-step b{display:block;font-size:12.5px;font-weight:700;color:var(--muted)}
.gc-step span{display:block;font-size:11px;color:var(--muted2);margin-top:3px;line-height:1.4}
.gc-step.on{opacity:1;border-color:var(--orange);box-shadow:inset 0 -2px 0 var(--orange)}
.gc-step.on b{color:#fff}
.gc-step.done{opacity:1;border-color:rgba(57,184,126,.4)}
.gc-step.done b{color:var(--ok)}

/* ── Fiche en lecture : des paires libellé/valeur qui se lisent en largeur ── */
.gc-fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 20px}
.gc-fiche>div{border-left:2px solid var(--line);padding-left:10px}
.gc-fiche span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted2);font-weight:700}
.gc-fiche strong{display:block;font-size:13.5px;margin-top:2px}

/* ── Formulaires : la grille remplace la colonne ── */
.gc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 14px;align-items:end}
.gc-grid>*{min-width:0}
.gc-bloc{border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.gc-bloc:first-child{border-top:none;padding-top:0;margin-top:0}
.gc-bloc h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--orange);font-weight:700;margin-bottom:12px}
.gc-details{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--bg2)}
.gc-details>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted)}
.gc-details>summary:hover{color:var(--text)}
.gc-instruire{display:flex;gap:8px;align-items:end;margin-bottom:8px}
.gc-instruire .fld{flex:1;margin-bottom:0}

/* ── Bilan des clés : une pastille par famille et territoire ── */
.gc-bilan{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.gc-bilan-c{padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);min-width:150px}
.gc-bilan-c span{display:block;font-size:10.5px;color:var(--muted2);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.gc-bilan-c b{display:block;font-size:18px;font-weight:600;margin-top:2px}
.gc-bilan-c i{display:block;font-style:normal;font-size:11px;margin-top:1px}
.gc-bilan-c.ok{border-color:rgba(57,184,126,.35)} .gc-bilan-c.ok i{color:var(--ok)}
.gc-bilan-c.ko{border-color:rgba(243,154,18,.35)} .gc-bilan-c.ko i{color:var(--warn)}

.gc-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700;
  background:var(--bg2);border:1px solid var(--line);color:var(--muted);vertical-align:middle}
.gc-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}

@media(max-width:900px){
  .gc-2col{grid-template-columns:1fr}
  .gc-ruban-profil{margin-left:0;width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DE LA COLONNE ÉTROITE (1.520.161)

   Dix-neuf écrans du pack reprenaient la même disposition : une liste à
   gauche, et à droite une colonne de 320 à 360 pixels contenant le formulaire
   de saisie, dont les champs s'empilaient verticalement.

   Trois défauts en découlaient. Le formulaire demandait deux écrans de
   défilement là où la fiche papier tient en une feuille. La colonne restait
   figée quelle que soit la largeur de l'écran, gaspillant la moitié d'un 27
   pouces. Et surtout, un champ de saisie de 300 pixels ne peut afficher ni un
   titre d'œuvre complet, ni un nom d'ayant droit long, ni une référence de
   contrat : l'agent saisit sans relire ce qu'il saisit.

   .gc-split empile désormais les deux zones, chacune sur toute la largeur ;
   le formulaire, une fois libéré, se met en grille horizontale.
   ═══════════════════════════════════════════════════════════════════════ */
.gc-split{display:block}
.gc-split>*+*{margin-top:16px}

/* Le formulaire d'un panneau latéral devient une grille horizontale.
   Les éléments qui ne sont pas des champs — aide, titre, alerte — prennent la
   ligne entière : les voir découpés en cellules de 190 pixels rendrait
   l'explication illisible au moment précis où elle sert. */
.gc-grid>p,.gc-grid>.help,.gc-grid>.alert,.gc-grid>h3,.gc-grid>hr,
.gc-grid>table,.gc-grid>.table-wrap,.gc-grid>details,.gc-grid>.gc-bilan{grid-column:1/-1}
.gc-grid>button,.gc-grid>.btn{align-self:end;margin-bottom:15px}
.gc-grid>input[type=hidden]{display:none}
/* Une zone de texte respire mal dans une cellule étroite : on lui laisse
   deux colonnes dès que la place existe. */
.gc-grid>label.fld:has(textarea){grid-column:span 2}

@media(max-width:700px){
  .gc-grid{grid-template-columns:1fr}
  .gc-grid>label.fld:has(textarea){grid-column:auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRE TRANSVERSALE + PROFIL UX (1.530.0)

   La barre est la seule zone d'interface qui ne change ni avec le module ni
   avec le mode. Sa constance EST sa fonction : on doit pouvoir créer,
   chercher, consulter ses alertes et interroger le copilote sans avoir à
   réapprendre où ils sont selon l'écran ouvert.

   Elle se place sous la barre de titre et reste collante avec elle : au
   défilement d'une longue liste, la recherche demeure atteignable — c'est
   précisément quand la liste est longue qu'on en a besoin.
   ═══════════════════════════════════════════════════════════════════════ */
.fkc-barre{position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:10px;
  padding:9px 30px;border-bottom:1px solid var(--line);background:rgba(14,22,38,.86);
  backdrop-filter:blur(8px)}
.fkc-barre-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;
  border:1px solid var(--line2);background:var(--panel);color:var(--muted);font:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;transition:.12s var(--ease);position:relative;white-space:nowrap}
.fkc-barre-btn:hover{border-color:var(--blue);color:var(--text)}
.fkc-barre-btn[aria-expanded=true]{border-color:var(--blue);color:#fff;background:var(--panel2)}
.fkc-barre-action{border-color:rgba(243,154,18,.5);color:var(--orange)}
.fkc-barre-action:hover{background:rgba(243,154,18,.10);border-color:var(--orange)}
.fkc-barre-ico{font-size:14px;line-height:1}
.fkc-barre-action .fkc-barre-ico{font-size:17px;font-weight:700}

.fkc-barre-rech{flex:1;min-width:120px;display:flex;align-items:center;gap:8px;padding:6px 12px;
  border:1px solid var(--line2);border-radius:9px;background:var(--bg2)}
.fkc-barre-rech:focus-within{border-color:var(--blue);box-shadow:var(--ring)}
.fkc-barre-input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);
  font:inherit;font-size:13px}
.fkc-barre-input::placeholder{color:var(--muted2)}
.fkc-barre-kbd{font-family:var(--mono);font-size:10.5px;color:var(--muted2);border:1px solid var(--line2);
  border-radius:5px;padding:1px 6px}

.fkc-barre-pastille{min-width:17px;height:17px;padding:0 5px;border-radius:9px;font-size:10px;
  font-weight:800;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:var(--muted2)}
.fkc-barre-pastille.niv-danger{background:var(--danger)}
.fkc-barre-pastille.niv-warn{background:var(--warn);color:#231a05}
.fkc-barre-pastille.niv-info{background:var(--blue)}
.fkc-barre-alertes.a-des{border-color:rgba(229,103,95,.45)}

/* Le panneau unique — quatre panneaux auraient produit quatre façons de se
   fermer, dont l'une aurait fini par ne plus fonctionner. */
.fkc-barre-panneau{position:absolute;top:calc(100% + 7px);right:30px;left:auto;width:min(520px,calc(100vw - 60px));
  max-height:min(70vh,620px);overflow:auto;background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:40}
.fkc-panneau-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
.fkc-panneau-titre{font-weight:700;font-size:13px;color:var(--text)}
.fkc-panneau-fermer{background:transparent;border:0;color:var(--muted2);font-size:15px;cursor:pointer;
  padding:2px 6px;border-radius:6px;font-family:inherit}
.fkc-panneau-fermer:hover{color:var(--text);background:var(--panel2)}
.fkc-panneau-corps{padding:8px}
.fkc-panneau-section{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted2);
  font-weight:700;padding:11px 10px 5px}
.fkc-panneau-attente,.fkc-panneau-vide{color:var(--muted);font-size:13px;padding:18px 12px;text-align:center}

.fkc-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;
  color:var(--text);text-decoration:none;transition:.1s var(--ease)}
a.fkc-item:hover{background:var(--panel2)}
.fkc-item-ico{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.fkc-item-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.fkc-item-label{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkc-item-sous{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkc-item-badge{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);
  border:1px solid var(--line2);border-radius:20px;padding:2px 7px;flex-shrink:0}
.fkc-item.est-contexte{background:rgba(61,111,224,.08);box-shadow:inset 2px 0 0 var(--blue)}
.fkc-item.niv-danger .fkc-item-label{color:var(--danger)}
.fkc-item.niv-warn .fkc-item-label{color:var(--orange-l)}

.fkc-copilot-tete{padding:12px 12px 14px;border-radius:11px;background:var(--bg2);margin-bottom:6px}
.fkc-copilot-tete.humeur-alerte{box-shadow:inset 3px 0 0 var(--danger)}
.fkc-copilot-tete.humeur-vigilance{box-shadow:inset 3px 0 0 var(--warn)}
.fkc-copilot-tete.humeur-serein{box-shadow:inset 3px 0 0 var(--ok)}
.fkc-copilot-salut{font-weight:700;font-size:13.5px;margin-bottom:5px}
.fkc-copilot-resume{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0}
.fkc-copilot-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;padding:6px 2px 2px}
.fkc-copilot-kpi{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  display:flex;flex-direction:column;gap:3px}
.fkc-copilot-kpi-val{font-weight:800;font-size:15px}
.fkc-copilot-kpi-lbl{font-size:10.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.4px}
.fkc-copilot-reco{margin:10px 4px 4px;padding:10px 12px;border-radius:9px;background:rgba(243,154,18,.08);
  border:1px solid rgba(243,154,18,.28);font-size:12.5px;color:var(--text);line-height:1.55}

@media(max-width:860px){
  .fkc-barre{padding:8px 14px;gap:7px;flex-wrap:wrap}
  /* Sous 860 px, les libellés disparaissent avant les icônes : trois boutons
     illisibles valent moins que trois icônes reconnaissables. */
  .fkc-barre-btn .fkc-barre-txt{display:none}
  .fkc-barre-rech{order:-1;flex-basis:100%}
  .fkc-barre-panneau{right:8px;left:8px;width:auto}
}

/* ── Écran d'aperçu du profil UX ──────────────────────────────────────── */
.ux-couches{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:20px}
.ux-couche{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.ux-couche-num{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted2);font-weight:700}
.ux-couche-val{font-size:15px;font-weight:700;margin-top:4px}
.ux-couche-sous{font-size:11.5px;color:var(--muted);margin-top:3px}
.ux-menu-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}
.ux-menu-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--bg2)}
.ux-menu-item code{font-family:var(--mono);font-size:10.5px;color:var(--muted2)}
.ux-kpi-branche{color:var(--ok);font-weight:700}
.ux-kpi-absent{color:var(--muted2)}
.simple-devise{color:var(--muted2);font-size:12px;letter-spacing:.6px;text-transform:uppercase;
  font-weight:700;margin:-6px 0 16px}
.simple-suggestions{display:grid;gap:9px;margin-bottom:18px}
.simple-suggestion{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:11px;
  background:rgba(61,111,224,.09);border:1px solid rgba(61,111,224,.3);color:var(--text);transition:.12s var(--ease)}
.simple-suggestion:hover{background:rgba(61,111,224,.16)}
.simple-suggestion-ico{font-size:19px}
.simple-suggestion-txt{display:flex;flex-direction:column;gap:2px}
.simple-suggestion-txt strong{font-size:13.5px}
.simple-suggestion-txt span{font-size:11.5px;color:var(--muted)}
.ux-kpi-socle{color:var(--blue);font-weight:700;font-size:11.5px}

/* ── Démarrage en cinq questions (1.530.0) ────────────────────────────── */
.onb-familles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px}
.onb-famille{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--line2);
  border-radius:10px;cursor:pointer;background:var(--bg2);transition:.12s var(--ease)}
.onb-famille:hover{border-color:var(--blue)}
.onb-famille.is-active{border-color:var(--blue);background:rgba(61,111,224,.10)}
.onb-famille input{margin:0}
.onb-famille-lbl{flex:1;font-size:13px;font-weight:600}
.onb-famille-nb{font-size:10.5px;color:var(--muted2);border:1px solid var(--line2);border-radius:20px;padding:1px 7px}
.onb-facons{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.onb-facon{display:grid;grid-template-columns:auto 1fr;gap:4px 11px;align-items:center;padding:12px 14px;
  border:1px solid var(--line2);border-radius:11px;cursor:pointer;background:var(--bg2);transition:.12s var(--ease)}
.onb-facon:hover{border-color:var(--blue)}
.onb-facon.is-active{border-color:var(--blue);background:rgba(61,111,224,.10)}
.onb-facon input{grid-row:1/3;margin:0}
.onb-facon-ico{display:none}
.onb-facon-lbl{font-size:13px;font-weight:700}
.onb-facon-aide{font-size:11.5px;color:var(--muted);line-height:1.45}
.onb-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px;margin-bottom:18px}
.onb-role{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--line2);
  border-radius:10px;cursor:pointer;background:var(--bg2);transition:.12s var(--ease)}
.onb-role:hover{border-color:var(--blue)}
.onb-role.is-active{border-color:var(--blue);background:rgba(61,111,224,.10)}
.onb-role-lbl{flex:1;font-size:13px;font-weight:600}
.onb-sous-q{font-size:14px;margin:20px 0 4px}
.onb-aide-fine{font-size:11.5px;opacity:.85}

/* ── Workflow métier (1.531.0) ─────────────────────────────────────────
   Une frise horizontale plutôt qu'une liste : le workflow exprime un ORDRE,
   et une liste verticale se lit comme un menu — c'est-à-dire comme des choix
   parallèles, ce qu'une suite d'étapes n'est justement pas. */
.ux-wf{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ux-wf-fleche{color:var(--muted2);font-size:13px}
.ux-wf-etape{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;
  border:1px solid var(--line2);background:var(--bg2);color:var(--text);text-decoration:none;
  font-size:12.5px;font-weight:600;transition:.12s var(--ease)}
a.ux-wf-etape:hover{border-color:var(--blue);background:var(--panel2)}
/* Étape sans écran : présente, lisible, non cliquable. On ne l'efface pas —
   un workflow amputé de ses étapes non outillées serait un workflow faux. */
.ux-wf-etape.est-absente{opacity:.5;border-style:dashed;cursor:default}
.ux-wf-ico{font-size:14px}
.simple-wf{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:-4px 0 18px}
.simple-wf-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted2);
  font-weight:700;margin-right:4px}