/* Fiche-moi la Paie — thème moderne (glass, dégradés, animations). Chargé APRÈS le <style> de index.html : il le surcharge, aucune logique touchée. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root{
  --ground:#f3f4fb; --surface:rgba(255,255,255,.72); --surface-2:rgba(255,255,255,.6); --surface-3:rgba(110,100,200,.1);
  --ink:#171a33; --muted:#575b7a; --faint:#8a8eaa;
  --line:rgba(80,80,150,.14); --line-strong:rgba(80,80,150,.26);
  --accent:#6a45ff; --accent-hover:#5532e6; --accent-soft:rgba(106,69,255,.09); --on-accent:#fff;
  --ok:#0f9d63; --ok-soft:rgba(15,157,99,.1); --ok-line:rgba(15,157,99,.35);
  --warn:#d97706; --warn-soft:rgba(217,119,6,.1); --warn-line:rgba(217,119,6,.38);
  --crit:#e11d48; --crit-soft:rgba(225,29,72,.09); --crit-line:rgba(225,29,72,.35);
  --s1:#7c5cff; --s2:#06b6d4; --s3:#10b981; --s4:#f59e0b; --gridln:rgba(80,80,150,.1);
  --shadow:0 1px 1px rgba(30,30,80,.04),0 10px 34px rgba(60,50,140,.1);
  --grad:linear-gradient(120deg,#7c5cff 0%,#4f8cff 55%,#22d3ee 100%);
  --glow:rgba(124,92,255,.16); --bg1:rgba(124,92,255,.22); --bg2:rgba(34,211,238,.18); --bg3:rgba(244,114,182,.14);
  --logo-filter:invert(1); --display:"Plus Jakarta Sans","IBM Plex Sans",system-ui,sans-serif;
  --r:20px; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#080a14; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.06); --surface-3:rgba(255,255,255,.09);
  --ink:#eef0ff; --muted:#a3a8c6; --faint:#6f7494;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18);
  --accent:#a48bff; --accent-hover:#c0b0ff; --accent-soft:rgba(140,110,255,.14); --on-accent:#0b0c1a;
  --ok:#34d399; --ok-soft:rgba(52,211,153,.12); --ok-line:rgba(52,211,153,.38);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.11); --warn-line:rgba(251,191,36,.4);
  --crit:#fb7185; --crit-soft:rgba(251,113,133,.12); --crit-line:rgba(251,113,133,.4);
  --s1:#8b6cff; --s2:#22d3ee; --s3:#34d399; --s4:#fbbf24; --gridln:rgba(255,255,255,.07);
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 14px 40px rgba(0,0,0,.45);
  --glow:rgba(140,110,255,.2); --bg1:rgba(110,80,255,.28); --bg2:rgba(34,211,238,.16); --bg3:rgba(236,72,153,.14);
  --logo-filter:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#080a14; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.06); --surface-3:rgba(255,255,255,.09);
  --ink:#eef0ff; --muted:#a3a8c6; --faint:#6f7494;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18);
  --accent:#a48bff; --accent-hover:#c0b0ff; --accent-soft:rgba(140,110,255,.14); --on-accent:#0b0c1a;
  --ok:#34d399; --ok-soft:rgba(52,211,153,.12); --ok-line:rgba(52,211,153,.38);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.11); --warn-line:rgba(251,191,36,.4);
  --crit:#fb7185; --crit-soft:rgba(251,113,133,.12); --crit-line:rgba(251,113,133,.4);
  --s1:#8b6cff; --s2:#22d3ee; --s3:#34d399; --s4:#fbbf24; --gridln:rgba(255,255,255,.07);
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 14px 40px rgba(0,0,0,.45);
  --glow:rgba(140,110,255,.2); --bg1:rgba(110,80,255,.28); --bg2:rgba(34,211,238,.16); --bg3:rgba(236,72,153,.14);
  --logo-filter:none; color-scheme:dark}

html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans","IBM Plex Sans",system-ui,sans-serif; background:var(--ground); position:relative; overflow-x:hidden}
/* fond animé : 3 halos qui dérivent */
body::before,body::after{content:""; position:fixed; z-index:-1; pointer-events:none; border-radius:50%; filter:blur(90px); will-change:transform}
body::before{width:62vmax; height:62vmax; left:-18vmax; top:-22vmax; background:radial-gradient(circle,var(--bg1),transparent 65%); animation:drift1 22s ease-in-out infinite alternate}
body::after{width:56vmax; height:56vmax; right:-20vmax; top:18vmax; background:radial-gradient(circle,var(--bg2),transparent 65%); animation:drift2 28s ease-in-out infinite alternate}
.wrap::before{content:""; position:fixed; z-index:-1; pointer-events:none; width:46vmax; height:46vmax; left:25vw; bottom:-26vmax; border-radius:50%; filter:blur(100px); background:radial-gradient(circle,var(--bg3),transparent 65%); animation:drift1 32s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(9vmax,7vmax) scale(1.15)}}
@keyframes drift2{to{transform:translate(-9vmax,-6vmax) scale(1.1)}}

h1,h2,h3,.kpi .big,.chart-card h3{font-family:var(--display); font-stretch:100%; letter-spacing:-.02em}
.wrap{max-width:1180px; padding-top:20px}

