@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/bricolage.woff2') format('woff2')}

/* =====================================================================
   Projevia — design system (clair/sombre). Noms de classes préservés.
   ===================================================================== */
:root{
  --bg:#f3f6fc; --bg-soft:#eaeef4; --fg:#111725; --muted:#5a6472; --faint:#8b94a3;
  --accent:#2b64e0; --accent-2:#5a8cff; --accent-ink:#ffffff;
  --accent-soft:rgba(43,100,224,.09); --accent-line:rgba(43,100,224,.22);
  --card:#ffffff; --border:#e4e8f0; --border-strong:#d4dae6;
  --thead:#f6f8fd; --codebg:rgba(43,100,224,.08);
  --good:#158a4d; --good-bg:rgba(21,138,77,.10);
  --warn:#b7791f; --warn-bg:rgba(183,121,31,.12);
  --crit:#c0392b; --crit-bg:rgba(192,57,43,.09);
  --shadow-sm:0 1px 2px rgba(17,23,37,.06);
  --shadow-md:0 4px 16px rgba(17,23,37,.08);
  --shadow-lg:0 16px 40px rgba(17,23,37,.14);
  --r-sm:8px; --r:12px; --r-lg:16px; --maxw:1120px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",sans-serif;
  --display:'Bricolage Grotesque','Inter',-apple-system,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d1017; --bg-soft:#11151d; --fg:#e7ecf5; --muted:#98a2b3; --faint:#6b7482;
    --accent:#5f8cff; --accent-2:#7aa2ff; --accent-ink:#0c1220;
    --accent-soft:rgba(95,140,255,.14); --accent-line:rgba(95,140,255,.30);
    --card:#161c26; --border:#242c39; --border-strong:#313b4b;
    --thead:#1a212c; --codebg:rgba(95,140,255,.16);
    --good:#4cc47f; --good-bg:rgba(76,196,127,.12);
    --warn:#e0a94a; --warn-bg:rgba(224,169,74,.14);
    --crit:#e8756a; --crit-bg:rgba(232,117,106,.12);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 4px 16px rgba(0,0,0,.4);
    --shadow-lg:0 16px 40px rgba(0,0,0,.55);
  }
}
:root[data-theme="light"]{
  --bg:#f3f6fc; --bg-soft:#eaeef4; --fg:#111725; --muted:#5a6472; --faint:#8b94a3;
  --accent:#2b64e0; --accent-2:#5a8cff; --accent-ink:#ffffff;
  --accent-soft:rgba(43,100,224,.09); --accent-line:rgba(43,100,224,.22);
  --card:#ffffff; --border:#e4e8f0; --border-strong:#d4dae6;
  --thead:#f6f8fd; --codebg:rgba(43,100,224,.08);
  --good:#158a4d; --warn:#b7791f; --crit:#c0392b;
  --good-bg:rgba(21,138,77,.10); --warn-bg:rgba(183,121,31,.12); --crit-bg:rgba(192,57,43,.09);
  --shadow-sm:0 1px 2px rgba(17,23,37,.06);
  --shadow-md:0 4px 16px rgba(17,23,37,.08);
  --shadow-lg:0 16px 40px rgba(17,23,37,.14);
}
:root[data-theme="dark"]{
  --bg:#0d1017; --bg-soft:#11151d; --fg:#e7ecf5; --muted:#98a2b3; --faint:#6b7482;
  --accent:#5f8cff; --accent-2:#7aa2ff; --accent-ink:#0c1220;
  --accent-soft:rgba(95,140,255,.14); --accent-line:rgba(95,140,255,.30);
  --card:#161c26; --border:#242c39; --border-strong:#313b4b;
  --thead:#1a212c; --codebg:rgba(95,140,255,.16);
  --good:#4cc47f; --warn:#e0a94a; --crit:#e8756a;
  --good-bg:rgba(76,196,127,.12); --warn-bg:rgba(224,169,74,.14); --crit-bg:rgba(232,117,106,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--fg); line-height:1.6; font-size:16px;
  background:
    radial-gradient(1100px 460px at 50% -180px, var(--accent-soft), transparent 70%),
    var(--bg);
  background-attachment:fixed; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance}
.brand,.landing-hero h1,.hero h1{font-family:var(--display)}
h1{font-weight:800} h2{font-weight:750} h3{font-weight:700}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-soft)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 1.4rem}

/* ---------------------------------------------------------------- En-tête */
.app-header{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.app-header-in{max-width:var(--maxw);margin:0 auto;padding:.65rem 1.4rem;
  display:flex;align-items:center;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.12rem;
  letter-spacing:-.02em;text-decoration:none;color:var(--fg)}
.brand-mark{width:24px;height:24px;border-radius:7px;flex:none;position:relative;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));box-shadow:var(--shadow-sm)}
.brand-mark::after{content:"";position:absolute;inset:7px;border-radius:3px;background:var(--card)}
.brand-mark.small{width:16px;height:16px;border-radius:5px}
.brand-mark.small::after{inset:4px;border-radius:2px}
.app-nav{display:flex;align-items:center;gap:.35rem;flex:1;flex-wrap:wrap}
.nav-spacer{flex:1}
.nav-link{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500;
  padding:.42rem .7rem;border-radius:99px;transition:background .15s,color .15s}
