/* =====================================================================
   mydashly — dashboard
   ===================================================================== */
html,body{height:100%}
body{overflow:hidden}
.app{display:grid;grid-template-columns:240px 1fr;height:100vh;height:100dvh}

/* ---------- Barre latérale ---------- */
.side{background:var(--ink);color:#CBD5E1;padding:22px 14px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;z-index:40}
.side .md-logo{font-size:22px;margin:4px 10px 28px}
.side-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#64748B;padding:14px 12px 6px}
.nav-btn{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:#CBD5E1;font-size:14px;font-weight:500;text-align:left;cursor:pointer;transition:background .2s,color .2s}
.nav-btn svg{width:18px;height:18px;flex:none;opacity:.85}
.nav-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-btn.active{background:rgba(59,130,246,.18);color:#fff}
.nav-btn.active svg{color:var(--bar1);opacity:1}
.nav-btn.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--bar2)}
.nav-btn .count{margin-left:auto;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);color:#94A3B8}
.nav-btn:focus-visible{outline:2px solid var(--bar1);outline-offset:-2px}
.side-foot{margin-top:auto;padding:14px;border-radius:14px;background:rgba(255,255,255,.05);font-size:12px;line-height:1.5}
.side-foot .co{display:flex;align-items:center;gap:10px}
.co-badge{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--bar2),var(--bar3));color:#fff;font-weight:800;font-size:13px;flex:none}
.side-foot b{display:block;color:#fff;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Logo : carré pour un logo carré, plus large (jusqu'à 84 px) pour un logo en longueur */
.co-badge.has-logo{width:auto;min-width:36px;max-width:84px;background:#fff;padding:4px 6px;box-shadow:0 0 0 1px rgba(255,255,255,.12);animation:pop .4s var(--spring)}
.co-badge.has-logo img{height:100%;width:auto;max-width:72px;object-fit:contain;border-radius:5px;display:block}
/* Paramètres › Entreprise › Logo */
.logo-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:6px 20px 20px}
.logo-prev{position:relative;width:76px;height:76px;flex:none;border-radius:18px;border:1px dashed var(--bar1);background:repeating-conic-gradient(#F8FAFC 0 25%,#fff 0 50%) 0 0/14px 14px;display:grid;place-items:center;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .25s var(--spring)}
.logo-prev:hover,.logo-prev.over{border-color:var(--brand);transform:scale(1.04)}
.logo-prev.has{border-style:solid;border-color:var(--line)}
.logo-prev img{max-width:84%;max-height:84%;object-fit:contain}
.logo-prev .ph{display:grid;place-items:center;width:100%;height:100%;font-weight:800;font-size:22px;color:#fff;background:linear-gradient(135deg,var(--bar2),var(--bar3))}
.logo-info{flex:1;min-width:200px}
.logo-info b{display:block;font-size:14px}
.logo-info span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.logo-info .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.side-foot .who{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:8px}
.side-foot .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout{border:0;background:none;color:#94A3B8;cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center}
.logout:hover{color:#fff;background:rgba(255,255,255,.08)}
.logout svg{width:16px;height:16px}
.scrim{display:none}

/* ---------- Zone principale ---------- */
.main{overflow-y:auto;overflow-x:hidden;min-width:0;scroll-behavior:smooth}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px clamp(16px,3vw,32px);background:rgba(248,250,252,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top-left{display:flex;align-items:center;gap:12px;min-width:0}
.burger{display:none}
.hello{font-size:13px;color:var(--muted);font-weight:500}
.title-row{display:flex;align-items:center;gap:6px;min-width:0}
.title-row h1{margin:0;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.03em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:8px;padding:0 4px;margin-left:-4px;outline:none}
.title-row h1[contenteditable="true"]{background:#fff;box-shadow:0 0 0 2px var(--bar2);white-space:normal}
.title-row .icon-btn{width:30px;height:30px;opacity:0;transition:opacity .2s}
.title-row:hover .icon-btn,.title-row .icon-btn:focus-visible{opacity:1}
.top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.seg{display:inline-flex;padding:4px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);position:relative}
.seg button{position:relative;z-index:1;border:0;background:none;padding:7px 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:color .25s;white-space:nowrap}
.seg button.on{color:var(--ink)}
.seg .seg-pill{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:9px;background:var(--soft);box-shadow:inset 0 0 0 1px rgba(59,130,246,.25);transition:transform .4s var(--ease),width .4s var(--ease)}
.seg button:focus-visible{outline:2px solid var(--bar1)}

.menu-wrap{position:relative}
.avatar{width:38px;height:38px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--bar2),var(--bar3));color:#fff;font-weight:700;font-size:13px;cursor:pointer;transition:transform .2s var(--spring),box-shadow .2s}
.avatar:hover{transform:scale(1.06);box-shadow:0 0 0 4px rgba(59,130,246,.18)}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:6px;border-radius:14px;background:#fff;box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);z-index:60;transform-origin:top right;animation:menu-in .25s var(--ease)}
@keyframes menu-in{from{opacity:0;transform:scale(.95) translateY(-4px)}}
.menu .m-head{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;font-size:13px}
.menu .m-head b{display:block;font-size:14px}
.menu .m-head span{color:var(--muted)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:9px;background:none;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;text-align:left}
.menu button:hover{background:var(--bg);color:var(--ink)}
.menu button svg{width:16px;height:16px;color:var(--muted)}
.menu .danger{color:#B91C1C}

.view{padding:8px clamp(16px,3vw,32px) 48px;display:flex;flex-direction:column;gap:16px}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.view-head h2{margin:0;font-size:20px;letter-spacing:-.02em}
.view-head p{margin:2px 0 0;color:var(--muted);font-size:14px}

/* ---------- Cartes ---------- */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line);padding:18px;min-width:0;position:relative}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-title{font-size:15px;font-weight:700}
.card-sub{font-size:12px;color:var(--muted)}

/* Bandeau « vide » */
.empty-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 24px;border-radius:var(--radius);background:linear-gradient(120deg,#0F172A,#1E3A8A 70%,#2563EB);color:#fff;overflow:hidden;position:relative;isolation:isolate}
.empty-hero::after{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(147,197,253,.35),transparent 65%);z-index:-1}
.empty-hero h3{margin:0;font-size:19px;letter-spacing:-.02em}
.empty-hero p{margin:4px 0 0;color:#BFDBFE;font-size:14px}
.empty-hero .acts{display:flex;gap:10px;flex-wrap:wrap}
.empty-hero .btn-ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.empty-hero .btn-ghost:hover{background:rgba(255,255,255,.18)}
.empty-hero .btn-light{background:#fff;color:var(--ink)}
.empty-hero .btn-light:hover{background:var(--soft)}

/* KPI */
/* Nombre de colonnes = nombre d'indicateurs (--cols), puis 3 puis 2 selon la largeur : jamais de ligne orpheline 5 + 1 */
.kpis{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:12px}
@media (max-width:1320px){.kpis.many{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.kpis,.kpis.many{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease);text-align:left;border:0;font:inherit;color:inherit;width:100%}
.kpi:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--bar1),var(--shadow-sm)}
.kpi:focus-visible{outline:3px solid var(--bar1);outline-offset:2px}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-label{font-size:12px;font-weight:600;color:var(--muted)}
.kpi-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--soft);color:var(--brand)}
.kpi-ic svg{width:16px;height:16px}
.kpi-value{margin-top:8px;font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.delta{display:flex;align-items:center;gap:3px;margin-top:4px;font-size:12px;font-weight:600;white-space:nowrap;min-width:0}
.delta span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.delta svg{width:12px;height:12px}
.delta.up{color:var(--good)}
.delta.down{color:var(--bad)}
.delta.flat{color:var(--muted)}
.delta span{color:var(--muted);font-weight:500}

.grid-main{display:grid;grid-template-columns:1.7fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

/* Légende cliquable */
.legend{display:flex;gap:6px;flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;border:0;background:none;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .2s,opacity .2s}
.lg:hover{background:var(--bg)}
.lg i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.lg.off{opacity:.4}
.lg.off i{background:none;box-shadow:inset 0 0 0 2px var(--c)}
.year-nav{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:700}
.year-nav .icon-btn{width:28px;height:28px}

/* Graphique */
.chart{position:relative}
.chart > svg{display:block;width:100%;height:auto;overflow:visible}
.axis text{font:500 11px var(--font);fill:var(--faint)}
/* Redessin après redimensionnement : pas de nouvelle animation */
.chart svg.quiet .draw{animation:none;stroke-dashoffset:0}
.chart svg.quiet .area,.chart svg.quiet .bar-grow{animation:none}
.gridline{stroke:#EEF2F7;stroke-width:1}
.line-path{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.3s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.area{animation:fade 1s .3s both}
@keyframes fade{from{opacity:0}}
.crosshair{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s}
.hover-dot{opacity:0;transition:opacity .15s;stroke:#fff;stroke-width:2}
.chart.hovering .crosshair,.chart.hovering .hover-dot{opacity:1}
.tooltip{position:absolute;top:0;left:0;pointer-events:none;background:var(--ink);color:#fff;border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.55;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(15,23,42,.45);opacity:0;transform:translate(-50%,-110%);transition:opacity .15s;z-index:5}
.chart.hovering .tooltip{opacity:1}
.tooltip b{display:block;font-size:11px;color:var(--faint);font-weight:600}
.tooltip .row{display:flex;align-items:center;gap:6px}
.tooltip .row i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.tooltip .row em{font-style:normal;margin-left:auto;padding-left:16px;font-weight:700;font-variant-numeric:tabular-nums}
.chart-empty{position:absolute;inset:0 0 24px 30px;display:grid;place-content:center;text-align:center;gap:8px;font-size:13px;color:var(--muted);pointer-events:none}
.chart-empty .btn{pointer-events:auto;justify-self:center}

/* Objectif */
.goal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.ring{position:relative;width:170px;height:170px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.ring .bg{stroke:#EEF2F7}
.ring .fg{stroke:url(#goalGrad);transition:stroke-dashoffset 1.2s var(--ease)}
.ring .inner{position:absolute;inset:0;display:grid;place-content:center}
.ring .inner strong{font-size:30px;font-weight:800;letter-spacing:-.03em}
.ring .inner small{font-size:12px;color:var(--muted);font-weight:600}
.goal p{margin:0;font-size:13px;color:var(--muted)}
.goal p b{color:var(--ink)}
.goal-edit{display:flex;gap:8px;align-items:center;width:100%;max-width:260px}
.goal-edit .inp{padding:9px 12px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.badge.ok{background:var(--good-bg);color:var(--good)}
.badge.mid{background:var(--soft);color:var(--brand)}
.badge.low{background:var(--warn-bg);color:var(--warn)}

/* Donut */
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut-box{position:relative;width:140px;height:140px;flex:none}
.donut{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:14;cursor:pointer;transition:stroke-dasharray 1s var(--ease),stroke-width .2s}
.donut circle.slice:hover{stroke-width:17}
.donut-box .inner{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.donut-box .inner strong{font-size:16px;font-weight:800;letter-spacing:-.02em}
.donut-box .inner small{font-size:10px;color:var(--muted);font-weight:600}
.dlist{display:flex;flex-direction:column;gap:4px;flex:1;min-width:150px}
.dlist button{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:0 -8px;border:0;border-radius:8px;background:none;font-size:13px;color:var(--ink-2);cursor:pointer;text-align:left}
.dlist button:hover{background:var(--bg)}
.dlist i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.dlist em{font-style:normal;margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Barres horizontales */
.hbars{display:flex;flex-direction:column;gap:10px}
.hbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:13px;cursor:pointer;padding:4px 6px;margin:0 -6px;border-radius:8px;border:0;background:none;text-align:left;width:calc(100% + 12px)}
.hbar:hover{background:var(--bg)}
.hbar span{color:var(--ink-2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.hbar .track{grid-column:1/-1;height:8px;border-radius:0 4px 4px 0;background:#F1F5F9;overflow:hidden}
.hbar .fill{height:100%;width:0;border-radius:0 4px 4px 0;background:var(--s1);transition:width 1s var(--ease)}

/* Liste récente */
.recent{display:flex;flex-direction:column}
.rec{display:flex;align-items:center;gap:12px;padding:9px 8px;margin:0 -8px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;width:calc(100% + 16px);font-size:13px}
.rec:hover{background:var(--bg)}
.rec .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none}
.rec .ico svg{width:15px;height:15px}
.rec .ico.in{background:#DBEAFE;color:var(--brand)}
.rec .ico.out{background:#FEF3C7;color:var(--s3)}
.rec .txt{flex:1;min-width:0}
.rec .txt b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec .txt span{font-size:12px;color:var(--muted)}
.rec .amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rec .amt.out{color:var(--ink-2)}
.muted-empty{padding:18px 0;text-align:center;font-size:13px;color:var(--muted)}

/* ---------- Tableau ---------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:200px;max-width:360px}
.search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--faint)}
.search .inp{padding:10px 12px 10px 36px;background:#fff}
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:13px;font-weight:600;animation:rise .3s var(--ease)}
.filter-chip button{border:0;background:rgba(37,99,235,.12);color:var(--brand);width:20px;height:20px;border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0}
.filter-chip button svg{width:12px;height:12px}
.table-wrap{overflow-x:auto;margin:0 -18px;padding:0 18px}
.table{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.table th{text-align:left;font-weight:600;color:var(--muted);padding:0 10px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.table th button{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.table th button:hover{color:var(--ink)}
.table th button svg{width:12px;height:12px;opacity:.35;transition:transform .2s,opacity .2s}
.table th button.sorted svg{opacity:1;color:var(--brand)}
.table th button.sorted.asc svg{transform:rotate(180deg)}
.table td{padding:11px 10px;border-bottom:1px solid #F1F5F9;color:var(--ink-2);vertical-align:middle}
.table tbody tr{cursor:pointer;transition:background .15s}
.table tbody tr:hover{background:#F8FAFC}
.table tbody tr.new{animation:row-flash 1.6s var(--ease)}
@keyframes row-flash{0%{background:#DBEAFE}100%{background:transparent}}
.table .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);white-space:nowrap}
.table .acts{text-align:right;white-space:nowrap}
.table .acts .icon-btn{width:30px;height:30px}
.type-pill{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:12px}
.type-pill i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-weight:600;font-size:11px;border:0;cursor:pointer;transition:transform .2s var(--spring)}
.tag:hover{transform:scale(1.06)}
.tag.ok{background:var(--good-bg);color:#166534}
.tag.wait{background:var(--warn-bg);color:var(--warn)}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.table-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;font-size:13px;color:var(--muted)}
.table-foot b{color:var(--ink)}

/* ---------- Paramètres ---------- */
.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.settings .card{display:flex;flex-direction:column;gap:14px}
.settings .card h3{margin:0;font-size:15px}
.settings .card > p{margin:-8px 0 0;font-size:13px;color:var(--muted)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tags-edit{display:flex;flex-wrap:wrap;gap:8px}
.tag-edit{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:600;animation:pop .3s var(--spring)}
.tag-edit button{border:0;background:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--muted);padding:0}
.tag-edit button:hover{background:#FEE2E2;color:#B91C1C}
.tag-edit button svg{width:12px;height:12px}
.add-row{display:flex;gap:8px}
.add-row .inp{padding:9px 12px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.switch-row b{display:block;font-size:14px}
.switch-row span{font-size:12px;color:var(--muted)}
.switch{position:relative;width:44px;height:26px;flex:none}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:999px;background:#CBD5E1;transition:background .25s}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .3s var(--spring)}
.switch input:checked + i{background:var(--brand)}
.switch input:checked + i::after{transform:translateX(18px)}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled + i{opacity:.5}
.switch input:focus-visible + i{box-shadow:0 0 0 3px var(--bar1)}
.confirm{padding:12px 14px;border-radius:12px;background:#FEF2F2;color:#991B1B;font-size:13px;display:flex;flex-direction:column;gap:10px;animation:rise .3s var(--ease)}
.confirm .acts{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Fenêtre modale ---------- */
.modal-back{position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.modal-back.on{opacity:1;visibility:visible}
.modal{width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow-y:auto;background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);padding:24px;transform:translateY(20px) scale(.97);transition:transform .4s var(--spring)}
.modal-back.on .modal{transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-head h3{margin:0;font-size:19px;letter-spacing:-.02em}
.modal .grid{display:grid;gap:14px}
.modal .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.type-toggle{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);position:relative}
.type-toggle button{position:relative;z-index:1;border:0;background:none;padding:10px;border-radius:9px;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;transition:color .25s}
.type-toggle button.on{color:#fff}
.type-toggle .pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px;background:var(--brand);transition:transform .35s var(--ease),background .35s}
.type-toggle.dep .pill{transform:translateX(100%);background:var(--s3)}
.modal-foot{display:flex;align-items:center;gap:10px;margin-top:22px}
.modal-foot .spacer{flex:1}
.amount-inp{font-size:22px!important;font-weight:800!important;letter-spacing:-.02em}

/* ---------- Écran « dashboard prêt » ---------- */
.welcome{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;background:radial-gradient(ellipse at 50% 40%,#fff 0%,var(--bg) 70%);transition:opacity .6s var(--ease),transform .7s var(--ease),visibility .6s}
.welcome.out{opacity:0;transform:scale(1.06);visibility:hidden}
.welcome .md-logo{font-size:30px;margin-bottom:10px}
.welcome .check{width:84px;height:84px;border-radius:50%;background:var(--good-bg);color:var(--good);display:grid;place-items:center;animation:pop .6s var(--spring) .3s both;box-shadow:0 0 0 0 rgba(21,128,61,.3);animation-name:pop,ring-pulse;animation-duration:.6s,2s;animation-delay:.3s,1s;animation-iteration-count:1,infinite}
@keyframes ring-pulse{0%{box-shadow:0 0 0 0 rgba(21,128,61,.3)}70%{box-shadow:0 0 0 18px rgba(21,128,61,0)}100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}}
.welcome .check svg{width:40px;height:40px}
.welcome h1{margin:0;font-size:clamp(28px,4.5vw,44px);letter-spacing:-.035em;line-height:1.1}
.welcome .grad{background:linear-gradient(100deg,var(--bar3),var(--brand) 50%,#60A5FA);-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome p{margin:0;color:var(--muted);font-size:16px;max-width:46ch}
.welcome .pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.welcome .pills span{padding:6px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:600;color:var(--ink-2)}

/* Apparition du dashboard */
.app.enter .side{animation:side-in .8s var(--ease) both}
.app.enter .top{animation:rise .7s var(--ease) .15s both}
.app.enter .view > *{animation:rise .8s var(--ease) both;animation-delay:calc(.25s + var(--n,0) * .08s)}
@keyframes side-in{from{transform:translateX(-100%)}}

/* ---------- Responsive ---------- */
@media (max-width:1180px){.grid-3{grid-template-columns:1fr 1fr}.grid-3 > :last-child{grid-column:1/-1}}
@media (max-width:980px){
  .grid-main{grid-template-columns:1fr}
  .settings{grid-template-columns:1fr}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:260px;transform:translateX(-100%);transition:transform .35s var(--ease)}
  .side.open{transform:none;box-shadow:20px 0 60px rgba(15,23,42,.3)}
  .scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(15,23,42,.4);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .scrim.on{opacity:1;visibility:visible}
  .burger{display:inline-grid}
  .app.enter .side{animation:none}
}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr}
  .top-right{width:100%;justify-content:flex-end;row-gap:12px}
  /* Téléphone : actions sur la 1re ligne, choix de la période en dessous sur toute la largeur */
  #uploadBtn{margin-right:auto}
  #period{order:10;flex:1 0 100%;display:flex}
  #period button{flex:1}
  .kpi-value{font-size:22px}
  .f2,.modal .f2{grid-template-columns:1fr}
  .seg button{padding:7px 9px}
}

/* =====================================================================
   WIDGETS (vue d'ensemble modulable)
   ===================================================================== */
.view-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.edit-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--radius);background:var(--soft);box-shadow:inset 0 0 0 1px rgba(59,130,246,.25);color:var(--bar3);font-size:14px;font-weight:500;animation:rise .35s var(--ease)}
.edit-bar b{font-weight:700}
.wgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:stretch}
.w{grid-column:span var(--span,4);display:flex;flex-direction:column;min-width:0;position:relative;transition:box-shadow .25s,opacity .25s}
.w-head{display:flex;align-items:flex-start;gap:4px;margin-bottom:12px;min-height:30px}
/* Poignée centrée en haut de la carte + bande de saisie sur toute la largeur du haut */
.w-drag-zone{position:absolute;left:0;right:0;top:0;height:16px;cursor:grab;touch-action:none;z-index:1;border-radius:var(--radius) var(--radius) 0 0}
.w-grip{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:40px;height:14px;padding:0;border:0;background:none;color:var(--faint);cursor:grab;border-radius:7px;display:grid;place-items:center;opacity:0;transition:opacity .2s,background .2s,color .2s;touch-action:none;z-index:2}
.w-grip svg{width:22px;height:11px}
.w-drag-zone:hover + .w-head .w-grip,.w-grip:hover{background:var(--soft);color:var(--brand)}
/* Bouton d'options visible au survol (toujours visible sur écran tactile) */
.w-tools [data-wmenu]{opacity:0;transition:opacity .2s}
.w:hover .w-tools [data-wmenu],.w-tools [data-wmenu]:focus-visible,.wgrid.editing .w-tools [data-wmenu]{opacity:1}
@media (hover:none){.w-tools [data-wmenu]{opacity:1}}
.w-kpi .card-title{font-size:13px;font-weight:600;color:var(--muted)}
.w-kpi[data-span="2"] .w-tools .kpi-ic{display:none}
/* Indicateurs étroits : les outils flottent par-dessus la fin du titre, qui garde toute la largeur */
.w-kpi[data-span="2"] .w-tools{position:absolute;right:8px;top:14px;margin:0;padding-left:14px}
.w-kpi[data-span="2"]:hover .w-tools,.wgrid.editing .w-kpi[data-span="2"] .w-tools{background:linear-gradient(90deg,rgba(255,255,255,0),#fff 35%)}
.w:hover .w-grip,.w-grip:focus-visible,.wgrid.editing .w-grip{opacity:1}
.w-titles{flex:1;min-width:0}
.w-titles .card-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-tools{display:flex;align-items:center;gap:2px;margin:-3px -8px 0 0;flex:none}
.w-tools .icon-btn{width:30px;height:30px}
.w-remove{display:none!important}
.wgrid.editing .w-remove{display:inline-grid!important}
.w-body{flex:1;min-width:0;display:flex;flex-direction:column}
.w-resize{position:absolute;right:3px;bottom:3px;width:20px;height:20px;cursor:ew-resize;opacity:0;transition:opacity .2s;touch-action:none;border-radius:6px;z-index:2}
.w-resize::before{content:"";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);border-radius:0 0 3px 0;transition:border-color .2s}
.w:hover .w-resize,.wgrid.editing .w-resize{opacity:1}
.w-resize:hover::before{border-color:var(--brand)}
.w.resizing{box-shadow:inset 0 0 0 2px var(--bar2)}
.w-size-badge{position:absolute;right:28px;bottom:8px;padding:3px 9px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;pointer-events:none;animation:pop .2s var(--spring);z-index:3}
.wgrid.editing .w{box-shadow:inset 0 0 0 1.5px var(--bar1)}
.w-placeholder{background:repeating-linear-gradient(135deg,rgba(59,130,246,.07) 0 10px,transparent 10px 20px)!important;box-shadow:inset 0 0 0 2px var(--bar1)!important}
.w-placeholder > *{visibility:hidden}
.w-ghost{box-shadow:0 30px 60px -20px rgba(15,23,42,.35),inset 0 0 0 1px var(--line)!important;transition:scale .25s var(--spring),rotate .25s var(--spring);cursor:grabbing}
.w-ghost.lift{scale:1.03;rotate:.6deg}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none}
body.resizing-x,body.resizing-x *{cursor:ew-resize!important;user-select:none}
.w-add{grid-column:span 4;min-height:140px;border:2px dashed var(--bar1);border-radius:var(--radius);background:rgba(239,246,255,.6);display:grid;place-content:center;justify-items:center;gap:8px;color:var(--brand);font:700 14px var(--font);cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.w-add:hover{background:var(--soft);transform:translateY(-2px)}
.w-add svg{width:26px;height:26px}
.w.added{animation:w-pop .55s var(--spring)}
@keyframes w-pop{from{opacity:0;transform:scale(.9)}}
.w.leaving{animation:w-out .28s var(--ease) forwards}
@keyframes w-out{to{opacity:0;transform:scale(.92)}}

/* KPI en widget */
.kpi-body{display:block;width:100%;border:0;background:none;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit;margin-top:-4px}
.kpi-body:focus-visible{outline:3px solid var(--bar1);outline-offset:4px;border-radius:8px}
.w-kpi .w-head{margin-bottom:6px}
.w-kpi .kpi-ic{margin-top:-2px}
.w-kpi:hover{box-shadow:inset 0 0 0 1px var(--bar1),var(--shadow-sm)}
.spark{display:block;width:100%;height:42px;margin-top:10px;overflow:visible}
/* Seules les lignes sont sans remplissage : le fond dégradé (.ar) et les barres (.sb) restent visibles */
.spark .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark .ar{animation:fade .9s var(--ease) .15s both}
.spark .sb{transform-box:fill-box;transform-origin:bottom;animation:bar-grow .7s var(--ease) both}
.spark{cursor:crosshair}

/* Menu d'un widget */
.wmenu{position:fixed;z-index:120;width:260px;padding:14px;border-radius:16px;background:#fff;box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);animation:menu-in .2s var(--ease)}
.wmenu h4{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wmenu .sizes{display:flex;gap:4px;margin-bottom:14px}
.wmenu .sizes button{flex:1;padding:8px 0;border:0;border-radius:9px;background:var(--bg);font-size:12px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.wmenu .sizes button:hover{background:var(--soft);color:var(--brand)}
.wmenu .sizes button.on{background:var(--brand);color:#fff}
.wmenu .choice{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 10px;border:0;border-radius:9px;background:none;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;text-align:left}
.wmenu .choice:hover{background:var(--bg)}
.wmenu .choice.on{color:var(--brand);font-weight:700}
.wmenu .choice svg{width:16px;height:16px}
.wmenu .sep{height:1px;background:var(--line);margin:10px 0}
.wmenu .danger{color:#B91C1C}

/* Tiroir « ajouter un widget » */
.drawer-back{position:fixed;inset:0;z-index:110;background:rgba(15,23,42,.35);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.drawer-back.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:111;width:min(400px,100vw);background:#fff;box-shadow:-20px 0 60px rgba(15,23,42,.2);transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer-head h3{margin:0;font-size:18px}
.drawer-body{flex:1;overflow-y:auto;padding:14px 16px 24px;display:flex;flex-direction:column;gap:8px}
.wl{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,background .2s}
.wl:hover{box-shadow:inset 0 0 0 1px var(--bar1);background:#FBFDFF}
.wl .kpi-ic{flex:none;width:38px;height:38px;border-radius:11px}
.wl .kpi-ic svg{width:18px;height:18px}
.wl .txt{flex:1;min-width:0}
.wl b{display:block;font-size:14px}
.wl span{font-size:12px;color:var(--muted)}
.wl .btn{flex:none}
.wl.is-on .btn{background:var(--good-bg);color:var(--good);box-shadow:none}
.drawer-group{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 4px 2px}

/* Grilles de pages */
.grid-2{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:12px}
.kpi-row{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:12px}
.kpi-row .card{padding:16px 18px}
.notice{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 18px;border-radius:var(--radius);background:var(--soft);color:var(--bar3);font-size:14px}

/* ---------- Stocks ---------- */
.stock-cell{display:flex;align-items:center;gap:6px}
.qty-btn{width:26px;height:26px;border-radius:8px;border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font:700 15px/1 var(--font);cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s,transform .15s var(--spring)}
.qty-btn:hover{background:var(--soft);color:var(--brand)}
.qty-btn:active{transform:scale(.88)}
.qty{min-width:34px;text-align:center;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;display:inline-block}
.qty.bump{animation:bump .35s var(--spring)}
@keyframes bump{40%{transform:scale(1.35)}}
.level{width:64px;height:6px;border-radius:3px;background:#F1F5F9;overflow:hidden;margin-left:6px}
.level i{display:block;height:100%;border-radius:3px;transition:width .45s var(--ease),background .3s}
.badge.out{background:#FEE2E2;color:#B91C1C}
.nav-btn .count.warn{background:rgba(217,119,6,.28);color:#FCD34D}
.alert-list{display:flex;flex-direction:column;gap:2px}
.alert-row{display:flex;align-items:center;gap:10px;padding:8px;margin:0 -8px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;font-size:13px;width:calc(100% + 16px)}
.alert-row:hover{background:var(--bg)}
.alert-row .txt{flex:1;min-width:0}
.alert-row b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alert-row span{font-size:12px;color:var(--muted)}

/* Encaissements */
.cash-split{display:flex;height:12px;border-radius:6px;overflow:hidden;background:#F1F5F9;gap:2px}
.cash-split i{display:block;height:100%;transition:width .9s var(--ease)}
.cash-legend{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font-size:13px}
.cash-legend b{display:block;font-size:17px;letter-spacing:-.02em}
.cash-legend span{color:var(--muted);font-size:12px;display:inline-flex;align-items:center;gap:6px}
.cash-legend span i{width:9px;height:9px;border-radius:3px;background:var(--c)}

/* Mode personnalisation : hors de ce mode, ni poignée, ni bande de saisie, ni coin de redimensionnement */
.wgrid:not(.editing) .w-grip,.wgrid:not(.editing) .w-drag-zone,.wgrid:not(.editing) .w-resize{display:none}
/* En mode personnalisation, toute la carte se saisit par appui prolongé ; son contenu n'est plus cliquable */
.wgrid.editing .w{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.wgrid.editing .w-body{pointer-events:none}
.wgrid.editing .w-head button,.wgrid.editing .w-head select{cursor:pointer}
.wgrid.editing .w:hover{box-shadow:inset 0 0 0 2px var(--bar2),0 10px 24px -14px rgba(37,99,235,.45)}/* Appui prolongé : la carte s'enfonce légèrement, une barre se remplit */
.w.w-press{transform:scale(.985);transition:transform .38s var(--ease)}
.w.w-press::after{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--brand);transform-origin:left;animation:press .38s linear forwards}
@keyframes press{from{transform:scaleX(0)}}
body.grips .w-grip{opacity:1}

/* Tableau compact des widgets (« Dernières commandes ») */
.table.mini{min-width:0}
.table.mini td,.table.mini th{padding-left:0;padding-right:10px}
.table.mini td:last-child,.table.mini th:last-child{padding-right:0}
.table.mini th{padding-bottom:8px}
.table.mini td{padding-top:10px;padding-bottom:10px}
.link-mini{border:0;background:none;padding:0;margin-top:6px;color:var(--brand);font:600 13px var(--font);cursor:pointer}
.link-mini:hover{text-decoration:underline}
.lg i.legend-dash{width:14px;height:0;border-top:2px dashed var(--c);border-radius:0;background:none}

/* Préférences d'affichage */
body.compact .card{padding:14px}
body.compact .view{gap:12px}
body.compact .wgrid,body.compact .kpi-row,body.compact .grid-2{gap:10px}
body.compact .kpi-value{font-size:22px}
body.compact .w-head{margin-bottom:8px}
body.compact .w-grip{top:1px}
body.no-anim *,body.no-anim *::before,body.no-anim *::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
/* Mode discret : montants floutés, visibles au survol */
body.privacy .kpi-value,body.privacy .num,body.privacy .amt,body.privacy .hbar em,body.privacy .dlist em,body.privacy .donut-box strong,body.privacy .cash-legend b,body.privacy .goal p b,body.privacy .table-foot b,body.privacy .axis text{filter:blur(7px);transition:filter .25s}
body.privacy .card:hover .kpi-value,body.privacy tr:hover .num,body.privacy .rec:hover .amt,body.privacy .hbar:hover em{filter:none}
.privacy-btn.on{background:var(--soft);color:var(--brand)}
.privacy-btn.flip svg{animation:eye-flip .35s var(--spring)}
.privacy-btn .slash{stroke-dasharray:32;stroke-dashoffset:32;animation:slash-draw .35s var(--ease) .1s forwards}
@keyframes eye-flip{0%{transform:scaleY(1)}40%{transform:scaleY(.1)}100%{transform:scaleY(1)}}
@keyframes slash-draw{to{stroke-dashoffset:0}}

/* =====================================================================
   PARAMÈTRES (onglets)
   ===================================================================== */
.set-wrap{display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;align-items:start}
.set-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.set-nav button{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;line-height:1.3;border:0;border-radius:10px;background:none;font:500 14px var(--font);color:var(--ink-2);cursor:pointer;text-align:left;transition:color .2s}
.set-nav button svg{width:17px;height:17px;flex:none;color:var(--muted);transition:color .2s}
.set-nav button:hover{color:var(--ink)}
.set-nav button.on{color:var(--brand);font-weight:600}
.set-nav button.on svg{color:var(--brand)}
.set-nav button:focus-visible{outline:2px solid var(--bar1);outline-offset:-2px}
.set-nav .pill{position:absolute;z-index:0;left:8px;right:8px;top:0;height:40px;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px rgba(59,130,246,.2);transition:transform .38s var(--ease),height .3s var(--ease)}
.set-nav .sep{height:1px;background:var(--line);margin:6px 6px}
.set-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.set-panel.enter{animation:rise .45s var(--ease)}
/* Changement d'onglet orienté : vers le bas du menu → le contenu monte ; vers le haut → il descend */
.set-panel.leave-up{animation:dir-out-up .17s var(--ease) forwards}
.set-panel.leave-down{animation:dir-out-down .17s var(--ease) forwards}
.set-panel.enter-up{animation:dir-in-up .45s var(--ease) both}
.set-panel.enter-down{animation:dir-in-down .45s var(--ease) both}
@keyframes dir-out-up{to{opacity:0;transform:translateY(-18px)}}
@keyframes dir-out-down{to{opacity:0;transform:translateY(18px)}}
@keyframes dir-in-up{from{opacity:0;transform:translateY(30px)}}
@keyframes dir-in-down{from{opacity:0;transform:translateY(-30px)}}
.view.from-below{animation:dir-in-up .5s var(--ease) both}
.view.from-above{animation:dir-in-down .5s var(--ease) both}
/* Menu principal : indicateur qui glisse d'une rubrique à l'autre */
@media (min-width:901px){.side{position:relative}} /* sur mobile, le menu est déjà « fixed » */
.nav-ind{position:absolute;z-index:0;left:14px;right:14px;top:0;height:40px;border-radius:10px;background:rgba(59,130,246,.18);pointer-events:none;opacity:0;transition:transform .45s var(--ease),height .3s var(--ease),opacity .2s}
.nav-ind::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--bar2)}
.nav-ind.still{transition:none}
.nav-btn{z-index:1}
.side.has-ind .nav-btn.active{background:transparent}
.side.has-ind .nav-btn.active::before{display:none}
.set-title h2{margin:0;font-size:22px;letter-spacing:-.02em}
.set-title p{margin:4px 0 0;color:var(--muted);font-size:14px}
/* Vraie bordure (et non une ombre intérieure) : elle reste visible au-dessus des pieds de carte colorés */
.set-card{background:#fff;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden}
.set-card-head{padding:18px 20px 6px}
.set-card-head h3{margin:0;font-size:15px;letter-spacing:-.01em}
.set-card-head p{margin:3px 0 0;font-size:13px;color:var(--muted)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px;border-top:1px solid #F1F5F9}
.set-card-head + .set-row{border-top:0}
.set-row .lbl{min-width:0;flex:1}
.set-row .lbl b{display:block;font-size:14px;font-weight:600}
.set-row .lbl span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.set-row .ctl{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;max-width:62%;flex-wrap:wrap}
.set-row .ctl .inp{width:280px;max-width:100%;padding:9px 12px}
.set-row .ctl .inp.sm{width:130px}
.set-row .ctl .readonly{font-size:14px;color:var(--ink-2)}
.set-body{padding:6px 20px 20px;display:flex;flex-direction:column;gap:12px}
.set-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 20px;background:var(--bg);border-top:1px solid var(--line)}
.set-foot .hint{margin-right:auto;font-size:12.5px;color:var(--muted)}
.set-danger{border-color:#FECACA}
.set-danger .set-card-head h3{color:#B91C1C}
.set-err{font-size:12.5px;font-weight:500;color:var(--bad)}
.proto-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#FFFBEB;color:#92400E;font-size:13px;line-height:1.5;box-shadow:inset 0 0 0 1px #FDE68A}
.proto-note svg{width:17px;height:17px;flex:none;margin-top:1px}
.profile-head{display:flex;align-items:center;gap:16px;padding:20px;flex-wrap:wrap}
.big-av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;flex:none;box-shadow:0 8px 20px -8px rgba(30,58,138,.5);transition:background .3s}
.profile-head .who{flex:1;min-width:160px}
.profile-head .who b{display:block;font-size:17px}
.profile-head .who span{font-size:13px;color:var(--muted)}
/* Photo de profil */
.avatar.has-photo{padding:0;overflow:hidden;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.avatar img,.big-av img,.lrow .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.big-av{position:relative;cursor:pointer;overflow:hidden}
.big-av.has-photo{background:#fff!important}
.big-av .av-edit{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,23,42,.5);color:#fff;opacity:0;transition:opacity .2s}
.big-av .av-edit svg{width:22px;height:22px}
.big-av:hover .av-edit,.big-av.over .av-edit{opacity:1}
.big-av.over{box-shadow:0 0 0 3px var(--bar2)}
.lrow .av{overflow:hidden}
.photo-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.color-dots{display:flex;gap:8px}
.color-dots button{width:26px;height:26px;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:0 0 0 2px #fff,0 0 0 3px transparent;transition:box-shadow .2s,transform .2s var(--spring)}
.color-dots button:hover{transform:scale(1.12)}
.color-dots button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.key-box{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 14px;border-radius:12px;background:var(--ink);color:#E2E8F0;font:500 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.key-box code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.key-box .icon-btn{color:#94A3B8;width:32px;height:32px}
.key-box .icon-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;padding:6px 20px 20px}
.int{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,transform .25s var(--ease)}
.int:hover{box-shadow:inset 0 0 0 1px var(--bar1),var(--shadow-sm);transform:translateY(-2px)}
.int-top{display:flex;align-items:center;gap:10px}
.int-logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;background:var(--c);flex:none}
.int b{font-size:14px;display:block}
.int small{font-size:11.5px;color:var(--muted)}
.int p{margin:0;font-size:12.5px;color:var(--muted);flex:1;line-height:1.45}
.int .btn{align-self:flex-start}
.lrow{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid #F1F5F9;animation:rise .35s var(--ease)}
.lrow .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none}
.lrow .txt{flex:1;min-width:0}
.lrow .txt b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .txt span{font-size:12px;color:var(--muted)}
.lrow select.inp{width:auto;padding:7px 34px 7px 10px;font-size:13px}
.lrow .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.mini-tag{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font:600 11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink-2)}
.invite{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid #F1F5F9;background:var(--bg)}
.invite .inp{flex:1;min-width:200px;padding:9px 12px;background:#fff}
.invite select.inp{flex:none;width:auto;min-width:0}
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:6px 20px 20px}
.role-card{padding:14px;border-radius:12px;background:var(--bg)}
.role-card b{display:block;font-size:14px;margin-bottom:4px}
.role-card span{font-size:12.5px;color:var(--muted);line-height:1.45}
.usage{display:flex;flex-direction:column;gap:16px;padding:6px 20px 20px}
.usage-row .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.usage-row .top b{font-weight:600}
.usage-row .top span{color:var(--muted)}
.usage-row .bar{height:8px;border-radius:4px;background:#F1F5F9;overflow:hidden}
.usage-row .bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--bar1),var(--brand));transition:width .9s var(--ease)}
.plan{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 20px 0;padding:18px;border-radius:14px;color:#fff;background:linear-gradient(120deg,#0F172A,#1E3A8A 70%,#2563EB)}
.plan b{display:block;font-size:18px;letter-spacing:-.02em}
.plan span{font-size:13px;color:#BFDBFE}
.plan .btn{background:#fff;color:var(--ink)}
.visits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.visits-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted);text-transform:capitalize}
.visits-grid .inp{padding:8px 10px}
.drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px;border:2px dashed var(--bar1);border-radius:14px;background:rgba(239,246,255,.5);text-align:center;font-size:13px;color:var(--muted);cursor:pointer;transition:background .2s,border-color .2s}
.drop:hover,.drop.over{background:var(--soft);border-color:var(--brand)}
.drop b{color:var(--brand);font-size:14px}
.drop svg{width:26px;height:26px;color:var(--brand)}
.check-row{display:flex;flex-wrap:wrap;gap:8px}
.set-card .tags-edit,.set-card .add-row{padding:0 20px}
.set-card .add-row{padding-bottom:20px;margin-top:12px}
.pw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:6px 20px 16px}
@media (max-width:980px){
  .set-wrap{grid-template-columns:1fr;gap:14px}
  .set-nav{position:static;flex-direction:row;overflow-x:auto;gap:4px;padding:6px;scrollbar-width:none}
  .set-nav button{white-space:nowrap;flex:none}
  .set-nav button.on{background:var(--soft)}
  .set-nav .pill,.set-nav .sep{display:none}
  .pw-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .set-row{flex-direction:column;align-items:stretch;gap:10px}
  .set-row .ctl{max-width:none;justify-content:flex-start}
  .set-row .ctl .inp{width:100%}
}

/* =====================================================================
   IMPORT DE FICHIER (fenêtre centrée, fond flouté)
   ===================================================================== */
.imp-back{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(15,23,42,.38);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.imp-back.on{opacity:1;visibility:visible}
.imp{position:relative;width:100%;max-width:640px;max-height:calc(100dvh - 32px);overflow-y:auto;background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);transform:translateY(18px) scale(.97);transition:transform .45s var(--spring),max-width .45s var(--ease)}
.imp-back.on .imp{transform:none}
/* Fenêtres : défilement conservé, barre de défilement masquée */
.imp,.modal{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.imp::-webkit-scrollbar,.modal::-webkit-scrollbar{display:none;width:0;height:0}
.imp:has(.imp-body.result){max-width:900px}
.imp-close{position:absolute;right:12px;top:12px;z-index:2}
.imp-body{padding:28px}
.imp-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;padding-right:30px}
.imp-head h3{margin:0;font-size:20px;letter-spacing:-.02em}
.imp-head p{margin:4px 0 0;color:var(--muted);font-size:14px}
.imp-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--soft);color:var(--brand);flex:none}
.imp-ic svg{width:22px;height:22px}
.imp-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 20px;border:2px dashed var(--bar1);border-radius:18px;background:linear-gradient(180deg,rgba(239,246,255,.7),rgba(239,246,255,.25));text-align:center;cursor:pointer;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.imp-drop:hover,.imp-drop.over{background:var(--soft);border-color:var(--brand);transform:scale(1.01)}
.imp-drop.over .imp-drop-ic{transform:translateY(-4px)}
.imp-drop-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#fff;color:var(--brand);box-shadow:var(--shadow-sm);margin-bottom:6px;transition:transform .3s var(--spring)}
.imp-drop-ic svg{width:26px;height:26px}
.imp-drop b{font-size:16px}
.imp-drop span{font-size:14px;color:var(--ink-2)}
.imp-drop u{color:var(--brand);text-decoration:none;font-weight:600}
.imp-drop small{font-size:12px;color:var(--muted)}
.imp-tips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.imp-tips div{padding:12px 14px;border-radius:12px;background:var(--bg);font-size:12.5px;line-height:1.5}
.imp-tips b{display:block;font-size:13px;margin-bottom:2px}
.imp-tips span{color:var(--muted)}
.imp-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.imp-foot .spacer{flex:1}
/* Analyse en cours */
.imp-run{text-align:center}
.imp-logo{display:flex;justify-content:center;margin:6px 0 18px}
.imp-logo .md-logo{font-size:40px}
.imp-run h3{margin:0;font-size:18px;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-now{margin:4px 0 14px;color:var(--brand);font-weight:600;font-size:14px;min-height:1.4em}
.imp-progress{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin:0 auto 20px;max-width:360px}
.imp-progress i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--bar1),var(--brand));transition:width .5s var(--ease)}
.imp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.imp-steps li{display:flex;align-items:flex-start;gap:12px;padding:9px 12px;border-radius:12px;opacity:.45;transition:opacity .3s,background .3s}
.imp-steps li.run{opacity:1;background:var(--soft)}
.imp-steps li.done,.imp-steps li.fail{opacity:1}
.imp-steps li b{display:block;font-size:14px;font-weight:600}
.imp-steps li small{display:block;font-size:12.5px;color:var(--muted);min-height:0}
.imp-steps li.fail small{color:var(--bad)}
.st-ic{position:relative;flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line)}
.imp-steps li.run .st-ic{box-shadow:inset 0 0 0 2px rgba(37,99,235,.2)}
.imp-steps li.run .st-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--brand);animation:spin .7s linear infinite}
.imp-steps li.done .st-ic{background:var(--good);box-shadow:none;animation:pop .35s var(--spring)}
.imp-steps li.done .st-ic::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.imp-steps li.fail .st-ic{background:var(--bad);box-shadow:none;animation:pop .35s var(--spring)}
.imp-steps li.fail .st-ic::before,.imp-steps li.fail .st-ic::after{content:"";position:absolute;left:10px;top:5px;width:2px;height:12px;background:#fff;border-radius:1px;transform:rotate(45deg)}
.imp-steps li.fail .st-ic::after{transform:rotate(-45deg)}
@keyframes spin{to{transform:rotate(360deg)}}
/* Résultat */
.imp-result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px}
.imp-result h3{margin:10px 0 0;font-size:22px;letter-spacing:-.02em}
.imp-result p{margin:0;color:var(--muted);font-size:14px}
.imp-result .note{margin-top:10px;width:100%}
.imp-result .imp-tips{grid-template-columns:1fr;width:100%}
.imp-badge{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;animation:pop .55s var(--spring)}
.imp-badge svg{width:32px;height:32px}
.imp-badge.ok{background:var(--good-bg);color:var(--good);box-shadow:0 0 0 0 rgba(21,128,61,.3);animation:pop .55s var(--spring),ring-pulse 2s 1s infinite}
.imp-badge.ko{background:#FEE2E2;color:var(--bad)}
.imp-badge.ok svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:check-draw .5s var(--ease) .25s forwards}
@keyframes check-draw{to{stroke-dashoffset:0}}
.imp-sum{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:10px;margin-bottom:14px}
.imp-kpi{padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.imp-kpi small{display:block;font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.imp-kpi b{display:block;margin-top:4px;font-size:17px;line-height:1.25;letter-spacing:-.02em}
.imp-kpi span{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--muted)}
.imp-kpi .inp{margin:4px 0 2px;padding:7px 10px;font-weight:700}
.imp-kpi.wide{background:var(--soft);box-shadow:inset 0 0 0 1px rgba(59,130,246,.25)}
.imp-sec{border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);padding:0 14px;margin-bottom:12px}
.imp-sec summary{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-weight:700;font-size:14px;cursor:pointer;list-style:none}
.imp-sec summary::-webkit-details-marker{display:none}
.imp-sec summary span{font-weight:600;font-size:12px;color:var(--muted)}
.imp-sec[open] summary{border-bottom:1px solid #F1F5F9;margin-bottom:6px}
.imp-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;padding-bottom:12px}
.imp-col{display:grid;grid-template-columns:minmax(0,1fr) 148px;grid-template-rows:auto auto;gap:4px 10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--bg)}
.imp-col.off{opacity:.65}
.imp-col .c-name b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-col .c-name span{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-col select.inp{padding:6px 30px 6px 9px;font-size:12.5px;background-color:#fff;background-position:right 8px center;background-size:15px}
.imp-col .c-conf{grid-column:1;height:4px;border-radius:2px;background:#E2E8F0;overflow:hidden}
.imp-col .c-conf i{display:block;height:100%;background:var(--good);border-radius:2px}
.imp-col em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}
.imp-table td{font-size:12.5px}
.imp-table td:first-child,.imp-table td:nth-child(2),.imp-table .tag{white-space:nowrap}
.imp-warn{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;background:#FFFBEB;box-shadow:inset 0 0 0 1px #FDE68A;color:#92400E;font-size:13px;margin-bottom:12px}
.imp-warn div{display:flex;gap:8px;align-items:flex-start}
.imp-warn svg{width:15px;height:15px;flex:none;margin-top:2px}
/* Puces des fichiers d'un lot */
.imp-files{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 16px}
.imp-files.done{justify-content:flex-start;margin-bottom:12px}
.imp-file{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:6px 12px 6px 8px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .3s}
.imp-file i{position:relative;flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line)}
.imp-file.run{color:var(--brand);background:var(--soft);box-shadow:inset 0 0 0 1px rgba(59,130,246,.3)}
.imp-file.run i::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--brand);animation:spin .7s linear infinite}
.imp-file.ok{color:var(--ink-2)}
.imp-file.ok i{background:var(--good);box-shadow:none;animation:pop .3s var(--spring)}
.imp-file.ok i::after{content:"";position:absolute;left:5px;top:2.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.imp-file.fail{color:var(--bad);background:#FEF2F2;box-shadow:inset 0 0 0 1px #FECACA}
.imp-file.fail i{background:var(--bad);box-shadow:none}
.imp-file.fail i::before,.imp-file.fail i::after{content:"";position:absolute;left:7px;top:3.5px;width:2px;height:9px;background:#fff;border-radius:1px;transform:rotate(45deg)}
.imp-file.fail i::after{transform:rotate(-45deg)}
.imp-warn.err{background:#FEF2F2;box-shadow:inset 0 0 0 1px #FECACA;color:#B91C1C;text-align:left;width:100%}
.imp-warn b{font-weight:700}
.imp-opts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.demo-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#FEF3C7;color:#92400E;font-size:12px;font-weight:700;letter-spacing:.02em}
@media (max-width:760px){.imp-sum{grid-template-columns:1fr 1fr}.imp-kpi.wide{grid-column:1/-1}.imp-tips{grid-template-columns:1fr}.imp-body{padding:22px 18px}}

.note{padding:12px 14px;border-radius:12px;background:var(--soft);color:var(--bar3);font-size:13.5px;line-height:1.5;text-align:left}
.note.err{background:#FEF2F2;color:#B91C1C;box-shadow:inset 0 0 0 1px #FECACA}

/* Infobulle aux couleurs du site (anneaux) */
.md-tip{position:fixed;z-index:200;pointer-events:none;background:var(--ink);color:#fff;border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.5;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(15,23,42,.45);opacity:0;transform:translate(-50%,calc(-100% - 12px)) scale(.96);transition:opacity .15s,transform .15s}
.md-tip.on{opacity:1;transform:translate(-50%,calc(-100% - 12px))}
.md-tip b{display:flex;align-items:center;gap:6px;font-size:12.5px}
.md-tip b i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.md-tip .row{display:flex;gap:16px;justify-content:space-between;color:#CBD5E1}
.md-tip .row em{font-style:normal;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.donut-wrap.hl .donut .slice{opacity:.35;transition:opacity .2s,stroke-width .2s}
.donut-wrap.hl .donut .slice.on{opacity:1;stroke-width:17}
.donut-wrap.hl .dlist button{opacity:.5}
.donut-wrap.hl .dlist button.on{opacity:1;background:var(--bg)}
.donut .slice{transition:stroke-dasharray 1s var(--ease),stroke-width .2s,opacity .2s}

/* =====================================================================
   ENTONNOIR DE FIDÉLITÉ — colonnes reliées par des flux
   ===================================================================== */
.fnl2{display:flex;flex-direction:column;gap:16px}
.fnl-chart{position:relative;height:276px;padding-top:36px}
.fnl-flows{position:absolute;left:0;right:0;top:36px;height:190px;width:100%;overflow:visible;pointer-events:none}
.fnl-flows .fl{animation:fade .8s var(--ease) both}
.fnl-flows .fl-edge{stroke:#93C5FD;stroke-width:1.5;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;animation:fade .8s var(--ease) both}
.fnl-cols{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));height:100%}
.fnl-col{display:flex;flex-direction:column;align-items:center;min-width:0;cursor:default}
.fnl-track{position:relative;width:48%;height:190px;display:flex;align-items:flex-end}
.fnl-bar{position:relative;width:100%;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));box-shadow:0 10px 24px -12px var(--c);
  transform-origin:bottom;animation:fnl-grow .8s var(--spring) both;animation-delay:calc(.05s + var(--d) * .1s);transition:filter .2s,transform .25s var(--spring)}
.fnl-bar span{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fnl-bar.empty{height:4px!important;background:none;box-shadow:none;border:1.5px dashed var(--line);border-radius:4px}
.fnl-bar.empty span{color:var(--faint)}
.fnl-col:hover .fnl-bar{filter:brightness(1.08) saturate(1.1);transform:scaleX(1.04)}
@keyframes fnl-grow{from{transform:scaleY(0)}}
.fnl-lbl{margin-top:10px;text-align:center;padding:0 4px;min-width:0}
.fnl-lbl b{display:block;font-size:13.5px;transition:color .2s}
.fnl-lbl span{display:block;font-size:11.5px;color:var(--muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fnl-col:hover .fnl-lbl b{color:var(--brand)}
.fnl-pills{position:absolute;left:0;right:0;top:36px;height:190px;pointer-events:none}
.fnl-pill{position:absolute;transform:translate(-50%,-50%);padding:3px 9px;border-radius:999px;background:#fff;box-shadow:0 4px 12px -4px rgba(15,23,42,.18),inset 0 0 0 1px var(--line);font-size:12px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;animation:pop .45s var(--spring) both;pointer-events:none}
.fnl-pill.good{color:var(--good)}
.fnl-pill.low{color:#B45309}
.fnl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fnl-kpis div{padding:12px 14px;border-radius:12px;background:var(--bg);min-width:0}
.fnl-kpis small{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.fnl-kpis b{display:block;margin-top:2px;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fnl-kpis span{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fnl-seg-ctl button{padding:6px 11px;font-size:12.5px}
.fnl-prod-sel{width:auto;max-width:190px;padding:7px 32px 7px 10px;font-size:12.5px;background-position:right 8px center;background-size:15px}
.fnl-rank{display:flex;flex-direction:column;border-top:1px solid #F1F5F9;padding-top:10px}
.fnl-rank-head,.fnl-rank-row{display:grid;grid-template-columns:minmax(0,1.6fr) 80px minmax(0,1.2fr);gap:12px;align-items:center}
.fnl-rank-head{font-size:11.5px;font-weight:600;color:var(--muted);padding:0 8px 6px}
.fnl-rank-row{padding:8px;border:0;border-radius:10px;background:none;text-align:left;font:500 13px var(--font);color:var(--ink-2);cursor:pointer;transition:background .15s}
.fnl-rank-row:hover{background:var(--bg)}
.fnl-rank-row.on{background:var(--soft);color:var(--bar3)}
.fnl-rank-row .nm{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fnl-rank-row .rate{display:flex;align-items:center;gap:8px}
.fnl-rank-row .rate i{flex:1;height:6px;border-radius:3px;background:#E2E8F0;position:relative;overflow:hidden}
.fnl-rank-row .rate i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:3px;background:linear-gradient(90deg,var(--bar1),var(--brand))}
.fnl-rank-row .rate em{font-style:normal;font-weight:700;width:44px;text-align:right;font-variant-numeric:tabular-nums}
.w[data-span="6"] .fnl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.fnl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.fnl-lbl span{white-space:normal}}
/* =====================================================================
   SQUELETTE DE CHARGEMENT
   ===================================================================== */
.sk{display:block;border-radius:8px;background:linear-gradient(100deg,#EDF1F7 30%,#F8FAFC 50%,#EDF1F7 70%);background-size:300% 100%;animation:sk-shimmer 1.4s ease-in-out infinite}
@keyframes sk-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-card{display:flex;flex-direction:column;gap:10px;min-height:130px;pointer-events:none}
.sk-h{height:22px;width:220px;margin-bottom:8px;border-radius:7px}
.sk-t{height:15px}
.sk-s{height:11px;width:100%}
.sk-n{height:30px;width:58%;border-radius:9px;margin:4px 0}
.sk-spark{height:38px;margin-top:auto;border-radius:10px;opacity:.7}
.sk-bars{display:flex;align-items:flex-end;gap:8px;height:190px;margin-top:10px;padding-bottom:4px}
.sk-bars .sk{flex:1;border-radius:6px 6px 3px 3px}
.sk-funnel{gap:12%;padding:0 6%}
.sk-donut-row{display:flex;align-items:center;gap:20px;margin-top:10px}
.sk-donut{width:130px;height:130px;border-radius:50%;flex:none;-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);mask:radial-gradient(circle,transparent 52%,#000 53%)}
.sk-donut-row .sk-s{margin:10px 0}
.sk-row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #F1F5F9}
.sk-row:last-child{border-bottom:0}
.view.is-loading .wgrid > .sk-card:nth-child(odd) .sk{animation-delay:.15s}
/* Le vrai contenu remplace le squelette en fondu */
.view.sk-reveal{animation:sk-fade .45s var(--ease) both}
@keyframes sk-fade{from{opacity:.35}}
/* Erreur de chargement */
.load-error{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:60px 20px;margin-top:20px;border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.load-error .le-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#FEF3C7;color:#B45309;animation:pop .45s var(--spring)}
.load-error .le-ic svg{width:26px;height:26px}
.load-error h3{margin:8px 0 0;font-size:18px}
.load-error p{margin:0 0 8px;color:var(--muted);font-size:14px}

/* =====================================================================
   PANNEAU DE DÉTAIL (vente, dépense, client) — sous les fenêtres de modification
   ===================================================================== */
.dt-back{position:fixed;inset:0;z-index:94;background:rgba(15,23,42,.28);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.dt-back.on{opacity:1;visibility:visible}
.dt{position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(460px,100vw);background:#fff;box-shadow:-24px 0 60px -12px rgba(15,23,42,.25);transform:translateX(105%);transition:transform .45s var(--ease);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.dt::-webkit-scrollbar{display:none}
.dt.on{transform:none}
.dt-inner{display:flex;flex-direction:column;min-height:100%}
.dt-inner.fwd{animation:dt-fwd .35s var(--ease)}
.dt-inner.back{animation:dt-back .35s var(--ease)}
@keyframes dt-fwd{from{opacity:0;transform:translateX(30px)}}
@keyframes dt-back{from{opacity:0;transform:translateX(-30px)}}
.dt-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:18px 18px 14px 22px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #F1F5F9}
.dt-titles{flex:1;min-width:0}
.dt-titles h3{margin:0;font-size:18px;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-titles span{display:block;font-size:12.5px;color:var(--muted)}
.dt-titles span::first-letter{text-transform:uppercase}
.dt-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 22px 0;padding:18px 20px;border-radius:16px;background:linear-gradient(135deg,var(--soft),#fff);box-shadow:inset 0 0 0 1px rgba(59,130,246,.18)}
.dt-hero.out{background:linear-gradient(135deg,#FFFBEB,#fff);box-shadow:inset 0 0 0 1px #FDE68A}
.dt-hero b{font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dt-hero .tag{font-size:12px;padding:5px 12px}
.dt-ctx{display:flex;align-items:center;gap:8px;margin:12px 22px 0;font-size:13px;color:var(--ink-2)}
.dt-ctx svg{width:15px;height:15px;color:var(--brand)}
.dt-dl{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;margin:18px 22px 0;padding:16px 0;border-top:1px solid #F1F5F9;border-bottom:1px solid #F1F5F9;font-size:14px}
.dt-dl dt{color:var(--muted)}
.dt-dl dd{margin:0;text-align:right;color:var(--ink);font-weight:500;word-break:break-word}
.dt-link{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;font:600 14px var(--font);color:var(--brand);cursor:pointer}
.dt-link:hover{text-decoration:underline}
.dt-link svg{width:13px;height:13px}
.dt-muted{color:var(--muted);font-weight:500}
.dt-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding:14px 22px;background:rgba(255,255,255,.95);border-top:1px solid #F1F5F9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dt-foot .spacer{flex:1}
.dt-client{display:flex;align-items:center;gap:16px;margin:18px 22px 0}
.dt-av{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--bar2),var(--bar3));color:#fff;font-weight:800;font-size:18px}
.dt-kpis{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dt-kpis div{padding:10px 12px;border-radius:12px;background:var(--bg)}
.dt-kpis small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.dt-kpis b{display:block;font-size:16px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dt-sec{margin:18px 22px 0}
.dt-sec > small{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.dt-mbars{display:flex;align-items:flex-end;gap:5px;height:80px}
.dt-mbar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;cursor:default}
.dt-mbar i{display:block;width:100%;height:0;min-height:2px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#60A5FA,var(--brand));transition:height .7s var(--ease)}
.dt-mbar em{font-style:normal;font-size:10px;color:var(--faint)}
.dt-mbar:hover i{background:var(--bar3)}
.dt-chips{display:flex;flex-wrap:wrap;gap:6px}
.dt-hero-lbl{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:2px}
.dt-share{position:relative;width:58px;height:58px;flex:none}
.dt-share svg{width:100%;height:100%;transform:rotate(-90deg)}
.dt-share circle{fill:none;stroke:#DBEAFE;stroke-width:4}
.dt-share circle.fg{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:0 100;animation:dt-share .9s .15s var(--ease) forwards}
.dt-hero.out .dt-share circle{stroke:#FDE68A}.dt-hero.out .dt-share circle.fg{stroke:#D97706}
.dt-share span{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--ink)}
@keyframes dt-share{to{stroke-dasharray:var(--p) 100}}
.dt-ctx.up{color:#15803D}.dt-ctx.up svg{color:#16A34A}
.dt-ctx.down{color:#B91C1C}.dt-ctx.down svg{color:#DC2626}
.dt-kpis.four{grid-template-columns:repeat(2,1fr)}
.dt-mbar.empty em{opacity:.6}
.dt-mbar:hover em{color:var(--brand);font-weight:700}
.dt .hbars small{font-weight:500}
.md-tip .hd{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.12);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#93C5FD}
.fnl-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:0;border-radius:999px;background:var(--soft);color:var(--ink-2);font:600 12.5px var(--font);box-shadow:inset 0 0 0 1px rgba(59,130,246,.18)}
.fnl-chip em{font-style:normal;color:var(--brand)}
button.fnl-chip{cursor:pointer;transition:background .2s,transform .2s}
button.fnl-chip:hover{background:#DBEAFE;transform:translateY(-1px)}
.dt .recent .rec{margin:0;width:100%}
body.privacy .dt-hero b,body.privacy .dt-kpis b{filter:blur(7px)}
@media (max-width:480px){.dt-dl{grid-template-columns:1fr;gap:2px}.dt-dl dd{text-align:left;margin-bottom:8px}.dt-client{flex-direction:column;align-items:stretch}}

/* Barres des graphiques : poussent depuis l'axe */
.bar-grow{animation:bar-grow .8s var(--ease) both}
@keyframes bar-grow{from{transform:scaleY(0)}}
/* Apparition en cascade des widgets au chargement */
.app.enter .wgrid > .w{animation:rise .7s var(--ease) both;animation-delay:calc(.35s + var(--n,0) * .05s)}

/* Anneau d'objectif : texte qui rétrécit si besoin */
.ring .inner strong.long{font-size:22px}

@media (max-width:1100px){
  .wgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .w[data-span="2"]{grid-column:span 2}
  .w[data-span="3"],.w[data-span="4"]{grid-column:span 3}
  .w[data-span="6"],.w[data-span="8"],.w[data-span="12"],.w-add{grid-column:span 6}
  .w-resize{display:none}
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w[data-span="2"],.w[data-span="3"]{grid-column:span 1}
  .w[data-span="4"],.w[data-span="6"],.w[data-span="8"],.w[data-span="12"],.w-add{grid-column:span 2}
  .w-grip{opacity:1}
  .w:not(.w-kpi) .w-head{flex-wrap:wrap}
  .w:not(.w-kpi) .w-titles{flex-basis:100%}
  .w:not(.w-kpi) .w-tools{margin:4px -8px 0 auto}
}

/* ---------- Fournisseurs ---------- */
/* Factures à payer : une ligne = facture (clic → détail), ancienneté, montant, bouton « Payée » */
.payrows{display:flex;flex-direction:column}
.payrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #F1F5F9;font-size:13px}
.payrow:last-child{border-bottom:0}
.payrow-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:4px 8px;margin-left:-8px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.payrow-main:hover{background:var(--bg)}
.payrow .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;background:#FEF3C7;color:var(--s3)}
.payrow .ico svg{width:15px;height:15px}
.payrow .txt{min-width:0}
.payrow .txt b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payrow .txt span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payrow .badge{white-space:nowrap;font-size:11px;padding:2px 8px}
.payrow .amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:72px;text-align:right}
.payrow .btn svg{width:14px;height:14px}
@media (max-width:640px){
  .payrow{flex-wrap:wrap;row-gap:4px}
  .payrow-main{flex-basis:100%}
  .payrow .amt{margin-left:auto}
}
/* Évolution d'un fournisseur vs période précédente : hausse de dépense en rouge, baisse en vert */
.trend{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.trend.up{background:#FEE2E2;color:#B91C1C}
.trend.down{background:var(--good-bg);color:var(--good)}
.trend.flat{background:#F1F5F9;color:var(--muted)}
.trend.new{background:var(--soft);color:var(--brand)}
/* Fiche fournisseur */
.dt-av.sup{background:linear-gradient(135deg,#F59E0B,#B45309)}
.rec em.pend{font-style:normal;font-weight:600;color:#B45309}
.sup-contact{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;padding:12px 14px;border-radius:12px;background:var(--bg);font-size:14px}
.sup-contact div{display:flex;justify-content:space-between;gap:16px}
.sup-contact span{color:var(--muted)}
.sup-contact a{color:var(--brand);font-weight:600;text-decoration:none;word-break:break-all;text-align:right}
.sup-contact a:hover{text-decoration:underline}
.sup-contact p{margin:0;text-align:right;color:var(--ink);white-space:pre-wrap}
.sup-empty{margin:0 0 12px;font-size:13px;color:var(--muted)}
.sup-form{display:flex;flex-direction:column;gap:12px}
.sup-form textarea{resize:vertical;min-height:64px;font:500 14px/1.45 var(--font)}
.sup-form-acts{display:flex;justify-content:flex-end;gap:8px}
body.privacy .payrow .amt{filter:blur(6px)}