/* ---------- en-tête hero ---------- */
header.top{position:relative; margin:0 0 20px; padding:30px 32px 28px; border-radius:28px; color:#fff; overflow:hidden; isolation:isolate;
  background:linear-gradient(125deg,#4a2fd8 0%,#6a45ff 38%,#2f7dff 72%,#12b8d8 100%); box-shadow:0 22px 60px rgba(90,60,240,.35)}
header.top::before{content:""; position:absolute; inset:-40%; z-index:-1; opacity:.55;
  background:conic-gradient(from 0deg at 70% 40%,transparent,rgba(255,255,255,.28),transparent 30%,rgba(34,211,238,.4),transparent 60%); animation:spin 18s linear infinite}
header.top::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.2),transparent 55%)}
@keyframes spin{to{transform:rotate(360deg)}}
header.top .eyebrow,header.top .sub,header.top .sub b,header.top h1{color:#fff}
header.top .eyebrow{opacity:.8; letter-spacing:.14em}
header.top h1{font-size:clamp(28px,4.4vw,46px); font-weight:800; text-transform:none; letter-spacing:-.035em; font-stretch:100%}
header.top .sub{opacity:.88; max-width:62ch}
.logo-tile{background:rgba(255,255,255,.95); border-radius:.3em; box-shadow:0 6px 18px rgba(0,0,0,.25); animation:float 5s ease-in-out infinite}
.logo-tile .logo{filter:invert(1)}
@keyframes float{50%{transform:translateY(-5px) rotate(-3deg)}}
header.top .toggle{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4)!important; color:#fff; backdrop-filter:blur(8px); opacity:1; border-radius:14px!important; transition:.25s}
header.top .toggle:hover{background:rgba(255,255,255,.28); transform:translateY(-1px)}

/* ---------- onglets : pilule flottante + indicateur qui glisse ---------- */
.tabbar{position:sticky; top:12px; z-index:30; display:flex; gap:4px; width:max-content; max-width:100%; margin:0 auto 26px; padding:6px; overflow-x:auto;
  background:var(--surface); border:1px solid var(--line)!important; border-bottom:1px solid var(--line); border-radius:999px;
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); box-shadow:var(--shadow); scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar .tab{position:relative; z-index:1; border-radius:999px!important; padding:10px 20px; font-family:var(--display); font-stretch:100%; text-transform:none; letter-spacing:0; font-weight:700; font-size:14px; white-space:nowrap; color:var(--muted); background:transparent; transition:color .25s}
.tabbar .tab:hover{color:var(--ink)}
.tabbar .tab.active{background:transparent; color:#fff}
.tab-pill{position:absolute; z-index:0; top:6px; bottom:6px; left:0; width:0; border-radius:999px; background:var(--grad); box-shadow:0 6px 20px rgba(100,70,255,.45); transition:transform .45s cubic-bezier(.34,1.4,.5,1),width .45s cubic-bezier(.34,1.4,.5,1)}

/* ---------- cartes glass + halo qui suit la souris ---------- */
.card,.recon,.plan-box,.kpis .kpi{position:relative}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); padding:22px 24px; margin-bottom:18px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 60%)}
.card:hover::before{opacity:1}
.card:hover{border-color:var(--line-strong)}
.card.ledger,.card#findings,.card#auditOut,.card#craFindings,.card#otFindings,.card#taxFindings{padding:6px 8px}
.chart-card{padding:20px 22px 14px}
/* les cartes aux couleurs inline (accent / ok / warn) gardent leur teinte mais en verre */
.card[style*="border:"]{border-radius:var(--r)!important}
.card[style*="border:2px"]{border-width:1px!important; box-shadow:0 0 0 1px var(--accent) inset,var(--shadow)}
.card > .sechead h2,.section > .sechead h2{font-size:21px; font-weight:800; text-transform:none; font-stretch:100%; letter-spacing:-.025em}
.section{margin-top:34px}
.section > .sechead{border-top:0; padding-top:0; margin-bottom:14px; position:relative; padding-left:16px}
.section > .sechead::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:5px; border-radius:5px; background:var(--grad)}
.eyebrow{color:var(--accent)}
.toggle,.imp-drop,.qlink,.rulegrid input,.docbtn{border-radius:12px!important}
button[style*="border-radius"]{border-radius:12px!important}