.nav-link:hover{color:var(--fg);background:var(--accent-soft)}
.nav-user{color:var(--faint);font-size:.85rem;max-width:170px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Menu utilisateur (avatar + e-mail + déroulant) */
.user-menu{margin-left:.2rem}
.user-chip{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;
  padding:.28rem .5rem .28rem .3rem;border:1px solid var(--border);border-radius:99px;
  background:var(--card);box-shadow:var(--shadow-sm)}
.user-chip::-webkit-details-marker{display:none}
.user-chip:hover{border-color:var(--accent)}
.avatar{width:26px;height:26px;border-radius:50%;flex:none;display:inline-flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.8rem;color:#fff;
  background:linear-gradient(145deg,var(--accent),var(--accent-2))}
.user-email{font-size:.85rem;color:var(--fg);max-width:180px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.user-menu .caret{font-size:.7em;color:var(--muted)}
.dropdown-menu-right{right:0;left:auto}
@media (max-width:820px){.user-email{max-width:none}}
@media (max-width:560px){.user-email{display:none}}

.nav-search{margin:0;position:relative;display:inline-flex;align-items:center}
.nav-search-ic{position:absolute;left:.72rem;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none}
.nav-search input[type=search]{width:190px;height:36px;padding:0 .85rem 0 2.15rem;
  border:1px solid var(--border);border-radius:99px;background:var(--bg-soft);color:var(--fg);
  font-size:.88rem;transition:width .2s,border-color .15s,background .15s,box-shadow .15s}
.nav-search input[type=search]::placeholder{color:var(--faint)}
.nav-search input[type=search]:focus{width:240px;border-color:var(--accent);background:var(--card);
  outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.nav-search:focus-within .nav-search-ic{color:var(--accent)}

/* Icônes SVG (Lucide) */
.ic-svg{width:18px;height:18px;flex:none;vertical-align:-.2em}
.dropdown-menu .ic-svg{width:16px;height:16px}
.dropdown-menu a,.dropdown-menu button{gap:.6rem}
.data-table .actions .ic-svg{width:15px;height:15px;vertical-align:-.15em}
.subnav-link .ic-svg,.btn-primary .ic-svg,.btn-secondary .ic-svg{width:16px;height:16px}
.tab-ic{display:inline-flex;align-items:center;justify-content:center;width:1.4em}
.tab-ic .ic-svg{width:17px;height:17px}
.res-ic .ic-svg{width:17px;height:17px}
.search-page-form{display:flex;gap:.6rem;margin:.5rem 0 1.5rem}
.search-page-form input{flex:1}
.search-group{margin:1.4rem 0}
.search-group h2{font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.search-list{list-style:none;padding:0;margin:.4rem 0}
.search-list li{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;
  border:1px solid var(--border);border-radius:10px;margin-bottom:.4rem;background:var(--card)}
.search-list li a{font-weight:600;text-decoration:none}
.search-list li a:hover{text-decoration:underline}
.res-ic{width:1.3em;text-align:center;flex:none}
.theme-toggle{font:inherit;font-size:.82rem;color:var(--fg);background:var(--card);
  border:1px solid var(--border);border-radius:99px;padding:.32rem .7rem;cursor:pointer}
.theme-toggle:hover{border-color:var(--accent)}
.nav-toggle{display:none;background:var(--card);border:1px solid var(--border);border-radius:8px;
  color:var(--fg);font-size:1.1rem;cursor:pointer;padding:.2rem .55rem;margin-left:auto}

.app-main{min-height:64vh;padding:1.8rem 0 3rem;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.app-main{animation:none}}

.app-footer{border-top:1px solid var(--border);padding:1.4rem 0;margin-top:2rem}
.app-footer .container{display:flex;align-items:center;gap:.6rem;color:var(--faint);font-size:.85rem}

/* ---------------------------------------------------------------- Accueil */
.hero{padding:2rem 0 1rem}
.hero h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.05;margin:.2rem 0 .5rem}
.lead{font-size:1.12rem;color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}

.landing{padding:1rem 0 2rem}
.landing-hero{text-align:center;padding:3rem 1rem 2.5rem;max-width:760px;margin:0 auto;
  position:relative}
.landing-hero h1{font-size:clamp(2.2rem,6vw,3.5rem);line-height:1.06;margin:.5rem 0 .8rem;
  font-weight:800;letter-spacing:-.03em}
.landing-hero .lead{margin:0 auto;font-size:1.18rem}
.landing-cta{display:flex;gap:.7rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap}
.landing-cta .btn-primary,.landing-cta .btn-secondary{padding:.7rem 1.3rem;font-size:1rem}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;
  margin-top:1.5rem}
.feature{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.3rem;box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .18s}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feature-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:1.4rem;background:var(--accent-soft);margin-bottom:.7rem}
.feature h3{margin:0 0 .3rem;font-size:1.05rem}
.feature p{margin:0;font-size:.92rem}

/* Hero enrichi : texte + aperçu produit */
.landing-split{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:2rem 0 1rem}
.landing-split .landing-hero{text-align:left;margin:0;padding:.5rem 0;max-width:none}
.landing-split .landing-hero .lead{margin:0}
.landing-split .landing-cta{justify-content:flex-start}
.hero-preview{perspective:1000px}
.preview-card{background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-lg);overflow:hidden;transform:rotate(.5deg)}
.preview-head{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;
  border-bottom:1px solid var(--border);background:var(--bg-soft)}
