:root { --overlay: rgba(255,255,255,0.6); --col1: 520px; --col2: 240px; --col3: 240px; --col4: 160px; }

html, body { height: 100%; }
body {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 100%),
    url("../img/AFMA-GRoup-zrAl0tg.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100%;
}

.glass { background: var(--overlay); backdrop-filter: blur(8px); }

/* Nav underline sized to text width */
.nav-underline { position: relative; padding-bottom: 2px; }
.nav-underline::after { content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-2px; height:2px; width:0; background:#fff; transition:width .18s ease; border-radius:2px }
a:hover .nav-underline::after { width: calc(100% + 8px) }
.nav-underline--active::after { width: calc(100% + 8px) }
.nav-underline--active { font-weight:700 }

/* Steps bar (demande groupée) */
.steps-bar{display:flex;gap:0;align-items:stretch}
.step{position:relative;flex:1 1 0%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;font-weight:800;padding:14px 16px;text-align:center}
.step--1{background:#F59E0B;border-top-left-radius:9999px;border-bottom-left-radius:9999px;z-index:3}
.step--2{background:#5AA2D8;z-index:2}
.step--3{background:#22C55E;border-top-right-radius:9999px;border-bottom-right-radius:9999px;z-index:1}
.step.has-arrow::after{content:"";position:absolute;right:-28px;top:0;width:28px;height:100%;background:inherit;clip-path:polygon(0 0, 100% 50%, 0 100%)}
@media (max-width: 768px){.steps-bar{flex-direction:column;gap:8px}.step--1,.step--2{margin-right:0}.step.has-arrow::after{display:none}.step{border-radius:9999px}}

/* Scrollable tables + sticky header pill */
.table-wrap{position:relative}
.sticky-pill-header{position:sticky;top:0;z-index:10;background:#F59E0B;color:#fff;border-radius:9999px;padding:12px 24px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.sticky-pill-header.pill-out{width:calc(100% + 80px);margin-left:-40px}
.sticky-pill-header .cols{display:grid;grid-template-columns:2.3fr 1fr 1fr 1fr;gap:16px;align-items:center}

.sticky-pill-header-assos{position:sticky;top:0;z-index:10;background:#F59E0B;color:#fff;border-radius:9999px;padding:12px 24px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.sticky-pill-header-assos.pill-out{width:calc(100% + 80px);margin-left:-40px}
.sticky-pill-header-assos .cols{display:grid;grid-template-columns:1.2fr 1fr 1.1fr 1.3fr;gap:16px;align-items:center}


.cols-assos{grid-template-columns:40% 1fr 1fr 1fr}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.table-pill thead.sr-only{display:none}
.table-scroll{max-height:28rem;overflow-y:auto;overflow-x:hidden;padding:0 24px 8px}
.table-pill{border-collapse:separate;border-spacing:0}
/* .cols-assos{grid-template-columns:var(--col1) var(--col2) var(--col3) var(--col4)} */
.cols-assos>div{padding:0 16px}
.first-col{width: 40%;}
/* .table-assos{table-layout:fixed;width:100%} */
/* .table-assos td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-assos col:nth-child(1), .cols-assos div:nth-child(1){width:var(--col1)}
.table-assos col:nth-child(2), .cols-assos div:nth-child(2){width:var(--col2)}
.table-assos col:nth-child(3), .cols-assos div:nth-child(3){width:var(--col3)}
.table-assos col:nth-child(4), .cols-assos div:nth-child(4){width:var(--col4)} */
.wide-action{width:360px}
.btn-disabled{opacity:.5;pointer-events:none}

/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:50}
.modal-panel{background:#fff;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.2);max-width:640px;width:92%;padding:24px}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:16px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;font-weight:600;padding:10px 18px}
.btn-primary{background:#F59E0B;color:#fff}
.btn-primary:hover{background:#F57C00}
.btn-danger{background:#fff;border:1px solid #ef4444;color:#ef4444}
.btn-danger:hover{background:#fee2e2}
.btn-muted{background:#fff;border:1px solid #cbd5e1;color:#0f172a}
.btn-muted:hover{background:#f1f5f9}

/* Filter chips */
.filter-bar{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid #1F4E79;border-radius:9999px;padding:10px 14px;box-shadow:0 4px 10px rgba(15,23,42,.08)}
.chip select{appearance:none;background:transparent;border:none;outline:none;font-weight:600;color:#0F3A60}
.chip .icon{width:20px;height:20px;color:#1F4E79}
.chip-export{border-color:#16A34A}

/* Metric blocks with attached pill */
.metrics{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.metrics{grid-template-columns:repeat(3,1fr)}}
.metric{position:relative;text-align:center}
.metric .pill{position:absolute;left:50%;transform:translateX(-50%);top:-18px;background:#F59E0B;color:#fff;font-weight:700;border-radius:9999px;padding:10px 18px;min-width:60%;box-shadow:0 8px 18px rgba(0,0,0,.08);z-index: 1;width: calc(100% + 20px);}
.metric .card{background:rgba(255,255,255,.85);backdrop-filter:blur(4px);border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,.08);padding:32px 24px;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.metric .value{font-size:64px;font-weight:900;color:#111827}