/* boutons */
.qlink,button.qlink,#fullAutoBtn,#scanFolderBtn{background:var(--grad)!important; color:#fff!important; border:0!important; box-shadow:0 8px 22px rgba(100,70,255,.32); transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .25s}
.qlink:hover,#fullAutoBtn:hover,#scanFolderBtn:hover{transform:translateY(-2px) scale(1.015); box-shadow:0 14px 30px rgba(100,70,255,.45); filter:saturate(1.15)}
.qlink:active,#fullAutoBtn:active{transform:translateY(0) scale(.98)}
.qlink[style*="surface-2"]{background:var(--surface-2)!important; color:var(--accent)!important; border:1px solid var(--line-strong)!important; box-shadow:none}
#genBtn{background:linear-gradient(120deg,#10b981,#06b6d4)!important}
#fullAutoBtn{position:relative; overflow:hidden; border-radius:14px!important}
#fullAutoBtn::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%); transform:translateX(-120%); animation:shine 3.4s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(120%)}}
.tabbar .tab,.toggle,button{font-family:inherit}
input,select,textarea{transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,select:focus,textarea:focus{outline:none!important; border-color:var(--accent)!important; box-shadow:0 0 0 4px var(--accent-soft)}
select,input[type=number],input[type=text],input[type=email],textarea{background:var(--surface-2)!important; color:var(--ink)!important; border-color:var(--line-strong)!important; border-radius:11px!important}
.imp-drop{border:1.5px dashed var(--line-strong); background:var(--surface-2); transition:.3s}
.imp-drop:hover{border-color:var(--accent); background:var(--accent-soft); transform:translateY(-3px); box-shadow:0 14px 30px var(--glow)}
.plan-box{border-radius:16px; background:var(--surface-2)}
.plan-revtab th,.plan-revtab td{border-color:var(--line)}

/* ---------- KPI : carrousel qui glisse ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; border:0; background:transparent}
.kpis .kpi.card,.kpi{border:1px solid var(--line); border-radius:var(--r); padding:20px 22px 18px; overflow:hidden}
.kpi::before{left:0; top:0; width:100%; height:3px; background:var(--grad); opacity:.9; transform-origin:left; animation:grow 1s .3s both cubic-bezier(.2,.8,.2,1)}
.kpi.warn::before{background:linear-gradient(90deg,var(--warn),#fb923c)} .kpi.ok::before{background:linear-gradient(90deg,var(--ok),#22d3ee)}
@keyframes grow{from{transform:scaleX(0)}}
.kpi:hover{transform:translateY(-4px)}
.kpi .lab{color:var(--faint); letter-spacing:.09em}
.kpi .big{font-size:clamp(26px,2.6vw,34px); font-weight:800; font-variant-numeric:tabular-nums}
.kpi.accent .big{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.kpi.warn .big{color:var(--warn)} .kpi.ok .big{color:var(--ok)}
@media (max-width:760px){
  .kpis{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:2px 2px 12px; margin-right:-20px; scrollbar-width:none}
  .kpis::-webkit-scrollbar{display:none}
  .kpis > *{flex:0 0 78%; scroll-snap-align:start}
  header.top{padding:24px 20px; border-radius:22px; margin:0 0 16px}
  .card{padding:18px 16px}
}

/* ---------- graphiques ---------- */
.chart-svg{min-width:560px; overflow:visible}
.chart-svg .gl{stroke-dasharray:2 6; stroke-linecap:round}
.chart-svg .axline{stroke:var(--line-strong)}
.chart-svg .st1,.chart-svg .st2{stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 4px 8px var(--glow))}
.chart-svg .st1{stroke:var(--s1)} .chart-svg .st2{stroke:var(--s2); stroke-dasharray:none}
.chart-svg path.draw{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.6s .15s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart-svg path.area{stroke:none; opacity:0; animation:fade 1s .9s forwards}
@keyframes fade{to{opacity:1}}
.chart-svg rect[class^="f"]{transform-box:fill-box; transform-origin:bottom; animation:rise .9s cubic-bezier(.2,.9,.3,1.1) backwards; rx:4px; transition:filter .2s}
.chart-svg rect[class^="f"]:hover{filter:brightness(1.25)}
@keyframes rise{from{transform:scaleY(0)}}
.chart-svg .mk{r:5; stroke:var(--ground); stroke-width:3}
.chart-svg .guide{stroke:var(--accent); opacity:0; stroke-dasharray:4 4}
.chart-svg .endlab{font-weight:700}
.chart-svg .hit:hover{fill:var(--accent-soft)}
.chtip{background:var(--ground); border:1px solid var(--line-strong); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.35); backdrop-filter:none}
.legend2 i,.cov-legend i{border-radius:50%} .legend2 i.line{border-radius:3px}