.preview-dot{width:10px;height:10px;border-radius:50%;background:var(--border-strong);flex:none}
.preview-title{margin-left:.6rem;font-size:.78rem;color:var(--muted);font-weight:600}
.preview-body{padding:1rem 1.1rem 1.3rem}
.preview-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.pk{background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:.6rem .7rem}
.pk span{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.pk strong{font-size:1.1rem;font-family:var(--display);font-variant-numeric:tabular-nums}
.pk-pos strong{color:var(--good)}
.preview-spark{width:100%;height:92px;display:block}
.preview-spark .spark-line{stroke:var(--accent)}
.preview-spark .spark-area{fill:var(--accent);opacity:.15}
.preview-bars{display:flex;align-items:flex-end;gap:.4rem;height:44px;margin-top:.5rem}
.preview-bars span{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-2));
  border-radius:4px 4px 0 0;opacity:.85}
@media (max-width:860px){
  .landing-split{grid-template-columns:1fr;gap:1.6rem}
  .landing-split .landing-hero{text-align:center}
  .landing-split .landing-cta{justify-content:center}
  .hero-preview{order:-1;max-width:460px;margin:0 auto}
}

/* ---------------------------------------------------------------- Boutons */
.btn-primary,.btn-secondary,.btn-ghost,.btn-danger{
  display:inline-flex;align-items:center;gap:.4rem;border:1px solid transparent;border-radius:10px;
  padding:.55rem 1rem;font:inherit;font-weight:600;font-size:.92rem;line-height:1.2;cursor:pointer;
  text-decoration:none;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s,color .15s}
.btn-primary{background:linear-gradient(145deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);filter:saturate(1.05)}
.btn-primary:active{transform:none}
.btn-secondary{background:var(--card);color:var(--fg);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--accent-soft);color:var(--accent)}
.btn-danger{background:var(--crit);color:#fff;box-shadow:var(--shadow-sm)}
.btn-danger:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-sm{padding:.4rem .8rem;font-size:.85rem;border-radius:8px}
.linkbtn{background:none;border:none;color:var(--accent);cursor:pointer;padding:.15rem;
  font:inherit;font-weight:500;border-radius:6px}
.linkbtn:hover{text-decoration:underline}
.linkbtn.danger{color:var(--crit)}
.inline-form{display:inline;margin:0}

/* Barre d'action : les liens/boutons bruts deviennent des chips cohérentes */
.toolbar>a:not(.btn-primary):not(.btn-danger):not(.btn-secondary),
.toolbar>.inline-form>button.linkbtn{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--card);
  border:1px solid var(--border-strong);color:var(--fg);text-decoration:none;font-weight:600;
  font-size:.9rem;padding:.5rem .9rem;border-radius:10px;box-shadow:var(--shadow-sm);cursor:pointer}
.toolbar>a:not(.btn-primary):not(.btn-danger):not(.btn-secondary):hover,
.toolbar>.inline-form>button.linkbtn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.toolbar>.inline-form>button.linkbtn.danger:hover{border-color:var(--crit);color:var(--crit)}

/* ---------------------------------------------------------------- Flash */
.flash{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .95rem;border-radius:10px;
  margin-bottom:.75rem;border:1px solid var(--border);background:var(--card);
  box-shadow:var(--shadow-sm);font-size:.95rem}
.flash-ic{flex:none;width:1.2rem;height:1.2rem;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-size:.75rem;color:#fff;margin-top:.1rem}
.flash-success{border-left:3px solid var(--good);background:var(--good-bg)}
.flash-success .flash-ic{background:var(--good)} .flash-success .flash-ic::before{content:"✓"}
.flash-warning{border-left:3px solid var(--warn);background:var(--warn-bg)}
.flash-warning .flash-ic{background:var(--warn)} .flash-warning .flash-ic::before{content:"!"}
.flash-danger{border-left:3px solid var(--crit);background:var(--crit-bg)}
.flash-danger .flash-ic{background:var(--crit)} .flash-danger .flash-ic::before{content:"×"}

/* ---------------------------------------------------------------- Formulaires */
.auth-card{max-width:440px;margin:2.5rem auto;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1.9rem;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.auth-card h1{font-size:1.55rem;margin:.1rem 0 1.1rem}
.auth-brand{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.05rem;
  color:var(--fg);margin-bottom:1rem}
.auth-card form .btn-primary{width:100%;justify-content:center;margin-top:.5rem;padding:.7rem}
/* Formulaires d'éléments sur deux colonnes */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem}
.form-grid .field.span-2{grid-column:1 / -1}
.form-grid .field input[type=checkbox]{width:auto;margin-right:.4rem}
.form-actions{display:flex;gap:.7rem;align-items:center;margin-top:1.2rem;
  padding-top:1rem;border-top:1px solid var(--border)}
.form-actions .btn-primary{width:auto}
/* utilitaires (remplacent d'anciens styles inline) */
.form-card-wide{max-width:640px}
.w-month{width:5rem}
.full-width{width:100%}
.fine-print{font-size:.84rem;margin:.3rem 0 0}
.danger-title{font-size:1.05rem}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}
.account-info{display:flex;flex-direction:column;gap:.55rem;margin:.4rem 0 1.1rem}
.account-info div{display:flex;flex-direction:column;gap:.1rem}
.account-info dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.account-info dd{margin:0;font-weight:600}
.field{margin-bottom:.9rem;display:flex;flex-direction:column;gap:.35rem}
.field label{font-weight:600;font-size:.86rem;color:var(--muted);display:inline-flex;
  align-items:center;gap:.35rem}
.req{color:var(--crit);font-weight:700}
.help{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:.68rem;font-weight:700;
  cursor:help;position:relative;flex:none;line-height:1}
.help:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.help::after{content:attr(data-help);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(4px);background:var(--fg);color:var(--bg);
  padding:.5rem .65rem;border-radius:9px;font-size:.78rem;font-weight:500;line-height:1.4;
  width:max-content;max-width:250px;white-space:normal;text-align:left;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:60}
.help::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--fg);
  opacity:0;transition:opacity .15s ease;z-index:60}
.help:hover::after,.help:focus::after{opacity:1;transform:translateX(-50%) translateY(0)}
.help:hover::before,.help:focus::before{opacity:1}
@media (max-width:560px){.help::after{max-width:180px}}
.field input,.field select,.field textarea,.inline-fields input,.inline-fields select,
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],
select,textarea{
  padding:.58rem .75rem;border:1px solid var(--border-strong);border-radius:9px;font:inherit;
  background:var(--card);color:var(--fg);transition:border-color .15s,box-shadow .15s;width:100%}
.field input:focus,select:focus,textarea:focus,input:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.field-error{color:var(--crit);font-size:.82rem}
.checkbox{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;font-size:.92rem}
.checkbox input,.control-group input[type=checkbox]{width:auto}
.hint{color:var(--muted);font-size:.82rem;margin:.2rem 0 .8rem}
.auth-links{margin-top:1.1rem;font-size:.9rem;color:var(--muted)}
fieldset{border:1px solid var(--border);border-radius:var(--r);margin:1rem 0;padding:1rem}
fieldset legend{font-weight:700;padding:0 .45rem;font-size:.9rem;color:var(--muted)}
select[multiple]{min-height:6rem}

/* ---------------------------------------------------------------- Titres de page */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:1rem;margin-bottom:1.3rem;border-bottom:1px solid var(--border)}
.page-head h1{font-size:1.9rem;margin:0;line-height:1.08}
.page-head h2{margin:0}
.page-head .badge{margin-top:.35rem}
.head-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.toolbar{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin:1rem 0 1.4rem}

/* Barre d'action : sous-navigation (vues) + menu déroulant (commandes) */
.action-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:1rem 0 1.4rem}
.subnav{display:inline-flex;gap:.15rem;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:.25rem;box-shadow:var(--shadow-sm);max-width:100%;overflow-x:auto}
.subnav-link{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--muted);
  font-weight:600;font-size:.9rem;padding:.45rem .8rem;border-radius:9px;white-space:nowrap;
  transition:background .15s,color .15s}
.subnav-link:hover{color:var(--fg);background:var(--accent-soft)}
.subnav-link.on{color:var(--accent);background:var(--accent-soft)}
.subnav-link .ic{font-size:.95rem}
.dropdown{position:relative}
.dropdown>summary{list-style:none;cursor:pointer;user-select:none}
.dropdown>summary::-webkit-details-marker{display:none}
.dropdown .caret{display:inline-block;transition:transform .15s;font-size:.7em}
.dropdown[open] .caret{transform:rotate(180deg)}
.dropdown-menu{position:absolute;right:0;top:calc(100% + .4rem);min-width:200px;z-index:30;
  background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:.35rem;display:flex;flex-direction:column;gap:.05rem;animation:tabIn .16s ease}