/* ---------- tableaux ---------- */
table.grid th{color:var(--faint); border-bottom:1px solid var(--line-strong); font-size:11px; letter-spacing:.08em}
table.grid td{border-bottom:1px solid var(--line)}
tr.mrow{transition:background .2s}
tr.mrow:hover{background:linear-gradient(90deg,var(--accent-soft),transparent)}
tr.mrow td:first-child{border-left-width:4px; border-radius:6px 0 0 6px}
tr.detail td{background:var(--surface-2)}
.pill{border-radius:999px; padding:4px 11px; backdrop-filter:blur(6px)}
.badge{border-radius:999px!important}
.chk{font-weight:700}
.finding{transition:background .25s}
.finding:hover{background:var(--surface-2)}
.finding .ic{border-radius:12px; width:34px; height:34px}
.finding.info .ic{background:var(--grad); color:#fff; border:0}
.finding + .finding{border-top:1px solid var(--line)}
details.rules summary{color:var(--accent)}
.linetag{border-radius:6px}

/* ---------- calendrier de couverture ---------- */
.cv{border-radius:12px; transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s; animation:pop .5s backwards}
.cv:hover{transform:translateY(-4px) scale(1.06); box-shadow:0 12px 24px rgba(0,0,0,.25); z-index:2}
.cv.ok{background:linear-gradient(135deg,#10b981,#06b6d4)} .cv.half{background:linear-gradient(135deg,#f59e0b,#fb923c)} .cv.none{background:linear-gradient(135deg,#f43f5e,#e11d48)}
.cv.run{border-radius:12px}
.cv .d{border-radius:4px}
.cov-stat b{font-family:var(--display); font-weight:800}
@keyframes pop{from{opacity:0; transform:scale(.6)}}
.cov-year .cv:nth-child(2){animation-delay:.02s}.cov-year .cv:nth-child(3){animation-delay:.05s}.cov-year .cv:nth-child(4){animation-delay:.08s}.cov-year .cv:nth-child(5){animation-delay:.11s}.cov-year .cv:nth-child(6){animation-delay:.14s}.cov-year .cv:nth-child(7){animation-delay:.17s}.cov-year .cv:nth-child(8){animation-delay:.2s}.cov-year .cv:nth-child(9){animation-delay:.23s}.cov-year .cv:nth-child(10){animation-delay:.26s}.cov-year .cv:nth-child(11){animation-delay:.29s}.cov-year .cv:nth-child(12){animation-delay:.32s}.cov-year .cv:nth-child(13){animation-delay:.35s}

/* ---------- entrées en slide (changement d'onglet + apparition au scroll) ---------- */
[data-tab]:not([hidden]){animation:slideIn .6s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes slideIn{from{opacity:0; transform:translateY(28px) scale(.985)}}
[data-tab]:not([hidden]):nth-of-type(2){animation-delay:.05s}[data-tab]:not([hidden]):nth-of-type(3){animation-delay:.1s}[data-tab]:not([hidden]):nth-of-type(4){animation-delay:.15s}[data-tab]:not([hidden]):nth-of-type(5){animation-delay:.2s}[data-tab]:not([hidden]):nth-of-type(n+6){animation-delay:.25s}
.rv{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}
.kpis > *{animation:slideIn .6s backwards}
.kpis > *:nth-child(2){animation-delay:.07s}.kpis > *:nth-child(3){animation-delay:.14s}.kpis > *:nth-child(4){animation-delay:.21s}.kpis > *:nth-child(5){animation-delay:.28s}.kpis > *:nth-child(6){animation-delay:.35s}.kpis > *:nth-child(n+7){animation-delay:.42s}

footer.foot{border-top:1px solid var(--line); text-align:center}
::selection{background:var(--accent); color:#fff}
::-webkit-scrollbar{height:8px; width:10px} ::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:8px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-delay:0s!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none}
}

/* ---------- sections repliables + raccourcis ---------- */
.foldable > .sechead{cursor:pointer; user-select:none; align-items:center!important; position:relative; padding-right:34px!important}
.foldable > .sechead::after{content:""; position:absolute; right:6px; top:50%; width:9px; height:9px; margin-top:-7px; border-right:2.5px solid var(--muted); border-bottom:2.5px solid var(--muted); transform:rotate(45deg); transition:transform .3s,margin .3s}
.foldable.fold > .sechead::after{transform:rotate(-45deg); margin-top:-4px}
.foldable > .sechead:hover h2{color:var(--accent)}
.fold > :not(.sechead){display:none!important}
.fold > .sechead{margin-bottom:0!important}
.card.foldable.fold{padding-top:16px; padding-bottom:16px}
.section.foldable{margin-top:14px; margin-bottom:0}
.section.foldable > .sechead{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:15px 40px 15px 26px!important; backdrop-filter:blur(14px); transition:border-color .25s,background .25s}
.section.foldable > .sechead:hover{border-color:var(--line-strong)}
.section.foldable > .sechead::before{left:11px; top:13px; bottom:13px}
.section.foldable:not(.fold) > .sechead{margin-bottom:14px}
.section.foldable > .sechead .note{display:none}
@media (min-width:900px){.section.foldable > .sechead .note{display:inline}}
#subnav{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 14px; margin:-8px 0 8px; scrollbar-width:none}
#subnav::-webkit-scrollbar{display:none}
#subnav:empty{display:none}
.chip{flex:none; font:600 13px/1 var(--display); padding:9px 15px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); cursor:pointer; backdrop-filter:blur(10px); transition:.25s}
.chip:hover{color:var(--ink); border-color:var(--accent); transform:translateY(-1px)}
.chip.on{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
.chip.all{margin-left:auto; border-style:dashed}

/* ---------- onglet Paie : tableau de bord en grille (plus de longueur infinie) ---------- */
.wrap{display:grid; grid-template-columns:minmax(0,1fr); column-gap:18px; align-items:start}
.wrap > header.top,.wrap > .tabbar,.wrap > #subnav{order:-1}
.wrap > .tabbar{justify-self:center}
.wrap > footer.foot{order:9}
.wrap > .pv-evo,.wrap > .pv-audit,.wrap > .pv-rules,.wrap > .pv-led{margin-top:0}
.pv-evo{order:1} .pv-audit{order:2} .pv-rules{order:3} .pv-led{order:4}
.pv-evo .chart-svg{min-width:0}
.pv-evo .chart-scroll{overflow:visible}
.pv-led .ledger{max-height:520px; overflow:auto}
table.grid thead th{position:sticky; top:0; z-index:2; background:var(--ground); background:color-mix(in srgb,var(--ground) 88%,transparent); backdrop-filter:blur(10px)}
.pv-rules{padding:18px 20px!important}
.pv-rules > div[style*="grid"]{grid-template-columns:1fr 1fr!important}
@media (min-width:1000px){
  .wrap{grid-template-columns:repeat(12,minmax(0,1fr))}
  .wrap > *{grid-column:1/-1}
  .wrap > .pv-audit{grid-column:span 7}
  .wrap > .pv-rules{grid-column:span 5}
  .pv-evo .charts{grid-template-columns:1fr 1fr}
}

/* ---------- grille pour tous les onglets ---------- */
.wrap > .section{margin-top:0; margin-bottom:18px}
.ledger{max-height:440px; overflow:auto}
#fmpExtBanner{order:-1}
.hm-kpi{order:1} .hm-contract{order:2} .hm-find{order:3} .hm-cov{order:4}
.im-main{order:1} .im-docs{order:2}
.cr-gen{order:1} .cr-quota{order:2} .cr-audit{order:3} .cr-ot{order:4}
.ft-chain{order:1} .ft-km{order:2} .ft-hor{order:3} .ft-aide{order:4}
.ip-tax{order:1} .ip-km{order:2} .ip-mois{order:3}
@media (min-width:1000px){
  .wrap > .hm-contract{grid-column:span 7} .wrap > .hm-find{grid-column:span 5}
  .wrap > .im-main{grid-column:span 7} .wrap > .im-docs{grid-column:span 5; position:sticky; top:84px; max-height:calc(100vh - 100px); overflow:auto}
  .wrap > .cr-gen{grid-column:span 5} .wrap > .cr-quota{grid-column:span 7} .wrap > .cr-audit,.wrap > .cr-ot{grid-column:span 6}
  .wrap > .ft-chain{grid-column:span 7; grid-row:span 2} .wrap > .ft-km,.wrap > .ft-hor{grid-column:span 5}
  .wrap > .ip-tax{grid-column:span 5} .wrap > .ip-km{grid-column:span 7}
}
/* variables utilisées par le JS avec un repli clair : on les définit pour les deux thèmes */
:root{--good:var(--ok); --good-soft:var(--ok-soft); --bad:var(--crit); --mono:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- cellules alignées : mêmes hauteurs, tout est une carte avec son titre dedans ---------- */
.wrap{align-items:stretch}
.wrap > .im-docs{align-self:start}
.wrap > .section:not(.hm-kpi):not(.pv-evo){background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); padding:22px 24px}
.wrap > .section:not(.hm-kpi):not(.pv-evo) .card{background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; margin-bottom:0; border-radius:0}
.wrap > .section:not(.hm-kpi):not(.pv-evo) .card::before{display:none}
.wrap > .section:not(.hm-kpi):not(.pv-evo) .card.ledger{padding:0}
.wrap > .card > .sechead,.wrap > .section > .sechead{margin-top:0}
@media (min-width:1000px){ .hm-kpi .kpis{grid-template-columns:repeat(4,minmax(0,1fr))} }
.card > .sechead,.wrap > .section > .sechead{margin-bottom:18px!important}
/* le texte ne doit jamais déborder de sa carte */
.wrap > *{min-width:0}
.wrap > .section,.wrap > .card{overflow:hidden}
.wrap > .im-docs{overflow:auto}
#auditOut{overflow-x:auto}
#auditOut table.grid{min-width:0; table-layout:auto}
#auditOut table.grid th,#auditOut table.grid td{white-space:normal; text-align:left; vertical-align:top}
#auditOut table.grid th:first-child,#auditOut table.grid td:first-child{white-space:nowrap}
/* onglet CRA : génération + quotas en pleine largeur, 6 chiffres sur une ligne */
@media (min-width:1000px){ .wrap > .cr-gen,.wrap > .cr-quota{grid-column:1/-1} }
.cr-gen > div[style*="flex"]{align-items:center}
.cr-quota .kpis,.cr-ot .kpis,.ip-tax .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cr-quota .ledger{max-height:320px}
/* formulaires : champs alignés sur une grille régulière */
.ft-chain > div[style*="align-items:flex-end"]{display:grid!important; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px 14px!important; align-items:end!important}
.ft-chain > div[style*="align-items:flex-end"] label{display:block; min-width:0}
.ft-chain > div[style*="align-items:flex-end"] input,.ft-chain > div[style*="align-items:flex-end"] select{width:100%!important; max-width:100%!important; margin-top:4px}
.ft-chain > div[style*="align-items:flex-end"] button{width:100%}
.ft-chain label[style*="Adresse"],.ft-chain label:has(#fraisStartAddr),.ft-chain label:has(#fraisEndAddr){grid-column:span 2}
@media (max-width:640px){.ft-chain label:has(#fraisStartAddr),.ft-chain label:has(#fraisEndAddr){grid-column:auto}}
.hm-cov{order:2}.hm-contract{order:3}.hm-find{order:4}
/* adaptatif : la page prend la largeur de l'écran (jusqu'à 2000 px), marges fluides */
.wrap{max-width:2000px; padding-left:clamp(14px,2.6vw,56px); padding-right:clamp(14px,2.6vw,56px)}
@media (min-width:1500px){
  .hm-kpi .kpis{grid-template-columns:repeat(8,minmax(0,1fr))}
  .wrap > .hm-contract{grid-column:span 8} .wrap > .hm-find{grid-column:span 4}
  .wrap > .pv-audit{grid-column:span 8} .wrap > .pv-rules{grid-column:span 4}
  .wrap > .im-main{grid-column:span 8} .wrap > .im-docs{grid-column:span 4}
  .wrap > .cr-audit,.wrap > .cr-ot{grid-column:span 6}
  .wrap > .ft-chain{grid-column:span 8} .wrap > .ft-km,.wrap > .ft-hor{grid-column:span 4}
  .wrap > .ip-tax{grid-column:span 4} .wrap > .ip-km{grid-column:span 8}
}
@media (min-width:1900px){ .wrap{column-gap:24px} .kpi .big{font-size:clamp(28px,2vw,40px)} }
/* listes longues : hauteur plafonnée, défilement dans la carte (plus de grands vides à côté) */
#auditOut{max-height:min(68vh,640px); overflow:auto; padding-right:6px}
#findings,#craFindings,#otFindings,#taxFindings{max-height:min(60vh,520px); overflow:auto}
.pv-ledger,.pv-led .ledger{max-height:min(60vh,520px)}
.wrap > .pv-rules{overflow:visible}

/* ---------- carte Congés & RTT ---------- */
.hm-cp{order:3} .hm-contract{order:4} .hm-find{order:5}
.cp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.cp-t{padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2)}
.cp-t.cp-main{background:var(--grad); border:0; color:#fff; box-shadow:0 12px 30px rgba(100,70,255,.35)}
.cp-t.cp-main .cp-l,.cp-t.cp-main .cp-sub{color:rgba(255,255,255,.85)}
.cp-l{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--faint)}
.cp-v{font:800 34px/1.1 var(--display); margin:6px 0 8px; font-variant-numeric:tabular-nums} .cp-v small{font-size:15px; font-weight:600; color:var(--muted)}
.cp-main .cp-v small{color:rgba(255,255,255,.8)}
.cp-bar{height:8px; border-radius:8px; background:var(--surface-3); overflow:hidden} .cp-bar i{display:block; height:100%; border-radius:8px; background:var(--grad); transition:width 1s cubic-bezier(.2,.8,.2,1)}
.cp-sub{font-size:12.5px; color:var(--muted); margin-top:6px}
.cp-hist{margin-top:18px} .cp-chart{min-width:0!important; max-height:150px}
.cp-taken{margin-top:16px; font-size:13.5px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}

.why{display:block; margin:2px 0 8px 22px; padding:5px 10px; border-left:3px solid var(--line-strong); font-size:12.5px; line-height:1.5; color:var(--muted); background:var(--surface-2); border-radius:0 8px 8px 0}
.why.ok{border-color:var(--ok); color:var(--ok)} .why.warn{border-color:var(--warn); color:var(--ink); background:var(--warn-soft)} .why.info{border-color:var(--accent)}

/* ---------- barre d'import : la moto ---------- */
#impBar{position:fixed; left:50%; bottom:26px; z-index:80; width:min(460px,calc(100vw - 28px)); padding:14px 18px 12px; border-radius:20px; background:var(--ground); border:1px solid var(--line-strong); box-shadow:0 20px 50px rgba(0,0,0,.45); opacity:0; transform:translate(-50%,30px); pointer-events:none; transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.2); --p:0}
#impBar.show{opacity:1; transform:translate(-50%,0)}
.ib-txt{font-size:13.5px; margin-bottom:12px; color:var(--muted)} .ib-txt b{color:var(--ink)}
.ib-road{position:relative; height:10px; border-radius:10px; background:var(--surface-3); margin:22px 38px 6px 4px}
.ib-road::after{content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:repeating-linear-gradient(90deg,var(--faint) 0 10px,transparent 10px 20px); opacity:.5; transform:translateY(-50%)}

.ib-bike{position:absolute; left:calc(var(--p)*100%); bottom:-3px; line-height:0; transform:translateX(-50%); filter:drop-shadow(0 4px 4px rgba(0,0,0,.4)); animation:ibrev .35s linear infinite alternate}
@keyframes ibrev{to{margin-bottom:1.5px}}
.ib-car{position:absolute; right:-34px; bottom:-2px; font-size:26px; line-height:1; }
.ib-boom{position:absolute; right:-10px; bottom:6px; font-size:30px; opacity:0; transform:translateX(50%) scale(.2)}
#impBar.crash .ib-bike{animation:ibcrash 1.4s cubic-bezier(.2,.7,.3,1) forwards; transition:none}
#impBar.crash .ib-boom{animation:ibboom 1.2s .12s forwards}
@keyframes ibcrash{
  0%{transform:translateX(-50%) rotate(0)}
  18%{transform:translateX(-30%) translateY(-14px) rotate(25deg)}
  45%{transform:translateX(30%) translateY(-34px) rotate(160deg)}
  70%{transform:translateX(120%) translateY(0) rotate(290deg)}
  82%{transform:translateX(150%) translateY(-10px) rotate(330deg)}
  100%{transform:translateX(165%) translateY(2px) rotate(380deg)}}
@keyframes ibboom{0%{opacity:0; transform:translateX(50%) scale(.2)} 30%{opacity:1; transform:translateX(50%) scale(1.5)} 100%{opacity:0; transform:translateX(50%) scale(1.1)}}
.ib-road{background:transparent; border-bottom:3px solid var(--line-strong); border-radius:0; height:14px} .ib-road::after{top:auto; bottom:-3px; height:3px; transform:none; opacity:.9}

.cp-head{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start; margin-bottom:6px}
.cp-leg{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--muted)} .cp-leg i{display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:7px; vertical-align:-1px}
.cp-chart{min-width:0!important; max-height:none!important; width:100%; height:auto} .cp-val{font:700 12px var(--mono); paint-order:stroke; stroke:var(--ground); stroke-width:4px}
.cp-stats{display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:8px; font-size:13px; color:var(--muted)} .cp-stats b{color:var(--ink)}

.ib-bike svg{display:block; overflow:visible}
#dropOv{position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:rgba(8,10,20,.72); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .2s}
#dropOv.on{opacity:1}
#dropOv > div{padding:48px 64px; border:3px dashed var(--accent); border-radius:32px; text-align:center; color:#fff; background:rgba(120,90,255,.18); animation:float 2.4s ease-in-out infinite}
#dropOv b{display:block; font:800 26px var(--display); margin-bottom:8px} #dropOv span{opacity:.8; font-size:14px}
/* ---------- Congés & RTT v2 ---------- */
.cp-alert{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; padding:14px 18px; border-radius:16px; margin-bottom:16px; border:1px solid var(--line-strong); background:var(--surface-2)}
.cp-alert b{display:block; font-size:15.5px} .cp-alert span{display:block; font-size:13px; color:var(--muted); margin-top:3px}
.cp-alert.ok{background:var(--ok-soft); border-color:var(--ok-line)} .cp-alert.ok b{color:var(--ok)}
.cp-alert.info{background:var(--accent-soft); border-color:var(--accent)}
.cp-alert.warn{background:var(--warn-soft); border-color:var(--warn)} .cp-alert.warn b{color:var(--warn)}
.cp-alert.bad{background:var(--crit-soft); border-color:var(--crit)} .cp-alert.bad b{color:var(--crit)}
.cp-alert label{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px} .cp-alert input{width:64px; text-align:center; padding:6px 8px!important}
.cp-rtt{margin-top:14px}
.cp-days{display:flex; gap:4px; margin:10px 0 8px; height:22px}
.cp-days .d,.cp-key .d{display:block; border-radius:6px; background:var(--grad); min-width:6px}
.cp-days .d.u{background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line-strong)}
.cp-days .d.m{background:linear-gradient(90deg,var(--surface-3) var(--u),#6a8bff var(--u))}
.cp-key{white-space:nowrap} .cp-key .d{display:inline-block; width:12px; height:12px; vertical-align:-2px; margin:0 4px 0 8px}
.cp-key .d:first-child{margin-left:0}
#cpChart{position:relative; margin-top:10px; width:100%}
.cp-svg{display:block; max-width:100%; overflow:visible}
.cp-svg .g{stroke:var(--gridln); stroke-dasharray:3 5} .cp-svg .a{fill:var(--faint); font-size:11px} .cp-svg .v{fill:var(--s2); font:700 12px var(--mono); paint-order:stroke; stroke:var(--ground); stroke-width:4px}
.cp-svg .pt{fill:var(--s2); stroke:var(--ground); stroke-width:2} .cp-svg .gd{stroke:var(--accent); stroke-dasharray:3 3; opacity:0} .cp-svg .hp{fill:var(--s2); stroke:var(--ground); stroke-width:2; opacity:0}
.cp-tip{position:absolute; pointer-events:none; opacity:0; padding:8px 11px; border-radius:11px; background:var(--ground); border:1px solid var(--line-strong); box-shadow:0 12px 30px rgba(0,0,0,.4); font-size:12.5px; line-height:1.5; white-space:nowrap}
.cp-note{margin-top:16px; font-size:12px; color:var(--faint)}
/* ---------- barre d'import v3 : fond aux couleurs du thème, moto -> drapeau, pas de crash ---------- */
#impBar{width:min(480px,calc(100vw - 28px)); padding:16px 20px 14px; color:#fff; border:1px solid rgba(255,255,255,.3); background:linear-gradient(125deg,#5a3be8 0%,#3f7dff 62%,#16b6d8 100%); box-shadow:0 22px 60px rgba(70,60,230,.55)}
.ib-head{display:flex; justify-content:space-between; align-items:center; gap:12px}
.ib-txt{margin:0; color:rgba(255,255,255,.82)} .ib-txt b{display:block; color:#fff; font:700 15px var(--display)} #ibN{font-size:12.5px}
.ib-pct{font:800 24px var(--display); font-variant-numeric:tabular-nums; min-width:3.4ch; text-align:right}
.ib-road{height:4px; margin:34px 42px 8px 6px; border-radius:4px; background:rgba(255,255,255,.5); border-bottom:0}
.ib-road::after{display:none}
.ib-bike{bottom:-2px}
.ib-flag{position:absolute; right:-36px; bottom:-3px; font-size:26px; line-height:1; transform-origin:12% 100%}
#impBar.done .ib-flag{animation:ibwave .45s ease-in-out 4}
#impBar.done .ib-bike{animation:ibhop .55s ease-out}
@keyframes ibwave{50%{transform:rotate(-12deg) scale(1.1)}}
@keyframes ibhop{40%{transform:translateX(-50%) translateY(-9px)} 100%{transform:translateX(-50%)}}
/* ---------- contrôle automatique v2 ---------- */
#auditOut{max-height:none!important; overflow:visible!important; padding:0!important}
.wrap > .pv-audit{grid-column:1/-1!important}
.wrap > .pv-rules{grid-column:1/-1!important; order:5}
.pv-rules > div[style*="grid"]{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important}
.aud-verdict{padding:20px 24px; border-radius:20px; border:1px solid var(--line-strong)}
.aud-verdict.bad{background:var(--crit-soft); border-color:var(--crit)} .aud-verdict.warn{background:var(--warn-soft); border-color:var(--warn)} .aud-verdict.ok{background:var(--ok-soft); border-color:var(--ok)}
.aud-vt{font:800 clamp(20px,2.4vw,28px) var(--display); letter-spacing:-.02em}
.aud-verdict.bad .aud-vt{color:var(--crit)} .aud-verdict.warn .aud-vt{color:var(--warn)} .aud-verdict.ok .aud-vt{color:var(--ok)}
.aud-vs{margin-top:8px; font-size:14.5px; line-height:1.55} .aud-vf{margin-top:10px; font-size:12.5px; color:var(--muted)}
.aud-ks{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:14px 0 6px}
.aud-k{padding:14px 16px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line); border-left:4px solid var(--accent)}
.aud-k.bad{border-left-color:var(--crit)} .aud-k.warn{border-left-color:var(--warn)} .aud-k.ok{border-left-color:var(--ok)}
.aud-k .l{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--faint)} .aud-k .v{font:800 26px var(--display); margin:4px 0 2px} .aud-k .s{font-size:12.5px; color:var(--muted)}
.aud-h{font:700 15px var(--display); margin:24px 0 10px} .aud-h .faint{font-weight:400; font-size:12.5px}
#auditOut table.aud-cat td,#auditOut table.aud-mat td,#auditOut table.aud-cat th,#auditOut table.aud-mat th{text-align:center; white-space:nowrap; vertical-align:middle}
#auditOut table.aud-cat td.l,#auditOut table.aud-mat td.l,#auditOut table.aud-cat th.l,#auditOut table.aud-mat th.l{text-align:left}
.aud-scroll{max-height:520px; overflow:auto; border-radius:12px}
.aud-r{cursor:pointer} .aud-r:hover{background:var(--accent-soft)} .aud-r.iss td:first-child{box-shadow:inset 4px 0 0 var(--crit)}
.dp{display:block; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.dl{display:inline-block; margin-top:2px; font:700 12.5px var(--mono); padding:1px 8px; border-radius:999px}
.dl.m{background:var(--crit-soft); color:var(--crit)} .dl.p{background:var(--accent-soft); color:var(--accent)} .dl.z{color:var(--ok)}
.aud-d{display:none} .aud-d.open{display:table-row}
#auditOut .aud-d td{white-space:normal!important; text-align:left!important; padding:4px 10px 14px}
.aud-det{padding:12px 16px; font-size:13px; line-height:1.65; background:var(--surface-2); border-radius:12px}
.aud-na td{color:var(--faint); background:repeating-linear-gradient(135deg,var(--surface-3) 0 6px,transparent 6px 12px)}
.pill.info{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
.aud-meth{margin-top:20px} .aud-meth summary{cursor:pointer; font-weight:600; color:var(--accent)} .aud-meth ul{margin:10px 0 0; padding-left:20px; font-size:13px; line-height:1.7; color:var(--muted)}

.pill .pw{font-weight:500; opacity:.9}
.why-box{margin:14px 20px 0; text-align:left; white-space:normal; padding:14px 18px; border-radius:14px; border:1px solid var(--warn); background:var(--warn-soft); font-size:13.5px; line-height:1.6}
.why-box ul{margin:8px 0 0; padding-left:18px} .why-box li{margin-bottom:6px}
.why-foot{margin-top:8px; font-size:12px; color:var(--muted)}

.cumb{color:var(--crit); font-variant-numeric:tabular-nums}
/* accès rapide planning / Fitnet dans l'en-tête, sur tous les onglets */
.hero-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.hero-links .hl{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:12px; font:700 13.5px var(--display); color:#fff; text-decoration:none; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); backdrop-filter:blur(8px); transition:transform .2s,background .2s}
.hero-links .hl:hover{background:rgba(255,255,255,.3); transform:translateY(-2px)}
.rg{color:var(--ok); font-weight:600}

/* règles de calcul : d'où vient chaque valeur */
.rsrc{display:block; margin-top:4px; font-size:11.5px; line-height:1.35; color:var(--faint)}
.rsrc.bul,.rsrc.ctr{color:var(--ok)}
.rsrc.def{color:var(--warn)}
.rsrc.man{color:var(--accent)}
.rsrc a{color:inherit; text-decoration:underline}
.rnightfit{grid-column:1/-1; font-size:12.5px; line-height:1.5; color:var(--muted)}
.rnightfit:empty{display:none}