.dropdown-menu form{margin:0;width:100%}
.dropdown-menu a,.dropdown-menu button{display:flex;align-items:center;gap:.55rem;width:100%;
  text-align:left;background:none;border:none;font:inherit;font-size:.9rem;font-weight:500;
  color:var(--fg);padding:.5rem .6rem;border-radius:8px;cursor:pointer;text-decoration:none}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--accent-soft);color:var(--accent)}
.dropdown-menu button.danger{color:var(--crit)}
.dropdown-menu button.danger:hover{background:var(--crit-bg);color:var(--crit)}
.dropdown-menu .ic{width:1.2em;text-align:center;opacity:.85;flex:none}
.dropdown-sep{height:1px;background:var(--border);margin:.3rem .2rem}
@media (max-width:560px){
  .action-bar{flex-direction:column;align-items:stretch}
  .dropdown>summary{width:100%;justify-content:center}
  .dropdown-menu{left:0;right:auto;width:100%}
}
hr{border:none;border-top:1px solid var(--border);margin:1.6rem 0}
section>h2,section>h3{scroll-margin-top:80px}
main h2{font-size:1.3rem;margin:1.8rem 0 .5rem}
main h3{font-size:1.05rem;margin:1.4rem 0 .4rem;color:var(--fg)}

/* ---------------------------------------------------------------- Cartes projet */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-top:1.2rem}
.project-card{display:flex;flex-direction:column;gap:.4rem;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:1.15rem;text-decoration:none;
  color:var(--fg);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .14s,box-shadow .16s,border-color .16s}
.project-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:0;transition:opacity .16s}
.project-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.project-card:hover::before{opacity:1}
.project-card h3{margin:0;font-size:1.1rem}
.project-card p{margin:0}
.card-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.chip-months{font-size:.8rem;font-weight:600;color:var(--fg);background:var(--bg-soft);
  border:1px solid var(--border);border-radius:99px;padding:.1rem .55rem;font-variant-numeric:tabular-nums}

.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin-top:1rem}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.15rem;box-shadow:var(--shadow-sm)}
.panel h2{font-size:1.15rem;margin-top:0}
.taxo-list{list-style:none;padding-left:0}
.taxo-list>li{padding:.3rem 0;border-bottom:1px solid var(--border)}
.taxo-list ul{list-style:none;padding-left:1rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.inline-fields{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0}
.inline-fields input,.inline-fields select{width:auto}
code{font-family:var(--mono);background:var(--codebg);color:var(--accent);padding:.1rem .4rem;
  border-radius:5px;font-size:.82rem;word-break:break-all}

/* ---------------------------------------------------------------- KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.85rem;margin:1.2rem 0}
.kpi{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:.95rem 1rem;box-shadow:var(--shadow-sm);
  transition:transform .14s,box-shadow .16s,border-color .16s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.kpi span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;margin-bottom:.25rem}
.kpi strong{font-size:1.5rem;font-weight:750;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.kpi-close{position:absolute;top:.4rem;right:.5rem;background:none;border:none;color:var(--faint);
  cursor:pointer;font-size:1rem;line-height:1;border-radius:4px}
.kpi-close:hover{color:var(--crit)}
.js-restore-cards{margin-bottom:.6rem}

.element-section{margin-top:1.8rem}

/* Éléments du scénario : menu latéral gauche + contenu à droite */
.tab-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.6rem;
  align-items:start;margin-top:1.8rem}
.tabs-wrap.vertical{position:sticky;top:74px}
.tabs.vertical{display:flex;flex-direction:column;gap:.15rem}
.tabs.vertical .tab{display:flex;align-items:center;justify-content:flex-start;gap:.55rem;
  width:100%;text-align:left;background:none;border:none;border-left:2px solid transparent;
  border-radius:8px;font:inherit;font-weight:600;font-size:.9rem;color:var(--muted);
  padding:.55rem .7rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.tab-ic{flex:none;width:1.35em;text-align:center;font-size:1rem;line-height:1}
.tab-label{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs.vertical .tab:hover{color:var(--fg);background:var(--accent-soft)}
.tabs.vertical .tab[aria-selected="true"]{color:var(--accent);background:var(--accent-soft);
  border-left-color:var(--accent)}
@media (min-width:761px){
  .tabs.vertical .tab-dash{margin-bottom:.45rem;padding-bottom:.7rem;
    border-bottom:1px solid var(--border);border-radius:8px}
}
.tab-count{font-size:.72rem;background:var(--bg-soft);color:var(--muted);border-radius:99px;
  padding:.05rem .5rem;font-weight:700;min-width:1.6em;text-align:center;line-height:1.5}
.tab[aria-selected="true"] .tab-count{background:var(--accent);color:var(--accent-ink)}
.tab-panel{animation:tabIn .28s ease}
.tab-panel[hidden]{display:none}
.tab-panel>.table-wrap:first-child,.tab-panel>h3:first-child{margin-top:0}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel-actions{display:flex;justify-content:flex-end;margin-bottom:.7rem}
.sub-config{margin-bottom:1.6rem}
.sub-config h3{margin-top:0;display:flex;align-items:center;gap:.5rem}
.rh-sub-title{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;margin:1.8rem 0 .4rem}
.rh-sub-title:first-child{margin-top:0}
.rh-sub-title .tab-count{background:var(--bg-soft);color:var(--muted)}
@media (prefers-reduced-motion:reduce){.tab-panel{animation:none}}

/* Mobile : le menu passe au-dessus, en défilement horizontal */
@media (max-width:760px){
  .tab-layout{grid-template-columns:1fr;gap:.6rem}
  .tabs-wrap.vertical{position:static;border-bottom:1px solid var(--border);
    overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.3rem}
  .tabs.vertical{flex-direction:row;min-width:max-content;gap:.1rem}
  .tabs.vertical .tab{border-left:none;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;
    white-space:nowrap}
  .tabs.vertical .tab[aria-selected="true"]{border-left:none;border-bottom-color:var(--accent)}
}
.milestones{list-style:none;padding-left:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.4rem}
.milestones li{padding:.5rem .7rem;background:var(--card);border:1px solid var(--border);
  border-radius:9px;font-size:.9rem}
.monthly-block{margin:1.2rem 0;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:.4rem .9rem}
.monthly-block summary{cursor:pointer;font-weight:600;padding:.5rem 0}

/* Bascule de granularité (mensuel / annuel) */
.period-toggle{display:inline-flex;gap:0;margin:.4rem 0 .2rem;border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden}
.period-toggle .linkbtn{padding:.35rem .9rem;color:var(--muted);border-radius:0;font-weight:600}
.period-toggle .linkbtn:hover{text-decoration:none;background:var(--accent-soft)}
.period-toggle .linkbtn.is-active{background:var(--accent);color:var(--accent-ink)}
.period-toggle .linkbtn+.linkbtn{border-left:1px solid var(--border)}

/* ---------------------------------------------------------------- Tables */
.table-wrap{overflow-x:auto;margin:.7rem 0 1.2rem;border:1px solid var(--border);
  border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-sm)}
.js-search{max-width:320px;margin:.7rem;width:calc(100% - 1.4rem)}
.data-table{width:100%;border-collapse:collapse;background:transparent;font-size:.93rem}
.data-table th,.data-table td{text-align:left;padding:.68rem .85rem;border-bottom:1px solid var(--border)}
.data-table tbody tr{transition:background .12s}
.data-table tbody tr:hover{background:var(--accent-soft)}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table thead th{background:var(--thead);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);font-weight:700;position:sticky;top:0}
.data-table td[data-value],.data-table .num{font-variant-numeric:tabular-nums}
.data-table .actions{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.data-table .actions a,
.data-table .actions .linkbtn{display:inline-flex;align-items:center;gap:.3rem;font:inherit;
  font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:none;background:transparent;
  border:1px solid transparent;border-radius:7px;padding:.3rem .55rem;cursor:pointer;line-height:1.2;
  transition:background .12s,color .12s}
.data-table .actions a:hover,
.data-table .actions .linkbtn:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}
.data-table .actions .linkbtn.danger{color:var(--muted)}
.data-table .actions .linkbtn.danger:hover{background:var(--crit-bg);color:var(--crit)}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--accent)}
th[data-dir="asc"]::after{content:" ▲";font-size:.65em;color:var(--accent)}
th[data-dir="desc"]::after{content:" ▼";font-size:.65em;color:var(--accent)}
.pager{display:flex;align-items:center;gap:.8rem;padding:.6rem .85rem;color:var(--muted);font-size:.85rem}

.badge{display:inline-flex;align-items:center;font-size:.74rem;font-weight:600;padding:.16rem .55rem;
  border-radius:99px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.badge-ok{background:var(--good-bg);color:var(--good)}
.badge-off{background:var(--crit-bg);color:var(--crit)}

/* ---------------------------------------------------------------- Graphiques */
.chart-controls{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0;padding:.9rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.control-group{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.control-group>strong{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.control-group label{font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem}
.control-group select,.control-group input[type=number]{width:auto}
.chart-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:.6rem;box-shadow:var(--shadow-sm)}
.chart-svg{width:100%;height:auto;touch-action:none;display:block}
.chart-axis{fill:var(--muted);font-size:11px}
.chart-legend{display:flex;gap:1.1rem;flex-wrap:wrap;margin:.6rem 0;font-size:.86rem}
.legend-item{display:inline-flex;align-items:center}
.legend-item i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.4rem}
.dist-title{margin-top:2rem}
.dist-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.6rem}
.dist-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:1rem;box-shadow:var(--shadow-sm)}
.dist-card h3{margin:0 0 .3rem;font-size:1rem}
.dist-card-wide{grid-column:1 / -1}
.dist-chart{width:100%;min-height:300px}
@media (max-width:760px){.dist-grid{grid-template-columns:1fr}}
.drill-panel{margin-top:1rem}
.drill-list{list-style:none;padding-left:0;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden}
.drill-list li{padding:.5rem .8rem;border-bottom:1px solid var(--border);display:flex;
  justify-content:space-between;gap:1rem;font-variant-numeric:tabular-nums}
.drill-list li:last-child{border-bottom:none}

/* ---------------------------------------------------------------- Chronologie */
.tl-toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .6rem}
.tl-zoom{display:inline-flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.tl-zoom button{padding:.3rem .7rem;background:none;border:none;color:var(--fg);cursor:pointer;
  font-weight:600;font:inherit;line-height:1}
.tl-zoom button+button{border-left:1px solid var(--border)}
.tl-zoom button:hover{background:var(--accent-soft);color:var(--accent)}
.tl-legend{font-size:.76rem;color:var(--muted)}
.tl-legend-mark{display:inline-block;width:0;height:.8em;border-left:1px dashed var(--accent);
  margin-right:.15rem;vertical-align:middle}
.tl-help{font-size:.76rem;color:var(--faint)}

.timeline-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--card);box-shadow:var(--shadow-sm);padding:.3rem}
#timeline{position:relative;min-width:100%;padding-bottom:.5rem}
.tl-ruler{position:relative;height:26px;border-bottom:1px solid var(--border)}
.tl-tick{position:absolute;top:5px;transform:translateX(-50%);font-size:.7rem;color:var(--faint);
  font-variant-numeric:tabular-nums}
.tl-milestone{position:absolute;top:0;width:0;border-left:1px dashed var(--accent-line);
  pointer-events:none;z-index:1}
.tl-row{position:relative;min-height:44px;border-bottom:1px solid var(--border)}
.tl-row:last-child{border-bottom:none}
.tl-rowlabel{position:absolute;left:0;top:10px;width:140px;font-size:.78rem;font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:.03em;z-index:3;background:var(--card)}

/* Chips « points » */
.tl-chip{position:absolute;height:26px;line-height:26px;
  background:linear-gradient(145deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 40%,var(--card)));
  border:1px solid var(--accent-line);border-radius:99px;font-size:.74rem;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .5rem;color:var(--fg);
  box-shadow:var(--shadow-sm);z-index:2;box-sizing:border-box}
.tl-chip.movable{cursor:grab;touch-action:none}
.tl-chip.dragging{cursor:grabbing;opacity:.92;z-index:6;box-shadow:var(--shadow-lg);border-color:var(--accent)}
.tl-chip.inactive{background:var(--bg-soft);border-color:var(--border);color:var(--muted)}

/* Barres « plages » (phases, services) */
.tl-bar{position:absolute;height:26px;line-height:26px;border-radius:8px;
  background:linear-gradient(145deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 30%,var(--card)));
  border:1px solid var(--accent-line);font-size:.74rem;color:var(--fg);box-shadow:var(--shadow-sm);
  z-index:2;box-sizing:border-box;overflow:hidden}
.tl-bar-label{display:block;padding:0 .55rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  pointer-events:none}
.tl-bar.movable{cursor:grab;touch-action:none}
.tl-bar.dragging{cursor:grabbing;opacity:.92;z-index:6;box-shadow:var(--shadow-lg);border-color:var(--accent)}
.tl-bar.inactive{background:var(--bg-soft);border-color:var(--border);color:var(--muted)}
.tl-handle{position:absolute;right:0;top:0;width:12px;height:100%;cursor:ew-resize;touch-action:none;
  border-left:1px solid var(--accent-line);border-radius:0 8px 8px 0;
  background:color-mix(in srgb,var(--accent) 18%,transparent)}
.tl-handle:hover{background:color-mix(in srgb,var(--accent) 34%,transparent)}

/* Focus clavier */
.tl-chip:focus-visible,.tl-bar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Guide de snapping + info-bulle du mois cible */
.tl-guide{position:absolute;top:0;width:0;border-left:2px solid var(--accent);z-index:7;
  pointer-events:none;display:none}
.tl-tip{position:absolute;top:0;transform:translateX(-50%);background:var(--accent);color:var(--accent-ink);
  font-size:.7rem;font-weight:700;padding:.1rem .4rem;border-radius:6px;z-index:8;pointer-events:none;
  white-space:nowrap;display:none}

/* ---------------------------------------------------------------- Divers */
.comment{border-left:3px solid var(--accent-line);padding:.4rem .8rem;margin:.5rem 0;
  background:var(--card);border-radius:0 8px 8px 0}
li.added{color:var(--good)} li.removed{color:var(--crit)}
.error-page{text-align:center;padding:4rem 1rem}
.error-page h1{font-size:3.5rem;color:var(--accent);margin-bottom:.4rem}

/* Utilitaires de mise en page */
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);
  font-weight:700;margin-bottom:.15rem}
.subtitle{margin:.4rem 0 0;font-size:.98rem;color:var(--muted)}
.subtitle .dot{margin:0 .45rem;color:var(--faint)}
.badge-role{background:var(--accent-soft);color:var(--accent);font-size:.8rem;padding:.32rem .75rem}
.toolbar-sep{width:1px;height:22px;background:var(--border);margin:0 .35rem}
.panel h2{font-size:1.05rem;margin:0 0 .85rem;display:flex;align-items:center;gap:.5rem}
.panel .taxo-list{margin-top:0}
.subtitle + *{margin-top:1rem}
.empty,.muted.empty{padding:.9rem;border:1px dashed var(--border-strong);border-radius:10px;
  color:var(--muted);text-align:center;font-size:.92rem}

/* ---------------------------------------------------------------- Dynamisme 2026 */
html{scroll-behavior:smooth}
/* Transition douce entre pages (navigateurs compatibles ; ignorée sinon) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s ease both}
::view-transition-new(root){animation:vt-in .28s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.app-header{view-transition-name:app-header}
.reveal{opacity:0}
.reveal.in{animation:reveal .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes flashIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.btn-primary:active,.btn-secondary:active,.btn-danger:active{transform:scale(.97)}
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.24rem;height:2px;
  background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease}
.nav-link:hover::after{transform:scaleX(1)}
.feature-ic{transition:transform .25s ease}
.feature:hover .feature-ic{transform:translateY(-3px) rotate(-5deg) scale(1.06)}
.brand-mark{transition:transform .3s ease}
.brand:hover .brand-mark{transform:rotate(8deg) scale(1.06)}
.kpi strong{transition:color .2s}
/* Transition douce lors du changement de thème */
body,.app-header,.panel,.kpi,.project-card,.feature,.data-table,.toolbar,.chart-box,
.auth-card,.timeline-scroll,.flash,.badge{transition:background-color .3s ease,border-color .3s ease,color .25s ease}
/* Tracé animé des courbes (piloté par charts.js) */
.chart-line{transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
/* Squelettes de chargement (shimmer) */
.skeleton{position:relative;overflow:hidden;background:var(--bg-soft);border-radius:12px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 55%,transparent),transparent);
  animation:shimmer 1.3s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton-chart{height:300px}
.skeleton-timeline{height:220px}
/* Survol des chips de chronologie */
.tl-chip.movable:not(.dragging):hover{transform:translateY(-2px);box-shadow:var(--shadow-md);
  border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.in{animation:none;opacity:1}
  .chart-line{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none !important}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width:820px){
  .nav-toggle{display:inline-block}
  .app-nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:.15rem;
    padding-top:.6rem;flex-basis:100%}
  .app-nav.open{display:flex}
  .nav-spacer{display:none}
  .nav-user{max-width:none}
  .app-header-in{flex-wrap:wrap}
  .page-head{flex-direction:column;align-items:flex-start}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .kpi strong{font-size:1.3rem}

  /* Tableaux -> cartes */
  .js-table thead{display:none}
  .js-table,.js-table tbody,.js-table tr,.js-table td{display:block;width:100%}
  .js-table tr{border:1px solid var(--border);border-radius:10px;margin:.6rem;padding:.4rem .6rem;
    background:var(--card)}
  .js-table tr:hover{background:var(--card)}
  .js-table td{display:flex;justify-content:space-between;gap:1rem;border:none;
    padding:.4rem .1rem;text-align:right}
  .js-table td::before{content:attr(data-label);font-weight:600;color:var(--muted);text-align:left}
  .js-table td.actions{justify-content:flex-start}
}
@media (max-width:420px){.kpi-grid{grid-template-columns:1fr}}

/* Impression (Imprimer / PDF via le navigateur) */
@media print{
  .app-header,.app-footer,.action-bar,.tabs-wrap,.panel-actions,.js-search,.pager,
  .chart-controls,.drill-panel,.nav-toggle,.form-actions,.kpi-close,.js-restore-cards,
  .dropdown,.landing-cta{display:none!important}
  body{background:#fff!important}
  .tab-panel[hidden]{display:block!important}       /* imprimer tous les onglets */
  .tab-layout{display:block!important}
  .kpi,.panel,.data-table,.dist-card,.project-card,.chart-box{box-shadow:none!important;break-inside:avoid}
  .container{max-width:none}
  a{color:#000!important;text-decoration:none!important}
}